@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800&family=Bebas+Neue&display=swap');

:root {
	--coal: #111318;
	--steel: #1a1f28;
	--smoke: #e7ecf2;
	--white: #ffffff;
	--accent-blue: #1a3a6e;
	--accent-blue-dark: #122b54;
	--accent-blue-light: #2e5fa3;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Barlow', sans-serif;
	color: var(--smoke);
	background:
		radial-gradient(circle at 12% 14%, rgba(26, 58, 110, 0.2), transparent 22%),
		radial-gradient(circle at 86% 22%, rgba(26, 58, 110, 0.15), transparent 26%),
		linear-gradient(150deg, #0f1218 0%, #161d26 45%, #202834 100%);
	min-height: 100vh;
}

main {
	overflow: hidden;
}

.section {
	width: min(1120px, 92vw);
	margin: 0 auto;
	padding: 5rem 0;
}

.eyebrow {
	margin: 0 0 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.82rem;
	color: var(--accent-blue-light);
	font-weight: 700;
}

.section-heading h2 {
	margin: 0;
	font-size: clamp(1.7rem, 2.8vw, 2.6rem);
	line-height: 1.1;
	color: var(--white);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-decoration: none;
	border-radius: 999px;
	padding: 0.88rem 1.5rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn-primary {
	background: linear-gradient(135deg, var(--accent-blue) 0%, #2455a4 100%);
	color: var(--white);
	box-shadow: 0 10px 24px rgba(26, 58, 110, 0.35);
}

.btn-primary:hover {
	background: linear-gradient(135deg, var(--accent-blue-dark) 0%, #1a3a6e 100%);
}

.btn-ghost {
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: var(--white);
	background: rgba(255, 255, 255, 0.04);
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.1);
}

.hero {
	position: relative;
	min-height: 80svh;
	display: grid;
	align-items: center;
	background-image: url('https://media.lscustomzllc.com/assets/engine/IMG_6302.webp');
	background-size: cover;
	background-position: center;
	isolation: isolate;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(110deg, rgba(11, 12, 16, 0.9) 0%, rgba(11, 12, 16, 0.68) 45%, rgba(11, 12, 16, 0.35) 100%),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 10px);
	z-index: -1;
}

.hero-content {
	width: min(1120px, 92vw);
	margin: 0 auto;
	padding: 7.5rem 0;
	max-width: 680px;
}

.hero h1 {
	margin: 0;
	font-family: 'Bebas Neue', sans-serif;
	font-size: clamp(2.8rem, 9vw, 6rem);
	letter-spacing: 0.02em;
	line-height: 0.92;
	color: var(--white);
}

.hero-copy {
	margin: 1rem 0 0;
	max-width: 58ch;
	font-size: clamp(1.05rem, 2.2vw, 1.28rem);
	line-height: 1.5;
	color: rgba(231, 236, 242, 0.9);
}

.hero-actions {
	margin-top: 1.7rem;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.service-grid {
	margin-top: 1.4rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.service-card {
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 1.3rem;
	backdrop-filter: blur(3px);
}

.service-card h3 {
	margin: 0 0 0.5rem;
	color: var(--white);
	font-size: 1.35rem;
}

.service-card p {
	margin: 0;
	color: rgba(231, 236, 242, 0.85);
	line-height: 1.45;
}

.featured-grid {
	margin-top: 1.4rem;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 0.9rem;
}

.featured-grid img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	filter: contrast(1.06) saturate(1.04);
}

.process-steps {
	margin-top: 1.4rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.step {
	padding: 1.2rem;
	border-radius: 14px;
	background: rgba(7, 8, 10, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

.step span {
	display: inline-block;
	color: var(--accent-blue-light);
	font-weight: 800;
	margin-bottom: 0.35rem;
}

.step h3 {
	margin: 0;
	color: var(--white);
}

.step p {
	margin: 0.45rem 0 0;
	line-height: 1.45;
	color: rgba(231, 236, 242, 0.85);
}

.cta {
	text-align: center;
	margin-bottom: 4.2rem;
	padding: 2.4rem 1.2rem;
	border-radius: 22px;
	background:
		radial-gradient(circle at 10% 20%, rgba(26, 58, 110, 0.25), transparent 45%),
		linear-gradient(130deg, rgba(20, 25, 33, 0.95), rgba(26, 34, 45, 0.94));
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.cta h2 {
	margin: 0;
	color: var(--white);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.cta p {
	margin: 0.65rem auto 1.3rem;
	max-width: 58ch;
	color: rgba(231, 236, 242, 0.88);
}

.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 960px) {
	.service-grid,
	.process-steps {
		grid-template-columns: 1fr;
	}

	.featured-grid {
		grid-template-columns: 1fr;
	}

	.featured-grid img {
		height: 220px;
	}

	.section {
		padding: 4.3rem 0;
	}
}

@media (max-width: 640px) {
	.hero {
		min-height: 72svh;
	}

	.hero-content {
		padding: 6rem 0;
	}

	.hero-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}