/* ==========================================================================
   MARS X — custom stylesheet
   Rebuilt from the original Elementor design (portopaolo.netvixo.com)
   ========================================================================== */

/* --------------------------------------------------------------------------
 * Base
 * -------------------------------------------------------------------------- */
:root {
	--accent: #5E6BFF;
	--accent-soft: rgba(94, 107, 255, 0.25);
	--accent-border: #5E6BFFA1;
	--danger: #EB2B2B;
	--night: #020003;
	--space: #0A111A;
	--muted: #AEB9C6;
	--glow: #45D6FF;
}

* {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	scroll-behavior: auto;
}

html.has-smooth-scroll,
html.has-smooth-scroll body {
	/* Lenis owns scrolling — avoid native interference */
	overscroll-behavior: none;
}

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

body {
	margin: 0;
	background: #000;
	color: #334155;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	text-decoration: none;
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	left: -9999rem;
	top: 2.5rem;
	z-index: 999999999;
	text-decoration: underline;
	position: absolute;
}

.skip-link:focus {
	display: block;
	left: 6px;
	top: 7px;
	background: #fff;
	padding: 10px 16px;
	font-size: 14px;
}

/* Animated gradient (shared by header CTA + footer top border) */
@keyframes gradientMove {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 300% 50%;
	}
}

/* Animated shine used by .glow-short / .glow-long headings */
.glow-short,
.glow-long {
	background: linear-gradient(90deg, #FFFFFF, #5E6BFF, #EB2B2B, #FFFFFF, #5E6BFF);
	background-size: 300% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shine 8s linear infinite;
}

@keyframes shine {
	from {
		background-position: 0% center;
	}

	to {
		background-position: 300% center;
	}
}

/* --------------------------------------------------------------------------
 * Header
 * -------------------------------------------------------------------------- */
.site-header {
	background-color: var(--night);
	padding: 20px 10px;
}

/* SpaceX-like transparent nav over cinematic hero.
   Fixed rather than sticky so it takes no space in flow — the hero can then
   start at y=0 without a negative margin. (A negative margin here would be
   cancelled the moment ScrollTrigger pins the hero, which shows up as a ~96px
   jump on the first scroll.) */
.page-home .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 70%, transparent 100%);
	background-color: transparent;
	border-bottom: 0;
	padding: 18px 10px 28px;
}

.header-inner {
	width: 100%;
}

.header-brand {
	width: 30%;
}

.header-menu {
	width: 40%;
	position: relative;
}

.header-cta {
	width: 30%;
}

.header-logo-link {
	display: inline-flex;
	align-items: center;
}

.header-logo-link img {
	display: block;
	width: auto;
	/* Horizontal wordmark — height keeps the mark readable without crowding the nav */
	height: 36px;
	max-width: min(220px, 42vw);
}

.main-nav .nav-link {
	display: inline-block;
	position: relative;
	margin: 0 18px;
	padding: 13px 3px;
	color: #FFFFFF;
	font-family: "IBM Plex Mono", monospace;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1;
	transition: color .3s;
}

/* underline pointer (fade) */
.main-nav .nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 2px;
	background-color: #FFFFFF;
	opacity: 0;
	transition: opacity .3s;
}

.main-nav .nav-link:hover::after,
.main-nav .nav-link.is-active::after {
	opacity: 1;
}

/* Burger toggle */
.menu-toggle {
	display: none;
	margin-left: auto;
	padding: .25em;
	cursor: pointer;
	color: #fff;
	font-size: 30px;
	border: 1px solid transparent;
	border-radius: 3px;
}

.menu-toggle svg {
	width: 1em;
	height: 1em;
	fill: #FFFFFF;
}

.menu-toggle__icon--close {
	display: none;
}

.menu-toggle.is-active .menu-toggle__icon--open {
	display: none;
}

.menu-toggle.is-active .menu-toggle__icon--close {
	display: block;
}

/* Mobile dropdown */
.mobile-nav {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 90;
	background-color: #000000;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .36);
	margin-top: 3px;
}

.mobile-nav.is-open {
	display: block;
}

.mobile-nav-link {
	display: block;
	padding: 13px 20px;
	color: #FFFFFF;
	fill: #FFFFFF;
	font-family: Roboto, sans-serif;
	font-weight: 500;
	transition: background-color .3s, color .3s;
}

.mobile-nav-link:hover,
.mobile-nav-link.is-active {
	background-color: #FFFFFF;
	color: #000000;
}

/* CTA: animated gradient border + gradient text */
.gradient-border-btn {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 16px 34px;
	overflow: hidden;
	z-index: 1;
	cursor: pointer;
}

.gradient-border-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 2px;
	background: linear-gradient(90deg, #7B8CFF, #8B5CF6, #C15CFF, #FF5E87, #7B8CFF);
	background-size: 300% 100%;
	animation: gradientMove 3s linear infinite;
	border-radius: 0;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: -1;
}

