/*
 * Hero landing. Figma 2010:59692 desktop (1440x1024, text block 911 wide centred
 * below the header, buttons 350 wide stacked, mouse 64px 32px from the bottom),
 * 534:6841 mobile (left-aligned, 34px title, mouse 24px from the bottom).
 */

.hero-landing {
	display: flex;
	flex-direction: column;
	/* Client: fill the screen on desktop (no 1024 cap), never below 640. */
	min-height: max(640px, 100svh);
	padding-top: var(--header-h);
	padding-bottom: 128px;               /* keeps the content clear of the mouse */
	color: var(--c-text-white);
	background: var(--c-text-dark);
	overflow: hidden;
	isolation: isolate;
}

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

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

/* Overlay from the mobile frame: 70% → 60% → 30% black. */
.hero-landing__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .3) 100%);
}

.hero-landing__inner {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding-top: 128px;                  /* content centre sits 46px below the frame centre */
}

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

.hero-landing__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

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

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

.hero-landing__mouse {
	position: absolute;
	bottom: 32px;
	left: 50%;
	display: flex;
	justify-content: center;
	width: 64px;
	height: 64px;
	transform: translateX(-50%);
}

@media (max-width: 767px) {
	.hero-landing {
		min-height: max(600px, min(100svh, 794px));
		padding-bottom: 104px;
	}

	.hero-landing__inner { padding-top: 104px; }

	.hero-landing__content {
		align-items: stretch;
		gap: 32px;
		text-align: left;
	}

	.hero-landing__text { gap: 8px; }
	.hero-landing__title { font: 800 34px/43px var(--font); }
	.hero-landing__lead { font: var(--f-body-m); }
	.hero-landing__buttons { max-width: none; }
	.hero-landing__mouse { bottom: 24px; }
}