/* css/components/hero.css */
.hero {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(37, 99, 235, 0.16), transparent 70%),
    var(--color-bg-primary);
  padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem);
  padding-inline: 1.5rem;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__eyebrow {
  color: var(--color-sapphire-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

.hero__headline {
  max-width: 56rem;
  color: var(--color-text-primary);
}

.hero__subcopy {
  max-width: 42rem;
  margin-top: var(--space-6);
  font-size: 1.125rem;
  color: var(--color-text-muted);
}

.hero__social-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-8);
  margin-top: var(--space-8);
  color: var(--color-slate-200);
}
.hero__social-proof li { display: flex; align-items: center; gap: 0.5rem; }
.hero__social-proof li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-emerald-400);
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-10);
  width: 100%;
  max-width: 26rem;
}
@media (min-width: 640px) {
  .hero__cta-group { flex-direction: row; max-width: none; }
}