.gradient-border-btn__text {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	background: linear-gradient(90deg, #7B8CFF, #8B5CF6, #C15CFF, #FF5E87, #7B8CFF);
	background-size: 300% auto;
	animation: gradientMove 3s linear infinite;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

@media (max-width: 1024px) {
	.header-brand {
		width: 54%;
	}

	.header-menu {
		width: 40%;
		position: static;
	}

	.header-cta {
		display: none;
	}

	.site-header {
		position: relative;
	}

	.header-logo-link img {
		height: 32px;
	}

	.main-nav {
		display: none;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mobile-nav {
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.site-header {
		padding: 15px 8px 15px 10px;
	}

	.header-brand {
		width: 63%;
	}

	.header-menu {
		width: 37%;
		justify-content: flex-end;
	}

	.menu-toggle {
		font-size: 27px;
	}

	.header-logo-link img {
		height: 28px;
	}
}

/* --------------------------------------------------------------------------
 * Shared section helpers
 * -------------------------------------------------------------------------- */
.section-boxed {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.section-label {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 26px;
	letter-spacing: 1.9px;
	color: var(--muted);
}

.section-title {
	font-family: "IBM Plex Mono", monospace;
	font-size: 42px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 50px;
	color: #FFFFFF;
}

@media (max-width: 767px) {
	.section-label {
		font-size: 14px;
		line-height: 22px;
	}

	.section-title {
		font-size: 22px;
		line-height: 30px;
	}
}

/* Bordered icon-list rows ("feature rows") */
.feature-row {
	background-color: var(--space);
	padding: 15px;
	border: 1px solid var(--accent-soft);
	transform: translateY(10px);
	transition: all .4s ease;
}

.feature-row:hover {
	transform: translateY(0);
	border-color: var(--accent);
	box-shadow: 0 0 12px rgba(94, 107, 255, .3);
}

.feature-row li {
	display: flex;
	align-items: center;
}

.feature-row .feature-row__icon {
	display: inline-flex;
	flex-shrink: 0;
	padding-inline-end: 8px;
}

.feature-row .feature-row__icon svg {
	width: 18px;
	height: 18px;
	fill: var(--accent);
	transition: fill .3s;
}

.feature-row .feature-row__text {
	color: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	transition: color .3s;
}

/* Icon boxes (system description / mission applications) */
.icon-box {
	background-color: var(--space);
	padding: 30px 20px;
	border: 1px solid var(--accent-soft);
	transform: translateY(10px);
	transition: all .4s ease;
}

.icon-box:hover {
	transform: translateY(0);
	border-color: var(--accent);
	box-shadow: 0 0 12px rgba(94, 107, 255, .3);
}

.icon-box__wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	gap: 25px;
}

.icon-box__icon svg {
	width: 1em;
	height: 1em;
	font-size: 30px;
	fill: var(--accent);
}

.icon-box__title {
	color: #FFFFFF;
	font-family: "IBM Plex Mono", monospace;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	line-height: 1.3;
}

/* Variant used on the Information page (Mission applications) */
.icon-box--app .icon-box__icon svg {
	font-size: 25px;
}

.icon-box--app .icon-box__title {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* --------------------------------------------------------------------------
 * Buttons (hero)
 * -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 22px;
	color: #FFFFFF;
	border-radius: 0;
	cursor: pointer;
	transition: transform .3s;
}

.btn:hover {
	transform: scale(.95);
}

/* elementor "shrink" animation */

.btn--gradient {
	background-image: linear-gradient(90deg, #5E6BFF 0%, #EB2B2B 120%);
}

.btn--outline {
	background-color: transparent;
	border: 1px solid #FFFFFF;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
	gap: 10px;
}

.btn--outline .btn__icon {
	order: 2;
	display: inline-flex;
}

.btn--outline .btn__icon svg {
	width: 1em;
	height: 1em;
	fill: #FFFFFF;
}

@media (max-width: 767px) {
	.btn {
		font-size: 12px;
		line-height: 20px;
		padding: 10px 20px;
	}

	.btn--outline {
		padding: 10px 22px;
	}
}

/* ==========================================================================
 * Astronomy widgets (cards / space buttons / starfield background)
 * Ported from the "astronomy-progress-elementor" plugin, with the page
 * specific overrides already applied.
 * ========================================================================== */
.ape-astro-progress {
	--ape-glow: #45d6ff;
	--ape-text: #f4f7fa;
	--ape-muted: #8b97a3;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 320px;
	max-width: 100%;
	min-height: 300px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #17212a;
	border-radius: 8px;
	overflow: hidden;
	padding: 18px 18px 17px;
	color: var(--ape-text);
	background-color: #05090d;
	background-image:
		radial-gradient(circle at 82% 8%, rgba(69, 214, 255, 0.1) 0, transparent 34%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 42%);
	box-shadow:
		inset 0 0 28px rgba(0, 0, 0, 0.62),
		0 12px 30px rgba(0, 0, 0, 0.24);
}

.ape-card--starfield::before,
.ape-card--starfield::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.ape-card--starfield::before {
	opacity: 0.5;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .74) 0 1px, transparent 1.5px),
		radial-gradient(circle at 72% 15%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
		radial-gradient(circle at 34% 73%, rgba(255, 255, 255, .42) 0 1px, transparent 1.4px),
		radial-gradient(circle at 88% 67%, rgba(255, 255, 255, .55) 0 1px, transparent 1.5px),
		radial-gradient(circle at 56% 42%, rgba(105, 225, 255, .85) 0 1px, transparent 1.8px);
	background-size: 170px 170px, 220px 220px, 190px 190px, 250px 250px, 280px 280px;
	animation: ape-star-drift 20s linear infinite;
}

.ape-card--starfield::after {
	inset: -45%;
	opacity: .18;
	background: conic-gradient(from 90deg, transparent, rgba(69, 214, 255, .18), transparent 35%);
	animation: ape-nebula-spin 18s linear infinite;
}

.ape-card__content {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.ape-card__header {
	margin-bottom: 16px;
}

.ape-card__title {
	position: relative;
	display: inline-block;
	margin: 0 0 7px;
	color: #eaf6ff;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	animation: ape-title-glow 2.8s ease-in-out infinite;
}

.ape-card__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 32%;
	height: 1px;
	background: linear-gradient(90deg, var(--ape-glow), transparent);
	box-shadow: 0 0 8px var(--ape-glow);
	transform-origin: left center;
	animation: ape-heading-line 3.5s ease-in-out infinite;
}

.ape-card__subtitle {
	color: var(--ape-muted);
	font-size: 9px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ape-card__main {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-width: 0;
}

.ape-health-legend {
	display: grid;
	gap: 7px;
	min-width: 0;
	flex: 1 1 130px;
}

.ape-data-row {
	display: grid;
	grid-template-columns: 8px minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	min-width: 0;
	color: var(--ape-muted);
	font-size: 9px;
	line-height: 1.25;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ape-data-row__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ape-data-row__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ape-dot);
	box-shadow: 0 0 8px var(--ape-dot);
}

.ape-ring {
	position: relative;
	flex: 0 1 auto;
	display: grid;
	place-items: center;
	width: 128px;
	max-width: 46%;
	height: auto !important;
	aspect-ratio: 1;
	filter: drop-shadow(0 0 10px rgba(69, 214, 255, .16));
}

.ape-ring svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transform-box: fill-box;
	overflow: visible;
}

.ape-ring circle {
	fill: none;
	stroke-width: 12;
	vector-effect: non-scaling-stroke;
}

.ape-ring__track {
	stroke: #1a252f;
	opacity: .92;
}

.ape-ring__progress {
	stroke: var(--ape-segment-color, var(--ape-glow));
	stroke-dasharray: var(--ape-progress, 0) var(--ape-progress-gap, 100);
	stroke-linecap: butt !important;
	shape-rendering: geometricPrecision;
	will-change: stroke-dasharray;
}

.ape-ring__center {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	text-align: center;
}

.ape-ring__value {
	font-family: Montserrat, sans-serif;
	font-size: 22px;
	font-weight: 300;
	line-height: 30px;
	letter-spacing: -.03em;
	text-shadow: 0 0 18px rgba(69, 214, 255, .22);
}

.ape-ring__label {
	margin-top: 5px;
	color: var(--ape-muted);
	font-size: 8px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ape-card__footer {
	position: relative;
	z-index: 2;
	margin-top: 16px;
	padding-top: 13px;
	border-top: 1px solid rgba(132, 164, 184, .13);
}

.ape-astronomy-button-wrap {
	display: flex;
	width: 100%;
	justify-content: center;
}

.ape-standalone-button {
	width: 300px;
	max-width: 100%;
	min-height: 48px !important;
	padding: 12px 12px 12px 16px !important;
	border-radius: 5px !important;
}

.ape-button {
	--ape-glow: #45d6ff;
	--ape-button-bg: #071016;
	--ape-button-hover-bg: #10232d;
	--ape-button-border: #1b2b36;
	--ape-button-speed: 7s;
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 44px;
	padding: 10px 11px 10px 13px;
	border: 1px solid var(--ape-button-border);
	border-radius: 4px;
	overflow: hidden;
	color: #dce7ef;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 42%),
		var(--ape-button-bg);
	box-shadow:
		0 5px 0 #01060a,
		0 10px 19px rgba(0, 0, 0, .42),
		inset 0 1px 0 rgba(255, 255, 255, .08),
		inset 0 -12px 22px rgba(0, 0, 0, .3),
		0 0 13px rgba(69, 214, 255, .08);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .13em;
	text-decoration: none;
	text-transform: uppercase;
	transform: translateY(0) perspective(600px) rotateX(0deg);
	transition:
		color .24s ease,
		background .24s ease,
		border-color .24s ease,
		box-shadow .24s ease,
		transform .24s ease;
}

.ape-button:hover,
.ape-button:focus-visible {
	color: #fff;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .075), transparent 42%),
		var(--ape-button-hover-bg);
	border-color: var(--ape-glow);
	box-shadow:
		0 7px 0 #01060a,
		0 15px 28px rgba(0, 0, 0, .48),
		inset 0 1px 0 rgba(255, 255, 255, .12),
		inset 0 -13px 22px rgba(0, 0, 0, .24),
		0 0 22px rgba(69, 214, 255, .22);
	transform: translateY(-2px) perspective(600px) rotateX(2deg);
}

.ape-button:active {
	box-shadow:
		0 2px 0 #01060a,
		0 6px 12px rgba(0, 0, 0, .38),
		inset 0 2px 12px rgba(0, 0, 0, .5),
		0 0 17px rgba(69, 214, 255, .18);
	transform: translateY(3px) perspective(600px) rotateX(-1deg);
}

.ape-button::before,
.ape-button::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.ape-space-button--stars::before {
	inset: 0;
	z-index: 0;
	opacity: .5;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, transparent 1.4px),
		radial-gradient(circle, rgba(120, 224, 255, .75) 0 .7px, transparent 1.2px),
		radial-gradient(circle, rgba(255, 255, 255, .55) 0 .6px, transparent 1px);
	background-size: 43px 29px, 61px 37px, 79px 47px;
	animation: ape-space-stars var(--ape-button-speed) linear infinite;
}

.ape-space-button--comet::after {
	inset: -70% -30%;
	z-index: 0;
	background: linear-gradient(108deg, transparent 39%, rgba(110, 222, 255, .12) 47%, rgba(255, 255, 255, .42) 50%, rgba(110, 222, 255, .1) 53%, transparent 61%);
	transform: translateX(-65%) rotate(3deg);
	animation: ape-space-comet var(--ape-button-speed) ease-in-out infinite;
}

.ape-space-button__label,
.ape-space-button__planet {
	position: relative;
	z-index: 2;
}

.ape-space-button__label {
	text-shadow: 0 0 9px rgba(69, 214, 255, .3);
}

.ape-space-button__stars {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.ape-space-button__stars i {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 3px #fff, 0 0 7px var(--ape-glow);
	animation: ape-space-twinkle 2.5s ease-in-out var(--d) infinite;
}

.ape-space-button__planet {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(92, 221, 255, .62);
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), transparent 24%),
		linear-gradient(145deg, #0c3343, #02090e 70%);
	box-shadow:
		inset -5px -6px 10px rgba(0, 0, 0, .55),
		inset 2px 2px 5px rgba(255, 255, 255, .06),
		0 0 11px rgba(69, 214, 255, .2);
}

.ape-space-button--orbit .ape-space-button__planet::before {
	content: "";
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #e7fbff;
	box-shadow: 0 0 4px #fff, 0 0 9px var(--ape-glow);
	transform: translateX(14px);
	transform-origin: -14px center;
	animation: ape-space-orbit var(--ape-button-speed) linear infinite;
}

.ape-space-button__planet span {
	transition: transform .25s ease;
}

.ape-button:hover .ape-space-button__planet span,
.ape-button:focus-visible .ape-space-button__planet span {
	transform: translateX(2px);
}

@keyframes ape-star-drift {
	to {
		background-position: 170px 120px, -220px 160px, 190px -120px, -250px -170px, 280px 210px;
	}
}

@keyframes ape-nebula-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes ape-heading-line {

	0%,
	100% {
		transform: scaleX(.72);
		opacity: .62;
	}

	50% {
		transform: scaleX(1.25);
		opacity: 1;
	}
}

@keyframes ape-title-glow {

	0%,
	100% {
		text-shadow: 0 0 4px rgba(69, 214, 255, .22), 0 0 10px transparent;
	}

	50% {
		text-shadow: 0 0 6px rgba(255, 255, 255, .58), 0 0 16px var(--ape-glow);
	}
}

@keyframes ape-space-stars {
	to {
		background-position: 86px 24px, -73px 39px, 94px -47px;
	}
}

@keyframes ape-space-comet {

	0%,
	34% {
		transform: translateX(-65%) rotate(3deg);
		opacity: 0;
	}

	45% {
		opacity: .8;
	}

	68%,
	100% {
		transform: translateX(65%) rotate(3deg);
		opacity: 0;
	}
}

@keyframes ape-space-twinkle {

	0%,
	100% {
		opacity: .18;
		transform: scale(.65);
	}

	50% {
		opacity: 1;
		transform: scale(1.35);
	}
}

@keyframes ape-space-orbit {
	to {
		transform: translateX(14px) rotate(360deg);
	}
}

@media (max-width: 1024px) {
	.ape-ring {
		width: 124px;
	}
}

@media (max-width: 767px) {
	.ape-astro-progress {
		width: 100%;
		min-height: 290px;
		padding: 16px 15px 15px;
	}

	.ape-ring {
		width: 112px;
	}

	.ape-standalone-button {
		width: 100% !important;
	}

	.ape-data-row {
		font-size: 8px;
	}

	.ape-health-legend {
		gap: 6px;
	}
}

/* --------------------------------------------------------------------------
 * 3D space background (starfield / nebula / moon)
 * -------------------------------------------------------------------------- */
.space-section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.space-section> :not(.ape-space-background) {
	position: relative;
	z-index: 1;
}

.ape-space-background {
	--ape-space-bg: #0A111A;
	--ape-space-deep: #000000;
	--ape-space-glow: #45D6FF;
	--ape-star-color: #F4FBFF;
	--ape-nebula-color: #264A73;
	--ape-nebula-opacity: .42;
	--ape-moon-color: #DCE7EF;
	--ape-moon-size: 148px;
	--ape-moon-x: 86%;
	--ape-moon-y: 30%;
	--ape-moon-opacity: .15;
	--ape-vignette: .62;
	--ape-space-opacity: 1;
	--ape-moon-shift-x: 0px;
	--ape-moon-shift-y: 0px;
	--ape-nebula-x: 0px;
	--ape-nebula-y: 0px;
	--ape-dust-x: 0px;
	--ape-dust-y: 0px;
	position: absolute;
	inset: 0;
	z-index: 0;
	isolation: isolate;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background:
		radial-gradient(circle at 75% 12%, color-mix(in srgb, var(--ape-space-glow) 10%, transparent), transparent 35%),
		radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--ape-nebula-color) 18%, transparent), transparent 42%),
		linear-gradient(150deg, var(--ape-space-bg), var(--ape-space-deep) 78%);
	opacity: var(--ape-space-opacity);
	perspective: 1000px;
	transform-style: preserve-3d;
	pointer-events: none;
}

