:root{
  --bg:#070B1A;
  --panel:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.68);
  --accent:#7C3AED;
  --accent2:#22D3EE;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(900px 520px at 95% 10%, rgba(34,211,238,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), #050715 80%);
}

a{color:inherit;text-decoration:none}
.container{width:min(1100px, calc(100% - 40px)); margin:0 auto}

.bg{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(700px 360px at 15% 10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(600px 320px at 85% 20%, rgba(34,211,238,.12), transparent 60%);
}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(7,11,26,.82), rgba(7,11,26,.35));
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brand{display:flex; gap:12px; align-items:center; font-weight:900; letter-spacing:.2px}
.brand small{display:block; font-weight:600; font-size:12px; color:var(--muted); margin-top:2px}
.logo{
  width:36px; height:36px; border-radius:12px;
  background: linear-gradient(135deg, rgba(124,58,237,.9), rgba(34,211,238,.8));
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.nav{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.pill{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background: transparent;
  color:var(--text);
  opacity:.92;
}
.pill:hover{border-color:var(--line); background:var(--panel); opacity:1}
.badge{
  margin-left:6px;
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
}
.btn:hover{filter:brightness(1.08)}
.btn-primary{
  border-color:rgba(124,58,237,.35);
  background: linear-gradient(90deg, rgba(124,58,237,.55), rgba(34,211,238,.22));
}
.btn-ghost{background:transparent}

main{position:relative; z-index:1}
.hero{padding:34px 0 70px}
.hero-grid{display:grid; grid-template-columns: 1.35fr .85fr; gap:18px}
@media (max-width: 920px){.hero-grid{grid-template-columns:1fr}}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
}
.card-pad{padding:22px}
.kicker{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:10px}
.dot{width:8px;height:8px;border-radius:999px;background:rgba(34,211,238,.9); box-shadow:0 0 0 4px rgba(34,211,238,.12)}
h1{margin:12px 0 10px; font-size:38px; line-height:1.05}
h2{margin:18px 0 10px; font-size:18px}
.lead{margin:0 0 14px; color:var(--muted); line-height:1.6}
.row{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.fine{margin-top:10px; font-size:12px; color:rgba(234,240,255,.55)}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (max-width: 720px){.grid3{grid-template-columns:1fr}}
.mini{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:12px;
}
.mini b{display:block; margin-bottom:6px}
.mini span{display:block; color:var(--muted); font-size:13px; line-height:1.45}

.list{margin:14px 0 0; padding:0 0 0 18px; color:var(--muted)}
.list li{margin:8px 0}