/* Home hero (spec §4.5–4.7). */
.home-hero {
	position: relative;
	isolation: isolate;
	color: var(--color-white);
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	background-color: var(--color-black); /* live: inline background black over bg-brand-dark */
}
.home-hero__media { position: absolute; inset: 0; overflow: hidden; background-color: var(--color-brand-dark); }
/* Centred 105% cover video: renders 1512×945 at (-36,-22.5) in a 1440×900 viewport [M computed]. */
.home-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 105%;
	min-height: 105%;
	object-fit: cover;
	transition: opacity var(--duration-image) var(--ease-default);
}
.home-hero__shade { position: absolute; inset: 0; background-color: var(--color-dark-30); }
.home-hero__gradient {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 100%;
	background-image: linear-gradient(to right, var(--color-dark-70) 0%, var(--color-dark-40) 50%, transparent 100%);
}
[dir="rtl"] .home-hero__gradient { background-image: linear-gradient(to left, var(--color-dark-70) 0%, var(--color-dark-40) 50%, transparent 100%); }
@media (min-width: 48rem) { .home-hero__gradient { max-width: var(--container-3xl); } }

.home-hero__container { position: relative; z-index: 10; }
/*
 * pt-20 md:pt-28 lg:pt-36 pb-20 [M computed], but never less than the fixed header + 16px (plan fix 2: at 375 the live
 * content is taller than the viewport, flex-centring pins it to pt-20 and the 136px header covers the stripe and H1).
 */
.home-hero__inner {
	--hero-pt: calc(var(--spacing) * 20);
	padding-top: max(var(--hero-pt), calc(var(--header-h) + 1rem));
	padding-bottom: calc(var(--spacing) * 20);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* From 768 the live content is centred with room to spare; only guarantee it clears the header (no extra 16px), so the
   notice-bar diff does not shift by the fix where the live site had no overlap. */
@media (min-width: 48rem) { .home-hero__inner { --hero-pt: calc(var(--spacing) * 28); padding-top: max(var(--hero-pt), var(--header-h)); } }
@media (min-width: 64rem) { .home-hero__inner { --hero-pt: calc(var(--spacing) * 36); } }

.home-hero__head { margin-bottom: calc(var(--spacing) * 6); }
.home-hero__stripe { margin-bottom: calc(var(--spacing) * 4); }
.home-hero__title {
	font-size: var(--text-3xl);
	line-height: var(--leading-display);
	font-weight: var(--font-weight-bold);
	max-width: var(--container-3xl);
}
@media (min-width: 48rem) {
	.home-hero__head { margin-bottom: calc(var(--spacing) * 14); }
	.home-hero__stripe { margin-bottom: calc(var(--spacing) * 6); }
	.home-hero__title { font-size: var(--text-5xl); }
}
@media (min-width: 64rem) { .home-hero__title { font-size: 3.5rem; } }

.home-hero__split { display: flex; flex-direction: column; gap: calc(var(--spacing) * 6); align-items: flex-start; }
.home-hero__text { order: 1; }
.home-hero__stats-col { order: 2; margin-top: calc(var(--spacing) * 6); }
@media (min-width: 64rem) {
	.home-hero__split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--spacing) * 12); }
	.home-hero__text { order: 2; grid-column: span 5 / span 5; }
	.home-hero__stats-col { order: 1; grid-column: span 7 / span 7; margin-top: 0; }
}
.home-hero__lead {
	font-size: var(--text-base);
	line-height: var(--text-base-lh);
	color: var(--color-white-90);
	margin-bottom: calc(var(--spacing) * 6);
	max-width: var(--container-md);
}
@media (min-width: 48rem) {
	.home-hero__lead { font-size: var(--text-xl); line-height: var(--text-xl-lh); margin-bottom: calc(var(--spacing) * 10); }
}
.home-hero__buttons { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); }
@media (min-width: 40rem) { .home-hero__buttons { flex-direction: row; } }

/* Glass stats card (spec §4.6). */
.stats-card {
	border-radius: var(--radius-2xl);
	border: 1px solid var(--color-white-15);
	background-color: var(--color-white-05);
	-webkit-backdrop-filter: blur(var(--blur-sm));
	backdrop-filter: blur(var(--blur-sm));
	padding: calc(var(--spacing) * 5);
	box-shadow: var(--shadow-lg);
}
.stats-card__title {
	margin-bottom: calc(var(--spacing) * 4);
	font-size: var(--text-xs);
	line-height: var(--text-xs-lh);
	text-transform: uppercase;
	letter-spacing: var(--tracking-2);
	color: var(--color-white-60);
}
.stats-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 4); }
/* dt (label) precedes dd (value) in the markup; the value shows on top like the live card. */
.stats-card__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stats-card__value { font-size: var(--text-3xl); line-height: var(--text-3xl-lh); font-weight: var(--font-weight-semibold); color: var(--color-white); }
.stats-card__label { font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--color-white-70); }
@media (min-width: 48rem) {
	.stats-card { border-radius: var(--radius-4xl); padding: calc(var(--spacing) * 8); }
	.stats-card__title { margin-bottom: calc(var(--spacing) * 6); font-size: var(--text-sm); line-height: var(--text-sm-lh); letter-spacing: var(--tracking-3); }
	.stats-card__grid { gap: calc(var(--spacing) * 6); }
	.stats-card__value { font-size: var(--text-4xl); line-height: var(--text-4xl-lh); }
	.stats-card__label { font-size: var(--text-sm); line-height: var(--text-sm-lh); }
}

/* Scroll indicator (spec §4.7). */
.scroll-indicator {
	position: absolute;
	inset-inline: 0;
	bottom: calc(var(--spacing) * 6);
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.scroll-indicator__button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	color: var(--color-white-50);
	pointer-events: auto;
	transition: color var(--duration-fast) var(--ease-default);
}
.scroll-indicator__button:hover { color: var(--color-white-80); }
.scroll-indicator__mouse {
	position: relative;
	display: flex;
	justify-content: center;
	width: calc(var(--spacing) * 5);
	height: calc(var(--spacing) * 8);
	border-radius: var(--radius-full);
	border: 1px solid currentColor;
}
.scroll-indicator__dot {
	position: absolute;
	top: calc(var(--spacing) * 1.5);
	width: calc(var(--spacing) * 0.5);
	height: calc(var(--spacing) * 1.5);
	background-color: currentColor;
	border-radius: var(--radius-full);
	animation: tc-scroll-indicator 1.5s ease-in-out infinite;
}
@keyframes tc-scroll-indicator {
	0% { opacity: 0; transform: translateY(-100%); }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) { .scroll-indicator__dot { animation: none; } }