:root{
  --pump-green: #28C76F;
  --pump-green-2: #00C57B;
  --white: #FFFFFF;
  --black: #000000;
  --muted: rgba(255,255,255,0.9);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;background: linear-gradient(180deg,#000000,#07140a);color:var(--muted);}

.topbar{padding:20px 16px;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,0.25),transparent);position:relative;z-index:5}
.brand{display:flex;align-items:center;justify-content:center;gap:12px}
.logo-pill{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--pump-green),var(--pump-green-2));display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--black);box-shadow:0 6px 18px rgba(40,199,111,0.18)}
.brand-text{font-size:28px;color:var(--pump-green);font-weight:700;text-shadow:0 0 18px rgba(40,199,111,0.18)}

.subtitle{margin:8px 0 0;color:rgba(255,255,255,0.8)}

/* container and stream frame */
.container{max-width:1000px;margin:18px auto;padding:18px}
.stream-frame{width:100%;max-width:920px;aspect-ratio:16/9;margin:14px auto;border-radius:12px;background:linear-gradient(180deg,#02160b,#00120a);border:3px solid rgba(40,199,111,0.12);box-shadow:0 18px 40px rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center}
.stream-placeholder{text-align:center;padding:16px;color:var(--muted);position:relative}
.hud{position:absolute;top:12px;left:12px;background:rgba(0,0,0,0.4);padding:6px 10px;border-radius:8px;font-size:13px;color:var(--white);border:1px solid rgba(255,255,255,0.04)}
.play{font-size:64px;background:linear-gradient(45deg,var(--pump-green),var(--pump-green-2));width:116px;height:116px;line-height:116px;border-radius:18px;display:inline-block;box-shadow:0 10px 30px rgba(40,199,111,0.16);color:var(--black);font-weight:800}
.stream-text{margin-top:16px;font-size:1.05rem;color:rgba(255,255,255,0.95);max-width:78%;margin-left:auto;margin-right:auto}

/* content blocks */
.about,.goals,.how,.community,.safety{background:rgba(255,255,255,0.02);padding:16px;border-radius:10px;margin-top:16px;border:1px solid rgba(255,255,255,0.03)}
h2{color:var(--pump-green);margin:0 0 8px 0;font-size:1.15rem;text-shadow:0 0 10px rgba(40,199,111,0.08)}

ul,ol{margin:8px 0 0 20px;padding:0;color:rgba(255,255,255,0.9)}
.cta-row{display:flex;gap:12px;margin-top:12px}
.cta{background:linear-gradient(45deg,var(--pump-green),var(--pump-green-2));color:var(--black);border:none;padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(40,199,111,0.12)}
.cta.alt{background:transparent;color:var(--pump-green);border:2px solid rgba(40,199,111,0.16)}

/* footer */
.footer{text-align:center;margin-top:20px;color:rgba(255,255,255,0.7);font-size:0.95rem}

/* falling icons */
#falling{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.fall{position:absolute;font-size:28px;will-change:transform,opacity;opacity:0.95;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.6))}