.ape-space-background__canvas,
.ape-space-background__nebula,
.ape-space-background__dust,
.ape-space-background__vignette {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ape-space-background__canvas {
	z-index: 2;
	display: block;
}

.ape-space-background__nebula {
	z-index: 1;
	inset: -32%;
	width: 164%;
	height: 164%;
	opacity: var(--ape-nebula-opacity);
	background:
		radial-gradient(ellipse at 32% 43%, color-mix(in srgb, var(--ape-nebula-color) 74%, transparent) 0, transparent 35%),
		radial-gradient(ellipse at 69% 56%, color-mix(in srgb, var(--ape-space-glow) 34%, transparent) 0, transparent 30%),
		conic-gradient(from 30deg at 50% 50%, transparent, color-mix(in srgb, var(--ape-nebula-color) 36%, transparent), transparent 38%, color-mix(in srgb, var(--ape-space-glow) 18%, transparent), transparent 70%);
	filter: blur(34px) saturate(1.15);
	transform: translate3d(var(--ape-nebula-x), var(--ape-nebula-y), -80px) rotate(0deg) scale(1.02);
	animation: ape-space-nebula-orbit 42s linear infinite;
	will-change: transform;
}

.ape-space-background__dust {
	z-index: 3;
	opacity: .22;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .9) 0 1px, transparent 1.5px),
		radial-gradient(circle at 73% 22%, color-mix(in srgb, var(--ape-space-glow) 80%, white) 0 .8px, transparent 1.5px),
		radial-gradient(circle at 43% 72%, rgba(255, 255, 255, .62) 0 .7px, transparent 1.4px),
		radial-gradient(circle at 86% 81%, rgba(255, 255, 255, .55) 0 1px, transparent 1.6px);
	background-size: 190px 170px, 250px 230px, 310px 270px, 370px 330px;
	transform: translate3d(var(--ape-dust-x), var(--ape-dust-y), 30px);
	animation: ape-space-dust-drift 36s linear infinite;
}

.ape-space-background__vignette {
	z-index: 5;
	background:
		radial-gradient(ellipse at center, transparent 32%, color-mix(in srgb, rgba(0, 0, 0, var(--ape-vignette)) 55%, transparent) 74%, rgba(0, 0, 0, var(--ape-vignette)) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .14), transparent 24%, transparent 72%, rgba(0, 0, 0, .28));
}

