:root{
  --bg:#0b0d12; --fg:#e7ecf3; --muted:#a7b0bf; --card:#111522; --accent:#2a6df4; --accent-2:#6ee7f9;
  --shadow: 0 10px 25px rgba(0,0,0,.25);
  --radius:14px; --space:16px; --max:1100px;
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"; background:linear-gradient(180deg,#0b0d12,#0f1320 40%,#0b0d12); color:var(--fg); line-height:1.6}

.wrap{width:min(100%,var(--max)); margin:0 auto; padding:0 20px}
.wrap.narrow{width:min(100%,720px)}

.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(12px);
  background:rgba(11,13,18,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.site-header{display:flex; align-items:center; justify-content:space-between; padding:14px 20px}
.brand{display:flex; gap:10px; align-items:center; color:var(--fg); text-decoration:none; font-weight:700}
.brand svg{width:28px; height:28px}
.brand svg rect{fill:var(--accent)}
.brand svg path{fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.nav a{color:var(--fg); text-decoration:none; margin-left:18px; opacity:.9}
.nav a:hover{opacity:1}

.hero{position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.hero .wrap{padding:80px 20px 90px; text-align:center}
.hero h1{margin:0 0 10px; font-size:clamp(28px,6vw,44px); letter-spacing:.2px}
.hero p{margin:0 auto 28px; max-width:700px; color:var(--muted)}
.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; border:1px solid rgba(255,255,255,.12)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#061022; border-color:transparent; box-shadow:var(--shadow)}
.btn.ghost{color:var(--fg)}
.hero-bg{position:absolute; inset:auto -20% -35% -20%; height:55vh; filter:blur(80px);
  background:radial-gradient(60% 60% at 50% 40%, rgba(106,159,255,.35), transparent 70%),
             radial-gradient(60% 60% at 60% 70%, rgba(110,231,249,.25), transparent 70%)}

.section{padding:64px 0}
.section h2{font-size:clamp(22px,4.5vw,32px); margin:0 0 14px}
.section p{color:var(--muted); margin:0}
.section.alt{background:rgba(255,255,255,.02); border-block:1px solid rgba(255,255,255,.06)}

.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:18px}
.card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:18px; box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.card h3{margin:4px 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted)}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:center}
.stats div{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:22px}
.stats strong{display:block; font-size:22px}
.stats span{color:var(--muted)}

.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:18px 0; color:var(--muted)}
@media (max-width:640px){ .stats{grid-template-columns:1fr 1fr} }