/* ══════════════════════════════════════════════════════════════════
   O-AI — Early Access — Bronze & Ink — Tunnel + Chaptered Scroll
   Each section has its own scroll personality. No section scrolls "normal."
   ══════════════════════════════════════════════════════════════════ */

/* SEO/accessibility: the real, keyword-meaningful <h1> lives here, off-screen
   but readable by search crawlers and screen readers (unlike display:none,
   which some crawlers discount). The VISIBLE hero line ("Follow the signal.")
   is stylized brand copy, not descriptive — it's a <p>, not a heading. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

:root{
  --ink:#14120F;
  --ink2:#1B1814;
  --bronze:#B8763E;
  --bronze-light:#D9A06A;
  --umber:#6B4A2E;
  --parchment:#F3EFE6;
  --text2:rgba(243,239,230,.62);
  --text3:rgba(243,239,230,.36);
  --border:rgba(243,239,230,.09);
  --ease:cubic-bezier(.19,1,.22,1);
  --font-display:'Cabinet Grotesk','General Sans',-apple-system,sans-serif;
  --font-body:'General Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html{scroll-behavior:auto;}
body{background:var(--ink);color:var(--parchment);font-family:var(--font-body);overflow-x:hidden;}
::selection{background:var(--bronze);color:var(--ink);}

/* ── Nav + skip ──────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;padding:26px 0;
  opacity:0;transform:translateY(-8px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  pointer-events:none;
}
.nav.on{opacity:1;transform:none;pointer-events:auto;}
.nav-inner{max-width:1040px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:11px;}
.nav-logo-mark{
  width:20px;height:20px;display:block;
  background-image:url('assets/logo.png');background-size:contain;background-repeat:no-repeat;
  filter:invert(1) sepia(1) saturate(2) hue-rotate(340deg) brightness(1.15);
}
.nav-logo-text{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.02em;}
.nav-cta{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--text2);
  text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);}
.nav-cta:hover{color:var(--bronze-light);border-color:var(--bronze);}

.skip-tunnel{
  position:fixed;top:24px;right:32px;z-index:210;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);background:transparent;border:1px solid var(--border);
  padding:12px 14px;border-radius:2px;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),opacity .6s var(--ease);
}
.skip-tunnel:hover{color:var(--bronze-light);border-color:var(--bronze);}
.skip-tunnel.gone{opacity:0;pointer-events:none;}

/* ── Tunnel canvas + text layer ─────────────────────────────────── */
#tunnel-canvas{
  position:fixed;inset:0;width:100%;height:100%;z-index:1;
  background:radial-gradient(ellipse at center,#221E18 0%,var(--ink) 60%,#0A0907 100%);
  transition:opacity 1.2s var(--ease);
}
#tunnel-canvas.gone{opacity:0;pointer-events:none;}

.tunnel-text-layer{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  transition:opacity 1.2s var(--ease);
}
.tunnel-text-layer.gone{opacity:0;}
.t-panel{
  position:absolute;top:50%;
  opacity:0;transition:opacity .8s var(--ease);
  max-width:min(520px,88vw);will-change:opacity;
}
.t-panel[data-side="center"]{left:50%;transform:translate(-50%,-50%);text-align:center;}
.t-panel[data-side="left"]{left:12vw;transform:translateY(-50%);text-align:left;}
.t-panel[data-side="right"]{right:12vw;transform:translateY(-50%);text-align:right;}
.t-panel.in{opacity:1;}
.t-panel > p:not(.t-eyebrow):not(.t-sub){
  font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4.5vw,52px);
  line-height:1.1;color:var(--parchment);letter-spacing:-.01em;
}
.t-eyebrow{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-light);margin-bottom:24px;
}
.t-hero{
  font-family:var(--font-display);font-weight:800;font-size:clamp(42px,7vw,80px);
  line-height:1.02;letter-spacing:-.025em;color:var(--parchment);
}
.t-sub{
  margin-top:22px;font-size:14px;color:var(--text2);
  font-family:var(--font-mono);letter-spacing:.05em;
}

/* The final panel ("This is O-AI.") sits over the brightening throat beacon — give it
   its own dark plate + glow-proof text-shadow so it reads regardless of how hot the
   beacon gets, instead of fighting the beacon's brightness with timing alone. */
.t-final{
  padding:40px 56px;border-radius:28px;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 55%,transparent 82%);
}
.t-final .t-hero,.t-final .t-eyebrow{
  text-shadow:0 2px 24px rgba(0,0,0,.85),0 0 46px rgba(0,0,0,.6);
}

.scroll-spacer{width:1px;height:600vh;}

/* ══════════════════════════════════════════════════════════════════
   THE CORE — orbit navigation section. Scroll here doesn't move the
   page vertically; it drives an orbit angle around a 3D core rendered
   into the SAME canvas as the tunnel. Section is tall (400vh) and
   pinned so its full scroll range becomes camera orbit angle.
   ══════════════════════════════════════════════════════════════════ */
.core-section{
  position:relative;width:100%;height:400vh;
  /* z-index 10: sits below post-tunnel content but above the fixed tunnel canvas,
     so its text panels win over the corridor behind them */
  z-index:10;
}
.core-text-layer{
  position:sticky;top:0;left:0;width:100%;height:100vh;
  pointer-events:none;
  display:flex;align-items:center;
  transition:opacity .8s var(--ease);
}
.core-text-layer.gone{opacity:0;}
/* Each panel is a FULL-VIEWPORT-WIDTH layer so the CSS mask px (measured against the
   panel border-box) map 1:1 to screen px and line up with the gem's projected edge.
   JS drives transform (slide), opacity, and mask-image every frame — hence transition:none
   (an .8s transition here would smear the per-frame reveal ~0.8s behind the gem). The
   readable text lives in .c-inner, which carries the column width + side alignment. */
.c-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100vw;max-width:none;padding:0;
  opacity:0;transition:none;text-align:center;
  will-change:transform,mask-image,opacity;
  /* Contains .c-inner::before below (the readability scrim), which is deliberately
     oversized at 150%/240% of .c-inner's own box to feather out softly. On a narrow
     .c-inner (mobile) that oversizing bled up to 60px past the actual viewport edge,
     causing the whole page to become horizontally scrollable — confirmed as the true
     root cause (not the tunnel/film-grain layer, which was already properly contained)
     by toggling this exact property and watching document.scrollWidth drop from 435 to
     375 on a 375px-wide viewport. Safe here: .c-panel is a descendant of the sticky
     .core-text-layer, not an ancestor, so this cannot affect its sticky positioning
     (unlike setting overflow on html/body, which risks exactly that — see below). */
  overflow:hidden;
}
/* Readable column is CENTERED within the (translated) full-width panel and left-aligned
   for legibility. The panel's JS translateX is what places it on the correct side; keeping
   the column centered-in-panel (rather than hugging a panel edge) means it never lands past
   the viewport edge when the panel slides. */
