:root {
  --bg:#0b0f15;
  --fg:#e8eef2;
  --muted:#aab7c4;
  --b1:#0ea5e9;
  --b2:#fb923c;
  --card:#101821;
  --focus:#94e2ff;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--fg);text-decoration:none}
.container{max-width:960px;margin:0 auto;padding:0 18px}

.header{position:sticky;top:0;z-index:30;background:rgba(11,15,21,.7);backdrop-filter:blur(8px);border-bottom:1px solid #0f1b25}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;letter-spacing:.08em}
.menu{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav-toggle{display:none;background:none;border:0;color:var(--fg);font-size:22px}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;min-height:70vh;padding-top:28px}
.hero h1{font-size:48px;letter-spacing:.05em;margin:.2em 0}
.tag{color:var(--muted)}
.cta{display:flex;gap:12px;margin-top:14px}
.btn{border-radius:999px;padding:10px 18px;border:1px solid #2a3947}
.btn.primary{background:linear-gradient(90deg,var(--b1),var(--b2));color:#071018;border:0;font-weight:700}
.btn.ghost{background:transparent}

.art{height:320px;border-radius:var(--radius);background:
 radial-gradient(60% 80% at 85% 70%, rgba(251,146,60,.45), transparent 60%),
 radial-gradient(70% 90% at 25% 30%, rgba(14,165,233,.5), transparent 65%),
 linear-gradient(180deg,#0a0f14,#0a0f14);
 box-shadow:0 0 80px rgba(14,165,233,.18), 0 0 120px rgba(251,146,60,.12) inset;
 border:1px solid #1a2835;
}

.pad{padding:54px 0}
h2{margin:0 0 12px}
.player{background:var(--card);border:1px solid #142130;border-radius:12px;padding:12px}

.links{display:flex;gap:12px;flex-wrap:wrap}
.pill{border:1px solid #223245;border-radius:999px;padding:8px 14px;color:var(--muted)}

.signup{margin-top:12px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.signup label{grid-column:1/-1;color:var(--muted)}
.signup input{padding:10px;border-radius:10px;border:1px solid #223245;background:#0e1620;color:var(--fg)}

.footer{border-top:1px solid #0f1b25;margin-top:36px}
.footer .container{display:flex;justify-content:center;padding:18px 0;color:var(--muted)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .menu{display:none;position:absolute;right:16px;top:64px;background:#0e1620;border:1px solid #142130;border-radius:10px;flex-direction:column;padding:10px}
  .nav-toggle{display:block}
}

a:focus,button:focus,input:focus{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:6px;
}