/* ============ GRAVITY · Phase 2 · tokens ============ */
@font-face{
  font-family:"ChakraPetch";
  src:url("../assets/fonts/chakra-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"ChakraPetch";
  src:url("../assets/fonts/chakra-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"ChakraPetch";
  src:url("../assets/fonts/chakra-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../assets/fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
:root{
  --void:#0A0A0E;
  --charcoal:#15151C;
  --chrome:#E9E9F2;
  --smoke:#9091A3;
  --dim:#7C7A94;
  --uv:#8B7CFF;
  --uv-soft:#4A4370;
  --stroke:#252533;
  --disp:"Archivo","Helvetica Neue",-apple-system,"Segoe UI",Arial,sans-serif;
  --body:"Helvetica Neue",-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"ChakraPetch",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; /* NB Architekt stand-in — the HUD voice */
}

*{box-sizing:border-box;}
/* ---- intro: honest AT-style counter, capped ~1.6s, skippable ---- */
.intro{
  position:fixed; inset:0; z-index:60; background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .45s ease; pointer-events:auto;
}
.intro.done{pointer-events:none;}
.intro-enter{
  font-family:var(--mono); font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--chrome); background:transparent; border:1px solid var(--uv-soft);
  border-radius:99px; padding:16px 30px; cursor:pointer;
  opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease, border-color .3s ease, box-shadow .3s ease;
}
.intro-enter.ready{opacity:1; transform:none; animation:gatePulse 2.2s ease-in-out infinite;}
.intro-enter:hover,.intro-enter:focus-visible{border-color:var(--uv); box-shadow:0 0 34px rgba(139,124,255,.35); animation:none;}
@keyframes gatePulse{0%,100%{box-shadow:0 0 0 rgba(139,124,255,0)}50%{box-shadow:0 0 30px rgba(139,124,255,.3)}}
.intro-skip{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--dim); margin:2px 0 0;
}
.intro.done{opacity:0;}
.intro-dome{
  margin:0; font-family:var(--mono); font-size:11px; line-height:1.15; letter-spacing:.06em;
  color:var(--uv); opacity:.75; text-align:center; user-select:none;
}
.intro-count{
  font-family:var(--mono); font-size:15px; letter-spacing:.22em; color:var(--chrome);
}
body.t0 .intro{display:none;}
html{scroll-behavior:auto;}
body{
  margin:0; background:var(--void); color:var(--chrome);
  font-family:var(--body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.skip{
  position:fixed; z-index:50; left:16px; top:-56px; padding:12px 18px;
  background:var(--chrome); color:var(--void); border-radius:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; transition:top .15s ease;
}
.skip:focus-visible{top:16px;}

/* ============ nav ============ */
.nav{
  position:fixed; z-index:40; inset:0 0 auto 0;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 28px; pointer-events:none;
}
.nav a,.nav button{pointer-events:auto;}
.nav-mark{
  font-family:var(--disp); font-weight:850; font-size:20px; letter-spacing:-.01em;
  text-decoration:none; padding:11px 12px; margin:-11px -12px;
}
.nav-mark .d{color:var(--chrome);}
.nav-mark .c{color:var(--uv);}
.nav-cta{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--chrome); text-decoration:none; padding:11px 4px;
  transition:color .22s ease; white-space:nowrap;
}
.nav-cta:hover,.nav-cta:focus-visible{color:var(--uv);}
.nav-pill{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--stroke); border-radius:99px; padding:4px 18px 4px 8px;
  background:rgba(10,10,14,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -8px rgba(139,124,255,.28);
}
.pill-line{width:34px; height:1px; background:var(--dim); opacity:.6;}
.nav-sound{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--smoke); background:transparent; border:0; padding:11px 4px;
  transition:color .22s ease;
}
.nav-sound:hover,.nav-sound:focus-visible{color:var(--chrome);}
.sb-off{white-space:nowrap;}
.sb-track{display:none; width:118px; overflow:hidden; white-space:nowrap; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.sb-marquee{display:inline-block; animation:marq 9s linear infinite; letter-spacing:.08em;}
.nav-sound.playing .sb-off{display:none;}
.nav-sound.playing .sb-track{display:block;}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.sb-bars{display:flex; align-items:flex-end; gap:2px; height:12px;}
.sb-bars i{width:2px; height:5px; background:var(--dim); border-radius:1px; transition:background .2s ease;}
.nav-sound.playing{color:var(--chrome); border-color:var(--uv);}
.nav-sound.playing .sb-bars i{background:var(--uv); animation:eq .9s ease-in-out infinite;}
.nav-sound.playing .sb-bars i:nth-child(2){animation-delay:.2s;}
.nav-sound.playing .sb-bars i:nth-child(3){animation-delay:.45s;}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}
a:focus-visible{outline:2px solid var(--uv); outline-offset:3px;}

/* ============ film layer ============ */
.film{position:fixed; inset:0; z-index:1;}
#stageCanvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1.2s ease;
}
#stageCanvas.on{opacity:1;}
.fluid{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; mix-blend-mode:screen; opacity:.85;
}

.poster{position:absolute; inset:0; overflow:hidden;}
.poster-ball{
  position:absolute; left:50%; top:44%; width:min(74vmin,680px); height:min(74vmin,680px);
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFFFFF 0%, #D4C8FF 14%, #A894F5 34%, #3C3055 64%, #14101E 88%);
  box-shadow:inset -24px -32px 64px rgba(0,0,0,.55), 0 0 90px rgba(139,124,255,.2);
}
.poster-ball::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    repeating-linear-gradient(0deg, rgba(10,10,16,.28) 0 1px, transparent 1px 8%),
    repeating-linear-gradient(90deg, rgba(10,10,16,.28) 0 1px, transparent 1px 7%);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 62%, transparent 71%);
  mask:radial-gradient(circle at 50% 50%, #000 62%, transparent 71%);
}
.poster-ball::before{
  content:""; position:absolute; inset:-2%; border-radius:50%;
  background:radial-gradient(circle at 72% 78%, rgba(139,124,255,.42), transparent 44%);
}
.film.webgl .poster{display:none;}

