/**
 * Strategy Callout — edg-strategy-microsite FooterCTA.jsx
 */

.strategy-callout {
	--sc-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--sc-brand: #0760ff;
	--sc-brand-600: #1a5cb3;
	--sc-brand-700: #14488f;
	--sc-navy: #0d1424;
	--sc-bg: #f7f8fc;
	--sc-section: #ffffff;
	--sc-section-alt: #f9f9fb;
	--sc-cloud: #c8d2e5;
	--sc-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	overflow: hidden;
	padding-block: 80px;
	padding-bottom: 80px;
	background: linear-gradient(
		135deg,
		#eff6ff 0%,
		color-mix(in srgb, var(--sc-brand) 3%, #f8fafc) 50%,
		#faf5ff 100%
	);
}

html.theme-dark .strategy-callout {
	--sc-brand: #4b95e4;
	--sc-brand-600: #6ba9eb;
	--sc-brand-700: #2e7ad6;
	--sc-navy: #0c1126;
	--sc-bg: #0c1126;
	--sc-section: #141a32;
	--sc-section-alt: #0e142c;
	--sc-cloud: #c3cce0;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--sc-brand) 6%, var(--sc-section-alt)) 0%,
		var(--sc-section-alt) 50%,
		color-mix(in srgb, var(--sc-brand) 4%, var(--sc-navy)) 100%
	);
}

.strategy-callout p {
	padding-bottom: 0 !important;
}

/* Shell — React .shell */
.strategy-callout__shell {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 1425px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* Panel — rounded-[28px] gradient + spotlight */
.strategy-callout__panel {
	position: relative;
	/* border-radius: 28px;
	padding: 3.5rem 2rem; */
	text-align: center;
	isolation: isolate;
	/* background: linear-gradient(
		120deg,
		color-mix(in srgb, var(--sc-brand) 45%, var(--sc-navy)) 0%,
		color-mix(in srgb, var(--sc-brand) 28%, var(--sc-navy)) 100%
	); */
}

@media (min-width: 640px) {
	.strategy-callout__panel {
		padding: 1.5rem 0rem;
	}
}

.strategy-callout__glow {
	pointer-events: none;
	position: absolute;
	inset: 0;
	opacity: 0;
	/* background-image: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--sc-brand) 55%, transparent), transparent 45%); */
}

/* Spotlight — index.css .spotlight */
.strategy-callout-spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		320px circle at var(--sc-mx, 50%) var(--sc-my, 50%),
		color-mix(in srgb, var(--sc-brand) 14%, transparent),
		transparent 65%
	);
	opacity: 0;
	transition: opacity 0.35s var(--sc-ease);
	pointer-events: none;
	z-index: 0;
}

/* .strategy-callout-spotlight:hover::before {
	opacity: 1;
} */

.strategy-callout__inner {
	position: relative;
	z-index: 1;
}

/* .t-overline.text-brand */
.strategy-callout__eyebrow {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #0760ff;
}