.ape-space-background__moon {
	position: absolute;
	left: var(--ape-moon-x);
	top: var(--ape-moon-y);
	z-index: 4;
	width: var(--ape-moon-size);
	max-width: none;
	aspect-ratio: 1;
	border-radius: 50%;
	opacity: var(--ape-moon-opacity);
	background:
		radial-gradient(circle at 33% 28%, rgba(255, 255, 255, .9), transparent 9%),
		radial-gradient(circle at 31% 31%, color-mix(in srgb, var(--ape-moon-color) 92%, white), color-mix(in srgb, var(--ape-moon-color) 62%, #8293a0) 47%, #45515b 72%, #111820 100%);
	box-shadow:
		inset -24px -20px 38px rgba(0, 0, 0, .68),
		inset 10px 8px 18px rgba(255, 255, 255, .12),
		0 0 18px color-mix(in srgb, var(--ape-space-glow) 28%, transparent),
		0 0 55px color-mix(in srgb, var(--ape-space-glow) 18%, transparent),
		0 25px 70px rgba(0, 0, 0, .72);
	transform: translate3d(calc(-50% + var(--ape-moon-shift-x)), calc(-50% + var(--ape-moon-shift-y)), 105px) rotateX(4deg) rotateY(-8deg);
	transform-style: preserve-3d;
	will-change: transform;
	animation: ape-space-moon-float 13s ease-in-out infinite;
}

.ape-space-background__moon::before,
.ape-space-background__moon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
}

.ape-space-background__moon::before {
	z-index: 2;
	box-shadow:
		inset 7px 7px 16px rgba(255, 255, 255, .08),
		inset -12px -15px 24px rgba(0, 0, 0, .5);
}

.ape-space-background__moon::after {
	z-index: 3;
}

.ape-moon-phase--full .ape-space-background__moon::after {
	background: radial-gradient(circle at 70% 30%, transparent 35%, rgba(0, 0, 0, .08) 100%);
}

.ape-space-background--no-moon .ape-space-background__moon {
	display: none;
}

.ape-space-background__crater {
	position: absolute;
	z-index: 1;
	border-radius: 50%;
	background: rgba(33, 43, 50, .24);
	box-shadow:
		inset 2px 2px 4px rgba(0, 0, 0, .42),
		1px 1px 2px rgba(255, 255, 255, .08);
}

.ape-space-background__crater--1 {
	left: 24%;
	top: 23%;
	width: 13%;
	height: 13%;
}

.ape-space-background__crater--2 {
	left: 57%;
	top: 18%;
	width: 8%;
	height: 8%;
}

.ape-space-background__crater--3 {
	left: 62%;
	top: 55%;
	width: 17%;
	height: 17%;
}

.ape-space-background__crater--4 {
	left: 31%;
	top: 66%;
	width: 10%;
	height: 10%;
}

.ape-space-background__crater--5 {
	left: 42%;
	top: 44%;
	width: 6%;
	height: 6%;
}

@keyframes ape-space-nebula-orbit {
	to {
		transform: translate3d(var(--ape-nebula-x), var(--ape-nebula-y), -80px) rotate(360deg) scale(1.02);
	}
}

@keyframes ape-space-dust-drift {
	to {
		background-position: 240px 130px, -280px 170px, 330px -210px, -370px -190px;
	}
}

@keyframes ape-space-moon-float {

	0%,
	100% {
		transform: translate3d(calc(-50% + var(--ape-moon-shift-x)), calc(-50% + var(--ape-moon-shift-y)), 105px) rotateX(4deg) rotateY(-8deg) rotateZ(-1deg);
	}

	50% {
		transform: translate3d(calc(-50% + var(--ape-moon-shift-x)), calc(-53% + var(--ape-moon-shift-y)), 118px) rotateX(7deg) rotateY(-4deg) rotateZ(2deg);
	}
}

@media (max-width: 1024px) {
	.ape-space-background {
		--ape-moon-size: 145px;
		--ape-moon-x: 84%;
		--ape-moon-y: 24%;
	}
}

@media (max-width: 767px) {
	.ape-space-background {
		--ape-moon-size: 105px;
		--ape-moon-x: 78%;
		--ape-moon-y: 22%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ape-card--starfield::before,
	.ape-card--starfield::after,
	.ape-card__title,
	.ape-card__title::after,
	.ape-space-button--stars::before,
	.ape-space-button--comet::after,
	.ape-space-button__stars i,
	.ape-space-button--orbit .ape-space-button__planet::before,
	.ape-space-background__nebula,
	.ape-space-background__dust,
	.ape-space-background__moon {
		animation: none !important;
	}

	.ape-button {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * HOME — cinematic aerospace hero
 *
 * The environment is a rendered canvas (assets/js/hero-scene.js). Everything
 * here is either the photographic grade sitting on top of it, the instrument
 * HUD, or the message layer — which is engineered to stay dominant over any
 * frame the scene can produce.
 * -------------------------------------------------------------------------- */
.hero-cinematic {
	position: relative;
	background: #000;
	color: #F0F4FF;
	overflow: hidden;
	/* header is fixed on home — hero starts at y=0, no negative margin needed */
	padding-top: 0;
}

.hero-cinematic__stage {
	position: relative;
	/* Exactly one viewport tall, not a minimum. The stage is the containing
	   block for the HUD, the standby line, the dashboard and the scroll hint,
	   and it also sizes the canvas — so any height beyond the viewport pushed
	   all of that below the fold, where the section's overflow clipped it away
	   with no way to scroll to it. */
	height: 100vh;
	height: 100dvh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	isolation: isolate;
	/* Tighter top band so MARS X → AWAITING INITIATION uses the space
	   instead of leaving a large empty gap (client feedback). */
	padding: clamp(88px, 11vh, 112px) clamp(48px, 7vw, 112px) clamp(120px, 20vh, 260px);
}

/* The shot itself */
.hero-cinematic__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #000;
}

/* ---------------------------------------------------------------
 * Photographic grade — halation, grain, vignette, contrast scrim
 * ------------------------------------------------------------- */
.hero-grade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.hero-grade > * {
	position: absolute;
	inset: 0;
}

/* Bloom bleeding off the bright side of frame — anamorphic warmth.
   Wide and weak: a tighter, stronger version reads as a smudge on the lens
   rather than as light. */
.hero-grade__halation {
	background:
		radial-gradient(ellipse 95% 70% at 96% 4%, rgba(255, 240, 214, 0.07), transparent 74%),
		radial-gradient(ellipse 80% 50% at 72% 95%, rgba(69, 214, 255, 0.07), transparent 72%);
	mix-blend-mode: screen;
}

/* Fine film grain — the cheapest cue that reads "shot", not "rendered".
   `overlay` multiplies its effect on bright areas, so once Earth got properly
   lit the same opacity started showing as a dot pattern across it. soft-light
   at half strength keeps the texture without the halftone. */
.hero-grade__grain {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.028;
	mix-blend-mode: soft-light;
}

.hero-grade__vignette {
	background:
		radial-gradient(ellipse 88% 78% at 58% 46%, transparent 46%, rgba(0, 0, 0, 0.38) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0%, transparent 16%, transparent 68%, rgba(0, 0, 0, 0.46) 100%);
}

/* Guarantees headline contrast no matter how bright the plume gets.
   The message is centred, so this is a soft vertical hold through the middle
   band rather than the left-weighted wash a side-anchored layout wanted. */
.hero-grade__scrim {
	background:
		radial-gradient(ellipse 62% 42% at 50% 44%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.30) 55%, transparent 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.40) 100%);
}

/* ---------------------------------------------------------------
 * Flight control HUD — instrument-grade restraint
 * ------------------------------------------------------------- */
.hero-hud {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	font-family: "IBM Plex Mono", monospace;
	color: rgba(224, 236, 250, 0.62);
}

/* Hairline framing brackets — the "command system" tell */
/* Top inset clears the sticky header, but stays tight under MARS X so the
   phase readout sits in the usable band instead of floating mid-gap. */
.hero-hud__frame {
	position: absolute;
	inset: clamp(78px, 10vh, 96px) clamp(24px, 5vw, 80px) clamp(76px, 9vh, 104px);
	border: 1px solid rgba(140, 190, 235, 0.10);
	border-radius: 1px;
}

.hero-hud__frame::before,
.hero-hud__frame::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border: 1px solid rgba(69, 214, 255, 0.42);
}

.hero-hud__frame::before {
	top: -1px;
	left: -1px;
	border-right: 0;
	border-bottom: 0;
}

.hero-hud__frame::after {
	right: -1px;
	bottom: -1px;
	border-left: 0;
	border-top: 0;
}

.hero-hud__top {
	position: absolute;
	top: clamp(88px, 11vh, 108px);
	left: clamp(38px, 5.9vw, 96px);
	right: clamp(38px, 5.9vw, 96px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hero-hud__id {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(224, 236, 250, 0.5);
}

.hero-hud__live {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #45D6FF;
	box-shadow: 0 0 8px rgba(69, 214, 255, 0.9);
	animation: hudLive 2.4s ease-in-out infinite;
}

@keyframes hudLive {
	0%, 100% { opacity: 0.35; }
	50%      { opacity: 1; }
}

.hero-hud__phase {
	color: rgba(69, 214, 255, 0.92);
	font-weight: 600;
	letter-spacing: 0.24em;
	text-shadow: 0 0 18px rgba(69, 214, 255, 0.35);
}

/* Phase colouring — red only while the mission is actually stressed */
.hero-cinematic[data-phase="MAX-Q"] .hero-hud__phase,
.hero-cinematic[data-phase="STAGE SEP"] .hero-hud__phase {
	color: rgba(255, 168, 96, 0.95);
	text-shadow: 0 0 18px rgba(255, 140, 60, 0.4);
}

.hero-hud__bottom {
	position: absolute;
	bottom: clamp(88px, 10.5vh, 116px);
	left: clamp(38px, 5.9vw, 96px);
	/* Leave the right strip free for the live dependency dashboard so the
	   MET / altitude / velocity / nodes readouts are never buried under it. */
	right: clamp(300px, 24vw, 360px);
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(24px, 4vw, 56px);
	justify-content: flex-end;
}

.hero-hud__readout {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 92px;
}

.hero-hud__key {
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(174, 190, 210, 0.42);
}

.hero-hud__val {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: rgba(232, 242, 255, 0.9);
	font-variant-numeric: tabular-nums;
}

.hero-hud__val b {
	font-weight: 600;
	color: #FFFFFF;
}

.hero-hud__progress {
	position: absolute;
	left: clamp(38px, 5.9vw, 96px);
	right: clamp(38px, 5.9vw, 96px);
	bottom: clamp(76px, 9vh, 104px);
	height: 1px;
	background: rgba(140, 190, 235, 0.14);
	overflow: hidden;
}

.hero-hud__progress span {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, rgba(69, 214, 255, 0.5), rgba(94, 107, 255, 0.9));
	box-shadow: 0 0 12px rgba(69, 214, 255, 0.55);
}

/* ---------------------------------------------------------------
 * Message layer — always the loudest thing in frame
 * ------------------------------------------------------------- */
.hero-copy {
	position: relative;
	z-index: 6;
	text-align: left;
	max-width: min(680px, 50vw);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(6px, 1.2vh, 12px);
	will-change: transform;
	backface-visibility: hidden;
}

/* Official mark lives in the header only — client asked for one MARS X on top. */

/* Category + platform stack — left-aligned with headline, 7px between lines. */
.hero-copy__labels {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	width: 100%;
}

.hero-copy__eyebrow,
.hero-copy__platform {
	margin: 0;
	font-family: Inter, sans-serif;
	letter-spacing: 0.05em;
	line-height: 1.15;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: none;
	background: none;
	-webkit-text-fill-color: #FFFFFF;
	animation: none;
	filter: none;
}

.hero-copy__eyebrow {
	font-size: 13px;
	font-weight: 500;
}

.hero-copy__platform {
	font-size: 16px;
	font-weight: 600;
}

.hero-copy__headline {
	font-family: "Barlow Condensed", "Space Grotesk", sans-serif;
	/* Height-aware sizing so the headline still fits one viewport. */
	font-size: clamp(2.1rem, min(5.4vw, 9.2vh), 4.75rem);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	color: #FFFFFF;
	/* Wide enough to break in three lines. A narrower column stacked it into
	   five, which is what forced the type down to a size where it stopped
	   dominating the frame. */
	max-width: 19ch;
	margin: 0;
	/* Layered shadow keeps every stroke readable over plume highlights */
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.5),
		0 6px 40px rgba(0, 0, 0, 0.75),
		0 0 90px rgba(0, 0, 0, 0.6);
}

/* The site-wide shine gradient cycles through indigo and red. At section-heading
   size that reads as brand motion; at 5rem over a moving sky half the cycle
   lands dimmer than the plain-white line above it, so the statement stops
   reading as one block. The hero headline is therefore solid white — the
   brand shine stays on the supporting line below, where it costs no clarity. */
