:root{
  --bg:#0d1117; --card:#111827; --ink:#e6edf3; --muted:#9fb0bf;
  --brand:#00d4a0; --accent:#6c63ff; --outline:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
     background:var(--bg); color:var(--ink); line-height:1.6}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px 18px}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(13,17,23,.8); backdrop-filter:blur(8px);
       border-bottom:1px solid var(--outline)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:10px 0}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:32px;height:32px}
.brand{font-weight:700;letter-spacing:.2px}
.navlinks{display:flex;gap:18px}
.navlinks a{padding:8px 10px;border-radius:8px}
.navlinks a:hover{background:rgba(255,255,255,.06)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer}
.hamburger span{width:24px;height:2px;background:var(--ink);display:block}
@media (max-width:900px){
  .navlinks{display:none;position:absolute;top:60px;right:18px;background:#0f1420;
            border:1px solid var(--outline);border-radius:12px;padding:8px 10px;flex-direction:column;min-width:200px}
  .navlinks.show{display:flex}
  .hamburger{display:flex}
}

/* Hero */
.hero{padding:72px 0 36px;border-bottom:1px solid var(--outline);
      background:linear-gradient(180deg, rgba(108,99,255,.12), rgba(0,0,0,0))}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 10px}
.hero p{color:var(--muted); margin:0 0 22px; max-width:780px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border-radius:10px;font-weight:600;border:1px solid var(--outline)}
.btn-primary{background:var(--brand);color:#07261f;border-color:transparent}
.btn-ghost{background:transparent;color:var(--ink)}

/* Sections */
.section{padding:40px 0;border-bottom:1px solid var(--outline)}
.section h2{font-size:24px;margin:0 0 6px}
.section .lead{color:var(--muted); margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--outline);border-radius:14px;padding:18px}
.badge{display:inline-block;padding:4px 10px;border:1px solid var(--outline);border-radius:999px;color:var(--muted);font-size:12px}
.price{font-size:28px;font-weight:800}
.small{font-size:12px;color:var(--muted)}

/* FAQ */
.faq .item{border-bottom:1px solid var(--outline);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600}

/* Footer */
footer{padding:28px 0;color:var(--muted)}
footer .links{display:flex;gap:16px;flex-wrap:wrap}
.footer-top{border-top:1px solid var(--outline)}