/* ============ copy layer ============ */
.copy-layer{position:fixed; inset:0; z-index:20; pointer-events:none;}
.copy-layer a{pointer-events:auto;}
.beat{position:absolute; inset:0;}

/* SC01 hero */
.beat-hero{
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:0 max(28px,5vw) calc(10vh + env(safe-area-inset-bottom,0px));
  background:linear-gradient(75deg, rgba(10,10,14,.78) 0%, rgba(10,10,14,.42) 38%, rgba(10,10,14,.08) 62%, transparent 78%);
}
.h1,.lede,.kick{text-shadow:0 1px 24px rgba(10,10,14,.55);}
.kick{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--smoke); margin:0 0 18px;
}
.h1{
  font-family:var(--disp);
  font-size:clamp(34px,5.6vw,74px); font-weight:800; letter-spacing:-.04em;
  line-height:.98; margin:0 0 20px; text-wrap:balance;
}
.lede{
  font-size:clamp(14px,1.35vw,17px); line-height:1.6; color:var(--smoke);
  margin:0 0 30px; font-weight:400;
}
.cta{
  display:inline-block; position:relative; overflow:hidden;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--void); background:var(--chrome); text-decoration:none;
  border-radius:99px; padding:15px 26px;
  transition:color .22s ease;
}
.cta::before{
  content:""; position:absolute; inset:0; background:var(--uv);
  transform:translateX(-101%); transition:transform .22s cubic-bezier(.4,0,.2,1);
  border-radius:99px;
}
.cta:hover::before,.cta:focus-visible::before{transform:translateX(0);}
.cta:hover,.cta:focus-visible{color:var(--void);}
.cta > *{position:relative;}
.cta-ghost{background:transparent; color:var(--chrome); border:1px solid var(--stroke);}
.cta-ghost:hover,.cta-ghost:focus-visible{color:var(--void);}
@media (hover:none){
  .cta:active::before{transform:translateX(0); transition-duration:.1s;}
  .cta:active{color:var(--void);}
}