.hero-copy__headline,
.hero-copy__headline .glow-long {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: #FFFFFF;
	color: #FFFFFF;
	animation: none;
}

.hero-copy__headline .glow-long {
	display: inline;
	font: inherit;
	letter-spacing: inherit;
	text-transform: uppercase;
}

.hero-copy__line .glow-short {
	background: linear-gradient(100deg, #FFFFFF 0%, #7FDCFF 45%, #FFFFFF 100%);
	background-size: 240% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.8));
	animation: shine 11s linear infinite;
}

.hero-copy__line {
	font-family: Montserrat, sans-serif;
	font-size: clamp(0.9rem, min(1.55vw, 2.6vh), 1.25rem);
	font-weight: 400;
	line-height: 1.55;
	color: rgba(240, 244, 255, 0.88);
	max-width: 42ch;
	margin: 0;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.7);
}

.hero-copy__line .glow-short {
	display: inline;
	font: inherit;
	font-weight: 500;
}

.hero-copy__tag {
	margin: clamp(8px, 1.8vh, 20px) 0 2px;
	font-family: "Barlow Condensed", "IBM Plex Mono", sans-serif;
	font-size: clamp(0.78rem, 1.1vw, 0.92rem);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(240, 244, 255, 0.55);
	background: none;
	-webkit-text-fill-color: unset;
	animation: none;
}

.hero-ghost-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 15px 24px;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #F0F4FF;
	background: rgba(4, 8, 16, 0.42);
	border: 1px solid rgba(240, 244, 255, 0.38);
	border-radius: 2px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}

.hero-ghost-btn svg {
	width: 18px;
	height: 18px;
}

.hero-ghost-btn:hover,
.hero-ghost-btn:focus-visible {
	background: rgba(240, 244, 255, 0.12);
	border-color: rgba(240, 244, 255, 0.85);
	transform: translateX(3px);
}

/* ---------------------------------------------------------------
 * Scroll cue
 * ------------------------------------------------------------- */
