/* ===================================================================
	 CTA band
	 =================================================================== */

section#cta1 {
	position: relative;
	overflow: hidden;
	padding-block: 4rem;
	text-align: center;
}
.cta__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 80% at 50% 120%, var(--color-accent-soft), transparent 70%),
    var(--color-bg);
}
/* CTA2: transparent so the hero canvas shows through */
#cta2 .cta__bg {
  background:
    radial-gradient(60% 80% at 50% 120%, var(--color-accent-soft), transparent 70%);
}
.cta__inner { position: relative; z-index: 1; display: grid; place-items: center; gap: var(--space-lg); }
.cta h2 {
	font-size: var(--step-3xl);
	font-weight: 500;
	letter-spacing: -0.035em;
	max-width: 20ch;
}
.cta h2 em { color: var(--color-accent); font-style: italic; font-weight: 400; }
.cta p { color: var(--color-fg-muted); max-width: 52ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-block-start: var(--space-sm); }

/* big rotating ring decoration */
.cta__ring {
	position: absolute;
	width: 600px; height: 600px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	animation: ring-spin 40s linear infinite;
	pointer-events: none;
	opacity: 0.4;
}
.cta__ring::before, .cta__ring::after {
	content: ""; position: absolute; inset: -60px;
	border-radius: 50%;
	border: 1px dashed var(--color-line);
}
.cta__ring::after { inset: -120px; border-style: dotted; }
@keyframes ring-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cta__ring { animation: none; } }

section#cta2 {
	position: relative;
	overflow: hidden;
	padding-block: 2rem 6rem;
	text-align: center;
}

/* ---- Inverted CTA (light background) ---- */
.cta.invert .cta__bg {
	background:
		radial-gradient(60% 80% at 50% 120%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%),
		var(--color-bg-invert);
}
.cta.invert .cta__ring,
.cta.invert .cta__ring::before,
.cta.invert .cta__ring::after {
	border-color: var(--color-line-invert);
}
.cta.invert p { color: var(--color-fg-invert-muted); }
.cta.invert .btn--ghost { --btn-fg: var(--color-fg-invert); box-shadow: inset 0 0 0 1px var(--color-line-invert); }
.cta.invert .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--color-accent); }