/* SC02/06 wordmark */
.beat-wordmark{
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding-bottom:8vh; text-align:center;
  opacity:0; visibility:hidden;
}
.beat-wordmark::before{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(1200px,100vw); height:52vh; pointer-events:none;
  background:radial-gradient(ellipse at 50% 82%, rgba(10,10,14,.85) 0%, rgba(10,10,14,.55) 42%, rgba(10,10,14,0) 72%);
}
.beat-wordmark > *{position:relative;}
.wm{
  font-family:var(--disp);
  font-size:clamp(40px,8.5vw,110px); font-weight:850; letter-spacing:-.025em; line-height:1;
  white-space:nowrap;
}
.wm > span{display:inline-block;}
/* dimensional type: gradient fill like the ball's facets + extruded drop shadows */
.wm-d,.wm-rest1{
  background:linear-gradient(180deg,#FFFFFF 0%,#EDEAF7 38%,#B3ABD6 68%,#7B739F 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wm-c,.wm-rest2{
  background:linear-gradient(180deg,#D3C7FF 0%,#9D8DFF 45%,#6A5AE0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wm{
  filter:
    drop-shadow(0 2px 0 rgba(20,15,38,.9))
    drop-shadow(0 6px 2px rgba(10,10,14,.75))
    drop-shadow(0 16px 34px rgba(10,10,14,.65))
    drop-shadow(0 0 46px rgba(139,124,255,.28));
}
.wm-rest{overflow:hidden; vertical-align:bottom;}
.wm-rest1{max-width:2.6em;}
.wm-rest2{max-width:3.6em;}
.wm-line{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--chrome); margin:16px 0 0; text-shadow:0 1px 18px rgba(10,10,14,.9);
}
.wm-end{
  margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:16px;
  opacity:0;
}
.wm-end .micro{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin:0;
}

/* scene lines (SC03/04/05) */
.scene-line{
  position:absolute; left:50%; transform:translateX(-50%); bottom:10vh;
  font-family:var(--disp); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(17px,2.1vw,26px); line-height:1.3; text-align:center;
  color:var(--chrome); margin:0; opacity:0; visibility:hidden;
  text-shadow:0 1px 28px rgba(10,10,14,.7); max-width:min(88vw,760px);
  /* P6 readability law: copy rides a scrim — the world's glow never wins over words */
  padding:14px 28px; border-radius:14px;
  background:radial-gradient(closest-side, rgba(8,6,14,.66), rgba(8,6,14,0));
}
.ramp-a{
  padding:20px 34px; border-radius:16px;
  background:radial-gradient(closest-side, rgba(8,6,14,.7), rgba(8,6,14,0));
}
@media (orientation:portrait){
  /* three clean zones: line top - ball middle - card bottom */
  .scene-line{bottom:auto; top:calc(14vh + env(safe-area-inset-top,0px)); font-size:clamp(16px,4.6vw,22px);}
}

.intro-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--uv);
  margin:18px 0 2px; text-transform:uppercase;
}

/* HUB 01: the flip — Disco Mode switches ON */
.line-flip{font-size:clamp(30px,4.6vw,54px); font-weight:800; letter-spacing:-.02em;}

/* Exit Ramp A — the hottest moment on the line gets the loudest ramp */
.ramp-a{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12vh;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; opacity:0; visibility:hidden;
}
.ramp-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--uv); margin:0;}
.ramp-ghost{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);}
@media (orientation:portrait){ .ramp-a{bottom:18vh;} }

.mono-block{
  position:absolute; right:max(28px,6vw); top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; line-height:1.7;
  color:var(--smoke); text-align:left; opacity:0; visibility:hidden; text-transform:uppercase;
}
.mono-block p{margin:0 0 16px;}
@media (orientation:portrait), (max-width:820px){.mono-block{display:none;}}

