/* ============================================================
   STASIS v2 — shared design system (dark ground, one accent)
   ============================================================ */

:root{
  --void:#050A0C;        /* ice-tinted near-black ground */
  --void-2:#0A1417;      /* alternate dark section */
  --slate:#0E1A1E;       /* raised surface */
  --bone:#EEF2F4;        /* primary ink */
  --ash:#7F8C96;         /* secondary ink */
  --edge:rgba(238,242,244,.12);
  --ice:#7FD9E8;  --ice-deep:#2E7F91;  --ice-hover:#9FE4F0;
  --amber:#E8A33D;
  --paper:#F1F4F6; --paper-ink:#0B1214; --paper-ash:#5A6573; --paper-edge:rgba(11,18,20,.14); --paper-ice:#177A8C;

  --ff-display:'Archivo',system-ui,sans-serif;
  --ff-body:'Inter Tight',system-ui,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;
  --ff-pixel:var(--ff-mono);
  --ff-elegant:Georgia,serif;

  --gut:clamp(20px,4vw,40px);
  --maxw:1200px; --narrow:880px;
  --pill:999px; --r-card:20px; --r-sm:12px;
  --nav-h:64px;
  --sec:clamp(80px,11vw,160px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:dark }
html.reduced{ scroll-behavior:auto }
[id]{ scroll-margin-top:calc(var(--nav-h) + 12px) }
a,button,[role="button"],input,select,textarea{ touch-action:manipulation; -webkit-tap-highlight-color:transparent }
:focus-visible{ outline:2px solid var(--ice); outline-offset:3px; border-radius:4px }
:focus:not(:focus-visible){ outline:none }
.skip{ position:absolute; left:16px; top:-120px; z-index:200; padding:10px 16px; background:var(--ice); color:#062A30; border-radius:var(--pill); font-weight:600; font-size:14px; text-decoration:none }
.skip:focus{ top:12px }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
body{
  margin:0; background:var(--void); color:var(--bone);
  font-family:var(--ff-body); font-weight:400; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,video,canvas{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }
::selection{ background:var(--ice); color:var(--void) }

.container{ width:min(100% - 2*var(--gut), var(--maxw)); margin-inline:auto }
.narrow{ width:min(100% - 2*var(--gut), var(--narrow)); margin-inline:auto }
.section{ padding:var(--sec) 0; position:relative }
main > .section + .section::before,main > .finale::before{ content:""; position:absolute; left:50%; top:0; width:min(100% - 2 * var(--gut), var(--maxw)); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--edge) 12%,var(--edge) 88%,transparent); pointer-events:none }
.section.tight{ padding:calc(var(--sec)*.6) 0 }
.dark-2{ background:var(--void-2) }
.dim{ color:var(--ash) }

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--ff-display); margin:0; font-weight:400; letter-spacing:-.03em; text-wrap:balance }
h1{ font-size:clamp(44px,7.6vw,108px); line-height:.96; letter-spacing:-.04em; max-width:12ch }
h2{ font-size:clamp(34px,4.8vw,64px); line-height:1.02 }
h3{ font-size:clamp(20px,2vw,26px); letter-spacing:-.015em; line-height:1.15 }
.h-big{ font-weight:300; font-size:clamp(40px,6.4vw,92px); line-height:.98; letter-spacing:-.04em }
.lede{ font-size:clamp(18px,1.55vw,23px); line-height:1.45; color:var(--ash); max-width:52ch; margin:0 }
.label{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ice); margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.label::before{ content:""; width:22px; height:1px; background:var(--ice-deep) }
.footnote{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.02em; color:var(--ash); line-height:1.6; max-width:70ch; margin:26px 0 0 }
.cap{ font-size:16px; line-height:1.5; color:var(--ash); margin:0 }
.cap b{ color:var(--bone); font-weight:500 }
.section-head{ display:grid; gap:14px; margin-bottom:clamp(32px,4.5vw,56px) }
.section-head h2{ max-width:18ch }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-display); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 22px; border-radius:var(--pill); border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .25s,border-color .25s,transform .25s,color .25s;
}
.btn-fill{ background:var(--ice); border-color:var(--ice); color:var(--void) }
.btn-fill:hover{ background:var(--ice-hover); border-color:var(--ice-hover); transform:translateY(-1px) }
.btn-ghost{ background:transparent; border-color:var(--edge); color:var(--bone) }
.btn-ghost:hover{ border-color:var(--ice); background:rgba(127,217,232,.08); transform:translateY(-1px) }
.btn-sm{ padding:10px 16px; font-size:12px }
.btn-lg{ padding:18px 30px; font-size:14px }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 var(--gut); transition:background .4s,border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(5,10,12,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--edge) }
.wordmark{ display:inline-flex; align-items:center; gap:2px; font-family:'Jost',var(--ff-display); font-weight:400; font-size:19px; letter-spacing:.2em; text-transform:uppercase; line-height:1; color:var(--bone); padding:11px 0; margin:-11px 0 }
.wordmark img{ height:22px; width:auto; transform:translateY(-1px) }
footer .wordmark{ font-size:14px } footer .wordmark img{ height:16px }
.nav-links{ display:flex; gap:28px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ash) }
.nav-links a,.nav-links button{ appearance:none; background:none; border:0; padding:12px 2px; margin:-12px -2px; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; transition:color .2s }
.nav-links a:hover,.nav-links button:hover,.nav-links a[aria-current]{ color:var(--bone) }
.nav-links .only-drawer{ display:none }
.nav-actions{ display:flex; align-items:center; gap:10px }
.nav-toggle{ display:none; appearance:none; background:transparent; border:1px solid var(--edge); border-radius:var(--pill); width:42px; height:42px; place-items:center; cursor:pointer }
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--bone); margin:2.5px auto; transition:transform .3s,opacity .3s }
.nav-backdrop{ position:fixed; inset:0; background:rgba(5,10,12,.6); opacity:0; pointer-events:none; transition:opacity .3s; z-index:40 }
.nav-backdrop.is-open{ opacity:1; pointer-events:auto }
@media (max-width:860px){
  .nav-toggle{ display:grid }
  .nav-links{
    position:fixed; top:var(--nav-h); right:var(--gut); left:var(--gut); z-index:45;
    flex-direction:column; gap:0; background:var(--slate); border:1px solid var(--edge); border-radius:var(--r-card);
    padding:8px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .25s,transform .25s;
  }
  .nav-links.is-open{ opacity:1; transform:none; pointer-events:auto }
  .nav-links a,.nav-links button{ padding:14px 16px; border-radius:var(--r-sm); font-size:13px; text-align:left; background:none; border:0; color:var(--bone) }
  .nav-links .only-drawer{ display:block }
  .nav-actions .btn{ display:none }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(4px) rotate(45deg) }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0 }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-4px) rotate(-45deg) }
}

