/* Hero, experience stats and the tagline band. */

.hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"text stats"
		"actions stats";
	align-content: center;
	column-gap: 32px;
	row-gap: 44px;
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--header-height) + 80px) var(--page-gutter) 40px;
	overflow: hidden;
	background: var(--navy-nav);

	/* Hard-edged diagonal split below the nav strip. */
	&::before {
		position: absolute;
		inset: var(--header-height) 0 0;
		background: linear-gradient(100deg, var(--navy) 60%, var(--navy-mid) 60%);
		content: "";
	}

	@media (max-width: 1279.98px) {
		grid-template-columns: 1fr;
		grid-template-areas:
			"text"
			"stats"
			"actions";
		row-gap: 32px;
		padding: calc(var(--header-height) + 40px) 48px 40px;

		&::before {
			background: linear-gradient(93deg, var(--navy) 62%, var(--navy-mid) 62%);
		}
	}

	@media (max-width: 767.98px) {
		padding-inline: 16px;
	}
}

.hero-text,
.hero-stats,
.hero-actions {
	position: relative;
	z-index: 1;
}

.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
	color: var(--gold-mid);
	letter-spacing: 0.08em;

	&::before {
		width: 32px;
		height: 1px;
		background: var(--gold-mid);
		content: "";
	}

	@media (max-width: 1279.98px) {
		margin-bottom: 16px;
	}

	/* Inter renders a hair wider than the mock; 2px less gap keeps one line at 375. */
	@media (max-width: 424.98px) {
		gap: 10px;
	}
}

.hero-headline {
	max-width: 650px;
	margin: 0 0 28px;
	color: var(--white);
	font-size: clamp(2.5rem, 4vw, 3.25rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.12;
	text-wrap: balance;

	em {
		color: var(--gold-light);
	}

	@media (max-width: 1279.98px) {
		margin-bottom: 16px;
	}
}

.hero-sub {
	max-width: 440px;
	color: rgb(255 255 255 / 65%);
	font-size: 18px;
	letter-spacing: 0.02em;
	line-height: 1.6;

	@media (max-width: 767.98px) {
		font-size: 16px;
		letter-spacing: 0.01em;
	}
}

.hero-text {
	grid-area: text;
}

.hero-actions {
	grid-area: actions;

	@media (max-width: 767.98px) {
		.btn-primary {
			width: 100%;
			text-align: center;
		}
	}
}

.hero-stats {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	align-self: center;
	gap: 48px;
	grid-area: stats;

	@media (max-width: 1279.98px) {
		flex-direction: row;
		justify-content: space-between;
		gap: 24px;
	}
}

.stat-card {
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--gold-mid);

	@media (max-width: 767.98px) {
		padding: 0 0 4px 16px;
	}
}

.stat-number {
	color: var(--white);
	font: 700 52px/1.12 var(--display);
	letter-spacing: 0.03em;

	span {
		color: var(--gold-light);
		font-size: 34px;
	}

	@media (max-width: 767.98px) {
		font-size: 40px;

		span {
			font-size: 24px;
		}
	}
}

.stat-label {
	margin-top: 6px;
	color: rgb(255 255 255 / 50%);
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1.5;

	@media (max-width: 767.98px) {
		margin-top: 4px;
		font-size: 12px;
		letter-spacing: 0.01em;
		line-height: 1.4;
	}
}

.hero-scroll {
	position: absolute;
	bottom: 40px;
	left: var(--page-gutter);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgb(255 255 255 / 35%);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	span {
		width: 32px;
		height: 1px;
		background: rgb(255 255 255 / 25%);
	}

	@media (max-width: 1279.98px) {
		display: none;
	}
}

/* Bronze and navy bands between sections; both are hidden on mobile. */
.trusted-band,
.tagline-band {
	position: relative;
	background: var(--navy-nav);

	&::before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--gold), transparent);
		content: "";
	}

	p {
		margin: 0 auto;
		color: var(--white);
		text-align: center;
	}

	@media (max-width: 767.98px) {
		display: none;
	}
}

.trusted-band {
	padding: 20px 80px;
	background: var(--bronze);

	p {
		font-size: 16px;
		line-height: 1.6;
	}

	strong {
		margin-right: 16px;
		font-weight: 700;
		letter-spacing: 0.02em;
	}
}

.tagline-band {
	padding: 48px 80px;

	p {
		max-width: 820px;
		font: italic 700 clamp(1.6rem, 3vw, 2.125rem)/1.4 var(--display);
		letter-spacing: 0.01em;
	}

	strong {
		color: var(--gold-light);
		font-style: normal;
	}
}