/* ===== CSS VARIABLES ===== */
:root {
	/* Colors - Palette électricien/artisanat */
	--primary: #1e40af; /* Bleu électrique profond */
	--primary-light: #3b82f6; /* Bleu électrique */
	--primary-dark: #1e3a8a; /* Bleu marine */
	--secondary: #f59e0b; /* Orange ambre */
	--secondary-light: #fcd34d; /* Jaune doré */
	--accent: #dc2626; /* Rouge sécurité */
	--success: #059669; /* Vert validation */

	/* Neutrals */
	--white: #ffffff;
	--gray-50: #f8fafc;
	--gray-100: #f1f5f9;
	--gray-200: #e2e8f0;
	--gray-300: #cbd5e1;
	--gray-400: #94a3b8;
	--gray-500: #64748b;
	--gray-600: #475569;
	--gray-700: #334155;
	--gray-800: #1e293b;
	--gray-900: #0f172a;

	/* Typography */
	--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		sans-serif;
	--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

	/* Font Sizes */
	--text-xs: 0.75rem; /* 12px */
	--text-sm: 0.875rem; /* 14px */
	--text-base: 1rem; /* 16px */
	--text-lg: 1.125rem; /* 18px */
	--text-xl: 1.25rem; /* 20px */
	--text-2xl: 1.5rem; /* 24px */
	--text-3xl: 1.875rem; /* 30px */
	--text-4xl: 2.25rem; /* 36px */
	--text-5xl: 3rem; /* 48px */
	--text-6xl: 3.75rem; /* 60px */

	/* Spacing */
	--space-1: 0.25rem; /* 4px */
	--space-2: 0.5rem; /* 8px */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem; /* 16px */
	--space-5: 1.25rem; /* 20px */
	--space-6: 1.5rem; /* 24px */
	--space-8: 2rem; /* 32px */
	--space-10: 2.5rem; /* 40px */
	--space-12: 3rem; /* 48px */
	--space-16: 4rem; /* 64px */
	--space-20: 5rem; /* 80px */
	--space-24: 6rem; /* 96px */
	--space-32: 8rem; /* 128px */

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* Border Radius */
	--radius-sm: 0.375rem; /* 6px */
	--radius-md: 0.5rem; /* 8px */
	--radius-lg: 0.75rem; /* 12px */
	--radius-xl: 1rem; /* 16px */
	--radius-2xl: 1.5rem; /* 24px */
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast: 150ms ease-out;
	--transition-base: 300ms ease-out;
	--transition-slow: 500ms ease-out;

	/* Layout */
	--container-max-width: 1200px;
	--header-height: 80px;
}

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: var(--font-primary);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--gray-800);
	background-color: var(--white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	border: none;
	background: none;
	cursor: pointer;
}

/* ===== UTILITIES ===== */
.container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--space-4);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -40px;
	left: var(--space-2);
	background: var(--primary);
	color: var(--white);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	font-weight: 600;
	z-index: 9999;
	transition: top var(--transition-fast);
}

.skip-link:focus {
	top: var(--space-2);
}

/* Fade-in animation */
.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ===== COMPONENTS ===== */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-base);
	font-weight: 600;
	border-radius: var(--radius-lg);
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--transition-fast);
	min-height: 48px;
	white-space: nowrap;
}

.btn--primary {
	background: linear-gradient(135deg, var(--primary), var(--primary-light));
	color: var(--white);
	box-shadow: var(--shadow-md);
}

.btn--primary:hover {
	background: linear-gradient(135deg, var(--primary-dark), var(--primary));
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn--outline {
	background: var(--white);
	color: var(--primary);
	border-color: var(--primary);
}

.btn--outline:hover {
	background: var(--primary);
	color: var(--white);
}

.btn--large {
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-lg);
	min-height: 56px;
}

.btn--full {
	width: 100%;
}

/* Section Headers */
.section__header {
	text-align: center;
	margin-bottom: var(--space-16);
}

.section__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: linear-gradient(135deg, var(--primary), var(--primary-light));
	color: var(--white);
	font-size: var(--text-sm);
	font-weight: 600;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
}

.section__title {
	font-size: var(--text-4xl);
	font-weight: 800;
	color: var(--gray-900);
	margin-bottom: var(--space-4);
	line-height: 1.2;
}

.section__description {
	font-size: var(--text-lg);
	color: var(--gray-600);
	max-width: 600px;
	margin: 0 auto;
}

