/**
 * Homepage-specific styling: hero and final CTA. Everything else on the
 * homepage (offering, why, b2b, brands, faq) is styled generically in
 * components.css since those patterns are meant to be reused on other
 * pages too.
 */

/* Charcoal, not pure black — v1's full-#000 hero was the single biggest
   contributor to the site reading as "gaming" rather than "established
   B2B supplier." Charcoal keeps the bold dark opening statement without
   the site's most important surface being visually identical to a
   dashboard/HUD background. */
.hero {
	background: var(--color-charcoal);
	color: var(--color-white);
	padding-block: var(--space-9);
	position: relative;
	overflow: hidden;
}
/* A single large outline gear, not a literal photo — motion/mechanical
   reference used once, not scattered across the page. Pure CSS, no
   image request. */
.hero::after {
	content: '';
	position: absolute;
	top: 50%; right: -8%;
	width: 620px; height: 620px;
	transform: translateY(-50%);
	border-radius: 50%;
	border: 3px dashed rgba(248, 232, 0, 0.18);
	pointer-events: none;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--space-8);
	align-items: center;
	position: relative;
}

.hero__kicker {
	font-size: var(--fs-kicker);
	font-weight: var(--fw-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-4);
}
.hero__title { color: var(--color-white); margin-bottom: var(--space-5); max-width: 14ch; }
.hero__lede { color: var(--color-gray-300); font-size: var(--fs-body-lg); max-width: 52ch; margin-bottom: var(--space-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__facts { display: flex; flex-direction: column; gap: var(--space-5); }
.hero__facts .fact { border-top-color: var(--color-accent); }
.hero__facts .fact__value { color: var(--color-white); }
.hero__facts .fact__label { color: var(--color-gray-300); }

@media (max-width: 1080px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__title { max-width: none; }
	.hero__facts { flex-direction: row; flex-wrap: wrap; }
	.hero__facts .fact { flex: 1 1 160px; }
}

.final-cta {
	background: var(--color-accent);
}
.final-cta__inner { max-width: 720px; text-align: center; margin-inline: auto; }
.final-cta__title { margin-bottom: var(--space-3); }
.final-cta__inner p { margin-inline: auto; margin-bottom: var(--space-6); }
.final-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
.final-cta .btn--primary { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.final-cta .btn--primary:hover { background: var(--color-white); color: var(--color-ink); }
.final-cta .btn--secondary { color: var(--color-ink); border-color: var(--color-ink); }
.final-cta .btn--secondary:hover { background: var(--color-ink); color: var(--color-white); }