/* SC04 signal cards — anchored by JS 3D projection */
.sigcard{
  position:absolute; left:0; top:0; width:226px; z-index:22;
  background:rgba(13,11,22,.97); border:1px solid #32304a; border-left:3px solid var(--uv);
  border-radius:9px; padding:13px 15px; font-family:var(--mono);
  opacity:0; visibility:hidden; will-change:transform,opacity;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 18px 44px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(10,10,14,.6);
}
.sigcard .bh{
  display:flex; align-items:center; gap:6px; margin-bottom:7px;
  font-family:var(--body); font-size:11.5px; font-weight:700; color:#fff; letter-spacing:0;
}
.sigcard .bh .app{
  font-style:normal; font-size:8px; font-weight:700; letter-spacing:.04em;
  background:#5865F2; color:#fff; border-radius:4px; padding:1.5px 4px;
}
.sigcard .sk{font-size:9.5px; letter-spacing:.18em; color:var(--uv); text-transform:uppercase; display:block; margin-bottom:5px;}
.sigcard .sv{font-size:12.5px; color:var(--chrome); line-height:1.5; display:block;}
.sigcard .sv i{color:var(--smoke); font-style:normal;}

/* scroll hint */
.hint{
  position:absolute; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--dim); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hint-bar{
  width:1px; height:34px; background:linear-gradient(180deg,var(--uv),transparent);
  animation:hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ============ scroll stage — the film's honest length ============ */
.stage{height:1050vh;} /* the spiral earns its reading room — paired with the pacing plateaus */

/* ============ ACT II · the club levels + the spine ============ */
.levels{
  position:relative; z-index:25;
  background:linear-gradient(180deg, rgba(10,10,14,0) 0%, var(--void) 260px);
  padding:110px 0 90px;
}
.levels::before{ /* scanlines — the club's CRT haze */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(180deg, rgba(233,233,242,.022) 0 1px, transparent 1px 4px);
}
.levels > *{position:relative; z-index:2;}
.spine-gl-wrap{
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
}
.spine-gl{position:sticky; top:0; display:block; width:100%; height:100vh;}
@media (max-width:640px){.spine-gl-wrap{display:none;}}
.spine{
  position:absolute; top:0; bottom:120px; left:50%; width:2px;
  background:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(233,233,242,.5) 34px 38px),
    linear-gradient(180deg, var(--uv) 0%, rgba(139,124,255,.35) 30%, rgba(139,124,255,.5) 60%, transparent 100%);
  box-shadow:0 0 18px rgba(139,124,255,.35);
}
.level{
  --lvl:var(--uv);
  position:relative; max-width:1180px;
  margin:0 auto; padding:110px max(28px,4vw);
  perspective:1100px;
}
/* alternate sides of the center spine, AT work-section style */
.level:nth-of-type(odd) > *:not(.node):not(.level-num){width:min(560px,46%);}
.level:nth-of-type(even) > *:not(.node):not(.level-num){width:min(560px,46%); margin-left:auto;}
.level:nth-of-type(odd){transform-origin:left center;}
.level:nth-of-type(even){transform-origin:right center;}
#level-offer{--lvl:#8B7CFF;}
#level-engine{--lvl:#6FA8FF;}
#level-game{--lvl:#C26BFF;}
#level-receipts{--lvl:#9D5CFF;}
#level-vip{--lvl:#E8C97A;}
/* floor signage: giant outlined level number */
.level::before{
  content:attr(data-num); position:absolute; right:3%; top:26px; z-index:-1;
}
.level:nth-of-type(even)::before{right:auto; left:3%;}
.level::before{
  font-family:var(--disp); font-weight:900; line-height:1;
  font-size:clamp(96px,15vw,210px); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px var(--lvl); opacity:.16;
  pointer-events:none;
}
/* floor lighting: each level glows its own hue near the spine */
.level::after{
  content:""; position:absolute; left:-6%; top:14%; z-index:-1;
  width:min(560px,70vw); height:min(560px,70vw); pointer-events:none;
  background:radial-gradient(circle, var(--lvl) 0%, transparent 62%);
  opacity:.09;
}
.level.on .node{background:var(--lvl); border-color:var(--lvl); box-shadow:0 0 16px var(--lvl);}
.level .eyebrow{color:var(--lvl);}
.level .node{
  position:absolute; left:calc(50% - 5px); top:118px;
  width:12px; height:12px; border-radius:50%;
  background:var(--charcoal); border:2px solid var(--uv-soft);
  transition:background .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.level > *:not(.node){opacity:0; transform:translateY(46px); transition:opacity .6s ease, transform .6s ease;}
.level.on > *:not(.node){opacity:1; transform:none;}
.level.on > *:nth-child(3){transition-delay:.08s;}
.level.on > *:nth-child(4){transition-delay:.16s;}
.level.on > *:nth-child(5){transition-delay:.24s;}
.level.on > *:nth-child(6){transition-delay:.32s;}

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--uv); margin:0 0 14px;
}
.h2{
  font-family:var(--disp);
  font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.025em;
  line-height:1.08; margin:0 0 18px; text-wrap:balance;
  transition:text-shadow .18s ease;
}
.level:hover .h2{
  text-shadow:2px 0 0 rgba(194,107,255,.65), -2px 0 0 rgba(111,211,255,.6);
}
.body{color:var(--smoke); line-height:1.65; max-width:62ch; margin:0 0 30px;}
.body strong{color:var(--chrome);}