.c-panel .c-inner{max-width:min(420px,44vw);margin:0 auto;text-align:left;position:relative;}
/* A1 readability scrim: a soft dark radial behind the caption column so the bright liquid-metal
   core never washes out the copy. Sits above the canvas, behind the text. */
.c-panel .c-inner::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:240%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(2,9,6,.74) 0%, rgba(2,9,6,.42) 42%, transparent 72%);
}
/* Verdigris jade for this section only — narrative shift: the site's warm bronze
   corridor gives way to the technical green heart of the machine, then bronze
   returns after. All hex codes here are the SAME green the 3D core is emitting,
   so the type and the object share one visual mood. */
.c-eyebrow{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#5FD69E;margin-bottom:18px;
  text-shadow:0 0 12px rgba(95,214,158,.45);
}
.c-title{
  font-family:var(--font-display);font-weight:800;font-size:clamp(38px,6vw,64px);
  line-height:1.05;letter-spacing:-.02em;color:var(--parchment);
  text-shadow:0 2px 28px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.7);
}
.c-facet .c-facet-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#3E9370;margin-bottom:14px;
}
.c-facet h3{
  font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.6vw,38px);
  line-height:1.15;color:var(--parchment);letter-spacing:-.015em;margin-bottom:16px;
  text-shadow:0 2px 24px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.65);
}
.c-facet p:not(.c-facet-label){
  color:var(--text2);font-size:15px;line-height:1.65;
}
/* Reduced-motion: currentPhase() returns 'post' so stepCore never runs and never sets
   panel opacity/mask — without this the 400vh core section would render blank. Show the
   panels statically, stacked, unmasked. */
@media (prefers-reduced-motion: reduce){
  .core-section{height:auto;}
  .core-text-layer{position:relative;height:auto;display:block;padding:80px 0;}
  .c-panel{
    position:relative;left:auto;top:auto;transform:none;opacity:1;
    width:auto;max-width:none;margin:0 auto 64px;
    -webkit-mask-image:none;mask-image:none;
  }
  .c-panel .c-inner{max-width:min(560px,90vw);margin:0 auto;text-align:center;}
}

/* Gem-orbit facet captions ("It watches."/"It talks."/"It verifies.") on narrow screens.
   Desktop slides each caption out to the left/right of the gem and clips it with a JS-driven
   mask-image computed from the gem's projected screen edge — there's no room for that
   side-by-side layout on a phone, and the mask math (tuned for desktop aspect ratios) was
   clipping the readable column down to as little as 44vw (~165px on a 375px phone), with
   text sliding toward an edge that may not even be visible. Keep the scroll-driven ORBIT
   itself untouched (still .core-section's full scroll height) — only neutralize the
   slide+mask on the caption text so it just fades in centered over the gem instead.
   !important is required because these three properties are set inline, per frame, by JS. */
@media(max-width:820px){
  .c-panel{
    transform:translate(-50%,-50%) !important;
    -webkit-mask-image:none !important;mask-image:none !important;
  }
  .c-panel .c-inner{max-width:88vw;text-align:center;}
}

/* post-tunnel content starts life offscreen (below the tall scroll-spacer that drives the
   tunnel) and z-index:20 keeps it above the fixed tunnel canvas as we scroll past. Once the
   tunnel is skipped and its spacer collapses, .post-tunnel takes over ordinary flow. */
.post-tunnel{position:relative;z-index:20;background:var(--ink);opacity:0;transition:opacity 1s var(--ease);}
.post-tunnel.on{opacity:1;}
.post-tunnel:not(.on) .pin-viewport{position:relative;}

/* ══════════════════════════════════════════════════════════════════
   PINNED SECTIONS — the core mechanic for every chaptered scroll.
   Section height determines how much scroll drives the animation
   inside it; .pin-viewport is fixed-position, filling the viewport,
   for as long as the section itself overlaps the viewport.
   ══════════════════════════════════════════════════════════════════ */
