/*
Theme Name: USA Cars
Theme URI: https://example.com/
Author: Link
Description: Лендинг для компании по пригону автомобилей из США под ключ. Анимированный hero, калькулятор растаможки, каталог авто, форма заявки, микроразметка Schema.org.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: usacars
*/

/* =========================================================
   Базовые переменные и сброс
   ========================================================= */
:root {
	--bg: #0b1220;
	--bg-2: #0f1a2e;
	--card: #152238;
	--card-2: #1a2a45;
	--line: #24344f;
	--text: #e8edf6;
	--muted: #93a1b8;
	--accent: #e63946;
	--accent-hover: #f04b58;
	--blue: #3b82f6;
	--green: #34d399;
	--radius: 16px;
	--shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	--font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.section { padding: 96px 0; }

.section-kicker {
	color: var(--accent);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 13px;
	margin-bottom: 12px;
}

.section-title {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 48px;
	max-width: 720px;
}

/* =========================================================
   Кнопки
   ========================================================= */
.btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 15px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-accent {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 8px 24px rgba(230, 57, 70, 0.35);
}
.btn-accent:hover { background: var(--accent-hover); box-shadow: 0 12px 32px rgba(230, 57, 70, 0.45); }

.btn-ghost {
	border-color: var(--line);
	color: var(--text);
	background: rgba(255, 255, 255, 0.03);
}
.btn-ghost:hover { border-color: var(--blue); }

.btn-lg { padding: 17px 36px; font-size: 16px; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-block { width: 100%; }

/* =========================================================
   Шапка
   ========================================================= */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	background: rgba(11, 18, 32, 0.82);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 72px;
}

.logo { display: flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: 0.02em; }
.logo-text { font-weight: 400; }
.logo-text b { font-weight: 800; color: var(--accent); }

.logo-flag {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	width: 26px;
}
.logo-flag span { height: 5px; border-radius: 2px; }
.logo-flag span:nth-child(1) { background: #e63946; }
.logo-flag span:nth-child(2) { background: #f1f5f9; }
.logo-flag span:nth-child(3) { background: #3b82f6; }

.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--muted);
	transition: color 0.2s;
	white-space: nowrap;
}
.main-nav a:hover { color: var(--text); }

.header-cta { display: flex; align-items: center; gap: 18px; }
.header-phone { font-weight: 700; font-size: 15px; white-space: nowrap; }

.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: 0.3s; }

/* =========================================================
   HERO: ночной хайвей
   ========================================================= */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 140px 0 220px;
	overflow: hidden;
	background: linear-gradient(180deg, #060b16 0%, #0b1220 55%, #0d1526 100%);
}

.hero-scene { position: absolute; inset: 0; pointer-events: none; }

/* Звёзды: два слоя мерцания */
.stars {
	position: absolute;
	inset: 0 0 30% 0;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 20%, #ffffffcc 50%, transparent 51%),
		radial-gradient(1px 1px at 28% 44%, #ffffff99 50%, transparent 51%),
		radial-gradient(2px 2px at 41% 12%, #ffffffbb 50%, transparent 51%),
		radial-gradient(1px 1px at 55% 35%, #ffffff88 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 68% 18%, #ffffffcc 50%, transparent 51%),
		radial-gradient(1px 1px at 79% 40%, #ffffff99 50%, transparent 51%),
		radial-gradient(2px 2px at 90% 24%, #ffffffbb 50%, transparent 51%),
		radial-gradient(1px 1px at 6% 55%, #ffffff77 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 47% 58%, #ffffff88 50%, transparent 51%),
		radial-gradient(1px 1px at 85% 60%, #ffffff77 50%, transparent 51%);
	animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
	from { opacity: 0.5; }
	to { opacity: 1; }
}

/* Силуэт города (SVG data-URI) */
.skyline {
	position: absolute;
	left: 0; right: 0; bottom: 120px;
	height: 220px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath fill='%23101b30' d='M0 220 L0 150 L40 150 L40 100 L70 100 L70 140 L110 140 L110 60 L125 60 L125 45 L140 45 L140 60 L155 60 L155 140 L200 140 L200 110 L240 110 L240 160 L280 160 L280 80 L330 80 L330 150 L370 150 L370 120 L410 120 L410 55 L425 55 L425 30 L440 30 L440 55 L460 55 L460 130 L510 130 L510 90 L550 90 L550 160 L600 160 L600 100 L640 100 L640 70 L680 70 L680 140 L720 140 L720 110 L770 110 L770 45 L790 45 L790 110 L830 110 L830 150 L880 150 L880 90 L920 90 L920 130 L960 130 L960 60 L980 60 L980 40 L1000 40 L1000 60 L1020 60 L1020 140 L1070 140 L1070 100 L1110 100 L1110 150 L1160 150 L1160 120 L1200 120 L1200 220 Z'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	opacity: 0.9;
}

/* Окна города — мерцающие точки */
.skyline::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 10% 62%, #fbbf2488 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 24% 48%, #fbbf2466 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 36% 70%, #fbbf2488 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 52% 55%, #fbbf2466 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 64% 40%, #fbbf2488 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 78% 58%, #fbbf2466 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 91% 47%, #fbbf2488 50%, transparent 51%);
	animation: twinkle 3s ease-in-out infinite alternate-reverse;
}

/* Дорога */
.road {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 120px;
	background: linear-gradient(180deg, #182338 0%, #0e1626 100%);
	border-top: 1px solid #24344f;
}

/* Движущаяся разметка */
.road-lines {
	position: absolute;
	left: 0; right: 0; top: 52px;
	height: 6px;
	background-image: repeating-linear-gradient(
		90deg,
		#f1f5f9cc 0px, #f1f5f9cc 60px,
		transparent 60px, transparent 140px
	);
	animation: road-move 0.9s linear infinite;
	opacity: 0.75;
}

@keyframes road-move {
	from { background-position-x: 0; }
	to { background-position-x: -140px; }
}

/* Машина */
.hero-car {
	position: absolute;
	bottom: 26px;
	right: 6%;
	width: min(500px, 44vw);
	animation:
		drive-in 2.4s cubic-bezier(0.23, 1, 0.32, 1) both,
		car-bob 1.6s ease-in-out 2.4s infinite alternate;
	filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55));
}

@keyframes drive-in {
	from { transform: translateX(-120vw); }
	to { transform: translateX(0); }
}

@keyframes car-bob {
	from { transform: translateY(0); }
	to { transform: translateY(-3px); }
}

.car-svg { width: 100%; height: auto; }

.car-body { fill: #e63946; }
.car-glass { fill: #0b1220; opacity: 0.85; }
.car-pillar { stroke: #e63946; stroke-width: 5; }
.car-light { fill: #fef08a; }
.car-taillight { fill: #7f1d1d; }

.headlight-beam {
	fill: url(#beam) #fef08a22;
	fill: #fef08a;
	opacity: 0.14;
	animation: beam-flicker 3.5s ease-in-out infinite;
}

@keyframes beam-flicker {
	0%, 100% { opacity: 0.14; }
	50% { opacity: 0.22; }
}

.wheel .tire { fill: #0d1424; stroke: #1e293b; stroke-width: 3; }
.wheel .rim { fill: #94a3b8; }
.wheel .spoke { stroke: #334155; stroke-width: 3; stroke-linecap: round; }

.wheel {
	animation: wheel-spin 0.7s linear infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes wheel-spin {
	to { transform: rotate(360deg); }
}

/* Контент hero */
.hero-content { position: relative; z-index: 2; max-width: 640px; }

.hero-kicker {
	font-weight: 700;
	color: var(--muted);
	letter-spacing: 0.06em;
	margin-bottom: 18px;
	font-size: 15px;
}

.hero h1 {
	font-size: clamp(34px, 5.4vw, 62px);
	font-weight: 800;
	line-height: 1.08;
	margin-bottom: 22px;
}

.accent { color: var(--accent); }

.hero-sub {
	font-size: 18px;
	color: var(--muted);
	max-width: 520px;
	margin-bottom: 34px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }

.hero-stats {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}

.stat { display: block; }
.stat-num, .stat-plus {
	font-size: 34px;
	font-weight: 800;
	display: inline;
	line-height: 1.1;
	white-space: nowrap;
}
.stat-num { color: var(--text); }
.stat-plus { color: var(--accent); }
.stat-label { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }

/* Появление текста hero */
.anim-up {
	opacity: 0;
	transform: translateY(28px);
	animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }

@keyframes rise {
	to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Появление секций при скролле
   ========================================================= */
.reveal {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   Переваги
   ========================================================= */
.advantages { background: var(--bg-2); }

.adv-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.adv-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 26px;
	transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.7s, box-shadow 0.3s ease;
}
.adv-card:hover {
	transform: translateY(-6px);
	border-color: var(--blue);
	box-shadow: var(--shadow);
}

.adv-icon { font-size: 34px; margin-bottom: 16px; }
.adv-card h3 { font-size: 18px; margin-bottom: 10px; font-weight: 700; }
.adv-card p { color: var(--muted); font-size: 14.5px; }

/* Ступенчатая задержка карточек */
.adv-card:nth-child(2) { transition-delay: 0.1s; }
.adv-card:nth-child(3) { transition-delay: 0.2s; }
.adv-card:nth-child(4) { transition-delay: 0.3s; }

/* =========================================================
   Этапы (таймлайн)
   ========================================================= */
.timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.timeline-item {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 26px;
	position: relative;
	transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.7s;
}
.timeline-item:hover { border-color: var(--accent); transform: translateY(-4px); }

.timeline-num {
	font-size: 42px;
	font-weight: 800;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--accent);
	line-height: 1;
	margin-bottom: 16px;
}

.timeline-body h3 { font-size: 18px; margin-bottom: 10px; }
.timeline-body p { color: var(--muted); font-size: 14.5px; }

.timeline-item:nth-child(2) { transition-delay: 0.08s; }
.timeline-item:nth-child(3) { transition-delay: 0.16s; }
.timeline-item:nth-child(4) { transition-delay: 0.24s; }
.timeline-item:nth-child(5) { transition-delay: 0.32s; }
.timeline-item:nth-child(6) { transition-delay: 0.4s; }

/* =========================================================
   Каталог авто
   ========================================================= */
.catalog { background: var(--bg-2); }

.cars-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.car-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.7s;
}
.car-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
	border-color: var(--blue);
}

.car-photo {
	position: relative;
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.car-photo img { width: 100%; height: 100%; object-fit: cover; }

.car-placeholder {
	width: 80%;
	color: #64748b;
}

/* Оттенки карточек-заглушек */
.hue-1 .car-photo { background: linear-gradient(135deg, #1e293b, #b91c1c33); }
.hue-1 .car-placeholder { color: #f87171; }
.hue-2 .car-photo { background: linear-gradient(135deg, #1e293b, #1d4ed833); }
.hue-2 .car-placeholder { color: #60a5fa; }
.hue-3 .car-photo { background: linear-gradient(135deg, #1e293b, #04785733); }
.hue-3 .car-placeholder { color: #34d399; }
.hue-4 .car-photo { background: linear-gradient(135deg, #1e293b, #a1620733); }
.hue-4 .car-placeholder { color: #fbbf24; }
.hue-5 .car-photo { background: linear-gradient(135deg, #1e293b, #6d28d933); }
.hue-5 .car-placeholder { color: #a78bfa; }
.hue-6 .car-photo { background: linear-gradient(135deg, #1e293b, #be185d33); }
.hue-6 .car-placeholder { color: #f472b6; }

.car-year, .car-auction {
	position: absolute;
	top: 14px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	backdrop-filter: blur(6px);
}
.car-year { left: 14px; background: rgba(11, 18, 32, 0.75); }
.car-auction { right: 14px; background: rgba(230, 57, 70, 0.85); }

.car-info { padding: 22px; }
.car-info h3 { font-size: 19px; margin-bottom: 6px; }

.car-specs { color: var(--muted); font-size: 14px; margin-bottom: 16px; }

.car-prices { display: flex; gap: 24px; margin-bottom: 12px; }
.price-label { display: block; font-size: 12px; color: var(--muted); }
.price-value { font-size: 20px; font-weight: 800; }
.car-price-market .price-value {
	color: var(--muted);
	text-decoration: line-through;
	font-size: 17px;
	font-weight: 600;
}

.car-save {
	display: inline-block;
	background: rgba(52, 211, 153, 0.12);
	color: var(--green);
	font-weight: 700;
	font-size: 13.5px;
	padding: 6px 14px;
	border-radius: 999px;
}

.catalog-note {
	text-align: center;
	color: var(--muted);
	margin-top: 40px;
}

/* =========================================================
   Калькулятор
   ========================================================= */
.calc-wrap {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 32px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 40px;
}

.calc-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-content: start;
}

.calc-field label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 8px;
}

.calc-field input,
.calc-field select,
.form-field input,
.form-field textarea {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	padding: 13px 14px;
	transition: border-color 0.2s;
}

.calc-field input:focus,
.calc-field select:focus,
.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--blue);
}

.calc-result {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
}

.calc-result h3 { margin-bottom: 18px; font-size: 19px; }

.calc-breakdown { list-style: none; margin-bottom: 18px; }
.calc-breakdown li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--line);
	font-size: 14.5px;
	color: var(--muted);
}
.calc-breakdown li strong { color: var(--text); font-weight: 700; white-space: nowrap; }

.calc-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 16px 0;
	font-size: 17px;
	font-weight: 700;
}
.calc-total strong {
	font-size: 30px;
	font-weight: 800;
	color: var(--accent);
	transition: transform 0.15s ease;
}
.calc-total strong.bump { transform: scale(1.06); }

.calc-note { font-size: 13px; color: var(--muted); margin-bottom: 18px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--bg-2); }

.faq-list { max-width: 820px; }

.faq-item {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	margin-bottom: 14px;
	overflow: hidden;
	transition: border-color 0.25s, opacity 0.7s, transform 0.7s;
}
.faq-item[open] { border-color: var(--accent); }

.faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 56px 20px 24px;
	font-weight: 700;
	font-size: 16px;
	position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	font-weight: 400;
	color: var(--accent);
	transition: transform 0.3s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-item p {
	padding: 0 24px 20px;
	color: var(--muted);
	font-size: 15px;
}

/* =========================================================
   Контакты / форма
   ========================================================= */
.contact-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.contact-text > p { color: var(--muted); margin-bottom: 28px; max-width: 460px; }
.contact-text .section-title { margin-bottom: 18px; }

.contact-channels { display: flex; flex-direction: column; gap: 12px; }
.channel {
	font-weight: 700;
	font-size: 16px;
	transition: color 0.2s;
	width: fit-content;
}
.channel:hover { color: var(--accent); }

.contact-form-wrap {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 38px;
}

.form-field { margin-bottom: 18px; }
.form-field label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 8px;
}

.form-privacy {
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 14px;
	text-align: center;
}

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-success { text-align: center; padding: 40px 10px; }
.form-success h3 { font-size: 24px; margin-bottom: 12px; }
.form-success p { color: var(--muted); }

/* =========================================================
   Подвал
   ========================================================= */
.site-footer {
	background: #070d18;
	border-top: 1px solid var(--line);
	padding: 64px 0 0;
}

.footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 48px;
}

.footer-desc { color: var(--muted); font-size: 14.5px; margin-top: 16px; max-width: 300px; }

.footer-col h4 { font-size: 15px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.08em; }

.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a, .footer-contact {
	color: var(--muted);
	font-size: 14.5px;
	transition: color 0.2s;
	display: block;
}
.footer-nav a:hover, .footer-contact:hover { color: var(--text); }
.footer-contact { margin-bottom: 10px; }

.socials { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.social {
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
	transition: all 0.2s;
}
.social-tg:hover { border-color: #229ed9; color: #229ed9; }
.social-wa:hover { border-color: #25d366; color: #25d366; }
.social-vb:hover { border-color: #7360f2; color: #7360f2; }

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding: 22px 24px;
	color: var(--muted);
	font-size: 13px;
}

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 1024px) {
	.adv-grid { grid-template-columns: repeat(2, 1fr); }
	.timeline { grid-template-columns: repeat(2, 1fr); }
	.cars-grid { grid-template-columns: repeat(2, 1fr); }
	.calc-wrap { grid-template-columns: 1fr; }
	.main-nav { display: none; }
	.header-cta .btn { display: none; }
	.burger { display: block; margin-left: auto; }
	.header-cta { margin-left: auto; }

	.main-nav.open {
		display: flex;
		position: fixed;
		top: 72px;
		left: 0; right: 0;
		flex-direction: column;
		background: var(--bg-2);
		padding: 24px;
		gap: 18px;
		border-bottom: 1px solid var(--line);
	}
}

@media (max-width: 640px) {
	.section { padding: 64px 0; }
	.hero { padding: 120px 0 260px; min-height: auto; }
	.hero-car { width: 78vw; right: 4%; }
	.hero-stats { gap: 24px; }
	.stat-num, .stat-plus { font-size: 26px; }
	.adv-grid, .timeline, .cars-grid { grid-template-columns: 1fr; }
	.contact-inner { grid-template-columns: 1fr; gap: 36px; }
	.calc-form { grid-template-columns: 1fr; }
	.calc-wrap { padding: 24px; }
	.contact-form-wrap { padding: 26px; }
	.footer-inner { grid-template-columns: 1fr; }
	.header-phone { display: none; }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.anim-up, .reveal { opacity: 1; transform: none; }
}