.lvl-menu{
  position:fixed; left:26px; bottom:28px; z-index:30;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  display:flex; flex-direction:column; gap:10px; white-space:nowrap;
  opacity:0; pointer-events:none; transform:translateY(14px);
  transition:opacity .4s ease, transform .4s ease;
}
.lvl-menu.show{opacity:1; pointer-events:auto; transform:none;}
.lvl-menu .lm-q{color:var(--chrome); margin:0 0 4px; font-size:11px;}
.lvl-menu a{color:var(--dim); text-decoration:none; transition:color .2s ease, transform .2s ease;}
.lvl-menu a:hover,.lvl-menu a:focus-visible{color:var(--uv); transform:translateX(4px);}
@media (max-width:1100px){.lvl-menu{display:none;}}

/* level 1 · offer */
.offer-row{display:flex; gap:14px; flex-wrap:wrap; margin:0 0 30px;}
.offer-card{
  flex:1 1 240px; border-radius:14px; padding:22px 24px;
  background:linear-gradient(160deg, rgba(233,233,242,.08), rgba(139,124,255,.04));
  border:1px solid rgba(200,185,255,.22);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px -28px rgba(0,0,0,.85);
}
.offer-card .price{
  font-family:var(--disp); font-size:clamp(30px,3.4vw,42px); font-weight:850;
  letter-spacing:-.03em; margin:0 0 8px; color:var(--chrome);
}
.offer-card .price .mo{font-size:.45em; font-weight:600; color:var(--smoke); letter-spacing:0;}
.offer-card .price-sub{font-size:13px; color:var(--smoke); line-height:1.55; margin:0;}
.offer-dim .price{color:var(--uv);}