.pin-section{
  position:relative;width:100%;
}
.pin-viewport{
  position:sticky;top:0;height:100vh;width:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* ── SECTION A — Reveal / pin-and-morph device ─────────────────────── */
#reveal-pin{height:500vh;}
#reveal-pin .pin-viewport{flex-direction:column;padding:60px 24px;gap:32px;}
.reveal-eyebrow{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-light);
}
.device-frame{
  position:relative;width:min(720px,92vw);height:min(440px,58vh);
  border-radius:14px;overflow:hidden;
  background:var(--ink2);border:1px solid var(--border);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.7);
  flex-shrink:0;
}
.device-bar{
  display:flex;align-items:center;gap:7px;padding:13px 18px;
  border-bottom:1px solid var(--border);
  background:var(--ink2);position:relative;z-index:2;
}
.device-bar .dot{width:9px;height:9px;border-radius:50%;}
.dot.r{background:#a85a4a;}.dot.y{background:#c99a4a;}.dot.g{background:#5f8f5a;}
.device-title{margin-left:8px;font-family:var(--font-mono);font-size:11px;color:var(--text3);}
.device-body{
  position:relative;padding:22px 26px 26px;height:calc(100% - 45px);overflow:hidden;
}
.scene{
  position:absolute;inset:22px 26px 26px 26px;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
  font-family:var(--font-mono);font-size:13px;line-height:2;
}
.scene.on{opacity:1;transform:none;pointer-events:auto;}
.d-line{opacity:1;}
.d-user{color:var(--parchment);font-weight:500;}
.d-user::before{content:'> ';color:var(--bronze);}
.d-sys{color:var(--text3);}
.d-verify{color:var(--bronze-light);}
.d-verify .check{color:#7fae72;}
.d-result{color:var(--parchment);}
.d-result strong{color:var(--bronze-light);}

/* Mail scene */
.scene-mail{font-family:var(--font-body);font-size:13.5px;line-height:1.75;}
.mail-head{border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:18px;color:var(--parchment);}
.mail-head > div{padding:3px 0;}
.mail-lbl{color:var(--text3);width:60px;display:inline-block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;}
.mail-body p{color:var(--text2);margin-bottom:10px;}
.mail-signoff{color:var(--parchment);margin-top:16px;}
.mail-status{
  margin-top:22px;padding-top:14px;border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:11.5px;color:var(--bronze-light);
  display:flex;align-items:center;gap:8px;
}
.mail-status-dot{width:6px;height:6px;border-radius:50%;background:var(--bronze);box-shadow:0 0 8px var(--bronze);}
.mail-status .check{color:#7fae72;margin-left:auto;}

/* Code scene */
.scene-code{font-family:var(--font-mono);font-size:12.5px;line-height:1.9;}
.code-line{color:var(--text2);white-space:pre;}
.code-line .ln{color:var(--text3);width:26px;display:inline-block;text-align:right;padding-right:14px;user-select:none;}
.tok.kw{color:#d99a55;}
.tok.fn{color:var(--bronze-light);}
.tok.ty{color:#a89680;}
.tok.str{color:#a8b47f;}

/* Voice scene */
.scene-voice{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:24px;}
.voice-caption{max-width:420px;}
.waveform{display:flex;align-items:center;gap:5px;height:64px;}
.waveform span{
  display:block;width:3px;background:var(--bronze);border-radius:2px;
  animation:waveBar 1.1s ease-in-out infinite;
}
.waveform span:nth-child(odd){animation-delay:.1s;}
.waveform span:nth-child(3n){animation-delay:.25s;}
.waveform span:nth-child(4n){animation-delay:.4s;}
.waveform span:nth-child(5n){animation-delay:.55s;}
.waveform span:nth-child(n){
  height:calc(12px + var(--h,32px));
}
.waveform span:nth-child(1){--h:22px;}.waveform span:nth-child(2){--h:36px;}
.waveform span:nth-child(3){--h:14px;}.waveform span:nth-child(4){--h:42px;}
.waveform span:nth-child(5){--h:28px;}.waveform span:nth-child(6){--h:48px;}
.waveform span:nth-child(7){--h:20px;}.waveform span:nth-child(8){--h:34px;}
.waveform span:nth-child(9){--h:44px;}.waveform span:nth-child(10){--h:16px;}
.waveform span:nth-child(11){--h:38px;}.waveform span:nth-child(12){--h:26px;}
.waveform span:nth-child(13){--h:48px;}.waveform span:nth-child(14){--h:20px;}
.waveform span:nth-child(15){--h:32px;}.waveform span:nth-child(16){--h:40px;}
.waveform span:nth-child(17){--h:18px;}.waveform span:nth-child(18){--h:44px;}
.waveform span:nth-child(19){--h:28px;}.waveform span:nth-child(20){--h:36px;}
@keyframes waveBar{0%,100%{transform:scaleY(.55);}50%{transform:scaleY(1);}}

/* Alive agent-border on the mockup — matches the real app */
@keyframes deviceBorderPulse{
  0%,100%{box-shadow:inset 0 0 14px rgba(184,118,62,.4),inset 0 0 2px rgba(184,118,62,.85);}
  50%{box-shadow:inset 0 0 26px rgba(184,118,62,.7),inset 0 0 4px rgba(184,118,62,1);}
}
.device-agent-border{
  position:absolute;inset:0;border-radius:14px;pointer-events:none;
  border:1.5px solid var(--bronze);
  animation:deviceBorderPulse 2.2s ease-in-out infinite;
}

/* Scene dots (bottom, clickable + reflect progress) */
.scene-labels{display:flex;gap:10px;}
.scene-dot{
  width:26px;height:2px;border:none;padding:0;
  background:var(--umber);cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease);
}
.scene-dot.on{background:var(--bronze-light);transform:scaleY(1.6);}

/* ── SECTION B — Horizontal capabilities gallery ────────────────── */
#h-caps{height:500vh;}
.h-caps-section .pin-viewport{padding:0;}
.h-caps-track{
  display:flex;height:100%;align-items:center;
  will-change:transform;
}
.h-cap{
  min-width:100vw;width:100vw;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(32px,10vw,140px);gap:26px;
}
.h-cap-num{
  font-family:var(--font-display);font-weight:800;font-size:clamp(90px,15vw,200px);
  color:transparent;-webkit-text-stroke:2px var(--umber);line-height:.85;letter-spacing:-.03em;
}
.h-cap h3{
  font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,44px);
  letter-spacing:-.02em;
}
.h-cap p{color:var(--text2);font-size:clamp(15px,1.6vw,17.5px);line-height:1.7;max-width:520px;}
.h-caps-progress{
  position:absolute;bottom:56px;left:50%;transform:translateX(-50%);
  width:min(360px,50vw);height:2px;background:var(--umber);border-radius:2px;overflow:hidden;
}
#h-caps-bar{display:block;width:0;height:100%;background:var(--bronze-light);transition:width .1s linear;}

/* ── SECTION C — Typewriter honest line ─────────────────────────── */
#honest{height:300vh;}
.typewriter-viewport{padding:0 24px;}
.honest-line{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(22px,3.4vw,36px);line-height:1.55;color:var(--text2);
  max-width:820px;text-align:center;
}
#typewriter{white-space:pre-wrap;}
#typewriter em{font-style:italic;color:var(--bronze-light);}
.caret{
  display:inline-block;width:8px;height:1.05em;background:var(--bronze);
  vertical-align:-3px;margin-left:2px;animation:caretBlink 1s step-end infinite;
}
@keyframes caretBlink{50%{opacity:0;}}

/* ── SECTION D — Slow-approach access ───────────────────────────── */
#access{height:250vh;}
.approach-viewport{padding:0 24px;}
.approach-inner{
  text-align:center;
  transform:scale(.72) translateY(30px);opacity:0;
  transition:none; /* scroll-driven; we set inline style directly for precision */
  will-change:transform,opacity;
}
.approach-inner h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,4vw,42px);margin-bottom:12px;}
.approach-inner > p{color:var(--text2);font-size:15px;margin-bottom:44px;}
.activate-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;min-height:56px;}
.activate-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:3px;
  background:var(--bronze);color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:14.5px;
  border:none;cursor:pointer;transition:transform .18s var(--ease),background .3s var(--ease);}
.activate-btn:hover{background:var(--bronze-light);}
.activate-btn:active{transform:scale(.96);}
.activate-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:dotPulse 1.8s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.access-form{display:flex;gap:10px;width:100%;max-width:400px;}
.access-form input{flex:1;padding:14px 16px;border-radius:3px;background:var(--ink2);
  border:1px solid var(--border);color:var(--parchment);font-family:var(--font-body);font-size:14px;
  outline:none;transition:border-color .3s;}
.access-form input:focus{border-color:var(--bronze);}
.access-form input::placeholder{color:var(--text3);}
.join-btn{padding:14px 26px;border-radius:3px;background:var(--bronze);color:var(--ink);
  border:none;font-weight:600;font-size:14px;cursor:pointer;
  transition:transform .18s var(--ease),background .3s var(--ease);}