/* ===== HEADER ===== */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--gray-200);
	z-index: 1000;
	transition: all var(--transition-base);
}

.header.scrolled {
	background: rgba(255, 255, 255, 0.98);
	box-shadow: var(--shadow-lg);
}

.nav {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav__brand {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-xl);
	font-weight: 800;
	color: var(--primary);
}

.nav__logo {
	flex-shrink: 0;
}

.nav__menu {
	display: flex;
}

.nav__list {
	display: flex;
	list-style: none;
	gap: var(--space-8);
}

.nav__link {
	font-weight: 500;
	color: var(--gray-700);
	transition: color var(--transition-fast);
	position: relative;
}

.nav__link:hover {
	color: var(--primary);
}

.nav__link::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary);
	transition: width var(--transition-fast);
}

.nav__link:hover::after {
	width: 100%;
}

.nav__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.nav__phone {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--primary);
	font-weight: 600;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-lg);
	transition: all var(--transition-fast);
}

.nav__phone:hover {
	background: var(--gray-100);
}

.nav__toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	width: 24px;
	height: 24px;
}

.nav__toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--gray-700);
	border-radius: 1px;
	transition: all var(--transition-fast);
}

/* ===== HERO SECTION ===== */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
	overflow: hidden;
}

.hero__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero__particles {
	position: absolute;
	inset: 0;
	background: radial-gradient(2px 2px at 20px 30px, var(--primary), transparent),
		radial-gradient(2px 2px at 40px 70px, var(--secondary), transparent),
		radial-gradient(1px 1px at 90px 40px, var(--primary-light), transparent),
		radial-gradient(1px 1px at 130px 80px, var(--secondary-light), transparent);
	background-size: 200px 200px;
	animation: particles 20s linear infinite;
	opacity: 0.3;
}

@keyframes particles {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(-200px, -200px);
	}
}

.hero__circuit {
	position: absolute;
	inset: 0;
	opacity: 0.1;
}

.circuit-svg {
	width: 100%;
	height: 100%;
}

.circuit-path {
	stroke-dasharray: 10, 5;
	animation: circuit-flow 3s ease-in-out infinite;
}

.circuit-node {
	animation: pulse 2s ease-in-out infinite;
}

@keyframes circuit-flow {
	0%,
	100% {
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dashoffset: 15;
	}
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}

.hero__container {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
	min-height: calc(100vh - var(--header-height));
	padding-top: var(--header-height);
}

.hero__content {
	max-width: 600px;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--secondary);
	color: var(--white);
	font-size: var(--text-sm);
	font-weight: 600;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-6);
	animation: badge-glow 2s ease-in-out infinite;
}

@keyframes badge-glow {
	0%,
	100% {
		box-shadow: 0 0 0 rgba(245, 158, 11, 0.4);
	}
	50% {
		box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
	}
}

.hero__title {
	font-size: var(--text-5xl);
	font-weight: 800;
	color: var(--gray-900);
	line-height: 1.1;
	margin-bottom: var(--space-6);
}

.hero__title--highlight {
	color: var(--primary);
	font-weight: 800;
	position: relative;
}

/* Dégradé uniquement sur desktop et mode clair */
@media (min-width: 769px) and (prefers-color-scheme: light) {
	.hero__title--highlight {
		background: linear-gradient(135deg, var(--primary), var(--secondary));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
}

/* Couleur unie sur mobile pour homogénéité */
@media (max-width: 768px) {
	.hero__title--highlight {
		color: var(--primary);
		background: none;
		-webkit-text-fill-color: var(--primary);
		font-weight: 800;
	}
}

/* Mode sombre : couleur unie plus claire */
@media (prefers-color-scheme: dark) {
	.hero__title--highlight {
		color: #60a5fa;
		background: none;
		-webkit-text-fill-color: #60a5fa;
		font-weight: 800;
	}
}

.hero__description {
	font-size: var(--text-lg);
	color: var(--gray-600);
	margin-bottom: var(--space-8);
	line-height: 1.7;
}

.hero__features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-10);
}

.hero__feature {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--gray-700);
}

.hero__feature svg {
	color: var(--primary);
	flex-shrink: 0;
}

.hero__cta {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.hero__image {
	position: relative;
	max-width: 500px;
	margin-left: auto;
}

.hero__image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-2xl);
}

/* ===== SERVICES SECTION ===== */
.services {
	padding: var(--space-24) 0;
	background: var(--white);
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: var(--space-8);
}

