/* =============================================================================
   seanos.ai — homepage.
   Loaded only on `/` (HomeController passes it via $styles), so none of this
   affects the product, docs, checkout or admin pages.

   Design brief: a developer-tool landing page. Dark, product-forward, with the
   real admin UI above the fold and a replayed conversation instead of a wall
   of prose. Every class here is prefixed `h-` so it can never collide with the
   shared stylesheet.
   ========================================================================== */

.h-wrap { --h-ink:#e8eefc; --h-dim:#93a4c4; --h-line:rgba(255,255,255,.12);
          --h-navy:#080d1a; --h-navy2:#0f1628; --h-blue:#3b82f6; --h-cyan:#22d3ee;
          --h-wp:#3858e9; --h-joom:#f0a02c;
          --h-max:1180px; }
.h-sec { padding: clamp(56px, 7vw, 104px) 24px; }
.h-in  { max-width: var(--h-max); margin: 0 auto; }
.h-wrap h1,.h-wrap h2,.h-wrap h3,.h-wrap h4 { letter-spacing:-.022em; line-height:1.1; margin:0;
  color:inherit; }
/* The shared stylesheet colours headings with --color-fg (near-black in light
   mode). Every dark band here sets its own text colour, so headings must
   inherit rather than fight it — and the hero states it outright. */
.h-hero h1, .h-hero h2, .h-hero h3 { color:#fff; }
.h-eyebrow { font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
             color:var(--h-cyan); margin:0 0 14px; }
.h-h2 { font-size:clamp(28px,3.7vw,44px); font-weight:800; margin:0 0 14px; }
.h-lede { font-size:clamp(16px,1.5vw,18.5px); line-height:1.62; color:var(--h-dim); max-width:64ch; margin:0 0 34px; }
/* ---------- buttons ---------- */
.h-btn { display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:15.5px;
         font-weight:700; padding:13px 24px; border-radius:12px; border:1px solid transparent;
         cursor:pointer; text-decoration:none; transition:transform .18s, box-shadow .18s, background .18s; }
.h-btn--pri { background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff;
              box-shadow:0 10px 26px rgba(59,130,246,.36); }
.h-btn--pri:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(59,130,246,.46); }
.h-btn--ghost { background:rgba(255,255,255,.07); color:var(--h-ink); border-color:var(--h-line); }
.h-btn--ghost:hover { background:rgba(255,255,255,.14); transform:translateY(-2px); }
/* =========================================================================
   HERO — dark, product-forward
   ========================================================================= */
.h-hero { position:relative; overflow:hidden; color:var(--h-ink);
          background:
            radial-gradient(900px 520px at 78% -8%, rgba(99,102,241,.30), transparent 62%),
            radial-gradient(720px 520px at 6% 108%, rgba(34,211,238,.16), transparent 58%),
            linear-gradient(168deg, var(--h-navy2) 0%, var(--h-navy) 100%);
          padding: clamp(52px,6.5vw,92px) 24px clamp(40px,5vw,64px); }
/* drifting aurora + dot lattice, identical treatment to the consultancy site */
.h-hero::before { content:""; position:absolute; inset:-30%; pointer-events:none;
  background: radial-gradient(46% 38% at 24% 30%, rgba(59,130,246,.20), transparent 62%),
              radial-gradient(52% 44% at 78% 66%, rgba(99,102,241,.22), transparent 64%);
  animation: h-drift 28s ease-in-out infinite alternate; }