/* ---------- hero (copy overlaid on the sequence) ---------- */
.hero{ position:relative }
.hero-track{ height:320vh; position:relative }
.hero-sticky{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; background:var(--void) }
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:screen; opacity:0; transition:opacity .6s }
#heroCanvas.ready{ opacity:1 }
.hero-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; transition:opacity .6s }
#heroCanvas.ready + .hero-poster{ opacity:0 }
.hero-intro{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; background:#000; transition:opacity .3s ease }
.hero-track.intro-done .hero-intro{ opacity:0; pointer-events:none; transition-duration:.9s }
html.reduced .hero-intro{ display:none }
.hero-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(70% 62% at 50% 34%, rgba(5,10,12,.86) 0%, rgba(5,10,12,.55) 48%, rgba(5,10,12,0) 100%) }
.hero-copy{ position:absolute; left:0; right:0; top:calc(var(--nav-h) + 7vh); z-index:4; text-align:center; display:grid; justify-items:center; gap:22px; will-change:opacity,transform }
.hero-copy h1{ max-width:20ch }
.hero-copy h1 .rotor{ margin-top:.4em; font-size:.52em; line-height:1.2; min-height:1.2em }
.rotor{ display:block } .rotor-word{ display:inline-block; transition:opacity .42s ease, transform .42s ease }
.rotor-word.out{ opacity:0; transform:translateY(-.22em) } .rotor-word.in{ opacity:0; transform:translateY(.22em); transition:none }
html.reduced .rotor-word{ transition:none }
.hero-copy .lede{ text-align:center; max-width:60ch; text-wrap:balance; color:#B9C4CC }
.hero-copy .cta-row{ justify-content:center }
.yc{ display:inline-flex; align-items:center; gap:11px; font-family:var(--ff-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone); padding:9px 16px 9px 9px; border:1px solid var(--edge); border-radius:var(--pill); background:rgba(5,10,12,.45); backdrop-filter:blur(8px) }
.yc svg{ width:22px; height:22px; border-radius:4px }
.yc{ position:relative; overflow:hidden }
.yc::after{ content:""; position:absolute; top:-50%; bottom:-50%; left:0; width:34%; pointer-events:none; mix-blend-mode:screen; transform:translateX(-180%) skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.08) 70%,rgba(255,255,255,0) 100%) }
.yc.in::after{ animation:yc-glint 1.1s cubic-bezier(.45,0,.2,1) 1s 1 both }
@keyframes yc-glint{ to{ transform:translateX(480%) skewX(-20deg) } }
html.reduced .yc::after{ display:none }
.hero-chapters{ position:absolute; left:var(--gut); top:50%; transform:translateY(-50%); display:grid; z-index:4; max-width:min(640px,46vw) }
.hero-chapter{ grid-area:1/1; opacity:0; transform:translateY(14px); transition:opacity .45s,transform .45s; pointer-events:none }
.hero-chapter.on{ opacity:1; transform:none }
.hero-chapter .t{ font-family:var(--ff-display); font-weight:400; margin:0 0 18px; font-size:clamp(34px,4.6vw,68px); line-height:1.0; letter-spacing:-.035em; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.6) }
.hero-chapter .d{ margin:0 0 20px; font-size:clamp(16px,1.35vw,20px); line-height:1.5; color:#D9E1E6; max-width:40ch; text-shadow:0 1px 12px rgba(0,0,0,.6) }
.hero-chapter .chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.hero-chapter .chips li{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone); padding:8px 12px; border:1px solid rgba(238,242,244,.22); border-radius:var(--pill); background:rgba(5,10,12,.45); backdrop-filter:blur(8px) }
.hero-chapter .chips li::before{ content:"●"; color:var(--ice); font-size:7px; vertical-align:2px; margin-right:8px }
.hero-index{ position:absolute; right:var(--gut); bottom:clamp(32px,8vh,84px); margin:0; padding:0; list-style:none; display:grid; gap:9px; z-index:4; font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(238,242,244,.38); text-align:right; opacity:0; visibility:hidden; transition:opacity .35s ease,visibility .35s ease }
.hero-track.chapters-active .hero-index{ opacity:1; visibility:visible }
.hero-index li{ display:flex; justify-content:flex-end; align-items:center; gap:10px; transition:color .3s }
.hero-index li::after{ content:""; width:28px; height:1px; background:currentColor; transform:scaleX(.5); transform-origin:right; transition:transform .3s,background .3s }
.hero-index li.on{ color:var(--bone) } .hero-index li.on::after{ transform:none; background:var(--ice) }
.hero-sticky::after{ content:""; position:absolute; inset:0 30% 0 0; background:linear-gradient(90deg,rgba(5,10,12,.9) 0%,rgba(5,10,12,.6) 45%,rgba(5,10,12,0) 100%); pointer-events:none; z-index:3; opacity:0; transition:opacity .5s }
.hero-track.deep .hero-sticky::after{ opacity:1 }
.scroll-hint{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); z-index:4; transition:opacity .4s }
.hero-track.deep .scroll-hint{ opacity:0 }
@media (max-width:720px){ .hero-copy{ top:calc(var(--nav-h) + 4vh); gap:16px } .hero-index{ display:none } .hero-chapters{ top:auto; bottom:28px; right:var(--gut); transform:none; max-width:none } .hero-chapter .t{ font-size:32px; margin-bottom:12px } .hero-chapter .d{ font-size:15px; margin-bottom:14px } .hero-chapter .chips li{ font-size:10.5px; padding:6px 10px } .hero-sticky::after{ inset:auto 0 0 0; height:72%; background:linear-gradient(180deg,rgba(5,10,12,0) 0%,rgba(5,10,12,.6) 40%,rgba(5,10,12,.94) 100%) } }
html.reduced .hero-track{ height:auto } html.reduced .hero-sticky{ position:relative; height:min(100vh,760px) }
html.reduced .hero-chapters{ position:static; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:none; padding:24px var(--gut) } html.reduced .hero-index{ display:none }
html.reduced .hero-chapter{ grid-area:auto; opacity:1; transform:none }

