/* Noctua — "The Night Shift" cinematic scroll experience */
:root{
  --font-display:Verdana,Geneva,sans-serif;
  --font-body:'Poppins',Verdana,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ink:#14120D; --ink-deep:#0C0F14; --paper:#FBF8F1;
  --green:#1A6B4D; --green-bright:#34C98A; --green-glow:#6BF0B6;
  --sky:#3FA0D4; --sky-soft:#E1F0FA; --sun:#EBB02A; --sun-soft:#FBEFC6;
  --coral:#E07A4E; --coral-soft:#FBE3D6; --grape:#8E7BD6; --grape-soft:#ECE6FA; --mint-soft:#DCF3E7;
  --fg:#F4EFE3; --fg-soft:rgba(244,239,227,.74); --fg-faint:rgba(244,239,227,.48); --hair:rgba(244,239,227,.16);
  --accent:var(--green-glow);
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:38px; --r-pill:999px;
  --sh-md:0 18px 50px rgba(8,10,14,.30),0 4px 12px rgba(8,10,14,.16);
  --sh-lg:0 44px 100px rgba(8,10,14,.42),0 12px 28px rgba(8,10,14,.22);
  --ease:cubic-bezier(.22,1,.36,1); --bounce:cubic-bezier(.34,1.4,.5,1);
}
:root[data-tone="light"]{ --fg:#1B1810; --fg-soft:rgba(27,24,16,.66); --fg-faint:rgba(27,24,16,.42); --hair:rgba(27,24,16,.12); --accent:var(--green); }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-stopped{overflow:hidden;}
body{font-family:var(--font-body);color:var(--fg);background:#0a0d13;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:color .7s var(--ease);}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:1.0;margin:0;}
p{margin:0;text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
img,svg{display:block;}

/* living painted sky */
#sky{position:fixed;inset:0;z-index:-3;width:100%;height:100%;display:block;}
.atmos{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(135% 105% at 50% 0%,transparent 42%,rgba(5,7,11,.40) 100%);}
.atmos::after{content:"";position:absolute;inset:-50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.05;mix-blend-mode:overlay;}
:root[data-motion="lite"] #sky{display:none;}
:root[data-motion="lite"] body{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(52,201,138,.18),transparent 48%),
    linear-gradient(180deg,#0a0d13 0%,#10182a 42%,#0d2d24 100%);
}

.wrap{width:min(1180px,90vw);margin-inline:auto;}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px;}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;}
.mono{font-family:var(--font-mono);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:600;font-size:16px;border:none;border-radius:var(--r-pill);padding:15px 26px;transition:transform .18s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);}
.btn svg{width:19px;height:19px;}
.btn-primary{background:var(--green-bright);color:#06140d;box-shadow:0 10px 30px rgba(52,201,138,.30);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(52,201,138,.46);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{background:rgba(255,255,255,.10);color:var(--fg);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);}
:root[data-tone="light"] .btn-ghost{background:rgba(20,18,13,.05);border-color:rgba(20,18,13,.16);}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.18);}
:root[data-tone="light"] .btn-ghost:hover{background:rgba(20,18,13,.09);}
.btn-lg{font-size:18px;padding:18px 34px;}

