:root{--bg:#0b1020;--panel:#141b2e;--ink:#e8ecf5;--muted:#8b96ad;--accent:#5b8cff;--accent2:#7c5cff}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Inter,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;border-bottom:1px solid #1e2740}
.brand{font-weight:800;font-size:22px}.brand span{color:var(--accent)}
nav a{margin-left:22px;color:var(--muted)}
.btn{padding:9px 16px;border-radius:10px;border:1px solid #2a3556}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border:0;color:#fff}
.btn.ghost{background:transparent}
main{max-width:1040px;margin:0 auto;padding:0 24px}
.hero{padding:80px 0 40px;text-align:center}
.hero h1{font-size:46px;line-height:1.1;margin:0 0 16px}
.hero p{color:var(--muted);font-size:18px;max-width:640px;margin:0 auto 28px}
.cta{display:flex;gap:14px;justify-content:center;margin-bottom:44px}
.stat-row{display:flex;gap:48px;justify-content:center}
.stat-row b{display:block;font-size:26px}.stat-row span{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:40px 0}
.card{background:var(--panel);border:1px solid #1e2740;border-radius:14px;padding:22px}
.card h3{margin:0 0 8px}
.dev{background:var(--panel);border:1px solid #1e2740;border-radius:16px;padding:28px;margin:20px 0 60px}
pre{background:#0a0e1c;border:1px solid #1e2740;border-radius:10px;padding:16px;overflow:auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#cbd5f5}
.host{color:var(--accent)}
footer{display:flex;justify-content:space-between;padding:28px 40px;border-top:1px solid #1e2740;color:var(--muted);flex-wrap:wrap;gap:8px}
.muted{color:var(--muted)}