:root{
  --bg:#0b1220;
  --surface:#0f172a;
  --surface2:#111c33;
  --card:#0b142b;
  --text:#e5e7eb;
  --muted:#b6c2d4;
  --muted2:#90a3bf;
  --border:rgba(255,255,255,.10);
  --primary:#7c3aed;
  --primary2:#22c55e;
  --ring:rgba(124,58,237,.35);
  --shadow:0 12px 34px rgba(0,0,0,.35);
  --radius:18px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  background:radial-gradient(1200px 900px at 20% -10%, rgba(124,58,237,.30), transparent 55%),
             radial-gradient(1000px 700px at 90% 0%, rgba(34,197,94,.18), transparent 55%),
             var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit}
a:focus-visible{outline:2px solid var(--primary); outline-offset:3px; border-radius:10px}
.page-wrap{min-height:100vh}

.topbar{border-bottom:1px solid var(--border); background:rgba(15,23,42,.65); backdrop-filter:blur(8px)}
.topbar-inner{max-width:var(--max); margin:0 auto; padding:.65rem 1rem; display:flex; justify-content:space-between; gap:1rem; color:var(--muted)}
.pill{padding:.2rem .55rem; border:1px solid var(--border); border-radius:999px; color:var(--text); background:rgba(255,255,255,.05); font-weight:600; font-size:.82rem}

.nav{position:sticky; top:0; z-index:20; background:rgba(11,18,32,.75); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--max); margin:0 auto; padding:.85rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}

.brand-link{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.brand-mark{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow:0 10px 24px rgba(124,58,237,.25);
}
.brand-title{display:block; font-weight:800; letter-spacing:.2px}
.brand-sub{display:block; font-size:.82rem; color:var(--muted2)}

.nav-links{display:flex; gap:.9rem; flex-wrap:wrap; justify-content:flex-end}
.nav-links a{
  text-decoration:none; color:var(--muted);
  padding:.45rem .55rem; border-radius:12px;
}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.nav-links a:focus-visible{background:rgba(255,255,255,.06)}

.section{padding:3rem 0}
.section.alt{background:rgba(255,255,255,.03); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-inner{max-width:var(--max); margin:0 auto; padding:0 1rem}

.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
@media (max-width: 980px){.hero{grid-template-columns:1fr}}
.hero-kicker{display:inline-flex; gap:.5rem; align-items:center; color:var(--muted); font-weight:700}
.hero-kicker:before{content:""; width:10px; height:10px; border-radius:999px; background:var(--primary2); box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.hero h1{margin:.8rem 0 0; font-size:2.35rem; line-height:1.1}
.hero h1 span{color:var(--primary2)}
.hero-lead{color:var(--muted); max-width:52ch; margin:.8rem 0 1rem}
.hero-list{margin:0; padding:0 0 0 1.15rem; color:var(--muted)}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.2rem}
.tagline{color:var(--muted2); font-size:.9rem}

.hero-image img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); display:block; background:rgba(255,255,255,.04)}

.section-header{margin-bottom:1.2rem}
.section-kicker{color:var(--muted2); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem}
.section-title{margin:.35rem 0; font-size:1.65rem}
.section-sub{margin:0; color:var(--muted); max-width:75ch}

.grid{display:grid; gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width: 980px){.grid-3{grid-template-columns:1fr}}
@media (max-width: 860px){.grid-2{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.15rem;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.card-header{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem}
.card-title{font-weight:900; font-size:1.15rem}
.card-desc{margin:.35rem 0 0; color:var(--muted)}
.card-chip{
  padding:.25rem .55rem; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--border);
  color:var(--text); font-size:.8rem; font-weight:800;
}
.badge-best{background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.30)}

.card-list{margin:.9rem 0 0; padding:0 0 0 1.1rem; color:var(--muted)}
.card-footer{margin-top:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.card-price{margin:.65rem 0 0; font-size:1.1rem; font-weight:900}
.card-price span{font-weight:700; color:var(--muted2); font-size:.9rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.62rem .95rem; border-radius:14px;
  font-weight:900; text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg, var(--primary), #5b21b6); color:white; box-shadow:0 16px 32px rgba(124,58,237,.25)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--text); border-color:var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.10)}
.btn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}

.policy-text{max-width:85ch}
.policy-text h1,.policy-text h2{line-height:1.2}
.policy-text h2{margin-top:1.25rem}
.policy-text p,.policy-text li{color:var(--muted)}

.footer{border-top:1px solid var(--border); background:rgba(15,23,42,.55)}
.footer-inner{max-width:var(--max); margin:0 auto; padding:2.2rem 1rem; display:grid; grid-template-columns:1.2fr .8fr; gap:1.6rem}
@media (max-width: 900px){.footer-inner{grid-template-columns:1fr}}
.footer-title{font-weight:950; margin-bottom:.4rem}
.muted{color:var(--muted); margin:.45rem 0}
.legal{max-width:var(--max); margin:0 auto; padding:0 1rem 1.4rem; color:var(--muted2); font-size:.9rem}

.cookie{position:fixed; left:0; right:0; bottom:0; display:none; padding:1rem}
.cookie-inner{
  max-width:var(--max); margin:0 auto; padding:1rem 1rem;
  border-radius:16px; border:1px solid var(--border);
  background:rgba(11,18,32,.92); backdrop-filter:blur(10px);
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
@media (max-width: 860px){.cookie-inner{flex-direction:column; align-items:flex-start}}
.cookie-text{color:var(--muted)}
.cookie-actions{display:flex; gap:.65rem; flex-wrap:wrap}