/* =========================================================================
   Dark Elegance — Cta (Minimal)   [section: cta]
   Centered, full-bleed dark band, min-height 60vh, single column. A frosted-
   glass card holds heading → subheading → cta_group over a patterned dark
   background with decorative geometric shapes and a grain overlay.
   8xl heading (weight 700, tracking 0.01em), CENTER aligned, xl subheading.
   Entrance: bounce-in (700ms, 80ms stagger). Scroll: parallax on shapes.
   CTA hover = underline-expand; card hover = lift-shadow.
   All values come from design-tokens.css — no hard-coded hex.
   ========================================================================= */

.de-cta {
	--de-dur: var(--duration-slower); /* 700ms */
	--de-stagger: 80ms;
	--de-8xl: clamp(3rem, 8vw, 6rem); /* 8xl display heading */
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-section);
	background-color: var(--color-surface-dark);
	color: var(--color-on-dark);
	font-family: var(--font-body);
}

/* ---- Pattern background (dark) ----------------------------------------- */
.de-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	pointer-events: none;
	background-color: var(--color-surface-dark);
	/* Diagonal hairline grid + a soft radial primary glow behind the card. */
	background-image:
		radial-gradient(60% 60% at 50% 40%, rgba(var(--color-primary-rgb), 0.22) 0%, transparent 70%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 14px);
}

/* ---- Grain overlay ------------------------------------------------------ */
.de-cta__grain {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* ---- Decorative geometric shapes (parallax) ---------------------------- */
.de-cta__shapes {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	/* --de-par is written by the section script on scroll; 0 by default. */
	transform: translate3d(0, calc(var(--de-par, 0) * 1px), 0);
	will-change: transform;
}

.de-cta__shape {
	position: absolute;
	display: block;
}

.de-cta__shape--ring {
	top: 14%;
	left: 8%;
	width: clamp(80px, 12vw, 160px);
	height: clamp(80px, 12vw, 160px);
	border: 2px solid rgba(var(--color-primary-rgb), 0.45);
	border-radius: var(--radius-full);
}

.de-cta__shape--dot {
	bottom: 16%;
	right: 12%;
	width: clamp(60px, 9vw, 120px);
	height: clamp(60px, 9vw, 120px);
	border-radius: var(--radius-full);
	background: radial-gradient(circle at 30% 30%, rgba(var(--color-accent-rgb), 0.55), transparent 70%);
}

.de-cta__shape--square {
	top: 22%;
	right: 18%;
	width: clamp(40px, 6vw, 84px);
	height: clamp(40px, 6vw, 84px);
	border: 2px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-sm);
	transform: rotate(18deg);
}

/* ---- Inner container (centered) ---------------------------------------- */
.de-cta__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	display: flex;
	justify-content: center;
}

/* ---- Frosted-glass card ------------------------------------------------- */
.de-cta__card {
	position: relative;
	width: 100%;
	max-width: 56rem;
	margin-inline: auto;
	padding: clamp(var(--space-8), 6vw, var(--space-20)) clamp(var(--space-6), 5vw, var(--space-16));
	text-align: center;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	transition:
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
}

/* Card hover = lift-shadow */
.de-cta__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-xl);
	border-color: rgba(var(--color-primary-rgb), 0.35);
}

/* ---- Eyebrow ------------------------------------------------------------ */
.de-cta__eyebrow {
	margin: 0 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-primary-200);
}

/* ---- Heading (8xl, weight 700, tracking 0.01em, center) ---------------- */
.de-cta__title {
	margin: 0 0 var(--space-6);
	font-family: var(--font-heading);
	font-size: var(--de-8xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: 0.01em;
	color: var(--color-on-dark);
	text-wrap: balance;
}

/* ---- Subheading (xl) ---------------------------------------------------- */
.de-cta__subtitle {
	margin: 0 auto var(--space-10);
	max-width: 46ch;
	font-size: var(--text-xl);
	font-weight: var(--weight-regular);
	line-height: var(--leading-normal);
	color: rgba(255, 255, 255, 0.82);
}

/* ---- CTA group ---------------------------------------------------------- */
.de-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

.de-cta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 28px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	line-height: 1;
	text-decoration: none;
	border-radius: var(--radius-full);
	transition:
		transform var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default),
		background-color var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default);
}

.de-cta__btn--primary {
	background-color: var(--color-on-dark);
	color: var(--color-ink);
	box-shadow: var(--shadow-md);
}

.de-cta__btn--primary:hover,
.de-cta__btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	background-color: var(--color-primary-100);
}

.de-cta__btn--ghost {
	background-color: transparent;
	color: var(--color-on-dark);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.de-cta__btn--ghost:hover,
.de-cta__btn--ghost:focus-visible {
	transform: translateY(-2px);
	border-color: var(--color-on-dark);
	background-color: rgba(255, 255, 255, 0.08);
}

/* CTA hover = underline-expand (animated rule under the label) */
.de-cta__btn-label {
	position: relative;
}

.de-cta__btn-label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-normal) var(--ease-default);
}

.de-cta__btn:hover .de-cta__btn-label::after,
.de-cta__btn:focus-visible .de-cta__btn-label::after {
	transform: scaleX(1);
}

/* ---- Reassurance line --------------------------------------------------- */
.de-cta__reassurance {
	margin: var(--space-8) 0 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	color: rgba(255, 255, 255, 0.6);
}

/* ---- Focus visibility (accessibility) ---------------------------------- */
.de-cta__btn:focus-visible {
	outline: 2px solid var(--color-primary-300);
	outline-offset: 3px;
}

/* =========================================================================
   Entrance — bounce-in (700ms, 80ms stagger)
   Elements start hidden + offset; `.is-visible` on the root plays the reveal.
   ========================================================================= */
.de-cta [data-de-anim] {
	opacity: 0;
	transform: translateY(28px) scale(0.96);
	transition:
		opacity var(--de-dur) var(--ease-out),
		transform var(--de-dur) var(--ease-bounce);
	transition-delay: calc(var(--de-delay, 0) * var(--de-stagger));
}

.de-cta.is-visible [data-de-anim] {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ---- Responsive: tablet & mobile (stack / single-col) ------------------ */
@media (max-width: 768px) {
	.de-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.de-cta__btn {
		width: 100%;
	}

	.de-cta__shape--square {
		display: none;
	}
}

@media (max-width: 480px) {
	.de-cta__shapes {
		opacity: 0.7;
	}
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.de-cta [data-de-anim] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.de-cta__shapes {
		transform: none !important;
	}

	.de-cta__card:hover {
		transform: none;
	}
}