/* ==========================================================
   amp.css — shared "anamorphic" style kit for subpages
   (hero, blue accent font, black/blue cards, parallax hooks)
   Pairs with amp-page.js. Load AFTER styles.css.
   ========================================================== */

/* blue accent words: clean grotesque italic, richer brand blue */
.page .display .it,
.amp-accent {
	font-family: var(--sans);
	font-style: normal;
	font-weight: inherit;
	letter-spacing: inherit;
	color: var(--blue);
}

/* ---------------- HERO ---------------- */
.amp-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 62vh;
	--drift: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--nav-h) + 36px) 24px 56px;
	background: radial-gradient(ellipse 64% 68% at 88% 96%, rgba(43, 76, 246, 0.38), transparent 60%),
		radial-gradient(ellipse 48% 52% at 20% 82%, rgba(43, 76, 246, 0.2), transparent 58%),
		radial-gradient(ellipse 56% 46% at 58% 44%, rgba(22, 51, 111, 0.26), transparent 66%), #070d1e;
}

/* horizon glow that grounds the floor text */
.amp-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46%;
	background: linear-gradient(180deg, transparent, rgba(43, 76, 246, 0.14) 72%, rgba(43, 76, 246, 0.24));
	pointer-events: none;
	z-index: 0;
}

/* perspective grid floor */
/* .amp-floor {
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: -2%;
    height: 58%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    transform: perspective(560px) rotateX(74deg) translateY(var(--drift));
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(rgba(138, 161, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(138, 161, 255, 0.16) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000);
} */

.amp-ghost {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
	pointer-events: none;
	user-select: none;
	background: radial-gradient(
		circle at 50% 52%,
		rgba(110, 134, 255, 0.22),
		rgba(110, 134, 255, 0.08) 32%,
		transparent 56%
	);
}

