/* v2 iteration — refined design system (overrides styles.css) */
:root {
  --container: 1180px;
  --radius: 22px;
  --sec-y: clamp(64px, 8.5vw, 116px);
  --brand: #6c63ff;
  --accent: #2fe0a0;
  --ink-2: #a7a7b3;
}

.container { max-width: var(--container); }
.section { padding: var(--sec-y) 0; }
section[id] { scroll-margin-top: 112px; }

body { letter-spacing: -0.006em; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.03; letter-spacing: -0.038em; font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.032em; }
h3 { letter-spacing: -0.02em; }
p { color: var(--ink-2); }
.lead { font-size: 1.16rem; color: #c4c4cf; }
.eyebrow { color: var(--accent); letter-spacing: 0.16em; }

.section__head { max-width: 660px; margin: 0 auto clamp(42px, 6vw, 68px); }
.section__head p { font-size: 1.1rem; }

/* announcement bar */
.topbar {
  text-align: center;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 9px 16px;
  color: #e2e2ea;
  background: linear-gradient(90deg, rgba(108, 99, 255, 0.22), rgba(47, 224, 160, 0.22));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }

/* hero */
.hero { padding-top: clamp(40px, 7vw, 78px); }
.hero__inner { gap: 74px; }
.hero__glow { opacity: 0.7; }
.hero__blobs { opacity: 0.6; }
.hero__verbs { font-size: 1.2rem; }
.hero__cta { margin-top: 30px; }
.hero__free { margin: 0; font-size: 1rem; color: var(--accent); font-weight: 700; }

/* buttons */
.btn { padding: 15px 28px; letter-spacing: -0.01em; }
.btn--primary { background: linear-gradient(120deg, var(--brand), #29cfd6 52%, var(--accent)); }

/* trust strip */
.logos__row span { color: #7c7c88; letter-spacing: 0.02em; }

/* features: numbered cards */
#features .grid { counter-reset: feat; }
#features .card { counter-increment: feat; position: relative; padding: 30px 28px; }
#features .card::after {
  content: "0" counter(feat);
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 0.9rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.18);
}

/* slider polish */
.slide { padding: 12px 64px 30px; }

/* accessibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}