/* ── CTA Section — shared full-bleed accent band ─────────────────────────── */
.cta-section {
  background: var(--color-accent);
  position: relative;
  overflow: hidden;
}

/* Decorative floating shapes */
.cta-section::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  top: -100px; left: -80px;
  pointer-events: none;
}
.cta-section::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.1);
  bottom: -60px; right: 10%;
  pointer-events: none;
}
/* Extra decorative ring — inset on the right */
.cta-section .container { position: relative; z-index: 1; }
.cta-section .container::before {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  top: 50%; right: -60px;
  transform: translateY(-50%);
  pointer-events: none;
}
.cta-section .container::after {
  content: '';
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.1);
  bottom: 0; left: -30px;
  pointer-events: none;
}
.cta-block {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  padding-block: var(--space-8);
}
.cta-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  margin-bottom: var(--space-4);
}
.cta-headline {
  color: #fff !important;
  margin-bottom: var(--space-5);
}
.cta-body {
  font-size: var(--text-base);
  color: rgba(255,255,255,.85);
  line-height: var(--leading-relaxed);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-8);
}
.cta-section .btn--primary {
  background: #fff;
  color: var(--color-accent);
  border-color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.cta-section .btn--primary:hover {
  background: rgba(255,255,255,.92);
}
.cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Ghost secondary button inside a CTA band */
.cta-section .btn--ghost {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.4);
}
.cta-section .btn--ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.08);
}