:root{
  --bg:#070c1a; --bg2:#0a1022;
  --surface:rgba(255,255,255,.06); --surface2:rgba(255,255,255,.1); --border:rgba(255,255,255,.12);
  --text:#e8eef8; --muted:#9fb0c8;
  --brand:#8b5cf6; --accent:#22d3ee; --accent2:#0ea5e9; --ok:#34d399; --warn:#f59e0b; --danger:#ef4444;
  --radius:18px; --shadow:0 22px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Noto Color Emoji;
  background: radial-gradient(1200px 600px at -10% -10%, #2e1065 0%, transparent 60%),
             radial-gradient(1200px 600px at 110% 10%, #0f766e 0%, transparent 60%),
             linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  overflow-x:hidden; transition: background .4s ease;
}

/* theme */
:root[data-theme="light"]{
  --bg:#eef2ff; --bg2:#e6ecff;
  --surface:rgba(0,0,0,.06); --surface2:rgba(0,0,0,.1); --border:rgba(0,0,0,.12);
  --text:#101626; --muted:#4b5563;
  --shadow:0 16px 50px rgba(0,0,0,.15);
}
.theme-toggle{position:fixed; right:16px; bottom:16px; background:var(--surface2); border:1px solid var(--border); border-radius:999px; padding:10px 14px; cursor:pointer; z-index:50}

.blob, .blob2{position:fixed; width:60vmax; height:60vmax; filter: blur(120px); z-index:-1; opacity:.22; pointer-events:none}
.blob{ background: radial-gradient(circle at 30% 30%, #8b5cf6, transparent 60%);
  animation:float1 22s ease-in-out infinite alternate;}
.blob2{ right:-10vmax; top:-10vmax; background: radial-gradient(circle at 70% 70%, #22d3ee, transparent 60%);
  animation:float2 26s ease-in-out infinite alternate;}
@keyframes float1{ from{ transform:translate(-4vmax, -2vmax) rotate(0deg)} to{ transform:translate(2vmax, 4vmax) rotate(8deg)}}
@keyframes float2{ from{ transform:translate(4vmax, 2vmax) rotate(0deg)} to{ transform:translate(-2vmax, -4vmax) rotate(-10deg)}}

.container{max-width:1200px;margin:0 auto;padding:24px}
header{position:sticky; top:0; z-index:10; padding:12px 0; backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(4,7,16,.6), rgba(4,7,16,0));
  border-bottom:1px solid rgba(255,255,255,.06);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.brand .mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#8b5cf6 0%,#22d3ee 100%);box-shadow:var(--shadow); font-size:24px}
nav{display:flex;gap:10px;flex-wrap:wrap}
nav a{color:var(--text);text-decoration:none;background:var(--surface);padding:10px 14px;border-radius:10px;border:1px solid var(--border);transition:.2s}
nav a:hover{transform:translateY(-2px); background:var(--surface2)}

.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;margin-top:24px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;backdrop-filter: blur(10px)}
h1{margin:6px 0 8px 0;font-size:clamp(32px, 4.6vw, 58px); line-height:1.1}
.tagline{color:var(--muted)}
.buttons{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;
  background:linear-gradient(135deg,#8b5cf6 0%,#22d3ee 100%);color:white;text-decoration:none;font-weight:700;border:0;box-shadow:var(--shadow);
  transform: translateZ(0); transition: transform .2s ease, filter .2s ease}
.btn:hover{transform: translateY(-2px); filter:brightness(1.1)}
.btn.secondary{background:rgba(255,255,255,.12);color:var(--text);border:1px solid var(--border)}

.live-badge{display:inline-flex;align-items:center;gap:8px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; margin-top:8px}
.live-badge.online{background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.35); color:#34d399}
.live-badge.offline{background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.35); color:#ef4444}

.socials{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.social{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--surface2);text-decoration:none;color:var(--text); transition:.2s}
.social:hover{transform:translateY(-2px); background:rgba(255,255,255,.14)}
.social svg{width:22px;height:22px}
.caption{font-size:12px;color:var(--muted)}

.embed{border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#0b1020;display:grid;place-items:center;aspect-ratio:16/9}
.section{margin-top:28px}
.section-title{margin:8px 0 12px 0;font-size:22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{padding:18px; border-radius:16px; border:1px solid var(--border); background:var(--surface); transition:.2s}
.tile:hover{transform: translateY(-2px); background:var(--surface2)}
.list{list-style:none;margin:10px 0 0 0;padding:0}
.list li{padding:8px 0;border-bottom:1px dashed var(--border)}
.countdown{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.count{background:var(--surface2); border:1px solid var(--border); padding:10px 12px; border-radius:10px; font-weight:700; min-width:64px; text-align:center}

.marquee{overflow:hidden; border-radius:12px; border:1px dashed var(--border); background:rgba(255,255,255,.04)}
.marquee .inner{display:flex; gap:32px; padding:10px 16px; animation:mar 16s linear infinite}
@keyframes mar{ from{ transform:translateX(0)} to{ transform:translateX(-50%)} }

footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:26px 0;color:var(--muted);font-size:14px}

.reveal{opacity:0; transform:translateY(12px); transition: all .6s ease}
.reveal.show{opacity:1; transform:translateY(0)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  nav{display:none}
  .socials{grid-template-columns:1fr}
}