/* ==========================================================================
   DecisionOS Landing Page
   Tokens sourced from decision-os-studio.lovable.app (see brand guidelines)
   ========================================================================== */

:root{
  /* brand ramp */
  /* ── KM-59 · black and warm, no blue ─────────────────────────────────────
     Founder: "change the blue colour of all pills and cards to black and
     black-white-warm gradient." Re-applied here after the hero v10 design came
     over from the landing-page branch, which still carried the indigo ramp.

     Redefined at the TOKEN, not at 73 call sites, so every pill, chip, rule,
     dot and eyebrow moves together and nothing is left behind at the old hue.

     The ramp keeps its SEMANTICS, which are not "more blue" but "where does
     this sit": 50-200 are tints under dark text on light panels, 300-400 are
     the accent ON DARK sections (.section-dark .s-eyebrow, the funnel numbers,
     the orbit strokes), and 600-900 are ink on light. Mapping the whole ramp
     to black would have turned every light tint into a black slab and every
     dark-section accent invisible, so the light end goes warm-neutral and the
     accent end takes the page's own hero amber, which was already here.

     Measured on the two that matter: #e7c483 on the dark sections is 12.2:1,
     and #1a1815 as the new ink is 17.9:1 on white — both up from the blues. */
  --brand-50:#faf7f2; --brand-100:#f4efe6; --brand-200:#e7dfd1; --brand-300:#e7c483;
  --brand-400:#d8ad63; --brand-500:#3a332a; --brand-600:#1a1815; --brand-700:#141311; --brand-800:#0f0e0d; --brand-900:#0c0c0d;
  /* Black into warm bronze. NOT black-white-warm: every one of the six places
     this gradient is used sets `color:#fff` alongside it, so a white midpoint
     would erase the label sitting on top. The lightest stop here is 6.7:1
     against white, so the text holds the whole way across. */
  --brand-gradient: linear-gradient(150deg, #0c0c0d 0%, #2a2521 46%, #6b5a44 100%);

  /* semantic */
  --danger-50:#fef1f1; --danger-200:#fec8c8; --danger-500:#ef4343; --danger-600:#dc2828; --danger-800:#981b1b;
  --caution-50:#fffbeb; --caution-200:#fde68b; --caution-500:#f59f0a; --caution-600:#db7706; --caution-800:#91400d;
  --success-50:#f2fdf5; --success-200:#bbf7d0; --success-500:#21c45d; --success-600:#16a249; --success-800:#186334;

  /* neutrals (light) */
  --neutral-50:#f9fafb; --neutral-100:#f0f1f5; --neutral-200:#e1e4ea; --neutral-300:#c8cdd5;
  --neutral-400:#9ca3b0; --neutral-500:#636a79; --neutral-600:#4b5563; --neutral-700:#3a3f4b; --neutral-800:#171a21; --neutral-900:#111318;

  --bg:var(--neutral-50);
  --surface:#ffffff;
  --surface-sunken:var(--neutral-100);
  --text:var(--neutral-900);
  --text-dim:var(--neutral-600);
  --text-faint:var(--neutral-500);
  --hairline:var(--neutral-200);
  --hairline-strong:var(--neutral-300);

  --dark-bg:#111318; --dark-surface:#171a21; --dark-surface-raised:#1e2129; --dark-hairline:#2c303a; --dark-text:#f9fafb; --dark-text-dim:#c8cdd5;

  --terminal-bg:#111827; --terminal-fg:#d1d5db; --terminal-label:#e7c483;

  --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  --shadow-xs: 0 1px 2px 0 rgba(17,19,24,0.06);
  --shadow-md: 0 8px 30px rgba(17,19,24,0.10);

  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --serif-display:"Instrument Serif", Georgia, "Times New Roman", serif;

  --container: 1140px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased; font-size:16px;
}
h1,h2,h3,h4{ margin:0; text-wrap:balance; letter-spacing:-0.02em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,video{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--brand-600); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; border-radius:var(--radius-pill); padding:0 22px; height:48px; border:1px solid transparent; transition:filter .15s, background .15s; white-space:nowrap; }
.btn-primary{ background:var(--brand-gradient); color:#fff; box-shadow:var(--shadow-xs); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-sm{ height:38px; padding:0 18px; font-size:14px; }
.btn-lg{ height:52px; padding:0 28px; font-size:16px; }

/* "Log in" is a link, not a button: it is the door for people who already
   decided, and it must not compete with the one for people who have not.
   (Carried over from the landing page this replaces — the app's own front door.) */
.nav-login{ font-weight:600; font-size:14px; color:var(--text-dim); padding:0 4px; flex-shrink:0; }
.nav-login:hover{ color:var(--text); }

/* ---------- header / nav ---------- */
/* Floating glass pill — hidden over the hero, swipes down once you scroll past it. */
.site-header{
  position:fixed; top:14px; left:50%; z-index:100;
  width:min(1060px, calc(100% - 28px));
  transform:translateX(-50%) translateY(0);
  opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.site-header.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1; visibility:visible; pointer-events:auto;
}
/* ...which is what the line above always claimed, and had stopped doing: the
   resting state had been set to match .is-visible, so the pill sat over the
   hero from the first paint. It is out of the hero again, on every screen, and
   swipes down half a screen in (js/main.js). visibility, not just opacity, so
   a keyboard cannot tab into a pill nobody can see -- which matters most on a
   phone, where this pill is the only way into the menu. */
.site-header{
  transform:translateX(-50%) translateY(-140%);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .35s ease, visibility 0s linear .55s;
}
.site-header.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .35s ease, visibility 0s;
}
.header-pill{
  display:flex; align-items:center; gap:22px;
  height:60px; padding:0 8px 0 24px;
  border-radius:var(--radius-pill);
  background:rgba(252,252,253,0.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:0 10px 40px rgba(17,19,24,0.10), 0 2px 8px rgba(17,19,24,0.05);
}
/* ── KM-56 · the wordmark, matched to the app ────────────────────────────
   The same mark the app wears everywhere — DecisionOS, "OS" dropped back to
   55% — instead of the blue PNG lockup this design arrived with. Urbanist 600
   is the app's own face (tailwind.config.js), added to the Google Fonts
   request already on this page, so it costs no extra round trip. The
   -0.025em is Tailwind's `tracking-tight`, which is what KarmaLogo carries. */
.logo{ display:flex; align-items:center; flex-shrink:0; color:var(--text); }
.wordmark{
  font-family:"Urbanist", var(--sans);
  font-weight:600;
  font-size:19px;
  letter-spacing:-0.025em;
  line-height:1;
  white-space:nowrap;
  color:inherit;
}
.wordmark span{ opacity:.55; }
.site-footer .wordmark{ font-size:17px; }
/* Sits under the hero CTA as a quiet sign-off, not a second headline.
   The PNG is trimmed flush to its ink, while the headline glyphs carry a ~2.4px
   left side bearing, so the logo needs that nudge back to look aligned. */
/* The mark has a flat left edge; the headline G is round, so the logo needs to
   sit a few px right of the type origin to look aligned rather than adrift. */
.hero-logo{ height:26px; width:auto; margin-top:30px; margin-left:5px; opacity:.9; }
@media (max-width:860px){
  .logo .wordmark{ font-size:17px; }
  .hero-logo{ height:22px; margin-top:26px; margin-left:4px; }
}
.main-nav{ display:flex; gap:26px; margin:0 auto; }
.main-nav a{ font-size:14px; font-weight:500; color:var(--text-dim); transition:color .15s; }
.main-nav a:hover{ color:var(--text); }
.nav-cta{ flex-shrink:0; }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; background:none; border:none; margin-left:auto; border-radius:50%; }
.nav-toggle span{ display:block; width:19px; height:2px; background:var(--text); border-radius:var(--radius-sm); transition:transform .25s, opacity .2s; }
.site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:2px;
  margin-top:8px; padding:10px 18px 16px;
  border-radius:var(--radius-lg);
  background:rgba(252,252,253,0.88);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.65);
  box-shadow:0 10px 40px rgba(17,19,24,0.12);
}
.mobile-nav a{ padding:12px 4px; font-size:15px; font-weight:500; border-bottom:1px solid var(--hairline); }
.mobile-nav a:last-child{ border-bottom:none; }
.site-header.nav-open .mobile-nav{ display:flex; }

@media (max-width:860px){
  .main-nav, .nav-cta, .header-pill .nav-login{ display:none; }
  .nav-toggle{ display:flex; }
  .header-pill{ height:56px; padding:0 8px 0 20px; }
}

/* ---------- hero ---------- */
:root{ --hero-amber:#e7c483; --hero-ink:#181207; }
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-start; overflow:hidden; color:var(--hero-ink); background:var(--hero-amber); }
.hero-media{ position:absolute; inset:0; z-index:0; background:var(--hero-amber); }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:78% center; }
/* Amber-tinted veil: matches the wall, so it extends the clean type zone without reading as a scrim. */
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(231,196,131,0.55) 0%, rgba(231,196,131,0.42) 30%, rgba(231,196,131,0.14) 45%, rgba(231,196,131,0) 58%); }
/* Sits high (roughly at the subject's eye-line) and hugs the left edge, clear of the subject. */
.hero-content{
  position:relative; z-index:2; width:100%; max-width:none;
  padding:clamp(120px,24vh,250px) 24px 80px clamp(24px,5.5vw,80px);
}
.hero-copy{ max-width:560px; }
.eyebrow{ font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-700); margin:0 0 18px; }
.hero-title{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(40px,4.9vw,60px); line-height:1.04; letter-spacing:-0.035em; margin:0 0 30px; color:var(--hero-ink);
}
/* Tagline shares the headline's font and left edge — only weight and colour separate it. */
.hero-title em{
  display:block; margin-top:.32em;
  font-style:normal; font-weight:600; color:var(--brand-700);
  font-size:.5em; line-height:1.28; letter-spacing:-0.018em;
}
.hero-sub{ font-size:clamp(15.5px,1.4vw,17px); color:rgba(24,18,7,0.72); max-width:400px; margin:0 0 26px; line-height:1.55; }
.microline{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.6); margin-top:18px; }
.microline.center{ text-align:center; color:var(--text-faint); }
.microline-dark{ color:rgba(24,18,7,0.55); }
.hero-copy .microline{ max-width:300px; }

.reveal{ opacity:0; transform:translateY(14px); animation:reveal-in .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d,0s); }
@keyframes reveal-in{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

.scroll-cue{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:2; width:26px; height:42px; border:2px solid rgba(24,18,7,0.35); border-radius:var(--radius-lg); }
.scroll-cue span{ position:absolute; top:8px; left:50%; width:4px; height:8px; background:var(--hero-ink); border-radius:var(--radius-sm); transform:translateX(-50%); animation:cue-drop 1.8s ease infinite; }
@keyframes cue-drop{ 0%{opacity:1; transform:translate(-50%,0);} 70%{opacity:0; transform:translate(-50%,14px);} 100%{opacity:0;} }

@media (max-width:760px){
  .hero{ display:block; min-height:auto; }
  .hero-media{ position:relative; height:52svh; min-height:340px; }
  .hero-bg{ object-position:66% center; }
  .hero-scrim{ background:linear-gradient(180deg, rgba(24,18,7,0) 55%, rgba(24,18,7,0.18) 100%); }
  .hero-content{ position:relative; padding:40px 24px 64px; background:var(--hero-amber); }
  .hero-copy{ max-width:none; }
  .scroll-cue{ display:none; }
}

/* ---------- sections (generic) ---------- */
.section{ padding:104px 0; }
.section-sunken{ background:var(--surface-sunken); }
.section-dark{ background:var(--dark-bg); color:var(--dark-text); }
.section-dark .s-lead{ color:var(--dark-text-dim); }
.section-dark .s-eyebrow{ color:var(--brand-300); }
.section-dark .s-eyebrow::before{ background:var(--brand-300); }

.s-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-600); margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.s-eyebrow::before{ content:""; width:18px; height:1px; background:var(--brand-600); }
.s-eyebrow.center{ justify-content:center; }
.s-eyebrow.center::before{ display:none; }
.s-title{ font-size:clamp(28px,4vw,42px); font-weight:800; margin:0 0 20px; }
.s-title em{ font-style:normal; color:var(--brand-600); }
.section-dark .s-title em{ color:var(--brand-300); }
.s-title.center{ text-align:center; }
.s-lead{ font-size:16.5px; color:var(--text-dim); max-width:62ch; margin:0 0 40px; }
.s-lead.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Dark brand-gradient ground with a grid, so the white panel reads as a lit card on top. */
#problem{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(80% 46% at 18% 46%, rgba(231,196,131,0.34) 0%, rgba(231,196,131,0) 62%),
    radial-gradient(78% 44% at 84% 58%, rgba(231,196,131,0.42) 0%, rgba(231,196,131,0) 60%),
    #111318;
}
#problem > .wrap{ position:relative; z-index:1; }

