:root{
  --bg1:#071226; --bg2:#0d1b2a; --neon:#7cffcb; --accent:#ff5cac; --glass: rgba(255,255,255,0.04);
  --muted:rgba(255,255,255,0.7);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,var(--bg1),var(--bg2));color:#eaf6ff;overflow-x:hidden;
}
canvas#bg{position:fixed;inset:0;z-index:0;display:block}
.topbar{position:fixed;left:0;right:0;top:16px;display:flex;justify-content:space-between;align-items:center;padding:0 28px;z-index:5}
.logo{font-weight:700;letter-spacing:0.06em}
.logo .dot{color:var(--accent)}
.topbar nav a{color:var(--muted);margin-left:18px;text-decoration:none;font-weight:600;opacity:0.92}

.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:80px 24px 40px;position:relative;z-index:2}
.glass{backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:48px;border-radius:16px;max-width:880px;text-align:center;box-shadow:0 10px 50px rgba(3,8,16,0.6)}
h1{font-size: clamp(28px, 5vw, 52px);margin:0}
.neon{color:var(--neon);text-shadow:0 0 8px rgba(124,255,203,0.12),0 0 22px rgba(124,255,203,0.06);}
.subtitle{color:rgba(234,246,255,0.8);margin:12px 0 22px}
.cta-row{display:flex;gap:14px;justify-content:center;margin-bottom:14px}
.btn{background:linear-gradient(90deg,var(--neon),var(--accent));color:#04111a;padding:10px 18px;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 8px 30px rgba(124,255,203,0.06)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

.quick{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
#surprise{padding:8px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);cursor:pointer}
.hint{font-size:12px;color:rgba(234,246,255,0.5)}

.panel{margin-top:44px;padding:28px 18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);max-width:860px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:22px;width:100%;max-width:1000px}
.card{background:var(--glass);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}

footer{margin-top:36px;color:rgba(234,246,255,0.6)}

.cursor{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;pointer-events:none;z-index:999;transform:translate(-50%,-50%);mix-blend-mode:screen;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.05) 40%);box-shadow:0 0 20px rgba(124,255,203,0.14);}

/* small responsive tweaks */
@media (max-width:640px){.glass{padding:28px}.topbar{padding:0 12px}.cta-row{flex-direction:column}nav{display:none}}

/* subtle floating shapes */
.glass::before{content:'';position:absolute;left:-120px;top:-60px;width:220px;height:220px;border-radius:40%;background:linear-gradient(45deg,var(--neon),transparent);filter:blur(40px);opacity:0.06;transform:rotate(12deg)}