.hero-scroll-hint {
	position: absolute;
	bottom: clamp(30px, 4.2vh, 44px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(240, 244, 255, 0.5);
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.hero-scroll-hint i {
	display: block;
	width: 1px;
	height: 34px;
	background: linear-gradient(180deg, rgba(240, 244, 255, 0.85), transparent);
	animation: hintPulse 1.8s ease-in-out infinite;
}

@keyframes hintPulse {
	0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
	50%      { opacity: 1;   transform: scaleY(1); }
}

.hero-cinematic.is-static .hero-scroll-hint {
	display: none;
}

/* The scroll-to-top chip is pure UI furniture — it breaks the shot while the
   hero is on screen. hero.js sets this flag until the sequence completes. */
body.is-hero-active .scroll-top-icon {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ---------------------------------------------------------------
 * Ignition footage + tactical filter (Phase 2)
 * ------------------------------------------------------------- */
.hero-ignition {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	/* Keys the flames over the black frame — the clip's own black drops out */
	mix-blend-mode: screen;
}

/* Only revealed once a real asset has actually loaded (set by hero.js) */
.hero-ignition.is-ready {
	opacity: 1;
}

.hero-ignition__video {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(100%, 1400px);
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	filter: contrast(1.2) saturate(1.15) brightness(1.05);
}

/* Subtle tech-blue grade laid over the keyed flames */
.hero-tactical {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: screen;
	background:
		radial-gradient(ellipse 70% 55% at 50% 78%, rgba(69, 214, 255, 0.15), transparent 62%),
		linear-gradient(180deg, rgba(30, 70, 140, 0.10), transparent 45%);
}

/* ---------------------------------------------------------------
 * HUD telemetry grid + fast-scrolling data stream
 * ------------------------------------------------------------- */
.hero-hud__grid {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image:
		linear-gradient(rgba(120, 175, 225, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 175, 225, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 74% 64% at 50% 50%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 74% 64% at 50% 50%, #000 30%, transparent 100%);
}

/* The global-view label follows the phase on the left; MOON FLIGHT CONTROL
   remains anchored on the far right. */
.hero-hud__view {
	margin-right: auto;
	padding-left: 16px;
	margin-left: 16px;
	border-left: 1px solid rgba(140, 190, 235, 0.18);
	font-size: 9px;
	letter-spacing: 0.24em;
	color: rgba(174, 196, 220, 0.45);
	transition: color 0.4s ease, opacity 0.4s ease;
	opacity: 0;
}

.hero-cinematic.is-global-view .hero-hud__view {
	opacity: 1;
	color: rgba(69, 214, 255, 0.72);
}

/* Fast-scrolling data column — deliberately unreadable at a glance */
.hero-hud__stream {
	position: absolute;
	top: clamp(180px, 22vh, 240px);
	right: clamp(38px, 5.9vw, 96px);
	width: 170px;
	max-height: 34%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	font-size: 9px;
	line-height: 1.75;
	letter-spacing: 0.06em;
	text-align: right;
	color: rgba(174, 196, 220, 0.34);
	opacity: 0.7;
	mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}

.hero-hud__stream span {
	white-space: nowrap;
	animation: hudStream 26s linear infinite;
}

/* Dependency topology — Earth / Moon / Mars rendered as real labelled status
   nodes, replacing the old abstract dot constellation. Positions match the
   CLUSTERS reference kept in hero-scene.js. */
.hero-depgraph {
	position: absolute;
	inset: 0;
	z-index: 5;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.hero-cinematic.is-global-view .hero-depgraph {
	opacity: 1;
}

.hero-depgraph__node {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 74px;
	padding: 7px 12px 8px;
	text-align: center;
	border: 1px solid rgba(69, 214, 255, 0.26);
	background: linear-gradient(180deg, rgba(6, 12, 18, 0.68), rgba(3, 6, 10, 0.42));
}

.hero-depgraph__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #45d6ff;
	box-shadow: 0 0 8px rgba(69, 214, 255, 0.85);
	transition: background 0.5s ease, box-shadow 0.5s ease;
}

.hero-depgraph__node.is-hot .hero-depgraph__dot {
	background: #ffb020;
	box-shadow: 0 0 10px rgba(255, 176, 32, 0.9);
	animation: heroDashPulse 1.5s ease-in-out infinite;
}

.hero-depgraph__label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.hero-depgraph__status {
	font-family: "IBM Plex Mono", monospace;
	font-size: 8px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(69, 214, 255, 0.6);
	transition: color 0.5s ease;
}

.hero-depgraph__node.is-hot .hero-depgraph__status {
	color: rgba(255, 176, 82, 0.9);
}

@media (max-width: 900px) {
	.hero-depgraph {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-depgraph__node.is-hot .hero-depgraph__dot {
		animation: none;
	}
}

/* Live dashboard overlay — real ticking telemetry (ring, rolling chart,
   edge/health counters) so Phase 1 reads as an operational system with
   live data simulation, not a decorative constellation.
   Client: keep this live control view central, and never cover MARS X. */
.hero-dashboard {
	position: absolute;
	left: 50%;
	right: auto;
	/* Sit above the bottom MET row, clear of the header logo band. */
	bottom: clamp(128px, 20vh, 180px);
	z-index: 5;
	width: min(280px, calc(100vw - 48px));
	opacity: 0;
	transform: translate(-50%, 14px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	pointer-events: none;
}

.hero-cinematic.is-global-view .hero-dashboard {
	opacity: 1;
	transform: translate(-50%, 0);
}

.hero-dashboard__card {
	border: 1px solid rgba(69, 214, 255, 0.20);
	background: linear-gradient(180deg, rgba(6, 12, 18, 0.82), rgba(3, 6, 10, 0.66));
	padding: 14px 16px 15px;
}

.hero-dashboard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.hero-dashboard__title {
	font-family: "IBM Plex Mono", monospace;
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(69, 214, 255, 0.78);
}

.hero-dashboard__live {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 8px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.hero-dashboard__live i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ffb020;
	box-shadow: 0 0 6px rgba(255, 176, 32, 0.9);
	animation: heroDashPulse 1.7s ease-in-out infinite;
}

.hero-dashboard__main {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.hero-dashboard__ring {
	position: relative;
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
}

.hero-dashboard__ring svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}

.hero-dashboard__ring circle {
	fill: none;
	stroke-width: 7;
	vector-effect: non-scaling-stroke;
}

.hero-dashboard__ring-track {
	stroke: rgba(255, 255, 255, 0.08);
}

.hero-dashboard__ring-fill {
	stroke: #ffb020;
	stroke-dasharray: 0 100;
	stroke-linecap: round;
	transition: stroke-dasharray 0.2s linear;
}

.hero-dashboard__ring-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: "Barlow Condensed", sans-serif;
	color: #fff;
}

.hero-dashboard__ring-center span {
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}

.hero-dashboard__ring-center small {
	margin-top: 4px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 7px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

.hero-dashboard__chart {
	flex: 1 1 auto;
	min-width: 0;
}

.hero-dashboard__chart svg {
	display: block;
	width: 100%;
	height: 40px;
}

.hero-dashboard__chart-line {
	fill: none;
	stroke: #45d6ff;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 3px rgba(69, 214, 255, 0.6));
}

.hero-dashboard__chart-label {
	display: block;
	margin-top: 2px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 7px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.38);
}

.hero-dashboard__stats {
	display: flex;
	gap: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 10px;
}

.hero-dashboard__stat {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hero-dashboard__stat b {
	color: #fff;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.hero-dashboard__stat span {
	font-family: "IBM Plex Mono", monospace;
	font-size: 7px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.48);
}

@keyframes heroDashPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(1.35); }
}

@media (max-width: 900px) {
	.hero-dashboard {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-dashboard__live i {
		animation: none;
	}
}

/* Spikes to an operational amber warning while the risk propagates —
   an ops-console alert reads calmer and more credible than flat alarm red */
.hero-cinematic.is-critical .hero-hud__stream {
	color: rgba(255, 159, 42, 0.62);
	opacity: 1;
}

.hero-cinematic.is-critical .hero-hud__stream span {
	animation-duration: 6s;
}

.hero-cinematic.is-critical .hero-hud__phase {
	color: rgba(255, 176, 82, 0.95);
	text-shadow: 0 0 18px rgba(255, 159, 42, 0.45);
}

@keyframes hudStream {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

/* ---------------------------------------------------------------
 * Standstill status line (Phase 0)
 * ------------------------------------------------------------- */
.hero-standby {
	position: absolute;
	left: 50%;
	bottom: clamp(64px, 8vh, 92px);
	transform: translateX(-50%);
	z-index: 6;
	margin: 0;
	white-space: nowrap;
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(9px, 1vw, 11px);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(69, 214, 255, 0.6);
	pointer-events: none;
	transition: opacity 0.45s ease;
}

/* ---------------------------------------------------------------
 * Phase 1 statement / Phase 3 metrics — both overlay the centred
 * message, so both are absolutely positioned and start hidden.
 * ------------------------------------------------------------- */
.hero-observe,
.hero-metrics {
	position: absolute;
	left: 50%;
	top: 44%;
	transform: translate(-50%, -50%);
	z-index: 7;
	width: min(880px, 90vw);
	text-align: center;
	opacity: 0;
	pointer-events: none;
}

/* Local hold-out. The risk network is drawn additively and runs straight
   through this band, so the statement needs its own backdrop or the lines
   cut across the letterforms. */
.hero-observe::before,
.hero-metrics::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 160%;
	height: 190%;
	z-index: -1;
	background: radial-gradient(ellipse 50% 50% at 50% 50%,
			rgba(0, 0, 0, 0.86) 0%,
			rgba(0, 0, 0, 0.68) 42%,
			rgba(0, 0, 0, 0.28) 68%,
			transparent 100%);
}

.hero-observe__line {
	margin: 0 0 18px;
	font-family: "Barlow Condensed", "Space Grotesk", sans-serif;
	font-size: clamp(1.9rem, 4.4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	color: #FFFFFF;
	text-shadow: 0 2px 34px rgba(0, 0, 0, 0.8);
}

.hero-observe__line span {
	color: #45D6FF;
}

.hero-observe__sub {
	margin: 0 auto;
	max-width: 62ch;
	font-family: Montserrat, sans-serif;
	font-size: clamp(0.9rem, 1.3vw, 1.05rem);
	line-height: 1.6;
	color: rgba(240, 244, 255, 0.78);
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75);
}

.hero-metrics__label {
	margin: 0 0 8px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(69, 214, 255, 0.72);
}

.hero-metrics__action {
	margin: 0 0 26px;
	font-family: "Barlow Condensed", "Space Grotesk", sans-serif;
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: 0.015em;
	color: #FFFFFF;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8);
}

.hero-metrics__impact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px clamp(28px, 6vw, 72px);
	font-family: "IBM Plex Mono", monospace;
	font-size: clamp(0.72rem, 1vw, 0.84rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(174, 196, 220, 0.8);
}

.hero-metrics__impact b {
	display: block;
	margin-bottom: 4px;
	font-family: "Barlow Condensed", sans-serif;
	font-size: clamp(1.9rem, 3.8vw, 2.9rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #45D6FF;
	text-shadow: 0 0 30px rgba(69, 214, 255, 0.35);
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width: 1024px) {

	.hero-hud__frame {
		inset: clamp(64px, 8.5vh, 80px) clamp(20px, 4vw, 44px) clamp(70px, 8vh, 90px);
	}

	.hero-hud__top,
	.hero-hud__progress {
		left: clamp(32px, 4.8vw, 58px);
		right: clamp(32px, 4.8vw, 58px);
	}

	.hero-hud__top {
		top: clamp(72px, 9vh, 88px);
	}

	.hero-hud__bottom {
		left: clamp(32px, 4.8vw, 58px);
		gap: 10px 28px;
	}

	.hero-hud__readout {
		min-width: 78px;
	}

	.hero-hud__stream {
		right: clamp(32px, 4.8vw, 58px);
		width: 140px;
	}
}

@media (max-width: 767px) {

	/* Bottom value scales with viewport height like the desktop rule above —
	   a fixed px here would fall behind the enlarged vehicle on tall phones */
	.hero-cinematic__stage {
		padding: 72px 20px clamp(200px, 32vh, 280px);
	}

	.hero-copy {
		gap: 7px;
		max-width: 100%;
	}

	.hero-copy__labels {
		gap: 7px;
	}

	.hero-copy__eyebrow {
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.05em;
	}

	.hero-copy__platform {
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.05em;
	}

	.hero-copy__headline {
		font-size: clamp(2.0rem, 10vw, 2.85rem);
		max-width: 16ch;
	}

	.hero-copy__line {
		max-width: 34ch;
		font-size: 0.9rem;
		line-height: 1.5;
	}

	.hero-copy__tag {
		margin-top: 6px;
		font-size: 0.72rem;
		letter-spacing: 0.12em;
	}

	/* The stream is texture, not information — it only crowds a phone */
	.hero-hud__stream {
		display: none;
	}

	.hero-hud__view {
		display: none;
	}

	/* Keep the frame, drop the readouts that would crowd the type */
	.hero-hud__frame {
		inset: 58px 14px 64px;
	}

	.hero-hud__top {
		top: 66px;
		left: 24px;
		right: auto;
		width: calc(100vw - 48px);
		display: block;
		font-size: 8px;
		letter-spacing: 0.12em;
	}

	.hero-hud__phase,
	.hero-hud__id {
		position: absolute;
		top: 0;
		white-space: nowrap;
		letter-spacing: 0.12em;
	}

	.hero-hud__phase {
		left: 0;
	}

	.hero-hud__id {
		right: 0;
	}

	.hero-hud__bottom {
		bottom: 74px;
		left: 24px;
		right: 24px;
		gap: 8px 20px;
		justify-content: flex-start;
	}

	.hero-hud__readout:nth-child(n + 3) {
		display: none;
	}

	.hero-hud__val {
		font-size: 11px;
	}

	.hero-hud__progress {
		left: 24px;
		right: 24px;
		bottom: 62px;
	}

	/* No vertical room for it between the vehicle and the readouts, and the
	   HUD already carries AWAITING INITIATION top-right. */
	.hero-standby {
		display: none;
	}

	.hero-observe__line {
		font-size: clamp(1.5rem, 8vw, 2.1rem);
	}

	.hero-observe__sub {
		font-size: 0.85rem;
	}

	.hero-metrics__action {
		font-size: clamp(1.2rem, 6vw, 1.7rem);
	}

	.hero-metrics__impact {
		gap: 12px 26px;
	}

	.hero-metrics__impact b {
		font-size: clamp(1.5rem, 8vw, 2rem);
	}

	.hero-scroll-hint {
		left: 50%;
		transform: translateX(-50%);
		bottom: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-hud__live,
	.hero-scroll-hint i,
	.hero-hud__stream span {
		animation: none;
	}
}

/* Legacy hero-home kept for any residual refs — unused on home */
.hero-home {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 700px;
	padding: 80px 0;
	background-image: url("../images/hero-home.png");
	background-position: center center;
	background-size: cover;
}

.hero-home .hero-title {
	width: 51%;
	max-width: 51%;
	font-family: "IBM Plex Mono", monospace;
	font-size: 58px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 66px;
	color: #E3EAF2;
	margin-bottom: 20px;
}

.hero-home .hero-text {
	width: 39%;
	max-width: 39%;
	font-family: Montserrat, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: #FFFFFF;
	margin-bottom: 20px;
}

.hero-buttons {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

@media (max-width: 1024px) {
	.hero-home {
		padding: 60px 20px;
	}

	.hero-home .hero-title {
		width: 74%;
		max-width: 74%;
		font-size: 52px;
		line-height: 60px;
	}

	.hero-home .hero-text {
		width: 58%;
		max-width: 58%;
		font-size: 18px;
		line-height: 26px;
	}
}

@media (max-width: 767px) {
	.hero-home {
		min-height: 400px;
		background-repeat: no-repeat;
	}

	.hero-home .hero-title {
		width: 96%;
		max-width: 96%;
		font-size: 28px;
		line-height: 36px;
	}

	.hero-home .hero-text {
		width: 88%;
		max-width: 88%;
		font-size: 16px;
		line-height: 24px;
	}
}

/* Minimal contact */
.contact-minimal {
	background: #000;
	border-top: 1px solid rgba(69, 214, 255, 0.12);
	padding: 88px 20px;
}

.contact-minimal__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.contact-minimal__label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(69, 214, 255, 0.75);
	margin-bottom: 12px;
}

.contact-minimal__title {
	font-family: "Space Grotesk", Montserrat, sans-serif;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	color: #F4F7FB;
	margin-bottom: 36px;
}

.contact-minimal__list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	gap: 18px;
}

.contact-minimal__list li {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contact-minimal__role {
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(174, 185, 198, 0.65);
}

.contact-minimal__list a {
	font-family: Montserrat, sans-serif;
	font-size: 1.125rem;
	color: #E3EAF2;
	transition: color 0.2s ease;
}

.contact-minimal__list a:hover,
.contact-minimal__list a:focus-visible {
	color: #45D6FF;
}

.contact-minimal__note {
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: rgba(174, 185, 198, 0.5);
}

/* Mission command section */
.mission-section {
	background-color: var(--space);
	padding: 80px 0;
}

.mission-section .section-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mission-row {
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-top: 20px;
}

/* Globe card */
.globe-card {
	position: relative;
	isolation: isolate;
	width: 30%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	background-color: #000000;
	border: 1px solid var(--accent-border);
	border-radius: 10px;
	padding: 0 15px;
	overflow: hidden;
}

.globe-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../images/network.png");
	background-size: cover;
	background-position: center;
	opacity: 0.16;
	border-radius: inherit;
}

.globe-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.globe-card__meta .meta-left {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 20px;
	color: var(--muted);
}

.globe-card__meta .meta-right {
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 20px;
	color: var(--muted);
	text-align: end;
}

.globe-card__img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	object-position: center;
	border: 1px solid var(--accent);
	border-radius: 300px;
}

/* AI decision panel */
.ai-panel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	border: 1px solid var(--accent-border);
	border-radius: 5px;
	padding: 20px;
}

.ai-panel__label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 22px;
	color: var(--muted);
}

.ai-panel__sub {
	font-family: Montserrat, sans-serif;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 16px;
	color: var(--muted);
}

.ai-panel__action {
	margin-top: 5px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 20px;
	color: var(--muted);
}

.ai-panel__impact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 5px;
}

.ai-panel__stats {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.ai-panel__stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ai-panel__stat-value {
	font-family: Montserrat, sans-serif;
	font-size: 30px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 35px;
	color: var(--muted);
}

.ai-panel__stat-label {
	font-family: Montserrat, sans-serif;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 16px;
	color: var(--muted);
}

@media (max-width: 1024px) {
	.mission-section {
		padding: 60px 20px;
	}

	.mission-row {
		flex-wrap: wrap;
	}

	.globe-card {
		width: 49%;
	}

	.ai-panel {
		width: 49%;
		flex: 0 0 49%;
	}

	.mission-row .ape-astro-progress-wrap {
		width: 48%;
	}
}

@media (max-width: 767px) {
	.globe-card {
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.ai-panel {
		width: 100%;
		flex: 1 1 100%;
	}

	.mission-row .ape-astro-progress-wrap {
		width: 100%;
	}

	.globe-card__meta .meta-left,
	.globe-card__meta .meta-right,
	.ai-panel__label,
	.ai-panel__sub,
	.ai-panel__action,
	.ai-panel__stat-value,
	.ai-panel__stat-label {
		font-size: 14px;
		line-height: 22px;
	}
}

/* Value statement section */
.value-section {
	position: relative;
	isolation: isolate;
	padding: 80px 0;
	background-color: #000000;
}

.value-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../images/globe.jpg");
	background-position: center center;
	background-size: cover;
	opacity: 0.16;
}

@media (min-width: 1025px) {
	.value-section::before {
		background-attachment: fixed;
	}
}

.value-section .section-inner {
	display: flex;
	flex-direction: row;
	gap: 20px 50px;
}

.value-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
}

.value-col>*:not(:last-child) {
	margin-bottom: 20px;
}

.value-images {
	flex: 1 1 0;
	display: flex;
	flex-direction: row;
	gap: 20px;
	padding-right: 20px;
}

.value-images .img-col {
	flex: 1 1 0;
	min-height: 500px;
	display: flex;
	flex-direction: column;
}

.value-images .img-col--top {
	justify-content: flex-start;
}

.value-images .img-col--bottom {
	justify-content: flex-end;
}

.value-images img {
	height: 400px;
	width: 100%;
	object-fit: cover;
	object-position: center;
	border: 2px solid var(--accent);
	border-radius: 5px;
}

@media (max-width: 1024px) {
	.value-section {
		padding: 60px 20px;
	}

	.value-section .section-inner {
		flex-direction: column-reverse;
	}

	.value-images .img-col {
		min-height: 400px;
	}

	.value-images img {
		height: 350px;
	}
}

@media (max-width: 767px) {
	.value-section {
		padding: 50px 10px;
	}

	.value-images {
		padding-right: 0;
	}

	.value-images .img-col--bottom {
		display: none;
	}

	.value-images img {
		height: 300px;
	}
}

/* System description section */
.system-section {
	padding: 80px 0;
}

.system-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 20px;
}

@media (max-width: 1024px) {
	.system-section {
		padding: 60px 20px;
	}

	.system-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.system-section {
		padding: 50px 10px;
	}

	.system-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * INFORMATION — page specific
 * -------------------------------------------------------------------------- */
.hero-info {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 500px;
	padding: 80px 0;
	background-image: url("../images/hero-info.jpg");
	background-position: center center;
	background-size: cover;
}

.hero-info::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: #000000;
	opacity: 0.5;
}

.hero-info .hero-label {
	margin-bottom: 20px;
}

.hero-info .hero-title {
	width: 51%;
	max-width: 51%;
	font-family: "IBM Plex Mono", monospace;
	font-size: 58px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 66px;
	color: #E3EAF2;
	margin-bottom: 20px;
}

.hero-info .hero-text {
	width: 39%;
	max-width: 39%;
	font-family: Montserrat, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	.hero-info {
		padding: 60px 20px;
	}

	.hero-info::before {
		opacity: 0.26;
	}

	.hero-info .hero-title {
		width: 63%;
		max-width: 63%;
		font-size: 52px;
		line-height: 60px;
	}

	.hero-info .hero-text {
		width: 58%;
		max-width: 58%;
		font-size: 18px;
		line-height: 26px;
	}
}

@media (max-width: 767px) {
	.hero-info {
		min-height: 350px;
		background-repeat: no-repeat;
	}

	.hero-info .hero-label {
		width: 64%;
		max-width: 64%;
	}

	.hero-info .hero-title {
		width: 96%;
		max-width: 96%;
		font-size: 28px;
		line-height: 36px;
	}

	.hero-info .hero-text {
		width: 88%;
		max-width: 88%;
		font-size: 16px;
		line-height: 24px;
	}
}

/* Value proposition section */
.prop-section {
	background-color: var(--space);
	padding: 80px 0;
}

.prop-section .section-inner {
	display: flex;
	flex-direction: row;
	gap: 20px 50px;
}

.prop-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
}

