:root{
  --flame:#FD721E; --signal:#FF1803;
  --obsidian:#0B0E14; --mist:#E8EAF0;
  --ice:#5BC0DE; --fog:#9AA3B2;
  --surface:#151A24; --line:#2A3346;
  --gold:#E8B23A; --bg:#0B0B0D; --margin:#050609;
  --green:#46C28A;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--bg);scroll-behavior:auto;}
body{
  background:var(--bg);
  color:var(--mist);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Bricolage Grotesque',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}

/* ─────────── NAVBAR ─────────── */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,5vw,48px);
  transition:opacity .5s ease, background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
#nav.scrolled{
  background:rgba(8,9,12,.72); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
#nav .logo{height:26px;display:block;}
.btn{
  font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:15px;
  color:#fff; border:none; cursor:pointer; border-radius:999px;
  background:linear-gradient(135deg,var(--flame),var(--signal));
  padding:11px 22px; letter-spacing:.01em; white-space:nowrap;
  box-shadow:0 6px 26px -8px rgba(253,114,30,.7);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, filter .3s ease;
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 40px -8px rgba(253,114,30,.85); filter:saturate(1.1);}
.btn:active{transform:translateY(0);}
.btn.busy{filter:saturate(.85) brightness(.95); cursor:default;}
.btn .spin{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.btn-lg{font-size:clamp(16px,2.3vw,19px); padding:18px 38px;}

/* ─────────── STORY PIN ─────────── */
.pin{ position:relative; height:100svh; width:100%; overflow:hidden; background:var(--margin); }
#stage{ position:absolute; top:0; left:50%; transform:translateX(-50%); height:100svh; width:100vw; background:#04060a; }
@media (min-width:880px){
  #stage{ width:var(--stage-w, 100vw); box-shadow:0 0 140px 40px rgba(0,0,0,.9); }
  .pin::before, .pin::after{ content:""; position:absolute; top:0; bottom:0; width:50vw; z-index:6; pointer-events:none; background:var(--margin); }
  .pin::before{ right:50%; margin-right:calc(var(--stage-w, 100vw) / 2); }
  .pin::after{ left:50%; margin-left:calc(var(--stage-w, 100vw) / 2); }
}
#stage-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#vignette{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 42%, transparent 38%, rgba(0,0,0,.34) 78%, rgba(0,0,0,.62) 100%); mix-blend-mode:multiply; }
#grain{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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"); }

#caption{ position:absolute; z-index:7; left:50%; bottom:max(40px, calc(env(safe-area-inset-bottom,0px) + 32px));
  transform:translateX(-50%); width:min(560px, 86vw); text-align:center;
  font-family:'Hanken Grotesk',sans-serif; font-weight:500; font-size:clamp(17px,3.4vw,23px); line-height:1.4; letter-spacing:.005em;
  color:var(--mist); text-shadow:0 2px 22px rgba(0,0,0,.85); opacity:0; pointer-events:none; }
#caption .em{ color:var(--flame); font-weight:700; }

#progress{ position:absolute; top:0; left:0; height:2px; width:0%; z-index:8;
  background:linear-gradient(90deg,var(--flame),var(--signal)); box-shadow:0 0 12px var(--flame); }
#scene-no{ position:absolute; top:16px; right:18px; z-index:8; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; color:var(--fog); opacity:.65; }
#brand-hud{ position:absolute; top:13px; left:18px; z-index:8; height:20px; opacity:0; transition:opacity .4s ease; }
#brand-hud img{ height:100%; display:block; }
#skip-story{ position:absolute; z-index:9; right:16px;
  bottom:max(20px, calc(env(safe-area-inset-bottom,0px) + 16px));
  display:inline-flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fog); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:999px;
  padding:9px 15px; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .4s ease, color .25s ease, border-color .25s ease, background .25s ease;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
#skip-story:hover{ color:var(--mist); border-color:rgba(253,114,30,.55); background:rgba(253,114,30,.1); }
#skip-story svg{ width:13px; height:13px; }