/* animated-section .main-heading */
.strategy-callout__title {
	margin: 1rem auto 0;
	max-width: 50rem;
	font-family: var(--sc-font-display);
	font-size: clamp(2.25rem, 6vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: #0d0f17;
	transition: color 0.3s ease;
}

html.theme-dark .strategy-callout__title {
	color: #ffffff;
}

/* animated-section .gradient-text — optional accent line */
.strategy-callout__title-accent {
	background: linear-gradient(90deg, #60a5fa, #818cf8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: inline;
	transition: background 0.3s ease;
}

html.theme-dark .strategy-callout__title-accent {
	background: linear-gradient(90deg, #93c5fd, #a5b4fc);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* animated-section .roadmap-modal-subtitle / .roadmap-item-desc */
.strategy-callout__desc {
	margin: 1rem auto 0;
	max-width: 45rem;
	font-size: 18px;
	line-height: 1.625;
	color: #0d0f17;
	transition: color 0.3s ease;
}

html.theme-dark .strategy-callout__desc {
	color: #94a3b8;
}

.strategy-callout__actions {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.strategy-callout__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-size: 15px;
	border-radius: 9999px;
	transition: transform 0.2s var(--sc-ease), background 0.2s, color 0.2s;
}

/* .cta-gradient — solid brand */
.strategy-callout__btn--primary {
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	color: #fff;
	background: var(--sc-brand);
	box-shadow:
		0 12px 32px -14px color-mix(in srgb, var(--sc-brand) 75%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.strategy-callout__btn--primary:hover {
	color: #fff;
	transform: translateY(-2px);
}

.strategy-callout__btn--primary i,
.strategy-callout__btn--primary svg {
	width: 1rem;
	height: 1rem;
}

/* border-white/40 font-600 */
.strategy-callout__btn--secondary {
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	color: #0d0f17;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: #fff;
}

.strategy-callout__btn--secondary:hover {
	color: #0760ff;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid #0760ff;
}

/* Reveal */
.strategy-callout-reveal {
	opacity: 0;
	will-change: opacity, transform;
}

.strategy-callout-reveal.is-visible {
	animation: strategy-callout-reveal-up 0.55s var(--sc-ease) forwards;
}

@keyframes strategy-callout-reveal-up {
	from { opacity: 0; transform: translate3d(0, 14px, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.strategy-callout-reveal.reveal-done {
	animation: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.strategy-callout-spotlight::before {
		transition: none;
	}

	.strategy-callout-reveal {
		opacity: 1;
		animation: none !important;
	}

	.strategy-callout__btn--primary:hover {
		transform: none;
	}

	.strategy-callout__blob,
	.strategy-callout__governance-hub,
	.strategy-callout__layers-badge,
	.strategy-callout__pulse-dot,
	.strategy-callout__federated-graph,
	.strategy-callout__trust-rings,
	.strategy-callout__data-stream,
	.strategy-callout__hub-node,
	.strategy-callout__hub-core,
	.strategy-callout__hub-ring-line,
	.strategy-callout__stream-dot,
	.strategy-callout__trust-ring {
		animation: none !important;
	}
}

/* Section ambient decor — distinct from ai-wdc animated-section */
.strategy-callout__bg-blobs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

.strategy-callout__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px);
}

.strategy-callout__blob--1 {
	top: -5%;
	left: 22%;
	width: min(480px, 58vw);
	height: min(420px, 50vw);
	background: color-mix(in srgb, var(--sc-brand) 16%, transparent);
	mix-blend-mode: multiply;
	animation: strategy-callout-blob-drift-1 20s ease-in-out infinite;
}

.strategy-callout__blob--2 {
	bottom: -8%;
	right: 20%;
	width: min(460px, 52vw);
	height: min(400px, 48vw);
	background: color-mix(in srgb, var(--sc-brand) 12%, transparent);
	border-radius: 45% 55% 50% 50%;
	mix-blend-mode: multiply;
	animation: strategy-callout-blob-drift-2 24s ease-in-out infinite;
}

.strategy-callout__blob--3 {
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(720px, 85vw);
	height: min(520px, 65vw);
	background: color-mix(in srgb, var(--sc-brand) 8%, transparent);
	filter: blur(140px);
	border-radius: 50% 50% 45% 55%;
	animation: strategy-callout-blob-drift-3 28s ease-in-out infinite;
}

@keyframes strategy-callout-blob-drift-1 {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(18px, 14px); }
}

@keyframes strategy-callout-blob-drift-2 {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-16px, -12px); }
}

@keyframes strategy-callout-blob-drift-3 {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(calc(-50% + 10px), calc(-50% - 8px)) scale(1.03); }
}

html.theme-dark .strategy-callout__blob--1,
html.theme-dark .strategy-callout__blob--2 {
	mix-blend-mode: normal;
	background: color-mix(in srgb, var(--sc-brand) 8%, transparent);
}

html.theme-dark .strategy-callout__blob--3 {
	background: color-mix(in srgb, var(--sc-brand) 5%, transparent);
}

.strategy-callout__decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}

/* AI hub — replaces shield governance hub */
.strategy-callout__governance-hub {
	position: absolute;
	top: 18%;
	right: 8%;
	width: 220px;
	height: 220px;
	animation: strategy-callout-hub-sway 10s ease-in-out infinite;
}

@keyframes strategy-callout-hub-sway {
	0%, 100% { transform: rotate(-2deg); opacity: 0.4; }
	50% { transform: rotate(2deg); opacity: 0.65; }
}

.strategy-callout__hub-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.strategy-callout__hub-ring-line {
	fill: none;
	stroke: color-mix(in srgb, var(--sc-brand) 22%, transparent);
	stroke-width: 1.5;
	stroke-dasharray: 6 10;
	animation: strategy-callout-ring-spin 26s linear infinite;
	transform-origin: center;
}

.strategy-callout__hub-ring-line--inner {
	stroke-dasharray: 4 8;
	animation-direction: reverse;
	animation-duration: 20s;
	opacity: 0.65;
}

@keyframes strategy-callout-ring-spin {
	to { transform: rotate(360deg); }
}

.strategy-callout__hub-core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--sc-brand) 12%, rgba(255, 255, 255, 0.88));
	border: 1px solid color-mix(in srgb, var(--sc-brand) 24%, transparent);
	box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--sc-brand) 45%, transparent);
	animation: strategy-callout-hub-breathe 5s ease-in-out infinite;
}

html.theme-dark .strategy-callout__hub-core {
	background: color-mix(in srgb, var(--sc-brand) 16%, rgba(20, 26, 50, 0.92));
}

@keyframes strategy-callout-hub-breathe {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.04); }
}

.strategy-callout__hub-core svg {
	width: 28px;
	height: 28px;
	color: var(--sc-brand);
}

.strategy-callout__hub-node {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sc-brand);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc-brand) 14%, transparent);
}

