/* Base */
:root {
  --bg: #0a0b10;
  --bg-elev: #0f111a;
  --text: #e6e9ef;
  --muted: #a3a9b7;
  --brand: #7c3aed; /* bright violet */
  --brand-2: #06b6d4; /* cyan accent */
  --ok: #22c55e;
  --warn: #f59e0b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(124,58,237,.35), transparent 60%),
              radial-gradient(900px 600px at 120% 20%, rgba(6,182,212,.25), transparent 50%),
              var(--bg);
  line-height: 1.6;
}

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

a { color: inherit; text-decoration: none; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.2rem;
  border-radius: .8rem;
  font-weight: 700;
  border: 1px solid transparent;
  transition: .2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: white;
  box-shadow: 0 10px 30px rgba(124,58,237,.35);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-ghost {
  background: transparent;
  border-color: rgba(230,233,239,.2);
  color: var(--text);
}
.btn-ghost:hover { border-color: rgba(230,233,239,.35); }
.btn-lg { padding: 1rem 1.4rem; }
.btn-xl { padding: 1.1rem 1.6rem; font-size: 1.05rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(140%) blur(10px); background: rgba(10,11,16,.45); border-bottom: 1px solid rgba(230,233,239,.06); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; }
.brand { font-weight: 800; letter-spacing: .3px; }
.nav-links { display: flex; gap: 1rem; }
.nav-link { opacity: .85; }
.nav-link:hover { opacity: 1; }

/* Hero */
.hero { position: relative; padding: 6rem 0 4rem; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .55; mix-blend-mode: screen; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: center; justify-items: center; text-align: center; }
.hero-text { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; margin: 0 0 1rem; }
.lead { color: var(--muted); max-width: 48ch; margin: 0 auto 1rem; }
.cta-row { display: flex; gap: .8rem; margin: 1.2rem 0 1rem; flex-wrap: wrap; justify-content: center; }
.disclaimer { color: var(--muted); font-size: .9rem; max-width: 52ch; margin: 0 auto; }
.kw-rotator { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; display: inline-block; }


/* Offer + Steps */
.offer { padding: 4rem 0; background: linear-gradient(180deg, rgba(10,11,16,0), rgba(10,11,16,.6)); }
.offer-head { text-align: center; margin-bottom: 2rem; }
.offer h2 { margin: 0 0 .5rem; }
.countdown { margin: 1rem auto 1.2rem; display: inline-flex; align-items: center; padding: .6rem .9rem; border-radius: .8rem; background: rgba(15,17,26,.6); border: 1px solid rgba(230,233,239,.08); gap: .7rem; }
.countdown .time { min-width: 70px; text-align: center; background: rgba(124,58,237,.12); border-radius: .6rem; padding: .5rem .6rem; }
.countdown .time span { display: block; font-size: 1.3rem; font-weight: 800; }
.countdown .time small { color: var(--muted); font-size: .75rem; }
.countdown .separator { opacity: .5; }

.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: rgba(15,17,26,.55); border: 1px solid rgba(230,233,239,.08); border-radius: .9rem; padding: 1rem; }
.step .num { width: 38px; height: 38px; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: white; border-radius: .6rem; }
.step h3 { margin: .1rem 0 .2rem; }
.step p { color: var(--muted); margin: 0; }

/* Reviews */
.reviews { padding: 4rem 0; }
.reviews h2 { text-align: center; margin: 0 0 1.4rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.review { background: rgba(15,17,26,.6); border: 1px solid rgba(230,233,239,.08); border-radius: .9rem; padding: 1rem; }
.review blockquote { margin: 0 0 .6rem; font-weight: 600; }
.review figcaption { color: var(--muted); font-size: .9rem; }

/* Final CTA */
.cta-final { padding: 4rem 0 5rem; background: radial-gradient(720px 520px at 50% -10%, rgba(124,58,237,.28), transparent 60%); text-align: center; }
.cta-final-inner { display: grid; gap: .8rem; place-items: center; }
.cta-final p { color: var(--muted); max-width: 56ch; }

/* Footer */
.site-footer { border-top: 1px solid rgba(230,233,239,.06); background: rgba(10,11,16,.6); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; padding: 1.2rem 0; }
.footer-links { display: grid; gap: .5rem; justify-items: end; }
.footer-link { opacity: .85; }
.footer-link:hover { opacity: 1; }
.copyright { padding: .8rem 0 1.4rem; color: var(--muted); text-align: center; font-size: .9rem; }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-items: start; }
}

@media (max-width: 620px) {
  .countdown .time { min-width: 60px; }
  .reviews-grid { grid-template-columns: 1fr; }
}