:root{
  --bg:#0b1119; --card:#182430; --card2:#1f2e3d; --line:#2b3d4f;
  --text:#e8f0f7; --muted:#93a7b8; --accent:#2dd4bf; --accent2:#38bdf8;
  --ok:#22c55e; --warn:#f59e0b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:linear-gradient(180deg,#0b1119,#0f1720 40%); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.6}
a{color:var(--accent2); text-decoration:none}
.wrap{max-width:1060px; margin:0 auto; padding:0 20px}
.topbar{position:sticky; top:0; z-index:30; background:rgba(11,17,25,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px}
.brand .logo{font-size:26px}
.navlinks{display:none; gap:20px; font-size:14px; color:var(--muted)}
@media(min-width:820px){.navlinks{display:flex}}
.navlinks a{color:var(--muted)} .navlinks a:hover{color:var(--text)}
.navcta{display:flex; gap:8px}
.btn{display:inline-block; border:0; cursor:pointer; border-radius:12px; font-weight:700; font-size:15px;
  padding:12px 20px; background:var(--accent); color:#04202a; transition:filter .15s ease, transform .12s ease}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.sm{padding:9px 15px; font-size:14px}
.btn.big{padding:16px 30px; font-size:17px}

.hero{padding:70px 0 40px; text-align:center}
.badge{display:inline-block; background:rgba(45,212,191,.13); color:var(--accent); border:1px solid rgba(45,212,191,.3);
  padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700; margin-bottom:20px}
.hero h1{font-size:36px; line-height:1.2; margin:0 0 16px; font-weight:900}
@media(min-width:820px){.hero h1{font-size:50px}}
.grad{background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lead{font-size:18px; color:var(--muted); max-width:680px; margin:0 auto 28px}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.trust{margin-top:22px; color:var(--muted); font-size:14px}

.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:44px 0}
@media(min-width:720px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; text-align:center}
.stat b{display:block; font-size:28px; color:var(--accent)}
.stat span{color:var(--muted); font-size:13px}

section{padding:46px 0}
.sec-title{text-align:center; margin-bottom:8px; font-size:28px; font-weight:900}
.sec-sub{text-align:center; color:var(--muted); margin-bottom:30px}
.grid3{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:720px){.grid3{grid-template-columns:repeat(3,1fr)}}
.feature{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px}
.feature .ic{font-size:30px; margin-bottom:10px}
.feature h3{margin:0 0 8px; font-size:17px}
.feature p{margin:0; color:var(--muted); font-size:14px}

.steps{display:grid; grid-template-columns:1fr; gap:16px; counter-reset:s}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; position:relative}
.step .n{width:38px; height:38px; border-radius:50%; background:var(--accent); color:#04202a; font-weight:900;
  display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:12px}
.step h3{margin:0 0 6px; font-size:16px} .step p{margin:0; color:var(--muted); font-size:14px}

.prices{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:720px){.prices{grid-template-columns:repeat(3,1fr)}}
.price{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 22px; text-align:center; display:flex; flex-direction:column}
.price.best{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 10px 40px rgba(45,212,191,.12)}
.price .tag{font-size:12px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.06em}
.price h3{margin:8px 0 4px; font-size:19px}
.price .amt{font-size:34px; font-weight:900; margin:8px 0 2px}
.price .amt small{font-size:14px; color:var(--muted); font-weight:600}
.price .days{color:var(--muted); font-size:13px; margin-bottom:16px}
.price ul{list-style:none; padding:0; margin:0 0 20px; text-align:left; color:var(--muted); font-size:14px}
.price li{margin-bottom:8px} .price li::before{content:"✅ "; margin-right:4px}
.price .btn{margin-top:auto}

.faq{max-width:760px; margin:0 auto}
.q{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:12px}
.q h4{margin:0 0 6px; font-size:16px} .q p{margin:0; color:var(--muted); font-size:14px}

.band{background:linear-gradient(135deg, rgba(45,212,191,.13), rgba(56,189,248,.10)); border:1px solid var(--line);
  border-radius:22px; padding:44px 24px; text-align:center}
.band h2{margin:0 0 10px; font-size:28px; font-weight:900}
.band p{color:var(--muted); margin:0 0 22px}

footer{border-top:1px solid var(--line); padding:30px 0; text-align:center; color:var(--muted); font-size:13px}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}

#sp-pop{position:fixed; right:16px; bottom:16px; z-index:60; max-width:330px;
  transform:translateY(150%); opacity:0; transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .45s; pointer-events:none}
#sp-pop.show{transform:translateY(0); opacity:1; pointer-events:auto}
#sp-pop .sp-card{display:flex; gap:10px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:14px; padding:12px 34px 12px 12px;
  box-shadow:0 14px 34px rgba(0,0,0,.5); position:relative}
#sp-pop .sp-av{width:38px; height:38px; border-radius:50%; flex:0 0 38px; font-weight:900; font-size:15px;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#04202a;
  display:flex; align-items:center; justify-content:center}
#sp-pop .sp-tx{font-size:13px; line-height:1.4; color:var(--text)}
#sp-pop .sp-tx b{color:var(--accent)}
#sp-pop .sp-ago{color:var(--muted); font-size:11.5px; margin-top:3px}
#sp-pop .sp-x{position:absolute; top:6px; right:8px; background:none; border:none; color:var(--muted);
  font-size:15px; cursor:pointer; line-height:1; padding:2px}
#sp-pop .sp-x:hover{color:var(--text)}
@media(max-width:520px){#sp-pop{left:12px; right:12px; max-width:none}}