/* Ruled grid, oversized vertically so the parallax shift never exposes an edge. */
.grid-bg{
  position:absolute; left:0; right:0; top:-18%; bottom:-18%;
  z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(231,196,131,0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(231,196,131,0.12) 1px, transparent 1px);
  background-size:var(--grid-cell,32px) var(--grid-cell,32px);
  -webkit-mask-image:radial-gradient(115% 85% at 50% 45%, #000 35%, transparent 78%);
  mask-image:radial-gradient(115% 85% at 50% 45%, #000 35%, transparent 78%);
  will-change:transform;
}

/* ---------- panel: a rounded container that holds a whole section ---------- */
.panel{
  background:var(--surface); border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius-lg); padding:clamp(28px,3.6vw,56px);
  box-shadow:0 40px 80px -20px rgba(6,8,26,0.55), 0 8px 24px rgba(6,8,26,0.28);
  will-change:transform;
}
.panel-head{ max-width:760px; margin:0 auto clamp(28px,3vw,40px); text-align:center; }
.panel-head .s-title{ margin-bottom:16px; }
.panel-head .s-lead{ margin:0 auto; }

/* ---------- problem section ---------- */
/* 6-col grid so five cards resolve to a filled 3 + 2, never an orphan. */
.problem-cards{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:14px; margin-bottom:14px;
}
.problem-card{ grid-column:span 2; }
.problem-card:nth-child(4), .problem-card:nth-child(5){ grid-column:span 3; }
@media (max-width:900px){
  .problem-cards{ grid-template-columns:repeat(2,1fr); }
  .problem-card, .problem-card:nth-child(4), .problem-card:nth-child(5){ grid-column:span 1; }
  .problem-card:nth-child(5){ grid-column:span 2; }
}
@media (max-width:560px){
  .problem-cards{ grid-template-columns:1fr; }
  .problem-card:nth-child(5){ grid-column:span 1; }
}
.problem-card{
  background:var(--surface-sunken); border:1px solid var(--hairline);
  border-radius:var(--radius-md); padding:22px 24px;
}
.problem-card h3{ font-size:16px; font-weight:700; margin:0 0 8px; letter-spacing:-0.015em; }
.problem-card p{ font-size:14px; color:var(--text-dim); line-height:1.6; }

.compare-stack{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.compare-card{ border-radius:var(--radius-md); padding:22px 24px; }
.compare-old{ background:var(--neutral-800); color:var(--neutral-200); }
.compare-new{ background:var(--brand-50); border:1px solid var(--brand-200); color:var(--brand-800); }
.compare-label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; opacity:.7; }

/* ---------- 10-second wow ---------- */
.wow-timeline{ max-width:720px; margin:0 auto; }
.wow-step{ border-left:2px solid var(--brand-500); padding:4px 0 4px 22px; margin-bottom:4px; }
.wow-step-final{ border-left-color:var(--success-500); }
.wow-tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-300); margin-bottom:10px; }
.wow-quote{ font-size:22px; font-weight:600; line-height:1.4; }
.wow-arrow{ text-align:center; color:var(--text-faint); font-size:18px; margin:14px 0 14px 22px; }
.wow-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.wow-step-final p{ font-size:15.5px; color:var(--dark-text-dim); line-height:1.7; }
.wow-step-final strong{ color:#fff; }
.tick{ color:var(--success-500); font-weight:700; }
.wow-closer{ text-align:center; font-size:19px; margin-top:36px; color:#fff; }
.wow-closer em{ font-style:normal; color:var(--brand-300); }

.chip{ display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:var(--radius-pill); font-size:13px; border:1px solid var(--dark-hairline); background:var(--dark-surface-raised); color:var(--dark-text-dim); }
.chip-solid{ background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-700); font-weight:600; }

/* ---------- comparison: four standalone columns ---------- */
.section-compare{ background:var(--surface-sunken); }
.cmp-grid{
  --cmp-row-h:78px;
  display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr; gap:14px;
  align-items:start; padding-top:26px;
}
.cmp-col{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius-lg); padding:22px 20px 12px;
  box-shadow:var(--shadow-xs);
}
.cmp-head{ min-height:64px; margin-bottom:12px; padding-bottom:14px; border-bottom:1px solid var(--hairline); }
.cmp-name{ display:block; font-size:16px; font-weight:700; letter-spacing:-0.015em; }
.cmp-badge{
  display:inline-block; margin-bottom:6px; padding:3px 9px; border-radius:var(--radius-pill);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  background:rgba(255,255,255,0.16); color:#fff;
}
.cmp-rows{ display:grid; }
.cmp-rows li{
  min-height:var(--cmp-row-h);
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:10px 0; border-bottom:1px solid var(--hairline);
}
.cmp-rows li:last-child{ border-bottom:none; }
.cmp-label{ font-size:14px; font-weight:600; color:var(--text); }
.cmp-v{ font-size:15px; font-weight:700; letter-spacing:-0.01em; }
.cmp-rows small{ font-size:12px; color:var(--text-faint); line-height:1.45; }
.cmp-yes{ color:var(--brand-600); }
.cmp-no{ color:var(--danger-600); }
.cmp-mid{ color:var(--caution-600); }
.cmp-ok{ color:var(--success-600); }

/* The labels column is a quiet spine, not a card. */
.cmp-col-labels{ background:transparent; border-color:transparent; box-shadow:none; }
.cmp-col-labels .cmp-name{ color:var(--text-faint); font-size:12px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-weight:500; }
.cmp-col-labels .cmp-head{ border-bottom-color:transparent; }
.cmp-col-labels .cmp-rows li{ border-bottom-color:transparent; }

/* DecisionOS sits proud of the row and breathes, to mark the hierarchy. */
.cmp-col-hero{
  /* KM-59's black-and-warm, reached here too: this card set its indigo by
     hand instead of taking the ramp, which is how it stayed blue. */
  background:linear-gradient(165deg,#2a2521 0%, #16130f 55%, #0c0c0d 100%);
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 26px 60px -18px rgba(12,12,13,0.55), 0 6px 18px rgba(12,12,13,0.22);
  transform:translateY(-22px);
  animation:cmp-float 5.2s ease-in-out infinite;
}
.cmp-col-hero .cmp-name{ color:#fff; }
.cmp-col-hero .cmp-head{ border-bottom-color:rgba(255,255,255,0.18); }
.cmp-col-hero .cmp-rows li{ border-bottom-color:rgba(255,255,255,0.12); }
.cmp-col-hero .cmp-yes{ color:#fff; }
.cmp-col-hero .cmp-rows small{ color:rgba(255,255,255,0.62); }

@keyframes cmp-float{
  0%,100%{ transform:translateY(-22px); }
  50%    { transform:translateY(-34px); }
}
@media (prefers-reduced-motion: reduce){
  .cmp-col-hero{ animation:none; }
}
/* Stacked: the spine column is dropped, so each row carries its own capability name. */
@media (max-width:900px){
  .cmp-grid{ grid-template-columns:1fr 1fr; }
  .cmp-col-labels{ display:none; }
  .cmp-col-hero{ transform:none; animation:none; }
  .cmp-rows li{ min-height:0; }
  .cmp-rows li[data-label]::before{
    content:attr(data-label); display:block; order:-1; margin-bottom:2px;
    font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--text-faint);
  }
  .cmp-col-hero .cmp-rows li[data-label]::before{ color:rgba(255,255,255,0.55); }
  .cmp-rows small:empty, .cmp-rows small{ min-height:0; }
}
@media (max-width:560px){
  .cmp-grid{ grid-template-columns:1fr; }
}

/* ---------- card grids ---------- */
.card-grid{ display:grid; gap:16px; }
.card-grid-2{ grid-template-columns:repeat(2,1fr); }
.card-grid-3{ grid-template-columns:repeat(3,1fr); }
.card-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .card-grid-3, .card-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .card-grid-2, .card-grid-3, .card-grid-4{ grid-template-columns:1fr; } }

.feature-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-xs); }
.section-sunken .feature-card{ background:var(--surface); }
.feature-card h3{ font-size:16.5px; margin:0 0 8px; }
.feature-card p{ font-size:14px; color:var(--text-dim); }
.fc-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-600); margin-bottom:10px; }

/* ---------- ICP cards: photo, veil, drawing frame ---------- */
/* Amber reads as the true complement to the indigo brand, and ties back to the hero wall. */
.icp-grid{ --icp-accent:#f5b84c; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.icp-card{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--radius-lg); background:var(--neutral-900); isolation:isolate;
}
.icp-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1), filter .45s ease;
}
/* Dark veil, weighted to the bottom so the copy always has a ground to sit on. */
.icp-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,10,26,0.10) 0%, rgba(8,10,26,0.34) 42%, rgba(8,10,26,0.88) 100%);
  transition:opacity .45s ease;
}
.icp-frame{ position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; }
.icp-frame rect{
  fill:none; stroke:var(--icp-accent); stroke-width:3;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .95s cubic-bezier(.5,.05,.2,1);
}
.icp-copy{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 20px; }
.icp-role{
  font-size:16.5px; font-weight:700; color:#fff; letter-spacing:-0.015em; margin-bottom:8px;
}
.icp-line{
  font-size:13px; line-height:1.55; color:rgba(255,255,255,0.80);
  opacity:0; transform:translateY(8px); max-height:0;
  transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), max-height .5s ease;
}
.icp-card:hover .icp-photo,
.icp-card:focus-within .icp-photo{ transform:scale(1.06); filter:saturate(1.06); }
.icp-card:hover .icp-veil,
.icp-card:focus-within .icp-veil{ opacity:1.15; }
.icp-card:hover .icp-frame rect,
.icp-card:focus-within .icp-frame rect{ stroke-dashoffset:0; }
.icp-card:hover .icp-line,
.icp-card:focus-within .icp-line{ opacity:1; transform:translateY(0); max-height:120px; }

@media (max-width:960px){ .icp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .icp-grid{ grid-template-columns:1fr; } }
/* No hover on touch: show the line and frame outright rather than hiding content. */
@media (hover:none){
  .icp-line{ opacity:1; transform:none; max-height:120px; }
  .icp-frame rect{ stroke-dashoffset:0; stroke-width:2; }
}
@media (prefers-reduced-motion: reduce){
  .icp-photo, .icp-line, .icp-frame rect{ transition:none; }
}

.persona-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-xs); }
.persona-card h3{ font-size:17px; margin-bottom:14px; }
.persona-card p{ font-size:14px; color:var(--text-dim); margin-bottom:10px; line-height:1.6; }
.ba-tag{ display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:var(--radius-sm); margin-right:8px; font-weight:600; }
.ba-before{ background:var(--neutral-100); color:var(--text-faint); }
.ba-after{ background:var(--success-50); color:var(--success-800); }

.alert-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-xs); }
.alert-quote{ font-size:14.5px; font-weight:600; margin:6px 0 10px; line-height:1.5; }
.alert-rec{ font-size:13px; color:var(--text-dim); }

.trust-callout{ margin-top:28px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:18px 22px; font-size:14px; color:var(--text-dim); }
.trust-callout strong{ color:var(--text); }
.section-dark .trust-callout, .section-dark .feature-card{ background:var(--dark-surface); border-color:var(--dark-hairline); color:var(--dark-text-dim); }

/* ---------- flow list ---------- */
.flow-list{ display:grid; gap:22px; max-width:760px; }
.flow-list li{ border-left:2px solid var(--brand-500); padding-left:22px; }
.flow-tag{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-600); margin-bottom:8px; }
.flow-list p{ font-size:15px; color:var(--text-dim); }
.flow-list strong{ color:var(--text); }

/* ==========================================================================
   Flow stage: raw input on the left resolves into executed work on the right,
   snapping clean exactly as it crosses the DecisionOS divider.
   Timeline is one 36s loop; each item is offset by a negative delay so ~4 are
   in flight at any moment. Divider sits at 38% of the stage.
   ========================================================================== */