.join-btn:hover{background:var(--bronze-light);}
.join-btn:active{transform:scale(.96);}
.access-success{display:flex;flex-direction:column;align-items:center;gap:2px;}
.counter{font-family:var(--font-display);font-weight:800;font-size:42px;color:var(--bronze-light);font-variant-numeric:tabular-nums;}
.counter-label{font-size:13px;color:var(--text2);}
.access-error{max-width:400px;text-align:center;font-size:13px;color:#f87171;
  background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);border-radius:8px;padding:10px 14px;}

/* ── Footer ──────────────────────────────────────────────────────── */
.footer{text-align:center;padding:50px 24px 70px;color:var(--text3);font-size:12px;}
.footer-logo{display:inline-block;width:18px;height:18px;margin-bottom:14px;opacity:.5;
  background-image:url('assets/logo.png');background-size:contain;background-repeat:no-repeat;filter:invert(1);}

/* ── Activate pulse ─────────────────────────────────────────────── */
@keyframes agentBorderPulse{
  0%,100%{box-shadow:inset 0 0 16px rgba(184,118,62,.45),inset 0 0 2px rgba(184,118,62,.9);}
  50%{box-shadow:inset 0 0 34px rgba(184,118,62,.8),inset 0 0 5px rgba(184,118,62,1);}
}
#agent-border-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  border:2px solid var(--bronze);opacity:0;transition:opacity .6s;
}
#agent-border-overlay.on{opacity:1;animation:agentBorderPulse 1.5s ease-in-out 2;}

@media (max-width:720px){
  .device-frame{height:min(400px,54vh);}
  .h-cap{padding:0 32px;gap:18px;}
  .access-form{flex-direction:column;}
  .t-panel[data-side="left"],.t-panel[data-side="right"]{left:5vw;right:5vw;text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  #tunnel-canvas,.tunnel-text-layer,.scroll-spacer{display:none;}
  .post-tunnel{opacity:1;}
  .nav{opacity:1;transform:none;pointer-events:auto;}
  .skip-tunnel{display:none;}
  #reveal-pin,#h-caps,#honest,#access{height:auto;}
  .pin-viewport{position:relative;height:auto;padding:80px 24px;}
  .scene{position:relative;opacity:1;transform:none;inset:auto;margin-bottom:32px;}
  .h-caps-track{flex-direction:column;transform:none;}
  .h-cap{min-width:0;width:100%;padding:60px 32px;}
  .approach-inner{opacity:1;transform:none;}
  #typewriter::after{content:attr(data-full);} /* fallback shows full sentence */
}

/* ══════════════════════════════════════════════════════════════════
   EXPLAINER: What O-AI is (capabilities) + O-AI Studio (the Forge)
   Liquid-metal green — ties the page to the hero core.
   ══════════════════════════════════════════════════════════════════ */
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);}
.nav-cta-strong{color:#5FD69E;}
.nav-cta-strong:hover{color:#8bf0bd;border-color:#3E9370;}

.split-section,.forge-section{position:relative;background:var(--ink);padding:clamp(84px,13vh,168px) 0;}
.forge-section{background:linear-gradient(180deg,var(--ink),#0a140e 55%,var(--ink));}
.split-inner,.forge-inner{max-width:1040px;margin:0 auto;padding:0 32px;}
.sec-eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#5FD69E;margin-bottom:20px;text-shadow:0 0 14px rgba(95,214,158,.4);}
.sec-title{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,6.4vw,74px);
  line-height:.98;letter-spacing:-.025em;color:var(--parchment);margin-bottom:26px;}
.sec-lead{max-width:580px;font-size:clamp(16px,1.4vw,19px);line-height:1.62;color:var(--text2);margin-bottom:60px;}

/* capability grid — each card = a chrome droplet that split off the core */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cap{position:relative;padding:32px 26px 28px;border:1px solid rgba(95,214,158,.13);border-radius:16px;
  background:linear-gradient(160deg,rgba(20,42,31,.5),rgba(9,17,13,.42));
  opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);}
.cap.in{opacity:1;transform:none;}
.cap:hover{border-color:rgba(95,214,158,.5);transform:translateY(-5px);
  background:linear-gradient(160deg,rgba(27,56,41,.62),rgba(11,21,16,.52));
  box-shadow:0 18px 50px -20px rgba(20,120,70,.5);}
.cap-orb{width:46px;height:46px;border-radius:50%;margin-bottom:22px;
  background:radial-gradient(circle at 34% 28%, #e6fff2 0%, #57e29a 24%, #1f8a56 58%, #06301c 100%);
  box-shadow:0 0 22px rgba(60,220,140,.35),inset 0 -7px 13px rgba(0,0,0,.55),inset 0 3px 6px rgba(255,255,255,.4);
  animation:orbFloat 5s var(--ease) infinite;}
.cap:nth-child(3n+2) .cap-orb{animation-delay:-1.6s;}
.cap:nth-child(3n) .cap-orb{animation-delay:-3.2s;}
.cap:hover .cap-orb{box-shadow:0 0 38px rgba(70,245,155,.62),inset 0 -7px 13px rgba(0,0,0,.55),inset 0 3px 6px rgba(255,255,255,.5);}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cap h3{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--parchment);
  margin-bottom:10px;letter-spacing:-.01em;}
.cap p{font-size:14.5px;line-height:1.62;color:var(--text2);}

/* the forge — molten pool + cast-into-being pipeline */
.forge-pool{position:relative;height:160px;margin:0 0 62px;display:flex;align-items:center;justify-content:center;text-align:center;}
.forge-molten{position:absolute;width:min(540px,84%);height:130px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(70,240,150,.5),rgba(30,140,80,.2) 45%,transparent 72%);
  filter:blur(8px);animation:moltenPulse 3.4s ease-in-out infinite;}
@keyframes moltenPulse{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.forge-prompt{position:relative;font-family:var(--font-mono);font-size:clamp(14px,1.7vw,19px);
  color:#e6fff2;text-shadow:0 0 20px rgba(70,230,150,.7);padding:0 20px;}
.forge-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.forge-step{position:relative;padding:24px 22px;border:1px solid rgba(95,214,158,.13);border-radius:13px;
  background:linear-gradient(160deg,rgba(18,38,28,.5),rgba(8,15,11,.42));
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s var(--ease);}
.forge-step.in{opacity:1;transform:none;}
.forge-step:hover{border-color:rgba(95,214,158,.42);}
.fs-i{font-family:var(--font-mono);font-size:12px;color:#3E9370;letter-spacing:.12em;}
.forge-step h4{font-family:var(--font-display);font-weight:700;font-size:18.5px;color:var(--parchment);margin:10px 0 8px;letter-spacing:-.01em;}
.forge-step p{font-size:13.5px;line-height:1.58;color:var(--text2);}

@media(max-width:820px){
  .cap-grid,.forge-steps{grid-template-columns:1fr;}
  .nav-links{gap:16px;}
  /* "What it is" / "Studio" are same-page anchors — reachable by scrolling, safe to hide
     on mobile to declutter the nav. "Pricing" is a SEPARATE PAGE with no other link anywhere
     (no footer link, no menu) — hiding it here was a dead end for every mobile visitor. */
  .nav-links .nav-cta:not(.nav-cta-strong):not([href="pricing.html"]){display:none;}
}

/* ══════════════════════════════════════════════════════════════════
   PRICING PAGE (pricing.html) — waitlist, pre-launch, NO prices
   ══════════════════════════════════════════════════════════════════ */
body.page{background:var(--ink);}
.page .nav{opacity:1;transform:none;pointer-events:auto;}
.price-wrap{max-width:1120px;margin:0 auto;padding:140px 32px 100px;}
.price-head{text-align:center;max-width:680px;margin:0 auto 20px;}
.price-badge{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#5FD69E;border:1px solid rgba(95,214,158,.3);border-radius:100px;padding:7px 16px;margin-bottom:26px;}
.price-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6vw,68px);line-height:1;letter-spacing:-.025em;margin-bottom:20px;}
.price-head p{font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--text2);}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px;}
.tier{position:relative;display:flex;flex-direction:column;padding:34px 26px 30px;border-radius:18px;
  border:1px solid rgba(95,214,158,.13);background:linear-gradient(170deg,rgba(19,40,30,.5),rgba(9,16,12,.42));
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);}
.tier:hover{transform:translateY(-5px);border-color:rgba(95,214,158,.4);box-shadow:0 20px 60px -24px rgba(20,120,70,.5);}
.tier.featured{border-color:rgba(95,214,158,.55);background:linear-gradient(170deg,rgba(26,58,42,.66),rgba(11,22,16,.55));
  box-shadow:0 0 60px -20px rgba(40,200,120,.5);}