/* ---------- orbit: live 3D glasses + word reveal ---------- */
.orbit-track{ height:260vh; position:relative; background:radial-gradient(ellipse 80% 60% at 50% 50%, #0c1418 0%, var(--void) 70%) }
.orbit-sticky{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden }
.orbit-stage{ position:absolute; inset:0 } .orbit-stage canvas{ display:block }
.orbit-poster{ position:absolute; left:50%; top:50%; width:min(90vw,1100px); height:auto; transform:translate(-50%,-50%); opacity:0; pointer-events:none; mix-blend-mode:screen; transition:opacity .6s }
.orbit-track.static .orbit-poster{ opacity:1 } .orbit-track.static .orbit-stage{ display:none }
.orbit-sticky::before{ content:""; position:absolute; inset:0 45% 0 0; background:linear-gradient(90deg,rgba(5,10,12,.78) 0%,rgba(5,10,12,.45) 60%,rgba(5,10,12,0) 100%); z-index:1; pointer-events:none }
.orbit-copy{ position:absolute; left:var(--gut); top:50%; transform:translateY(-50%); z-index:2; max-width:min(600px,46vw); pointer-events:none }
.orbit-beats{ display:grid; min-height:13em }
.orbit-beat{ grid-area:1/1; opacity:0; transform:translateY(14px); transition:opacity .45s,transform .45s }
.orbit-beat.on{ opacity:1; transform:none }
.orbit-beat .t{ font-family:var(--ff-display); font-weight:400; font-size:clamp(34px,4.1vw,60px); line-height:1; letter-spacing:-.035em; margin:0 0 16px; color:#fff; white-space:nowrap; max-width:none }
.orbit-beat p{ margin:0; font-size:clamp(17px,1.4vw,21px); line-height:1.4; color:#B9C4CC; max-width:30ch }
.orbit-beat .facts{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:0; max-width:36ch }
.orbit-beat .facts li{ padding:9px 0 9px 18px; border-top:1px solid rgba(238,242,244,.14); font-size:clamp(14px,1.05vw,16px); color:#D9E1E6; position:relative } .orbit-beat .facts li::before{ content:""; position:absolute; left:0; top:17px; width:6px; height:6px; border-radius:50%; background:var(--ice) } .orbit-beat .facts li:last-child{ border-bottom:1px solid rgba(238,242,244,.14) }
.orbit-index{ list-style:none; margin:28px 0 0; padding:0; display:flex; gap:8px }
.orbit-index li{ width:44px; height:2px; background:rgba(238,242,244,.22); transform:scaleX(.64); transform-origin:left; transition:background .3s,transform .3s }
.orbit-index li.on{ background:var(--ice); transform:none }
html.reduced .orbit-beats{ gap:24px } html.reduced .orbit-beat{ grid-area:auto; opacity:1; transform:none } html.reduced .orbit-index{ display:none }
@media (max-width:900px){ .orbit-beat .facts{ margin-top:12px } .orbit-beat .facts li{ padding:7px 0 7px 16px; font-size:13.5px } .orbit-beat .facts li::before{ top:14px } .orbit-sticky::before{ inset:45% 0 0 0; background:linear-gradient(180deg,rgba(5,10,12,0) 0%,rgba(5,10,12,.85) 100%) } .orbit-copy{ top:auto; bottom:clamp(28px,7vh,64px); right:var(--gut); transform:none; max-width:none } .orbit-beats{ min-height:7.5em } .orbit-beat .t{ font-family:var(--ff-display); font-weight:400; font-size:min(32px,9.2vw) } .orbit-beat p{ font-size:16px } }
html.reduced .orbit-track{ height:auto; padding:var(--sec) 0 } html.reduced .orbit-sticky{ position:static; height:auto; min-height:70vh }

/* ---------- statement + proof ---------- */
.statement{ text-align:center }
#proof{ padding-top:calc(var(--sec) * .45) }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--edge); border-left:1px solid var(--edge); margin-top:0 }
.stat{ position:relative; padding:clamp(22px,3vw,40px); border-right:1px solid var(--edge); border-bottom:1px solid var(--edge); opacity:0; transform:translateY(28px) scale(.97); transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms),transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms) }
.stat::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--ice); transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i) * 90ms); opacity:.7 }
.stats.play .stat{ opacity:1; transform:none } .stats.play .stat::after{ transform:scaleX(1) }
.stat .n em{ font-style:normal } .stat .cnt{ font-weight:inherit; font-variant-numeric:tabular-nums }
html.reduced .stat{ opacity:1; transform:none } html.reduced .stat::after{ transform:scaleX(1) }
.stat .n{ font-family:var(--ff-display); font-weight:300; font-size:clamp(40px,5.2vw,76px); line-height:1; letter-spacing:-.04em; color:var(--ice); display:block; margin-bottom:12px }
.stat .n small{ font-size:.55em; letter-spacing:-.02em }
.stat .t{ margin:0; color:var(--bone); font-size:16px }
@media (max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr) } }

/* ---------- comparison ---------- */
.cmp-wrap{ overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--gut)); padding:0 var(--gut) } .cmp-wrap::-webkit-scrollbar{ display:none }
.cmp{ width:100%; min-width:640px; border-collapse:separate; border-spacing:0; font-size:15px }
.cmp th,.cmp td{ padding:16px clamp(12px,1.6vw,22px); border-bottom:1px solid var(--edge); text-align:center; vertical-align:middle }
.cmp thead th{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); padding-top:18px; padding-bottom:16px }
.cmp th[scope="row"]{ text-align:left; font-weight:400; color:var(--bone); width:34% }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:0 }
.cmp .you{ background:rgba(127,217,232,.06) } .cmp thead th.you{ color:var(--ice); border-radius:16px 16px 0 0; box-shadow:inset 0 1px 0 rgba(127,217,232,.18) } .cmp tbody tr:last-child td.you{ border-radius:0 0 16px 16px; padding-bottom:20px }
.cmp .y{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(127,217,232,.16); color:var(--ice) } .cmp .y svg{ width:14px; height:14px } .cmp .y.t{ width:auto; height:auto; padding:6px 12px; border-radius:999px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em }
.cmp-sub{ display:block; font-family:var(--ff-mono); font-size:10px; letter-spacing:.06em; color:var(--ice); margin-top:5px }
.cmp .n{ color:var(--ash); opacity:.55 } .cmp .t{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--ash) } .cmp td.you .t{ color:var(--bone) }
@media (max-width:600px){ .cmp{ font-size:12.5px; min-width:0 } .cmp th,.cmp td{ padding:11px 4px } .cmp th[scope="row"]{ width:33%; padding-left:0; font-size:12.5px; line-height:1.25 } .cmp thead th{ font-size:8.5px; letter-spacing:.08em; white-space:normal; line-height:1.25; padding-top:14px; padding-bottom:12px } .cmp .y{ width:22px; height:22px } .cmp .y svg{ width:12px; height:12px } .cmp .t{ font-size:9.5px; letter-spacing:.02em } .cmp-sub{ display:none } }