.service-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-2xl);
	padding: var(--space-8);
	transition: all var(--transition-base);
	position: relative;
	overflow: hidden;
}

.service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	transform: scaleX(0);
	transition: transform var(--transition-base);
}

.service-card:hover::before {
	transform: scaleX(1);
}

.service-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
	border-color: var(--primary);
}

.service-card--featured {
	background: linear-gradient(
		135deg,
		var(--primary) 0%,
		var(--primary-light) 100%
	);
	color: var(--white);
	border: none;
}

.service-card--featured .service-card__icon {
	background: rgba(255, 255, 255, 0.2);
	color: var(--white);
}

.service-card--featured .service-card__price {
	color: var(--secondary-light);
}

.service-card__icon {
	width: 60px;
	height: 60px;
	background: var(--gray-100);
	color: var(--primary);
	border-radius: var(--radius-xl);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-4);
	transition: all var(--transition-base);
}

.service-card:hover .service-card__icon {
	transform: scale(1.1);
}

.service-card__badge {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background: var(--secondary);
	color: var(--white);
	font-size: var(--text-xs);
	font-weight: 700;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.service-card__title {
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: var(--space-3);
	color: inherit;
}

.service-card__description {
	color: inherit;
	opacity: 0.8;
	margin-bottom: var(--space-4);
	line-height: 1.6;
}

.service-card__price {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--primary);
	margin-bottom: var(--space-4);
}

.service-card__features {
	list-style: none;
}

.service-card__features li {
	padding: var(--space-1) 0;
	font-size: var(--text-sm);
	color: inherit;
	opacity: 0.8;
	position: relative;
	padding-left: var(--space-4);
}

.service-card__features li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--secondary);
	font-weight: bold;
}

/* ===== ABOUT SECTION ===== */
.about {
	padding: var(--space-24) 0;
	background: var(--gray-50);
}

.about__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
}

.about__text {
	max-width: 600px;
}

.about__description {
	font-size: var(--text-lg);
	color: var(--gray-600);
	margin-bottom: var(--space-8);
	line-height: 1.7;
}

.about__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	margin-bottom: var(--space-8);
}

.stat {
	text-align: center;
	padding: var(--space-4);
	background: var(--white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}

.stat__number {
	display: block;
	font-size: var(--text-4xl);
	font-weight: 800;
	color: var(--primary);
	margin-bottom: var(--space-2);
}

.stat__label {
	font-size: var(--text-sm);
	color: var(--gray-600);
	font-weight: 500;
}

.about__certifications {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.certification {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--gray-700);
	transition: all var(--transition-fast);
}

.certification:hover {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--white);
}

.certification svg {
	color: var(--primary);
	transition: color var(--transition-fast);
}

.certification:hover svg {
	color: var(--white);
}

.about__image {
	position: relative;
	max-width: 500px;
	margin-left: auto;
}

.about__image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-2xl);
	box-shadow: var(--shadow-xl);
}

.about__image-decoration {
	position: absolute;
	top: -20px;
	right: -20px;
	width: 100px;
	height: 100px;
	background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
	border-radius: var(--radius-full);
	opacity: 0.8;
	z-index: -1;
}

/* ===== ZONE SECTION ===== */
.zone {
	padding: var(--space-24) 0;
	background: var(--white);
}

.zone__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: start;
}

.zone__description {
	font-size: var(--text-lg);
	color: var(--gray-600);
	margin-bottom: var(--space-8);
}

.zone__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

.zone__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	background: var(--gray-50);
	border-radius: var(--radius-lg);
	font-weight: 500;
	color: var(--gray-700);
	transition: all var(--transition-fast);
}

.zone__item:hover {
	background: var(--primary);
	color: var(--white);
}

.zone__item svg {
	color: var(--primary);
	flex-shrink: 0;
	transition: color var(--transition-fast);
}

.zone__item:hover svg {
	color: var(--white);
}

.zone__map {
	position: relative;
	height: 400px;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: var(--shadow-xl);
}

.map {
	width: 100%;
	height: 100%;
}

/* ===== TESTIMONIALS SECTION ===== */
.testimonials {
	padding: var(--space-24) 0;
	background: var(--gray-50);
}

.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: var(--space-8);
}

.testimonial {
	background: var(--white);
	border-radius: var(--radius-2xl);
	padding: var(--space-8);
	box-shadow: var(--shadow-md);
	transition: all var(--transition-base);
	border: 1px solid var(--gray-200);
}