/* twinkling blue night-sky starfield */
.amp-dots {
	position: absolute;
	inset: -260px;
	will-change: transform;
	z-index: 0;
	pointer-events: none;
	opacity: 0.9;
	background-image: radial-gradient(1.4px 1.4px at 24px 32px, rgba(255, 255, 255, 0.95), transparent),
		radial-gradient(1px 1px at 90px 14px, rgba(170, 194, 255, 0.85), transparent),
		radial-gradient(1.6px 1.6px at 150px 78px, #fff, transparent),
		radial-gradient(1px 1px at 56px 110px, rgba(150, 178, 255, 0.75), transparent),
		radial-gradient(1.2px 1.2px at 190px 130px, rgba(220, 230, 255, 0.9), transparent),
		radial-gradient(1px 1px at 210px 40px, rgba(138, 161, 255, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 130px 160px, #fff, transparent),
		radial-gradient(1px 1px at 14px 170px, rgba(170, 194, 255, 0.7), transparent);
	background-repeat: repeat;
	background-size: 240px 200px;
}

.amp-field {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.amp-field .xm {
	position: absolute;
	color: var(--blue-cyan);
	will-change: transform;
}

/* inner content column — normal flow, centered */
.amp-hero-inner {
	position: relative;
	z-index: 3;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	perspective: 1100px;
	perspective-origin: 50% 70%;
	max-width: 980px;
	margin: 0 auto;
}

.amp-headline {
	margin: 0;
	color: #fff;
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.9;
	font-size: clamp(44px, 7.6vw, 116px);
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
	text-shadow: 0 30px 80px rgba(8, 14, 34, 0.55);
	will-change: transform, opacity;
}

.amp-headline em {
	font-style: normal;
	color: var(--blue);
}

.amp-sub {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 34px;
	will-change: transform, opacity;
}

.amp-sub .lead {
	max-width: 50ch;
	color: rgba(255, 255, 255, 0.9);
}

.amp-sub .row {
	display: flex;
	gap: 12px;
	margin-top: 22px;
	flex-wrap: wrap;
	justify-content: center;
}

.amp-sub .stat-row {
	display: flex;
	gap: 28px;
	margin-top: 22px;
	flex-wrap: wrap;
	justify-content: center;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

/* ---- dark "space" hero variant (add class="amp-space" on <body>) ---- */
.amp-space .amp-hero {
	background: radial-gradient(ellipse 75% 60% at 50% -8%, #1a1b20, transparent 60%),
		radial-gradient(ellipse 80% 70% at 85% 108%, #121317, transparent 66%), #08090c;
}
.amp-space .amp-hero::before {
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.035));
}
.amp-space .amp-floor {
	display: none;
}
.amp-space .amp-ghost {
	background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.06), transparent 52%);
}
.amp-space .amp-field .xm {
	background: #fff !important;
	box-shadow: 0 0 7px rgba(255, 255, 255, 0.75) !important;
}

.amp-hero-inner {
	position: relative;
	z-index: 3;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	perspective: 1100px;
	perspective-origin: 50% 70%;
	max-width: 1040px;
	margin: 0 auto;
}
.amp-headline {
	margin: 0;
	color: #fff;
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.9;
	font-size: clamp(46px, 8vw, 124px);
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
	text-shadow: 0 30px 80px rgba(8, 14, 34, 0.55);
	will-change: transform, opacity;
}
.amp-headline em {
	font-style: normal;
	color: var(--blue);
}
.amp-headline .it {
	color: var(--blue);
}

.amp-sub {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 32px;
	will-change: transform, opacity;
}
.amp-sub .lead {
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.9);
}
.amp-sub .row {
	display: flex;
	gap: 12px;
	margin-top: 28px;
	flex-wrap: wrap;
	justify-content: center;
}
.amp-sub .stat-row {
	display: flex;
	gap: 28px;
	margin-top: 30px;
	flex-wrap: wrap;
	justify-content: center;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.amp-eyebrows {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--nav-h) + 18px);
	z-index: 4;
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 0 var(--gutter);
	pointer-events: none;
}
.amp-cue {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 4;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	pointer-events: none;
}
.amp-cue .bar {
	width: 1px;
	height: 42px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
}
@keyframes ampcue {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.4;
	}
	50% {
		transform: translateY(8px);
		opacity: 1;
	}
}
.amp-cue .bar {
	animation: ampcue 1.8s ease-in-out infinite;
	transform-origin: top;
}

/* JS rAF entrance — base state visible so content is never stuck hidden */
.amp-prep #amp-headline,
.amp-prep #amp-sub {
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.amp-prep #amp-headline,
	.amp-prep #amp-sub {
		opacity: 1 !important;
	}
}

[data-amp] {
	will-change: transform;
}

/* ---------------- BLACK / BLUE CARDS ---------------- */
.amp-cards {
	display: grid;
	gap: 14px;
}
.amp-card {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: #0e1118;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 20px;
	padding: 28px;
	transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.amp-card.blue {
	background: linear-gradient(155deg, #16307a 0%, #0c1430 72%);
	border-color: rgba(110, 134, 255, 0.4);
}
.amp-card:hover {
	box-shadow: 0 22px 50px rgba(8, 14, 34, 0.45);
}
.amp-card:hover {
	border-color: rgba(110, 134, 255, 0.5);
}
.amp-card .ac-num {
	font-family: var(--sans);
	font-size: clamp(30px, 3vw, 48px);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.4);
}
.amp-card.blue .ac-num {
	color: var(--blue-cyan);
}
.amp-card .ac-frac {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
	white-space: nowrap;
}
.amp-card h3 {
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: #fff;
	margin: 0;
}
.amp-card p {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.68);
	margin: 0;
}
.amp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.amp-tags span {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 4px 10px;
	white-space: nowrap;
}
.amp-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--blue-cyan);
}
.amp-go svg {
	display: block;
}

/* deep page background option */
.amp-deep {
	background: #070d1e;
	color: #fff;
}
@media (max-width: 560px) {
	/* hide scroll cue on mobile */
	.amp-cue {
		display: none !important;
	}
	.amp-field {
		display: none !important;
	}
}