/* dimensional cards: tilt in from the spine's axis, settle to a floating angle */
.offer-row,.steps,.mods{transform-style:preserve-3d;}
.offer-card,.steps li,.mod,.faq details{position:relative; overflow:hidden;}
.offer-card::after,.steps li::after,.mod::after{
  content:""; position:absolute; inset:-40% -60%; pointer-events:none;
  background:linear-gradient(115deg,
    transparent 42%,
    rgba(194,107,255,.10) 47%,
    rgba(233,233,242,.22) 50%,
    rgba(111,168,255,.10) 53%,
    transparent 58%);
  transform:translateX(-70%) rotate(0.001deg);
  transition:none;
}
.level.on .offer-card::after,.level.on .steps li::after,.level.on .mod::after{
  animation:sheen 7s ease-in-out infinite;
}
.level.on .offer-card:hover::after,.level.on .steps li:hover::after,.level.on .mod:hover::after{
  animation-duration:1.6s;
}
@keyframes sheen{
  0%, 62%{transform:translateX(-70%);}
  80%, 100%{transform:translateX(70%);}
}
.offer-card,.steps li,.mod{
  transform:rotateY(-16deg) rotateX(6deg) translateZ(-110px);
  opacity:0;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease, border-color .3s ease, box-shadow .3s ease;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);
}
.level.on .offer-card,.level.on .steps li,.level.on .mod{
  transform:rotateY(-7deg) rotateX(2.5deg) translateZ(0);
  opacity:1;
}
.level.on :is(.offer-card,.steps li,.mod).tilting{transition:opacity .8s ease, border-color .3s ease, box-shadow .3s ease;}
.level.on .offer-card:hover,.level.on .steps li:hover,.level.on .mod:hover{
  border-color:var(--lvl);
  box-shadow:0 34px 80px -24px rgba(0,0,0,.9), 0 0 32px -8px var(--lvl);
}
.level.on .steps li:nth-child(1){transition-delay:.06s;}
.level.on .steps li:nth-child(2){transition-delay:.13s;}
.level.on .steps li:nth-child(3){transition-delay:.20s;}
.level.on .steps li:nth-child(4){transition-delay:.27s;}
.level.on .steps li:nth-child(5){transition-delay:.34s;}
.level.on .steps li:nth-child(6){transition-delay:.41s;}
.level.on .mod:nth-child(2){transition-delay:.1s;}
.level.on .mod:nth-child(3){transition-delay:.2s;}
.level.on .mod:nth-child(4){transition-delay:.3s;}
.level.on .offer-card:nth-child(2){transition-delay:.12s;}

/* level 2 · steps (a true sequence — numbering carries meaning) */
.steps{
  list-style:none; counter-reset:step; margin:0 0 26px; padding:0;
  display:grid; gap:10px;
}
.steps li{
  counter-increment:step; position:relative;
  background:linear-gradient(160deg, rgba(233,233,242,.07), rgba(139,124,255,.03));
  border:1px solid rgba(200,185,255,.18); border-radius:12px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  padding:16px 18px 16px 58px; color:var(--smoke); line-height:1.55; font-size:14.5px;
}
.steps li b{color:var(--chrome); font-weight:700;}
.steps li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:18px; top:16px;
  font-family:var(--mono); font-size:12px; color:var(--uv); letter-spacing:.08em;
}

/* level 3 · modules */
.mods{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 8px;}
.mod{
  border:1px solid rgba(200,185,255,.18); border-radius:12px; padding:18px 20px;
  background:linear-gradient(160deg, rgba(233,233,242,.07), rgba(139,124,255,.03));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.mod-wide{grid-column:1 / -1;}
.mod b{display:block; font-size:15px; margin-bottom:6px; color:var(--chrome);}
.mod span{font-size:13px; color:var(--smoke); line-height:1.55; display:block;}

/* level 4 · stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.stat b{
  display:block; font-family:var(--disp); font-size:clamp(26px,3vw,40px); font-weight:850;
  letter-spacing:-.03em; color:var(--uv); font-variant-numeric:tabular-nums;
}
.stat span{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); line-height:1.6; display:block; margin-top:6px;}

/* vip */
.act2-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}
.book-form{margin:0 0 10px;}
.book-form .hp{position:absolute; left:-9999px;}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:680px; margin:0 0 26px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field-wide{grid-column:1 / -1;}
.field span{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}
.field input,.field select{
  background:rgba(21,21,28,.7); border:1px solid var(--stroke); border-radius:8px;
  color:var(--chrome); font-family:var(--body); font-size:14.5px; padding:13px 14px;
  transition:border-color .2s ease;
}
.field input::placeholder{color:var(--dim);}
.field input:focus-visible,.field select:focus-visible{outline:none; border-color:var(--uv);}
.book-form .cta{border:0; cursor:pointer; font-size:11.5px;}
.faq{display:grid; gap:8px; margin:0 0 44px; max-width:680px;}
.faq details{
  border:1px solid var(--stroke); border-radius:10px; background:rgba(21,21,28,.5);
}
.faq summary{
  cursor:pointer; padding:15px 18px; font-size:14.5px; font-weight:600; color:var(--chrome);
  list-style:none; position:relative; padding-right:40px;
}
.faq summary::after{
  content:"+"; position:absolute; right:18px; top:12px; color:var(--uv);
  font-family:var(--mono); font-size:16px;
}
.faq details[open] summary::after{content:"–";}
.faq summary::-webkit-details-marker{display:none;}
.faq details p{margin:0; padding:0 18px 16px; color:var(--smoke); font-size:13.5px; line-height:1.6; max-width:58ch;}
.fine{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin:0; line-height:2;
}