/* hero overlay (lives on the first pinned frame) */
.hero-ov{ position:absolute; inset:0; z-index:10; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; padding:clamp(78px,16vh,150px) 20px 0; text-align:center; }
.hero-inner{ max-width:680px; width:100%; position:relative;
  padding:30px clamp(20px,5vw,40px) 34px; border-radius:30px;
  background:radial-gradient(125% 130% at 50% 38%, rgba(7,8,12,.86) 0%, rgba(7,8,12,.6) 52%, rgba(7,8,12,0) 100%);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.hero-h1{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.025em;
  font-size:clamp(25px,6.2vw,64px); line-height:1.07; text-shadow:0 4px 40px rgba(0,0,0,.75);
  overflow-wrap:break-word; word-break:normal; text-wrap:balance; hyphens:none; }
.hero-h1 em{ font-style:normal; color:var(--flame); }
.hero-h1 .l2{ display:block; color:#cfd3dc; font-weight:700; margin-top:.18em; font-size:.9em; }
.hero-sub{ margin:22px auto 0; max-width:440px; color:#b9c0cc; font-size:clamp(15px,2.4vw,18px); line-height:1.55; font-weight:500; }
.hero-cta-wrap{ margin-top:34px; }
.hero-cue{ position:absolute; left:50%; bottom:max(30px, calc(env(safe-area-inset-bottom,0px) + 22px)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:11px; color:var(--fog); }
.hero-cue span.t{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; }
.hero-cue .ln{ width:1px; height:38px; background:linear-gradient(var(--fog),transparent); animation:cuepulse 1.8s ease-in-out infinite; }
@keyframes cuepulse{ 0%,100%{ opacity:.3; transform:scaleY(.6);} 50%{ opacity:.9; transform:scaleY(1);} }

/* HTML acts (scorecard / payoff) */
.html-act{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; padding:24px; }
#act-score{ gap:14px; }
.score-head{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(12px,2.6vw,14px); letter-spacing:.22em; text-transform:uppercase; color:var(--fog); margin-bottom:2px; }
.scorecard{ display:flex; flex-direction:column; gap:11px; width:min(360px,88%); }
.score-col{ border-radius:14px; padding:15px 18px; display:flex; flex-direction:column; gap:2px; position:relative; overflow:hidden; }
.score-col.old{ background:#181b21; border:1px solid #2a2e36; }
.score-col.new{ background:linear-gradient(135deg, rgba(253,114,30,.16), rgba(255,24,3,.07)); border:1px solid rgba(253,114,30,.55); }
.score-col .lab{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.score-col.old .lab{ color:var(--fog); } .score-col.new .lab{ color:var(--flame); }
.score-col .big{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:clamp(26px,6.5vw,38px); line-height:1.05; margin-top:2px; }
.score-col.old .big{ color:#7e8694; } .score-col.new .big{ color:var(--mist); }
.score-col .sub{ font-size:13.5px; color:var(--fog); } .score-col.new .sub{ color:#d8b59a; }
.score-col .tick{ position:absolute; top:18px; right:18px; font-size:15px; color:var(--flame); }

#act-payoff{ gap:26px; }
#act-payoff .lock{ height:clamp(42px,8vw,62px); width:auto; }
#act-payoff .tag{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(30px,8vw,58px); letter-spacing:-.02em; line-height:1; text-align:center; }
#act-payoff .tag em{ color:var(--flame); font-style:normal; }
#act-payoff .kick{ font-size:clamp(13px,3vw,15px); color:var(--fog); letter-spacing:.04em; }

/* ─────────── shared section scaffold ─────────── */
section{ position:relative; }
.wrap{ width:min(1080px, 90vw); margin:0 auto; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--flame); margin-bottom:18px; }
.h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.025em; line-height:1.06; font-size:clamp(30px,5.6vw,56px); }
.lede{ color:var(--fog); font-size:clamp(16px,2.3vw,20px); line-height:1.55; max-width:560px; }

/* ─────────── ORGANIZER reveal + morph ─────────── */
#org{ height:240vh; background:linear-gradient(180deg,#050609 0%, #07080c 30%, var(--bg) 100%); }
.org-sticky{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 24px; text-align:center; overflow:hidden; }
.org-glow{ position:absolute; left:50%; top:46%; width:660px; height:660px; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(253,114,30,.16), rgba(253,114,30,0) 62%); }
.org-sticky .eyebrow{ position:relative; }
.org-h{ position:relative; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.02em; font-size:clamp(28px,6vw,52px); line-height:1.05; }
.org-h em{ color:var(--flame); font-style:normal; }
.org-sub{ position:relative; color:var(--fog); margin-top:14px; font-size:clamp(14px,2.2vw,17px); }
.org-stage{ position:relative; width:100%; max-width:340px; height:min(56vh,460px); margin-top:30px; }
.org-stage > div{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

/* phone */
.phone{ width:248px; height:430px; border-radius:42px; background:linear-gradient(170deg,#16181f,#0c0d12);
  border:1px solid rgba(255,255,255,.09); box-shadow:0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  padding:16px 13px; position:relative; }
.phone::before{ content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:74px; height:7px; border-radius:99px; background:#000; }
.phone-time{ text-align:center; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--fog); margin:6px 0 14px; letter-spacing:.06em; }
.notif{ display:flex; gap:11px; align-items:flex-start; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07);
  border-radius:18px; padding:12px 13px; margin-bottom:10px; backdrop-filter:blur(6px); text-align:left; }
.notif .ico{ flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); overflow:hidden; }
.notif .ico img{ width:30px; height:30px; display:block; }
.notif .bd{ flex:1; min-width:0; }
.notif .top{ display:flex; justify-content:space-between; align-items:baseline; }
.notif .app{ font-size:11px; font-weight:700; color:var(--mist); letter-spacing:.02em; }
.notif .ago{ font-size:10px; color:var(--fog); font-family:'JetBrains Mono',monospace; }
.notif .msg{ font-size:13.5px; line-height:1.32; color:#cdd2db; margin-top:2px; }
.notif .msg b{ color:#fff; font-weight:700; }

/* dashboard */
.dash{ width:300px; max-width:88vw; border-radius:22px; background:linear-gradient(180deg,#13151c,#0d0f15);
  border:1px solid rgba(255,255,255,.08); box-shadow:0 40px 90px -30px rgba(0,0,0,.9); padding:20px 20px 22px; text-align:left; }
.dash-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dash-title{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:19px; }
.pill{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--green);
  background:rgba(70,194,138,.12); border:1px solid rgba(70,194,138,.4); border-radius:99px; padding:4px 10px; display:inline-flex; gap:6px; align-items:center; }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.drow{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-top:1px solid rgba(255,255,255,.06); }
.drow .lab{ font-size:14px; color:#c2c8d2; }
.drow .stat{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--green); }
.drow .check{ width:17px; height:17px; border-radius:50%; background:var(--green); color:#06140d; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.dash-stat{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.06); display:flex; align-items:flex-end; justify-content:space-between; }
.dash-stat .big{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:38px; line-height:1; letter-spacing:-.02em; }
.dash-stat .big span{ color:var(--flame); }
.dash-stat .cap{ font-size:12px; color:var(--fog); text-align:right; line-height:1.4; }

/* ─────────── PROOF ─────────── */
#proof{ padding:clamp(80px,12vh,150px) 0; background:var(--bg); }
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(34px,6vw,64px) 24px; margin-top:54px; }
@media (min-width:760px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ text-align:center; }
.stat .num{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.03em; line-height:1; font-size:clamp(46px,7.5vw,76px);
  background:linear-gradient(135deg,#fff 30%,#ffd9bd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat.accent .num{ background:linear-gradient(135deg,var(--flame),var(--signal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .lab{ margin-top:14px; color:var(--fog); font-size:14px; line-height:1.45; }

/* ─────────── EVENTS ─────────── */
#events{ padding:clamp(70px,10vh,130px) 0 clamp(80px,12vh,150px); background:linear-gradient(180deg,var(--bg),#08090d); }
.ev-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,18px); margin-top:48px; }
@media (min-width:720px){ .ev-grid{ grid-template-columns:repeat(3,1fr); } }
.ev-card{ position:relative; border-radius:18px; padding:26px 22px; min-height:148px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:space-between; gap:24px; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s ease, box-shadow .4s ease, background .4s ease; }
.ev-card::after{ content:""; position:absolute; inset:0; border-radius:18px; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(120% 120% at 20% 0%, rgba(253,114,30,.14), transparent 60%); }
.ev-card:hover{ transform:translateY(-5px); border-color:rgba(253,114,30,.5); box-shadow:0 24px 50px -28px rgba(253,114,30,.5); background:rgba(255,255,255,.05); }
.ev-card:hover::after{ opacity:1; }
.ev-card .ico{ width:34px; height:34px; color:var(--flame); }
.ev-card .nm{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(17px,2.5vw,21px); letter-spacing:-.01em; }

/* ─────────── FINAL CTA ─────────── */
#final{ padding:clamp(90px,15vh,190px) 0 clamp(80px,12vh,150px); text-align:center;
  background:radial-gradient(110% 80% at 50% 0%, #14100f 0%, #08090d 52%, var(--bg) 100%); }
.final-h{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.025em; line-height:1.1;
  font-size:clamp(26px,4.6vw,46px); max-width:880px; margin:0 auto; text-wrap:balance; }
.final-h em{ color:var(--flame); font-style:normal; }
.final-steps{ display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; margin-top:30px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.04em; color:var(--fog); }
.final-steps b{ color:#c9ced8; font-weight:500; }
.final-cta-wrap{ margin-top:40px; }
footer{ text-align:center; padding:40px 24px 56px; font-size:12px; color:#3a414e; line-height:1.7; background:var(--bg); }
footer img{ height:20px; opacity:.5; margin-bottom:16px; }

/* ─────────── reduced motion poster ─────────── */
#rm-poster{ display:none; }
@media (prefers-reduced-motion:reduce){
  .pin{ display:none; }
  #rm-poster{ display:flex; }
}