.h-hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(150,180,225,.13) 1px, transparent 1.4px);
  background-size:30px 30px;
  -webkit-mask-image: radial-gradient(128% 96% at 50% 34%, #000 22%, transparent 100%);
          mask-image: radial-gradient(128% 96% at 50% 34%, #000 22%, transparent 100%); }
@keyframes h-drift {
  0%   { transform:translate3d(-3%,-2%,0) scale(1); }
  100% { transform:translate3d(2.5%,2%,0) scale(1.07); }
}
.h-hero > * { position:relative; z-index:1; }
.h-hero-grid { max-width:var(--h-max); margin:0 auto; display:grid;
               grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center; }
.h-hero h1 { font-size:clamp(34px,5.1vw,58px); font-weight:800; margin:0 0 20px; }
.h-hero h1 .h-grad { background:linear-gradient(115deg,#67e8f9,#60a5fa 45%,#a78bfa);
                     -webkit-background-clip:text; background-clip:text; color:transparent; }
.h-hero-cta { display:flex; gap:13px; flex-wrap:wrap; margin:0 0 26px; }
.h-trust { display:flex; flex-wrap:wrap; gap:9px 10px; margin:0; padding:0; list-style:none; }
.h-trust li { font-size:12.5px; font-weight:700; color:#c3d3ee; background:rgba(255,255,255,.07);
              border:1px solid var(--h-line); padding:6px 12px; border-radius:8px; }
/* browser-framed product shot */
.h-shot { border-radius:15px; overflow:hidden; background:#0c1526; border:1px solid rgba(255,255,255,.15);
          box-shadow:0 34px 80px rgba(0,0,0,.55); }
.h-shot__bar { height:34px; background:#16243f; display:flex; align-items:center; gap:7px; padding:0 14px; }
.h-shot__bar i { width:10px; height:10px; border-radius:50%; background:#3a4a66; }
.h-shot__bar span { margin-left:10px; font-size:12.5px; color:#7e93b4; font-family:var(--font-mono,monospace); }
.h-shot img { width:100%; height:auto; display:block; }
/* provider strip */
.h-providers { max-width:var(--h-max); margin:clamp(34px,4vw,52px) auto 0; padding-top:26px;
               border-top:1px solid var(--h-line); }
.h-providers p { margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.14em;
                 text-transform:uppercase; color:#7f92b4; }
.h-providers ul { display:flex; flex-wrap:wrap; gap:10px 12px; list-style:none; margin:0; padding:0; }
.h-providers li { font-size:14.5px; font-weight:700; color:#cfe0f7; opacity:.92; }
.h-providers li + li::before { content:"·"; margin-right:12px; color:#4c5f80; }
/* =========================================================================
   REPLAY — a real conversation, typed back
   ========================================================================= */
.h-replay { background:var(--h-navy); color:var(--h-ink); border-top:1px solid rgba(255,255,255,.06); }
.h-replay .h-eyebrow { color:var(--h-cyan); }
.h-replay .h-h2 { color:#fff; }
.h-term { background:#0c1424; border:1px solid rgba(255,255,255,.14); border-radius:15px;
          overflow:hidden; box-shadow:0 28px 70px rgba(0,0,0,.5); }
.h-term__bar { height:36px; background:#141f36; display:flex; align-items:center; gap:7px; padding:0 14px;
               border-bottom:1px solid rgba(255,255,255,.07); }
.h-term__bar i { width:10px; height:10px; border-radius:50%; background:#3a4a66; }
.h-term__bar span { margin-left:10px; font-size:12.5px; color:#7e93b4; }
.h-term__body { padding:22px 24px 26px; font-family:var(--font-mono,monospace); font-size:14px; line-height:1.75;
                min-height:330px; }
@media (min-width:900px){ .h-term__body { min-height:580px; } }
.h-msg { opacity:1; }
/* Two-stage so the typing only starts when the panel is actually on screen:
   .h-armed hides (JS is present and will drive it), .h-play runs it. A visitor
   with JS blocked gets neither class and simply reads the conversation. */
[data-replay].h-armed .h-msg { opacity:0; transform:translateY(8px); }
[data-replay].h-armed.h-play .h-msg { animation:h-in .5s ease forwards; }
@keyframes h-in { to { opacity:1; transform:none; } }
.h-msg--you   { color:#9fb6da; margin-bottom:16px; }
.h-msg--you b { color:#67e8f9; font-weight:700; }
.h-msg--tool  { color:#7f92b4; margin-bottom:14px; font-size:13px; }
.h-msg--tool em { color:#a78bfa; font-style:normal; font-weight:700; }
.h-msg--ai    { color:#dbe7fb; white-space:pre-wrap; }
.h-msg--ai b  { color:#fff; }
.h-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#22d3ee;
         margin-right:8px; animation:h-pulse 1.4s ease-in-out infinite; }
@keyframes h-pulse { 0%,100%{opacity:.35;transform:scale(.85);} 50%{opacity:1;transform:scale(1);} }
/* =========================================================================
   BENTO — what it can do
   ========================================================================= */
.h-bento-sec { background:linear-gradient(180deg,#ffffff,#f2f6fc); color:#0f172a; }
/* =========================================================================
   PLATFORMS
   ========================================================================= */
.h-plat-sec { background:#0b1220; color:var(--h-ink); }
.h-plat-sec .h-h2 { color:#fff; }
.h-plat { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.h-plat__card { background:rgba(255,255,255,.045); border:1px solid var(--h-line); border-radius:18px;
                padding:30px; position:relative; overflow:hidden; transition:transform .2s, border-color .2s; }
.h-plat__card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.26); }
.h-plat__card::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent); }
.h-plat__card--wordpress { --accent:linear-gradient(90deg,#3858e9,#60a5fa); }
.h-plat__card--joomla    { --accent:linear-gradient(90deg,#f0a02c,#f6c667); }
.h-plat__head { display:flex; align-items:center; gap:13px; margin-bottom:6px; }
.h-plat__mark { width:38px; height:38px; flex:0 0 38px; }
.h-plat__mark svg { width:100%; height:100%; display:block; }
.h-plat__card--wordpress .h-plat__mark { color:#7aa0ff; }
.h-plat__card--joomla .h-plat__mark { color:#f6b95c; }
.h-plat__head h3 { font-size:22px; font-weight:800; color:#fff; }
.h-plat__req { font-size:13px; color:#8fa2c2; margin:0 0 22px; font-family:var(--font-mono,monospace); }
.h-tier { border-top:1px solid var(--h-line); padding-top:18px; margin-top:18px; }
.h-tier__label { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
.h-tier__name { font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:#8fa2c2; }
.h-tier__price { font-size:15px; font-weight:800; color:#fff; }
.h-tier__price small { display:block; font-size:11.5px; font-weight:600; color:#8fa2c2; letter-spacing:0; text-transform:none; }
.h-tier__row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.h-tier__row .h-btn { padding:11px 19px; font-size:14.5px; }
.h-scope { font-size:13.5px; color:#9fb2d0; margin:12px 0 0; line-height:1.55; }
/* pay buttons — reuse the shared .pay-btn look but tuned for the dark card */
.h-plat__card .pay-btn { border-radius:10px; }
.h-plat__card .pro-buy-row { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:0; }
.h-plat__card .pro-buy-row__form { margin:0; }
/* =========================================================================
   COMPARISON — tabbed, one table visible at a time
   ========================================================================= */
.h-cmp-sec { background:linear-gradient(180deg,#ffffff,#f2f6fc); color:#0f172a; }
.h-cmp-sec .h-eyebrow { color:#0f766e; }
.h-cmp-sec .h-lede { color:#51637d; }
.h-tabs { display:inline-flex; gap:4px; padding:5px; background:#e9eff8; border:1px solid #dbe5f2;
          border-radius:12px; margin:0 0 24px; }
.h-cmp-tabs > input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.h-tabs label { cursor:pointer; font-size:14.5px; font-weight:700; padding:9px 20px; border-radius:9px;
                color:#4a5f7e; transition:.15s; display:inline-flex; align-items:center; gap:8px; }
.h-tabs label:hover { color:#0f172a; }
.h-cmp__panel { display:none; }
#h-tab-wp:checked ~ .h-cmp__panels #h-panel-wp,
#h-tab-jm:checked ~ .h-cmp__panels #h-panel-jm { display:block; }
#h-tab-wp:checked ~ .h-tabs label[for="h-tab-wp"],
#h-tab-jm:checked ~ .h-tabs label[for="h-tab-jm"] { background:#fff; color:#0f172a; box-shadow:0 2px 6px rgba(15,30,55,.10); }
.h-cmp { width:100%; border-collapse:collapse; background:#fff; border:1px solid #e2e9f3;
         border-radius:14px; overflow:hidden; font-size:14.5px; }
.h-cmp thead th { background:#0f1a2e; color:#fff; font-weight:800; font-size:13px; letter-spacing:.05em;
                  text-transform:uppercase; padding:14px 16px; text-align:left; }
.h-cmp thead th.h-cmp__tier { text-align:center; width:110px; }
.h-cmp thead th.h-cmp__tier--pro { background:#16233d; }
.h-cmp tbody th { font-weight:500; color:#33455f; text-align:left; padding:13px 16px;
                  border-top:1px solid #eef3f9; line-height:1.5; }
.h-cmp tbody tr:nth-child(even) th, .h-cmp tbody tr:nth-child(even) td { background:#fafcfe; }
.h-cmp td { text-align:center; padding:13px 16px; border-top:1px solid #eef3f9; }
.h-cmp td.h-cmp__pro { background:#f7faff; }
.h-cmp tbody tr:nth-child(even) td.h-cmp__pro { background:#f2f7fe; }
.h-yes { color:#0f9d58; font-weight:800; font-size:17px; }
.h-no  { color:#c3cede; font-weight:800; font-size:17px; }
.h-cmp tfoot th { text-align:left; }
.h-cmp tfoot th, .h-cmp tfoot td { padding:15px 16px; border-top:2px solid #e2e9f3; font-weight:800; color:#0f172a; }
.h-cmp tfoot small { display:block; font-weight:600; font-size:12px; color:#6b7f9c; margin-top:3px; }
.h-cmp-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px; }
/* =========================================================================
   STEPS
   ========================================================================= */
.h-steps-sec { background:#0b1220; color:var(--h-ink); }
/* =========================================================================
   CLOSING CTA
   ========================================================================= */
.h-cta { text-align:center; color:var(--h-ink);
         background: radial-gradient(760px 420px at 50% -20%, rgba(99,102,241,.34), transparent 62%),
                     linear-gradient(168deg,#0f1628,#080d1a); }
/* ---------- reveal on scroll ---------- */
.h-rev { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.h-rev.is-shown { opacity:1; transform:none; }
/* ---------- responsive ---------- */
@media (max-width:960px){
  .h-hero-grid { grid-template-columns:1fr; }
  .h-plat { grid-template-columns:1fr; }
}
@media (max-width:620px){
  .h-bento { grid-template-columns:1fr; }
  .h-term__body { font-size:12.8px; padding:18px; }
}
@media (prefers-reduced-motion:reduce){
  .h-hero::before { animation:none; }
  .h-msg { opacity:1; transform:none; animation:none; }
  .h-rev { opacity:1; transform:none; transition:none; }
  .h-dot { animation:none; }
}
/* =========================================================================
   AMBIENT — slow drifting colour behind the content on every band, so the
   informative sections and tables sit on something alive rather than a flat
   fill. Three blurred blobs per band on independent, long, offset loops:
   the movement should read as "there is something behind this", never as an
   animation demanding attention. Transform-only, so it composites on the GPU.
   ========================================================================= */
.h-sec, .h-hero { position:relative; isolation:isolate; }
.h-amb { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.h-amb i { position:absolute; display:block; border-radius:50%; filter:blur(72px); opacity:.5;
           will-change:transform; }
.h-amb i:nth-child(1) { width:46vw; height:46vw; left:-8%;  top:-18%;
                        background:radial-gradient(circle,#3b82f6,transparent 68%);
                        animation:h-float1 34s ease-in-out infinite alternate; }
.h-amb i:nth-child(2) { width:38vw; height:38vw; right:-6%; top:22%;
                        background:radial-gradient(circle,#8b5cf6,transparent 68%);
                        animation:h-float2 41s ease-in-out infinite alternate; }
.h-amb i:nth-child(3) { width:32vw; height:32vw; left:38%;  bottom:-16%;
                        background:radial-gradient(circle,#22d3ee,transparent 68%);
                        animation:h-float3 29s ease-in-out infinite alternate; }
@keyframes h-float1 { from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(7vw,5vh,0) scale(1.18);} }
@keyframes h-float2 { from{transform:translate3d(0,0,0) scale(1.08);} to{transform:translate3d(-6vw,7vh,0) scale(.92);} }
@keyframes h-float3 { from{transform:translate3d(0,0,0) scale(.95);} to{transform:translate3d(5vw,-6vh,0) scale(1.2);} }
/* Light bands need it far weaker or it turns into tie-dye behind the tables. */
.h-bento-sec .h-amb i, .h-cmp-sec .h-amb i { opacity:.13; filter:blur(90px); }
/* Dark bands can carry more. */
.h-plat-sec .h-amb i, .h-steps-sec .h-amb i, .h-replay .h-amb i { opacity:.34; }
/* Cards and tables float above the ambient wash on their own surface. */
.h-card, .h-cmp, .h-plat__card, .h-step, .h-term { position:relative; z-index:1; }
.h-cmp-sec .h-cmp-wrap { background:rgba(255,255,255,.72); backdrop-filter:blur(8px);
                          border-radius:14px; box-shadow:0 18px 46px rgba(15,30,55,.09); }
/* =========================================================================
   INTERACTIVE DEMO — pick a question, watch it answered
   ========================================================================= */
.h-ask { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; padding:0; list-style:none; }
.h-term__body { transition:opacity .18s; }
@media (prefers-reduced-motion:reduce){
  .h-amb i { animation:none; }
}
/* =============================================================================
   v3 — BAND RHYTHM + INTERACTION
   The page ran hero(dark) → replay(dark) … steps(dark) → cta(dark), so it read
   as two heavy slabs at each end. Now it strictly alternates:
   hero D · replay L · bento D · explorer L · platforms D · compare L · close D.
   ========================================================================== */

/* ---- replay flips to LIGHT; the terminal is dark, so it pops harder here --- */
.h-replay { background:linear-gradient(180deg,#ffffff,#eef4fb); color:#0f172a; border-top:none; }
.h-replay .h-eyebrow { color:#0f766e; }
.h-replay .h-h2 { color:#0f172a; }
.h-replay .h-lede { color:#51637d; }
.h-replay .h-amb i { opacity:.16; filter:blur(88px); }
/* ---- bento flips to DARK glass ------------------------------------------- */
.h-bento-sec { background:#0b1220; color:var(--h-ink); }
/* ---- closing band: steps + CTA are ONE dark act, not two slabs ------------ */
.h-close { background:radial-gradient(760px 440px at 50% -10%, rgba(99,102,241,.30), transparent 62%),
                     linear-gradient(168deg,#0f1628,#080d1a); color:var(--h-ink); }
.h-close .h-h2 { color:#fff; }
.h-close__cta { text-align:center; margin:clamp(46px,5vw,68px) auto 0; padding-top:clamp(36px,4vw,52px);
                border-top:1px solid var(--h-line); max-width:720px; }
.h-close__cta .h-lede { margin-left:auto; margin-right:auto; }
.h-close__cta .h-hero-cta { justify-content:center; }
/* =========================================================================
   TOOL EXPLORER — every tool, searchable. Real catalogue data.
   ========================================================================= */
.h-tools-sec { background:linear-gradient(180deg,#ffffff,#f1f6fc); color:#0f172a; }
.h-seg { display:inline-flex; gap:3px; padding:4px; background:#e9eff8; border:1px solid #dbe5f2; border-radius:11px; }
.h-seg button { font:inherit; font-size:13.5px; font-weight:700; padding:8px 15px; border:0; border-radius:8px;
    background:transparent; color:#4a5f7e; cursor:pointer; transition:.15s; }
.h-seg button:hover { color:#0f172a; }
.h-seg button[aria-pressed="true"] { background:#fff; color:#0f172a; box-shadow:0 2px 6px rgba(15,30,55,.10); }
/* ---- comparison filter row ---------------------------------------------- */
.h-cmp-tools { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 18px; }
.h-toggle { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700;
    color:#4a5f7e; cursor:pointer; user-select:none; }
.h-toggle input { position:absolute; opacity:0; width:0; height:0; }
.h-toggle i { width:40px; height:23px; border-radius:20px; background:#d5dfec; position:relative;
    transition:.18s; flex:0 0 40px; }
.h-toggle i::after { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px;
    border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15,30,55,.3); transition:.18s; }
.h-toggle input:checked + i { background:#3b82f6; }
.h-toggle input:checked + i::after { transform:translateX(17px); }
.h-toggle input:focus-visible + i { box-shadow:0 0 0 4px rgba(59,130,246,.25); }
.h-cmp tbody tr.is-hidden { display:none; }
/* ---- animated stat counters --------------------------------------------- */
.h-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:clamp(34px,4vw,50px) 0 0;
    padding:0; list-style:none; }
/* ---- scroll progress + section rail ------------------------------------- */
.h-prog { position:fixed; top:0; left:0; height:3px; z-index:60; width:0;
    background:linear-gradient(90deg,#22d3ee,#3b82f6,#8b5cf6); transition:width .1s linear; }
@media (max-width:960px){ .h-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){
  .h-tl li { grid-template-columns:1fr; gap:3px; }
}


/* =============================================================================
   v4 — SIMPLIFIED. Five sections, strictly alternating:
   hero D · platforms L · see-it-work D · compare L · close D
   Everything sits inside .h-in so nothing can break the column alignment
   (the stats strip previously spanned the full hero and looked misaligned).
   ========================================================================== */
.h-hero .h-in { max-width:var(--h-max); margin:0 auto; }
.h-hero-grid { max-width:none; }
.h-providers { max-width:none; }

/* 2 · PLATFORMS → light */
.h-plat-sec { background:linear-gradient(180deg,#ffffff,#f1f6fc); color:#0f172a; }
.h-plat-sec .h-eyebrow { color:#0f766e; }
.h-plat-sec .h-h2 { color:#0f172a; }
.h-plat-sec .h-lede { color:#51637d; }
.h-plat-sec .h-amb i { opacity:.14; filter:blur(90px); }
.h-plat-sec .h-plat__card { background:#fff; border-color:#e2e9f3;
    box-shadow:0 1px 2px rgba(15,30,55,.05),0 12px 30px rgba(15,30,55,.07); }
.h-plat-sec .h-plat__card:hover { border-color:#cddcf0; box-shadow:0 22px 48px rgba(15,30,55,.13); }
.h-plat-sec .h-plat__head h3 { color:#0f172a; }
.h-plat-sec .h-plat__req { color:#6b7f9c; }
.h-plat-sec .h-tier { border-top-color:#eaf0f7; }
.h-plat-sec .h-tier__name { color:#6b7f9c; }
.h-plat-sec .h-tier__price { color:#0f172a; }
.h-plat-sec .h-tier__price small { color:#7b8da6; }
.h-plat-sec .h-scope { color:#51637d; }
.h-plat-sec .h-plat__card--wordpress .h-plat__mark { color:#3858e9; }
.h-plat-sec .h-plat__card--joomla .h-plat__mark { color:#e08a1e; }
.h-plat-sec .h-btn--ghost { background:#eff4fb; color:#1f3a57; border-color:#dfe9f6; }
.h-plat-sec .h-btn--ghost:hover { background:#e4edf8; }

/* 3 · SEE IT WORK → dark, text beside the terminal */
.h-replay { background:radial-gradient(760px 460px at 82% 0%, rgba(99,102,241,.26), transparent 62%),
                      linear-gradient(168deg,#0f1628,#080d1a); color:var(--h-ink); border-top:none; }
.h-replay .h-eyebrow { color:var(--h-cyan); }
.h-replay .h-h2 { color:#fff; }
.h-replay .h-lede { color:var(--h-dim); margin-bottom:26px; }
.h-replay .h-amb i { opacity:.32; }
.h-work { display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,54px); align-items:center; }
.h-work__list { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.h-work__list li { position:relative; padding-left:26px; color:#c2d2ea; font-size:15.5px; line-height:1.55; }
.h-work__list li::before { content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
    border-radius:50%; background:linear-gradient(135deg,#22d3ee,#6366f1); }
.h-work__list b { color:#fff; font-weight:800; }
.h-work__list span { color:#7f92b4; }
.h-term__body { min-height:0; }
@media (min-width:900px){ .h-term__body { min-height:400px; } }

/* 4 · COMPARE — tabs and the filter share one row */
.h-cmp-bar { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin:0 0 22px; }
.h-tabs { margin:0; }

/* 5 · CLOSE */
.h-close__inner { text-align:center; max-width:660px; }
.h-close__inner .h-lede { margin-left:auto; margin-right:auto; }
.h-close__inner .h-hero-cta { justify-content:center; }

@media (max-width:960px){ .h-work { grid-template-columns:1fr; } }