/* ---------- app carousel (five screens) ---------- */
:root{ --ff-serif:'Instrument Serif',Georgia,'Times New Roman',serif }
.app-sec{ overflow:hidden }
.app-sec .section-head{ margin-bottom:clamp(20px,3vw,36px) }
.app-carousel{ position:relative }
.car-stage{ position:relative; height:700px; perspective:1600px; perspective-origin:50% 42%; overflow:hidden; touch-action:pan-y; cursor:grab; outline-offset:-3px }
.car-stage.drag{ cursor:grabbing }
/* Ring in real 3D: side screens turn toward the centre and sit further back; the whole ring sways toward the pointer (rotate), every screen drifts on its own float loop (translate) */
.car-stage .phone{ position:absolute; left:50%; top:30px; margin-left:-150px; transform:translateX(calc(var(--o) * var(--step))) translateZ(calc(var(--d) * -150px)) rotateY(calc(var(--o) * -14deg)) rotateX(calc(var(--my,0) * -3deg)) translateY(calc(var(--d) * 10px)) scale(calc(var(--ps) * (1 - var(--d) * .07))); rotate:y calc(var(--mx,0) * 6deg); opacity:calc(1 - var(--d) * .26); z-index:calc(10 - var(--d)); transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .65s,rotate .8s ease-out; will-change:transform; animation:ph-float calc(5.6s + var(--d) * .8s) ease-in-out infinite; animation-delay:calc(var(--k,0) * -1.37s) }
.phone[data-i="1"]{ --k:1 } .phone[data-i="2"]{ --k:2 } .phone[data-i="3"]{ --k:3 } .phone[data-i="4"]{ --k:4 }
@keyframes ph-float{ 0%,100%{ translate:0 -7px } 50%{ translate:0 7px } }
@keyframes ph-shadow{ 0%,100%{ transform:scale(.86,.8); opacity:.5 } 50%{ transform:scale(1.06,1.08); opacity:.9 } }
.phone::after{ content:""; position:absolute; left:6%; right:6%; top:calc(100% + 16px); height:36px; border-radius:50%; background:radial-gradient(ellipse at center,rgba(0,0,0,.9),rgba(0,0,0,0) 68%); filter:blur(7px); pointer-events:none; animation:ph-shadow calc(5.6s + var(--d) * .8s) ease-in-out infinite; animation-delay:calc(var(--k,0) * -1.37s) }
.phone::before{ content:""; position:absolute; left:-3px; top:118px; width:3px; height:30px; border-radius:2px 0 0 2px; background:linear-gradient(90deg,#3a444b,#1a2126); box-shadow:0 44px 0 #262e34,0 88px 0 #262e34,306px -18px 0 #262e34 }
.phone-screen::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5; background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 26%,rgba(255,255,255,0) 44%); background-size:200% 100%; background-position:calc(50% + var(--mx,0) * -40%) 0; transition:background-position .8s ease-out }
.car-stage::before{ content:""; position:absolute; left:50%; bottom:-70px; width:min(900px,120%); height:220px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse at center,rgba(127,217,232,.13),rgba(127,217,232,.04) 45%,rgba(127,217,232,0) 70%); filter:blur(14px); pointer-events:none; z-index:0 }
html.reduced .car-stage .phone,html.reduced .phone::after{ animation:none } html.reduced .car-stage .phone{ rotate:none }
.car-stage .phone.jump{ transition:none }
.car-stage .phone:not(.on){ cursor:pointer }
.app-carousel{ --step:330px; --ps:1 }
.car-btn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--edge); background:rgba(5,10,12,.62); color:var(--bone); backdrop-filter:blur(8px); cursor:pointer; display:grid; place-items:center; padding:0; transition:background .25s,border-color .25s }
.car-btn svg{ width:18px; height:18px } .car-btn:hover{ border-color:var(--ice); background:rgba(127,217,232,.12) }
.car-nav{ display:flex; align-items:center; gap:18px }
@media (hover:none){ .car-btn{ display:none } }
.car-foot{ display:grid; justify-items:center; gap:16px; text-align:center }
.car-cap{ margin:0; max-width:44ch; font-size:clamp(16px,1.3vw,19px); line-height:1.5; color:var(--ash); min-height:3em; transition:opacity .3s } .car-cap b{ color:var(--bone); font-weight:500 } .car-cap.fade{ opacity:0 }
.car-dots{ list-style:none; margin:0; padding:0; display:flex; gap:4px } .car-dots button{ position:relative; width:32px; height:28px; border:0; background:none; cursor:pointer; padding:0 } .car-dots button::after{ content:""; position:absolute; left:2px; right:2px; top:50%; height:3px; margin-top:-1.5px; border-radius:2px; background:rgba(238,242,244,.2); transition:background .3s } .car-dots button.on::after{ background:var(--ice) }
.car-dots li{ display:flex; align-items:center; height:24px }
/* ---- device ---- */
.phone{ --o:0; --d:0; --tint:#143B46; --ph-bg:#07090C; --ph-card:rgba(255,255,255,.065); --ph-edge:rgba(255,255,255,.09); --ph-ink:#F2F4F5; --ph-ash:#9AA3AB; --ph-accent:#7FD9E8; --ph-warm:#E0A57A;
  width:300px; height:620px; border-radius:44px; background:#020405; color:var(--ph-ink); font-family:var(--ff-body);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(238,242,244,.22), 0 0 0 3px #0c1114, 0 0 0 4px rgba(255,255,255,.07), 0 24px 40px -12px rgba(0,0,0,.78), 0 70px 120px -10px rgba(0,0,0,.7) }
.ph-today{ --tint:#14414B } .ph-radar{ --tint:#3D2A22 } .ph-day{ --tint:#2E2146 } .ph-age{ --tint:#0F3D3F } .ph-lens{ --tint:#173E31 }
.phone-screen{ position:absolute; inset:8px; border-radius:37px; overflow:hidden; display:flex; flex-direction:column; gap:10px; padding:16px 16px 14px; background:linear-gradient(180deg,var(--tint) 0%,var(--ph-bg) 46%) }
.ap-ic{ display:inline-grid; place-items:center; width:18px; height:18px; color:var(--ph-ink); flex:none } .ap-ic svg{ width:16px; height:16px } .ap-ic.dim{ color:var(--ph-ash) }
.ap-top{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:500; min-height:22px } .ap-top.ap-home{ margin-bottom:2px }
.ap-logo{ font-family:'Jost',var(--ff-display); font-size:13px; letter-spacing:.3em; font-weight:400 }
.ap-eyebrow{ font-family:var(--ff-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ph-ash) } .ap-good{ color:var(--ph-accent) } .ap-center{ text-align:center; display:block }
.ap-serif{ font-family:var(--ff-serif); font-weight:400; letter-spacing:-.005em }
.ap-h{ margin:0; font-size:24px; line-height:1.12; color:#fff } .ap-p{ margin:0; font-size:12px; line-height:1.5; color:#CBD3D8 } .ap-note{ font-size:10px; line-height:1.45; color:var(--ph-ash); margin:0 }
.ap-sub{ margin:6px 0 0; font-family:var(--ff-body); font-size:14px; font-weight:500 } .ap-sub.tight{ margin:0 }
.ap-pill{ appearance:none; border:0; border-radius:999px; padding:11px 18px; background:#F2F4F5; color:#0B1214; font:600 12px/1 var(--ff-body); align-self:center; margin-top:2px }
.ap-pill-line{ background:transparent; color:var(--ph-ink); border:1px solid rgba(255,255,255,.22); align-self:stretch; padding:12px }
.ap-card{ background:var(--ph-card); border:1px solid var(--ph-edge); border-radius:16px; padding:12px 13px; display:grid; gap:6px }
.ap-row{ display:flex; align-items:center; gap:10px; background:var(--ph-card); border:1px solid var(--ph-edge); border-radius:14px; padding:10px 12px }
.ap-row > div{ display:grid; gap:2px; flex:1 } .ap-row b{ font-size:17px; font-weight:500; letter-spacing:-.01em } .ap-row small{ font-size:10px; color:var(--ph-ash); font-weight:400 }
.ap-chip{ font-style:normal; font-size:10.5px; padding:4px 9px; border-radius:999px; background:rgba(224,165,122,.16); color:var(--ph-warm) }
.ap-between{ display:flex; justify-content:space-between; align-items:center; gap:8px } .ap-between .ap-ic{ width:12px; height:12px; vertical-align:middle } .ap-between .ap-ic svg{ width:11px; height:11px }
.ap-big{ font-size:22px; font-weight:500; letter-spacing:-.02em; line-height:1.1 } .ap-big small{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; margin-left:6px; font-weight:400 }
.ap-axis{ font-size:10px; color:var(--ph-ash) }
/* home: score rings + gauge */
.ap-scores{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; text-align:center }
.ap-score{ position:relative; display:grid; justify-items:center; gap:4px } .ap-score svg{ width:52px; height:52px; transform:rotate(-90deg) }
.ap-score circle{ fill:none; stroke-width:2.2 } .ap-score .bg{ stroke:rgba(255,255,255,.12) } .ap-score .fg{ stroke:#fff; stroke-linecap:round; stroke-dasharray:var(--c); stroke-dashoffset:var(--c); transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1) .2s }
.phone.played .ap-score .fg{ stroke-dashoffset:calc(var(--c) * (1 - var(--v))) }
.ap-score b{ position:absolute; top:16px; font-size:15px; font-weight:500 } .ap-score span{ font-size:10px; color:#CBD3D8 }
.ap-gauge{ position:relative; margin:4px 0 0 } .ap-gauge svg{ width:100%; height:auto; display:block } .ap-gauge path{ fill:none; stroke-width:2.5; stroke-linecap:round } .ap-gauge .bg{ stroke:rgba(255,255,255,.14) }
.ap-gauge .fg{ stroke:#fff; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .3s } .phone.played .ap-gauge .fg{ stroke-dashoffset:18 }
.ap-gauge .pin{ fill:#fff } .ap-gauge-txt{ position:absolute; inset:auto 0 0; text-align:center; display:grid; gap:2px } .ap-gauge-txt b{ font-family:var(--ff-serif); font-size:46px; line-height:1; font-weight:400 }
.ph-today .ap-h{ text-align:center; font-size:30px; margin-top:2px } .ph-today .ap-p{ text-align:center }
/* tab bar */
.ap-tabs{ margin-top:auto; display:flex; align-items:center; gap:6px; padding:6px; background:rgba(255,255,255,.06); border:1px solid var(--ph-edge); border-radius:999px }
.ap-tabs span{ flex:1; display:grid; justify-items:center; gap:3px; padding:6px 4px; border-radius:999px; font-size:9px; color:var(--ph-ash) } .ap-tabs span.on{ background:rgba(255,255,255,.1); color:var(--ph-ink) }
.ap-tabs b{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1) }
/* signs */
.ap-signs{ display:flex; justify-content:space-around; text-align:center; font-size:10.5px; color:var(--ph-ash); margin:4px 0 2px }
.ap-signs span{ display:grid; justify-items:center; gap:7px } .ap-signs i{ width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.14); transition:transform .5s cubic-bezier(.2,.9,.3,1.4),box-shadow .5s }
.ap-signs .s0 i{ background:#4A7BA0 } .ap-signs .s1 i{ background:#8A8F5A } .ap-signs .s2 i{ background:#B7735B } .ap-signs span.on{ color:var(--ph-ink) }
.phone.played .ap-signs span.on i{ transform:scale(1.25); box-shadow:0 0 0 5px rgba(255,255,255,.1) }
.ap-days{ display:flex; justify-content:space-between; font-size:10px; color:var(--ph-ash); padding:0 4px } .ap-days span{ display:grid; justify-items:center; gap:6px } .ap-days i{ width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.14); transform:scale(.6); transition:transform .4s cubic-bezier(.2,.9,.3,1.4) }
.ap-days .d0 i{ background:#4A7BA0 } .ap-days .d1 i{ background:#8A8F5A } .ap-days .d2 i{ background:#B7735B } .phone.played .ap-days i{ transform:none }
.ap-days i{ transition-delay:calc(var(--i,0) * 60ms) }
/* segmented control + toggles */
.ap-seg{ display:flex; justify-content:center; gap:4px; font-size:11px; color:var(--ph-ash) } .ap-seg span{ padding:5px 12px; border-radius:999px } .ap-seg span.on{ background:rgba(255,255,255,.12); color:var(--ph-ink) }
.ap-toggle-row{ justify-content:space-between; font-size:12px; padding:9px 12px }
.ap-toggle{ width:38px; height:22px; border-radius:11px; background:rgba(255,255,255,.14); position:relative; flex:none } .ap-toggle i{ position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .35s } .ap-toggle.on{ background:var(--ph-accent) } .ap-toggle.on i{ transform:translateX(16px) }
.ap-two{ display:grid; grid-template-columns:1fr 1fr; gap:8px } .ap-mini{ position:relative; background:var(--ph-card); border:1px solid var(--ph-edge); border-radius:14px; padding:10px 12px; display:grid; gap:4px } .ap-mini b{ font-size:16px; font-weight:500 } .ap-mini .ap-ic{ position:absolute; right:8px; top:50%; transform:translateY(-50%) }
/* charts */
.ap-chart{ position:relative } .ap-chart svg{ width:calc(100% - 58px); height:112px; display:block; overflow:visible }
.ap-chart .grid line{ stroke:rgba(255,255,255,.1); stroke-width:1; stroke-dasharray:2 3; vector-effect:non-scaling-stroke }
.ap-chart .line{ fill:none; stroke:#fff; stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .2s } .phone.played .ap-chart .line{ stroke-dashoffset:0 }
.ap-day-chart .line{ stroke-dasharray:100; } .ap-day-chart .dots circle{ fill:#fff; opacity:0; transition:opacity .3s calc(.25s + var(--i) * 95ms) } .phone.played .ap-day-chart .dots circle{ opacity:1 }
.ap-age-chart .line{ stroke:var(--ph-accent) } .ap-age-chart .now{ stroke:rgba(255,255,255,.5); stroke-width:1; vector-effect:non-scaling-stroke }
.ap-ylabels{ position:absolute; right:0; top:4px; bottom:30px; display:flex; flex-direction:column; justify-content:space-between; font-size:9px; color:var(--ph-ash); text-align:right; pointer-events:none }
.ap-day-chart .ap-ylabels{ right:0; top:6px; bottom:30px } .ap-age-chart .ap-ylabels{ top:10px; bottom:24px }
.ap-xlabels{ display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:8.5px; color:var(--ph-ash); margin-top:6px } .ap-chart .ap-xlabels{ width:calc(100% - 58px) }
.ap-tag{ position:absolute; left:calc((100% - 58px) * .81); top:-6px; font-size:9px; padding:3px 7px; border-radius:999px; background:#fff; color:#0B1214; font-weight:600; white-space:nowrap; transform:translateX(-50%) scale(0); transition:transform .4s cubic-bezier(.2,.9,.3,1.4) 1.6s } .phone.played .ap-tag{ transform:translateX(-50%) scale(1) }
.ap-slider{ position:relative; height:3px; background:rgba(255,255,255,.14); border-radius:2px; margin:8px 0 4px } .ap-slider::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--ph-accent); border-radius:2px; transition:width 1.2s cubic-bezier(.2,.7,.2,1) .4s } .phone.played .ap-slider::before{ width:24% }
.ap-slider .knob{ position:absolute; top:50%; left:0; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(127,217,232,.35); transform:translate(-50%,-50%); transition:left 1.2s cubic-bezier(.2,.7,.2,1) .4s } .phone.played .ap-slider .knob{ left:24% }
/* today (STASIS-native) */
.ap-frames{ display:flex; align-items:center; gap:10px; background:var(--ph-card); border:1px solid var(--ph-edge); border-radius:16px; padding:8px 12px 8px 6px }
.ap-frames-img{ width:104px; height:auto; flex:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)) } .ap-frames-txt{ display:grid; gap:4px; min-width:0 } .ap-frames-txt .ap-live{ white-space:nowrap } .ap-live{ font-size:11.5px; font-weight:500 } .ap-live::before{ content:"●"; color:var(--ph-accent); font-size:7px; margin-right:6px; vertical-align:2px }
.ap-scoreblock{ display:grid; gap:6px; margin-top:4px }
.ap-scoreline{ display:flex; align-items:baseline; gap:10px } .ap-scoreline b{ font-family:var(--ff-display); font-size:64px; font-weight:500; line-height:.95; letter-spacing:-.05em; font-variant-numeric:tabular-nums } .ap-trend{ font-size:11px; color:var(--ph-accent) }
.ap-scale{ position:relative; height:6px; border-radius:3px; margin-top:6px; background:linear-gradient(90deg,#E0A57A,#9AA3AB 45%,#7FD9E8) }
.ap-scale .mark{ position:absolute; top:50%; left:0; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(7,9,12,.9); transform:translate(-50%,-50%); transition:left 1.4s cubic-bezier(.2,.7,.2,1) .2s } .ph-today.played .ap-scale .mark{ left:82% }
.ap-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px } .ap-tiles > div{ display:grid; gap:4px; background:var(--ph-card); border:1px solid var(--ph-edge); border-radius:14px; padding:10px 10px } .ap-tiles b{ font-size:16px; font-weight:500; letter-spacing:-.01em } .ap-tiles small{ font-size:10px; color:var(--ph-ash); font-weight:400 }
/* strain by hour */
.ap-hours-card{ gap:8px } .ap-hours{ display:grid; grid-template-columns:repeat(16,1fr); gap:3px; height:96px; align-items:end }
.ap-hours i{ display:block; height:calc(var(--v) * 100%); border-radius:3px 3px 2px 2px; transform:scaleY(0); transform-origin:bottom; transition:transform .55s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i) * 45ms) } .phone.played .ap-hours i{ transform:none }
.ap-hours .v0{ background:rgba(127,217,232,.45) } .ap-hours .v1{ background:#7FD9E8 } .ap-hours .v2{ background:#E0A57A }
.ap-xlabels.full{ width:100% }
.ap-legend-row{ display:flex; gap:14px; font-size:10px; color:var(--ph-ash) } .ap-legend-row span::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:-1px } .ap-legend-row .v0::before{ background:rgba(127,217,232,.45) } .ap-legend-row .v1::before{ background:#7FD9E8 } .ap-legend-row .v2::before{ background:#E0A57A }
html.reduced .ap-scale .mark{ left:82% } html.reduced .ap-hours i{ transform:none }
/* lenses (STASIS) */
.ap-lens-hero{ position:relative; margin:2px 0 0 } .ap-glasses{ width:100%; height:auto; display:block }
.ap-glasses .frame *{ fill:none; stroke:rgba(255,255,255,.82); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round } .ap-glasses .bridge{ stroke-width:4.5 } .ap-glasses .keyhole{ stroke-width:1.6; opacity:.7 } .ap-glasses .temple{ stroke-width:3 }
.ap-glasses .base{ fill:rgba(127,217,232,.08) } .ap-glasses .tint{ fill:url(#apTintG); transform:scaleY(0); transform-origin:0 0; transition:transform 1.6s cubic-bezier(.4,0,.2,1) .4s } .ap-glasses .glint{ stroke:rgba(255,255,255,.35); stroke-width:3; stroke-linecap:round; opacity:0; transition:opacity .6s 1.7s }
.phone.played .ap-glasses .tint{ transform:none } .phone.played .ap-glasses .glint{ opacity:1 }
.ap-auto{ position:absolute; right:0; top:-2px; background:rgba(127,217,232,.14); color:var(--ph-accent) }
.ap-tint-card{ gap:8px } .ap-tint-val{ font-family:var(--ff-display); font-size:26px; font-weight:500; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums }
.ap-tint-ticks{ display:flex; gap:3px; height:18px } .ap-tint-ticks i{ flex:1; border-radius:2px; background:rgba(255,255,255,.1); transition:background .25s calc(.4s + var(--i) * 40ms) } .phone.played .ap-tint-ticks i.lit{ background:var(--ph-accent) }
.ph-lens .ap-toggle-row > div{ display:grid; gap:2px } .ph-lens .ap-toggle-row b{ font-size:12px; font-weight:500 } .ph-lens .ap-toggle-row small{ font-size:10px; color:var(--ph-ash) }
.ap-log{ gap:4px } .ap-log .ap-between b{ font-size:15px; font-weight:500 }
.ap-hypno{ width:100%; height:46px; display:block; margin-top:4px }
.ap-hypno rect{ transform:scaleY(0); transform-origin:center; transform-box:fill-box; transition:transform .35s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--i) * 60ms) } .ap-hypno .l0{ fill:#DDF4F8 } .ap-hypno .l1{ fill:#7FD9E8 } .ap-hypno .l2{ fill:#2F8EA1 }
.phone.played .ap-hypno rect{ transform:none }
html.reduced .car-stage .phone{ transition:none } html.reduced .ap-score .fg{ stroke-dashoffset:calc(var(--c) * (1 - var(--v))) } html.reduced .ap-gauge .fg{ stroke-dashoffset:18 } html.reduced .ap-chart .line{ stroke-dashoffset:0 } html.reduced .ap-day-chart .dots circle{ opacity:1 } html.reduced .ap-tag{ transform:translateX(-50%) scale(1) } html.reduced .ap-hypno rect{ transform:none } html.reduced .ap-glasses .tint{ transform:none } html.reduced .ap-tint-ticks i.lit{ background:var(--ph-accent) } html.reduced .ap-slider::before{ width:24% } html.reduced .ap-slider .knob{ left:24% }
@media (max-width:820px){ .app-carousel{ --step:215px; --ps:.76 } .car-stage{ height:500px; perspective:1100px } .car-stage .phone{ top:-66px } .car-cap{ font-size:15px } .app-sec .section-head{ margin-bottom:8px } }

/* ---------- hardware ---------- */
.exploded{ margin:0; position:relative; border-radius:var(--r-card); overflow:hidden; background:#000; border:1px solid var(--edge) }
.exploded video{ width:100%; aspect-ratio:16/9; object-fit:cover }
.exploded-cap{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--edge); background:var(--void) }
.exploded-cap span{ padding:14px 18px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ash); border-left:1px solid var(--edge) }
.exploded-cap span:first-child{ border-left:0 } .exploded-cap span::before{ content:"●"; color:var(--ice); font-size:7px; vertical-align:2px; margin-right:10px }
@media (max-width:720px){ .exploded-cap{ grid-template-columns:1fr } .exploded-cap span{ border-left:0; border-top:1px solid var(--edge); padding:10px 16px } .exploded-cap span:first-child{ border-top:0 } }
.hw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:clamp(28px,4vw,56px) }
.media-card{ margin:0; border-radius:var(--r-card); overflow:hidden; background:var(--slate); border:1px solid var(--edge) }
.media-card video,.media-card img{ width:100%; aspect-ratio:16/9; object-fit:cover }
.media-card figcaption{ padding:18px 20px 22px }
@media (max-width:720px){ .hw-grid{ grid-template-columns:1fr } }

/* horizontal card row */
.card-row{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut); padding:clamp(28px,4vw,48px) var(--gut) 8px; margin:0 calc(-1*var(--gut)); scrollbar-width:none }
.card-row::-webkit-scrollbar{ display:none }
.card-row .card{ flex:0 0 min(78vw,420px); scroll-snap-align:start; border-radius:var(--r-card); overflow:hidden; background:#000; border:1px solid var(--edge) }
.card-row .card img,.card-row .card video{ width:100%; aspect-ratio:4/3; object-fit:cover }
.card-row .card figcaption{ padding:14px 16px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ash) }

/* ---------- split media/copy ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,6vw,96px); align-items:center }
.split .media{ margin:0; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--edge); background:#000 }
.split .media video,.split .media img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.split.flip .media{ order:2 }
.caps{ display:grid; gap:18px; margin-top:28px }
@media (max-width:820px){ .split{ grid-template-columns:1fr } .split.flip .media{ order:0 } }


/* ---------- audiences ---------- */
.aud-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.aud{ position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:3/4; background:#000; border:1px solid var(--edge); display:grid; align-content:end; padding:22px; isolation:isolate }
.aud video,.aud img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; transition:transform .8s }
.aud:hover video,.aud:hover img{ transform:scale(1.04) }
.aud::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,10,12,0) 40%,rgba(5,10,12,.85) 100%); z-index:-1 }
.aud .label{ margin-bottom:8px } .aud h3{ margin-bottom:6px } .aud p{ margin:0 0 16px; color:var(--ash); font-size:14px }
.aud .go{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone) }
@media (max-width:720px){ .aud-grid{ grid-template-columns:1fr } .aud{ aspect-ratio:16/10 } }

