:root{
  --bg:#0b1020; --panel:#0f1730; --muted:#a8b0c2;
  --text:#e9eefc; --brand:#6ea8ff; --brand2:#9aa9ff; --accent:#1f6bff;
  --ring: rgba(110,168,255,.35);
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(1200px 800px at 80% -10%,#1a2d60 0%,transparent 60%),var(--bg);color:var(--text)}
a{color:var(--text);text-decoration:none}
.nav{max-width:1100px;margin:0 auto;padding:20px 16px;display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:800;letter-spacing:.2px} .brand span{color:var(--brand)}
.nav .pill{padding:8px 14px;border:1px solid #263155;border-radius:999px} .nav .pill.active{background:#1a2544}
.hero{max-width:1100px;margin:40px auto;padding:0 16px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.badge{display:inline-block;background:#16224a;border:1px solid #223164;padding:6px 10px;border-radius:999px;font-size:12px;color:var(--brand)}
h1{font-size:48px;margin:12px 0 10px} h1 span{color:var(--brand2)}
.hero p{color:var(--muted);max-width:560px}
.cta{display:flex;gap:12px;margin:18px 0} .btn{padding:12px 16px;border-radius:10px;border:1px solid #2b375f;background:#11193a;color:var(--text);cursor:pointer} .btn.primary{background:linear-gradient(180deg,#4174ff,#1f54ff)} .btn.ghost{background:#0d142f;border-color:#263155} .btn.full{width:100%}
.features{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;color:#c6d2ff}
.hero-card{display:flex;justify-content:center} .mock{width:300px;height:360px;border-radius:22px;background:linear-gradient(180deg,#16224a,#0d1531);padding:24px;border:1px solid #223164;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.mock .bar{height:10px;background:#233262;border-radius:6px;margin-bottom:10px}.mock .bar.short{width:60%}
.mock .panel{flex:1;border-radius:12px;background:linear-gradient(180deg,#122048,#0a1230);border:1px solid #233262}
.footer{max-width:1100px;margin:30px auto;padding:20px 16px;color:var(--muted)}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:linear-gradient(180deg,#111a3a,#0d1531);border:1px solid #223164;border-radius:16px;padding:18px;margin:14px 0;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.list{margin:10px 0 16px;padding-left:20px} .list li{margin:6px 0}
.price{font-size:34px;font-weight:800;margin:8px 0 12px}
.input, input, textarea{width:100%;background:#0f1730;border:1px solid #21305d;border-radius:10px;padding:10px 12px;color:var(--text);outline:none}
.input:focus, input:focus, textarea:focus{box-shadow:0 0 0 4px var(--ring);border-color:#3553a8}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.form-grid .card h3{margin-top:0}
.actions{display:flex;gap:12px}
.muted{color:var(--muted)}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card.highlight{border-color:#3a56a8;box-shadow:0 10px 40px rgba(47,88,255,.25)}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .grid-2,.grid-3,.pricing-grid{grid-template-columns:1fr} }