:root{
  --bg:#07111f;
  --panel:#0d1b2a;
  --text:#f7fbff;
  --muted:#a9b6c5;
  --accent:#f4c542;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:
radial-gradient(circle at 50% 15%,#17385e 0%,#0a1829 36%,#050b13 100%);color:var(--text)}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.card{width:min(92vw,520px);text-align:center;background:rgba(13,27,42,.92);border:1px solid rgba(255,255,255,.13);border-radius:28px;padding:34px 24px;box-shadow:0 22px 60px rgba(0,0,0,.42)}
.ball{font-size:56px;line-height:1;margin-bottom:14px}
.eyebrow{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
h1{font-size:34px;line-height:1.05;margin:14px 0 10px}
.sub{font-size:17px;line-height:1.45;color:var(--muted);margin:0 auto 28px;max-width:390px}
button{appearance:none;border:none;border-radius:18px;padding:18px 26px;width:100%;font-size:20px;font-weight:900;letter-spacing:.03em;background:var(--accent);color:#111;box-shadow:0 10px 24px rgba(244,197,66,.22)}
button:active{transform:scale(.985)}
.small{margin-top:18px;font-size:13px;color:#7f8fa3}
.reveal{display:none}
.reveal.active{display:block}
.reveal .pick{font-size:96px;font-weight:1000;line-height:.95;margin:16px 0 10px;color:var(--accent);text-shadow:0 5px 20px rgba(244,197,66,.2)}
.reveal h2{font-size:30px;margin:0 0 8px}
.video-wrap{display:none;margin-top:18px}
.video-wrap.active{display:block}
video{width:100%;max-height:56vh;border-radius:18px;background:#000}
.demo{display:none;margin:26px auto 8px;font-size:18px;font-weight:800}
.demo.active{display:block}
.flash{animation:flash .55s ease 3}
@keyframes flash{50%{transform:scale(1.05);filter:brightness(1.35)}}