.flow-section{
  position:relative; overflow:hidden; isolation:isolate;
  color:var(--dark-text);
  background:
    radial-gradient(80% 46% at 20% 50%, rgba(231,196,131,0.34) 0%, rgba(231,196,131,0) 62%),
    radial-gradient(78% 44% at 82% 52%, rgba(231,196,131,0.42) 0%, rgba(231,196,131,0) 60%),
    #111318;
}
.flow-section > .wrap{ position:relative; z-index:1; }
.flow-section .s-title{ color:#fff; margin-bottom:clamp(28px,4vw,48px); }

.flow-stage{
  --yk:1;
  position:relative; height:clamp(320px,44vw,440px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 9%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 9%, #000 95%, transparent 100%);
}

.flow-stage.is-paused .flow-item,
.flow-stage.is-paused .fi-raw,
.flow-stage.is-paused .fi-done,
.flow-stage.is-paused .flow-noise span,
.flow-stage.is-paused .fd-spark{ animation-play-state:paused; }

/* ---- the unresolved pile ---- */
.flow-noise{ position:absolute; inset:0; }
.flow-noise span{
  position:absolute; left:var(--nx); top:50%;
  width:clamp(90px,13vw,160px); height:26px; border-radius:var(--radius-pill);
  background:rgba(200,205,230,0.07);
  transform:translate(-50%,-50%) translateY(var(--ny)) rotate(var(--nr));
  filter:blur(5px);
  animation:noise-jitter 6s ease-in-out infinite;
  animation-delay:var(--nd);
}
@keyframes noise-jitter{
  0%,100%{ transform:translate(-50%,-50%) translateY(var(--ny)) rotate(var(--nr)); }
  50%    { transform:translate(-50%,-50%) translateY(calc(var(--ny) + 9px)) rotate(calc(var(--nr) * -0.6)); }
}

/* ---- the divider ---- */
/* Label caps the divider at the top; the line starts below it so nothing overlaps
   and the pill's border stays fully inside the clipped stage. */
.flow-divider{ --fd-cap:44px; position:absolute; left:38%; top:0; bottom:0; width:2px; z-index:4; }
.flow-divider::before{
  content:""; position:absolute; left:0; right:0; top:var(--fd-cap); bottom:0;
  background:linear-gradient(180deg, rgba(231,196,131,0) 0%, var(--brand-400) 16%, #fff 52%, var(--brand-400) 84%, rgba(231,196,131,0) 100%);
}
.fd-glow{
  position:absolute; left:50%; top:var(--fd-cap); bottom:0; width:150px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(231,196,131,0.42), rgba(231,196,131,0) 78%);
}
.fd-label{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  font-family:var(--mono); font-size:clamp(9.5px,0.78vw,11px);
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff; white-space:nowrap; line-height:1;
  padding:8px 16px; border-radius:var(--radius-pill);
  background:rgba(20,23,58,0.96);
  border:1px solid rgba(231,196,131,0.75);
  box-shadow:0 0 0 4px rgba(14,16,48,0.55), 0 6px 20px rgba(8,10,32,0.6);
}
.fd-spark{
  position:absolute; left:50%; width:4px; height:4px; border-radius:50%;
  background:#fff; box-shadow:0 0 10px 2px rgba(231,196,131,0.9);
  transform:translateX(-50%);
  animation:fd-rise 4.8s linear infinite;
  animation-delay:var(--sd);
}
@keyframes fd-rise{
  0%  { top:100%; opacity:0; }
  14% { opacity:1; }
  86% { opacity:1; }
  100%{ top:13%; opacity:0; }
}

/* ---- travelling items ---- */
.flow-track{ position:absolute; inset:0; z-index:2; }
.flow-item{
  position:absolute; left:0; top:50%; width:100%; height:0;
  animation-name:flow-travel, flow-fade;
}
/* 60s cycle / 24 items = 2.5s apart. The journey occupies ~10.5% of the cycle,
   which keeps ~2.5 items in flight and leaves a clear gap between consecutive
   pills once they share the single centre lane on the right. */
.flow-item, .fi-raw, .fi-done{
  animation-duration:60s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-delay:calc(var(--i) * -2.5s);
  will-change:transform, opacity;
}
.fi-raw, .fi-done{
  position:absolute; left:0; top:0;
  transform:translate(-50%,-50%);
  white-space:nowrap; font-size:clamp(12px,1.05vw,14px);
}
.fi-raw{
  padding:9px 16px; border-radius:var(--radius-pill);
  background:rgba(90,96,140,0.30); border:1px solid rgba(200,205,230,0.30);
  color:rgba(240,242,255,0.95); font-style:italic;
  animation-name:fi-raw-out;
}
.fi-done{
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:var(--radius-pill);
  background:rgba(20,23,58,0.92); border:1px solid rgba(231,196,131,0.38);
  box-shadow:0 6px 22px rgba(8,10,32,0.55);
  color:rgba(255,255,255,0.88);
  animation-name:fi-done-in;
}
.fi-done b{ color:var(--brand-300); font-weight:700; }
.fi-done i{
  font-style:normal; color:#0e1030; background:var(--success-400);
  width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  font-size:10px; font-weight:800; flex-shrink:0;
}

@keyframes flow-travel{
  0%    { transform:translate3d(-3%, calc(var(--y) * var(--yk)), 0) rotate(var(--r)) scale(.92); }
  5%    { transform:translate3d(26%, calc(var(--y) * var(--yk) * .34), 0) rotate(calc(var(--r) * .34)) scale(.97); }
  7%    { transform:translate3d(38%, 0, 0) rotate(0deg) scale(1); }
  9%    { transform:translate3d(63%, 0, 0) rotate(0deg) scale(1); }
  11%   { transform:translate3d(88%, 0, 0) rotate(0deg) scale(1); }
  12.2% { transform:translate3d(99%, 0, 0) rotate(0deg) scale(1); }
  100%  { transform:translate3d(99%, 0, 0) rotate(0deg) scale(1); }
}
@keyframes flow-fade{
  0%, 0.4%    { opacity:0; }
  1.4%        { opacity:1; }
  11%         { opacity:1; }
  12.2%, 100% { opacity:0; }
}
/* Raw sharpens fast so the problem is legible across the whole left run,
   then dissolves exactly on the divider as the structured record takes over. */
@keyframes fi-raw-out{
  0%        { opacity:1; filter:blur(3px); }
  2%        { opacity:1; filter:blur(0); }
  6.2%      { opacity:1; filter:blur(0); }
  7%        { opacity:0; filter:blur(1.6px); }
  100%      { opacity:0; filter:blur(1.6px); }
}
@keyframes fi-done-in{
  0%, 6.4%  { opacity:0; }
  7.2%      { opacity:1; }
  100%      { opacity:1; }
}

@media (max-width:900px){
  .flow-stage{ --yk:.55; }
  .flow-divider{ left:32%; }
  .fi-raw, .fi-done{ font-size:11.5px; padding:7px 12px; }
  .fi-done{ gap:6px; }
  .fi-done i{ width:14px; height:14px; font-size:9px; }
  .flow-noise span{ width:clamp(70px,26vw,110px); height:22px; }
  .flow-divider{ --fd-cap:38px; }
  @keyframes flow-travel{
    0%    { transform:translate3d(-6%, calc(var(--y) * var(--yk)), 0) rotate(var(--r)) scale(.92); }
    5%    { transform:translate3d(20%, calc(var(--y) * var(--yk) * .34), 0) rotate(calc(var(--r) * .34)) scale(.97); }
    7%    { transform:translate3d(32%, 0, 0) rotate(0deg) scale(1); }
    9%    { transform:translate3d(60%, 0, 0) rotate(0deg) scale(1); }
    11%   { transform:translate3d(90%, 0, 0) rotate(0deg) scale(1); }
    12.2% { transform:translate3d(103%, 0, 0) rotate(0deg) scale(1); }
    100%  { transform:translate3d(103%, 0, 0) rotate(0deg) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce){
  .flow-item, .fi-raw, .fi-done, .flow-noise span, .fd-spark{ animation:none; }
  .flow-item{ opacity:1; }
  .fi-raw{ opacity:0; }
  .fi-done{ opacity:1; }
  /* Settle into a readable static column instead of animating. */
  .flow-item:nth-child(n+6){ display:none; }
  .flow-item{ transform:translate3d(70%, calc(var(--i) * 46px - 105px), 0); }
}

/* ---------- funnel ---------- */
.funnel{ max-width:620px; margin:0 auto; text-align:center; }
.funnel-step{ border-radius:var(--radius-md); padding:20px 26px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; }
.funnel-top{ background:var(--brand-gradient); color:#fff; }
.funnel-mid{ background:var(--dark-surface-raised); border:1px solid var(--dark-hairline); color:var(--dark-text-dim); padding:26px; }
.funnel-num{ display:block; font-family:var(--sans); font-size:34px; font-weight:800; color:var(--brand-300); margin-bottom:6px; }
.funnel-bottom{ background:transparent; border:1px solid var(--dark-hairline); color:#fff; font-family:var(--sans); font-weight:700; font-size:15px; }
.funnel-arrow{ color:var(--text-faint); font-size:18px; margin:8px 0; }

/* ---------- terminal / chips ---------- */
.terminal{ background:var(--terminal-bg); border-radius:var(--radius-md); padding:20px 24px; font-family:var(--mono); font-size:13.5px; color:var(--terminal-label); line-height:1.9; margin-bottom:20px; }
.t-prompt{ color:var(--terminal-fg); margin-right:8px; }
.query-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.query-chips .chip{ background:var(--surface); border-color:var(--hairline-strong); color:var(--text-dim); font-style:italic; }

/* ---------- roadmap ---------- */
.roadmap-list{ display:grid; gap:12px; max-width:760px; }
.roadmap-list li{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--dark-surface); border:1px solid var(--dark-hairline); border-radius:var(--radius-md); padding:18px 22px; }
.roadmap-list li.rm-active, .roadmap-list li.rm-live{ border-color:var(--brand-600); }
.rm-stage{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--brand-300); margin-bottom:6px; }
.roadmap-list p{ font-size:14px; color:var(--dark-text-dim); }
.rm-pill{ flex-shrink:0; font-size:12px; font-weight:600; padding:6px 14px; border-radius:var(--radius-pill); background:var(--dark-surface-raised); color:var(--dark-text-dim); border:1px solid var(--dark-hairline); }
.rm-pill-solid{ background:var(--brand-gradient); color:#fff; border:none; }
@media (max-width:600px){ .roadmap-list li{ flex-direction:column; align-items:flex-start; } }

/* ---------- trust strip ---------- */
.trust-strip{ background:var(--neutral-900); padding:34px 0; }
/* Items are laid out as a centred row so the separators own real space rather
   than a pair of non-breaking spaces, and they wrap cleanly on narrow screens. */
.trust-strip p{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  row-gap:10px; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--neutral-400);
}
.trust-strip span + span::before{
  content:"·"; padding:0 20px; color:var(--neutral-600);
}
/* The 104px section pad left the strip stranded below the cards. */
.brief-section{ padding-bottom:64px; }

/* ---------- early access ---------- */
.early-access-card{ max-width:600px; margin:0 auto; text-align:center; }
.early-form{ display:grid; gap:12px; max-width:420px; margin:0 auto; text-align:left; }
.early-form input{ height:48px; border-radius:var(--radius-sm); border:1px solid var(--hairline-strong); padding:0 16px; font-size:14.5px; font-family:var(--sans); background:var(--surface); color:var(--text); }
.early-form input:focus{ border-color:var(--brand-500); outline:none; box-shadow:0 0 0 3px var(--brand-100); }
.early-form .btn{ width:100%; justify-content:center; margin-top:6px; }
.form-note{ text-align:center; font-size:13.5px; color:var(--success-600); margin-top:14px; min-height:1em; }

/* ---------- accordion ---------- */
.accordion{ display:grid; gap:10px; }
.accordion-faq{ max-width:760px; margin:0 auto; }
.accordion-item{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-md); overflow:hidden; }
.accordion-trigger{ width:100%; display:flex; align-items:center; gap:16px; text-align:left; background:none; border:none; padding:18px 22px; font-size:15px; font-weight:600; color:var(--text); }
.acc-label{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-600); flex-shrink:0; width:80px; }
.acc-title{ flex:1; }
.acc-chevron{ width:18px; height:18px; stroke:var(--text-faint); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; transition:transform .2s; }
.accordion-item.is-open .acc-chevron{ transform:rotate(180deg); stroke:var(--brand-600); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; }
.accordion-panel p{ padding:0 22px 20px 22px; font-size:14.5px; color:var(--text-dim); line-height:1.7; }
.accordion-item.is-open .accordion-panel{ max-height:280px; }

/* ---------- final CTA: open sky ---------- */
.final-cta{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(120px,18vh,190px) 0 clamp(130px,20vh,210px);
  text-align:center; color:var(--neutral-900);
  background:linear-gradient(180deg,#9fc0e4 0%, #c3d8ee 26%, #dde9f6 52%, #f2f6fb 76%, #ffffff 100%);
}
.final-cta > .wrap{ position:relative; z-index:2; }
.sky{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* Soft banked cloud forms, built from blurred radial masses rather than an image. */
.sky-clouds{
  position:absolute; inset:-10% -5%;
  background:
    radial-gradient(46% 30% at 18% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(38% 26% at 72% 22%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 66%),
    radial-gradient(54% 34% at 50% 74%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(40% 24% at 88% 58%, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0) 64%),
    radial-gradient(34% 22% at 8% 66%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 66%);
  filter:blur(14px);
  will-change:transform;
}
.sky-stars{ position:absolute; inset:0; }
.sky-star{
  position:absolute; border-radius:50%; background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,0.9);
  will-change:transform;
}
.final-cta h2{
  font-size:clamp(30px,4.4vw,46px); font-weight:700; line-height:1.18;
  letter-spacing:-0.03em; margin-bottom:34px; color:#10131c;
}
.final-cta h2 em{ font-style:normal; color:rgba(16,19,28,0.42); }

/* ---------- footer ---------- */
.site-footer{ background:var(--bg); border-top:1px solid var(--hairline); padding:40px 0; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.footer-nav{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-nav a{ font-size:13.5px; color:var(--text-dim); }
.footer-meta{ font-size:12.5px; color:var(--text-faint); width:100%; text-align:center; margin-top:12px; }
@media (min-width:700px){ .footer-meta{ width:auto; margin-top:0; } }

/* ---------- responsive section padding ---------- */
@media (max-width:700px){
  .section{ padding:72px 0; }
  .final-cta{ padding:80px 0; }
  /* .hero-content padding is owned by the hero block above — don't override it here. */
}

/* ==========================================================================
   DYNAMIC SECTION TREATMENTS (positions 6-11)
   Each section carries its own metaphor rather than a grid of text cards.
   ========================================================================== */

/* ---------- 6 · Radial stopwatch: 0s spoken, 3s understood, 10s enforced ---------- */
.timer-section .s-title{ margin-bottom:clamp(30px,4vw,52px); }
.timer-stage{
  display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:clamp(28px,5vw,64px);
  align-items:center; max-width:960px; margin:0 auto;
}
.timer-dial{ position:relative; aspect-ratio:1; }
.timer-dial svg{ width:100%; height:100%; transform:rotate(-90deg); }
.td-track{ fill:none; stroke:rgba(231,196,131,0.16); stroke-width:5; }
.td-sweep{
  fill:none; stroke:var(--brand-400); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:td-sweep 12s cubic-bezier(.5,0,.2,1) infinite;
  filter:drop-shadow(0 0 10px rgba(231,196,131,.65));
}
@keyframes td-sweep{
  0%   { stroke-dashoffset:100; }
  8%   { stroke-dashoffset:100; }
  25%  { stroke-dashoffset:70; }
  58%  { stroke-dashoffset:0; }
  92%  { stroke-dashoffset:0; }
  100% { stroke-dashoffset:100; }
}
.td-readout{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.td-num{
  grid-area:1/1; font-size:clamp(44px,6vw,68px); font-weight:800; letter-spacing:-.04em; color:#fff;
  opacity:0; animation:td-num 12s linear infinite; animation-delay:calc(var(--n) * 0s);
}
.td-num[style*="--n:0"]{ animation-name:td-n0; }
.td-num[style*="--n:1"]{ animation-name:td-n1; }
.td-num[style*="--n:2"]{ animation-name:td-n2; }
@keyframes td-n0{ 0%,22%{opacity:1} 24%,100%{opacity:0} }
@keyframes td-n1{ 0%,22%{opacity:0} 25%,55%{opacity:1} 58%,100%{opacity:0} }
@keyframes td-n2{ 0%,55%{opacity:0} 59%,94%{opacity:1} 97%,100%{opacity:0} }
.td-readout em{
  grid-area:2/1; font-style:normal; font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brand-300); margin-top:4px;
}
.timer-steps{ display:grid; gap:14px; }
.timer-steps li{
  border-left:2px solid rgba(231,196,131,.20); padding:8px 0 8px 20px;
  opacity:.28; transform:translateX(-4px);
  transition:opacity .5s ease, transform .5s ease, border-color .5s ease;
  animation:ts-on 12s linear infinite;
}
.timer-steps li[style*="--n:0"]{ animation-name:ts0; }
.timer-steps li[style*="--n:1"]{ animation-name:ts1; }
.timer-steps li[style*="--n:2"]{ animation-name:ts2; }
@keyframes ts0{ 0%,22%{opacity:1;transform:none;border-color:var(--brand-400)} 26%,100%{opacity:.28;transform:translateX(-4px);border-color:rgba(231,196,131,.2)} }
@keyframes ts1{ 0%,22%{opacity:.28} 26%,55%{opacity:1;transform:none;border-color:var(--brand-400)} 59%,100%{opacity:.28;transform:translateX(-4px)} }
@keyframes ts2{ 0%,55%{opacity:.28} 59%,94%{opacity:1;transform:none;border-color:var(--success-400)} 98%,100%{opacity:.28} }
.ts-key{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-300); margin-bottom:8px; }
.ts-quote{ font-size:clamp(15px,1.5vw,18px); font-weight:600; color:#fff; line-height:1.4; }
.ts-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.ts-chips span{ font-size:12px; padding:5px 11px; border-radius:var(--radius-pill); background:rgba(231,196,131,.12); border:1px solid rgba(231,196,131,.28); color:#dfe0ff; }
.ts-out{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.ts-out li{ all:unset; font-size:13px; color:rgba(255,255,255,.78); position:relative; padding-left:16px; }
.ts-out li::before{ content:"✓"; position:absolute; left:0; color:var(--success-400); font-size:11px; }
@media (max-width:760px){ .timer-stage{ grid-template-columns:1fr; } .timer-dial{ max-width:210px; margin:0 auto; } }

/* ---------- 7 · Orbit ---------- */
.orbit-section{ background:var(--surface-sunken); overflow:hidden; }
.orbit-stage{ position:relative; width:min(560px,86vw); aspect-ratio:1; margin:clamp(10px,3vw,26px) auto clamp(28px,4vw,44px); }
.orbit-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:35%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-gradient); color:#fff; text-align:center;
  font-size:clamp(13px,1.5vw,17px); font-weight:700; letter-spacing:-.02em;
  box-shadow:0 0 0 10px rgba(231,196,131,.08), 0 0 60px rgba(231,196,131,.35);
  animation:core-pulse 4.5s ease-in-out infinite;
}
.orbit-core b{ font-weight:700; opacity:.72; }
@keyframes core-pulse{ 0%,100%{ box-shadow:0 0 0 10px rgba(231,196,131,.08), 0 0 60px rgba(231,196,131,.35);} 50%{ box-shadow:0 0 0 18px rgba(231,196,131,.05), 0 0 80px rgba(231,196,131,.5);} }
.orbit-ring{ position:absolute; border-radius:50%; border:1px dashed rgba(231,196,131,.28); animation:orbit-spin var(--dur) linear infinite; }
.ring-a{ inset:16%; }
.ring-b{ inset:0; animation-direction:reverse; border-style:solid; border-color:rgba(231,196,131,.16); }
@keyframes orbit-spin{ to{ transform:rotate(360deg); } }
.orb-slot{ position:absolute; inset:0; transform:rotate(var(--a)); }
.orb{
  position:absolute; left:50%; top:-15px; transform:translateX(-50%);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; padding:7px 13px; border-radius:var(--radius-pill);
  background:var(--surface); border:1px solid var(--hairline-strong); color:var(--text-dim);
  box-shadow:var(--shadow-xs);
  animation:orb-level var(--dur) linear infinite;
}
.ring-b .orb{ animation-name:orb-level-rev; }
.orb-cap{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; font-weight:600; }
@keyframes orb-level{ from{ transform:translateX(-50%) rotate(calc(-1 * var(--a))); } to{ transform:translateX(-50%) rotate(calc(-1 * var(--a) - 360deg)); } }
@keyframes orb-level-rev{ from{ transform:translateX(-50%) rotate(calc(-1 * var(--a))); } to{ transform:translateX(-50%) rotate(calc(-1 * var(--a) + 360deg)); } }
.orbit-legend{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:900px; margin:0 auto; }
.orbit-legend div{ text-align:center; }
.orbit-legend b{ display:block; font-size:14.5px; margin-bottom:4px; }
.orbit-legend span{ font-size:12.5px; color:var(--text-dim); line-height:1.5; }
@media (max-width:700px){ .orbit-legend{ grid-template-columns:repeat(2,1fr); } .orb{ font-size:9.5px; padding:5px 9px; } }

/* ---------- 8 · Glass bento ---------- */
.bento-section{ position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 18% 0%, rgba(231,196,131,.34) 0%, rgba(231,196,131,0) 58%), linear-gradient(160deg,#151833 0%,#111318 60%,#0e1030 100%); }
.bento-section > .wrap{ position:relative; z-index:1; }
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.bt{
  grid-column:span 1; padding:20px; border-radius:var(--radius-lg); min-height:186px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:rgba(255,255,255,0.055);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.11);
  box-shadow:0 18px 40px -18px rgba(6,8,26,.7);
  transition:border-color .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.bt:hover{ border-color:rgba(231,196,131,.42); transform:translateY(-3px); }
.bt-wide{ grid-column:span 2; }
.bt h3{ font-size:15.5px; color:#fff; margin-bottom:4px; letter-spacing:-.015em; }
.bt p{ font-size:12.5px; color:rgba(255,255,255,.58); line-height:1.5; }
.bt-viz{ flex:1; display:flex; margin-bottom:14px; min-height:64px; }
.bt-tasks{ flex-direction:column; gap:6px; justify-content:center; }
.bt-tasks .row{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:rgba(255,255,255,.55); }
.bt-tasks i{ width:13px; height:13px; border-radius:var(--radius-sm); border:1.5px solid rgba(255,255,255,.3); flex-shrink:0; }
.bt-tasks .done i{ background:var(--success-500); border-color:var(--success-500); }
.bt-tasks .done{ color:rgba(255,255,255,.32); text-decoration:line-through; }
.bt-steps{ align-items:center; gap:7px; }
.bt-steps i{ flex:1; height:5px; border-radius:var(--radius-sm); background:rgba(255,255,255,.14); animation:step-fill 5s ease-in-out infinite; }
.bt-steps i:nth-child(2){ animation-delay:.4s } .bt-steps i:nth-child(3){ animation-delay:.8s }
.bt-steps i:nth-child(4){ animation-delay:1.2s } .bt-steps i:nth-child(5){ animation-delay:1.6s }
@keyframes step-fill{ 0%,10%{ background:rgba(255,255,255,.14);} 30%,70%{ background:var(--brand-400);} 90%,100%{ background:rgba(255,255,255,.14);} }
.bt-proof{ align-items:center; gap:12px; }
.bt-proof .ph{ width:42px; height:42px; border-radius:var(--radius-sm); background:linear-gradient(135deg,#3a332a,#0c0c0d); flex-shrink:0; }
.bt-proof .wave{ display:flex; align-items:center; gap:3px; height:34px; }
.bt-proof .wave i{ width:3px; border-radius:var(--radius-sm); background:var(--brand-300); height:30%; animation:wv 1.4s ease-in-out infinite; }
.bt-proof .wave i:nth-child(2n){ animation-delay:.15s } .bt-proof .wave i:nth-child(3n){ animation-delay:.3s }
.bt-proof .wave i:nth-child(4n){ animation-delay:.45s } .bt-proof .wave i:nth-child(5n){ animation-delay:.6s }
@keyframes wv{ 0%,100%{height:26%} 50%{height:92%} }
.bt-hand{ align-items:center; justify-content:center; gap:12px; color:rgba(255,255,255,.4); font-size:18px; }
.bt-hand .av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--brand-100); color:var(--brand-700); }
.bt-hand .av2{ background:var(--success-200); color:var(--success-800); }
.bt-flow{ align-items:center; gap:0; }
.bt-flow .node{ font-size:10.5px; padding:5px 9px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.5); white-space:nowrap; }
.bt-flow .node.on{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.bt-flow .ln{ flex:1; height:1.5px; background:rgba(255,255,255,.16); }
.bt-flow .ln.on{ background:var(--brand-500); }
.bt-esc{ align-items:center; gap:8px; flex-wrap:wrap; }
.bt-esc .pill{ font-size:10.5px; padding:5px 10px; border-radius:var(--radius-pill); font-weight:600; }
.bt-esc .amber{ background:var(--caution-50); color:var(--caution-800); }
.bt-esc .red{ background:var(--danger-50); color:var(--danger-800); }
.bt-esc .up{ background:var(--brand-50); color:var(--brand-700); animation:esc-pop 3s ease-in-out infinite; }
@keyframes esc-pop{ 0%,70%,100%{ transform:none; } 82%{ transform:translateY(-5px) scale(1.05); } }
@media (max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr); } .bt-wide{ grid-column:span 2; } }
@media (max-width:520px){ .bento{ grid-template-columns:1fr; } .bt-wide{ grid-column:span 1; } }

/* ---------- 9 · Business DNA densification ---------- */
.dna-section{ background:var(--bg); }
.dna-stage{ max-width:940px; margin:0 auto clamp(20px,3vw,30px); }
.dna-field{
  height:clamp(150px,20vw,210px); border-radius:var(--radius-lg); position:relative; overflow:hidden;
  border:1px solid var(--hairline); background:var(--surface);
  /* Left: sparse and pale. Right: dense and brand-saturated. */
  background-image:
    radial-gradient(circle, var(--brand-600) 1.4px, transparent 1.5px),
    radial-gradient(circle, var(--brand-400) 1.1px, transparent 1.2px);
  background-size:26px 26px, 13px 13px;
  background-position:0 0, 6px 6px;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 35%, rgba(0,0,0,.7) 70%, #000 100%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.28) 35%, rgba(0,0,0,.7) 70%, #000 100%);
  animation:dna-drift 26s linear infinite;
}
@keyframes dna-drift{ to{ background-position:26px 0, -13px 6px; } }
.dna-scale{ display:flex; justify-content:space-between; margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.dna-note{ text-align:center; font-size:15.5px; color:var(--text-dim); max-width:62ch; margin:0 auto; }
.dna-note em{ font-style:normal; color:var(--brand-600); font-weight:600; }

/* ---------- 10 · CEO Brief / Score / Ask ---------- */
.brief-section{ background:linear-gradient(160deg,#131634 0%,#111318 55%,#0e1030 100%); }
.brief-bento{ display:grid; grid-template-columns:1.55fr 1fr; grid-auto-rows:auto; gap:14px; }
.bb{
  padding:24px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 18px 44px -20px rgba(6,8,26,.75);
}
.bb h3{ font-size:17px; color:#fff; margin-bottom:5px; letter-spacing:-.02em; }
.bb-sub{ font-size:13px; color:rgba(255,255,255,.58); line-height:1.55; }
.bb-main{ grid-row:span 2; display:flex; flex-direction:column; }
.bb-tabs{ display:flex; gap:6px; margin-bottom:16px; }
.bb-tabs span{ font-size:11px; padding:5px 11px; border-radius:var(--radius-pill); color:rgba(255,255,255,.45); border:1px solid transparent; }
.bb-tabs .on{ background:rgba(231,196,131,.14); border-color:rgba(231,196,131,.32); color:#dfe0ff; }
.bb-tag{ display:inline-block; font-size:11px; font-weight:600; color:var(--brand-300); margin-bottom:10px; }
.bb-body{ flex:1; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.86); margin-bottom:18px; }
.bb-body .type{
  display:inline; overflow:hidden; white-space:normal;
  animation:bb-type 9s steps(60) infinite;
}
@keyframes bb-type{ 0%{ opacity:.25 } 45%,100%{ opacity:1 } }
.caret{ display:inline-block; width:2px; height:1em; background:var(--brand-300); vertical-align:-2px; margin-left:2px; animation:caret 1s steps(2) infinite; }
@keyframes caret{ 50%{ opacity:0 } }
.bb-score{ text-align:center; }
.score-dial{ position:relative; width:118px; margin:0 auto 14px; }
.score-dial svg{ width:100%; transform:rotate(-90deg); }
.sd-track{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:8; }
.sd-fill{ fill:none; stroke:var(--success-400); stroke-width:8; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; animation:sd 3.5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:.2s; }
@keyframes sd{ to{ stroke-dashoffset:13; } }
.sd-val{ position:absolute; inset:0; display:grid; place-content:center; font-size:32px; font-weight:800; color:#fff; letter-spacing:-.03em; }
.score-rows{ display:grid; gap:8px; margin-top:16px; text-align:left; }
.score-rows span{ display:grid; grid-template-columns:64px 1fr; align-items:center; gap:10px; }
.score-rows b{ font-size:12px; color:rgba(255,255,255,.7); font-weight:500; }
.score-rows i{ height:6px; border-radius:var(--radius-sm); background:rgba(255,255,255,.12); position:relative; overflow:hidden; }
.score-rows i::after{ content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:var(--radius-sm); background:var(--brand-400); animation:bar-in 1.6s cubic-bezier(.2,.8,.2,1) forwards; transform-origin:left; }
@keyframes bar-in{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.bb-ask .ask-bar{
  display:flex; align-items:center; gap:2px; margin:14px 0 12px; padding:12px 16px;
  border-radius:var(--radius-pill); background:rgba(8,10,32,.6); border:1px solid rgba(231,196,131,.28);
  font-family:var(--mono); font-size:12.5px; color:#dfe0ff; min-height:44px;
}
.ask-q::after{ content:"“What did we owe Gupta Traders last month?”"; animation:ask-cycle 15s steps(1) infinite; }
@keyframes ask-cycle{
  0%,32%   { content:"“What did we owe Gupta Traders last month?”"; }
  33%,65%  { content:"“Who approved the Delhi dispatch?”"; }
  66%,100% { content:"“Every decision about pricing this year.”"; }
}
@media (max-width:820px){ .brief-bento{ grid-template-columns:1fr; } .bb-main{ grid-row:auto; } }

/* ---------- 11 · Roadmap rail ---------- */
.rail-section{ background:var(--surface-sunken); }
.rail{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; max-width:980px; margin:clamp(24px,4vw,44px) auto clamp(20px,3vw,28px); position:relative; }
.rail::before{ content:""; position:absolute; left:10%; right:10%; top:11px; height:2px; background:var(--hairline-strong); }
.rail::after{ content:""; position:absolute; left:10%; top:11px; height:2px; width:30%; background:var(--brand-gradient); animation:rail-pulse 4.5s ease-in-out infinite; }
@keyframes rail-pulse{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }
.rail-stop{ position:relative; text-align:center; padding-top:30px; }
.rail-stop .dot{ position:absolute; top:4px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--hairline-strong); }
.rail-stop.live .dot{ background:var(--brand-600); border-color:var(--brand-600); box-shadow:0 0 0 5px rgba(231,196,131,.15); }
.rail-stop.live .dot::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--brand-500); animation:rail-ping 2.6s ease-out infinite; }
@keyframes rail-ping{ 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(2.1); opacity:0 } }
.rail-stop b{ display:block; font-size:14.5px; margin-bottom:3px; }
.rail-stop small{ font-size:11.5px; color:var(--text-faint); line-height:1.45; display:block; padding:0 6px; }
.rail-stop:not(.live) b{ color:var(--text-faint); }
.rail-note{ text-align:center; font-size:14px; color:var(--text-dim); }
.live-chip{ display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-pill); background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-200); margin-right:8px; }
@media (max-width:760px){
  .rail{ grid-template-columns:1fr; gap:18px; }
  .rail::before,.rail::after{ left:11px; right:auto; top:8px; bottom:8px; width:2px; height:auto; }
  .rail::after{ height:34%; }
  .rail-stop{ text-align:left; padding:0 0 0 36px; }
  .rail-stop .dot{ left:4px; top:2px; transform:none; }
  .rail-stop small{ padding:0; }
}

@media (prefers-reduced-motion: reduce){
  .td-sweep,.td-num,.timer-steps li,.orbit-ring,.orb,.orbit-core,
  .bt-steps i,.bt-proof .wave i,.bt-esc .up,.dna-field,
  .sd-fill,.score-rows i::after,.bb-body .type,.caret,.ask-q::after,
  .rail::after,.rail-stop.live .dot::after{ animation:none !important; }
  .timer-steps li{ opacity:1; transform:none; }
  .sd-fill{ stroke-dashoffset:13; }
}

/* ==========================================================================
   S2 · contrast between the two comparison cards
   ========================================================================== */
.compare-new{
  background:#f2c979; border:1px solid #e0b45f; color:#2a1f08;
}
.compare-new .compare-label{ color:rgba(42,31,8,.62); opacity:1; }

/* ==========================================================================
   S3 · WhisperFlow slice
   Two identical tracks run in lockstep; each lane is clipped to one side of
   the divider, so a pill mid-crossing is literally raw on the left of the
   line and solved on the right. No crossfade anywhere.
   ========================================================================== */
.flow-lane{ position:absolute; inset:0; }
.lane-raw { clip-path:inset(0 62% 0 0); }   /* keep everything left of 38%  */
.lane-done{ clip-path:inset(0 0 0 38%); }   /* keep everything right of 38% */
.lane-raw  .fi-done{ display:none; }
.lane-done .fi-raw { display:none; }

/* One shared silhouette, so the two halves line up exactly across the cut. */
.fi-raw, .fi-done{
  width:clamp(232px,22vw,312px); min-height:56px;
  white-space:normal; align-items:center; line-height:1.4;
  animation:none !important; opacity:1 !important; filter:none !important;
  transform:translate(-50%,-50%);
}
.fi-raw{
  background:rgba(96,102,148,.34); border-color:rgba(200,205,230,.34);
  color:rgba(240,242,255,.94);
}
.fi-done{
  background:rgba(24,28,74,.94); border-color:rgba(231,196,131,.5);
}

/* Straighten just before the cut so the slice lands on an axis-aligned card. */
@keyframes flow-travel{
  0%    { transform:translate3d(-3%, calc(var(--y) * var(--yk)), 0) rotate(var(--r)) scale(.94); }
  4%    { transform:translate3d(20%, calc(var(--y) * var(--yk) * .45), 0) rotate(calc(var(--r) * .45)) scale(.97); }
  6%    { transform:translate3d(32%, 0, 0) rotate(0deg) scale(1); }
  9%    { transform:translate3d(63%, 0, 0) rotate(0deg) scale(1); }
  11%   { transform:translate3d(88%, 0, 0) rotate(0deg) scale(1); }
  12.2% { transform:translate3d(99%, 0, 0) rotate(0deg) scale(1); }
  100%  { transform:translate3d(99%, 0, 0) rotate(0deg) scale(1); }
}
/* Divider sits above both lanes so the cut always reads as the blade. */
.flow-divider{ z-index:6; }
@media (max-width:900px){
  .lane-raw { clip-path:inset(0 68% 0 0); }
  .lane-done{ clip-path:inset(0 0 0 32%); }
  .fi-raw, .fi-done{ width:clamp(180px,52vw,240px); min-height:48px; }
  @keyframes flow-travel{
    0%    { transform:translate3d(-6%, calc(var(--y) * var(--yk)), 0) rotate(var(--r)) scale(.94); }
    4%    { transform:translate3d(14%, calc(var(--y) * var(--yk) * .45), 0) rotate(calc(var(--r) * .45)) scale(.97); }
    6%    { transform:translate3d(26%, 0, 0) rotate(0deg) scale(1); }
    9%    { transform:translate3d(60%, 0, 0) rotate(0deg) scale(1); }
    11%   { transform:translate3d(90%, 0, 0) rotate(0deg) scale(1); }
    12.2% { transform:translate3d(103%, 0, 0) rotate(0deg) scale(1); }
    100%  { transform:translate3d(103%, 0, 0) rotate(0deg) scale(1); }
  }
}

/* ==========================================================================
   S6 · counter + bento + parallax ghost word
   ========================================================================== */
.wow2{ position:relative; overflow:hidden; }
.wow2-ghost{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(92vw,1040px); text-align:center; text-wrap:balance;
  font-weight:800; letter-spacing:-.04em; line-height:.92;
  font-size:clamp(44px,8.4vw,124px); color:rgba(255,255,255,.05);
  pointer-events:none; z-index:0; will-change:transform;
}
.wow2 > .wrap{ position:relative; z-index:1; }
.wow2-count{ text-align:center; margin:clamp(6px,2vw,18px) 0 clamp(26px,4vw,44px); line-height:1; }
/* background-clip:text paints only inside the content box. The -.06em tracking
   is applied after the last digit too, pulling that box in ~12.6px and shaving
   the right edge off the 0. Padding extends the paint box past the overrun. */
.wc-num{
  display:inline-block; padding:0 .09em;
  font-size:clamp(96px,16vw,210px); font-weight:800; letter-spacing:-.06em; color:#fff;
  background:linear-gradient(180deg,#fff 30%, #e7c483 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.wc-unit{ font-family:var(--mono); font-size:clamp(12px,1.4vw,17px); letter-spacing:.2em; text-transform:uppercase; color:var(--brand-300); margin-left:2px; }
/* The three lines are one sentence: "It takes only / 10 sec / to set a rule
   the company never forgets." The tail had no rule at all, so it fell back to
   16px body copy left-aligned against the container edge and read as a stray
   caption on the first card. It is centred, scaled up and given its own
   breathing room below so the sentence closes properly. */
.wow2-tail{
  text-align:center; margin:0 auto clamp(34px,5vw,58px);
  font-size:clamp(19px,2.1vw,27px); font-weight:500; line-height:1.4;
  letter-spacing:-.015em; color:rgba(249,250,251,.8);
}
.wow2-tail em{ font-style:normal; font-weight:600; color:var(--brand-300); }
/* Pull the tail up under the numeral so it reads as the next line, not a new block. */
.wow2-count{ margin-bottom:clamp(10px,1.4vw,16px); }

.wow2-bento{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:14px; }
.w2{
  padding:22px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 18px 44px -20px rgba(6,8,26,.75);
}
.w2-key{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-300); margin-bottom:12px; }
.w2-quote{ font-size:clamp(15px,1.5vw,18px); font-weight:600; color:#fff; line-height:1.45; }
.w2-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.w2-chips span{ font-size:11.5px; padding:5px 10px; border-radius:var(--radius-pill); background:rgba(231,196,131,.13); border:1px solid rgba(231,196,131,.3); color:#dfe0ff; }
.w2-out{ display:grid; gap:7px; }
.w2-out li{ font-size:12.5px; color:rgba(255,255,255,.78); position:relative; padding-left:17px; }
.w2-out li::before{ content:"✓"; position:absolute; left:0; color:var(--success-400); font-size:11px; }
@media (max-width:820px){ .wow2-bento{ grid-template-columns:1fr; } }

/* ==========================================================================
   S7 · smudge background + merged rail
   ========================================================================== */
.orbit-section{ position:relative; overflow:hidden; isolation:isolate; background:#f4f5f8; }
.smudge{
  position:absolute; inset:-12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(28% 34% at 22% 34%, rgba(242,140,150,.55) 0%, rgba(242,140,150,0) 70%),
    radial-gradient(30% 32% at 74% 28%, rgba(231,196,131,.58) 0%, rgba(231,196,131,0) 72%),
    radial-gradient(26% 30% at 34% 74%, rgba(246,178,120,.50) 0%, rgba(246,178,120,0) 70%),
    radial-gradient(30% 34% at 78% 76%, rgba(216,173,99,.45) 0%, rgba(216,173,99,0) 72%),
    radial-gradient(24% 26% at 52% 50%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 70%);
  filter:blur(46px) saturate(1.15);
  animation:smudge-drift 26s ease-in-out infinite alternate;
}
@keyframes smudge-drift{ from{ transform:scale(1) translate(0,0);} to{ transform:scale(1.09) translate(-2%,2%);} }
.orbit-section > .wrap{ position:relative; z-index:1; }
.orbit-section .orbit-core{ box-shadow:0 0 0 12px rgba(255,255,255,.5), 0 18px 60px rgba(231,196,131,.4); }
.orb:not(.orb-cap){ background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.orb-cap{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; font-weight:600; }

.rail{ display:grid; grid-template-columns:repeat(5,1fr); max-width:980px; margin:clamp(18px,3vw,36px) auto 0; position:relative; }
.rail::before{ content:""; position:absolute; left:10%; right:10%; top:11px; height:2px; background:rgba(17,19,24,.14); }
.rail::after{ content:""; position:absolute; left:10%; top:11px; height:2px; width:0; background:linear-gradient(90deg,var(--brand-500),var(--brand-600) 62%,#f5b84c 100%); transition:width 1.9s cubic-bezier(.5,0,.2,1); }
.rail::after{ width:calc(var(--p,0) * 80%); transition:none; }
.rail-stop{ position:relative; text-align:center; padding-top:30px; opacity:.34; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; }
.rail-stop.lit{ opacity:1; transform:none; }
 
 

.rail-stop .dot{ position:absolute; top:4px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background:#f4f5f8; border:2px solid rgba(17,19,24,.2); transition:background .4s ease, border-color .4s ease, box-shadow .4s ease; }
.rail-stop.lit .dot{ background:var(--brand-600); border-color:var(--brand-600); }
.rail-final.lit .dot{ background:#f5b84c; border-color:#f5b84c; box-shadow:0 0 0 6px rgba(245,184,76,.28); }
.rail-final.lit b{ color:#a97613; }
.rail-stop b{ display:block; font-size:14.5px; margin-bottom:3px; }
.rail-stop small{ font-size:11.5px; color:var(--text-faint); line-height:1.45; display:block; padding:0 6px; }
@media (max-width:760px){
  .rail{ grid-template-columns:1fr; gap:18px; }
  .rail::before,.rail::after{ left:11px; right:auto; top:8px; width:2px; height:auto; bottom:8px; }
  .rail::after{ width:2px; height:calc(var(--p,0) * 86%); transition:none; }
  
  .rail-stop{ text-align:left; padding:0 0 0 36px; }
  .rail-stop .dot{ left:4px; top:2px; transform:none; }
}

/* ==========================================================================
   S9 · DNA graph
   ========================================================================== */
.dna-stage{ position:relative; max-width:940px; margin:0 auto; padding-top:74px; }
/* One full tile of travel per layer keeps the loop seamless. */
@keyframes dna-drift{ to{ background-position:26px 0, -7px 6px; } }
.dna-graph{ position:absolute; left:0; right:0; bottom:38px; width:100%; height:calc(100% - 60px); overflow:visible; }
.dg-line{ fill:none; stroke:url(#dg); stroke:var(--brand-600); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1); }
.dg-end{ fill:var(--brand-600); opacity:0; transition:opacity .4s ease 1.9s; }
.dg-ring{ fill:none; stroke:#f5b84c; stroke-width:2.5; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1s ease 2.1s; }
.dna-stage.is-on .dg-line{ stroke-dashoffset:0; }
.dna-stage.is-on .dg-end{ opacity:1; }
.dna-stage.is-on .dg-ring{ stroke-dashoffset:0; }
.dna-becomes{
  position:absolute; right:0; top:2px;
  font-family:"Caveat", cursive; font-size:clamp(28px,3.4vw,46px); color:#a97613;
  opacity:0; transform:translateY(8px) rotate(-4deg);
  transition:opacity .6s ease 2.5s, transform .6s ease 2.5s;
}
.dna-stage.is-on .dna-becomes{ opacity:1; transform:translateY(0) rotate(-4deg); }

/* ==========================================================================
   S10 · brief slides + ask icons
   ========================================================================== */
.bb-slides{ position:relative; flex:1; margin-bottom:18px; min-height:132px; }
.bb-slide{
  position:absolute; inset:0; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.86);
  opacity:0; transform:translateY(8px); transition:opacity .55s ease, transform .55s ease;
}
.bb-slide.on{ opacity:1; transform:none; }
.bb-tabs span{ cursor:default; transition:background .35s ease, color .35s ease, border-color .35s ease; }
.ask-bar{ position:relative; padding-right:92px !important; min-height:66px; align-items:center; }
.ask-q{ display:block; max-width:100%; }
.ask-icons{ position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; gap:4px; }
.ask-ic{
  width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(231,196,131,.26); cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.ask-ic:hover{ background:rgba(231,196,131,.18); border-color:rgba(231,196,131,.5); }
.ask-ic svg{ width:15px; height:15px; fill:none; stroke:#c9caff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ask-mic svg{ stroke:#fff; }

/* ==========================================================================
   S12 · pricing + modal
   ========================================================================== */
/* Same dark-ground + brand-indigo-glow language as #problem / .flow-section /
   .brief-section, so pricing continues the scroll instead of jumping into a
   different palette. The featured card reuses .cmp-col-hero's solid brand
   gradient — the page's one established "this is the winner" treatment —
   rather than inventing a second, weaker way to say the same thing. */
.pricing-section{ position:relative; overflow:hidden; isolation:isolate; background:#111318; }
.pricing-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(56% 50% at 20% 12%, rgba(231,196,131,0.32) 0%, rgba(231,196,131,0) 62%),
    radial-gradient(52% 46% at 84% 78%, rgba(231,196,131,0.4) 0%, rgba(231,196,131,0) 60%),
    linear-gradient(165deg,#131634 0%,#111318 55%,#0e1030 100%);
}
.pricing-section > .wrap{ position:relative; z-index:1; }
.pricing-section .s-title{ color:#fff; }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.pc{
  position:relative; padding:28px 26px; border-radius:var(--radius-lg); display:flex; flex-direction:column;
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 18px 44px -20px rgba(6,8,26,.75);
  transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.pc:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.28); }
.pc-featured{
  background:var(--brand-gradient); border-color:rgba(255,255,255,.16);
  box-shadow:0 26px 60px -18px rgba(12,12,13,0.55), 0 6px 18px rgba(12,12,13,0.22);
  transform:translateY(-12px);
}
.pc-featured:hover{ transform:translateY(-17px); border-color:rgba(255,255,255,.3); }
.pc-flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-pill); background:#f5b84c; color:#2a1f08; font-weight:700; white-space:nowrap;
}
.pc-name{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:10px; }
.pc-price{ font-size:clamp(30px,3.4vw,40px); font-weight:800; color:#fff; letter-spacing:-.03em; margin-bottom:6px; }
.pc-price span{ font-size:14px; font-weight:500; color:rgba(255,255,255,.6); letter-spacing:0; }
/* 2026-10-29 — prices are not public yet: the slot says so, in the same place and weight. */
.pc-price-soon{ font-size:clamp(24px,2.6vw,30px); letter-spacing:-.02em; color:rgba(255,255,255,.92); }
.pc-for{ font-size:13px; color:rgba(255,255,255,.7); margin-bottom:20px; }
.pc-list{ display:grid; gap:10px; }
.pc-list li{ font-size:13.5px; color:rgba(255,255,255,.88); padding-left:22px; position:relative; line-height:1.5; }
.pc-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--brand-300); font-weight:700; }
.pc-featured .pc-name{ color:rgba(255,255,255,.8); }
.pc-featured .pc-for{ color:rgba(255,255,255,.82); }
.pc-featured .pc-list li::before{ color:#fff; }
.pricing-cta{ display:flex; justify-content:center; margin-top:clamp(24px,4vw,40px); }
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr; } .pc-featured{ transform:none; } .pc-featured:hover{ transform:translateY(-5px); } }

.modal-root{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.modal-root[hidden]{ display:none; }
.modal-scrim{ position:absolute; inset:0; background:rgba(8,10,26,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); opacity:0; transition:opacity .35s ease; }
.modal-root.is-open .modal-scrim{ opacity:1; }
.modal-card{
  position:relative; width:min(440px,100%); padding:32px 30px; border-radius:var(--radius-lg);
  background:rgba(26,24,21,.86);
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.22); box-shadow:0 40px 90px -30px rgba(6,4,30,.9);
  opacity:0; transform:translateY(18px) scale(.94); transform-origin:bottom right;
  transition:opacity .38s cubic-bezier(.16,1,.3,1), transform .38s cubic-bezier(.16,1,.3,1);
}
.modal-root.is-open .modal-card{ opacity:1; transform:none; }
.modal-x{ position:absolute; top:14px; right:16px; width:32px; height:32px; border:none; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:19px; line-height:1; }
.modal-x:hover{ background:rgba(255,255,255,.2); }
.modal-card h3{ font-size:21px; color:#fff; margin-bottom:6px; letter-spacing:-.02em; }
.modal-sub{ font-size:13.5px; color:rgba(255,255,255,.66); margin-bottom:20px; line-height:1.55; }
.modal-form{ display:grid; gap:10px; }
.modal-form input{
  height:46px; padding:0 15px; border-radius:var(--radius-md); font-size:14px; font-family:var(--sans);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff;
}
.modal-form input::placeholder{ color:rgba(255,255,255,.45); }
.modal-form input:focus{ outline:none; border-color:rgba(231,196,131,.75); background:rgba(255,255,255,.13); }
.modal-form .btn{ width:100%; justify-content:center; margin-top:6px; }
.modal-note{ text-align:center; font-size:13px; color:var(--success-300); min-height:1em; }
body.modal-open{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .wow2-ghost,.smudge,.rail::after,.rail-stop,.dg-line,.dg-ring,.dg-end,.dna-becomes,
  .bb-slide,.pc,.modal-card,.modal-scrim{ transition:none !important; animation:none !important; }
}

/* Dial fills only once the section is reached, in step with the counter. */
.sd-fill{ animation:none; stroke-dashoffset:100; transition:stroke-dashoffset 1.8s cubic-bezier(.3,.8,.2,1); }
.score-dial.is-on .sd-fill{ stroke-dashoffset:13; }

/* ==========================================================================
   S4 · comparison section
   ========================================================================== */
.section-compare{ position:relative; overflow:hidden; isolation:isolate; }
.section-compare > .wrap{ position:relative; z-index:1; }

/* ==========================================================================
   Lap dividers. Two variants, one radius token.
   .lap-next  — the section below rises over the one above (hero → problem).
   .lap-close — the section above closes itself off with rounded bottom
                corners and the flat section below shows through the notches
                (flow → compare).
   ========================================================================== */
:root{ --lap:clamp(26px,4.4vw,56px); }

.lap-next{
  position:relative; z-index:2;
  margin-top:calc(var(--lap) * -1);
  border-top-left-radius:var(--lap);
  border-top-right-radius:var(--lap);
  overflow:hidden;
}

.lap-close{
  position:relative; z-index:2;
  border-bottom-left-radius:var(--lap);
  border-bottom-right-radius:var(--lap);
  overflow:hidden;
}
.lap-under{
  position:relative; z-index:1;
  margin-top:calc(var(--lap) * -1);
}

/* The cue has to clear the block that laps over the hero's bottom edge. */
.scroll-cue{ bottom:calc(24px + var(--lap)); }

/* ==========================================================================
   Pinned hero. The hero holds still while §2 climbs over it; the photo
   defocuses and the copy lifts away so the handoff reads as depth, not a
   scroll. Sticky is scoped to hero + §2 so it releases once it is covered.
   ========================================================================== */
@media (min-width:761px){
  .hero{ position:sticky; top:0; }
  .hero-bg{
    filter:blur(calc(var(--hp,0) * 15px));
    transform:scale(calc(1 + var(--hp,0) * .07));
    will-change:filter, transform;
  }
    .scroll-cue{ opacity:calc(1 - var(--hp,0) * 3.5); }
}
@media (prefers-reduced-motion: reduce){
  .hero{ position:static; }
  .hero-bg{ filter:none; transform:none; }
  .hero-copy{ opacity:1; transform:none; }
}

/* ---- residual fixes ---- */
/* Ask bar: fixed height so cycling questions never resize the card (beats .bb-ask specificity). */
.bb-ask .ask-bar{ min-height:68px; height:68px; align-items:center; padding-right:92px; }
.bb-ask .ask-q{ display:block; max-width:100%; line-height:1.4; }

/* Ghost word: keep it fully inside the window at every parallax offset. */
.wow2-ghost{ width:min(84vw,880px); font-size:clamp(40px,7vw,104px); }

/* DNA: caption sits close above the field, endpoint lands at the end of the curve. */
.dna-stage{ padding-top:100px; }
.dna-becomes{ top:0; }

/* Graph must share the field's exact box, or the endpoint floats out of it. */
.dna-plot{ position:relative; }
.dna-graph{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* Pencil ring: an open, slightly overshot oval, not a drawn ellipse. */
.dg-ring{
  stroke:#dfa42f; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}

/* ---- seam: let the grid fade out before the section edge clips it ---- */
.grid-bg{
  -webkit-mask-image:radial-gradient(100% 60% at 50% 50%, #000 18%, transparent 74%);
  mask-image:radial-gradient(100% 60% at 50% 50%, #000 18%, transparent 74%);
}

/* ---- S3: one line, centred, box hugs its own text (widths paired in JS) ---- */
.fi-raw, .fi-done{
  width:auto; white-space:nowrap; text-align:center;
  display:flex; align-items:center; justify-content:center;
  padding:11px 20px; line-height:1.3;
}


/* ============================================================
   HERO v2 -- two-column grid: copy left, metric mockups right,
   Dex bubble floating bottom-right, partner strip bottom.
   Sits alongside the existing .hero rules; keeps pin+blur intact.
   ============================================================ */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,0.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  padding-top:clamp(120px,22vh,220px);
}
.hero-content{ padding-top:0 !important; padding-bottom:clamp(200px,26vh,260px); position:relative; z-index:2; }
.hero-copy{ max-width:560px; }
.hero-ctas{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:2px 0 0; }
.btn-see{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:600; font-size:15.5px;
  color:#1a1408; text-decoration:none;
  padding:10px 6px;
  transition:color .2s ease, transform .2s ease;
}
.btn-see-label{ display:inline-block; }
.btn-see-play{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:32px !important; height:32px !important; border-radius:999px !important;
  background:rgba(255,255,255,0.85) !important;
  color:#1a1408 !important;
  box-shadow:0 4px 14px -6px rgba(24,18,7,0.35);
  transition:transform .18s ease, background .18s ease;
}
.btn-see:hover .btn-see-play{ background:#fff !important; transform:scale(1.06); }
.btn-see:hover{ color:var(--brand-700); }
.btn-see-play{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  background:rgba(24,18,7,0.10); color:var(--hero-ink);
  transition:background .2s ease, transform .2s ease;
}
.btn-see:hover .btn-see-play{ background:rgba(24,18,7,0.18); transform:scale(1.05); }

/* --- Mockup grid: 3 rows x 2 cols of glassy cards --- */
.hero-mockup{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-rows:minmax(140px, auto);
  gap:14px;
  max-width:none;
  margin-top:8px;
}
.mk-card{
  position:relative;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  border:1px solid rgba(255,255,255,0.9);
  border-radius:20px;
  padding:12px 14px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 1px 0 rgba(255,255,255,0.55),
    0 18px 40px -18px rgba(24,18,7,0.45),
    0 4px 14px -8px rgba(24,18,7,0.25);
  display:flex; flex-direction:column; gap:6px;
  color:#1a1408;
}
.mk-head{ display:flex; align-items:center; justify-content:space-between; }
.mk-icon{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:999px;
  background:rgba(0,0,0,0.04); color:#1a1408;
}
.mk-alert .mk-icon::after{
  content:""; position:absolute; top:-2px; right:-2px;
  width:9px; height:9px; border-radius:999px;
  background:#ea5a2a; border:2px solid #fff;
}
.mk-badge{
  position:absolute; top:-4px; right:-6px;
  min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:#ea5a2a; color:#fff;
  font-family:var(--sans); font-weight:700; font-size:10.5px; line-height:1;
  border:2px solid #fff;
}
.mk-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:999px;
  background:#111; color:#fff;
}
.mk-label{
  font-family:var(--sans); font-weight:500; font-size:14px; line-height:1.25;
  color:#1a1408; margin-top:6px;
}
.mk-value{
  font-family:var(--sans); font-weight:800; font-size:30px; line-height:1;
  letter-spacing:-0.02em; color:#1a1408; margin-top:auto;
}
.mk-value.mk-red{ color:#ea5a2a; }
.mk-value-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.mk-cur{ font-size:.7em; font-weight:700; margin-right:2px; }
.mk-unit{ font-size:.55em; font-weight:700; margin-left:2px; color:rgba(26,20,8,0.55); }
.mk-spark{ display:flex; align-items:flex-end; gap:3px; height:14px; margin-top:auto; }
.mk-spark i{ display:inline-block; width:5px; background:#ea5a2a; border-radius:2px; }
.mk-spark i:nth-child(1){ height:14px; }
.mk-spark i:nth-child(2){ height:9px; background:rgba(26,20,8,0.25); }
.mk-spark i:nth-child(3){ height:6px; background:rgba(26,20,8,0.18); }
.mk-spark i:nth-child(4){ height:4px; background:rgba(26,20,8,0.14); }
.mk-spark i.s{ background:rgba(26,20,8,0.35); height:8px; width:4px; }
.mk-dots{ display:inline-flex; gap:5px; }
.mk-dots i{ width:7px; height:7px; border-radius:999px; background:rgba(26,20,8,0.15); }
.mk-dots i.on{ background:#1a1408; }
.mk-foot{ font-family:var(--sans); font-size:12px; color:rgba(26,20,8,0.55); margin-top:4px; }

/* --- Dex speech bubble, bottom-right of hero --- */
.hero-dex{
  position:absolute; z-index:4;
  right:clamp(24px,5vw,80px);
  bottom:clamp(96px,11vh,120px);
  display:flex; align-items:center; gap:10px;
  padding:10px 14px 10px 12px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  border:1px solid rgba(255,255,255,0.9);
  border-radius:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 1px 0 rgba(255,255,255,0.55),
    0 18px 42px -20px rgba(24,18,7,0.45),
    0 5px 14px -8px rgba(24,18,7,0.25);
  max-width:290px;
}
.dex-brain{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:999px;
  background:rgba(0,0,0,0.05); color:#1a1408; flex:0 0 30px;
}
.dex-head{ font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:rgba(26,20,8,0.55); margin-bottom:2px; }
.dex-msg{ font-family:var(--sans); font-size:12.5px; font-weight:600; color:#1a1408; line-height:1.3; }

/* --- Trusted-by band: contained pill sitting over the mountain silhouette --- */
.hero-partners{
  position:absolute; z-index:4;
  left:50%; transform:translateX(-50%);
  bottom:clamp(75px, 11vh, 130px);
  width:min(780px, calc(100% - 48px));
  padding:12px 24px 14px;
  color:rgba(255,255,255,0.95);
  pointer-events:none;
}
.hp-title{
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; text-align:center;
  color:rgba(255,255,255,0.85); margin:0 0 8px;
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.hp-marquee{
  position:relative;
  overflow:hidden;
  max-width:100%;
  margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.hp-track{
  display:flex; align-items:baseline; gap:clamp(24px,2.8vw,36px);
  width:max-content;
  animation:hp-scroll 28s linear infinite;
}
@keyframes hp-scroll{
  from{ transform:translate3d(0, 0, 0); }
  to  { transform:translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
  .hp-track{ animation:none; }
}
.hp-brand{
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:var(--sans);
  color:rgba(255,255,255,0.88);
  opacity:.88;
}
.hp-brand b{ font-weight:800; font-size:18px; letter-spacing:.01em; white-space:nowrap; color:rgba(255,255,255,0.95); text-shadow:0 1px 6px rgba(0,0,0,0.4); }
.hp-brand em{ font-style:normal; font-weight:500; font-size:10px; letter-spacing:.16em; color:rgba(255,255,255,0.72); white-space:nowrap; text-shadow:0 1px 4px rgba(0,0,0,0.4); }
.hp-serif b{ font-family:Georgia, "Times New Roman", serif; font-weight:700; letter-spacing:0; }

/* --- Pin+blur behavior: keep mockup + dex + partners tied to the hero copy --- */
@media (min-width:961px){
  .hero-mockup{
    opacity:calc(1 - var(--hp,0) * 1.4);
    transform:translateY(calc(var(--hp,0) * -30px));
    will-change:opacity, transform;
  }
  .hero-dex{
    opacity:calc(1 - var(--hp,0) * 1.6);
    transform:translateY(calc(var(--hp,0) * -30px));
    will-change:opacity, transform;
  }
  .hero-partners{
    opacity:calc(1 - var(--hp,0) * 2);
    will-change:opacity;
  }
}

/* --- Responsive: single column below 960px, cards collapse to horizontal snap-row --- */
@media (max-width:960px){
  .hero-grid{
    grid-template-columns:1fr;
    padding-top:clamp(96px,14vh,140px);
    gap:22px;
  }
  .hero-mockup{
    grid-template-columns:repeat(6, minmax(200px, 1fr));
    max-width:none;
    margin:0 -24px 0 0;
    padding-right:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .mk-card{ scroll-snap-align:start; min-height:150px; }
  .hero-dex{
    position:relative; right:auto; bottom:auto;
    margin:16px 0 0; max-width:none;
  }
  /* 2026-09-24 — THE TRUST BAND CENTRES ITSELF ON A PHONE, and does not push
     the page sideways. It is centred with left:50% + translateX(-50%), and the
     rule below ("skip per-layer parallax below 960px") clears every transform
     in the hero with !important — including that one. Left at 50% with nothing
     pulling it back, the band started at the middle of the screen and ran
     147px past the right edge, so the whole page scrolled sideways on a phone.
     Here it is in the normal flow, so it needs no transform to sit straight. */
  .hero-partners{ position:relative; bottom:auto; left:auto; margin-inline:auto; padding:12px 0; background:linear-gradient(180deg, rgba(24,18,7,0.35) 0%, rgba(24,18,7,0.55) 100%); }
  .hp-brand{ flex:0 0 auto; }
}


/* ============================================================
   HERO v4 -- three-layer parallax composition.
   Reads --hp from the existing scroll driver (js/main.js).
   ============================================================ */
.hero{ isolation:isolate; }
.hero-media{ z-index:0; }
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 55%;
  z-index:0;
}
.hero-scrim{ z-index:1; }
.hero-content, .hero-grid{ z-index:2; position:relative; }

/* Foreground desk plane, sits IN FRONT of the cards.
   Aligned to the hero's bottom so the desk edge sits on the fold. */
.hero-fg{
  position:absolute;
  left:0; right:0;
  bottom:0;
  width:100%;
  height:auto;
  max-height:100%;
  z-index:3;
  pointer-events:none;
}
.hero-fg img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  object-position:50% 100%;
}

/* Dex + partners float above everything */
.hero-dex{ z-index:5 !important; }
.hero-partners{ z-index:6 !important; }

/* --- Entrance choreography: runs once on page load, no loops ---
   Bottom fades in first; foreground slides up from below.
   Cards stagger in via the existing .reveal class. */
@keyframes hero-bg-in{
  from{ opacity:0; transform:scale(1.02); }
  to{ opacity:1; transform:none; }
}
@keyframes hero-fg-in{
  from{ opacity:0; transform:translate3d(0, 60px, 0); }
  to{ opacity:1; transform:translate3d(0, 0, 0); }
}
.hero-bg{ animation:hero-bg-in .9s cubic-bezier(.16,1,.3,1) both; }
.hero-fg{ animation:hero-fg-in 1.05s .2s cubic-bezier(.16,1,.3,1) both; }

/* Respect the user's motion pref: skip entrance + parallax alike. */
@media (prefers-reduced-motion: reduce){
  .hero-bg, .hero-fg{ animation:none; }
}

/* At mobile the .hero is display:block with a shorter media band;
   the foreground plane still anchors to the visual bottom of that band. */
@media (max-width:960px){
  .hero-fg{ display:none; }  /* Foreground clutters the compact mobile hero */
  .hero-bg{ object-position:60% center; }
}


/* ============================================================
   HERO v5 -- the Decision Desk shot, in a soft glass frame.
   Sits in the middle depth plane (z:2) between hero-bg (0) and hero-fg (3),
   so the desk and the laptop in the foreground photo pass in front of it.
   HERO v7 (bottom of this file) places it against the laptop and flies it in.
   ============================================================ */
.hero-shot{
  position:relative;
  display:block;
  width:100%;
  max-width:700px;
  margin-left:auto;
  margin-right:0;
  border-radius:clamp(12px, 1.4vw, 20px);
  overflow:hidden;
  /* Glass, not a sticker: a little of the mountain reads through it. */
  background:rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 1px 0 rgba(255,255,255,0.55),
    0 40px 90px -36px rgba(24,18,7,0.55),
    0 14px 30px -14px rgba(24,18,7,0.3);
  isolation:isolate;
}
.hero-shot img{
  display:block;
  width:100%; height:auto;
  opacity:.92;                     /* the resting translucency; the flight's
                                      fade lives on .hero-shot and multiplies */
}
/* Luminous rim over the shot, so the glass depth still reads. */
.hero-shot::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.55),
    inset 0 2px 0 rgba(255,255,255,0.4);
}

/* Hide the (now-unused) 6-card grid rules so nothing accidentally renders. */
.hero-mockup{ display:none !important; }

/* Mobile: the shot sits in the compact stack, under the copy. */
@media (max-width:960px){
  .hero{ display:block; }
  /* Nothing floats over the compact hero any more -- the shot and the trust
     band are both in the flow -- so the room that was being held for them
     goes back, instead of opening a 240px gap under the buttons. */
  .hero-content{ padding-bottom:24px; }
  .hero-shot{
    width:auto;
    max-width:none;
    margin:16px 24px 0;
  }
}


/* ============================================================
   HERO v6 -- per-layer parallax + "next section takes over".
   Each element moves, scales, and blurs at its own rate as --hp
   grows from 0 (hero at rest) to 1 (fully receding).
   Sprint 6 already keeps .hero position:sticky.
   ============================================================ */
@media (min-width:961px){
  /* Hero pins for the full duration of its own scroll -- next section
     then rises up over the pinned hero from below.                    */
  .hero{
    position:relative;
    z-index:0;
    overflow:hidden;                 /* keep parallax counter-translation in-bounds */
  }

  /* Every hero layer becomes an independent parallax plane. Common
     shape: translate up, scale down slightly, blur up. All bound to --hp. */
  .hero-bg{
    /* 30% apparent speed -> counter-scroll 70vh downward */
    transform:translate3d(0, calc(var(--hp,0) * 70vh), 0);
    filter:blur(calc(var(--hp,0) * 15px));
    will-change:transform, filter;
  }
  .hero-fg{
    /* 100% apparent speed -> moves with the page, no counter */
    transform:translate3d(0, 0, 0);
    filter:blur(calc(var(--hp,0) * 10px));
    will-change:filter;
  }
  .hero-copy{
    /* 70% apparent speed */
    transform:translate3d(0, calc(var(--hp,0) * 30vh), 0);
    filter:blur(calc(var(--hp,0) * 5px));
    will-change:transform, filter;
  }
  .hero-dex{
    /* 60% apparent speed */
    transform:translate3d(0, calc(var(--hp,0) * 40vh), 0);
    filter:blur(calc(var(--hp,0) * 8px));
    will-change:transform, filter;
  }
  .hero-partners{
    /* 55% apparent speed + preserve the horizontal centering (translateX -50%) */
    transform:translate(-50%, calc(var(--hp,0) * 45vh));
    filter:blur(calc(var(--hp,0) * 10px));
    will-change:transform, filter;
  }


  /* Reduced motion: freeze the parallax + blur curves. */
  @media (prefers-reduced-motion: reduce){
    .hero-bg, .hero-fg, .hero-copy, .hero-shot, .hero-dex, .hero-partners{
      transform:none; filter:none; opacity:1;
    }
  }
}

/* Mobile: skip per-layer parallax below 960px. Hero scrolls normally. */
@media (max-width:960px){
  .hero{ overflow:visible; }
  .hero-bg, .hero-fg, .hero-copy, .hero-shot,
  .hero-dex, .hero-partners{
    transform:none !important; filter:none !important;
  }
}


/* ============================================================
   HERO v7 -- ONE LOCKED COMPOSITION  (2026-09-24)

   THE PROBLEM THIS SOLVES. The hero was three things sized three different
   ways: a desk photograph sized by width and pinned to the TOP of the hero by
   a max-height, a mockup card sized by a grid column, and copy sized by vw
   clamps. On a 1440x900 window they happened to line up. On a wide one they
   did not: at 2560 the photo's laptop fell 40px BELOW the fold while the card
   floated on alone, and the desk's front edge was cut off.

   THE STAGE. The desk photograph is now the stage. It is 1920x1280, laid in
   with object-fit:cover, bottom-anchored, over a box that is exactly the
   window's width and height -- so the desk edge always sits on the fold and
   the picture never leaves a gap, whatever the window.

     --fs  one photo pixel, on screen. Anything that must hold its place
           against the desk -- the Decision Desk shot, the trust band -- is
           written in photo coordinates times --fs, so it keeps the same spot
           beside the laptop at 1280 or at 3440.
     --ks  the UI scale: 1 at the 1440x850 window this was drawn for, driven
           by whichever of width/height is tighter. Type and the shot grow
           with the window without the runaway zoom a cover scale gives.

   Both are lengths that equal 1px at the reference size, so a number off the
   design goes straight through: calc(60 * var(--ks)).
   ============================================================ */
@media (min-width:961px){
  .hero{
    /* 1cqw is 1% of the hero's OWN width, which excludes the scrollbar.
       100vw does not, and 15px of error there puts the shot off the laptop. */
    container-type:inline-size;
    display:block;
    --fs: max(calc(100cqw / 1920), calc(100svh / 1280));
    --ks: clamp(0.76px, min(calc(100cqw / 1440), calc(100svh / 850)), 1.34px);
    /* On a very wide, short window the photo has to zoom to span the width,
       and the laptop climbs towards the middle of the screen with nothing
       left above it. --stage-drop lets the desk hang below the fold by just
       enough to hold the lid at 42% of the window's height. It is 0 on every
       ordinary window (it only bites past about 2.3:1), and everything placed
       in photo coordinates carries it, so the composition stays rigid. */
    --stage-drop: min(0px, calc(58svh - 595 * var(--fs)));
  }

  /* --- the stage itself: full width, the window's height, on the fold --- */
  .hero-fg{
    top:auto; bottom:var(--stage-drop); left:0; right:0;
    height:100svh; max-height:none;
  }
  .hero-fg img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:50% 100%;   /* bottom-anchored: the desk edge is the fold */
  }

  /* --- the copy: same gutter as before, now scaling with the composition --- */
  .hero-content{ padding-left:clamp(24px, 5.5cqw, calc(80 * var(--ks))); }
  .hero-grid{ display:block; }
  .hero-copy{
    position:absolute;
    left:0; top:calc(244 * var(--ks));
    width:calc(560 * var(--ks));
    max-width:none;
  }
  .hero-copy .eyebrow{ font-size:calc(12.5 * var(--ks)); margin-bottom:calc(18 * var(--ks)); }
  .hero-title{ font-size:calc(60 * var(--ks)); margin-bottom:calc(30 * var(--ks)); }
  .hero-ctas{ gap:calc(20 * var(--ks)); }
  .hero-ctas .btn-lg{ height:calc(52 * var(--ks)); padding:0 calc(28 * var(--ks)); font-size:calc(16 * var(--ks)); }
  .btn-see{ font-size:calc(15.5 * var(--ks)); }
  .btn-see-play{ width:calc(32 * var(--ks)) !important; height:calc(32 * var(--ks)) !important; }

  /* --- the Decision Desk shot, pinned to the laptop ---
     Photo coordinates: its right edge at x=1888, its foot at y=907. That is
     the corner the laptop lid rises in front of, and it stays that corner at
     every window size. max() keeps a gutter on a tall window, where the photo
     is cropped sideways and x=1888 would fall off the right edge. */
  .hero-shot{
    position:absolute; z-index:2;
    width:calc(698 * var(--ks));
    max-width:none;
    margin:0;
    right:max(20px, calc(50cqw - 928 * var(--fs)));
    /* ...and its foot at photo y=760, which is 55 photo pixels above the lid's
       top edge -- the overlap the design was drawn with. The second term is a
       guard for short 16:9 windows, where that foot would push the shot's head
       up under the header pill. */
    bottom:min(
      calc(520 * var(--fs) + var(--stage-drop)),
      calc(100svh - 88px - 365 * var(--ks))
    );
    border-radius:calc(18 * var(--ks));
    transform-origin:50% 50%;

    /* --- and the flight into the laptop ---
       --hf runs 0 -> 1 over the first 40% of the hero's scroll (js/main.js);
       --fly-x/y/shrink are measured off the real laptop by the same script,
       so the shot lands on it however the window is shaped. It does not need
       to be hidden at the end: .hero-fg sits at z:3 above it, so the lid and
       the desk swallow it. */
    transform:
      translate3d(calc(var(--hf,0) * var(--fly-x, 0px)), calc(var(--hf,0) * var(--fly-y, 0px)), 0)
      perspective(1400px)
      rotateX(calc(var(--hf,0) * 34deg))
      rotateZ(calc(var(--hf,0) * -6deg))
      scale(calc(1 - var(--hf,0) * var(--fly-shrink, 0.78)));
    /* Holds its own for the first breath, then goes quickly: nothing is left
       to see by the halfway mark, so the turn and the shrink read as a hint
       rather than as an animation you can line up against the laptop. */
    opacity:calc(1 - var(--hf,0) * var(--hf,0) * 4.2);
    filter:blur(calc(var(--hf,0) * 5px));
    will-change:transform, opacity;
  }

  /* --- the trust band rides the photo, not the window --- */
  .hero-partners{
    bottom:clamp(56px, calc(107 * var(--fs) + var(--stage-drop)), 160px);
    width:min(calc(780 * var(--ks)), calc(100cqw - 48px));
  }

  /* Reduced motion: the shot stays on the desk, still and whole. */
  @media (prefers-reduced-motion: reduce){
    .hero-shot{ transform:none; opacity:1; filter:none; }
  }
}