.prop-col>*:not(:last-child) {
	margin-bottom: 20px;
}

.prop-text {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #FFFFFF;
}

.prop-text p+p {
	margin-top: 1em;
}

.prop-images {
	flex: 1 1 0;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 20px;
	padding-right: 20px;
}

.prop-images .img-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.prop-images .img-astronaut {
	height: 500px;
	width: 100%;
	object-fit: cover;
	object-position: center;
	border: 2px solid var(--accent);
	border-radius: 10px;
}

/* Mission control dashboard — full-width showcase beneath the text/image
   row so the live network map, gauges, and console read clearly instead of
   being squeezed into a narrow side column. The source artwork is a very
   dark control-room scene, so a brightness/contrast lift on the image
   itself (not the frame) is what actually makes the HUD detail visible. */
.prop-dashboard {
	margin-top: 50px;
}

.prop-dashboard__frame {
	position: relative;
	border: 2px solid var(--accent);
	border-radius: 14px;
	overflow: hidden;
	background: #010203;
	box-shadow: 0 0 0 1px rgba(69, 214, 255, .08), 0 30px 70px -20px rgba(0, 0, 0, .65), 0 0 60px -10px rgba(69, 214, 255, .18);
}

.prop-dashboard__tag {
	position: absolute;
	/* Sit under the central MARS X lockup inside the dashboard artwork
	   (logo band ≈ y 40–240 of 1122 → ~21%). Client asked for LIVE
	   MISSION CONTROL under that central mark — not over it. */
	top: 23%;
	left: 50%;
	right: auto;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #EAF6FF;
	background: rgba(4, 10, 18, .72);
	border: 1px solid rgba(69, 214, 255, .35);
	border-radius: 999px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transform: translateX(-50%);
	white-space: nowrap;
	max-width: calc(100% - 24px);
}

.prop-dashboard__tag i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #45D6FF;
	box-shadow: 0 0 8px 2px rgba(69, 214, 255, .8);
	animation: prop-dashboard-pulse 1.6s ease-in-out infinite;
}

