*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#050506;color:#eee;font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}
body{display:flex;flex-direction:column;min-height:100vh}
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:clamp(12px,2.4vw,24px) clamp(16px,3vw,36px)}
.wordmark{font-weight:800;letter-spacing:.32em;font-size:clamp(14px,1.6vw,19px);color:#f2f2f2}
.wordmark span{color:#e8b923}
.sound{background:rgba(20,20,22,.55);border:1px solid rgba(232,185,35,.35);color:#ddd;border-radius:999px;padding:7px 14px;font:600 12px/1 inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);display:flex;gap:6px;align-items:center}
.sound[aria-pressed=true]{border-color:#e8b923;color:#e8b923}
#stage{position:relative;height:100vh;height:100svh;min-height:560px;flex:none;overflow:hidden;background:radial-gradient(ellipse at 50% 36%,#1b1d1c 0%,#0a0b0b 50%,#020202 100%)}
.phrase{position:absolute;left:0;right:0;bottom:8%;z-index:5;text-align:center;padding:0 6vw;font-weight:800;font-size:clamp(18px,2.6vw,38px);line-height:1.02;letter-spacing:-.02em;color:#f4f4f4;text-shadow:0 2px 30px rgba(0,0,0,.9),0 0 2px #000;min-height:2.1em;display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.phrase .w{opacity:0;transform:translateY(.25em);filter:blur(6px);transition:opacity .25s,transform .25s,filter .25s;margin:0 .14em;display:inline-block}
.phrase .w.on{opacity:1;transform:none;filter:none}
.phrase .gold{color:#f2c230}
.phrase .w{text-shadow:0 0 18px rgba(0,0,0,.95),0 0 3px #000}
.phrase .tag{display:none;position:absolute;top:-1.9em;left:0;right:0;font-size:13px;letter-spacing:.4em;font-weight:700;color:#e8b923;text-transform:uppercase;opacity:.9}
.start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;background:rgba(10,10,12,.6);color:#e8b923;border:1px solid #e8b923;padding:12px 22px;border-radius:999px;font:700 13px/1 inherit;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(4px)}
.start.hide{display:none}
.caps{position:relative;z-index:10;background:#070708;border-top:1px solid rgba(232,185,35,.2)}
.ticker{overflow:hidden;white-space:nowrap;padding:10px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:inline-flex;gap:10px;animation:tick 60s linear infinite;padding-left:10px}
.chip{border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:6px 12px;font-size:12px;color:#cfcfcf;letter-spacing:.04em}
.chip.brand{border-color:#e8b923;color:#e8b923;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.chip.draft::after{content:" · draft";color:#777;font-size:10px}
@keyframes tick{to{transform:translateX(-50%)}}
.bottom{background:#050506;text-align:center;padding:10px;font-size:11px;letter-spacing:.2em;color:#888;text-transform:uppercase}
@media (max-width:600px){.phrase{bottom:5%;min-height:3em}.headline{bottom:15%}.sound .lbl{display:none}}
@media (prefers-reduced-motion:reduce){.track{animation:none;flex-wrap:wrap;white-space:normal}.ticker{white-space:normal}.phrase .w{transition:none}}

.phrase .cap{position:absolute;left:0;right:0;top:100%;margin-top:.7em;font-size:clamp(13px,1.5vw,20px);font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#f2c230;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.phrase .cap.on{opacity:1;transform:none}
.phrase .cap::before,.phrase .cap::after{content:"";display:inline-block;width:2.2em;height:1px;background:#f2c230;vertical-align:middle;margin:0 1em;opacity:.6}

/* glitch headline: green/gold split-channel chromatic aberration + scanline jitter */
.headline{position:absolute;left:0;right:0;bottom:19%;z-index:6;text-align:center;pointer-events:none}
.glitch{position:relative;display:inline-block;margin:0;font-weight:900;font-size:clamp(54px,9.5vw,128px);line-height:.9;letter-spacing:.02em;color:#e9ecea;
  text-shadow:0 0 24px rgba(0,0,0,.9);font-family:"Inter","Arial Black","Segoe UI",system-ui,sans-serif;animation:gskew 3.2s infinite steps(1)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;mix-blend-mode:screen;opacity:.9}
.glitch::before{color:#2bff7a;transform:translate(-4px,0);animation:gA 2.4s infinite steps(1)}
.glitch::after{color:#f2c230;transform:translate(4px,0);animation:gB 1.9s infinite steps(1)}
.headline .sub{margin-top:.25em;font-weight:800;font-size:clamp(18px,2.6vw,36px);letter-spacing:.3em;text-transform:uppercase;color:#c9cdca;text-shadow:0 2px 16px #000}
.headline .sub b{color:#f2c230}
.scan{position:absolute;inset:0;z-index:7;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.55}
@keyframes gA{0%{clip-path:inset(0 0 62% 0);transform:translate(-5px,-1px)}12%{clip-path:inset(40% 0 35% 0);transform:translate(-9px,1px)}24%{clip-path:inset(78% 0 4% 0);transform:translate(-3px,0)}
  37%{clip-path:inset(10% 0 70% 0);transform:translate(-12px,0)}50%{clip-path:inset(0 0 0 0);transform:translate(-4px,0)}66%{clip-path:inset(55% 0 20% 0);transform:translate(-7px,2px)}83%{clip-path:inset(25% 0 50% 0);transform:translate(-2px,0)}}
@keyframes gB{0%{clip-path:inset(60% 0 8% 0);transform:translate(5px,1px)}15%{clip-path:inset(5% 0 75% 0);transform:translate(10px,0)}30%{clip-path:inset(0 0 0 0);transform:translate(4px,0)}
  45%{clip-path:inset(35% 0 40% 0);transform:translate(13px,-1px)}62%{clip-path:inset(82% 0 2% 0);transform:translate(6px,0)}80%{clip-path:inset(15% 0 60% 0);transform:translate(3px,1px)}}
@keyframes gskew{0%,88%,100%{transform:none}90%{transform:translateX(3px) skewX(-6deg)}93%{transform:translateX(-4px)}96%{transform:skewX(4deg)}}
@media (prefers-reduced-motion:reduce){.glitch,.glitch::before,.glitch::after{animation:none}}

/* ---- Station + Bubble Gum Helpers (DRAFT copy) ---- */
.station{position:relative;z-index:10;background:linear-gradient(#020202,#0b0c0c);border-top:1px solid rgba(43,255,122,.18);padding:clamp(48px,8vw,110px) 6vw}
.st-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;align-items:center;max-width:1200px;margin:0 auto}
.st-kicker{color:#2bff7a;letter-spacing:.3em;text-transform:uppercase;font-size:12px;font-weight:700;margin-bottom:12px}
.station h2{font-size:clamp(32px,4.4vw,60px);font-weight:900;line-height:1;margin-bottom:16px}
.station h2 span,.station h3 b{color:#f2c230}
.station h3{font-size:clamp(22px,2.6vw,34px);font-weight:800;margin:28px 0 10px}
.station p{color:#c9cdca;line-height:1.55;font-size:clamp(15px,1.25vw,18px);max-width:560px}
.station p b{color:#f2c230}
.st-points{list-style:none;margin:14px 0 0;display:grid;gap:8px}
.st-points li{color:#dfe3e0;padding-left:22px;position:relative}
.st-points li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:#2bff7a;box-shadow:0 0 10px #2bff7a}
.pink{color:#ff7ac0}
.helpers-row{position:relative;display:flex;justify-content:center;gap:clamp(10px,2.5vw,34px);padding-top:70px}
.bot{position:relative;width:clamp(86px,9vw,130px);text-align:center;margin:0;animation:bob 3s ease-in-out infinite}
.bot.b2{animation-delay:-1s}.bot.b3{animation-delay:-2s}
.bot svg{width:100%;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.8))}
.bot figcaption{margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#f2c230;font-weight:700}
.bot figcaption small{display:block;color:#8c8f8d;letter-spacing:.06em;text-transform:none;font-weight:500}
.bub{position:absolute;left:57%;top:44%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe3f2 0 12%,#ff9ad0 30%,#ff5fae 75%,#e0408f 100%);box-shadow:0 0 18px rgba(255,95,174,.45),inset -4px -5px 10px rgba(160,20,90,.35);
  transform-origin:20% 50%;animation:gum 3.6s ease-in-out infinite}
.bot.b2 .bub{animation-delay:-1.2s}.bot.b3 .bub{animation-delay:-2.4s}
@keyframes gum{0%{transform:translateX(0) scale(.15);opacity:1}70%{transform:translateX(18px) scale(1.25);opacity:1}76%{transform:translateX(18px) scale(1.4);opacity:0}100%{transform:scale(.1);opacity:0}}
@keyframes bob{50%{transform:translateY(-6px)}}
.approve{position:absolute;right:4%;top:6px;border:1px solid #2bff7a;color:#2bff7a;border-radius:999px;padding:7px 16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;box-shadow:0 0 14px rgba(43,255,122,.25)}
@media (max-width:800px){.st-wrap{grid-template-columns:1fr}.helpers-row{padding-top:60px}}
@media (prefers-reduced-motion:reduce){.bot,.bub{animation:none}.bub{transform:translateX(10px) scale(1)}}
.phrase.long{font-size:clamp(15px,1.45vw,22px);line-height:1.25}
.phrase.xlong{font-size:clamp(14px,1.25vw,19px)}
@media (max-aspect-ratio:4/5),(max-width:700px){.phrase.long{font-size:clamp(14px,3.9vw,19px)}.phrase.xlong{font-size:clamp(13px,3.5vw,17px)}}
.top{background:linear-gradient(rgba(3,3,3,.85),rgba(3,3,3,0))}
/* ---- Our apps (DRAFT copy) ---- */
.apps{position:relative;z-index:10;background:#0b0c0c;padding:clamp(40px,7vw,96px) 6vw;border-top:1px solid rgba(242,194,48,.15)}
.apps-wrap{max-width:1200px;margin:0 auto}
.apps h2{font-size:clamp(32px,4.4vw,60px);font-weight:900;line-height:1;margin-bottom:28px}
.apps h2 span{color:#f2c230}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.app{background:linear-gradient(160deg,#141716,#070808);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s}
.app:hover{border-color:rgba(43,255,122,.45)}
.app-ico{width:44px;height:44px}
.app h3{font-size:17px;font-weight:800;color:#eef1ef;line-height:1.25}
.app p{font-size:14px;line-height:1.5;color:#b9bdba}
.badge{display:inline-block;vertical-align:middle;margin-left:4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#f2c230;border:1px solid #f2c230;border-radius:999px;padding:2px 8px;font-weight:700}
.app-link{margin-top:auto;color:#2bff7a;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.06em}

.apps-group{margin-bottom:40px}.group-h{font-size:clamp(20px,2.2vw,28px);font-weight:800;color:#f2c230;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid rgba(46,204,113,.35)}

/* ---- round 3: cinematic video hero ---- */
#stage{background:#000}
.vids{position:absolute;inset:0;z-index:1}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;transition:opacity .6s ease}
.vid.on{opacity:1}
.vid.poster{z-index:0}
.shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 22%,transparent 55%,rgba(0,0,0,.85) 100%)}
.headline{left:0;right:0;top:auto;bottom:auto;top:13%;text-align:center;transition:opacity 1s,transform 1s}
.glitch{font-size:clamp(48px,8vw,116px)}
.headline .si{display:block;margin-top:.5em;font-size:.42em;letter-spacing:.42em;color:#2bff7a}
.hero.talking .headline,.hero.ice .headline{opacity:0;transform:translateY(-14px)}
.phrase{left:0;right:0;bottom:15%;top:auto;max-width:none;padding:0 8vw;font-size:clamp(17px,2vw,30px);line-height:1.18;z-index:8}
.hero.ice .phrase{opacity:0}
.phrase .w{margin:0 .12em}
.hero-ctl{position:absolute;left:0;right:0;bottom:5%;z-index:12;display:flex;justify-content:center;gap:12px}
.tapsound,.skip,.calm-links a{font:700 13px/1 inherit;letter-spacing:.2em;text-transform:uppercase;border-radius:999px;padding:13px 22px;cursor:pointer;backdrop-filter:blur(6px);text-decoration:none}
.tapsound{background:#e8b923;color:#050506;border:1px solid #f2c230;box-shadow:0 0 24px rgba(242,194,48,.35);animation:pulse 2.2s ease-in-out infinite}
.tapsound.hide{display:none}
.skip{background:rgba(20,20,22,.6);color:#c9cdca;border:1px solid rgba(201,205,202,.4)}
.skip:hover,.skip:focus-visible{color:#2bff7a;border-color:#2bff7a}
.tapsound:focus-visible,.skip:focus-visible{outline:2px solid #2bff7a;outline-offset:3px}
@keyframes pulse{50%{box-shadow:0 0 6px rgba(242,194,48,.15)}}
.calm-links,.transcript{display:none}
.hero.done .hero-ctl{display:none}
/* reduced motion: poster + captions + links, nothing autoplays */
.hero.calm .vid:not(.poster){display:none}.hero.calm .vid.poster{opacity:1}
.hero.calm .hero-ctl{display:none}
.hero.calm .calm-links{display:flex;position:absolute;left:0;right:0;bottom:5%;z-index:12;justify-content:center;gap:12px}
.calm-links a{background:rgba(20,20,22,.6);color:#f2c230;border:1px solid #e8b923}
.hero.calm .transcript{display:block;position:absolute;left:6vw;right:6vw;bottom:calc(5% + 56px);z-index:12;color:#c9cdca;font-size:14px;text-align:center}
.transcript summary{cursor:pointer;color:#2bff7a;letter-spacing:.15em;text-transform:uppercase;font-size:12px;font-weight:700}
.transcript ol{max-height:38vh;overflow:auto;text-align:left;margin:10px auto 0;max-width:760px;padding:14px 14px 14px 34px;background:rgba(5,5,6,.88);border:1px solid rgba(232,185,35,.3);border-radius:12px;line-height:1.5}
.transcript b{color:#f2c230}
.hero.calm .phrase{bottom:calc(5% + 110px)}
@media (max-aspect-ratio:4/5),(max-width:700px){
  .vid{object-position:50% 30%}
  .headline{top:11%}
  .glitch{font-size:clamp(44px,14vw,84px)}
  .phrase{bottom:17%;padding:0 5vw;font-size:clamp(15px,4.3vw,22px)}
  .phrase.long,.phrase.xlong{font-size:clamp(14px,3.8vw,19px)}
  .tapsound,.skip{padding:12px 16px;font-size:12px;letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){.tapsound{animation:none}.vid,.headline{transition:none}}
/* desktop: title sits in the dark left half, clear of her face */
@media (min-aspect-ratio:4/5) and (min-width:701px){.headline{left:5vw;right:auto;top:28%;text-align:left;max-width:48vw}}
@media (max-aspect-ratio:4/5),(max-width:700px){.vid{object-position:64% 30%}}

/* game poster gallery */
.app.has-gallery{cursor:pointer;transition:transform .2s,box-shadow .2s}
.app.has-gallery:hover,.app.has-gallery:focus{transform:translateY(-3px);box-shadow:0 0 0 1px #f2c230,0 8px 30px rgba(242,194,48,.25);outline:none}
.app-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:10px;display:block}
.lb{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:0 0 40px rgba(242,194,48,.3)}
.lb button{position:absolute;background:none;border:0;color:#f2c230;font-size:48px;cursor:pointer;padding:10px 18px;line-height:1}
.lb-x{top:8px;right:12px}.lb-p{left:6px;top:50%;transform:translateY(-50%)}.lb-n{right:6px;top:50%;transform:translateY(-50%)}
.lb-c{position:absolute;bottom:14px;color:#8c8f8d;font-size:14px}
/* ---- Pulse demo (sample data) ---- */
.pd-body{margin:0;background:#050606;color:#e8ece9;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:16px 10px 30px;box-sizing:border-box}
.pd-top{width:100%;max-width:390px;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px}
.pd-top a{color:#2bff7a;text-decoration:none;font-weight:700}
.pd-phone{width:100%;max-width:390px;background:#0b0c0c;border:2px solid #2a2d2c;border-radius:34px;padding:18px 14px 22px;box-sizing:border-box;box-shadow:0 0 40px rgba(43,255,122,.08)}
.pd-h{display:flex;justify-content:space-between;align-items:center;margin:0 4px 10px}
.pd-h h1{font-size:20px;margin:0;color:#f2c230;letter-spacing:.04em}
.pd-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0b0c0c;background:#f2c230;border-radius:20px;padding:3px 8px}
.pd-hands{display:flex;gap:6px;margin:0 0 12px}
.pd-hands button{flex:1;background:#121414;color:#8c8f8d;border:1px solid #2a2d2c;border-radius:12px;padding:9px;font-weight:700;font-size:13px;cursor:pointer}
.pd-hands button.on{color:#2bff7a;border-color:#2bff7a}
.pd-card{background:#121414;border:1px solid #222524;border-radius:16px;padding:12px;margin-bottom:10px}
.pd-lab{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8c8f8d}
.pd-big{font-size:30px;font-weight:800;color:#2bff7a}.pd-big small{font-size:13px;color:#8c8f8d;font-weight:600}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.pd-grid .pd-card{margin:0}
.pd-val{font-size:22px;font-weight:800}.pd-val small{font-size:12px;color:#8c8f8d}
.pd-gold{color:#f2c230}
#pd-hr{width:100%;height:90px;display:block}
.pd-conn{display:flex;align-items:center;gap:8px;font-size:13px}
.pd-dot{width:9px;height:9px;border-radius:50%;background:#2bff7a;box-shadow:0 0 8px #2bff7a}
.pd-bar{height:6px;background:#222524;border-radius:4px;overflow:hidden;margin-top:6px}.pd-bar i{display:block;height:100%;background:#2bff7a}
.pd-sample{font-size:10px;color:#f2c230;margin-top:3px}
.pd-foot{max-width:390px;font-size:11px;color:#8c8f8d;text-align:center;margin-top:12px;line-height:1.5}
