/* ==========================================================
   Closing call-to-action band (templates/views/assets/cta.html)
   ========================================================== */

.hcta-sec {
	padding: clamp(32px, 4.9vw, 68px) 0;
}
.hcta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(44px, 6.3vw, 88px) clamp(24px, 6vw, 80px);
	border-radius: 28px;
	text-align: center;
	color: #fff;
	background: var(--blue-deep);
}
.hcta-mesh {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.hcta-mesh span {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
}
.hcta-mesh .b1 {
	width: 760px;
	height: 760px;
	top: -320px;
	right: -180px;
	opacity: 0.8;
	background: radial-gradient(closest-side, var(--blue), transparent);
	animation: hcta-d1 22s ease-in-out infinite alternate;
}
.hcta-mesh .b2 {
	width: 560px;
	height: 560px;
	top: 60px;
	right: 18%;
	opacity: 0.5;
	background: radial-gradient(closest-side, var(--cyan), transparent);
	animation: hcta-d2 26s ease-in-out infinite alternate;
}
.hcta-mesh .b3 {
	width: 620px;
	height: 620px;
	top: -260px;
	left: 10%;
	opacity: 0.45;
	background: radial-gradient(closest-side, var(--peri), transparent);
	animation: hcta-d3 30s ease-in-out infinite alternate;
}
.hcta-mesh .b4 {
	width: 520px;
	height: 520px;
	bottom: -280px;
	left: -120px;
	opacity: 0.55;
	background: radial-gradient(closest-side, var(--peach), transparent);
	animation: hcta-d2 24s ease-in-out infinite alternate-reverse;
}
@keyframes hcta-d1 {
	to {
		transform: translate(-120px, 80px) scale(1.1);
	}
}
@keyframes hcta-d2 {
	to {
		transform: translate(90px, -60px) scale(0.92);
	}
}
@keyframes hcta-d3 {
	to {
		transform: translate(140px, 60px) scale(1.08);
	}
}
.hcta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 70%);
}
.hcta .eyebrow {
	color: rgba(255, 255, 255, 0.8);
}
.hcta h2 {
	max-width: 15ch;
	margin: 22px auto 0;
	font: 400 clamp(2.25rem, 5.6vw, 4.5rem)/1.04 var(--font-display);
	letter-spacing: -0.04em;
	text-wrap: balance;
}
.hcta h2 em {
	font-style: normal;
	color: #9fe3ff;
}
.hcta p {
	max-width: 46ch;
	margin: 22px auto 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 17px;
	line-height: 1.7;
}
.hcta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
}
.hcta .btn-white {
	background: #fff;
	color: var(--ink);
}
.hcta .btn-white:hover {
	background: var(--paper);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35);
}
.hcta .btn-glass {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(8px);
}
.hcta .btn-glass:hover {
	background: rgba(255, 255, 255, 0.2);
}
@media (max-width: 640px) {
	.hcta-sec {
		padding: 44px 0;
	}
	.hcta {
		border-radius: 22px;
	}
	.hcta-actions .btn {
		width: 100%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hcta-mesh span {
		animation: none;
	}
}

/* ==========================================================
   Mid-page call band (fragment cta :: callband)
   ========================================================== */
.callband {
	padding: clamp(28px, 4vw, 48px) 0;
}
.callband-in {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px 24px;
	padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 36px);
	border-radius: 24px;
	background: linear-gradient(115deg, color-mix(in srgb, var(--blue) 9%, #fff), #fff 55%, color-mix(in srgb, var(--cyan) 7%, #fff));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent),
		var(--shadow-sm);
}
.callband-in::after {
	content: '';
	position: absolute;
	right: -60px;
	top: -80px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	box-shadow:
		0 0 0 28px color-mix(in srgb, var(--cyan) 6%, transparent),
		0 0 0 56px color-mix(in srgb, var(--cyan) 4%, transparent);
	pointer-events: none;
}
.callband-ic {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: var(--blue);
	background: #fff;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 22%, transparent);
}
.callband-ic svg {
	width: 22px;
	height: 22px;
}
.callband-ic::before,
.callband-ic::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--blue) 45%, transparent);
	opacity: 0;
	animation: callband-wave 3.2s var(--ease) infinite;
}
.callband-ic::after {
	animation-delay: 0.6s;
}
@keyframes callband-wave {
	0% {
		opacity: 0.8;
		transform: scale(1);
	}
	45%,
	100% {
		opacity: 0;
		transform: scale(1.75);
	}
}
.callband-copy b {
	display: block;
	font: 400 clamp(1.2rem, 1.8vw, 1.45rem)/1.25 var(--font-display);
	letter-spacing: -0.015em;
}
.callband-copy p {
	margin-top: 4px;
	color: var(--muted);
	font-size: 15px;
}
.callband .btn-call {
	position: relative;
	z-index: 1;
}
@media (max-width: 640px) {
	.callband {
		padding: 40px 0;
	}
	.callband-in {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 16px;
	}
	.callband-ic {
		width: 44px;
		height: 44px;
	}
	.callband .btn-call {
		grid-column: 1 / -1;
		width: 100%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.callband-ic::before,
	.callband-ic::after {
		animation: none;
	}
}