.hero {
	width: 100%;
	padding: 44px 0;
	background-image: url('../../../../uploads/2026/06/australian-sunset.webp');
	background-size: cover;
	background-position: center 30%;
	position: relative;
	border-bottom: 1px solid var(--stubborn-line-soft);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(226, 218, 197, 0.12), rgba(226, 218, 197, 0.52)),
		linear-gradient(90deg, rgba(226, 218, 197, 0.42), rgba(226, 218, 197, 0.12) 48%, rgba(226, 218, 197, 0.38));
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--stubborn-max-width);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--stubborn-gutter);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.hero__title {
	font-family: 'Press Start 2P', 'PressStart2P', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp(0.85rem, 2.4vw, 1.4rem);
	line-height: 1.6;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	max-width: 680px;
	font-weight: 400;
}

.hero__tagline {
	font-family: var(--stubborn-font-body);
	font-size: clamp(0.98rem, 1.35vw, 1.12rem);
	font-weight: 600;
	line-height: 1.55;
	max-width: 600px;
	color: var(--stubborn-text);
	opacity: 0.82;
}

.hero__trust-image {
	display: block;
	width: min(250px, 72vw);
	height: auto;
	object-fit: contain;
	image-rendering: auto;
	margin: 2px 0 -2px;
	opacity: 0.94;
	filter: drop-shadow(1px 1px 0 rgba(26, 26, 26, 0.18));
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--stubborn-touch-target);
	padding: 12px 28px;
	background: var(--stubborn-btn-bg);
	color: var(--stubborn-btn-color);
	font-family: var(--stubborn-font);
	font-size: clamp(0.65rem, 1.2vw, 0.8rem);
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 2px solid var(--stubborn-border);
	transition: transform var(--stubborn-transition), box-shadow var(--stubborn-transition), opacity var(--stubborn-transition);
	text-decoration: none;
}

.hero__cta:hover {
	opacity: 1;
	transform: translate(-2px, -2px);
	box-shadow: var(--stubborn-pixel-shadow);
	color: var(--stubborn-btn-color);
}

.hero__cta:active {
	transform: scale(0.96);
	box-shadow: none;
}

@media (min-width: 769px) {
	.hero {
		padding: 76px 0 62px;
	}

	.hero__inner {
		gap: 22px;
	}
}

@media (min-width: 1025px) {
	.hero {
		padding: 88px 0 72px;
	}

	.hero__inner {
		padding: 0 var(--stubborn-gutter-desktop);
	}
}