/*
 * Hero page. Figma desktop/hero/landing: Property 1=button 1725:34375 (content 911
 * wide centred under the header, buttons 350 wide), Property 1=default 1896:34769
 * (text centred, stat row 32px from the bottom, 64px apart). 1440x670, overlay
 * rgba(9,3,19,.6). Mobile 964:11697 / 2204:45889: 515 high, left-aligned text,
 * header/L title, body/M text, stats 30px icons + header/M figures, all three
 * in one row (2204:45888, 1902:41759).
 */

.hero-page {
	min-height: 670px;
	color: var(--c-text-white);
	background: var(--c-text-dark);
	overflow: hidden;
	isolation: isolate;
}

.hero-page__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero-page__media img { position: absolute; inset: 0; }

.hero-page__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(9, 3, 19, .6);
}

.hero-page__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	min-height: inherit;
	padding-top: calc(var(--header-h) + 32px);
	padding-bottom: 32px;
}

.hero-page__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 911px;
	margin-block: auto;
	text-align: center;
}

.hero-page__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hero-page__title { font: var(--f-header-2xl); text-wrap: wrap; }
.hero-page__lead { font: var(--f-body-s); }

.hero-page__buttons {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 350px;
}

/* Stats row (highlights inside the hero) */
.hero-page__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 64px;
}

.hero-page__stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hero-page__stat-top {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hero-page__stat-icon { --icon-size: 40px; color: var(--c-secondary); }
.hero-page__figure { font: var(--f-header-xl); white-space: nowrap; }
.hero-page__stat-label { font: var(--f-subtitle-l); white-space: nowrap; }

@media (max-width: 767px) {
	.hero-page { min-height: 515px; }

	.hero-page__inner {
		align-items: stretch;
		padding-top: calc(var(--header-h) + 44px);
	}

	.hero-page--stats .hero-page__inner { padding-top: calc(var(--header-h) + 24px); }

	.hero-page__content {
		align-items: stretch;
		max-width: none;
		text-align: left;
	}

	.hero-page--buttons .hero-page__content { margin-top: 0; }

	.hero-page__title { font: var(--f-header-l); }
	.hero-page__lead { font: var(--f-body-m); }
	.hero-page__buttons { max-width: none; }

	/* highlights 1896:34701: one row of three, 24 apart, centred (344 of 350).
	   The gap gives way before anything wraps on narrow phones. */
	.hero-page__stats {
		flex-wrap: nowrap;
		gap: min(24px, 3vw);
	}

	.hero-page__stat { gap: 4px; min-width: 0; }
	.hero-page__stat-icon { --icon-size: 30px; }
	.hero-page__figure { font: var(--f-header-m); }
	.hero-page__stat-label { font: var(--f-subtitle-s); }
}