/* ─── HERO ─── */
#hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: var(--bg-0);
	overflow: hidden;
	padding-top: 68px;
}

/* Scanlines */
#hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.06) 2px,
		rgba(0, 0, 0, 0.06) 3px
	);
	pointer-events: none;
	z-index: 2;
}

/* Forge glow — bottom left */
.hero-glow {
	position: absolute;
	bottom: -20%;
	left: -10%;
	width: 65%;
	height: 80%;
	background: radial-gradient(
		ellipse at 40% 60%,
		rgba(200, 136, 58, 0.11) 0%,
		rgba(200, 136, 58, 0.04) 40%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 1;
	animation: glow-pulse 7s ease-in-out infinite alternate;
}
@keyframes glow-pulse {
	from {
		opacity: 0.7;
		transform: scale(1);
	}
	to {
		opacity: 1;
		transform: scale(1.08);
	}
}

/* Grid bg */
.hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(200, 136, 58, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(200, 136, 58, 0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	z-index: 1;
}

/* Diagonal panel — right */
.hero-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 42%;
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
	background: linear-gradient(
		160deg,
		rgba(200, 136, 58, 0.025) 0%,
		rgba(28, 31, 35, 0.8) 100%
	);
	z-index: 1;
}
.hero-panel::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		var(--amber) 25%,
		var(--amber) 75%,
		transparent 100%
	);
	opacity: 0.35;
	animation: sweep 9s ease-in-out infinite;
}
@keyframes sweep {
	0%,
	100% {
		opacity: 0.2;
	}
	50% {
		opacity: 0.6;
	}
}

/* Animated horizontal scan bar */
.hero-scan {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--amber), transparent);
	opacity: 0.15;
	z-index: 3;
	animation: scan-down 12s linear infinite;
}
@keyframes scan-down {
	from {
		top: 0;
	}
	to {
		top: 100%;
	}
}

.hero-content {
	position: relative;
	z-index: 4;
	padding: 3rem 3.5rem 4rem;
	max-width: 800px;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--amber);
	padding: 0.38rem 1rem;
	border: 1px solid var(--line);
	background: rgba(200, 136, 58, 0.06);
	margin-bottom: 1.8rem;
}
.hero-badge-dot {
	width: 6px;
	height: 6px;
	background: var(--amber);
	border-radius: 50%;
	animation: blink 2.2s ease infinite;
}
@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
}

.hero-h1 {
	font-family: var(--ff-head);
	font-size: clamp(2.2rem, 7vw, 6.8rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
	margin-bottom: 1.6rem;
}

/*.hero-h1 {
	font-family: var(--ff-head);
	font-size: clamp(3.6rem, 7.5vw, 6.8rem);
	line-height: 0.95;
	color: var(--txt);
	margin-bottom: 1.6rem;
}*/

.hero-h1 .hl {
	color: var(--amber);
}

.hero-sub {
	font-size: 0.95rem;
	font-weight: 300;
	color: var(--txt-dim);
	line-height: 1.8;
	max-width: 480px;
	margin-bottom: 2.6rem;
}

.hero-ctas {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 4rem;
}

.hero-stats {
	display: flex;
	gap: 3rem;
	flex-wrap: wrap;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}
.stat-num {
	font-family: var(--ff-head);
	font-size: 2.6rem;
	color: var(--amber);
	line-height: 1;
}
.stat-lbl {
	font-size: 0.65rem;
	font-weight: 400;
	color: var(--txt-dim);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 0.2rem;
}

/* ─── PHOTO PLACEMENTS ─── */
.hero-bg-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.18;
	z-index: 0;
	pointer-events: none;
}