/* ==========================================================================
   Final CTA panel — template-parts/home/cta.php
   ========================================================================== */

.cta__panel {
	position: relative;
	padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
	border-radius: var(--r-xl);
	background: linear-gradient(135deg, var(--dli-green-600), var(--dli-green-900));
	color: #fff;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.cta__panel .eyebrow {
	justify-content: center;
	color: #d9f99d;
}

.cta__panel h2 {
	margin-inline: auto;
	max-width: 760px;
	color: #fff;
	font-size: var(--fs-4xl);
}

.cta__lead {
	max-width: 560px;
	margin: 0 auto var(--s-6);
	color: rgb(255 255 255 / 0.85);
	font-size: var(--fs-lg);
}

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

.cta__shapes span {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 0.18);
	animation: dli-float 9s var(--ease-in-out) infinite alternate;
}

.cta__shapes span:nth-child(1) { width: 320px; height: 320px; left: -100px; top: -140px; }
.cta__shapes span:nth-child(2) { width: 220px; height: 220px; right: -60px; bottom: -80px; background: rgb(255 255 255 / 0.06); animation-delay: -3s; }
.cta__shapes span:nth-child(3) { width: 90px; height: 90px; right: 18%; top: 14%; background: rgb(237 151 0 / 0.35); border: 0; animation-delay: -6s; }

@keyframes dli-float {
	to { transform: translate3d(20px, -24px, 0) rotate(12deg); }
}