:root{
  --bg: #0f1724;
  --card: #0b1220;
  --accent: #ffd166;
  --muted: #9aa6b2;
  --text: #e6eef6;
  --container: 980px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#071024 0%, #0b1220 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--container);margin:0 auto;padding:24px;}
.hero{padding:48px 0;text-align:center;border-bottom:1px solid rgba(255,255,255,0.03);}
.hero h1{font-size:48px;margin:0 0 8px;color:var(--accent);text-shadow:0 6px 24px rgba(0,0,0,0.5);}
.tagline{color:var(--muted);margin:0 0 16px}
.invite-btn{display:inline-block;background:var(--accent);color:#071024;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 4px 18px rgba(0,0,0,0.35)}
main{padding:32px 0;}
.about p{font-size:16px;color:var(--text);line-height:1.6}
.features{margin-top:12px;padding-left:18px;color:var(--muted)}
.features li{margin:8px 0}
.howto ol{color:var(--muted);padding-left:20px}
.faq details{background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;margin-bottom:8px}
.links a{color:var(--accent);text-decoration:none}
.footer{padding:20px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.03)}
@media (max-width:600px){
  .hero h1{font-size:32px}
  .container{padding:18px}
}