/* header */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,5vw,56px);transition:background .5s var(--ease),backdrop-filter .5s,padding .4s var(--ease);}
.site-head.solid{background:color-mix(in srgb,#0a0d13 52%,transparent);backdrop-filter:blur(16px) saturate(1.3);padding-top:12px;padding-bottom:12px;}
:root[data-tone="light"] .site-head.solid{background:color-mix(in srgb,var(--paper) 66%,transparent);}
.brand{display:flex;align-items:center;gap:11px;}
.brand .glyph{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.28);}
.brand .glyph img{width:27px;height:27px;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.03em;}
.head-nav{display:flex;align-items:center;gap:28px;}
.head-nav a{font-size:15px;color:var(--fg-soft);transition:color .2s;}
.head-nav a:hover{color:var(--fg);}
.head-cta{display:flex;align-items:center;gap:14px;}
.nav-link.active{color:var(--fg);}

/* mobile nav */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;padding:10px;margin-left:6px;}
.nav-toggle span{display:block;width:24px;height:2px;border-radius:2px;background:var(--fg);transition:transform .25s var(--ease),opacity .2s var(--ease);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:880px){
  .nav-toggle{display:flex;}
  .head-nav{position:fixed;top:0;right:0;height:100vh;width:min(80vw,330px);flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:90px 34px 34px;background:color-mix(in srgb,#0a0d13 94%,transparent);backdrop-filter:blur(18px) saturate(1.2);border-left:1px solid var(--hair);box-shadow:var(--sh-lg);transform:translateX(105%);transition:transform .36s var(--ease);}
  .head-nav.open{transform:none;}
  .head-nav .nav-link{display:block;font-size:20px;padding:12px 0;color:var(--fg);}
}

/* footer nav */
.foot-cols{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;}
.foot-cols a{font-size:14px;color:var(--fg-soft);transition:color .2s;}
.foot-cols a:hover{color:var(--accent);}
@media(max-width:640px){.foot-in{flex-direction:column;align-items:flex-start;}}

/* ---------- Noctua Pay chapter ---------- */
.pay-card{background:rgba(255,255,255,.06);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;backdrop-filter:blur(6px);box-shadow:var(--sh-md);}
.pay-card .pc-bar{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--hair);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);}
.pay-card .pc-bar .pc-lock{width:8px;height:8px;border-radius:50%;background:var(--green-glow);}
.pay-card .pc-body{padding:22px;}
.pay-amount{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,5vw,52px);letter-spacing:-.04em;color:var(--fg);}
.pay-amount .pa-due{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:6px;}
.pay-methods{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px;}
.pay-pill{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:8px 13px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid var(--hair);color:var(--fg-soft);}
.pay-pill.hot{background:rgba(107,240,182,.16);border-color:var(--accent);color:var(--green-glow);}
.pay-feats{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.pay-feats li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--fg-soft);}
.pay-feats .pf-ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(107,240,182,.14);color:var(--green-glow);}
.pay-feats .pf-ic svg{width:17px;height:17px;}
.pay-feats b{color:var(--fg);font-weight:600;}

/* generic chapter shell */
.chapter{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0;}
.scene{will-change:transform,opacity;}
.chapter-tag{position:absolute;top:max(96px,12vh);left:clamp(20px,5vw,56px);font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;color:var(--fg-faint);text-transform:uppercase;}
.chapter-tag b{color:var(--accent);font-weight:600;}

/* ---------- CH1 HERO ---------- */
.hero{text-align:center;flex-direction:column;justify-content:center;padding-top:140px;}
.hero .eyebrow{justify-content:center;}
.hero h1{font-size:clamp(46px,8.5vw,116px);margin:22px 0 0;max-width:14ch;}
.hero h1 .glow{color:var(--green-glow);text-shadow:0 0 40px rgba(107,240,182,.45);}
.hero-sub{font-size:clamp(17px,2vw,22px);color:var(--fg-soft);max-width:46ch;margin:26px auto 0;}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px;}
.hero-scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--fg-faint);font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
.hero-scroll .mouse{width:24px;height:38px;border:2px solid var(--fg-faint);border-radius:14px;position:relative;}
.hero-scroll .mouse::after{content:"";position:absolute;top:7px;left:50%;width:3px;height:7px;border-radius:2px;background:var(--accent);transform:translateX(-50%);animation:wheel 1.6s var(--ease) infinite;}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0);}30%{opacity:1;}70%{opacity:1;}100%{opacity:0;transform:translate(-50%,12px);}}

/* owl mascot */
.owl-hero{width:clamp(120px,16vw,190px);margin:0 auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.4));}
.owl-blink .eye-lid{transform-origin:center;animation:blink 5.2s infinite;}
@keyframes blink{0%,92%,100%{transform:scaleY(0);}95%{transform:scaleY(1);}}

/* clock ring under hero numbers */
.hero-glow{position:absolute;top:38%;left:50%;width:680px;height:680px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(52,201,138,.16),transparent 62%);filter:blur(20px);z-index:-1;pointer-events:none;}

/* ---------- CH2 THE PILE (problem) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:40px;}}
.lead-h{font-size:clamp(34px,5.2vw,64px);max-width:16ch;}
.lead-p{font-size:clamp(17px,1.8vw,20px);color:var(--fg-soft);max-width:42ch;margin-top:22px;}

/* messy inbox stack */
.pile{position:relative;height:440px;}
.pile-card{position:absolute;left:50%;width:300px;background:var(--paper);color:var(--ink);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--sh-md);transform-origin:center;}
.pile-card .pc-top{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:#9a8f7c;text-transform:uppercase;}
.pile-card .pc-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);}
.pile-card h4{font-family:var(--font-body);font-weight:600;font-size:15px;margin:9px 0 4px;letter-spacing:0;color:var(--ink);}
.pile-card p{font-size:13px;color:#6f6557;}
.pile-stamp{position:absolute;right:14px;bottom:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--coral);text-transform:uppercase;}