.tier-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:#5FD69E;padding:5px 12px;border-radius:100px;font-weight:600;}
.tier-name{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;margin-bottom:8px;}
.tier-for{font-size:13.5px;color:var(--text2);line-height:1.5;min-height:42px;margin-bottom:18px;}
.tier-price{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.tier-feats{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:26px;flex:1;}
.tier-feats li{position:relative;padding-left:24px;font-size:14px;line-height:1.5;color:rgba(243,239,230,.82);}
.tier-feats li::before{content:'';position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c9ffe4,#3fce8c 55%,#0c5a34);}
.tier-cta{display:block;text-align:center;text-decoration:none;font-family:var(--font-body);font-weight:500;font-size:14px;
  padding:13px 18px;border-radius:100px;border:1px solid rgba(95,214,158,.3);color:var(--parchment);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);}
.tier-cta:hover{background:rgba(95,214,158,.12);border-color:rgba(95,214,158,.6);color:#d6ffe9;}
.tier.featured .tier-cta{background:#5FD69E;color:var(--ink);border-color:#5FD69E;font-weight:600;}
.tier.featured .tier-cta:hover{background:#8bf0bd;}
.price-note{text-align:center;color:var(--text3);font-size:13px;margin-top:44px;line-height:1.6;}
.price-back{display:inline-block;margin-top:12px;color:#5FD69E;text-decoration:none;font-size:13px;}
.price-back:hover{text-decoration:underline;}
@media(max-width:900px){.price-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr;}}

/* ══════════════════════════════════════════════════════════════════
   SCROLL PERSONALITIES — no explainer section scrolls "normal"
   ══════════════════════════════════════════════════════════════════ */

/* THE SPLIT (What) — pinned; the six senses fly out of the core centre.
   JS sets each card's transform+opacity from pinProgress, so no transitions here. */
.split-pin{height:300vh;}
.split-pin .pin-viewport{align-items:center;}
.split-stage{max-width:1040px;width:100%;margin:0 auto;padding:0 32px;}
.split-title{margin-bottom:clamp(28px,5vh,54px);}
.split-pin .cap{opacity:0;transform:translate(0,0) scale(.15);will-change:transform,opacity;
  transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);}

/* THE FORGE (Studio) — pinned; molten fill advances, stages ignite in sequence. */
.forge-pin{height:340vh;}
.forge-stage{max-width:1040px;width:100%;margin:0 auto;padding:0 32px;}
.forge-pin .forge-pool{height:118px;margin:0 0 28px;}
.forge-line{position:relative;height:3px;border-radius:3px;background:rgba(95,214,158,.12);margin:0 0 30px;overflow:hidden;}
.forge-line #forge-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#1f8a56,#8bf0bd);box-shadow:0 0 18px rgba(80,240,150,.85);transition:width .12s linear;}
.forge-pin .forge-step{opacity:.3;transform:none;
  transition:opacity .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);}
.forge-pin .forge-step.lit{opacity:1;border-color:rgba(95,214,158,.5);
  box-shadow:0 0 34px -10px rgba(60,220,140,.7);transform:translateY(-3px);}
.forge-pin .forge-step.lit .fs-i{color:#8bf0bd;}

/* PRICING — cast-in: tiers rise out of a molten line, staggered (inline observer). */
.tier{opacity:0;transform:translateY(46px) scale(.965);
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);}
.tier.cast{opacity:1;transform:none;}
.price-grid{position:relative;}
.price-grid::before{content:'';position:absolute;left:8%;right:8%;bottom:-14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(95,214,158,.5),transparent);box-shadow:0 0 26px rgba(70,230,150,.5);}

@media(max-width:820px){
  .split-pin,.forge-pin{height:auto;}
  .split-pin .pin-viewport,.forge-pin .pin-viewport{position:relative;height:auto;padding:80px 24px;}
  .split-pin .cap{opacity:1 !important;transform:none !important;}
  .forge-pin .forge-step{opacity:1;}
}

/* ═══════════════════════════════════════════════════════════════════
   APPLE THEME (dark) — one palette, SF system type, blue accent.
   Re-themes the entire site; the 3D hero + scroll features are untouched.
   Layered last so it overrides the original Bronze & Ink styling.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#000000; --ink2:#1d1d1f; --umber:#1d1d1f;
  --bronze:#34d399; --bronze-light:#6ee7b7;
  --parchment:#f5f5f7; --text2:#a1a1a6; --text3:#6e6e73;
  --border:rgba(255,255,255,.12);
  --accent:#34d399;
  --card:#1d1d1f; --radius:20px;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}
html,body{background:#000;}
body{color:var(--parchment);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
::selection{background:#34d399;color:#fff;}

/* Headlines — SF, semibold, tight tracking + leading (the Apple look) */
h1,h2,h3,h4,.t-hero,.c-title,.sec-title,.price-head h1,.h-cap h3,.c-facet h3,.forge-step h4,.approach-inner h2,.tier-name{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.022em;}
.t-hero,.c-title,.sec-title,.price-head h1{font-weight:600;letter-spacing:-.035em;line-height:1.05;}

/* Eyebrows — Apple: clean sans, sentence case, blue accent, no mono, no glow, no border */
.c-eyebrow,.sec-eyebrow,.t-eyebrow,.reveal-eyebrow,.price-badge{
  font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--accent);
  font-size:clamp(14px,1.4vw,18px);font-weight:600;text-shadow:none;border:none;padding:0;background:none;}