.testimonial:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-xl);
}

.testimonial__content {
	margin-bottom: var(--space-6);
}

.testimonial__stars {
	display: flex;
	gap: var(--space-1);
	margin-bottom: var(--space-4);
	color: var(--secondary);
}

.testimonial__text {
	font-size: var(--text-base);
	color: var(--gray-700);
	line-height: 1.6;
	font-style: italic;
}

.testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.testimonial__avatar {
	width: 50px;
	height: 50px;
	border-radius: var(--radius-full);
	object-fit: cover;
	border: 2px solid var(--gray-200);
}

.testimonial__name {
	font-weight: 600;
	color: var(--gray-900);
	margin-bottom: var(--space-1);
}

.testimonial__location {
	font-size: var(--text-sm);
	color: var(--gray-500);
}

/* ===== CONTACT SECTION ===== */
.contact {
	padding: var(--space-24) 0;
	background: var(--white);
}

.contact__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
}

.contact__description {
	font-size: var(--text-lg);
	color: var(--gray-600);
	margin-bottom: var(--space-8);
}

.contact__methods {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.contact__method {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-xl);
	transition: all var(--transition-base);
	text-decoration: none;
}

.contact__method:hover {
	background: var(--primary);
	color: var(--white);
	border-color: var(--primary);
	transform: translateX(8px);
}

.contact__method--primary {
	background: linear-gradient(135deg, var(--primary), var(--primary-light));
	color: var(--white);
	border-color: var(--primary);
}

.contact__method--primary:hover {
	background: linear-gradient(135deg, var(--primary-dark), var(--primary));
	transform: translateX(8px) scale(1.02);
}

.contact__method-icon {
	width: 50px;
	height: 50px;
	background: var(--white);
	color: var(--primary);
	border-radius: var(--radius-xl);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all var(--transition-base);
}

.contact__method:hover .contact__method-icon {
	background: var(--white);
	color: var(--primary);
	transform: scale(1.1);
}

.contact__method--primary .contact__method-icon {
	background: rgba(255, 255, 255, 0.2);
	color: var(--white);
}

.contact__method-content h4 {
	font-weight: 600;
	margin-bottom: var(--space-1);
}

.contact__method-content p {
	font-size: var(--text-sm);
	opacity: 0.8;
}

/* Contact Form */
.contact__form {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-2xl);
	padding: var(--space-8);
	box-shadow: var(--shadow-lg);
}

.contact__form-title {
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--gray-900);
	margin-bottom: var(--space-6);
}

.form__group {
	margin-bottom: var(--space-6);
}

.form__label {
	display: block;
	font-weight: 600;
	color: var(--gray-700);
	margin-bottom: var(--space-2);
}

.form__input,
.form__textarea {
	width: 100%;
	padding: var(--space-4);
	border: 2px solid var(--gray-200);
	border-radius: var(--radius-lg);
	font-size: var(--text-base);
	background: var(--gray-50);
	transition: all var(--transition-fast);
}

.form__input:focus,
.form__textarea:focus {
	outline: none;
	border-color: var(--primary);
	background: var(--white);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form__textarea {
	resize: vertical;
	min-height: 120px;
	font-family: inherit;
}

.contact__form-note {
	font-size: var(--text-sm);
	color: var(--gray-500);
	text-align: center;
	margin-top: var(--space-4);
}

/* ===== FOOTER ===== */
.footer {
	background: var(--gray-900);
	color: var(--white);
	padding: var(--space-16) 0 var(--space-8);
}

.footer__content {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--space-12);
	margin-bottom: var(--space-12);
}

.footer__logo {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-xl);
	font-weight: 800;
	margin-bottom: var(--space-4);
}

.footer__description {
	color: var(--gray-300);
	margin-bottom: var(--space-4);
	line-height: 1.6;
}

.footer__phone {
	color: var(--white);
	font-size: var(--text-lg);
}

.footer__title {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: var(--space-4);
}

.footer__links {
	list-style: none;
}

.footer__links li {
	margin-bottom: var(--space-2);
}

.footer__links a {
	color: var(--gray-300);
	transition: color var(--transition-fast);
}

.footer__links a:hover {
	color: var(--white);
}