/* ---------- finale / offer ---------- */
.finale{ position:relative; height:100vh; min-height:720px; background:var(--void); overflow:hidden }
.finale-stage{ position:absolute; inset:0; overflow:hidden }
.finale-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:translate(-19%,-6%) scale(.86); -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 56%,rgba(0,0,0,.35) 82%,transparent 100%); mask-image:radial-gradient(50% 50% at 50% 50%,#000 56%,rgba(0,0,0,.35) 82%,transparent 100%) }
.finale-stage::before{ content:""; position:absolute; inset:0; background:radial-gradient(40% 30% at 31% 44%,rgba(127,217,232,.12),transparent 70%); opacity:0; transition:opacity 1.4s ease .1s; pointer-events:none }
.finale-stage::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:50%; background:linear-gradient(180deg,rgba(5,10,12,0),rgba(5,10,12,.9)); pointer-events:none }
.finale.landed .finale-stage::before{ opacity:1 }
.finale-grid{ position:absolute; left:0; right:0; bottom:clamp(24px,5vh,56px); z-index:2; display:grid; justify-content:end }
.order{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1) .35s,transform .9s cubic-bezier(.2,.7,.2,1) .35s }
.finale.landed .order{ opacity:1; transform:none }
.order{ width:min(calc(100vw - 2 * var(--gut)),520px); border:1px solid var(--edge); border-radius:var(--r-card); padding:clamp(20px,2.4vw,30px); background:rgba(14,26,30,.55); backdrop-filter:blur(10px) }
.order-rows{ margin:0 }
.order-rows div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--edge) }
.order-inc dd{ font-family:var(--ff-body); font-size:14px; font-weight:400; letter-spacing:0; color:var(--bone) }
.order-inc ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; text-align:right }
.order-inc li::after{ content:"●"; color:var(--ice); font-size:6px; vertical-align:2px; margin-left:9px }
.order-rows div:first-child{ padding-top:0 }
.order-rows dt{ font-family:var(--ff-body); font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; color:#B9C4CC }
.order-rows dd{ margin:0; font-family:var(--ff-body); font-size:19px; font-weight:600; letter-spacing:-.01em; text-align:right }
.order-rows div:first-child dd{ font-size:clamp(34px,3vw,44px); font-weight:600; letter-spacing:-.025em; line-height:1; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; justify-content:flex-end }
.order-rows .count{ font-weight:inherit; font-variant-numeric:tabular-nums }
.order-cta{ display:grid; gap:10px; margin-top:18px } .order-cta .btn{ width:100%; justify-content:center; font-family:var(--ff-body); font-size:17px; font-weight:600; letter-spacing:0; text-transform:none }
.order-note{ margin:16px 0 0; text-align:center; font-size:13px; color:var(--ash) }
.linkbtn{ appearance:none; background:none; border:0; padding:10px 2px; margin:-10px -2px; color:var(--bone); text-decoration:underline; text-underline-offset:4px; cursor:pointer; font:inherit } .linkbtn:hover{ color:var(--ice) }
html.reduced .order{ opacity:1; transform:none; transition:none }
@media (max-width:820px){
  .finale{ height:auto; min-height:0; padding-bottom:calc(28px + env(safe-area-inset-bottom)) }
  .finale-stage{ position:relative; inset:auto; height:clamp(250px,40svh,380px) }
  .finale-video{ height:100%; transform:none }
  .finale-stage::after{ height:34% }
  .finale-grid{ position:relative; bottom:auto; justify-content:center; margin-top:-28px }
  .order{ padding:18px } .order-rows div{ padding:9px 0 } .order-inc dd{ font-size:13px }
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--edge); padding:32px var(--gut) calc(32px + env(safe-area-inset-bottom)); display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; align-items:center;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em; color:var(--ash); text-transform:uppercase; background:var(--void);
}
footer .footer-links{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center }
footer a{ color:var(--ash); transition:color .2s; display:inline-block; padding:12px 6px; margin:-12px -6px } footer a:hover{ color:var(--ice) }