/* ---------- CH3 THE STORY: spreadsheet → app ---------- */
.story-stage{width:min(1080px,92vw);margin:0 auto;}
.story-head{text-align:center;margin-bottom:40px;}
.story-head h2{font-size:clamp(34px,5.4vw,68px);}
.story-head p{color:var(--fg-soft);font-size:clamp(16px,1.8vw,20px);max-width:50ch;margin:18px auto 0;}
.transformer{display:grid;grid-template-columns:1fr 96px 1fr;gap:18px;align-items:stretch;}
@media(max-width:900px){.transformer{grid-template-columns:1fr;gap:24px;}.transformer .arrow-col{transform:rotate(90deg);height:60px;}}

.panel{background:rgba(255,255,255,.06);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;backdrop-filter:blur(6px);min-height:430px;display:flex;flex-direction:column;}
.panel-top{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--hair);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);}
.panel-top .pt-dots{display:flex;gap:6px;}
.panel-top .pt-dots i{width:9px;height:9px;border-radius:50%;background:var(--fg-faint);opacity:.5;}
.panel-title{margin-left:6px;}

/* spreadsheet */
.sheet{flex:1;font-family:var(--font-mono);font-size:12.5px;color:var(--fg-soft);}
.sheet-row{display:grid;grid-template-columns:30px 1.4fr 1fr 1fr .8fr;}
.sheet-row>div{padding:9px 10px;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.sheet-row.head>div{background:rgba(255,255,255,.05);color:var(--fg-faint);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;}
.sheet-row .rownum{color:var(--fg-faint);text-align:center;background:rgba(255,255,255,.03);}
.sheet-row.drag-ready{cursor:grab;transition:background .18s;}
.sheet-row.drag-ready:hover{background:rgba(107,240,182,.12);}
.sheet-row.lifted{opacity:.35;}
.grabbing{cursor:grabbing!important;}

/* drag chip */
.drag-chip{position:fixed;z-index:120;pointer-events:none;background:var(--green-bright);color:#06140d;font-family:var(--font-mono);font-size:12px;font-weight:600;padding:10px 14px;border-radius:var(--r-pill);box-shadow:0 14px 34px rgba(52,201,138,.5);display:flex;align-items:center;gap:8px;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .15s;}
.drag-chip.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* the app (right panel) builds up */
.appface{flex:1;padding:18px;display:flex;flex-direction:column;gap:14px;position:relative;}
.app-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;color:var(--fg-faint);transition:opacity .4s;}
.app-empty .dropring{width:96px;height:96px;border-radius:50%;border:2px dashed var(--fg-faint);display:grid;place-items:center;animation:pulsering 2.4s var(--ease) infinite;}
.app-empty.hide{opacity:0;pointer-events:none;}
@keyframes pulsering{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.07);opacity:1;}}
.appface.drop-hot{outline:2px solid var(--green-bright);outline-offset:-10px;border-radius:var(--r-lg);background:rgba(107,240,182,.06);}

.app-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.kpi{background:rgba(255,255,255,.07);border:1px solid var(--hair);border-radius:var(--r-sm);padding:12px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--bounce);}
.kpi.in{opacity:1;transform:none;}
.kpi .kv{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.04em;}
.kpi .kl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);margin-top:3px;}
.kpi.green .kv{color:var(--green-glow);}
.app-rows{display:flex;flex-direction:column;gap:8px;}
.app-row{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:var(--r-sm);padding:10px 13px;opacity:0;transform:translateX(14px);transition:opacity .45s var(--ease),transform .45s var(--ease);}
.app-row.in{opacity:1;transform:none;}
.app-row .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:600;color:#06140d;flex:none;}
.app-row .ar-name{font-weight:600;font-size:14px;}
.app-row .ar-meta{font-family:var(--font-mono);font-size:11px;color:var(--fg-faint);}
.app-row .ar-badge{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);}
.b-qual{background:rgba(107,240,182,.18);color:var(--green-glow);}
.b-rev{background:rgba(235,176,42,.2);color:var(--sun);}
.b-booked{background:rgba(63,160,212,.2);color:#7cc6ec;}

/* arrow between panels */
.arrow-col{display:flex;align-items:center;justify-content:center;}
.arrow-orb{width:62px;height:62px;border-radius:50%;background:var(--green-bright);display:grid;place-items:center;box-shadow:0 12px 30px rgba(52,201,138,.4);color:#06140d;}
.arrow-orb svg{width:28px;height:28px;}
.arrow-orb.pump{animation:pump 1s var(--bounce);}
@keyframes pump{0%{transform:scale(1);}40%{transform:scale(1.22);}100%{transform:scale(1);}}

.story-hint{text-align:center;margin-top:26px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--fg-faint);}
.story-hint b{color:var(--accent);}
.story-reset{margin-top:18px;text-align:center;}

/* ---------- CH4 the agents grid ---------- */
.agents-head{text-align:center;margin-bottom:48px;}
.agents-head h2{font-size:clamp(34px,5.4vw,66px);}
.agents-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:900px){.agents-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.agents-grid{grid-template-columns:1fr;}}
.agent-card{background:rgba(255,255,255,.06);border:1px solid var(--hair);border-radius:var(--r-lg);padding:24px;transition:transform .25s var(--ease),background .25s,border-color .25s;}
.agent-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.10);border-color:var(--accent);}
.agent-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(107,240,182,.14);color:var(--green-glow);margin-bottom:16px;}
.agent-ic svg{width:25px;height:25px;}
.agent-card h3{font-size:21px;letter-spacing:-.02em;}
.agent-card p{font-size:14.5px;color:var(--fg-soft);margin-top:8px;}

