/* ==========================================================================
   CTA — call-to-action sections with gradient backgrounds.
   ========================================================================== */

.cta {
  position: relative;
  padding: clamp(3rem, 2rem + 5vw, 5rem) clamp(2rem, 1.5rem + 3vw, 4rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-accent);
  background:
    radial-gradient(40rem 20rem at 20% 0%, var(--glow-1), transparent 60%),
    radial-gradient(40rem 20rem at 80% 100%, var(--glow-2), transparent 60%),
    var(--bg-raised);
  overflow: hidden;
}

.cta__inner {
  display: grid;
  gap: var(--space-5);
  text-align: center;
  justify-items: center;
  max-width: 42rem;
  margin-inline: auto;
}

.cta__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.cta__text {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.cta--left .cta__inner {
  text-align: left;
  justify-items: start;
}

.cta--left .cta__actions { justify-content: flex-start; }