/* ---------- reveals ---------- */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1) }
.rv.in{ opacity:1; transform:none }
.rv[data-d="1"]{ transition-delay:.1s } .rv[data-d="2"]{ transition-delay:.2s } .rv[data-d="3"]{ transition-delay:.3s }
html.reduced .rv{ opacity:1; transform:none; transition:none }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }


/* Three streams of eye insights. */
.metric-channels{ display:grid; gap:10px; margin-top:26px; width:100%; max-width:480px; min-width:0 }
.metric-channel{ --tone:#80d9e7; display:flex; align-items:center; gap:18px; padding:17px 20px; border:1px solid rgba(128,217,231,.16); border-radius:16px; background:linear-gradient(110deg,rgba(128,217,231,.08),rgba(5,10,12,.7) 75%); backdrop-filter:blur(12px) }
.metric-channel:nth-child(2){ --tone:#b7c1ff }
.metric-channel:nth-child(3){ --tone:#a9ddc5 }
.metric-orbit{ flex:0 0 46px; height:46px; display:grid; place-items:center; border:1px solid var(--tone); border-radius:50%; color:var(--tone); font-family:var(--ff-mono); font-size:11px; position:relative }
.metric-orbit::after{ content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--tone); top:3px; right:3px; box-shadow:0 0 12px var(--tone) }
.metric-reading{ flex:1; min-width:0 }
.metric-reading h3{ font-family:var(--ff-display); font-size:15px; font-weight:600; text-transform:none; letter-spacing:-.01em; color:var(--tone); margin:0 0 7px; line-height:1.3 }
.metric-value{ display:block; white-space:nowrap; font-family:var(--ff-display); font-size:clamp(20px,2vw,28px); line-height:1.2; letter-spacing:-.025em; color:var(--bone); transition:opacity .28s,transform .28s }
.metric-value.changing{ opacity:0; transform:translateY(6px) }
.metric-steps{ display:flex; flex-direction:column; gap:5px }
.metric-steps i{ width:4px; height:4px; border-radius:50%; background:rgba(238,242,244,.2); transition:background .3s }
.metric-steps i.active{ background:var(--tone); box-shadow:0 0 8px var(--tone) }
@media(max-width:600px){ .metric-channels{ margin-top:18px; gap:8px } .metric-channel{ padding:12px 14px; gap:12px } .metric-orbit{ flex-basis:36px; height:36px } .metric-reading h3{ font-size:14px; margin-bottom:5px } .metric-value{ font-size:20px } }
html.reduced .metric-value{ transition:none }

@media(max-width:380px){ .metric-channel{ padding:12px 10px; gap:8px } .metric-value{ font-size:18px } .metric-reading h3{ font-size:12px } }