.strategy-callout__hub-node--1 { top: 8%; left: 50%; animation: strategy-callout-node-x 3.2s ease-in-out infinite 0s; }
.strategy-callout__hub-node--2 { top: 50%; right: 5%; animation: strategy-callout-node-y 3.2s ease-in-out infinite 0.8s; }
.strategy-callout__hub-node--3 { bottom: 8%; left: 50%; animation: strategy-callout-node-x 3.2s ease-in-out infinite 1.6s; }
.strategy-callout__hub-node--4 { top: 50%; left: 5%; animation: strategy-callout-node-y 3.2s ease-in-out infinite 2.4s; }

@keyframes strategy-callout-node-x {
	0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(0.85); }
	50% { opacity: 0.85; transform: translateX(-50%) scale(1); }
}

@keyframes strategy-callout-node-y {
	0%, 100% { opacity: 0.3; transform: translateY(-50%) scale(0.85); }
	50% { opacity: 0.85; transform: translateY(-50%) scale(1); }
}

/* Bot badge — replaces layers stack */
.strategy-callout__layers-badge {
	position: absolute;
	top: 12%;
	right: 27%;
	width: 68px;
	height: 68px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid color-mix(in srgb, var(--sc-brand) 18%, transparent);
	backdrop-filter: blur(8px);
	animation: strategy-callout-layers-bob 8s ease-in-out infinite;
}

html.theme-dark .strategy-callout__layers-badge {
	background: rgba(20, 26, 50, 0.55);
}

@keyframes strategy-callout-layers-bob {
	0%, 100% { transform: translateY(0); opacity: 0.32; }
	50% { transform: translateY(-10px); opacity: 0.55; }
}

.strategy-callout__layers-badge svg {
	width: 32px;
	height: 32px;
	color: color-mix(in srgb, var(--sc-brand) 65%, transparent);
}

/* Pulse dots — replaces sparkles */
.strategy-callout__pulse-dot {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sc-brand);
	animation: strategy-callout-dot-pulse 3s ease-in-out infinite;
}

@keyframes strategy-callout-dot-pulse {
	0%, 100% { opacity: 0.15; transform: scale(0.65); }
	50% { opacity: 0.7; transform: scale(1); box-shadow: 0 0 0 8px transparent; }
}

/* Circuit board — AI compute motif */
.strategy-callout__federated-graph {
	position: absolute;
	bottom: 11%;
	right: 6%;
	width: 88px;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: strategy-callout-graph-fade 6s ease-in-out infinite;
}

@keyframes strategy-callout-graph-fade {
	0%, 100% { opacity: 0.16; transform: scale(0.95); }
	50% { opacity: 0.38; transform: scale(1); }
}

.strategy-callout__federated-graph svg {
	width: 88px;
	height: 88px;
	color: color-mix(in srgb, var(--sc-brand) 32%, transparent);
}

/* Vertical stream — replaces horizontal wavy data-flow */
.strategy-callout__data-stream {
	position: absolute;
	top: 22%;
	left: 7%;
	width: 120px;
	height: 260px;
	opacity: 0.32;
}

.strategy-callout__stream-line {
	stroke: color-mix(in srgb, var(--sc-brand) 22%, transparent);
	stroke-width: 1.5;
	stroke-dasharray: 4 8;
}

.strategy-callout__stream-dot {
	fill: var(--sc-brand);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: strategy-callout-stream-fall 4.5s ease-in-out infinite;
}

.strategy-callout__stream-dot--2 { animation-delay: 1.5s; }
.strategy-callout__stream-dot--3 { animation-delay: 3s; }

@keyframes strategy-callout-stream-fall {
	0% { opacity: 0; transform: translateY(0); }
	20% { opacity: 0.75; }
	80% { opacity: 0.75; }
	100% { opacity: 0; transform: translateY(210px); }
}

/* Trust rings — replaces floating sphere */
.strategy-callout__trust-rings {
	position: absolute;
	top: 11%;
	left: 6%;
	width: 130px;
	height: 130px;
	pointer-events: none;
	z-index: 2;
}

.strategy-callout__trust-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--sc-brand) 28%, transparent);
	animation: strategy-callout-trust-expand 5s ease-out infinite;
}

.strategy-callout__trust-ring:nth-child(2) { animation-delay: 1.65s; }
.strategy-callout__trust-ring:nth-child(3) { animation-delay: 3.3s; }

@keyframes strategy-callout-trust-expand {
	0% { transform: scale(0.4); opacity: 0.5; }
	100% { transform: scale(1.3); opacity: 0; }
}

@media (max-width: 1023px) {
	.strategy-callout__governance-hub,
	.strategy-callout__layers-badge,
	.strategy-callout__pulse-dot,
	.strategy-callout__federated-graph,
	.strategy-callout__trust-rings,
	.strategy-callout__data-stream {
		display: none;
	}
}