:root{
  --bg:#0B0E14;
  --panel:#101523;
  --panel-2:#0D1220;
  --line:#1d2742;
  --text:#E7EAF2;
  --muted:#A7AEBD;
  --primary:#7C4DFF;
  --accent:#00E5FF;
  --hot:#FF2D92;
  --success:#2EE889;
  --shadow-rgb:124,77,255;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #121932 40%, transparent 70%) , var(--bg);
  color:var(--text);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:#bcd7ff;text-decoration:none}
a:hover{color:white}

.container{width:min(1200px, 92%); margin-inline:auto}

.brand{display:flex;align-items:baseline;gap:.5rem;font-family: Orbitron, Inter, sans-serif;}
.brand .brand-gradient{
  font-weight:800; letter-spacing:.5px;
  background: linear-gradient(90deg,var(--primary),var(--accent),var(--hot));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 16px rgba(var(--shadow-rgb),.5);
}
.brand .brand-sub{opacity:.7; font-weight:600; margin-left:.2rem}

.brand-lg .brand-gradient{font-size:1.3rem}

.site-header{
  position:sticky; top:0; z-index:50; border-bottom:1px solid #131b33;
  backdrop-filter:saturate(1.2) blur(10px);
}
.site-header.glass{background:rgba(10,14,25,.6)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.nav{display:flex; gap:1rem; align-items:center}
.nav-link{padding:.45rem .75rem; border-radius:12px; color:#cbd5f7}
.nav-link:hover{background:rgba(255,255,255,.06)}
.nav-link.is-active{background:linear-gradient(90deg,rgba(124,77,255,.18),rgba(0,229,255,.14)); color:white;}

.hero{
  padding:72px 0 32px;
}
.hero h1{
  font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(32px, 6vw, 64px);
  line-height:1.05; margin:0 0 12px;
}
.hero .tagline{color:var(--muted); max-width:52ch}
.hero-cta{display:flex; gap:12px; margin-top:20px}
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.2rem; border-radius:16px; border:1px solid #1a2341; color:white; font-weight:600;
  background:linear-gradient(90deg,rgba(124,77,255,.25),rgba(0,229,255,.18),rgba(255,45,146,.25));
  box-shadow: 0 0 22px rgba(var(--shadow-rgb),.35);
}
.btn.ghost{background:rgba(255,255,255,.04)}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.99)}

.panel{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid #151e39; border-radius:20px; box-shadow: 0 0 18px rgba(var(--shadow-rgb),.25);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} }

.card{position:relative; overflow:hidden; padding:18px; min-height:140px}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted)}
.card .cta{margin-top:10px; color:#d9e6ff}
.card::after{
  content:""; position:absolute; inset:auto -60% -60% auto;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(124,77,255,.35), transparent);
  filter:blur(10px);
}

.section{padding:36px 0}

.kicker{letter-spacing:.18em; text-transform:uppercase; color:#86a7ff; font-size:.8rem; margin-bottom:.5rem;}
.section h2{margin:.2rem 0 1rem; font-size:clamp(22px, 3.2vw, 34px)}

.live{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:999px; background:#1b1221; border:1px solid #402047}
.live-dot{width:8px; height:8px; border-radius:50%; background:gray; box-shadow:0 0 0 0 rgba(255,0,120,.5);}
.live.on .live-dot{background:#ff3d9d; animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 12px 6px rgba(255,0,120,.35)}}

.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){ .news-grid{grid-template-columns:1fr} }
.news-card{padding:16px; min-height:180px}
.news-meta{display:flex; gap:8px; color:#9fb0d0; font-size:.85rem}
.tag{padding:.2rem .5rem; background:#121a30; border:1px solid #1a2341; border-radius:999px}

.site-footer{margin-top:48px; border-top:1px solid #131b33; padding:28px 0 14px; background:#0a0f1c}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px}
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr} }
.footer-grid h4{margin:.4rem 0}
.list{list-style:none; padding:0; margin:0}
.list li{margin:.4rem 0}
.muted{color:var(--muted)}

.reveal{opacity:0; transform:translateY(10px); transition:all .5s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:none}

/* Spotlight */
#spotlight{position:fixed; inset:0; pointer-events:none; mix-blend-mode:screen;}

.hero-preview{margin-top:28px; padding:10px}
.hero-preview .box{aspect-ratio:16/7; border-radius:16px; background:linear-gradient(135deg,#0b1120,#0a0f1c,#0a1026); display:grid; place-items:center; color:#aab5d6}

.badges{display:flex; gap:8px; align-items:center}