:root{
  --bg:#0b0f14; --panel:#121821; --line:#1e2836; --txt:#e8eef6;
  --muted:#8fa3ba; --accent:#34e39b; --accent-d:#16b87a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}

.nav{position:sticky;top:0;z-index:50;background:rgba(11,15,20,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:66px}
.brand{font-weight:800;letter-spacing:-.02em;font-size:1.25rem}
.brand span{color:var(--accent)}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:.94rem;color:var(--muted)}
.nav nav a:hover{color:var(--txt)}

.btn{
  display:inline-block;background:var(--accent);color:#062015;font-weight:700;
  padding:13px 24px;border-radius:9px;border:0;cursor:pointer;font-size:.95rem;
  transition:transform .15s, background .15s;
}
.btn:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn-sm{padding:9px 16px;font-size:.88rem}
.btn-ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--panel)}
.btn-full{display:block;text-align:center;width:100%;margin-top:auto}

.hero{padding:96px 0 72px;border-bottom:1px solid var(--line);
  background:radial-gradient(900px 380px at 15% -10%,rgba(52,227,155,.16),transparent)}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.03;letter-spacing:-.035em;margin:0 0 22px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent)}
.lede{max-width:56ch;color:var(--muted);font-size:1.12rem;margin:0 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:32px;flex-wrap:wrap;list-style:none;padding:0;margin:52px 0 0;
  color:var(--muted);font-size:.92rem}
.trust strong{color:var(--txt)}

section{padding:76px 0;border-bottom:1px solid var(--line)}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.03em;margin:0 0 8px;font-weight:800}
.sub{color:var(--muted);margin:0 0 34px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;
  display:flex;flex-direction:column;position:relative}
.card.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.tag{position:absolute;top:-11px;left:26px;background:var(--accent);color:#062015;
  font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
.card h3{margin:0 0 6px;font-size:1.15rem}
.price{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:16px}
.price span{font-size:1rem;font-weight:500;color:var(--muted)}
.card ul{list-style:none;padding:0;margin:0 0 24px;color:var(--muted);font-size:.94rem}
.card li{padding:7px 0;border-bottom:1px solid var(--line)}
.card li:last-child{border:0}
.card li::before{content:"✓";color:var(--accent);margin-right:9px;font-weight:800}

.check{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.check input{flex:1;min-width:240px;background:var(--panel);border:1px solid var(--line);
  color:var(--txt);padding:13px 16px;border-radius:9px;font-size:.98rem}
.check input:focus{outline:2px solid var(--accent);outline-offset:1px}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.cols h4{margin:0 0 6px;font-size:.95rem;text-transform:uppercase;letter-spacing:.07em;color:var(--accent)}
.cols p{margin:0;color:var(--muted);font-size:.95rem}
.cols a{border-bottom:1px solid var(--line)}

footer{padding:36px 0;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:640px){
  .nav nav{display:none}
  .hero{padding:64px 0 48px}
  section{padding:56px 0}
}