@keyframes prop-dashboard-pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .45;
		transform: scale(.7);
	}
}

.img-dashboard {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1402 / 1122;
	object-fit: cover;
	filter: brightness(2.3) contrast(1.08) saturate(1.05);
}

@media (max-width: 1024px) {
	.prop-section {
		padding: 60px 20px;
	}

	.prop-section .section-inner {
		flex-direction: column-reverse;
	}

	.prop-text {
		font-size: 18px;
		line-height: 26px;
	}

	.prop-dashboard {
		margin-top: 40px;
	}
}

@media (max-width: 767px) {
	.prop-section {
		padding: 50px 10px;
	}

	.prop-text {
		font-size: 16px;
		line-height: 24px;
	}

	.prop-images {
		padding-right: 0;
	}

	.prop-images .img-astronaut {
		height: 320px;
	}

	.prop-dashboard {
		margin-top: 30px;
	}

	.prop-dashboard__frame {
		border-radius: 10px;
	}

	.prop-dashboard__tag {
		/* Keep under the central MARS X on narrow screens; slightly tighter
		   so it clears the logo band after mobile crop/scale. */
		top: 24%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 9px;
		letter-spacing: .06em;
		padding: 5px 10px;
		gap: 6px;
		max-width: calc(100% - 16px);
	}

	.prop-dashboard__tag i {
		width: 6px;
		height: 6px;
	}

	.img-dashboard {
		/* Avoid cover-crop clipping the central logo + tag zone on phones */
		object-fit: contain;
		object-position: center top;
		background: #010203;
	}
}

/* Core capabilities / mission applications */
.capability-section {
	position: relative;
	min-height: 350px;
}

.capability-section .section-content {
	padding: 80px 0;
}

.capability-section .section-inner {
	display: flex;
	flex-direction: row;
	gap: 20px 50px;
}

.capability-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
}

.capability-col>*:not(:last-child) {
	margin-bottom: 20px;
}

.applications-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.applications-col>*:not(:last-child) {
	margin-bottom: 20px;
}

.applications-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 30px;
}

@media (max-width: 1024px) {
	.capability-section .section-content {
		padding: 60px 20px;
	}

	.capability-section .section-inner {
		flex-direction: column-reverse;
	}
}

@media (max-width: 767px) {
	.capability-section .section-content {
		padding: 50px 10px;
	}

	.applications-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
}

/* Contact section */
.contact-section {
	position: relative;
	isolation: isolate;
	background-color: var(--space);
	padding: 80px 0;
}

.contact-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../images/astronaut.jpeg");
	background-position: center center;
	background-size: cover;
	opacity: 0.16;
}

@media (min-width: 1025px) {
	.contact-section::before {
		background-attachment: fixed;
	}
}

.contact-section .section-inner {
	display: flex;
	flex-direction: row;
	gap: 50px;
}

.glass-card {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	background: #5E6BFF26;
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4.1px);
	-webkit-backdrop-filter: blur(4.1px);
	border: 1px solid rgba(255, 255, 255, 0.17);
}

.contact-text {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #FFFFFF;
}

.contact-boxes {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 0 30px;
}

.contact-box {
	width: 75%;
	max-width: 75%;
	padding: 20px;
}

.contact-box__wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	text-align: start;
}

.contact-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-radius: 50%;
	background-color: var(--accent);
}

.contact-box__icon svg {
	width: 1em;
	height: 1em;
	font-size: 20px;
	fill: #FFFFFF;
}

.contact-box__title {
	margin-bottom: 5px;
	color: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	text-transform: capitalize;
	line-height: 14px;
}

.contact-box__desc {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: var(--muted);
}

/* Contact form */
.contact-form .form-fields {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px -25px;
}

.contact-form .field-group {
	width: 100%;
	padding: 0 5px;
	margin-bottom: 25px;
}

.contact-form .field {
	width: 100%;
	background-color: transparent;
	border: 1px solid #69727d;
	border-radius: 0;
	padding: 8px 12px;
	min-height: 40px;
	color: #FFFFFF;
	font-family: "IBM Plex Mono", monospace;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	outline: none;
	transition: border-color .3s;
}

.contact-form .field::placeholder {
	color: rgba(255, 255, 255, .55);
}

.contact-form .field:focus {
	border-color: var(--accent);
}

.contact-form textarea.field {
	resize: vertical;
	min-height: auto;
}

.contact-form .field-group--submit {
	width: 50%;
}

.contact-form .submit-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--accent);
	color: #ffffff;
	border: none;
	border-radius: 0;
	padding: 14px 26px;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: color .3s;
}

.contact-form .submit-btn:hover {
	color: #000000;
}

.form-message {
	width: 100%;
	padding: 0 5px;
	margin-bottom: 25px;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	line-height: 22px;
}

.form-message--success {
	color: #42b883;
}

.form-message--error {
	color: #EB2B2B;
}

@media (max-width: 1024px) {
	.contact-section {
		padding: 60px 20px;
	}

	.contact-text {
		font-size: 18px;
		line-height: 26px;
	}
}

@media (max-width: 767px) {
	.contact-section {
		padding: 50px 10px;
	}

	.contact-section .section-inner {
		flex-direction: column;
	}

	.contact-text {
		font-size: 16px;
		line-height: 24px;
	}

	.contact-boxes {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Footer
 * -------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--night);
}

.footer-main {
	position: relative;
	padding: 30px 10px;
}

/* animated gradient top border */
.footer-main::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, #7B8CFF, #8B5CF6, #C15CFF, #FF5E87, #7B8CFF);
	background-size: 300% 100%;
	animation: gradientMove 7s linear infinite;
}

.footer-inner {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

.footer-brand {
	width: 27%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-logo-link {
	width: auto;
	max-width: 200px;
	display: block;
}

.footer-logo-link img {
	width: 100%;
	height: auto;
}

.footer-tagline {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #FFFFFF;
}

.footer-links {
	width: 55%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.footer-menu,
.footer-legal {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 -11px;
}

.footer-menu li,
.footer-legal li {
	margin: 0 11px;
}

.footer-menu a span,
.footer-menu li span,
.footer-legal li span {
	color: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	transition: color .3s;
}

.footer-social-col {
	width: 26%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 10px;
}

.footer-social {
	display: flex;
	gap: 5px;
	justify-content: center;
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(18px + 1em);
	height: calc(18px + 1em);
	font-size: 18px;
	padding: .5em;
	border-radius: 50%;
	background-color: #4551E0;
	transition: transform .3s;
}

.social-icon:hover {
	animation: social-pulse-shrink 1s infinite;
}

@keyframes social-pulse-shrink {
	to {
		transform: scale(.9);
	}
}

.social-icon svg {
	width: 1em;
	height: 1em;
	fill: #FFFFFF;
}

.footer-copy {
	width: 100%;
	text-align: end;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #FFFFFF;
}

.footer-bottom {
	background-color: #000000;
	padding: 20px 0;
	min-height: 60px;
	display: flex;
	align-items: center;
}

.footer-bottom>div {
	width: 100%;
}

.footer-bottom p {
	width: 100%;
	text-align: center;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	.footer-main {
		padding: 30px 8px;
	}

	.footer-inner {
		flex-wrap: wrap;
	}

	.footer-brand {
		width: 50%;
	}

	.footer-links {
		width: 49%;
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-links .footer-menu {
		margin-bottom: 20px;
	}

	.footer-social-col {
		width: 100%;
		align-items: center;
		padding-top: 20px;
	}

	.footer-copy {
		text-align: center;
	}
}

@media (max-width: 767px) {
	.footer-main {
		padding: 30px 10px;
	}

	.footer-inner {
		gap: 20px;
	}

	.footer-brand {
		width: 100%;
	}

	.footer-links {
		width: 100%;
	}

	.footer-menu a span,
	.footer-legal li span {
		font-size: 15px;
	}

	.footer-social-col {
		align-items: flex-start;
		padding-top: 0;
	}

	.footer-social {
		justify-content: flex-start;
	}

	.footer-copy {
		text-align: start;
		font-size: 15px;
	}

	.footer-bottom p {
		text-align: start;
		font-size: 15px;
		padding: 0 56px 0 10px; /* right clearance for fixed scroll-top on mobile */
	}
}

/* --------------------------------------------------------------------------
 * Scroll to top
 * -------------------------------------------------------------------------- */
.scroll-top-icon {
	display: none;
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 99;
	width: 2.1em;
	height: 2.1em;
	text-align: center;
	cursor: pointer;
	color: #ffffff;
	border-radius: 2px;
	background-color: #046bd2;
	font-size: 15px;
	align-items: center;
	justify-content: center;
}

@media (max-width: 767px) {
	.scroll-top-icon {
		right: 14px;
		bottom: 18px;
		width: 2em;
		height: 2em;
		font-size: 13px;
	}

	.footer-bottom {
		padding-right: 56px; /* keep disclaimer clear of the scroll-top control */
	}
}

.scroll-top-icon.is-visible {
	display: flex;
}

.scroll-top-icon svg {
	width: 1.6em;
	fill: currentColor;
	transform: rotate(180deg);
}

@media (max-width: 921px) {
	.scroll-top-icon svg {
		width: 1em;
	}
}