:root{
  --bg:#090e1a;
  --panel:#0e152b;
  --card:#121b37;
  --text:#eaf0ff;
  --muted:#a0a7c8;
  --brand:#7aa2ff;
  --brand-2:#44dfbf;
  --ring:#2b3666;
  --shadow:0 20px 50px rgba(0,0,0,.35);
  --radius:16px;
  --radius-lg:22px;
  --border:1px solid rgba(255,255,255,.08);
  --grad:linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  background:
    radial-gradient(1200px 500px at -10% -20%, rgba(122,162,255,.2), transparent),
    radial-gradient(1000px 500px at 120% 0%, rgba(68,223,191,.18), transparent),
    var(--bg);
  color:var(--text);
  line-height:1.7;
  letter-spacing:.1px;
}

.container{width:min(1100px, 92%); margin-inline:auto}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(9,14,26,.65);
  border-bottom:var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{font-weight:800; letter-spacing:.3px}
.brand span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav-toggle{display:none; border:1px solid rgba(255,255,255,.2); background:transparent; color:var(--text); padding:.5rem .7rem; border-radius:10px}
.nav-menu{display:flex; gap:1rem; align-items:center}
.nav-menu a{color:var(--text); text-decoration:none; opacity:.92}
.nav-menu a:hover{opacity:1}

.btn{display:inline-block; padding:.9rem 1.1rem; border-radius:14px; text-decoration:none; font-weight:700; border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow)}
.btn-sm{padding:.5rem .7rem; border-radius:10px}
.btn-primary{background:var(--grad); color:#0b1224}
.btn-ghost{background:transparent; color:var(--text)}

.hero{position:relative; padding:clamp(3rem, 6vw, 6rem) 0 3rem}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.hero-bg{position:absolute; inset:0; background:
  radial-gradient(700px 240px at 30% 0%, rgba(122,162,255,.15), transparent),
  radial-gradient(700px 240px at 80% 10%, rgba(68,223,191,.15), transparent)}
.eyebrow{color:var(--muted); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem}
h1{font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.1; margin:.4rem 0 1rem}
.accent{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:1.1rem; color:var(--muted); margin-bottom:1rem}
.hero-badges{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem}
.badge{padding:.45rem .7rem; border-radius:999px; background:#0c1226; border:var(--border); color:var(--text); font-weight:600}
.cta{display:flex; gap:.7rem; flex-wrap:wrap; margin:.3rem 0 1rem}
.guarantee-line{color:var(--muted); font-size:.95rem}

.hero-card{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:1.2rem}
.avatar-wrap{position:relative; width:140px; height:140px; margin:-60px auto 0; transform:translateY(-10px)}
.avatar{width:140px; height:140px; border-radius:50%; display:block; object-fit:cover; border:6px solid #0b1224}
.avatar-ring{position:absolute; inset:-8px; border-radius:50%; border:2px dashed var(--ring); pointer-events:none}
.card-body{padding:0 1rem 1rem}
.card h3{margin-top:.6rem}

.section{padding:clamp(2rem, 6vw, 4rem) 0}
.section-head{text-align:center; margin-bottom:1.4rem}
.section-head .muted{color:var(--muted)}

.grid{display:grid; gap:1rem}
.cards-3{grid-template-columns:repeat(3, 1fr)}
.card{background:var(--card); border-radius:var(--radius); border:var(--border); padding:1.2rem; box-shadow:var(--shadow)}

.section-accent{background:linear-gradient(180deg, rgba(122,162,255,.07), rgba(68,223,191,.07))}
.guarantee{display:grid; grid-template-columns:120px 1fr; gap:1rem; align-items:center}
.badge-giant{width:120px; height:120px; border-radius:24px; display:grid; place-content:center; background:var(--grad); color:#0b1224; font-size:2.4rem; font-weight:900; box-shadow:var(--shadow)}
.badge-giant span{font-size:.8rem; letter-spacing:.08em}

.pricing-grid{display:grid; grid-template-columns:1fr .9fr; gap:1rem; align-items:start}
.price-line{font-size:1.6rem; margin:.5rem 0 1rem}
.btn-block{display:block; text-align:center; width:100%}
.list-check, .list-dot{padding-left:1.2rem}
.list-check li{margin:.3rem 0}
.list-dot li{margin:.3rem 0; list-style:disc}
.faq details{background:rgba(255,255,255,.04); border-radius:12px; padding:.7rem 1rem; margin:.5rem 0; border:var(--border)}
summary{cursor:pointer; font-weight:700}

.lead{}
.lead.card{}
.lead.card h3{margin-top:0}
.lead.card input, .lead.card textarea{width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:#0b1224; color:var(--text)}
.lead.card input::placeholder, .lead.card textarea::placeholder{color:#8f97be}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}

.footer{padding:2rem 0; border-top:var(--border)}
.footer-grid{display:grid; grid-template-columns:1.1fr .9fr 1fr; gap:1rem; align-items:start}
.footer-links{display:grid; gap:.3rem}
.footer a{color:var(--text); text-decoration:none; opacity:.9}
.footer a:hover{opacity:1}
.muted{color:var(--muted)}

/* Responsive */
@media (max-width: 980px){
  .nav-toggle{display:block}
  .nav-menu{position:fixed; inset:58px 0 auto 0; background:#0b1224; border-bottom:var(--border); padding:1rem; display:none; flex-direction:column}
  .nav-menu.show{display:flex}
  .hero-grid{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .cards-3{grid-template-columns:1fr}
}