:root{--bg:#0b1220;--ink:#0f172a;--muted:#94a3b8;--pri:#5469d4;--priH:#4054b2;--panel:#0b1220}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;background:linear-gradient(180deg,#0b1220,#0f172a);color:#e5e7eb}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.6);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;letter-spacing:.3px}
.nav a{color:#cbd5e1;text-decoration:none;margin-left:18px}
.nav .btn{margin-left:12px}
.hero{position:relative;padding:80px 0}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero-copy h1{font-size:48px;line-height:1.1;margin:0 0 10px 0}
.hero-copy p{color:#cbd5e1;margin:0 0 16px 0}
.cta .btn{margin-right:12px}
.hero-badges span{display:inline-block;border:1px solid rgba(255,255,255,.15);border-radius:9999px;padding:6px 10px;margin-right:8px;color:#cbd5e1;font-size:12px}
.hero-art .panel{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:18px}
.hero pre{background:#0a1220;color:#d1d5db;border-radius:10px;padding:12px;overflow:auto}
.hero-bg{position:absolute;inset:0;background:radial-gradient(800px 400px at 20% 0%,rgba(84,105,212,.25),transparent),radial-gradient(600px 300px at 80% 10%,rgba(59,130,246,.25),transparent)}
.features{padding:60px 0;background:#0f172a;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.features h2,.plans h2{font-size:28px;margin:0 0 18px 0}
.features .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.features .card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:18px}
.plans{padding:60px 0}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.plan-card{background:#fff;color:#0f172a;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:18px;display:flex;flex-direction:column}
.plan-name{font-weight:700}
.plan-price{font-size:26px;font-weight:800;margin:6px 0}
.plan-price span{font-size:12px;color:#64748b;font-weight:600}
.plan-features{list-style:none;padding:0;margin:8px 0 16px 0;color:#334155}
.plan-features li{margin:6px 0}
.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.06);background:rgba(11,18,32,.6);backdrop-filter:blur(6px)}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.footer-links a{color:#cbd5e1;text-decoration:none;margin-left:12px}
.btn{display:inline-block;background:var(--pri);color:#fff;border-radius:10px;padding:10px 14px;text-decoration:none;font-weight:600}
.btn:hover{background:var(--priH)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.25)}
.btn.full{display:block;text-align:center}
.btn.xl{padding:12px 18px}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}}