/* ---------- CH5 90s DEMO ---------- */
.demo-head{text-align:center;margin-bottom:40px;}
.demo-head h2{font-size:clamp(34px,5.4vw,66px);}
.demo-head p{color:var(--fg-soft);font-size:clamp(16px,1.8vw,20px);max-width:48ch;margin:18px auto 0;}
.player{width:min(1060px,94vw);margin:0 auto;background:var(--ink-deep);border:1px solid var(--hair);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden;}
.player-chrome{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.03);}
.player-chrome .lights{display:flex;gap:7px;}
.player-chrome .lights i{width:11px;height:11px;border-radius:50%;}
.player-chrome .lights i:nth-child(1){background:#ED6A5E;}
.player-chrome .lights i:nth-child(2){background:#F5BF4F;}
.player-chrome .lights i:nth-child(3){background:#62C554;}
.player-url{font-family:var(--font-mono);font-size:12px;color:var(--fg-faint);letter-spacing:.04em;}
.player-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-glow);}
.player-live .ld{width:8px;height:8px;border-radius:50%;background:var(--green-glow);box-shadow:0 0 0 0 rgba(107,240,182,.6);animation:livep 1.8s infinite;}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(107,240,182,.5);}70%{box-shadow:0 0 0 9px rgba(107,240,182,0);}100%{box-shadow:0 0 0 0 rgba(107,240,182,0);}}

.stage{position:relative;aspect-ratio:16/9;background:radial-gradient(120% 120% at 70% 10%,#13202b,#0a0f15);overflow:hidden;}
.stage-scene{position:absolute;inset:0;padding:32px clamp(20px,4vw,48px);opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none;}
.stage-scene.active{opacity:1;transform:none;pointer-events:auto;}
.stage-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green-glow);}
.stage h3{font-size:clamp(22px,3.2vw,40px);margin-top:10px;letter-spacing:-.03em;}
.stage .stage-sub{color:var(--fg-soft);font-size:clamp(13px,1.5vw,17px);margin-top:8px;max-width:40ch;}

/* demo scene specifics */
.s-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;height:100%;align-items:center;}
.notif{background:rgba(255,255,255,.06);border:1px solid var(--hair);border-radius:var(--r-md);padding:16px;display:flex;gap:13px;align-items:flex-start;}
.notif .ni{width:40px;height:40px;border-radius:11px;background:rgba(63,160,212,.2);color:#7cc6ec;display:grid;place-items:center;flex:none;}
.notif .nt{font-weight:600;font-size:15px;}
.notif .nm{font-size:13px;color:var(--fg-soft);margin-top:3px;}
.notif .ntime{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-faint);margin-top:7px;letter-spacing:.06em;}

.chatline{display:flex;gap:10px;margin-bottom:11px;max-width:84%;}
.chatline.out{margin-left:auto;flex-direction:row-reverse;}
.bub{padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.45;}
.chatline.in .bub{background:rgba(255,255,255,.08);border-bottom-left-radius:5px;}
.chatline.out .bub{background:var(--green-bright);color:#06140d;border-bottom-right-radius:5px;}
.chat-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:14px;}
.typing{display:inline-flex;gap:4px;align-items:center;}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--fg-faint);animation:typ 1.2s infinite;}
.typing i:nth-child(2){animation-delay:.2s;}.typing i:nth-child(3){animation-delay:.4s;}
@keyframes typ{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

.cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:10px;}
.slot{font-family:var(--font-mono);font-size:12px;text-align:center;padding:12px 6px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--hair);color:var(--fg-soft);transition:all .3s;}
.slot.picked{background:var(--green-bright);color:#06140d;border-color:transparent;transform:scale(1.04);}

.kpi-final{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;}
.kpi-final .kf{text-align:center;}
.kpi-final .kfv{font-family:var(--font-display);font-size:clamp(32px,5vw,60px);font-weight:700;letter-spacing:-.04em;color:var(--green-glow);}
.kpi-final .kfl{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);margin-top:6px;}