.footer__bottom {
	border-top: 1px solid var(--gray-700);
	padding-top: var(--space-8);
	text-align: center;
	color: var(--gray-400);
	font-size: var(--text-sm);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1024px) {
	.hero__container {
		grid-template-columns: 1fr;
		gap: var(--space-12);
		text-align: center;
	}

	.hero__title {
		font-size: var(--text-4xl);
	}

	.about__content,
	.contact__content,
	.zone__content {
		grid-template-columns: 1fr;
		gap: var(--space-12);
	}

	.footer__content {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

/* Mobile */
@media (max-width: 768px) {
	.container {
		padding: 0 var(--space-4);
	}

	.nav__menu {
		display: none;
	}

	.nav__toggle {
		display: flex;
	}

	.hero__title {
		font-size: var(--text-3xl);
	}

	.hero__features {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}

	.hero__cta {
		flex-direction: column;
	}

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

	.about__stats {
		grid-template-columns: repeat(2, 1fr);
	}

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

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

	.footer__content {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.section__title {
		font-size: var(--text-3xl);
	}
}

/* Small Mobile */
@media (max-width: 480px) {
	.nav {
		height: var(--header-height);
	}

	.nav__brand {
		font-size: var(--text-lg);
	}

	.nav__phone span {
		display: none;
	}

	.hero {
		padding-top: 0;
	}

	.hero__container {
		padding-top: calc(var(--header-height) + var(--space-6));
		min-height: calc(100vh - var(--header-height));
	}

	.hero__title {
		font-size: var(--text-2xl);
	}

	.btn {
		width: 100%;
		justify-content: center;
	}

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

/* ===== ADDITIONAL STYLES ===== */

/* Mobile menu styles */
@media (max-width: 768px) {
	.nav__menu {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(20px);
		transform: translateY(-100%);
		transition: transform var(--transition-base);
		border-bottom: 1px solid var(--gray-200);
		z-index: 999;
		box-shadow: var(--shadow-lg);
	}

	.nav__menu--open {
		transform: translateY(0);
	}

	.nav__list {
		flex-direction: column;
		padding: var(--space-6);
		gap: var(--space-4);
	}

	.nav__link {
		padding: var(--space-3) 0;
		font-size: var(--text-lg);
		border-bottom: 1px solid var(--gray-100);
	}

	.nav__link:last-child {
		border-bottom: none;
	}

	.nav__toggle--open span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}

	.nav__toggle--open span:nth-child(2) {
		opacity: 0;
	}

	.nav__toggle--open span:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -6px);
	}

	/* Ensure header stays above everything */
	.header {
		z-index: 1001;
	}

	/* Adjust hero padding for mobile */
	.hero__container {
		padding-top: calc(var(--header-height) + var(--space-4));
		min-height: calc(100vh - var(--header-height) - var(--space-4));
	}
}

/* Form states */
.form__input--error {
	border-color: var(--accent) !important;
}

.btn--loading {
	opacity: 0.7;
	cursor: not-allowed;
}

.form__message {
	padding: 12px 16px;
	border-radius: 8px;
	margin-top: 16px;
	font-weight: 500;
}

.form__message--success {
	background: var(--success);
	color: white;
}

.form__message--error {
	background: var(--accent);
	color: white;
}

/* Map styles */
.map-popup {
	text-align: center;
	padding: 8px;
	min-width: 200px;
}

.map-popup h4 {
	margin: 0 0 8px 0;
	color: var(--gray-900);
	font-weight: 600;
}

.map-popup p {
	margin: 0 0 12px 0;
	color: var(--gray-600);
	font-size: 14px;
	line-height: 1.4;
}

.map-popup__cta {
	display: inline-block;
	padding: 8px 16px;
	background: var(--primary);
	color: white;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.2s;
}

.map-popup__cta:hover {
	background: var(--primary-dark);
}

.map-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 40px 20px;
	text-align: center;
	color: var(--gray-600);
}

.map-error svg {
	margin-bottom: 16px;
	color: var(--primary);
}

.map-error h4 {
	margin-bottom: 8px;
	color: var(--gray-900);
}

.map-error p {
	margin-bottom: 20px;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

.btn:focus,
.form__input:focus,
.form__textarea:focus,
.nav__link:focus {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

@media (prefers-contrast: high) {
	:root {
		--gray-50: #ffffff;
		--gray-100: #f0f0f0;
		--gray-200: #e0e0e0;
		--gray-300: #d0d0d0;
		--gray-400: #a0a0a0;
		--gray-500: #808080;
		--gray-600: #606060;
		--gray-700: #404040;
		--gray-800: #202020;
		--gray-900: #000000;
	}
}