/* ─────────────────────────────────────────
   Next Digital — Shared CTA section
   Used by the home + services pages. Identical styles, identical markup.
   The shader + scroll-zoom behaviour live in assets/js/cta.js.
───────────────────────────────────────── */

.nd-cta-section {
	padding: 80px 48px 100px;
	border-bottom: 1px solid oklch(100% 0 0 / 0.07);
	position: relative;
}

/* Scroll-driven zoom wrapper — JS sets transform here without conflicting
   with the hover translateY on .nd-cta-card. */
.nd-cta-zoom {
	transform-origin: center center;
	will-change: transform;
}

.nd-cta-card {
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid oklch(100% 0 0 / 0.10);
	background: oklch(10% 0.04 215);
	box-shadow:
		0 30px 80px oklch(0% 0 0 / 0.45),
		inset 0 1px 0 oklch(100% 0 0 / 0.10);
	transition: border-color 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nd-cta-card:hover,
.nd-cta-card.nd-cta-card-active {
	border-color: transparent;
	transform: translateY(-3px);
}

.nd-cta-card::before {
	content: '';
	position: absolute; inset: 0;
	border-radius: inherit; padding: 1.5px;
	background: conic-gradient(
		from var(--nd-beam-a),
		transparent 0%, transparent 62%,
		oklch(85% 0.14 192 / 0.5) 76%,
		oklch(97% 0.03 200 / 1)   82%,
		oklch(85% 0.14 192 / 0.5) 88%,
		transparent 100%
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.55;
	animation: nd-beam-spin 5.5s linear infinite;
	pointer-events: none;
	z-index: 3;
}
.nd-cta-card:hover::before,
.nd-cta-card.nd-cta-card-active::before { opacity: 1; }

.nd-cta-shader {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	z-index: 0;
	display: block;
	opacity: 0.85;
}

.nd-cta-card-veil {
	position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, oklch(8% 0.04 215 / 0.55) 75%),
		linear-gradient(180deg, oklch(10% 0.04 215 / 0.30) 0%, oklch(8% 0.04 215 / 0.10) 50%, oklch(10% 0.04 215 / 0.30) 100%);
	pointer-events: none;
}

.nd-cta-card-body {
	position: relative; z-index: 2;
	padding: 90px 48px;
	text-align: center;
	display: flex; flex-direction: column; align-items: center;
	gap: 22px;
}

.nd-cta-block-content { margin: 0; }
.nd-cta-block-content h2,
.nd-cta-block-content .wp-block-heading {
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 400; letter-spacing: -1.4px; line-height: 1.12;
	color: oklch(95% 0.005 215);
	margin: 0;
}

.nd-cta-title {
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 400; letter-spacing: -1.4px; line-height: 1.12;
	color: oklch(95% 0.005 215); margin: 0;
}
.nd-cta-title em { font-style: normal; color: var(--nd-accent); }

.nd-cta-text {
	font-size: 15px; font-weight: 300;
	color: oklch(72% 0.04 210);
	line-height: 1.65;
	max-width: 520px;
	margin: 0;
}

.nd-cta-btn { font-size: 14px; padding: 14px 30px; font-weight: 500; margin-top: 6px; }

@media (max-width: 900px) {
	.nd-cta-section { padding: 56px 20px; }
	.nd-cta-card { border-radius: 22px; }
	.nd-cta-card-body { padding: 56px 24px; gap: 16px; }
	.nd-cta-block-content h2,
	.nd-cta-block-content .wp-block-heading,
	.nd-cta-title { font-size: clamp(26px, 7vw, 38px); letter-spacing: -0.6px; }
	.nd-cta-text  { font-size: 13.5px; }
	.nd-cta-btn   { font-size: 13px; padding: 12px 24px; }
}

@media (max-width: 480px) {
	.nd-cta-section { padding: 48px 16px; }
	.nd-cta-card-body { padding: 44px 18px; }
}