:root{
  --bg:#0b1220; --card:#0f172a; --line:#1f2a44; --txt:#e6eefc; --mut:#a6b3cc;
  --brand:#0EA5E9; --brand2:#22D3EE; --accent:#34D399; --warn:#f59e0b;
  --r:18px; --max:1100px;
}
@media (prefers-color-scheme:light){
  :root{ --bg:#f7f9fc; --card:#ffffff; --line:#e5e7eb; --txt:#0b1220; --mut:#4b5563 }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:ui-sans-serif,system-ui,Inter,Roboto,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.section{padding:48px 0}
.grid{display:grid;gap:16px}
@media(min-width:980px){.grid-2{grid-template-columns:1.1fr .9fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.mut{color:var(--mut)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border:1px solid transparent;border-radius:14px;font-weight:800;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#05111a}
.btn-ghost{background:var(--card);border:1px solid var(--line)}
.topbar{position:sticky;top:0;z-index:40;background:rgba(15,23,42,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
@media(prefers-color-scheme:light){.topbar{background:rgba(255,255,255,.7)}}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:#052227;background:linear-gradient(135deg,var(--brand),var(--accent))}
.nav a{padding:8px 10px;border-radius:10px;color:var(--mut);font-weight:700}
.nav a:hover{background:rgba(255,255,255,.06)}
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-10%;z-index:-1;background:
  radial-gradient(650px 280px at 10% 10%, rgba(34,211,238,.25), transparent 60%),
  radial-gradient(700px 360px at 90% 0%, rgba(14,165,233,.20), transparent 60%)}
.stars{color:var(--warn);font-size:14px;letter-spacing:.4px}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(14,165,233,.12);color:#8bd7ff;font-weight:800}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--brand)}
.footer{border-top:1px solid var(--line);padding:24px 0}
.small{font-size:13px}