/* player controls */
.player-ctl{display:flex;align-items:center;gap:16px;padding:14px 18px;border-top:1px solid var(--hair);background:rgba(255,255,255,.03);}
.pc-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--green-bright);color:#06140d;display:grid;place-items:center;flex:none;transition:transform .15s;}
.pc-btn:hover{transform:scale(1.06);}
.pc-btn svg{width:20px;height:20px;}
.track{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;cursor:pointer;}
.track-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--green-bright);border-radius:3px;}
.track-time{font-family:var(--font-mono);font-size:12px;color:var(--fg-faint);min-width:84px;text-align:right;}
.chapters-rail{display:flex;gap:6px;padding:0 18px 16px;flex-wrap:wrap;}
.chip{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid var(--hair);color:var(--fg-faint);transition:all .2s;}
.chip.active{background:rgba(107,240,182,.16);color:var(--green-glow);border-color:var(--accent);}
.chip:hover{color:var(--fg);}

/* ---------- CH6 proof / stats ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px;}
@media(max-width:820px){.proof-grid{grid-template-columns:1fr 1fr;}}
.stat{padding:8px 4px;}
.stat .sv{font-family:var(--font-display);font-size:clamp(40px,6vw,76px);font-weight:700;letter-spacing:-.05em;color:var(--fg);line-height:1;}
.stat .sl{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-top:12px;}
.stat .sv .u{color:var(--green-glow);}

/* ---------- CH7 CTA ---------- */
.cta{text-align:center;flex-direction:column;justify-content:center;}
.cta h2{font-size:clamp(40px,7vw,96px);max-width:16ch;margin:0 auto;}
.cta p{color:var(--fg-soft);font-size:clamp(17px,2vw,21px);max-width:42ch;margin:24px auto 0;}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px;}
.cta .owl-cta{width:90px;margin:0 auto 10px;opacity:.92;}

/* footer */
.foot{padding:60px 0 50px;border-top:1px solid var(--hair);}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.foot small{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--fg-faint);}

/* progress bar */
.scroll-prog{position:fixed;top:0;left:0;height:3px;background:var(--green-bright);width:0;z-index:60;box-shadow:0 0 12px rgba(52,201,138,.6);}

/* reveal defaults (GSAP overrides; reduced-motion shows end-state) */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(40px);}
}
.reveal-on{opacity:1!important;transform:none!important;}

@media(max-width:760px), (pointer:coarse){
  #sky{display:none;}
  .atmos{background:radial-gradient(120% 90% at 50% 0%,rgba(52,201,138,.18),transparent 52%);}
  .atmos::after{opacity:.035;}
  .site-head{padding:12px 18px;}
  .brand .glyph{width:38px;height:38px;}
  .chapter{min-height:auto;padding:86px 0;}
  .hero{min-height:100svh;padding-top:112px;padding-bottom:92px;}
  .hero h1{font-size:clamp(42px,14vw,72px);}
  .hero-cta,.cta-row{align-items:stretch;}
  .btn{justify-content:center;white-space:normal;text-align:center;}
  .btn-lg{width:100%;max-width:360px;}
  .chapter-tag{position:static;width:min(1180px,90vw);margin:0 auto 20px;}
  .pile{height:360px;transform:scale(.88);transform-origin:center top;}
  .panel{min-height:auto;}
  .sheet{font-size:11px;}
  .sheet-row{grid-template-columns:26px 1.1fr .9fr .9fr .7fr;}
  .sheet-row>div{padding:8px 7px;}
  .app-kpis,.kpi-final{grid-template-columns:1fr;}
  .stage{aspect-ratio:auto;min-height:520px;}
  .stage-scene{padding:22px 16px;}
  .s-grid{grid-template-columns:1fr;gap:12px;align-content:start;}
  .notif{padding:13px;}
  .player-ctl{gap:10px;flex-wrap:wrap;}
  .track{min-width:180px;}
  .chapters-rail{display:none;}
  .proof-grid{grid-template-columns:1fr;}
  .foot{padding:42px 0;}
}

/* tweaks mount */
#tweaks-root{position:fixed;inset:0;pointer-events:none;z-index:200;}