.cur{
  position:fixed; z-index:70; left:0; top:0; width:10px; height:10px; border-radius:50%;
  background:var(--uv); pointer-events:none; mix-blend-mode:difference;
  transform:translate(-100px,-100px); transition:width .2s ease, height .2s ease, margin .2s ease;
}
.cur.big{width:34px; height:34px; margin:-12px 0 0 -12px; background:var(--chrome);}
@media (pointer:coarse){.cur{display:none;}}

/* ============ T0 · reduced motion / no WebGL — editorial cut ============ */
@media (prefers-reduced-motion: reduce){
  .hint-bar{animation:none; opacity:.6;}
  .cta::before,.skip,.level > *:not(.node),.offer-card,.steps li,.mod{transition:none;}
  .level > *:not(.node),.offer-card,.steps li,.mod{opacity:1; transform:none;}
  .nav-sound.playing .sb-bars i{animation:none;}
  .sb-marquee{animation:none;}
  .offer-card::after,.steps li::after,.mod::after{animation:none !important;}
  .intro{display:none;}
  .cur{display:none;}
}
body.t0 .film{position:relative; height:52vh; height:52svh;}
body.t0 .poster-ball{top:50%; width:min(58vmin,440px); height:min(58vmin,440px);}
body.t0 .copy-layer{position:relative; pointer-events:auto;}
body.t0 .beat{position:relative; inset:auto; padding-top:7vh; padding-bottom:6vh;}
body.t0 .beat-wordmark{opacity:1; visibility:visible; padding-bottom:10vh;}
body.t0 .wm-end{opacity:1;}
body.t0 .wm-c,body.t0 .wm-rest2{text-shadow:0 0 18px rgba(139,124,255,.22);}
body.t0 .hint,body.t0 .scene-line,body.t0 .sigcard{display:none;}
body.t0 .stage{height:0;}
body.t0 .level > *:not(.node){opacity:1; transform:none;}

/* dev-only: ?flat=1 exposes Act II at the top for QA */
body.dev-flat .stage{height:0;}
body.dev-flat .film,body.dev-flat .copy-layer{display:none;}

/* ============ mobile ============ */
@media (max-width:640px){
  .beat-hero{padding-bottom:calc(12svh + env(safe-area-inset-bottom,0px));}
  .h1{font-size:clamp(26px,8vw,40px);}
  .h1 br,.lede br{display:none;}
  .poster-ball{width:92vmin; height:92vmin; top:40%;}
  .stage{height:820vh;}
  .nav{padding:16px 18px;}
  .nav-cta{font-size:10px; padding:11px 14px;}
  .nav-sound{font-size:10px; padding:11px 12px;}
  .level::before{font-size:clamp(72px,22vw,120px); right:4%; top:18px;}
  .sigcard{width:172px;}
  .mods{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr); gap:20px 12px;}
  .level{padding-left:calc(max(24px,6vw) + 30px); padding-top:72px; padding-bottom:72px;}
  .spine{left:max(24px,6vw);}
  .level .node{left:calc(max(24px,6vw) - 5px); top:78px;}
  .level:nth-of-type(odd) > *:not(.node),.level:nth-of-type(even) > *:not(.node){width:auto; margin-left:0;}
}

@media (max-height:480px) and (orientation:landscape){
  .beat-hero{padding-bottom:7vh;}
  .h1{font-size:clamp(22px,7.5vh,34px); margin-bottom:12px;}
  .h1 br,.lede br{display:none;}
  .lede{margin-bottom:18px;}
  .kick{margin-bottom:10px;}
  .hint{display:none;}
  .scene-line{bottom:6vh; font-size:16px;}
}