/* ── AppDeen brand type. Three voices, all self-hosted, zero CDN round-trips ──
     Titles: Clash Display 600  (Indian Type Foundry / Fontshare, free commercial EULA)
     Body:   Satoshi 400/500/700 (Fontshare) — the human voice
     Labels: Space Mono 400/700 (Google, OFL) — the machine voice, uppercase only
     Source of truth: Max's brand spec + campaigns/appdeen-brand/assets/fonts. */
  @font-face{ font-family:"Clash Display"; src:url("/fonts/ClashDisplay-Variable.woff2") format("woff2-variations");
    font-weight:200 700; font-display:swap; font-style:normal; }
  @font-face{ font-family:"Satoshi"; src:url("/fonts/Satoshi-Regular.woff2") format("woff2");
    font-weight:400; font-display:swap; font-style:normal; }
  @font-face{ font-family:"Satoshi"; src:url("/fonts/Satoshi-Medium.woff2") format("woff2");
    font-weight:500; font-display:swap; font-style:normal; }
  @font-face{ font-family:"Satoshi"; src:url("/fonts/Satoshi-Bold.woff2") format("woff2");
    font-weight:600 700; font-display:swap; font-style:normal; }
  @font-face{ font-family:"Space Mono"; src:url("/fonts/SpaceMono-Regular.woff2") format("woff2");
    font-weight:400 500; font-display:swap; font-style:normal; }
  @font-face{ font-family:"Space Mono"; src:url("/fonts/SpaceMono-Bold.woff2") format("woff2");
    font-weight:600 700; font-display:swap; font-style:normal; }
  :root{ --bg:#0b0d13; --ink:#eef1f7; --dim:#99a1b0; --line:#212939;
    --blue:#2f6bff; --cyan:#3fb0ff; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--bg); color:var(--ink); min-height:100%;
    font-family:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; }

  /* ── Floating liquid-glass nav, the docked mark completes the logo ── */
  .nav{ position:fixed; top:18px; left:50%; z-index:6;
    width:auto; max-width:calc(100vw - 28px);            /* boxed, hugs its content */
    display:inline-flex; align-items:center; gap:30px; padding:9px 9px 9px 20px; border-radius:999px;
    background:rgba(13,19,34,.5);
    -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 12px 36px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
    transform:translate(-50%,0); animation:navdrop .7s .35s ease both; }
  /* liquid-glass sheen */
  .nav::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(168deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%); }
  .nav > *{ position:relative; z-index:1; }
  .brand{ display:flex; align-items:center; gap:5px; color:var(--ink); text-decoration:none;
    font-weight:600; letter-spacing:-.01em; font-size:18px; white-space:nowrap; }
  .brand .mark{ width:60px; height:60px; display:block; flex:none; }
  .brand i{ color:var(--cyan); font-style:normal; }
  .nav-links{ display:flex; gap:24px; }
  .nav-links a{ color:#e8edf6; text-decoration:none; font-size:14.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; transition:color .2s ease; }
  .nav-links a:hover{ color:#fff; }
  .navcta{ color:#fff; text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap;
    border-radius:999px; padding:9px 18px; cursor:pointer;
    background:linear-gradient(92deg, rgba(47,107,255,.92), rgba(63,176,255,.86));
    border:1px solid rgba(255,255,255,.20); box-shadow:0 4px 14px -4px rgba(47,107,255,.6);
    transition:transform .2s ease, box-shadow .2s ease; }
  .navcta:hover{ transform:translateY(-1px); box-shadow:0 9px 24px -6px rgba(63,176,255,.85); }
  @keyframes navdrop{ from{ opacity:0; transform:translate(-50%,-14px) } to{ opacity:1; transform:translate(-50%,0) } }
  @media (max-width:760px){
    .nav{ top:12px; gap:10px; padding:7px 7px 7px 12px; max-width:calc(100vw - 20px); }
    .nav-links{ display:none; }
    .brand{ font-size:16px; gap:3px; }
    .brand .mark{ width:40px; height:40px; }
    .mode{ width:34px; height:34px; }
    .navcta{ padding:8px 14px; font-size:13px; }
  }

  /* ── Hero: the living triangle owns the first screen ───────────────── */
  #gl{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0;
    pointer-events:none;            /* let touch/scroll pass through, never trap the gesture */
    transform-origin:50% 44%; will-change:transform, opacity; }  /* origin ≈ the mark's hole */
  .hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
    padding:7vh 7vw; pointer-events:none; z-index:2; }
  .hero .kicker{ font-size:clamp(11px,2.6vw,13px); letter-spacing:.12em; text-transform:uppercase;
    color:var(--dim); margin-bottom:18px; opacity:0; animation:rise .9s .2s forwards; }
  h1{ font-size:clamp(34px,8.5vw,84px); line-height:.98; letter-spacing:-.02em; font-weight:600;
    max-width:14ch; opacity:0; animation:rise 1s .35s forwards; }
  h1 .grad{ background:linear-gradient(92deg,#fff 30%,#4d8bff 75%,#249cff);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  p.sub{ margin-top:22px; max-width:46ch; font-size:clamp(15px,3.6vw,19px); line-height:1.5;
    color:#c9d0dd; opacity:0; animation:rise 1s .55s forwards; }
  .hint{ position:absolute; left:0; right:0; bottom:max(18px,env(safe-area-inset-bottom));
    text-align:center; font-size:12px; letter-spacing:.04em; color:var(--dim); z-index:3;
    opacity:0; animation:fade 1.2s 1.4s forwards; transition:opacity .4s ease; }
  .hint.gone{ opacity:0 !important; pointer-events:none; }
  .hint .chev{ display:block; width:16px; height:16px; margin:10px auto 0; border-right:1.5px solid var(--dim);
    border-bottom:1.5px solid var(--dim); transform:rotate(45deg); animation:bob 1.8s ease-in-out infinite; }
  /* hero touch surface: vertical = scroll, horizontal = play with the mark */
  .hero-touch{ position:absolute; inset:0; z-index:1; pointer-events:auto; touch-action:pan-y; }
  @keyframes rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
  @keyframes fade{ to{opacity:1} }
  @keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0px,0px) } 50%{ transform:rotate(45deg) translate(3px,3px) } }
  .hl{ display:inline; }
  /* legibility scrim behind hero copy (off on desktop, on for phones) */
  .hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
    background:linear-gradient(to top,#05070d 1%, rgba(5,7,13,.62) 16%, rgba(5,7,13,0) 40%); }
  .hero .kicker, .hero h1, .hero p.sub{ position:relative; z-index:2; pointer-events:none; }
  /* ── Hero on phones: minimal copy, triangle owns the screen ── */
  @media (max-width:760px){
    .hero{ padding:0 6vw calc(60px + env(safe-area-inset-bottom)); }
    .hero::before{ opacity:1; }
    .hero .kicker{ margin-bottom:12px; }
    .hero h1{ max-width:none; font-size:clamp(44px,12.5vw,64px); line-height:1.02; }
    .hero h1 .hl{ display:block; }
    .hero p.sub{ max-width:36ch; font-size:16.5px; margin-top:18px; }
  }

  /* ── Roster section (opaque, scrolls up over the fixed canvas) ────── */
  .roster{ position:relative; z-index:2; background:var(--bg); margin-top:-4vh;
    box-shadow:0 -40px 80px -20px rgba(4,6,13,.9); }
  .roster .wrap{ max-width:1120px; margin:0 auto; padding:5vh 7vw 16vh; }

  .roster .kicker{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
    display:flex; align-items:center; gap:12px; }
  .roster .kicker::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--blue),transparent); }
  .roster h2{ font-size:clamp(30px,5.4vw,54px); line-height:1.02; letter-spacing:-.025em; font-weight:600;
    margin:22px 0 0; max-width:18ch; }
  .roster h2 .grad{ background:linear-gradient(92deg,#fff 35%,var(--cyan) 92%);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .roster .lead{ margin-top:20px; max-width:52ch; font-size:clamp(15px,2.4vw,18px); line-height:1.55; color:#c9d0dd; }

  .roster .grid{ margin-top:64px; display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
  @media (max-width:760px){ .roster .grid{ grid-template-columns:1fr; } }

  .card{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px;
    background:radial-gradient(120% 140% at 0% 0%, #141b2b 0%, #0e1220 60%, #0b0e16 100%);
    min-height:430px; display:flex; flex-direction:column; isolation:isolate; cursor:default;
    transition:border-color .4s ease, transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
  .card:hover{ border-color:#2b3a5e; transform:translateY(-4px);
    box-shadow:0 28px 60px -30px rgba(47,107,255,.55); }
  .card::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s ease; z-index:3;
    background:radial-gradient(70% 90% at var(--mx,30%) var(--my,0%),
      rgba(47,107,255,.20), rgba(63,176,255,.06) 40%, transparent 70%); pointer-events:none; }
  .card:hover::before{ opacity:1; }
  .card::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
    background:
      linear-gradient(transparent 95%, rgba(63,176,255,.05) 95%) 0 0/100% 26px,
      linear-gradient(90deg, transparent 95%, rgba(63,176,255,.045) 95%) 0 0/26px 100%;
    -webkit-mask:linear-gradient(180deg,#000,transparent 70%);
    mask:linear-gradient(180deg,#000,transparent 70%); }

  .figure{ position:absolute; right:-9%; bottom:0; height:107%; width:72%; z-index:1;
    pointer-events:none; transform:translateZ(0);
    background:radial-gradient(54% 60% at 64% 58%,
      rgba(70,104,180,.30), rgba(44,66,120,.12) 46%, transparent 70%);
    filter:drop-shadow(0 0 5px rgba(120,170,255,.85)) drop-shadow(0 0 18px rgba(60,120,240,.45))
      brightness(1.22) contrast(1.05);
    transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
  .figure img{ position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; object-position:bottom right; }
  .figure .body{ position:absolute; inset:0;
    animation:float var(--dur,7s) ease-in-out infinite; transform-origin:bottom center; }
  .figure .ghost{ opacity:0; mix-blend-mode:screen;
    filter:brightness(1.4) hue-rotate(-12deg) saturate(1.6); }
  .card:hover .figure{ filter:drop-shadow(0 0 7px rgba(150,190,255,.95)) drop-shadow(0 0 30px rgba(70,130,255,.6))
    brightness(1.28) contrast(1.06); }
  .card:hover .figure .ghost{ animation:glitch .7s steps(2) 1; }

  .emblem{ position:absolute; z-index:2; width:40%; aspect-ratio:1; border-radius:50%;
    left:var(--ex,55%); top:var(--ey,20%); transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(63,176,255,.55), rgba(47,107,255,.18) 45%, transparent 70%);
    pointer-events:none; mix-blend-mode:screen; animation:beat 3.4s ease-in-out infinite; }
  .card:hover .emblem{ animation:beat 1.4s ease-in-out infinite; }

  .scan{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; overflow:hidden; }
  .scan::after{ content:""; position:absolute; left:0; right:0; height:34%; top:-40%;
    background:linear-gradient(180deg, transparent, rgba(63,176,255,.16) 45%, rgba(120,200,255,.30) 50%,
      rgba(63,176,255,.16) 55%, transparent); mix-blend-mode:screen; }
  .card:hover .scan{ opacity:1; }
  .card:hover .scan::after{ animation:sweep 1.5s cubic-bezier(.4,0,.3,1) infinite; }

  .br{ position:absolute; width:20px; height:20px; z-index:4; pointer-events:none;
    border:1.5px solid #2b3a5e; opacity:0; transition:opacity .5s ease, border-color .4s ease; }
  .br.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
  .br.tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
  .br.bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
  .br.br2{ bottom:14px; right:14px; border-left:0; border-top:0; }
  .reveal.in .br{ opacity:1; }
  .card:hover .br{ border-color:var(--cyan); }

  .body-col{ position:relative; z-index:3; padding:30px 30px 26px; display:flex;
    flex-direction:column; flex:1; max-width:64%;
    background:linear-gradient(90deg, #0b0e16 18%, rgba(5,8,15,.6) 62%, transparent); }
  @media (max-width:760px){ .body-col{ max-width:74%; } .figure{ width:64%; right:-8%; } }

  .top{ display:flex; flex-direction:column; gap:7px; }
  .name{ font-size:24px; font-weight:600; letter-spacing:-.01em; }
  .role{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
  .philo{ margin-top:16px; font-size:15.5px; line-height:1.5; color:#dfe5f1; max-width:30ch; }
  .domain{ margin-top:18px; font-size:13px; color:var(--dim); line-height:1.5; max-width:30ch; }
  .etag{ display:inline-flex; align-items:center; gap:6px; width:max-content; margin-top:4px;
    font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:999px;
    border:1px solid #22304e; color:#9fb4e8; }
  .etag.live{ color:#5fd08a; border-color:#1f4a35; }
  .etag.live i{ width:6px; height:6px; border-radius:50%; background:#5fd08a; box-shadow:0 0 6px #5fd08a; font-style:normal; }
  a.pick{ text-decoration:none; }

  .sig{ margin-top:auto; padding-top:22px; height:34px; display:flex; align-items:center; }
  .sig b{ font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:400;
    font-size:12px; color:var(--cyan); white-space:nowrap; overflow:hidden; width:0;
    border-right:2px solid transparent; }
  .card:hover .sig b{ animation:type .9s steps(var(--ch)) forwards, caret .8s step-end 5; }

  .pick{ margin-top:14px; font-size:14px; color:#9fb4e8; display:inline-flex; align-items:center; gap:7px;
    opacity:0; transform:translateX(-4px); transition:opacity .4s ease .15s, transform .4s ease .15s; }
  .card:hover .pick{ opacity:1; transform:none; }
  .pick svg{ width:14px; height:14px; }

  .card.custom{ grid-column:1 / -1; min-height:0;
    background:linear-gradient(100deg, #081424 0%, #0a1830 50%, #06101f 100%);
    border-color:#21304e; }
  .card.custom .body-col{ max-width:100%; background:none; padding-bottom:30px; }
  .card.custom .role{ color:#cdd6ea; }
  .gate{ margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
  .tag{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#9fb4e8;
    border:1px solid #2a3a5c; border-radius:999px; padding:6px 13px; }
  .talk{ pointer-events:auto; font:inherit; font-size:14px; color:#0b0d13; font-weight:600;
    background:linear-gradient(92deg,#fff,#bcd6ff); border:0; border-radius:999px; padding:11px 20px;
    cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; }
  .talk:hover{ transform:translateY(-1px); box-shadow:0 10px 30px -12px rgba(63,176,255,.6); }

  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }

  @keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(var(--lift,-9px)) } }
  @keyframes beat{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1) }
    50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.07) } }
  @keyframes sweep{ 0%{ top:-40% } 100%{ top:120% } }
  @keyframes type{ from{ width:0 } to{ width:calc(var(--ch)*1ch + .9ch) } }
  @keyframes caret{ 50%{ border-right-color:var(--cyan) } }
  @keyframes glitch{
    0%{ opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0) }
    20%{ opacity:.5; transform:translateX(-4px); clip-path:inset(12% 0 60% 0) }
    40%{ opacity:.4; transform:translateX(5px); clip-path:inset(55% 0 18% 0) }
    60%{ opacity:.5; transform:translateX(-3px); clip-path:inset(30% 0 42% 0) }
    100%{ opacity:0; transform:translateX(0); clip-path:inset(0 0 0 0) } }

  /* ── Gets sharper every month ─────────────────────────────────────── */
  .moat{ position:relative; z-index:2; background:var(--bg); }
  .moat .wrap{ max-width:1180px; margin:0 auto; padding:9vh 7vw 13vh; }
  .moat .kicker{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
    display:flex; align-items:center; gap:12px; }
  .moat .kicker::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--blue),transparent); }
  .moat h2{ font-size:clamp(28px,5vw,50px); line-height:1.04; letter-spacing:-.025em; font-weight:600;
    margin:20px 0 0; max-width:20ch; }
  .moat h2 .grad{ background:linear-gradient(92deg,#fff 25%,var(--cyan) 95%);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .moat .lead{ margin-top:20px; max-width:64ch; font-size:clamp(15px,2.4vw,18px); line-height:1.62; color:#c9d0dd; }
  .moat .lead b{ color:#d6e0f5; font-weight:600; }
  .whys{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .why{ display:flex; gap:12px; border:1px solid var(--line); border-radius:14px; padding:18px 20px;
    background:radial-gradient(120% 140% at 0 0,#141b2b,#0e1220 60%,#0b0e16); }
  .why svg{ width:18px; height:18px; flex:none; margin-top:3px; stroke:var(--cyan); }
  .why b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; }
  .why span{ display:block; margin-top:5px; font-size:13.5px; line-height:1.5; color:#a5b0c4; }
  @media (max-width:860px){ .whys{ grid-template-columns:1fr; } }

  /* the chart is the centrepiece, full width, dominant */
  .chart{ position:relative; margin-top:46px; border:1px solid var(--line); border-radius:20px; overflow:hidden;
    background:radial-gradient(130% 150% at 100% 0%, #141b2b 0%, #0e1220 60%, #0b0e16 100%);
    padding:30px 34px 22px; transition:border-color .4s ease; }
  .chart:hover{ border-color:#2b3a5e; }
  .chart svg{ width:100%; height:auto; display:block; }
  .chart .cap{ margin-top:14px; font-size:13px; color:var(--dim); letter-spacing:.04em; text-align:center; }
  .chart .cap b{ color:#cdd9f2; font-weight:600; }
  /* desktop shows the wide chart, mobile the portrait one */
  .chart .tall{ display:none; }
  .tall .area{ fill:url(#agrad2); }
  @media (max-width:720px){
    .moat .wrap{ padding-top:7vh; }
    .chart{ margin-top:34px; padding:22px 16px 16px; }
    .chart .wide{ display:none; }
    .chart .tall{ display:block; }
    .tall .endlbl{ font-size:18px; } .tall .molbl{ font-size:14px; } .tall .edgelbl{ font-size:17px; }
    .tall .compound,.tall .pulse{ stroke-width:5; } .tall .decay{ stroke-width:3; }
  }

  .line{ fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
  .decay{ stroke:#39435c; stroke-width:2.5; }
  .compound{ stroke:url(#cgrad); stroke-width:4; filter:drop-shadow(0 0 6px rgba(63,150,255,.6)); }
  /* the light-pulse that runs up the curve, forever */
  .pulse{ fill:none; stroke:#cfecff; stroke-width:4.5; stroke-linecap:round;
    stroke-dasharray:0.14 2; stroke-dashoffset:0.14; opacity:0;
    filter:drop-shadow(0 0 9px rgba(150,220,255,.95)); }
  .area{ fill:url(#agrad); opacity:0; }
  .gridln{ stroke:rgba(99,130,180,.09); stroke-width:1; }
  .tick{ stroke:rgba(99,130,180,.22); stroke-width:1; }
  .axlbl{ fill:var(--dim); font-size:13px; letter-spacing:.04em; }
  .molbl{ fill:#69748c; font-size:12px; }
  .endlbl{ font-size:15px; font-weight:600; }
  .endlbl.up{ fill:var(--cyan); }
  .endlbl.down{ fill:#5d6a86; }
  .edgelbl{ fill:#8fb4f5; font-size:14px; font-style:italic; opacity:0; }
  .dot{ fill:#cfecff; opacity:0; transform-box:fill-box; transform-origin:center;
    filter:drop-shadow(0 0 5px rgba(150,220,255,.95)); }

  /* draw once on reveal, then loop the life forever */
  .chart.in .decay{ animation:draw 1.3s ease forwards; }
  .chart.in .compound{ animation:draw 1.6s .2s ease forwards; }
  .chart.in .area{ animation:apear 1.1s .8s ease forwards, breathe 4.6s 2s ease-in-out infinite; }
  .chart.in .edgelbl{ animation:apear .8s 1.5s ease forwards, breathe 3.4s 1.5s ease-in-out infinite; }
  .chart.in .pulse{ animation:comet 3.4s 1.8s linear infinite; }
  .chart.in .dot{ animation:repflare 3.4s 1.8s ease-in-out infinite; }
  .chart.in .dot:nth-of-type(1){ animation-delay:2.0s; }
  .chart.in .dot:nth-of-type(2){ animation-delay:2.3s; }
  .chart.in .dot:nth-of-type(3){ animation-delay:2.6s; }
  .chart.in .dot:nth-of-type(4){ animation-delay:2.9s; }
  .chart.in .dot:nth-of-type(5){ animation-delay:3.2s; }
  /* engage it → it compounds faster */
  .chart:hover .pulse, .chart:hover .dot{ animation-duration:1.7s; }
  .chart:hover .compound{ filter:drop-shadow(0 0 11px rgba(95,180,255,.9)); }

  @keyframes draw{ to{ stroke-dashoffset:0 } }
  @keyframes apear{ to{ opacity:1 } }
  @keyframes breathe{ 0%,100%{ opacity:.6 } 50%{ opacity:1 } }
  @keyframes comet{ 0%{ stroke-dashoffset:0.14; opacity:0 } 6%{ opacity:1 } 94%{ opacity:1 }
    100%{ stroke-dashoffset:-1; opacity:0 } }
  @keyframes repflare{ 0%,70%,100%{ opacity:.45; transform:scale(1) }
    84%{ opacity:1; transform:scale(1.7) } }

  /* ── How it works ─────────────────────────────────────────────────── */
  .how{ position:relative; z-index:2; background:var(--bg); border-top:1px solid #171e2e; }
  .how .wrap{ max-width:1120px; margin:0 auto; padding:11vh 7vw 13vh; }
  .how .kicker{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
    display:flex; align-items:center; gap:12px; }
  .how .kicker::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--blue),transparent); }
  .how h2{ font-size:clamp(28px,5vw,50px); line-height:1.04; letter-spacing:-.025em; font-weight:600; margin:20px 0 0; max-width:18ch; }
  .how h2 .grad{ background:linear-gradient(92deg,#fff 30%,var(--cyan) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .how .lead{ margin-top:20px; max-width:54ch; font-size:clamp(15px,2.4vw,18px); line-height:1.6; color:#c9d0dd; }

  /* 3-step flow */
  .steps{ position:relative; margin-top:58px; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
  .track{ position:absolute; top:26px; left:16%; right:16%; height:2px; background:#1a2236; overflow:hidden; }
  .track::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:0;
    background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 12px rgba(63,176,255,.7); }
  /* the line travels step → step, pausing at each, instead of one smooth sweep */
  .steps.in .track::after{ animation:fillsteps 2.1s .3s cubic-bezier(.5,0,.2,1) forwards; }
  .step{ position:relative; text-align:center; }
  .num{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin:0 auto 16px;
    background:#121a2b; border:1px solid #25324f; color:var(--cyan);
    font-family:"Space Mono",ui-monospace,Menlo,Consolas,monospace; font-size:15px; font-weight:600;
    position:relative; z-index:1; opacity:0; transform:scale(.6); transform-origin:center; }
  /* each number lights as the line reaches it */
  .steps.in .step:nth-of-type(1) .num{ animation:numin .6s .3s ease forwards; }
  .steps.in .step:nth-of-type(2) .num{ animation:numin .6s 1.0s ease forwards; }
  .steps.in .step:nth-of-type(3) .num{ animation:numin .6s 1.7s ease forwards; }
  .steps.in .step:nth-of-type(4) .num{ animation:numin .6s 2.4s ease forwards; }
  .step h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; margin-bottom:9px; }
  .step p{ font-size:14px; line-height:1.55; color:#a5b0c4; max-width:28ch; margin:0 auto; }

  /* dashboard preview */
  .dash{ position:relative; margin-top:62px; border:1px solid var(--line); border-radius:18px; overflow:hidden;
    background:radial-gradient(120% 140% at 0 0,#141b2b,#0e1220 60%,#0b0e16); }
  .dash-bar{ display:flex; align-items:center; gap:8px; padding:13px 18px; border-bottom:1px solid #131b2c; }
  .d3{ width:10px; height:10px; border-radius:50%; background:#28324a; }
  .dash-title{ margin-left:8px; font-size:13px; color:var(--dim); letter-spacing:.04em;
    font-family:"Space Mono",ui-monospace,Menlo,Consolas,monospace; }
  .dash-live{ margin-left:auto; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#5fd08a;
    display:inline-flex; align-items:center; gap:7px; }
  .dash-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#5fd08a;
    box-shadow:0 0 8px #5fd08a; animation:livepulse 2s ease-in-out infinite; }
  .cols,.emprow{ display:grid; grid-template-columns:1.7fr 1.2fr 1fr 1fr; gap:18px; align-items:center; }
  .cols{ padding:13px 22px; border-bottom:1px solid #1a2233; }
  .cols span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#5c6a86; }
  .emprow{ padding:18px 22px; border-bottom:1px solid #1a2233; }
  .emprow:last-child{ border-bottom:0; }
  .who{ display:flex; align-items:center; gap:13px; }
  .emb{ width:42px; height:42px; border-radius:11px; background:#0c1626; border:1px solid #20304e;
    overflow:hidden; flex:none; }
  .emb img{ width:100%; height:100%; object-fit:cover; object-position:center 12%; display:block; }
  .who .nm{ font-size:15px; font-weight:600; }
  .who .rl{ font-size:12px; color:var(--dim); margin-top:2px; }
  .st{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#a5b0c4; margin-top:5px; }
  .st i{ width:6px; height:6px; border-radius:50%; background:#5fd08a; box-shadow:0 0 6px #5fd08a; font-style:normal; }
  .st.idle i{ background:#99a1b0; box-shadow:none; }
  .meter{ height:8px; border-radius:99px; background:#11192a; overflow:hidden; position:relative; }
  .meter b{ position:absolute; top:0; bottom:0; left:0; width:0; border-radius:99px;
    background:linear-gradient(90deg,var(--blue),var(--cyan)); }
  .dash.in .meter b{ animation:meterfill 1.3s .3s ease forwards; }
  .usepct{ font-size:12px; color:var(--dim); margin-top:7px; }
  .mem b{ color:#fff; font-weight:600; font-size:14px; } .mem span{ color:var(--dim); font-size:12px; display:block; margin-top:3px; }
  .tier{ display:inline-flex; border:1px solid #20304e; border-radius:9px; overflow:hidden; }
  .tier span{ font-size:11.5px; padding:6px 11px; color:#99a1b0; border-right:1px solid #16203a; }
  .tier span:last-child{ border-right:0; }
  .tier span.on{ background:linear-gradient(92deg,var(--blue),#3f86ff); color:#fff; font-weight:600; }
  .dash-foot{ padding:15px 22px; border-top:1px solid #131b2c; font-size:13px; color:var(--dim);
    text-align:center; letter-spacing:.02em; }
  .dash-foot b{ color:#cdd9f2; font-weight:600; }
  @keyframes fillsteps{ 0%{ width:0 } 38%{ width:50% } 54%{ width:50% } 100%{ width:100% } }
  @keyframes fillstepsv{ 0%{ height:0 } 38%{ height:50% } 54%{ height:50% } 100%{ height:100% } }
  @keyframes numin{ 0%{ opacity:0; transform:scale(.5); box-shadow:0 0 0 0 rgba(63,176,255,0) }
    55%{ opacity:1; transform:scale(1.14); box-shadow:0 0 20px 2px rgba(63,176,255,.7); border-color:var(--cyan) }
    100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(63,176,255,0) } }
  @keyframes livepulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
  @keyframes meterfill{ to{ width:var(--u,50%) } }

  @media (max-width:720px){
    .steps{ grid-template-columns:1fr; gap:30px; }
    .track{ left:25px; right:auto; top:26px; bottom:26px; width:2px; height:auto; }
    .track::after{ top:0; bottom:auto; width:2px; height:0;
      background:linear-gradient(180deg,var(--blue),var(--cyan)); }
    .steps.in .track::after{ animation:fillstepsv 2.1s .3s cubic-bezier(.5,0,.2,1) forwards; }
    .step{ display:grid; grid-template-columns:52px 1fr; gap:16px; text-align:left; align-items:start; }
    .num{ margin:0; } .step p{ margin:0; max-width:40ch; } .step h3{ margin-top:8px; }
    .cols{ display:none; }
    .emprow{ grid-template-columns:1fr; gap:13px; padding:18px; }
    .tier{ width:max-content; }
  }

  /* ── Pricing ──────────────────────────────────────────────────────── */
  .price{ position:relative; z-index:2; background:var(--bg); border-top:1px solid #171e2e; }
  .price .wrap{ max-width:1120px; margin:0 auto; padding:11vh 7vw 13vh; }
  .price .kicker{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
    display:flex; align-items:center; gap:12px; }
  .price .kicker::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--blue),transparent); }
  .price h2{ font-size:clamp(28px,5vw,50px); line-height:1.04; letter-spacing:-.025em; font-weight:600; margin:20px 0 0; max-width:16ch; }
  .price h2 .grad{ background:linear-gradient(92deg,#fff 25%,var(--cyan) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .price .lead{ margin-top:20px; max-width:56ch; font-size:clamp(15px,2.4vw,18px); line-height:1.6; color:#c9d0dd; }
  .price .anchor{ margin-top:14px; max-width:60ch; font-size:14.5px; line-height:1.6; color:#8f9bb3; }
  .price .anchor b{ color:#d6e0f5; font-weight:600; }

  .toggle{ margin-top:30px; display:inline-flex; align-items:center; gap:13px; font-size:14px; color:var(--dim); }
  .toggle .lbl.b{ color:var(--ink); font-weight:600; }
  .switch{ position:relative; width:52px; height:28px; border-radius:99px; background:#16203a;
    border:1px solid #25324f; cursor:pointer; flex:none; }
  .switch i{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background:linear-gradient(92deg,var(--blue),var(--cyan)); transition:left .25s ease; }
  .switch.on i{ left:27px; }
  .save{ color:var(--cyan); font-size:11.5px; border:1px solid #20304e; border-radius:99px; padding:3px 9px; }

  .tiers{ margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
  .tier-card{ position:relative; border:1px solid var(--line); border-radius:18px; padding:32px 28px;
    background:radial-gradient(120% 140% at 0 0,#141b2b,#0e1220 60%,#0b0e16); display:flex; flex-direction:column;
    transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
  .tier-card:hover{ transform:translateY(-4px); border-color:#2b3a5e; }
  .tier-card.feat{ border-color:#2f6bff; background:linear-gradient(180deg,#0c1830,#070f1e);
    box-shadow:0 30px 70px -34px rgba(47,107,255,.6); }
  .badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:#0b0d13; font-weight:700; white-space:nowrap;
    background:linear-gradient(92deg,#fff,#bcd6ff); border-radius:99px; padding:5px 13px; }
  .tname{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
  .tprice{ margin-top:14px; display:flex; align-items:baseline; gap:3px; font-weight:600; letter-spacing:-.02em; }
  .tprice .cur{ font-size:24px; } .tprice .amt{ font-size:44px; line-height:1; }
  .tprice .per{ font-size:13.5px; color:var(--dim); font-weight:400; letter-spacing:0; margin-left:4px; }
  .tbill{ margin-top:7px; font-size:12.5px; color:var(--dim); min-height:18px; }
  .tdesc{ margin-top:16px; font-size:14px; color:#c9d0dd; line-height:1.5; min-height:40px; }
  .feats{ margin-top:18px; display:flex; flex-direction:column; gap:11px; flex:1; }
  .feat-li{ display:flex; gap:10px; font-size:13.5px; color:#c8d1e2; line-height:1.45; }
  .feat-li svg{ width:16px; height:16px; flex:none; margin-top:2px; stroke:var(--cyan); }
  .tcta{ margin-top:24px; text-align:center; font:inherit; font-size:14.5px; font-weight:600; border-radius:12px;
    padding:13px; cursor:pointer; text-decoration:none; display:block;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
  .tcta.ghost{ color:#cdd6ea; background:transparent; border:1px solid #2a3550; }
  .tcta.ghost:hover{ border-color:#3a4a6e; background:#171e2e; }
  .tcta.solid{ color:#0b0d13; background:linear-gradient(92deg,#fff,#bcd6ff); border:0; }
  .tcta.solid:hover{ transform:translateY(-1px); box-shadow:0 12px 30px -12px rgba(63,176,255,.6); }

  .consult{ margin-top:16px; border:1px solid #21304e; border-radius:18px; padding:28px 30px;
    background:linear-gradient(100deg,#081424,#0a1830 55%,#06101f);
    display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
  .consult h3{ font-size:20px; font-weight:600; letter-spacing:-.01em; }
  .consult p{ margin-top:7px; font-size:14px; color:#9fb4e8; line-height:1.55; max-width:62ch; }
  .price-foot{ margin:28px auto 0; max-width:78ch; font-size:12.5px; color:#6f7b92; line-height:1.65; text-align:center; }

  @media (max-width:1040px){ .tiers{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:860px){
    .tiers{ grid-template-columns:1fr; gap:18px; }
    .tier-card.feat{ order:-1; }
    .consult{ flex-direction:column; align-items:flex-start; }
  }

  /* ── Services + FAQ (reuse .how section shell) ────────────────────── */
  .svc-grid{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  @media (max-width:860px){ .svc-grid{ grid-template-columns:1fr; } }
  .svc-card{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px; padding:30px 28px;
    background:radial-gradient(120% 140% at 0 0,#141b2b,#0e1220 60%,#0b0e16); text-decoration:none; color:var(--ink);
    display:flex; flex-direction:column; transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease; }
  .svc-card:hover{ transform:translateY(-4px); border-color:#2b3a5e; }
  .svc-card .svc-k{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); }
  .svc-card h3{ margin-top:14px; font-size:22px; font-weight:600; letter-spacing:-.01em; }
  .svc-card p{ margin-top:12px; font-size:14.5px; line-height:1.55; color:#a5b0c4; flex:1; }
  .svc-card .go{ margin-top:20px; font-size:14px; color:#9fb4e8; display:inline-flex; align-items:center; gap:7px; }
  .svc-card .go svg{ width:14px; height:14px; stroke:currentColor; }

  .faq-list{ margin-top:46px; display:flex; flex-direction:column; gap:12px; max-width:820px; }
  .faq-item{ border:1px solid var(--line); border-radius:14px; background:radial-gradient(120% 140% at 0 0,#141b2b,#0e1220 60%,#0b0e16);
    overflow:hidden; }
  .faq-item summary{ list-style:none; cursor:pointer; padding:20px 24px; font-size:16.5px; font-weight:600; letter-spacing:-.01em;
    display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:"+"; color:var(--cyan); font-size:22px; font-weight:400; line-height:1; flex:none; transition:transform .25s ease; }
  .faq-item[open] summary::after{ transform:rotate(45deg); }
  .faq-item .ans{ padding:0 24px 22px; font-size:14.5px; line-height:1.62; color:#a5b0c4; max-width:70ch; }

  /* ── Closing CTA ──────────────────────────────────────────────────── */
  .cta-final{ position:relative; z-index:2; background:var(--bg); border-top:1px solid #171e2e;
    text-align:center; padding:15vh 7vw 14vh; overflow:hidden; }
  .cta-final::before{ content:""; position:absolute; left:50%; top:34%; transform:translate(-50%,-50%);
    width:680px; height:680px; max-width:120vw; pointer-events:none;
    background:radial-gradient(circle, rgba(47,107,255,.22), rgba(63,176,255,.05) 42%, transparent 68%); }
  .cta-final > *{ position:relative; }
  .cta-final h2{ font-size:clamp(30px,6vw,60px); font-weight:600; letter-spacing:-.03em; line-height:1.03;
    max-width:16ch; margin:0 auto; }
  .cta-final h2 .grad{ background:linear-gradient(92deg,#fff 30%,var(--cyan) 95%);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .cta-final p{ margin:18px auto 0; max-width:48ch; color:#c9d0dd; font-size:clamp(15px,2.4vw,18px); line-height:1.55; }
  .cta-btns{ margin-top:32px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .btn-solid,.btn-ghost{ font:inherit; font-size:15px; font-weight:600; border-radius:12px; padding:14px 26px;
    text-decoration:none; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
  .btn-solid{ color:#0b0d13; background:linear-gradient(92deg,#fff,#bcd6ff); border:0; }
  .btn-solid:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(63,176,255,.7); }
  .btn-ghost{ color:#cdd6ea; background:transparent; border:1px solid #2a3550; }
  .btn-ghost:hover{ border-color:#3a4a6e; background:#171e2e; }
  .cta-note{ margin-top:18px; font-size:13px; color:var(--dim); letter-spacing:.02em; }

  /* ── Footer ───────────────────────────────────────────────────────── */
  .foot{ position:relative; z-index:2; background:#0b0e16; border-top:1px solid #0e1626; padding:62px 7vw 40px; }
  .foot-top{ max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; }
  .foot-brand{ max-width:320px; }
  .foot-brand .b{ display:flex; align-items:center; gap:5px; font-weight:600; font-size:18px; color:var(--ink); }
  .foot-brand .b i{ color:var(--cyan); font-style:normal; }
  .foot-brand .b svg{ width:60px; height:60px; display:block; }
  .foot-brand p{ margin-top:13px; font-size:13.5px; color:#7e8aa2; line-height:1.6; }
  .foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
  .foot-col h4{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#7a86a1; margin-bottom:15px; }
  .foot-col a{ display:block; color:#aeb8cc; text-decoration:none; font-size:14px; margin-bottom:11px; transition:color .2s ease; }
  .foot-col a:hover{ color:#fff; }
  .foot-bot{ max-width:1120px; margin:46px auto 0; padding-top:22px; border-top:1px solid #0e1626;
    display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center; font-size:13px; color:#6f7b92; }
  .foot-credit{ display:inline-flex; align-items:center; gap:11px; }
  .foot-credit svg{ width:44px; height:44px; display:block; flex:none; }
  .foot-credit b{ color:#cdd9f2; font-weight:600; }
  @media (max-width:760px){ .foot-top{ flex-direction:column; gap:34px; } .foot-bot{ flex-direction:column; align-items:flex-start; } }

  /* ── Lead-capture modal ───────────────────────────────────────────── */
  .lead-overlay{ position:fixed; inset:0; z-index:20; display:none; align-items:center; justify-content:center; padding:20px;
    background:rgba(2,4,9,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .lead-overlay.open{ display:flex; }
  .lead-modal{ width:min(520px,100%); max-height:92vh; overflow:auto; border-radius:20px; padding:32px;
    background:rgba(13,19,34,.9); -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5);
    border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
    position:relative; animation:modalin .35s ease; }
  @keyframes modalin{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
  .lead-close{ position:absolute; top:15px; right:15px; width:34px; height:34px; border-radius:50%; border:1px solid #25324f;
    background:transparent; color:#aeb8cc; cursor:pointer; font-size:20px; line-height:1; }
  .lead-close:hover{ background:#171e2e; color:#fff; }
  .lead-modal h3{ font-size:24px; font-weight:600; letter-spacing:-.02em; }
  .lead-modal .sub{ margin-top:8px; font-size:14.5px; color:#a5b0c4; line-height:1.5; }
  .lead-form{ margin-top:22px; display:flex; flex-direction:column; gap:13px; }
  .lead-form.hide{ display:none; }
  .field label{ display:block; font-size:11px; letter-spacing:.08em; color:#99a1b0; margin-bottom:6px; text-transform:uppercase; }
  .field input,.field select,.field textarea{ width:100%; background:#121a2b; border:1px solid #20304e; border-radius:11px;
    padding:12px 14px; color:var(--ink); font:inherit; font-size:14px; transition:border-color .2s ease; }
  .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:#2f6bff; }
  .field textarea{ resize:vertical; min-height:82px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
  .lead-submit{ margin-top:6px; font:inherit; font-size:15px; font-weight:600; color:#0b0d13; border:0; border-radius:12px;
    padding:14px; cursor:pointer; background:linear-gradient(92deg,#fff,#bcd6ff);
    transition:transform .2s ease, box-shadow .2s ease; }
  .lead-submit:hover{ transform:translateY(-1px); box-shadow:0 12px 30px -12px rgba(63,176,255,.6); }
  .lead-note{ margin-top:4px; font-size:12px; color:#7c88a0; text-align:center; }
  .lead-done{ display:none; text-align:center; padding:8px 0; }
  .lead-done.show{ display:block; }

  @media (prefers-reduced-motion: reduce){
    .figure .body,.emblem,.card:hover .scan::after,.card:hover .figure .ghost,.hint .chev{ animation:none !important; }
    .card:hover .sig b{ animation:none; width:calc(var(--ch)*1ch + .9ch); }
    .line{ stroke-dashoffset:0; } .area,.dot,.edgelbl{ opacity:1; } .pulse{ display:none; }
    .track::after{ width:100%; height:100%; } .num{ opacity:1; transform:none; } .meter b{ width:var(--u); }
    .dash-live::before{ animation:none; }
  }

  /* ══════════════════════════════════════════════════════════════════
     SUBPAGE LAYER, shared by all secondary pages. Reuses the tokens,
     nav, footer, cards, tiers, buttons above so design stays identical.
     ══════════════════════════════════════════════════════════════════ */

  /* generic section openers (homepage scopes these under .roster/.how/etc,
     whose higher specificity keeps the homepage unchanged) */
  .kicker{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
    display:flex; align-items:center; gap:12px; }
  .kicker::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--blue),transparent); }
  .grad{ background:linear-gradient(92deg,#fff 30%,var(--cyan) 92%);
    -webkit-background-clip:text; background-clip:text; color:transparent; }

  /* page hero (no WebGL, static glow, clears the fixed nav) */
  .phero{ position:relative; overflow:hidden; z-index:2; background:var(--bg);
    padding:21vh 7vw 9vh; border-bottom:1px solid #171e2e; }
  .phero::before{ content:""; position:absolute; left:8%; top:14%; width:620px; height:620px; max-width:120vw;
    pointer-events:none; background:radial-gradient(circle, rgba(47,107,255,.20), rgba(63,176,255,.05) 42%, transparent 68%); }
  .phero .wrap{ position:relative; max-width:1120px; margin:0 auto; }
  .phero h1{ font-size:clamp(32px,6.5vw,64px); line-height:1.03; letter-spacing:-.03em; font-weight:600;
    margin:18px 0 0; max-width:17ch; opacity:1; animation:none; }
  .phero .lead{ margin-top:20px; max-width:56ch; font-size:clamp(16px,2.6vw,20px); line-height:1.5; color:#c9d0dd; }
  .phero .pcta{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }

  /* generic content section */
  .sec{ position:relative; z-index:2; background:var(--bg); border-top:1px solid #171e2e; }
  .sec .wrap{ max-width:1120px; margin:0 auto; padding:9vh 7vw 10vh; }
  .sec h2{ font-size:clamp(26px,4.6vw,46px); line-height:1.05; letter-spacing:-.025em; font-weight:600;
    margin:20px 0 0; max-width:22ch; }
  .sec > .wrap > .lead{ margin-top:20px; max-width:62ch; font-size:clamp(15px,2.4vw,18px); line-height:1.6; color:#c9d0dd; }

  /* prose blocks for content pages */
  .prose{ max-width:760px; }
  .prose h3{ font-size:21px; font-weight:600; letter-spacing:-.01em; margin:34px 0 0; }
  .prose p{ margin-top:14px; font-size:15.5px; line-height:1.65; color:#c9d0dd; }
  .prose ul{ margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
  .prose li{ display:flex; gap:11px; font-size:15px; line-height:1.55; color:#c8d1e2; }
  .prose li svg{ width:17px; height:17px; flex:none; margin-top:3px; stroke:var(--cyan); }

  /* step list reused on how-it-works / build pages (vertical, always visible) */
  .flow{ margin-top:36px; display:flex; flex-direction:column; gap:14px; max-width:820px; }
  .flow-step{ display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start;
    border:1px solid var(--line); border-radius:16px; padding:22px 24px;
    background:radial-gradient(120% 140% at 0 0,#141b2b,#0e1220 60%,#0b0e16); }
  .flow-step .num{ opacity:1; transform:none; }
  .flow-step h3{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
  .flow-step p{ margin-top:7px; font-size:14.5px; line-height:1.55; color:#a5b0c4; }

  /* employee profile hero */
  .prof{ display:grid; grid-template-columns:1.25fr .9fr; gap:30px; align-items:stretch; }
  .prof-fig{ position:relative; min-height:360px; border:1px solid var(--line); border-radius:20px; overflow:hidden;
    background:radial-gradient(120% 140% at 100% 0%,#141b2b,#0e1220 60%,#0b0e16); }
  .prof-fig img{ position:absolute; right:-4%; bottom:0; height:106%; object-fit:contain; object-position:bottom right;
    filter:drop-shadow(0 0 5px rgba(120,170,255,.85)) drop-shadow(0 0 18px rgba(60,120,240,.45)) brightness(1.22) contrast(1.05); }
  @media(max-width:860px){ .prof{ grid-template-columns:1fr; } .prof-fig{ min-height:300px; } }

  /* connected-tools rows with honest status badges */
  .tools{ margin-top:20px; display:flex; flex-direction:column; gap:10px; max-width:640px; }
  .tool{ display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line);
    border-radius:12px; padding:14px 18px; background:radial-gradient(120% 140% at 0 0,#141b2b,#0e1220 60%,#0b0e16); }
  .tool .tn{ font-size:15px; font-weight:600; }
  .badge-st{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
    border:1px solid #22304e; color:#9fb4e8; white-space:nowrap; }
  .badge-st.ok{ color:#5fd08a; border-color:#1f4a35; }
  .badge-st.soon{ color:#d8b25f; border-color:#4a3d1f; }

  /* on-page contact form (reuses .field / .row2 / .lead-submit from the modal) */
  .formcard{ margin-top:14px; max-width:660px; border:1px solid var(--line); border-radius:20px; padding:30px;
    background:radial-gradient(120% 140% at 0 0,#141b2b,#0e1220 60%,#0b0e16); }
  .form-grid{ display:flex; flex-direction:column; gap:14px; }
  .form-done{ display:none; }
  .form-done.show{ display:block; }

  /* ══════════════════════════════════════════════════════════════════
     2026-07 REDESIGN LAYER — stats strip, service pillars, workflow
     canvas, education register. Same tokens, armory-inspired rhythm.
     ══════════════════════════════════════════════════════════════════ */

  /* ── Stats strip: big honest numbers, armory register ─────────────── */
  .stats{ position:relative; z-index:2; background:var(--bg); border-top:1px solid #171e2e; }
  .stats .wrap{ max-width:1120px; margin:0 auto; padding:8vh 7vw;
    display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
  .stat b{ display:block; font-size:clamp(38px,6vw,64px); font-weight:600; letter-spacing:-.03em;
    line-height:1; background:linear-gradient(92deg,#fff 40%,var(--cyan));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-variant-numeric:tabular-nums; }
  .stat span{ display:block; margin-top:12px; font-size:13.5px; line-height:1.5; color:#99a1b0;
    max-width:26ch; }
  @media (max-width:720px){ .stats .wrap{ grid-template-columns:1fr; gap:30px; padding:7vh 7vw; } }

  /* ── Service pillars: the taxonomy spine ──────────────────────────── */
  .pillars{ margin-top:56px; display:flex; flex-direction:column; }
  .pillar{ border-top:1px solid var(--line); padding:30px 0 26px;
    transition:background .3s ease; }
  .pillar:last-child{ border-bottom:1px solid var(--line); }
  .p-head{ display:grid; grid-template-columns:64px 1fr auto; gap:20px; align-items:start; }
  .p-num{ font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;
    color:var(--cyan); padding-top:6px; letter-spacing:.08em; }
  .p-head h3{ font-size:clamp(19px,3vw,24px); font-weight:600; letter-spacing:-.015em; }
  .p-head p{ margin-top:6px; font-size:14px; line-height:1.5; color:#99a1b0; max-width:52ch; }
  .p-hub{ font-size:13.5px; color:#9fb4e8; text-decoration:none; white-space:nowrap; padding-top:6px;
    transition:color .2s ease; }
  .p-hub:hover{ color:#fff; }
  .p-links{ margin:18px 0 0 84px; display:flex; flex-wrap:wrap; gap:9px; }
  .p-links a{ font-size:13px; color:#c8d1e2; text-decoration:none; white-space:nowrap;
    border:1px solid #22304e; border-radius:999px; padding:7px 15px;
    transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease; }
  .p-links a:hover{ border-color:var(--cyan); color:#fff; background:rgba(47,107,255,.10);
    transform:translateY(-1px); }
  .pillar-cta{ margin-top:34px; }
  @media (max-width:720px){
    .p-head{ grid-template-columns:44px 1fr; }
    .p-hub{ grid-column:2; justify-self:start; padding-top:10px; }
    .p-links{ margin-left:0; }
  }

  /* ── Workflow canvas: the node graph ──────────────────────────────── */
  .canvas-sec .wrap{ padding-bottom:12vh; }
  .canvas{ position:relative; margin-top:46px; border:1px solid var(--line); border-radius:20px;
    overflow:hidden; padding:26px 26px 18px;
    background:radial-gradient(130% 150% at 50% 0%, #141b2b 0%, #0e1220 55%, #0b0e16 100%);
    transition:border-color .4s ease; }
  .canvas:hover{ border-color:#2b3a5e; }
  .canvas svg{ width:100%; height:auto; display:block; }
  .canvas .cap{ margin-top:12px; font-size:13px; color:var(--dim); letter-spacing:.04em; text-align:center; }
  .canvas .cap b{ color:#cdd9f2; font-weight:600; }
  .wire{ fill:none; stroke:#22304e; stroke-width:1.5; stroke-dasharray:5 6; }
  .canvas.in .wire{ animation:wireflow 1.4s linear infinite; }
  .wire.loop{ stroke:#1a2740; }
  .cpulse{ fill:#cfecff; filter:drop-shadow(0 0 6px rgba(150,220,255,.95)); opacity:0; }
  .canvas.in .cpulse{ opacity:1; }
  .cpulse.dim{ fill:#7ea8e8; filter:drop-shadow(0 0 4px rgba(120,170,255,.6)); }
  .cnode rect{ fill:#121a2b; stroke:#25324f; stroke-width:1.2; transition:stroke .3s ease; }
  .cnode.core rect{ stroke:var(--blue); fill:#0c1830;
    filter:drop-shadow(0 0 14px rgba(47,107,255,.35)); }
  .cnode.ok rect{ stroke:#1f4a35; }
  .cnode.ok .ct{ fill:#5fd08a; }
  .canvas:hover .cnode rect{ stroke:#2b3a5e; }
  .canvas:hover .cnode.core rect{ stroke:var(--cyan); }
  .ct{ fill:#eef1f7; font-size:15px; font-weight:600; letter-spacing:-.01em; }
  .cs{ fill:#69748c; font-size:11px; }
  .clbl{ fill:#5c6a86; font-size:12px; font-family:"Space Mono",ui-monospace,Menlo,Consolas,monospace; letter-spacing:.06em; }
  @keyframes wireflow{ to{ stroke-dashoffset:-11; } }
  @media (max-width:720px){
    /* keep the graph legible: fixed drawing width, swipe to pan */
    .canvas{ padding:14px 0 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .canvas svg{ min-width:860px; }
    .canvas .cap{ padding:0 16px; }
  }

  /* ── Education: a warmer register, same family ────────────────────── */
  .edu{ background:linear-gradient(180deg, var(--bg) 0%, #060b17 40%, var(--bg) 100%); }
  .edu .svc-card .svc-k{ color:#8fd0ff; }

  @media (prefers-reduced-motion: reduce){
    .canvas.in .wire{ animation:none; }
    .cpulse{ display:none; }
  }

  /* ══════════════════════════════════════════════════════════════════
     CHARACTER LAYER — blueprint grid, display type, char animation,
     mono chevron labels, giant wordmark. The de-slop pass.
     ══════════════════════════════════════════════════════════════════ */

  /* ── Display typography ───────────────────────────────────────────── */
  h1, h2, .stat b, .foot-word, .phero h1, .cta-final h2,
  .tprice, .name, .step h3, .flow-step h3, .p-head h3, .consult h3 {
    font-family:"Clash Display", ui-sans-serif, system-ui, sans-serif;
    /* Clash draws a narrow word space; at display sizes with negative tracking
       the words weld together ("AIEmployees"). Max sets .06em in the campaign
       type base for the same reason, so match it and both read as one brand. */
    word-spacing:.07em; }
  /* every other surface set in Clash gets the same word space */
  .hero-links a, .cine-txt h2, .show-p h3, .svc-card h3, .prose h3,
  .why b, .tool .tn, .ph-ghost{ word-spacing:.07em; }
  h1{ letter-spacing:-.035em; }
  h2{ letter-spacing:-.03em; }
  /* Machine voice: every label, eyebrow, tag and data readout is Space Mono
     uppercase. Human voice (anything read as a sentence) stays Satoshi.
     Tracking on these caps at .14em — the design gate forbids wide-tracking
     a full sentence, so long footer lines are excluded on purpose. */
  .kicker, .roster .kicker, .moat .kicker, .how .kicker, .price .kicker,
  .p-num, .molbl, .axlbl, .clbl, .sig b, .dash-title,
  .role, .tag, .tname, .svc-card .svc-k, .foot-col h4, .dash-live,
  .cols span, .badge, .badge-st, .field label, .chart .cap, .canvas .cap, .etag {
    font-family:"Space Mono", ui-monospace, Menlo, Consolas, monospace; }

  /* ── Blueprint grid on every opaque section ───────────────────────── */
  .roster, .moat, .how, .price, .stats, .sec, .phero, .cta-final {
    background-image:
      linear-gradient(rgba(94,146,255,.048) 1px, transparent 1px),
      linear-gradient(90deg, rgba(94,146,255,.048) 1px, transparent 1px),
      linear-gradient(rgba(94,146,255,.021) 1px, transparent 1px),
      linear-gradient(90deg, rgba(94,146,255,.021) 1px, transparent 1px);
    background-size: 224px 224px, 224px 224px, 56px 56px, 56px 56px; }
  .edu{ background-image:
      linear-gradient(rgba(94,146,255,.048) 1px, transparent 1px),
      linear-gradient(90deg, rgba(94,146,255,.048) 1px, transparent 1px),
      linear-gradient(rgba(94,146,255,.021) 1px, transparent 1px),
      linear-gradient(90deg, rgba(94,146,255,.021) 1px, transparent 1px),
      linear-gradient(180deg, rgba(6,11,23,0) 0%, rgba(9,16,32,.85) 40%, rgba(6,11,23,0) 100%);
    background-size: 224px 224px, 224px 224px, 56px 56px, 56px 56px, 100% 100%; }

  /* ── Mono chevron eyebrows (armory register) ──────────────────────── */
  .kicker::before, .roster .kicker::before, .moat .kicker::before,
  .how .kicker::before, .price .kicker::before {
    content:">>>"; width:auto; height:auto; background:none;
    color:var(--cyan); font-weight:500; letter-spacing:.12em;
    animation:chevpulse 2.6s ease-in-out infinite; }
  @keyframes chevpulse{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

  /* ── Character-stagger headline reveal ────────────────────────────── */
  .chs .ch{ display:inline-block; opacity:0; transform:translateY(.55em) rotate(1.5deg);
    filter:blur(7px); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease;
    transition-delay:calc(var(--i)*16ms); }
  .in.chs .ch, .in .chs .ch{ opacity:1; transform:none; filter:none; }
  h2.reveal.chs{ transform:none; }  /* char motion replaces the block slide */

  /* ── Scroll-driven text fill on leads ─────────────────────────────── */
  .fillty{ color:transparent !important;
    background:linear-gradient(100deg,
      #dfe6f3 var(--fp,0%), rgba(150,168,200,.22) calc(var(--fp,0%) + 9%));
    -webkit-background-clip:text; background-clip:text; }
  .fillty b{ color:transparent; }

  /* ── Service marquee ──────────────────────────────────────────────── */
  .marq{ position:relative; z-index:2; background:var(--bg); overflow:hidden;
    border-top:1px solid #171e2e; padding:20px 0; white-space:nowrap;
    -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .marq-in{ display:inline-block; animation:marq 46s linear infinite; }
  .marq:hover .marq-in{ animation-play-state:paused; }
  .marq a{ font-family:"Space Mono", ui-monospace, monospace; font-size:13px;
    letter-spacing:.12em; text-transform:uppercase; color:#7a86a1; text-decoration:none;
    transition:color .25s ease; }
  .marq a:hover{ color:var(--cyan); }
  .marq i{ color:#22304e; font-style:normal; margin:0 22px; }
  @keyframes marq{ to{ transform:translateX(-50%) } }

  /* ── Stats: counting numbers ──────────────────────────────────────── */
  .stat b{ font-variant-numeric:tabular-nums; }

  /* ── Giant footer wordmark ────────────────────────────────────────── */
  .foot{ overflow:hidden; }
  .foot-word{ margin:70px -2vw -4vw; text-align:center; user-select:none; pointer-events:none;
    font-size:clamp(90px, 19.5vw, 310px); font-weight:600; line-height:.78; letter-spacing:-.045em;
    background:linear-gradient(180deg, #2b3f66 0%, #12203c 55%, #070d1c 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    opacity:0; transform:translateY(40px); transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
  .foot-word.in{ opacity:1; transform:none; }

  /* ── Pillar links: staggered entrance ─────────────────────────────── */
  .pillars.reveal .p-links a{ opacity:0; transform:translateY(10px);
    transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1),
      border-color .25s ease, color .25s ease, background .25s ease; }
  .pillars.reveal.in .p-links a{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .chs .ch{ opacity:1; transform:none; filter:none; transition:none; }
    .fillty{ --fp:110%; }
    .marq-in{ animation:none; }
    .kicker::before{ animation:none; }
    .foot-word{ opacity:1; transform:none; transition:none; }
  }

  /* counter span must not inherit the caption-span rules */
  .stat b span{ display:inline; font:inherit; letter-spacing:inherit; margin:0; max-width:none; color:inherit; }
  /* word wrapper: lines break between words, never inside */
  .chw{ display:inline-block; white-space:nowrap; }

  /* ══════════════════════════════════════════════════════════════════
     LIVING GRID + THEMES + SERVICES SHOWCASE (2026-07-18 round 3)
     ══════════════════════════════════════════════════════════════════ */

  /* ── Grid tokens + slow drift. Overrides the earlier static grid. ── */
  :root{ --gmaj:rgba(94,146,255,.048); --gmin:rgba(94,146,255,.021); }
  .roster, .moat, .how, .price, .stats, .sec, .phero, .cta-final, .edu{
    background-image:
      linear-gradient(var(--gmaj) 1px, transparent 1px),
      linear-gradient(90deg, var(--gmaj) 1px, transparent 1px),
      linear-gradient(var(--gmin) 1px, transparent 1px),
      linear-gradient(90deg, var(--gmin) 1px, transparent 1px);
    background-size:224px 224px, 224px 224px, 56px 56px, 56px 56px;
    animation:griddrift 90s linear infinite; }
  @keyframes griddrift{ from{ background-position:0 0 } to{ background-position:224px 224px } }

  /* ── Theme mode button ─────────────────────────────────────────────── */
  .mode{ width:38px; height:38px; border-radius:50%; flex:none; cursor:pointer;
    display:grid; place-items:center; background:transparent;
    border:1px solid rgba(255,255,255,.14); color:#cdd6ea;
    transition:border-color .25s ease, color .25s ease, transform .25s ease; }
  .mode:hover{ border-color:var(--cyan); color:#fff; transform:rotate(15deg); }
  .mode svg{ width:17px; height:17px; display:none; }
  html[data-thememode="dark"]   .mode .i-moon{ display:block; }
  html[data-thememode="light"]  .mode .i-sun{ display:block; }
  html[data-thememode="system"] .mode .i-sys{ display:block; }

  /* ── Services showcase: list + sticky stage ────────────────────────── */
  .show{ margin-top:56px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }
  .show-list{ display:flex; flex-direction:column; }
  .show-p{ position:relative; border-top:1px solid var(--line); padding:38px 0 34px; }
  .show-p:last-child{ border-bottom:1px solid var(--line); }
  .show-p .gnum{ position:absolute; right:0; top:10px; z-index:0; pointer-events:none;
    font-family:"Clash Display",sans-serif; font-weight:600; font-size:110px; line-height:1;
    letter-spacing:-.05em; color:transparent;
    -webkit-text-stroke:1px rgba(88,130,210,.16);
    transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); opacity:.55; }
  .show-p.act .gnum{ opacity:1; transform:translateY(-6px);
    -webkit-text-stroke:1px rgba(88,150,255,.38); }
  .show-p h3{ position:relative; z-index:1; font-size:clamp(21px,3vw,27px); font-weight:600; letter-spacing:-.02em;
    font-family:"Clash Display",sans-serif; transition:color .3s ease; }
  .show-p .ptag{ position:relative; z-index:1; margin-top:7px; font-size:14px; line-height:1.5; color:var(--dim); max-width:46ch; }
  .show-p .p-links{ margin:18px 0 0; position:relative; z-index:1; }
  .show-p .p-hub{ display:inline-block; margin-top:16px; font-size:13.5px; color:#9fb4e8; text-decoration:none; }
  .show-p .p-hub:hover{ color:var(--cyan); }
  .show-p.act h3{ color:var(--cyan); }

  .show-stage{ position:sticky; top:110px; height:520px; border:1px solid var(--line); border-radius:22px;
    overflow:hidden; background:
      radial-gradient(120% 140% at 70% 10%, #141b2b 0%, #0e1220 55%, #0b0e16 100%); }
  .show-stage::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(63,130,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(63,130,255,.05) 1px, transparent 1px);
    background-size:32px 32px; animation:griddrift 60s linear infinite; }
  .scene{ position:absolute; inset:0; display:grid; place-items:center; opacity:0;
    transform:scale(.94) translateY(14px);
    transition:opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .scene.on{ opacity:1; transform:none; }
  .scene svg{ width:86%; height:auto; max-height:88%; }
  @media (max-width:980px){ .show{ grid-template-columns:1fr; } .show-stage{ display:none; } }

  /* scene drawing primitives */
  .sc-box{ fill:#121a2b; stroke:#25324f; stroke-width:1.2; }
  .sc-line{ stroke:#22304e; stroke-width:1.5; fill:none; stroke-dasharray:5 6; }
  .scene.on .sc-line{ animation:wireflow 1.4s linear infinite; }
  .sc-txt{ fill:#eef1f7; font-family:"Clash Display",sans-serif; font-size:14px; font-weight:600; }
  .sc-sub{ fill:#69748c; font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.08em; }
  .sc-acc{ fill:var(--cyan); }
  .sc-glow{ filter:drop-shadow(0 0 10px rgba(63,150,255,.55)); }
  /* orbiting satellites (agents) */
  .orb{ transform-origin:300px 210px; }
  .scene.on .orb{ animation:orbit 14s linear infinite; }
  .scene.on .orb.o2{ animation-duration:22s; animation-direction:reverse; }
  .scene.on .orb.o3{ animation-duration:30s; }
  @keyframes orbit{ to{ transform:rotate(360deg) } }
  .core-ring{ fill:none; stroke:rgba(63,150,255,.35); }
  .scene.on .core-ring{ animation:ringpulse 3s ease-in-out infinite; transform-origin:300px 210px; }
  @keyframes ringpulse{ 0%,100%{ transform:scale(1); opacity:.7 } 50%{ transform:scale(1.12); opacity:.25 } }
  /* growth bars */
  .bar{ fill:url(#cgrad2); transform-origin:bottom; transform:scaleY(0); }
  .scene.on .bar{ animation:barup .9s cubic-bezier(.2,.7,.2,1) forwards; }
  .scene.on .bar:nth-of-type(2){ animation-delay:.12s } .scene.on .bar:nth-of-type(3){ animation-delay:.24s }
  .scene.on .bar:nth-of-type(4){ animation-delay:.36s } .scene.on .bar:nth-of-type(5){ animation-delay:.48s }
  .scene.on .bar:nth-of-type(6){ animation-delay:.6s }
  @keyframes barup{ to{ transform:scaleY(1) } }
  .grow-line{ fill:none; stroke:#cfecff; stroke-width:3; stroke-linecap:round;
    stroke-dasharray:1; stroke-dashoffset:1; pathLength:1;
    filter:drop-shadow(0 0 6px rgba(150,220,255,.8)); }
  .scene.on .grow-line{ animation:draw 1.4s .5s ease forwards; }
  /* build: blocks assembling */
  .blk{ fill:#0e1a30; stroke:#2b3a5e; stroke-width:1.2; opacity:0; transform:translateY(18px); }
  .scene.on .blk{ animation:blkin .6s cubic-bezier(.2,.7,.2,1) forwards; }
  .scene.on .blk:nth-of-type(2){ animation-delay:.15s } .scene.on .blk:nth-of-type(3){ animation-delay:.3s }
  .scene.on .blk:nth-of-type(4){ animation-delay:.45s } .scene.on .blk:nth-of-type(5){ animation-delay:.6s }
  @keyframes blkin{ to{ opacity:1; transform:none } }
  .caret{ fill:var(--cyan); }
  .scene.on .caret{ animation:blink 1s step-end infinite; }
  @keyframes blink{ 50%{ opacity:0 } }
  /* ecom: cart count + gauge */
  .gauge-arc{ fill:none; stroke:url(#cgrad2); stroke-width:9; stroke-linecap:round;
    stroke-dasharray:1; stroke-dashoffset:1; pathLength:1; }
  .scene.on .gauge-arc{ animation:gaugefill 1.4s .3s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes gaugefill{ to{ stroke-dashoffset:.28 } }
  .tile{ fill:#0e1a30; stroke:#25324f; }
  .scene.on .pip{ animation:pipblink 2.4s ease-in-out infinite; }
  .scene.on .pip:nth-of-type(2){ animation-delay:.4s } .scene.on .pip:nth-of-type(3){ animation-delay:.8s }
  @keyframes pipblink{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }
  /* data: sparkline + needle */
  .spark{ fill:none; stroke:#cfecff; stroke-width:2.5; stroke-linecap:round;
    stroke-dasharray:1; stroke-dashoffset:1; pathLength:1; }
  .scene.on .spark{ animation:draw 1.6s .3s ease forwards; }
  .needle{ transform-origin:300px 250px; transform:rotate(-70deg); }
  .scene.on .needle{ animation:needleswing 2.2s .4s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes needleswing{ 60%{ transform:rotate(52deg) } 80%{ transform:rotate(40deg) } 100%{ transform:rotate(46deg) } }
  /* education: typing prompt */
  .tw{ fill:#9fd8ff; font-family:"Space Mono",monospace; font-size:15px; }

  /* ══ LIGHT THEME ════════════════════════════════════════════════════ */
  html[data-theme="light"]{
    --bg:#ecedeb; --ink:#101216; --dim:#63666b; --line:#d0d1cc;
    --cyan:#1e63c4; --gmaj:rgba(16,18,22,.075); --gmin:rgba(16,18,22,.035);
  }
  html[data-theme="light"] body{ background:var(--bg); color:var(--ink); }
  /* hero stays the dark brand moment */
  html[data-theme="light"] .hero h1{ color:#eef1f7; }
  html[data-theme="light"] .hero .sub{ color:#c9d0dd; }
  html[data-theme="light"] .hero .kicker{ color:#99a1b0; }
  /* nav glass goes light */
  html[data-theme="light"] .nav{ background:rgba(255,255,255,.6);
    border-color:rgba(12,20,36,.10);
    box-shadow:0 12px 36px -18px rgba(12,20,36,.35), inset 0 1px 0 rgba(255,255,255,.8); }
  html[data-theme="light"] .nav-links a{ color:#31394d; }
  html[data-theme="light"] .nav-links a:hover{ color:#000; }
  html[data-theme="light"] .brand{ color:#0c1424; }
  html[data-theme="light"] .mode{ border-color:rgba(12,20,36,.18); color:#31394d; }
  /* sections + shells */
  html[data-theme="light"] .roster, html[data-theme="light"] .moat,
  html[data-theme="light"] .how, html[data-theme="light"] .price,
  html[data-theme="light"] .stats, html[data-theme="light"] .sec,
  html[data-theme="light"] .phero, html[data-theme="light"] .cta-final,
  html[data-theme="light"] .edu{ background-color:var(--bg); border-color:var(--line); }
  html[data-theme="light"] .roster{ box-shadow:none; }
  html[data-theme="light"] .marq{ background:var(--bg); border-color:var(--line); }
  html[data-theme="light"] .marq a{ color:#7c8698; } html[data-theme="light"] .marq i{ color:#c4cedd; }
  /* text */
  html[data-theme="light"] .lead, html[data-theme="light"] p.sub,
  html[data-theme="light"] .cta-final p{ color:#3a465c; }
  html[data-theme="light"] .roster .lead, html[data-theme="light"] .moat .lead,
  html[data-theme="light"] .how .lead, html[data-theme="light"] .price .lead{ color:#3a465c; }
  html[data-theme="light"] .moat .lead b{ color:#0c1424; }
  html[data-theme="light"] .why span, html[data-theme="light"] .step p,
  html[data-theme="light"] .svc-card p, html[data-theme="light"] .faq-item .ans,
  html[data-theme="light"] .tdesc, html[data-theme="light"] .flow-step p,
  html[data-theme="light"] .prose p, html[data-theme="light"] .prose li,
  html[data-theme="light"] .stat span, html[data-theme="light"] .p-head p,
  html[data-theme="light"] .show-p .ptag,
  html[data-theme="light"] .consult p, html[data-theme="light"] .price-foot,
  html[data-theme="light"] .cap, html[data-theme="light"] .cta-note{ color:#55617a; }
  html[data-theme="light"] .feat-li{ color:#2c3850; }
  html[data-theme="light"] .philo{ color:#e8edf6; } /* stays on dark card figure */
  /* gradient headlines become ink→blue */
  html[data-theme="light"] .grad,
  html[data-theme="light"] h1 .grad, html[data-theme="light"] h2 .grad,
  html[data-theme="light"] .roster h2 .grad, html[data-theme="light"] .moat h2 .grad,
  html[data-theme="light"] .how h2 .grad, html[data-theme="light"] .price h2 .grad,
  html[data-theme="light"] .cta-final h2 .grad{
    background:linear-gradient(92deg,#0c1424 20%,#2f6bff 90%);
    -webkit-background-clip:text; background-clip:text; }
  html[data-theme="light"] .hero h1 .grad{
    background:linear-gradient(92deg,#fff 30%,#4d8bff 75%,#249cff);
    -webkit-background-clip:text; background-clip:text; }
  /* panels: white cards */
  html[data-theme="light"] .why, html[data-theme="light"] .svc-card,
  html[data-theme="light"] .tier-card, html[data-theme="light"] .faq-item,
  html[data-theme="light"] .flow-step, html[data-theme="light"] .chart,
  html[data-theme="light"] .canvas, html[data-theme="light"] .formcard,
  html[data-theme="light"] .tool, html[data-theme="light"] .dash{
    background:#f6f6f4; border-color:var(--line);
    box-shadow:none; }
  html[data-theme="light"] .tier-card.feat{ border-color:#2f6bff;
    background:linear-gradient(180deg,#f4f8ff,#eaf1ff);
    box-shadow:0 24px 60px -30px rgba(47,107,255,.35); }
  html[data-theme="light"] .consult{ background:linear-gradient(100deg,#eaf1fd,#f2f7ff);
    border-color:#c9d8f2; }
  html[data-theme="light"] .show-stage{ background:
    radial-gradient(120% 140% at 70% 10%, #ffffff 0%, #f2f6fd 60%, #e9effa 100%); }
  html[data-theme="light"] .sc-box, html[data-theme="light"] .tile,
  html[data-theme="light"] .blk{ fill:#ffffff; stroke:#c7d3e8; }
  html[data-theme="light"] .sc-txt{ fill:#0c1424; }
  html[data-theme="light"] .sc-line{ stroke:#b7c6e0; }
  html[data-theme="light"] .cnode rect{ fill:#ffffff; stroke:#c7d3e8; }
  html[data-theme="light"] .cnode.core rect{ fill:#eef4ff; stroke:#2f6bff; }
  html[data-theme="light"] .ct{ fill:#0c1424; }
  html[data-theme="light"] .wire{ stroke:#b7c6e0; }
  /* stats + fill text + wordmark */
  html[data-theme="light"] .stat b{ background:linear-gradient(92deg,#0c1424 35%,#2f6bff);
    -webkit-background-clip:text; background-clip:text; }
  html[data-theme="light"] .fillty{ background:linear-gradient(100deg,
    #24304a var(--fp,0%), rgba(60,80,120,.25) calc(var(--fp,0%) + 9%));
    -webkit-background-clip:text; background-clip:text; }
  html[data-theme="light"] .foot{ background:#e4e5e1; border-color:var(--line); }
  html[data-theme="light"] .foot-brand .b, html[data-theme="light"] .foot-brand .b i{ color:#0c1424; }
  html[data-theme="light"] .foot-brand p{ color:#5b6577; }
  html[data-theme="light"] .foot-col h4{ color:#63666b; }
  html[data-theme="light"] .foot-col a{ color:#31394d; }
  html[data-theme="light"] .foot-col a:hover{ color:#000; }
  html[data-theme="light"] .foot-bot{ color:#7c8698; border-color:#d3dcea; }
  html[data-theme="light"] .foot-credit b{ color:#0c1424; }
  html[data-theme="light"] .foot-word{ background:linear-gradient(180deg,#c6d4ec 0%,#dfe7f4 60%,#e9eef7 100%);
    -webkit-background-clip:text; background-clip:text; }
  /* buttons */
  html[data-theme="light"] .btn-solid, html[data-theme="light"] .tcta.solid,
  html[data-theme="light"] .talk, html[data-theme="light"] .lead-submit{
    background:linear-gradient(92deg,#101c36,#23407c); color:#fff; }
  html[data-theme="light"] .btn-ghost, html[data-theme="light"] .tcta.ghost{
    color:#31394d; border-color:#c2cede; }
  html[data-theme="light"] .btn-ghost:hover, html[data-theme="light"] .tcta.ghost:hover{
    background:#e6ecf6; border-color:#9fb0c8; }
  /* chips + small borders */
  html[data-theme="light"] .p-links a{ color:#31394d; border-color:#c7d3e5; }
  html[data-theme="light"] .p-links a:hover{ color:#000; background:rgba(47,107,255,.08); }
  html[data-theme="light"] .tag, html[data-theme="light"] .etag,
  html[data-theme="light"] .badge-st{ border-color:#c7d3e5; color:#4c5870; }
  html[data-theme="light"] .etag.live{ color:#178449; border-color:#9fd4b6; }
  html[data-theme="light"] .faq-item summary{ color:#0c1424; }
  html[data-theme="light"] .steps .track{ background:#dbe4f1; }
  html[data-theme="light"] .num{ background:#ffffff; border-color:#c7d3e5; }
  html[data-theme="light"] .gridln{ stroke:rgba(60,100,170,.14); }
  html[data-theme="light"] .molbl{ fill:#8b94a8; } html[data-theme="light"] .axlbl{ fill:#7c8698; }
  html[data-theme="light"] .decay{ stroke:#a9b6cc; }
  html[data-theme="light"] .endlbl.down{ fill:#8b94a8; }
  html[data-theme="light"] .lead-modal{ background:rgba(255,255,255,.94); border-color:#d3dcea; }
  html[data-theme="light"] .lead-modal h3{ color:#0c1424; }
  html[data-theme="light"] .field input, html[data-theme="light"] .field select,
  html[data-theme="light"] .field textarea{ background:#fff; border-color:#c7d3e5; color:#0c1424; }
  html[data-theme="light"] .show-p .gnum{ -webkit-text-stroke:1px rgba(60,110,220,.22); }
  html[data-theme="light"] .show-p.act .gnum{ -webkit-text-stroke:1px rgba(47,107,255,.5); }

  @media (prefers-reduced-motion: reduce){
    .roster,.moat,.how,.price,.stats,.sec,.phero,.cta-final,.edu,.show-stage::after{ animation:none; }
    .scene{ transition:none; } .scene.on .orb,.scene.on .core-ring{ animation:none; }
  }

  /* ══════════════════════════════════════════════════════════════════
     PAPER & INK — round 4. White/black slide system, editorial mono,
     isometric line icons, premium scale. Blue demoted to an accent.
     ══════════════════════════════════════════════════════════════════ */

  /* ── Premium scale: bigger type, more air ─────────────────────────── */
  .roster .wrap, .moat .wrap, .how .wrap, .price .wrap, .sec .wrap{ max-width:1200px; }
  .how .wrap, .price .wrap{ padding-top:14vh; padding-bottom:15vh; }
  .moat .wrap{ padding-top:13vh; padding-bottom:15vh; }
  .roster h2, .moat h2, .how h2, .price h2{ font-size:clamp(32px,5.6vw,62px); }
  .roster .lead, .moat .lead, .how .lead, .price .lead{ font-size:clamp(16px,2.5vw,19px); }

  /* ── PAPER register: off-white slides, ink text, hairlines ────────── */
  html[data-theme="light"] body{
    background-color:#ecedeb; color:#101216;
    --gmaj:rgba(16,18,22,.075); --gmin:rgba(16,18,22,.035);
    border-top:1px solid #ecedeb; }
  html[data-theme="light"] + .paper{ border-top:1px solid #d8d9d5; }
  html[data-theme="light"] .kicker{ color:#63666b; }
  html[data-theme="light"] .kicker::before{ color:#101216; }
  html[data-theme="light"] h2{ color:#101216; }
  html[data-theme="light"] h2 .grad{ background:none; -webkit-background-clip:initial; background-clip:initial;
    -webkit-text-fill-color:currentColor; color:#101216; position:relative; }
  html[data-theme="light"] h2 .grad::after{ content:""; position:absolute; left:0; right:0; bottom:.04em;
    height:.09em; background:var(--blue); opacity:.9; }
  html[data-theme="light"] .lead{ color:#3c3f45; }
  html[data-theme="light"] .fillty{ background:linear-gradient(100deg,
    #101216 var(--fp,0%), rgba(16,18,22,.22) calc(var(--fp,0%) + 9%));
    -webkit-background-clip:text; background-clip:text; }
  /* stats on paper: big ink numbers, mono captions */
  html[data-theme="light"] .stats .stat b{ background:none; -webkit-background-clip:initial; background-clip:initial;
    -webkit-text-fill-color:currentColor; color:#101216; }
  html[data-theme="light"] .stats .stat span{ color:#63666b;
    font-family:"Space Mono",monospace; font-size:12.5px; letter-spacing:.02em; }
  html[data-theme="light"] .stats .wrap{ padding-top:11vh; padding-bottom:11vh; }
  /* marquee on paper */
  html[data-theme="light"] .marq{ background:#ecedeb; border-top:1px solid #d8d9d5; border-bottom:1px solid #d8d9d5;
    padding:26px 0; }
  html[data-theme="light"] .marq a{ color:#3c3f45; font-size:14px; }
  html[data-theme="light"] .marq a:hover{ color:#101216; }
  html[data-theme="light"] .marq i{ color:#b9bab5; }
  /* showcase on paper */
  html[data-theme="light"] .show-p{ border-color:#d8d9d5; }
  html[data-theme="light"] .show-p .ptag{ color:#63666b; font-size:12.5px; line-height:1.6; }
  html[data-theme="light"] .show-p h3{ color:#101216; }
  html[data-theme="light"] .show-p.act h3{ color:#101216; }
  html[data-theme="light"] .show-p.act h3::before{ content:">> "; color:var(--blue);
    font-family:"Space Mono",monospace; font-weight:500; font-size:.72em; }
  html[data-theme="light"] .p-links a{ color:#2c2f34; border-color:#c9cac5; border-radius:6px; }
  html[data-theme="light"] .p-links a:hover{ color:#000; border-color:#101216; background:rgba(16,18,22,.05); transform:none; }
  html[data-theme="light"] .p-hub{ color:#101216; font-family:"Space Mono",monospace; font-size:12.5px;
    letter-spacing:.06em; text-transform:uppercase; }
  html[data-theme="light"] .p-hub:hover{ color:var(--blue); }
  html[data-theme="light"] .show-p .gnum{ -webkit-text-stroke:1px rgba(16,18,22,.18); }
  html[data-theme="light"] .show-p.act .gnum{ -webkit-text-stroke:1px rgba(16,18,22,.42); }
  html[data-theme="light"] .show-stage{ border:1px solid #101216; border-radius:18px;
    background:#f4f4f2; box-shadow:8px 8px 0 rgba(16,18,22,.9); }
  html[data-theme="light"] .show-stage::after{ background-image:radial-gradient(rgba(16,18,22,.12) 1px, transparent 1px);
    background-size:22px 22px; animation:none; }
  html[data-theme="light"] .sc-box, html[data-theme="light"] .tile, html[data-theme="light"] .blk{ fill:#f4f4f2; stroke:#101216; }
  html[data-theme="light"] .sc-txt{ fill:#101216; }
  html[data-theme="light"] .sc-sub{ fill:#63666b; }
  html[data-theme="light"] .sc-line{ stroke:#101216; }
  html[data-theme="light"] .cnode rect{ fill:#f4f4f2; stroke:#101216; }
  html[data-theme="light"] .core-ring{ stroke:rgba(16,18,22,.3); }
  /* how-it-works steps on paper */
  html[data-theme="light"] .how{ border-top:1px solid #d8d9d5; }
  html[data-theme="light"] .track{ background:#d0d1cc; }
  html[data-theme="light"] .num{ background:#f4f4f2; border-color:#101216; color:#101216; }
  html[data-theme="light"] .step h3{ color:#101216; }
  html[data-theme="light"] .step p{ color:#63666b; }
  /* pricing on paper: white cards, featured goes solid ink */
  html[data-theme="light"] .tier-card{ background:#f6f6f4; border-color:#c9cac5; box-shadow:none; }
  html[data-theme="light"] .tier-card:hover{ border-color:#101216; }
  html[data-theme="light"] .tname{ color:#63666b; }
  html[data-theme="light"] .tprice{ color:#101216; }
  html[data-theme="light"] .tprice .per, html[data-theme="light"] .tbill{ color:#9aa0aa; }
  html[data-theme="light"] .tdesc{ color:#3c3f45; }
  html[data-theme="light"] .feat-li{ color:#2c2f34; }
  html[data-theme="light"] .feat-li svg{ stroke:#101216; }
  html[data-theme="light"] .tcta.ghost{ color:#101216; border-color:#101216; }
  html[data-theme="light"] .tcta.ghost:hover{ background:#101216; color:#fff; }
  html[data-theme="light"] .tier-card.feat{ background:#101216; border-color:#101216;
    box-shadow:10px 10px 0 rgba(16,18,22,.22); }
  html[data-theme="light"] .tier-card.feat .tname{ color:#9fb4e8; }
  html[data-theme="light"] .tier-card.feat .tprice, html[data-theme="light"] .tier-card.feat .tdesc,
  html[data-theme="light"] .tier-card.feat .feat-li{ color:#edefec; }
  html[data-theme="light"] .tier-card.feat .feat-li svg{ stroke:#7fb2ff; }
  html[data-theme="light"] .tier-card.feat .tbill{ color:#8f9bb3; }
  html[data-theme="light"] .badge{ background:#fff; color:#101216; }
  html[data-theme="light"] .tcta.solid{ background:#101216; color:#fff; }
  html[data-theme="light"] .tier-card.feat .tcta.solid{ background:#fff; color:#101216; }
  html[data-theme="light"] .consult{ background:#f6f6f4; border-color:#c9cac5; }
  html[data-theme="light"] .consult h3{ color:#101216; }
  html[data-theme="light"] .consult p{ color:#63666b; }
  html[data-theme="light"] .talk{ background:#101216; color:#fff; }
  html[data-theme="light"] .price-foot{ color:#9aa0aa; }
  /* FAQ on paper */
  html[data-theme="light"] .faq-item{ background:#f6f6f4; border-color:#c9cac5; border-radius:10px; }
  html[data-theme="light"] .faq-item summary{ color:#101216; }
  html[data-theme="light"] .faq-item summary::after{ color:#101216; }
  html[data-theme="light"] .faq-item .ans{ color:#4c4f55; }
  /* generic paper components (subpages) */
  html[data-theme="light"] .why{ background:#f6f6f4; border-color:#c9cac5; }
  html[data-theme="light"] .why b{ color:#101216; }
  html[data-theme="light"] .why span{ color:#63666b; }
  html[data-theme="light"] .why svg{ stroke:#101216; }
  html[data-theme="light"] .svc-card{ background:#f6f6f4; border-color:#c9cac5; color:#101216; }
  html[data-theme="light"] .svc-card:hover{ border-color:#101216; }
  html[data-theme="light"] .svc-card .svc-k{ color:#63666b; }
  html[data-theme="light"] .svc-card p{ color:#4c4f55; }
  html[data-theme="light"] .svc-card .go{ color:#101216; }
  html[data-theme="light"] .flow-step{ background:#f6f6f4; border-color:#c9cac5; }
  html[data-theme="light"] .flow-step p{ color:#63666b; }
  html[data-theme="light"] .prose p, html[data-theme="light"] .prose li{ color:#3c3f45; }
  html[data-theme="light"] .prose li svg{ stroke:#101216; }
  html[data-theme="light"] .btn-ghost{ color:#101216; border-color:#101216; }
  html[data-theme="light"] .btn-ghost:hover{ background:#101216; color:#fff; }
  html[data-theme="light"] .btn-solid{ background:#101216; color:#fff; }

  /* ── Hero: ref-style big links block, top right ───────────────────── */
  .hero-links{ position:absolute; top:130px; right:7vw; z-index:3; pointer-events:auto;
    display:flex; flex-direction:column; gap:12px; text-align:left;
    opacity:0; animation:rise 1s .8s forwards; }
  .hero-links a{ font-family:"Clash Display",sans-serif; font-size:clamp(18px,1.8vw,25px);
    font-weight:500; letter-spacing:-.015em; color:#e8edf6; text-decoration:none;
    display:inline-flex; align-items:center; gap:10px;
    transition:color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
  .hero-links a::before{ content:">"; font-family:"Space Mono",monospace; font-size:.7em;
    color:var(--cyan); opacity:0; transform:translateX(-6px); transition:opacity .25s ease, transform .25s ease; }
  .hero-links a:hover{ color:#fff; transform:translateX(6px); }
  .hero-links a:hover::before{ opacity:1; transform:none; }
  @media (max-width:980px){ .hero-links{ display:none; } }

  /* ── Isometric line-art trio (education, ref2 register) ───────────── */
  .edu-iso{ position:relative; }
  html .edu-iso{ background-color:#0c0e14; background-image:
    radial-gradient(rgba(120,140,180,.10) 1px, transparent 1px);
    background-size:26px 26px; animation:none; }
  .edu-iso .wrap{ max-width:1200px; margin:0 auto; padding:14vh 7vw 15vh; }
  .iso-grid{ margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr); gap:56px; }
  .iso-col{ display:flex; flex-direction:column; align-items:flex-start; }
  .iso-fig{ width:100%; display:grid; place-items:center; min-height:210px; }
  .iso-fig svg{ width:180px; height:180px; overflow:visible; }
  .iso-fig path, .iso-fig line, .iso-fig circle, .iso-fig ellipse, .iso-fig rect{
    fill:none; stroke:#e8e8e6; stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round; }
  .iso-fig .accent{ stroke:var(--cyan); }
  /* draw-on-reveal */
  .iso-col.reveal .iso-fig [pathLength]{ stroke-dasharray:1; stroke-dashoffset:1; }
  .iso-col.reveal.in .iso-fig [pathLength]{ animation:draw 1.4s cubic-bezier(.4,0,.2,1) forwards;
    animation-delay:calc(var(--d,0)*.12s); }
  /* gentle float loop */
  .iso-col.in .iso-fig svg{ animation:isofloat 7s ease-in-out infinite; }
  .iso-col:nth-child(2).in .iso-fig svg{ animation-delay:1.2s; }
  .iso-col:nth-child(3).in .iso-fig svg{ animation-delay:2.4s; }
  @keyframes isofloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
  .iso-col h3{ margin-top:26px; font-family:"Space Mono",monospace; font-weight:500;
    font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:#edefec; }
  .iso-col p{ margin-top:12px; font-size:14px;
    line-height:1.7; color:#9aa0aa; max-width:34ch; }
  .iso-col .p-hub{ margin-top:18px; font-family:"Space Mono",monospace; font-size:12.5px;
    letter-spacing:.06em; text-transform:uppercase; color:#e8e8e6; text-decoration:none; }
  .iso-col .p-hub:hover{ color:var(--cyan); }
  .edu-iso .kicker{ color:#9aa0aa; }
  .edu-iso h2{ color:#edefec; font-size:clamp(32px,5.6vw,62px); }
  .edu-iso h2 .grad{ background:linear-gradient(92deg,#fff 30%,var(--cyan) 95%);
    -webkit-background-clip:text; background-clip:text; }
  .edu-iso .lead{ color:#9aa0ab; max-width:56ch; margin-top:22px;
    font-size:clamp(15px,2.4vw,18px); line-height:1.6; }
  @media (max-width:860px){ .iso-grid{ grid-template-columns:1fr; gap:44px; } }

  /* paper slides stay paper in light theme; dark theme untouched */

  @media (max-width:720px){
    .stats.paper .wrap{ gap:34px; }
    html[data-theme="light"] .show-stage{ box-shadow:5px 5px 0 rgba(16,18,22,.9); }
  }

  /* fixes: counter spans keep display/size inside big stat numbers */
  html[data-theme="light"] .stats .stat b span, html .stats .stat b span{
    display:inline; font:inherit; letter-spacing:inherit; margin:0; max-width:none; color:inherit; }
  /* marquee on paper: fade edges into paper, not into the dark body */
  html[data-theme="light"] .marq{ -webkit-mask:none; mask:none; }
  html[data-theme="light"] .marq::before, html[data-theme="light"] .marq::after{ content:""; position:absolute; top:0; bottom:0;
    width:12%; z-index:1; pointer-events:none; }
  html[data-theme="light"] .marq::before{ left:0; background:linear-gradient(90deg,#ecedeb,rgba(236,237,235,0)); }
  html[data-theme="light"] .marq::after{ right:0; background:linear-gradient(270deg,#ecedeb,rgba(236,237,235,0)); }

  /* ══════════════════════════════════════════════════════════════════
     ROUND 5 — cinema slide (halftone colleague) + realistic office
     interface mockup with live cursors.
     ══════════════════════════════════════════════════════════════════ */

  /* ── Cinema: halftone portrait × paper editorial ──────────────────── */
  .cine{ position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; min-height:88vh; }
  .cine-img{ position:relative; background:#0a0a0c; overflow:hidden; display:grid; place-items:center; }
  .cine-img img{ width:min(92%, 720px); height:auto; display:block;
    animation:cinebreathe 11s ease-in-out infinite; }
  @keyframes cinebreathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.035) } }
  .cine-cap{ position:absolute; left:26px; bottom:22px; font-family:"Space Mono",monospace;
    font-size:11px; letter-spacing:.12em; color:#7a7d82; }
  .cine-cap::before{ content:">>> "; color:#e8e8e6; }
  .cine-txt{ background-color:#07080b; color:#edefec; padding:12vh 6vw 12vh 5vw;
    background-image:
      linear-gradient(var(--gmaj) 1px, transparent 1px),
      linear-gradient(90deg, var(--gmaj) 1px, transparent 1px),
      linear-gradient(var(--gmin) 1px, transparent 1px),
      linear-gradient(90deg, var(--gmin) 1px, transparent 1px);
    background-size:224px 224px, 224px 224px, 56px 56px, 56px 56px;
    --gmaj:rgba(94,146,255,.048); --gmin:rgba(94,146,255,.021); }
  .cine-txt .kicker{ color:#9aa0aa; }
  .cine-txt .kicker::before{ color:var(--cyan); }
  .cine-txt h2{ font-size:clamp(32px,4.6vw,56px); font-weight:600; letter-spacing:-.03em;
    line-height:1.02; margin-top:20px; color:#edefec; font-family:"Clash Display",sans-serif; }
  .cine-txt .lead{ margin-top:18px; font-size:15.5px; line-height:1.6; color:#9aa0ab; max-width:46ch; }
  .cine-feats{ margin-top:44px; }
  .cine-feat{ border-top:1px solid #242c3f; padding:22px 0; }
  .cine-feat:last-child{ border-bottom:1px solid #242c3f; }
  .cine-feat h4{ font-family:"Space Mono",monospace; font-weight:500; font-size:13px;
    letter-spacing:.1em; text-transform:uppercase; color:#edefec; }
  .cine-feat p{ margin-top:8px; font-size:14px;
    line-height:1.65; color:#9aa0aa; max-width:52ch; }
  .cine-txt .p-hub{ display:inline-block; margin-top:26px; font-family:"Space Mono",monospace;
    font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#edefec; text-decoration:none; }
  .cine-txt .p-hub:hover{ color:var(--cyan); }
  @media (max-width:900px){
    .cine{ grid-template-columns:1fr; min-height:0; }
    .cine-img{ min-height:70vw; }
    .cine-txt{ padding:9vh 7vw; }
  }

  /* ── Office interface mockup (the realistic workflow) ─────────────── */
  .appmock{ position:relative; margin-top:46px; border:1px solid #262b36; border-radius:18px;
    overflow:hidden; background:#0c0e14; }
  .appmock svg{ width:100%; height:auto; display:block; }
  .appmock .cap{ padding:12px 16px 16px; font-size:13px; color:var(--dim);
    letter-spacing:.04em; text-align:center; }
  .appmock .cap b{ color:#cdd9f2; font-weight:600; }
  /* drawing language */
  .am-frame{ fill:#0e1016; stroke:#262b36; stroke-width:1.2; }
  .am-node{ fill:#13161e; stroke:#3a4150; stroke-width:1.2; }
  .am-node-hot{ fill:#0c1426; stroke:var(--blue); stroke-width:1.3;
    filter:drop-shadow(0 0 12px rgba(47,107,255,.35)); }
  .am-node-you{ fill:#edefec; stroke:#edefec; }
  .am-tab-on{ fill:#edefec; }
  .am-tab-off{ fill:none; stroke:#3a4150; }
  .am-t{ fill:#e8e8e6; font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.04em; }
  .am-t.b{ fill:#0e1016; }
  .am-s{ fill:#6a707c; font-family:"Space Mono",monospace; font-size:9.5px; letter-spacing:.06em; }
  .am-wire{ fill:none; stroke:#3a4150; stroke-width:1.4; stroke-dasharray:4 5; }
  .appmock.in .am-wire{ animation:wireflow 1.5s linear infinite; }
  .am-wire.ok{ stroke:#2f6bff; }
  .am-port{ fill:#6a707c; }
  .am-icon{ fill:none; stroke:#8a8f9a; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
  .am-dot-live{ fill:#5fd08a; }
  .appmock.in .am-dot-live{ animation:livepulse 2s ease-in-out infinite; }
  /* roaming cursors */
  .am-cur{ opacity:0; }
  .appmock.in .am-cur{ opacity:1; }
  .am-cur .chip{ fill:#edefec; }
  .am-cur .chip-t{ fill:#0e1016; font-family:"Space Mono",monospace; font-size:10px; }
  .am-cur.blue .chip{ fill:#2f6bff; }
  .am-cur.blue .chip-t{ fill:#fff; }
  .am-cur .arrow{ fill:#edefec; stroke:#0e1016; stroke-width:.8; }
  .am-cur.blue .arrow{ fill:#2f6bff; stroke:#0e1016; }
  .appmock.in .am-cur.you{ animation:curyou 16s ease-in-out infinite; }
  .appmock.in .am-cur.salma{ animation:cursalma 13s ease-in-out infinite; }
  @keyframes curyou{
    0%,14%{ transform:translate(858px,206px) } 26%,44%{ transform:translate(716px,300px) }
    56%,80%{ transform:translate(872px,140px) } 92%,100%{ transform:translate(858px,206px) } }
  @keyframes cursalma{
    0%,12%{ transform:translate(320px,282px) } 24%,38%{ transform:translate(505px,262px) }
    52%,66%{ transform:translate(350px,140px) } 80%,100%{ transform:translate(320px,282px) } }
  /* feature row under the mock (ref4 bottom register) */
  .am-feats{ margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
  .am-feat svg{ width:30px; height:30px; overflow:visible; }
  .am-feat svg *{ fill:none; stroke:#e8e8e6; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
  .am-feat h4{ margin-top:16px; font-family:"Space Mono",monospace; font-weight:500;
    font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#edefec; }
  .am-feat p{ margin-top:10px; font-size:14px;
    line-height:1.65; color:#9aa0aa; max-width:30ch; }
  @media (max-width:900px){
    .am-feats{ grid-template-columns:repeat(2,1fr); gap:32px; }
    .appmock{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .appmock svg{ min-width:1000px; }
  }
  @media (max-width:520px){ .am-feats{ grid-template-columns:1fr; } }
  @media (prefers-reduced-motion: reduce){
    .cine-img img{ animation:none; }
    .appmock.in .am-cur{ animation:none !important; }
  }
  /* cursor rest positions (used before animation starts and under reduced motion) */
  .am-cur.you{ transform:translate(858px,206px); }
  .am-cur.salma{ transform:translate(320px,282px); }

  /* ══════════════════════════════════════════════════════════════════
     DE-SLOP SWEEP — kill the rounded-card grids and circled numbers.
     Flow steps, why-grids, FAQ, and service cards become editorial
     hairline rows in both registers. CSS-only: fixes every page.
     ══════════════════════════════════════════════════════════════════ */

  /* ── Flow steps (Role/Tasks/Knowledge/Tools, "From first call…") ──── */
  html .flow{ gap:0; margin-top:44px; max-width:920px; }
  html .flow-step{ grid-template-columns:86px 1fr; gap:28px; background:none; border:0;
    border-top:1px solid #242c3f; border-radius:0; padding:30px 4px; transition:background .25s ease; }
  html .flow-step:last-child{ border-bottom:1px solid #242c3f; }
  html .flow-step:hover{ background:rgba(63,130,255,.035); }
  html .flow-step .num{ width:auto; height:auto; background:none; border:0; border-radius:0;
    display:block; color:#6a707c; font-family:"Space Mono",monospace; font-size:13px;
    letter-spacing:.08em; padding-top:5px; opacity:1; transform:none; }
  html .flow-step .num::before{ content:"// "; color:var(--cyan); }
  html .flow-step h3{ font-family:"Clash Display",sans-serif; font-size:20px; letter-spacing:-.015em; }
  html .flow-step:hover h3::after{ content:"  >>"; color:var(--cyan);
    font-family:"Space Mono",monospace; font-size:.7em; white-space:pre; }
  html .flow-step p{ font-size:14px; line-height:1.7;
    color:#9aa0aa; max-width:66ch; margin-top:8px; }
  html[data-theme="light"] .flow-step{ border-color:#d0d1cc; background:none; }
  html[data-theme="light"] .flow-step:hover{ background:rgba(16,18,22,.035); }
  html[data-theme="light"] .flow-step .num{ color:#63666b; }
  html[data-theme="light"] .flow-step .num::before{ color:#101216; }
  html[data-theme="light"] .flow-step h3{ color:#101216; }
  html[data-theme="light"] .flow-step:hover h3::after{ color:var(--blue); }
  html[data-theme="light"] .flow-step p{ color:#63666b; }

  /* ── Why-grids ("What you get", homepage moat) ────────────────────── */
  html .whys{ display:grid; grid-template-columns:1fr 1fr; gap:0 72px; margin-top:44px; }
  html .why{ background:none; border:0; border-radius:0; border-bottom:1px solid #242c3f;
    padding:24px 4px; gap:0; display:block; }
  html .why:nth-child(1), html .why:nth-child(2){ border-top:1px solid #242c3f; }
  html .why svg{ display:none; }
  html .why b{ font-family:"Space Mono",monospace; font-weight:500; font-size:12.5px;
    letter-spacing:.1em; text-transform:uppercase; }
  html .why b::before{ content:">> "; color:var(--cyan); }
  html .why span{ font-size:14px; line-height:1.7;
    color:#9aa0aa; margin-top:9px; max-width:52ch; }
  html[data-theme="light"] .why{ background:none; border-color:#d0d1cc; box-shadow:none; }
  html[data-theme="light"] .why:nth-child(1), html[data-theme="light"] .why:nth-child(2){ border-top:1px solid #d0d1cc; }
  html[data-theme="light"] .why b{ color:#101216; }
  html[data-theme="light"] .why b::before{ color:var(--blue); }
  html[data-theme="light"] .why span{ color:#63666b; }
  @media (max-width:860px){
    html .whys{ grid-template-columns:1fr; gap:0; }
    html .why:nth-child(2){ border-top:0; }
    html[data-theme="light"] .why:nth-child(2){ border-top:0; }
  }

  /* ── FAQ: flatten to hairline rows ────────────────────────────────── */
  html .faq-item, html[data-theme="light"] .faq-item{ background:none; border:0; border-radius:0;
    border-bottom:1px solid #242c3f; box-shadow:none; }
  html .faq-list{ gap:0; margin-top:38px; }
  html .faq-list .faq-item:first-child{ border-top:1px solid #242c3f; }
  html .faq-item summary{ padding:22px 4px; }
  html .faq-item summary::after{ font-family:"Space Mono",monospace; }
  html .faq-item .ans{ padding:0 4px 24px;
    font-size:14px; line-height:1.75; }
  html[data-theme="light"] .faq-item{ border-color:#d0d1cc; }
  html[data-theme="light"] .faq-list .faq-item:first-child{ border-top:1px solid #d0d1cc; }

  /* ── Service cards: editorial rows (hub, related services) ────────── */
  html .svc-grid{ display:block; margin-top:44px; }
  html .svc-card, html[data-theme="light"] .svc-card{ display:block; background:none; border:0; border-radius:0;
    border-top:1px solid #242c3f; box-shadow:none; padding:28px 4px; transform:none;
    transition:background .25s ease; }
  html .svc-grid .svc-card:last-child{ border-bottom:1px solid #242c3f; }
  html .svc-card:hover{ transform:none; background:rgba(63,130,255,.035); border-color:#242c3f; }
  html .svc-card .svc-k{ font-family:"Space Mono",monospace; font-size:10.5px; }
  html .svc-card h3{ margin-top:10px; font-family:"Clash Display",sans-serif; font-size:23px; }
  html .svc-card p{ margin-top:10px; font-size:14px;
    line-height:1.7; max-width:74ch; }
  html .svc-card .go{ margin-top:14px; font-family:"Space Mono",monospace; font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; }
  html .svc-card .go svg{ display:none; }
  html .svc-card .go::before{ content:">> "; }
  html[data-theme="light"] .svc-card{ border-color:#d0d1cc; }
  html[data-theme="light"] .svc-grid .svc-card:last-child{ border-bottom:1px solid #d0d1cc; }
  html[data-theme="light"] .svc-card:hover{ background:rgba(16,18,22,.035); }
  html[data-theme="light"] .svc-card .go{ color:#101216; }

  /* ══════════════════════════════════════════════════════════════════
     TRUE THEMES — light-mode coverage for every remaining dark element.
     Dark mode is fully dark (paper rules scoped away); light is fully
     paper. The hero WebGL stage is the one deliberate dark artifact.
     ══════════════════════════════════════════════════════════════════ */

  /* roster cards */
  html[data-theme="light"] .card{ background:#f6f6f4; border-color:#c9cac5; }
  html[data-theme="light"] .card:hover{ border-color:#101216;
    box-shadow:0 22px 50px -30px rgba(16,18,22,.4); }
  html[data-theme="light"] .card::after{ opacity:.25; }
  html[data-theme="light"] .body-col{
    background:linear-gradient(90deg,#f6f6f4 18%,rgba(246,246,244,.65) 62%,transparent); }
  html[data-theme="light"] .name{ color:#101216; }
  html[data-theme="light"] .philo{ color:#2c2f34; }
  html[data-theme="light"] .domain{ color:#63666b; }
  html[data-theme="light"] .etag{ color:#4c5870; border-color:#c9cac5; }
  html[data-theme="light"] .br{ border-color:#b9bab5; }
  html[data-theme="light"] .card:hover .br{ border-color:#101216; }
  html[data-theme="light"] .card.custom{ background:#f6f6f4; border-color:#c9cac5; }
  html[data-theme="light"] .card.custom .role{ color:#4c5870; }
  html[data-theme="light"] .tag{ color:#4c5870; border-color:#c9cac5; }
  html[data-theme="light"] .pick{ color:#101216; }
  html[data-theme="light"] .sig b{ color:var(--cyan); }

  /* moat chart shell */
  html[data-theme="light"] .chart{ background:#f6f6f4; border-color:#c9cac5; }
  html[data-theme="light"] .edgelbl{ fill:#4c5870; }

  /* office interface mock */
  html[data-theme="light"] .appmock{ background:#f0f0ee; border-color:#c9cac5; }
  html[data-theme="light"] .am-frame{ fill:#f6f6f4; stroke:#b9bcc0; }
  html[data-theme="light"] .am-node{ fill:#ffffff; stroke:#9aa0a8; }
  html[data-theme="light"] .am-node-hot{ fill:#eef3ff; stroke:var(--blue); }
  html[data-theme="light"] .am-node-you{ fill:#101216; stroke:#101216; }
  html[data-theme="light"] .am-t{ fill:#101216; }
  html[data-theme="light"] .am-t.b{ fill:#edefec; }
  html[data-theme="light"] .am-tab-on{ fill:#101216; }
  html[data-theme="light"] .am-tab-off{ stroke:#b9bcc0; }
  html[data-theme="light"] .am-s{ fill:#63666b; }
  html[data-theme="light"] .am-wire{ stroke:#9aa0a8; }
  html[data-theme="light"] .am-wire.ok{ stroke:var(--blue); }
  html[data-theme="light"] .am-port{ fill:#63666b; }
  html[data-theme="light"] .am-icon{ stroke:#4c5058; }
  html[data-theme="light"] .am-cur .chip{ fill:#101216; }
  html[data-theme="light"] .am-cur .chip-t{ fill:#edefec; }
  html[data-theme="light"] .am-cur .arrow{ fill:#101216; stroke:#edefec; }
  html[data-theme="light"] .am-feat svg *{ stroke:#101216; }
  html[data-theme="light"] .am-feat h4{ color:#101216; }
  html[data-theme="light"] .am-feat p{ color:#63666b; }
  html[data-theme="light"] .appmock .cap{ color:#63666b; }
  html[data-theme="light"] .appmock .cap b{ color:#101216; }
  /* dark-canvas section text in light */
  html[data-theme="light"] .clbl{ fill:#63666b; }

  /* isometric education */
  html[data-theme="light"] .edu-iso{ background-color:#ecedeb; background-image:
    radial-gradient(rgba(16,18,22,.16) 1px, transparent 1px); background-size:26px 26px; }
  html[data-theme="light"] .edu-iso .kicker{ color:#63666b; }
  html[data-theme="light"] .edu-iso h2{ color:#101216; }
  html[data-theme="light"] .edu-iso h2 .grad{ background:none; -webkit-background-clip:initial;
    background-clip:initial; -webkit-text-fill-color:currentColor; color:#101216; }
  html[data-theme="light"] .edu-iso .lead{ color:#3c3f45; }
  html[data-theme="light"] .iso-fig path, html[data-theme="light"] .iso-fig line,
  html[data-theme="light"] .iso-fig circle, html[data-theme="light"] .iso-fig ellipse,
  html[data-theme="light"] .iso-fig rect{ stroke:#15171b; }
  html[data-theme="light"] .iso-fig .accent{ stroke:var(--blue); }
  html[data-theme="light"] .iso-col h3{ color:#101216; }
  html[data-theme="light"] .iso-col p{ color:#63666b; }
  html[data-theme="light"] .iso-col .p-hub{ color:#101216; }
  html[data-theme="light"] .iso-col .p-hub:hover{ color:var(--blue); }

  /* cinema slide: halftone inverts to newsprint, panel goes paper */
  html[data-theme="light"] .cine-img{ background:#ecedeb; }
  html[data-theme="light"] .cine-img img{ filter:invert(1); }
  html[data-theme="light"] .cine-cap{ color:#63666b; }
  html[data-theme="light"] .cine-cap::before{ color:#101216; }
  html[data-theme="light"] .cine-txt{ background-color:#e4e5e1; color:#101216;
    --gmaj:rgba(16,18,22,.075); --gmin:rgba(16,18,22,.035); }
  html[data-theme="light"] .cine-txt .kicker{ color:#63666b; }
  html[data-theme="light"] .cine-txt .kicker::before{ color:#101216; }
  html[data-theme="light"] .cine-txt h2{ color:#101216; }
  html[data-theme="light"] .cine-txt .lead{ color:#3c3f45; }
  html[data-theme="light"] .cine-feat{ border-color:#c9cac5; }
  html[data-theme="light"] .cine-feat:last-child{ border-color:#c9cac5; }
  html[data-theme="light"] .cine-feat h4{ color:#101216; }
  html[data-theme="light"] .cine-feat p{ color:#63666b; }
  html[data-theme="light"] .cine-txt .p-hub{ color:#101216; }
  html[data-theme="light"] .cine-txt .p-hub:hover{ color:var(--blue); }

  /* component hairlines in light (flow/why/faq/svc rows use dark literals) */
  html[data-theme="light"] .flow-step,
  html[data-theme="light"] .flow-step:last-child{ border-color:#d0d1cc; }
  html[data-theme="light"] .why,
  html[data-theme="light"] .why:nth-child(1), html[data-theme="light"] .why:nth-child(2){ border-color:#d0d1cc; }
  html[data-theme="light"] .faq-item,
  html[data-theme="light"] .faq-list .faq-item:first-child{ border-color:#d0d1cc; }
  html[data-theme="light"] .svc-card,
  html[data-theme="light"] .svc-grid .svc-card:last-child{ border-color:#d0d1cc; }
  html[data-theme="light"] .show-p{ border-color:#d0d1cc; }

  /* marquee in light without the paper class dependency */
  html[data-theme="light"] .marq{ background:#ecedeb; border-top:1px solid #d0d1cc;
    border-bottom:1px solid #d0d1cc; -webkit-mask:none; mask:none; }
  html[data-theme="light"] .marq a{ color:#3c3f45; }
  html[data-theme="light"] .marq a:hover{ color:#101216; }
  html[data-theme="light"] .marq i{ color:#b9bab5; }

  /* stats numbers: plain ink in light (scoped rules moved), keep dark gradient in dark */
  html[data-theme="light"] .stat b{ background:none; -webkit-background-clip:initial;
    background-clip:initial; -webkit-text-fill-color:currentColor; color:#101216; }

  /* ══════════════════════════════════════════════════════════════════
     CINEMATIC ROWS — extra-big editorial rows; hovering reveals an
     animated black-and-white halftone film frame. Both themes.
     ══════════════════════════════════════════════════════════════════ */

  /* scale the rows up */
  html .flow{ max-width:none; }
  html .flow-step{ grid-template-columns:110px 1fr; padding:44px 300px 44px 4px; position:relative; }
  html .flow-step .num{ font-size:15px; padding-top:14px; }
  html .flow-step h3{ font-size:clamp(26px,3.4vw,44px); letter-spacing:-.025em; line-height:1.05; }
  html .flow-step p{ font-size:13px; margin-top:12px; max-width:58ch; }
  html .svc-card{ padding:40px 300px 40px 4px; position:relative; }
  html .svc-card h3{ font-size:clamp(24px,3vw,38px); letter-spacing:-.025em; }

  /* the film frame */
  html .flow-step::before, html .svc-card::before{
    content:""; position:absolute; right:8px; top:50%; z-index:2; pointer-events:none;
    width:250px; height:158px; border:1px solid #2a3040; border-radius:10px;
    background-color:#0a0a0c;
    background-image:
      repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 4px),
      var(--film, none);
    background-size:100% 300%, cover;
    background-position:0 0, 50% 42%;
    opacity:0; transform:translateY(-50%) scale(.94) rotate(-1.2deg);
    transition:opacity .38s ease, transform .5s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 24px 60px -24px rgba(0,0,0,.85); }
  html .flow-step:hover::before, html .svc-card:hover::before{
    opacity:1; transform:translateY(-50%) scale(1) rotate(0deg);
    animation:filmroll 7s ease-in-out infinite; }
  @keyframes filmroll{
    0%{ background-position:0 0, 50% 42%; }
    50%{ background-position:0 150%, 46% 52%; }
    100%{ background-position:0 300%, 50% 42%; } }
  /* the reel: cycle six frames */
  html .flow-step:nth-child(6n+1), html .svc-grid .svc-card:nth-child(6n+1){ --film:url('/art/salma-halftone.png'); }
  html .flow-step:nth-child(6n+2), html .svc-grid .svc-card:nth-child(6n+2){ --film:url('/art/ht-steve.png'); }
  html .flow-step:nth-child(6n+3), html .svc-grid .svc-card:nth-child(6n+3){ --film:url('/art/ht-hussein.png'); }
  html .flow-step:nth-child(6n+4), html .svc-grid .svc-card:nth-child(6n+4){ --film:url('/art/ht-max.png'); }
  html .flow-step:nth-child(6n+5), html .svc-grid .svc-card:nth-child(6n+5){ --film:url('/art/ht-mark.png'); }
  html .flow-step:nth-child(6n+6), html .svc-grid .svc-card:nth-child(6n+6){ --film:url('/art/ht-salma-body.png'); }
  /* title lean-in on hover */
  html .flow-step h3, html .svc-card h3{ transition:transform .45s cubic-bezier(.2,.7,.2,1), color .3s ease; }
  html .flow-step:hover h3, html .svc-card:hover h3{ transform:translateX(12px); }

  /* light theme: newsprint frames, ink borders */
  html[data-theme="light"] .flow-step::before, html[data-theme="light"] .svc-card::before{
    border-color:#101216; filter:invert(1);
    box-shadow:0 24px 50px -26px rgba(16,18,22,.55); }

  /* touch + small screens: no hover art, reclaim the space */
  @media (max-width:900px){
    html .flow-step{ padding:34px 4px; }
    html .svc-card{ padding:30px 4px; }
    html .flow-step::before, html .svc-card::before{ display:none; }
    html .flow-step h3{ font-size:clamp(24px,6.4vw,32px); }
    html .svc-card h3{ font-size:clamp(22px,6vw,28px); }
  }
  @media (hover:none){
    html .flow-step::before, html .svc-card::before{ display:none; }
    html .flow-step{ padding-right:4px; } html .svc-card{ padding-right:4px; }
  }
  @media (prefers-reduced-motion: reduce){
    html .flow-step:hover::before, html .svc-card:hover::before{ animation:none; }
  }

  /* ══════════════════════════════════════════════════════════════════
     INDEX LISTINGS — the >> bullet retires. Benefit lists become an
     oversized editorial index: counter numerals, display-size titles
     rising out of masked lines on scroll, mono descriptions offset.
     ══════════════════════════════════════════════════════════════════ */

  /* retire the >> everywhere it was a bullet or link prefix */
  html .why b::before{ content:none; }
  html .svc-card .go::before{ content:none; }
  html .flow-step:hover h3::after{ content:none; }
  html[data-theme="light"] .show-p.act h3::before{ content:none; }
  .show-p.act h3::before{ content:none !important; }
  .cine-cap::before{ content:none; }

  /* active pillar gets a growing ink/blue underline instead */
  .show-p h3{ position:relative; display:inline-block; }
  .show-p h3::after{ content:""; position:absolute; left:0; bottom:-8px; height:2px; width:0;
    background:var(--cyan); transition:width .6s cubic-bezier(.2,.7,.2,1); }
  .show-p.act h3::after{ width:100%; }
  html[data-theme="light"] .show-p h3::after{ background:var(--blue); }

  /* the oversized index */
  html .whys{ display:block; margin-top:54px; counter-reset:whyidx; }
  html .why, html .paper-x .why{ display:grid; grid-template-columns:120px 1fr;
    gap:10px 36px; align-items:start; border:0; border-top:1px solid #242c3f;
    padding:38px 4px 40px; position:relative; background:none; }
  html .whys .why:last-child{ border-bottom:1px solid #242c3f; }
  html .why:nth-child(1), html .why:nth-child(2){ border-top:1px solid #242c3f; }
  html .why:nth-child(2){ border-top:0; }
  html .whys .why:nth-child(2){ border-top:1px solid #242c3f; }
  html .why::before{ counter-increment:whyidx; content:counter(whyidx, decimal-leading-zero);
    font-family:"Clash Display",sans-serif; font-weight:600; font-size:clamp(40px,4.6vw,64px);
    line-height:1; color:transparent; -webkit-text-stroke:1px rgba(120,150,210,.35);
    padding-top:4px;
    opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  html .whys.in .why::before{ opacity:1; transform:none; }
  html .why > div{ display:grid; grid-template-columns:1fr minmax(220px,340px); gap:10px 48px; align-items:baseline; }
  html .why b{ display:block; overflow:hidden; text-transform:none; letter-spacing:-.025em;
    font-family:"Clash Display",sans-serif; font-weight:600;
    font-size:clamp(26px,3.4vw,46px); line-height:1.06; padding-bottom:.08em; }
  html .why b .wl{ display:inline-block; transform:translateY(115%);
    transition:transform .8s cubic-bezier(.16,.8,.26,1); }
  html .whys.in .why b .wl{ transform:none; }
  html .why span{ font-size:14px; line-height:1.7;
    color:#9aa0aa; margin-top:0; max-width:40ch;
    opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  html .whys.in .why span{ opacity:1; transform:none; }
  /* stagger the rows */
  html .whys .why:nth-child(1)::before, html .whys .why:nth-child(1) b .wl, html .whys .why:nth-child(1) span{ transition-delay:.05s; }
  html .whys .why:nth-child(2)::before, html .whys .why:nth-child(2) b .wl, html .whys .why:nth-child(2) span{ transition-delay:.16s; }
  html .whys .why:nth-child(3)::before, html .whys .why:nth-child(3) b .wl, html .whys .why:nth-child(3) span{ transition-delay:.27s; }
  html .whys .why:nth-child(4)::before, html .whys .why:nth-child(4) b .wl, html .whys .why:nth-child(4) span{ transition-delay:.38s; }
  html .whys .why:nth-child(5)::before, html .whys .why:nth-child(5) b .wl, html .whys .why:nth-child(5) span{ transition-delay:.49s; }
  html .whys .why:nth-child(6)::before, html .whys .why:nth-child(6) b .wl, html .whys .why:nth-child(6) span{ transition-delay:.6s; }
  /* hover: numeral fills */
  html .why:hover::before{ color:var(--cyan); -webkit-text-stroke:0; }
  /* light register */
  html[data-theme="light"] .why{ border-color:#d0d1cc; background:none; box-shadow:none; }
  html[data-theme="light"] .whys .why:last-child{ border-bottom:1px solid #d0d1cc; }
  html[data-theme="light"] .whys .why:nth-child(2){ border-top:1px solid #d0d1cc; }
  html[data-theme="light"] .why::before{ -webkit-text-stroke:1px rgba(16,18,22,.3); }
  html[data-theme="light"] .why:hover::before{ color:var(--blue); -webkit-text-stroke:0; }
  html[data-theme="light"] .why b{ color:#101216; }
  html[data-theme="light"] .why span{ color:#63666b; }
  @media (max-width:860px){
    html .why{ grid-template-columns:64px 1fr; padding:30px 4px 32px; }
    html .why::before{ font-size:34px; }
    html .why > div{ grid-template-columns:1fr; gap:12px; }
    html .why b{ font-size:clamp(23px,6.4vw,30px); }
  }
  @media (prefers-reduced-motion: reduce){
    html .why::before, html .why b .wl, html .why span{ transition:none; opacity:1; transform:none; }
  }

  /* the title line is a span too — shield it from the desc-span rules */
  html .why b .wl, html[data-theme="light"] .why b .wl{
    font:inherit; letter-spacing:inherit; color:inherit; margin:0; max-width:none;
    opacity:1; line-height:inherit; }

  /* ══════════════════════════════════════════════════════════════════
     READING COMFORT — bigger mono body, looser leading in dark.
     (Light keeps its own colors: attribute selectors outrank these.)
     ══════════════════════════════════════════════════════════════════ */
  html .flow-step p, html .faq-item .ans, html .svc-card p,
  html .am-feat p, html .iso-col p, html .cine-feat p,
  html .show-p .ptag, html .why > div > span{
    font-size:13.5px; line-height:1.78; letter-spacing:.005em; }
  html .marq a{ font-size:14px; }
  html .am-s{ font-size:10px; }
  /* if WebGL is unavailable the hero keeps a dark stage in any theme */
  body.nogl .hero{ background:#0b0d13; }

  /* ══════════════════════════════════════════════════════════════════
     SUB-PAGE DRAMA — checkmark prose retires; ledger lists, giant
     ghost words behind page heroes, crop marks, display headlines.
     ══════════════════════════════════════════════════════════════════ */

  /* ── prose: checkmark list → numbered ledger ──────────────────────── */
  html .prose{ max-width:860px; }
  html .prose ul{ counter-reset:pli; margin-top:26px; gap:0; }
  html .prose li{ counter-increment:pli; display:grid; grid-template-columns:56px 1fr;
    gap:24px; align-items:baseline; padding:17px 4px; border-top:1px solid #242c3f;
    font-size:16px; line-height:1.62; color:#c9d0dd; }
  html .prose li:last-child{ border-bottom:1px solid #242c3f; }
  html .prose li::before{ content:counter(pli, decimal-leading-zero);
    font-family:"Space Mono",monospace; font-size:12.5px; letter-spacing:.08em;
    color:var(--cyan); }
  html .prose li svg{ display:none; }
  html .prose li:hover{ background:rgba(94,146,255,.04); }
  html .prose h3{ font-family:"Clash Display",sans-serif; font-size:clamp(22px,2.8vw,32px);
    letter-spacing:-.02em; margin-top:52px; }
  html .prose p{ font-size:16.5px; line-height:1.75; }
  html[data-theme="light"] .prose li{ border-color:#d0d1cc; color:#2c2f34; }
  html[data-theme="light"] .prose li:last-child{ border-color:#d0d1cc; }
  html[data-theme="light"] .prose li::before{ color:var(--blue); }
  html[data-theme="light"] .prose li:hover{ background:rgba(16,18,22,.035); }

  /* ── page heroes: display scale + ghost word + crop marks ─────────── */
  html .phero{ padding-top:23vh; padding-bottom:11vh; overflow:hidden; }
  html .phero h1{ font-size:clamp(38px,6.6vw,86px); max-width:15ch; position:relative; z-index:1; }
  html .phero .lead{ position:relative; z-index:1; font-size:clamp(16px,2.5vw,21px); max-width:52ch; }
  html .phero .kicker{ position:relative; z-index:1; }
  html .phero .pcta{ position:relative; z-index:1; }
  .ph-ghost{ position:absolute; right:-3vw; top:-4vh; z-index:0; pointer-events:none; user-select:none;
    font-family:"Clash Display",sans-serif; font-weight:600; line-height:.82; letter-spacing:-.05em;
    font-size:clamp(130px,24vw,330px); color:transparent;
    -webkit-text-stroke:1px rgba(120,150,210,.14);
    opacity:0; transform:translateY(30px);
    animation:ghostin 1.2s .25s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes ghostin{ to{ opacity:1; transform:none } }
  html[data-theme="light"] .ph-ghost{ -webkit-text-stroke:1px rgba(16,18,22,.12); }
  /* crop marks on the page frame */
  .phero .wrap::before, .phero .wrap::after{ content:""; position:absolute; width:26px; height:26px;
    border:1.5px solid rgba(120,150,210,.3); z-index:1; }
  .phero .wrap::before{ left:-4px; top:-34px; border-right:0; border-bottom:0; }
  .phero .wrap::after{ right:-4px; bottom:-18px; border-left:0; border-top:0; }
  html[data-theme="light"] .phero .wrap::before,
  html[data-theme="light"] .phero .wrap::after{ border-color:rgba(16,18,22,.3); }

  /* ── tool status rows: ledger register ────────────────────────────── */
  html .tools{ max-width:760px; }
  html .tool{ background:none; border:0; border-top:1px solid #242c3f; border-radius:0;
    padding:18px 4px; }
  html .tools .tool:last-child{ border-bottom:1px solid #242c3f; }
  html .tool .tn{ font-family:"Clash Display",sans-serif; font-size:19px; letter-spacing:-.015em; }
  html .badge-st{ font-family:"Space Mono",monospace; border-radius:4px; }
  html[data-theme="light"] .tool{ border-color:#d0d1cc; background:none; box-shadow:none; }
  html[data-theme="light"] .tools .tool:last-child{ border-color:#d0d1cc; }

  @media (max-width:720px){
    .ph-ghost{ font-size:clamp(90px,30vw,160px); right:-6vw; top:-2vh; }
    html .prose li{ grid-template-columns:40px 1fr; gap:14px; }
  }
  @media (prefers-reduced-motion: reduce){ .ph-ghost{ animation:none; opacity:1; transform:none; } }

  /* ── Small headings hand off to Satoshi ──────────────────────────────
     Clash Display is a display face; under ~24px its joins tighten and it
     reads stiff. Max's brand spec draws the handoff line there, so every
     sub-24px heading is Satoshi 600 with heading tracking. Clash keeps the
     display sizes, which is where it earns its keep. */
  html .step h3, html .flow-step h3, html .p-head h3, html .consult h3,
  html .tool .tn, html .prose h3, html .svc-card h3, html .lead-modal h3 {
    font-family:"Satoshi", ui-sans-serif, system-ui, sans-serif;
    font-weight:600; letter-spacing:-.015em; word-spacing:normal; }

  /* ── Touch targets ───────────────────────────────────────────────────
     On touch widths every standalone link gets a 40px minimum hit area.
     Padding, not margin, so the target grows without moving the layout:
     the text sits where it always did, the tappable box is just bigger.
     Inline links inside a sentence are deliberately excluded, a 40px box
     around a word mid-paragraph would collide with its neighbours. */
  @media (max-width:760px) and (pointer:coarse), (max-width:760px){
    .pick, .p-hub, .foot-col a, .svc-card .go, .hero-links a, .marq a, .cta-note a {
      min-height:40px; display:inline-flex; align-items:center; }
    .foot-col a{ margin-bottom:2px; }
  }