/* Base */
:root{
  --bg: #0b0f16;
  --bg-2: #0e1420;
  --text: #e8ecf4;
  --muted: #98a2b3;
  --primary: #6d7cff;
  --primary-2: #9b5cff;
  --accent: #00e6ff;
  --success: #00d68f;
  --danger: #ff477e;
  --card: #101725;
  --border: #1c2435;
  --shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 40px rgba(109,124,255,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg-2));color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1120px,92%);margin:0 auto}
.grid{display:grid;gap:24px}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(11,15,22,.7);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header__inner{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700}
.logo__mark{filter:drop-shadow(0 0 14px var(--accent))}
.logo__text b{color:var(--primary)}
.nav{display:flex;align-items:center;gap:20px}
.nav__link{opacity:.9}
.nav__cta{margin-left:8px}
.nav__toggle{display:none;background:transparent;border:0;color:var(--text);font-size:22px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:12px;border:1px solid transparent;transition:.25s ease;font-weight:600}
.btn--primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 6px 16px rgba(109,124,255,.35),0 0 24px rgba(155,92,255,.25)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(109,124,255,.45),0 0 34px rgba(155,92,255,.35)}
.btn--outline{border-color:var(--border);background:transparent}
.btn--outline:hover{border-color:var(--primary);box-shadow:0 0 0 4px rgba(109,124,255,.15)}
.btn--ghost{background:transparent;border-color:transparent}
.btn--link{border:0;background:transparent;color:var(--accent)}
.btn--glow{position:relative}
.btn--glow::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:radial-gradient(60% 60% at 50% 50%,rgba(0,230,255,.35),rgba(155,92,255,.0));filter:blur(14px);z-index:-1;opacity:.8}

/* Hero */
.hero{padding:88px 0 48px;border-bottom:1px solid var(--border);background:radial-gradient(1200px 600px at 70% -10%,rgba(109,124,255,.18),transparent 60%),radial-gradient(800px 500px at 0% 10%,rgba(0,230,255,.12),transparent 50%)}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.title{font-size:42px;line-height:1.1;margin:0 0 12px}
.title span{color:var(--accent);text-shadow:0 0 22px rgba(0,230,255,.35)}
.subtitle{color:var(--muted);font-size:18px;margin:0 0 20px}
.hero__ctas{display:flex;gap:12px;margin:14px 0 18px}
.hero__bullets{list-style:none;padding:0;margin:8px 0 0;display:flex;gap:16px;color:#c7d0e0;flex-wrap:wrap}

.hero__visual{position:relative}
.mockup{background:linear-gradient(180deg,#0f1628,#0b0f16);border:1px solid #1b253a;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.mockup__topbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0f1628,#0d1320)}
.mockup__topbar span{width:10px;height:10px;border-radius:50%;background:#2b3550}
.mockup__title{margin-left:auto;color:#9fb0d0;font-size:12px}
.mockup__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.stat__label{color:#9fb0d0;font-size:12px}
.stat__value{font-size:28px;font-weight:800;margin-top:8px}
.spark{height:54px;margin-top:10px;background:linear-gradient(90deg,rgba(109,124,255,.35),rgba(0,230,255,.25));mask:linear-gradient(90deg,#000 40%,transparent 60%);animation:spark 2.4s linear infinite}
@keyframes spark{to{transform:translateX(100%)}}
.action{display:flex;align-items:center;justify-content:space-between;gap:12px}
.action h3{margin:0 0 6px;font-size:18px}
.action p{margin:0;color:#a9b7cf}

/* Sections */
.section__title{font-size:32px;margin:0 0 18px}
.benefits{padding:64px 0}
.benefits__grid{grid-template-columns:repeat(3,1fr)}
.benefit .ico{font-size:22px;margin-bottom:6px;filter:drop-shadow(0 0 14px rgba(0,230,255,.25))}
.benefit h3{margin:6px 0}
.benefit p{margin:0;color:#a9b7cf}

.how{padding:40px 0 64px;border-top:1px solid var(--border)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:linear-gradient(180deg,#0f1628,#0b0f16);border:1px dashed #27324a;border-radius:14px;padding:16px}
.step__num{display:inline-flex;width:28px;height:28px;border-radius:8px;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),#5affc3);color:#00131a;font-weight:800;margin-bottom:8px}

.pricing{padding:64px 0;border-top:1px solid var(--border)}
.pricing__grid{grid-template-columns:repeat(3,1fr)}
.price__value{font-size:30px;font-weight:800;margin:6px 0 12px}
.price__list{padding-left:18px;color:#a9b7cf}
.price--featured{border-color:rgba(109,124,255,.7);box-shadow:0 0 0 2px rgba(109,124,255,.2),0 16px 40px rgba(109,124,255,.18)}
.ribbon{position:absolute;margin-top:-10px;margin-left:-10px;background:linear-gradient(135deg,var(--primary),var(--primary-2));padding:6px 10px;border-radius:8px;font-size:12px}
.price{position:relative}

.social{padding:64px 0;border-top:1px solid var(--border)}
.section__kpi{color:#cfe7ff;margin:-8px 0 22px}
.testimonials{grid-template-columns:repeat(3,1fr)}
.testimonial .avatar{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:8px}
.testimonial .stars{color:#ffd166;margin-bottom:6px}

.compare{padding:64px 0;border-top:1px solid var(--border)}
.compare__inner{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.compare__bullets{list-style:none;padding:0;margin:12px 0 0;color:#c7d0e0;display:grid;gap:6px}
.bar{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;margin:12px 0}
.bar__track{height:12px;background:#0b1220;border-radius:999px;border:1px solid #1c2435;overflow:hidden}
.bar__fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--primary));width:0%}
.bar__fill--invert{background:linear-gradient(90deg,var(--danger),#ffb86b)}

.faq{padding:64px 0;border-top:1px solid var(--border)}
.accordion details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.accordion details+details{margin-top:12px}
.accordion summary{cursor:pointer;font-weight:600}
.accordion p{color:#a9b7cf}

.guarantee{padding:64px 0;border-top:1px solid var(--border)}
.guarantee__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.timer{display:grid;gap:10px;place-items:center}
.timer__label{color:#c7d0e0}
.timer__value{font-size:38px;font-weight:800;letter-spacing:1px;text-shadow:0 0 22px rgba(0,230,255,.25)}

.footer{padding:32px 0;border-top:1px solid var(--border);background:#0a0e14}
.footer__inner{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}
.footer__links{display:flex;gap:18px;justify-content:center}
.footer__note{color:#9fb0d0;text-align:right}

/* Floating CTA */
.floating-cta{position:fixed;right:18px;bottom:18px;z-index:60}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* Responsive */
@media (max-width: 992px){
  .hero__inner{grid-template-columns:1fr}
  .compare__inner{grid-template-columns:1fr}
  .guarantee__inner{grid-template-columns:1fr}
}
@media (max-width: 840px){
  .benefits__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .pricing__grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr;gap:12px}
  .footer__note{text-align:center}
  .footer__links{justify-content:center}
  .nav{position:fixed;inset:68px 0 auto 0;background:#0a0f1a;border-bottom:1px solid var(--border);padding:12px;flex-direction:column;gap:10px;transform:translateY(-120%);transition:.25s ease}
  .nav.nav--open{transform:translateY(0%)}
  .nav__toggle{display:inline-block}
}