.c-facet-label,.h-cap-num,.fs-i,.tier-price{
  font-family:var(--font-body)!important;text-transform:none!important;letter-spacing:0!important;color:var(--text2);}

/* Secondary text everywhere */
.sec-lead,.c-facet p,.t-sub,.c-sub,.price-head p,.cap p,.forge-step p,.h-cap p,.tier-for,.tier-feats li,.price-note,.footer p,.reveal-eyebrow{
  color:var(--text2);}

/* Nav — Apple frosted bar, always visible */
.nav{opacity:1!important;transform:none!important;pointer-events:auto!important;padding:0;
  background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.1);}
.nav-inner{height:48px;max-width:1024px;}
.nav-logo-text{color:var(--parchment);font-weight:600;font-size:15px;}
.nav-logo-mark{filter:brightness(0) invert(1);opacity:.92;}
/* padding:14px 2px (not 0) — the Apple-theme pass zeroed this out, shrinking the tap
   target to just the text's own line-height (~14px, well under the ~44px mobile tap-
   target minimum). Vertical padding is invisible (transparent background) so it doesn't
   change how the nav looks, only how forgiving it is to tap — fits inside .nav-inner's
   fixed 48px height via flex centering. */
.nav-cta{color:var(--parchment);opacity:.82;font-size:12px;font-weight:400;border:none!important;padding:14px 2px;}
.nav-cta:hover{color:#fff;opacity:1;border:none;}
.nav-cta-strong{color:var(--accent);opacity:1;}
.nav-cta-strong:hover{color:var(--accent);}

/* Buttons — Apple blue pill */
.activate-btn,.join-btn{
  background:var(--accent);color:#fff;border:none;border-radius:980px;font-family:var(--font-body);
  font-weight:400;font-size:15px;padding:14px 26px;transition:background .25s ease,transform .25s ease;}
.activate-btn:hover,.join-btn:hover{background:#4be0a0;color:#fff;transform:none;}
.skip-tunnel{border:none;color:var(--text2);text-transform:none;letter-spacing:0;font-family:var(--font-body);background:none;}
.skip-tunnel:hover{color:var(--accent);border:none;}

/* Cards — Apple: dark elevated, big radius, hairline border, no coloured glow */
.cap,.forge-step,.tier,.h-cap,.device-frame{
  background:var(--card)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:var(--radius)!important;box-shadow:none!important;}
.cap:hover,.forge-step:hover,.tier:hover{border-color:rgba(255,255,255,.18)!important;background:#232325!important;box-shadow:none!important;}
.tier.featured{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent)!important;}
.tier-tag{background:var(--accent);color:#fff;}
.forge-line{background:rgba(255,255,255,.1);}
.forge-line #forge-fill{background:var(--accent);box-shadow:none;}
.forge-pin .forge-step.lit{border-color:var(--accent)!important;box-shadow:none!important;}
.forge-pin .forge-step.lit .fs-i{color:var(--accent);}

/* Neutralise the green UI accents (the 3D core keeps its green — this is just chrome) */
.cap-orb{background:radial-gradient(circle at 34% 28%,#f5f5f7 0%,#a1a1a6 30%,#48484a 66%,#1d1d1f 100%);
  box-shadow:0 0 20px rgba(255,255,255,.12),inset 0 -6px 12px rgba(0,0,0,.5),inset 0 3px 6px rgba(255,255,255,.5);}
.cap:hover .cap-orb{box-shadow:0 0 26px rgba(52,211,153,.55),inset 0 -6px 12px rgba(0,0,0,.5),inset 0 3px 6px rgba(255,255,255,.5);}
.forge-molten{background:radial-gradient(ellipse at center,rgba(52,211,153,.45),rgba(20,90,180,.18) 45%,transparent 72%);}
.forge-prompt{color:#fff;text-shadow:0 0 20px rgba(52,211,153,.6);}
.tier-feats li::before{background:var(--accent);}
.price-grid::before{background:linear-gradient(90deg,transparent,rgba(52,211,153,.5),transparent);box-shadow:0 0 26px rgba(52,211,153,.4);}
.tier-price{border-bottom:1px solid var(--border);color:var(--text3);}
.price-back{color:var(--accent);}

/* Section backgrounds — Apple black, subtle near-black alternation */
.post-tunnel,.split-section,.forge-section,.split-pin,.h-caps-section,.chapter-honest,.chapter-access{background:#000;}
.forge-pin{background:linear-gradient(180deg,#000,#0a0a0b 50%,#000);}
body.page{background:#000;}

/* Apple theme — tier CTAs (fix leftover green): filled blue for featured, blue-outline otherwise */
.tier-cta{border:1px solid var(--accent)!important;color:var(--accent)!important;background:transparent!important;
  border-radius:980px!important;font-weight:400!important;}
.tier-cta:hover{background:var(--accent)!important;color:#fff!important;}
.tier.featured .tier-cta{background:var(--accent)!important;color:#fff!important;}
.tier.featured .tier-cta:hover{background:#4be0a0!important;}

/* ═══ Pricing comparison matrix (C1) — features × tiers, recommended column ═══ */
.pm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:56px;padding-bottom:6px;}
.price-matrix{display:grid;grid-template-columns:minmax(230px,1.9fr) repeat(4,minmax(132px,1fr));min-width:880px;position:relative;}
.pm-head,.pm-row{display:contents;}

/* header row */
.pm-corner{display:flex;flex-direction:column;justify-content:flex-end;padding:0 18px 24px;}
.pm-corner-t{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;}
.pm-corner-s{color:var(--text2);font-size:13px;line-height:1.45;margin-top:7px;max-width:230px;}
.pm-tier{text-align:center;padding:24px 16px 22px;position:relative;}
.pm-tier .pm-name{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em;}
.pm-tier .pm-for{color:var(--text2);font-size:12.5px;line-height:1.4;margin:7px auto 14px;min-height:36px;max-width:150px;}
.pm-tier .pm-price{font-size:11px;color:var(--text3);margin-bottom:16px;letter-spacing:.01em;}
.pm-cta{display:inline-block;padding:9px 18px;font-size:13px;border-radius:980px!important;}
.pm-tag{display:inline-block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#04140c;
  background:var(--accent);border-radius:100px;padding:4px 11px;margin-bottom:11px;font-weight:600;}

/* featured column band */
.pm-featured{background:rgba(52,211,153,.06);}
.pm-tier.pm-featured{border:1px solid rgba(52,211,153,.55);border-bottom:none;border-radius:16px 16px 0 0;background:rgba(52,211,153,.09);}

/* group + rows */
.pm-group{grid-column:1/-1;font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text2);padding:30px 18px 12px;border-bottom:1px solid var(--border);}
.pm-feat{padding:15px 18px;font-size:14px;color:var(--parchment);border-bottom:1px solid rgba(255,255,255,.055);display:flex;align-items:center;}
.pm-v{padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.055);display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--text2);text-align:center;}
.pm-v.txt{color:var(--parchment);font-weight:500;}
.pm-v.yes::before{content:'✓';display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--accent);color:#04140c;font-size:12.5px;font-weight:700;}
.pm-v.no::before{content:'—';color:var(--text3);font-size:15px;}

/* the whole matrix is one card */
.price-matrix{border:1px solid rgba(255,255,255,.08);border-radius:20px;background:#1d1d1f;overflow:hidden;}
.pm-group:first-of-type{border-top:1px solid var(--border);}
.pm-row:last-child .pm-feat,.pm-row:last-child .pm-v{border-bottom:none;}

@media(max-width:560px){
  .pm-corner-t{font-size:18px;} .pm-tier .pm-name{font-size:17px;}
}

/* ═══ O-AI Studio — "The Cast" (B-α): scroll-scrubbed AI assembly ═══ */
.cast-stage{max-width:1040px;width:100%;margin:0 auto;padding:0 32px;text-align:center;}
.cast-stage .sec-eyebrow,.cast-stage .sec-title{text-align:center;}
.cast-prompt{font-family:"JetBrains Mono",var(--font-mono);font-size:clamp(13px,1.5vw,16px);color:var(--text2);
  margin:16px 0 24px;opacity:.55;}
.cast-canvas{position:relative;height:min(46vh,400px);display:flex;align-items:center;justify-content:center;margin:0 auto;}
.cast-unit{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center;will-change:transform;}
.cast-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
.cast-ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:2;}
.cast-ring-fg{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:703;stroke-dashoffset:703;filter:drop-shadow(0 0 6px rgba(52,211,153,.6));}
.cast-core{width:100px;height:100px;border-radius:28px;
  background:radial-gradient(circle at 36% 30%,#eafff5,#5fe6a0 34%,#1f8a56 70%,#06301c 100%);
  box-shadow:0 0 44px rgba(52,211,153,.35),inset 0 -8px 16px rgba(0,0,0,.5),inset 0 4px 8px rgba(255,255,255,.42);}
.cast-stamp{position:absolute;bottom:2px;right:-10px;font-family:var(--font-body);font-weight:600;font-size:12px;
  color:#04140c;background:var(--accent);padding:5px 12px;border-radius:100px;box-shadow:0 6px 18px rgba(52,211,153,.45);
  opacity:0;transform:scale(1.6) rotate(-8deg);will-change:transform,opacity;}
.cast-mod{position:absolute;left:50%;top:50%;font-family:var(--font-body);font-weight:500;font-size:12.5px;
  color:var(--parchment);background:#232325;border:1px solid rgba(255,255,255,.14);border-radius:100px;
  padding:7px 15px;white-space:nowrap;opacity:0;will-change:transform,opacity;}
.cast-shelf{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:min(380px,82%);height:2px;
  background:linear-gradient(90deg,transparent,rgba(52,211,153,.5),transparent);opacity:0;transition:opacity .4s;}
.cast-shelf span{position:absolute;left:50%;top:12px;transform:translateX(-50%);font-family:var(--font-body);
  font-size:12px;color:var(--text2);white-space:nowrap;}
.cast-caption{font-family:var(--font-body);font-size:clamp(15px,1.6vw,18px);color:var(--parchment);
  margin-top:34px;min-height:26px;font-weight:500;}
@media(max-width:820px){ .forge-pin{height:auto;} .forge-pin .pin-viewport{position:relative;height:auto;padding:80px 24px;} }

/* ═══ Stat band (D4) — count-up proof numbers ═══ */
.stat-band{background:#000;padding:clamp(64px,10vh,120px) 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.stat-inner{max-width:1040px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.stat{text-align:center;}
.stat-num{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,5.5vw,66px);letter-spacing:-.03em;color:var(--parchment);line-height:1;}
.stat-lbl{color:var(--text2);font-size:14px;margin-top:13px;}
@media(max-width:700px){.stat-inner{grid-template-columns:repeat(2,1fr);gap:40px 24px;}}

/* ══════════════ W1 — THE LIVING CORE (#what) ══════════════ */
.sense-pin{height:360vh;background:#000;}
.sense-pin .pin-viewport{align-items:center;justify-content:center;flex-direction:column;}
.sense-stage{width:100%;text-align:center;}
.sense-title{margin-bottom:6px;}
.sense-arena{position:relative;width:min(760px,88vw);height:min(560px,62vh);margin:26px auto 74px;}
.sense-canvas{position:absolute;inset:0;width:100%;height:100%;}
/* Centering is done ENTIRELY via the JS transform (translate(-50%,-50%) translate(x,y) in
   layoutSenses()) — no margin-left/margin-top here. They used to duplicate that same
   half-width/half-height shift, stacking with the transform's own -50% to push every node
   a full extra half-width too far up-left. Harmless-looking on the wide desktop arena; on
   mobile it's exactly what pushed captions up to 70px past the viewport edge. */
.sense-node{position:absolute;left:0;top:0;width:158px;
  text-align:center;opacity:.25;transition:opacity .5s ease;pointer-events:none;}
.sense-node b{display:block;font-family:var(--font-display);font-weight:600;font-size:16px;
  color:var(--parchment);letter-spacing:-.01em;margin-top:4px;}
.sense-node i{display:block;font-style:normal;font-size:12px;color:var(--text2);margin-top:2px;line-height:1.35;}
.sense-ico{display:inline-flex;align-items:center;justify-content:center;height:28px;}
.sense-ico svg{width:40px;height:26px;overflow:visible;}
.sense-ico *{fill:var(--accent);stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sense-focus{position:absolute;left:0;right:0;bottom:-58px;text-align:center;pointer-events:none;}
.sense-focus-k{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:3px;}
.sense-focus-t{display:inline-block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(22px,3.4vw,34px);color:var(--parchment);letter-spacing:-.02em;}
.sense-focus-t.pop{animation:sensePop .5s cubic-bezier(.2,.8,.2,1);}
@keyframes sensePop{0%{opacity:.2;transform:translateY(8px) scale(.96);}100%{opacity:1;transform:none;}}

/* ══════════════ S1 — TYPE-TO-BUILD STUDIO (#studio) ══════════════ */
.studio-build{background:linear-gradient(180deg,#000,#070708 50%,#000);padding:clamp(84px,13vh,150px) 24px;}
.sb-inner{max-width:1000px;margin:0 auto;text-align:center;}
.sb-sub{color:var(--text2);font-size:clamp(15px,1.7vw,18px);max-width:560px;margin:14px auto 0;line-height:1.5;}
.sb-console{max-width:620px;margin:30px auto 0;}
.sb-inputrow{display:flex;align-items:center;gap:10px;background:#1d1d1f;
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:11px 12px 11px 16px;transition:border-color .25s;}
.sb-inputrow:focus-within{border-color:rgba(52,211,153,.6);}
.sb-caret{color:var(--accent);font-family:var(--font-mono);font-size:18px;line-height:1;}
.sb-input{flex:1;background:none;border:0;outline:none;color:var(--parchment);
  font-family:var(--font-body);font-size:16px;}
.sb-input::placeholder{color:#6b6b70;}
.sb-go{background:var(--accent);color:#04140c;border:0;border-radius:11px;padding:10px 20px;
  font-family:var(--font-body);font-weight:600;font-size:15px;cursor:pointer;transition:transform .15s,filter .2s;}
.sb-go:hover{filter:brightness(1.08);transform:translateY(-1px);}
.sb-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;}
.sb-chip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--text2);
  border-radius:999px;padding:11px 14px;font-family:var(--font-body);font-size:13px;cursor:pointer;transition:.2s;}
.sb-chip:hover{color:var(--parchment);border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.08);}
.sb-stage{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center;
  max-width:800px;margin:52px auto 0;text-align:left;}
.sb-core{position:relative;width:240px;height:240px;margin:0 auto;}
.sb-ring{position:absolute;inset:0;transform:rotate(-90deg);}
.sb-ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:3;}
.sb-ring-fg{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset .65s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 6px rgba(52,211,153,.6));}
.sb-core-glow{position:absolute;inset:33%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#eafff5,#34d399 46%,#0b6b47);
  box-shadow:0 0 46px rgba(52,211,153,.5);animation:sbPulse 3.2s ease-in-out infinite;}
.sb-stage.building .sb-core-glow{animation-duration:1.1s;}
@keyframes sbPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
.sb-name{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;
  z-index:2;font-family:var(--font-display);font-weight:600;font-size:15px;color:#04140c;
  padding:0 20px;opacity:0;transition:opacity .4s;pointer-events:none;}
.sb-name.on{opacity:1;}
.sb-stamp{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%) scale(1.5) rotate(-8deg);
  opacity:0;background:var(--accent);color:#04140c;font-family:var(--font-body);font-weight:600;
  font-size:12px;padding:5px 12px;border-radius:999px;transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.3,1.2);}
.sb-stamp.on{opacity:1;transform:translateX(-50%) scale(1) rotate(0);}
.sb-steps{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0;padding:0;}
.sb-step{display:flex;align-items:center;gap:13px;color:var(--text2);opacity:.45;
  font-size:15px;transition:opacity .3s,color .3s;}
.sb-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;flex:0 0 auto;transition:.3s;}
.sb-step.on{opacity:1;color:var(--parchment);}
.sb-step.on .sb-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 12px var(--accent);}
.sb-step.done{opacity:.85;color:var(--parchment);}
.sb-step.done .sb-dot{background:var(--accent);border-color:var(--accent);box-shadow:none;}
.sb-status{margin-top:18px;color:var(--text2);font-size:14px;min-height:20px;line-height:1.4;}
.sb-skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;opacity:0;transition:opacity .3s;}
.sb-skills.on{opacity:1;}
.sb-pill{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35);color:#8ff0c2;
  border-radius:999px;padding:5px 12px;font-size:12.5px;opacity:0;transform:translateY(6px);transition:.35s;}
.sb-pill.on{opacity:1;transform:none;}
.sb-library{max-width:800px;margin:44px auto 0;text-align:left;}
.sb-lib-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.sb-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:14px;}
.sb-lib-card{background:#1d1d1f;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;
  opacity:0;transform:translateY(10px);transition:.45s cubic-bezier(.2,.8,.2,1);}
.sb-lib-card.on{opacity:1;transform:none;}
.sb-lib-check{display:inline-block;color:var(--accent);font-weight:700;margin-bottom:6px;}
.sb-lib-card b{display:block;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--parchment);}
.sb-lib-card i{display:block;font-style:normal;font-size:12px;color:var(--text2);margin-top:3px;}
@media(max-width:820px){
  .sense-pin{height:auto;}
  .sense-pin .pin-viewport{position:relative;height:auto;padding:70px 20px;}
  .sense-arena{height:min(460px,74vw);margin-bottom:64px;}
  .sb-stage{grid-template-columns:1fr;gap:28px;}
  /* Narrower caption box on phones — layoutSenses() in script.js measures this width
     live (offsetWidth) and keeps the orbit radius inside the arena accordingly, so this
     and the JS stay in sync automatically at any width. */
  .sense-node{width:112px;}
  .sense-node b{font-size:13.5px;}
  .sense-node i{font-size:10.5px;}
}

/* ══════════════ C1 "IGNITION" — cinematic tunnel overlay ══════════════ */
/* overflow:hidden contains its own oversized child .cine-grain (inset:-50%,
   intentionally larger than the viewport for its pan animation). Turned out NOT to be
   the cause of the real horizontal-scroll bug that was here (that was .c-panel's
   ::before scrim, fixed separately, see .c-panel) — kept anyway as cheap, harmless
   defense-in-depth for an element that's deliberately oversized on purpose. */
.tunnel-cine{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .45s ease;overflow:hidden;}
.tunnel-cine.on{opacity:1;}
.cine-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.58) 100%);}
.cine-grain{position:absolute;inset:-50%;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%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)'/%3E%3C/svg%3E");
  animation:cineGrain .5s steps(3) infinite;}
@keyframes cineGrain{0%{transform:translate(0,0)}33%{transform:translate(-6%,3%)}66%{transform:translate(4%,-5%)}100%{transform:translate(0,0)}}
.cine-bar{position:absolute;left:0;right:0;height:0;background:#000;}
.cine-bar-top{top:0;}
.cine-bar-bottom{bottom:0;}
.cine-flash{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0;
  background:radial-gradient(circle at center,#f2fff9,#2bff9e 58%,#0d6b45);}