/* ===========================================================================
   Автомобилиста.рф — блоки главной и выпадающее меню (редизайн 04.11.2026).

   Сквозной приём — косая плашка из логотипа: плашки-метки, номера шагов,
   подложки значков наклонены на тот же угол. Цвета: чёрный, красный
   фирменный, синий #0753FF только для морского пути и стран в заголовке.
   Первый экран — ровный светло-серый фон и вырезанная машина справа.
   Каталог здесь не трогается: его вид в catalog*.css.
   =========================================================================== */

:root {
	--c-blue: #0753ff;
	--c-hero: #e8eaed;
	--skew: -12deg;
}

/* Под 1920 и шире контент шире: как у образца по ширине (acj-car.ru), чуть больше */
@media (min-width: 1880px) {
	:root { --wrap: 1440px; }
}

/* ---------- Общее для секций ---------------------------------------------- */

.section { padding: clamp(64px, 8vw, 120px) 0; }
.section--light { background: var(--c-page); }
.section--dark { background: var(--c-ink); color: #fff; }

.section__head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 52px); }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.section__head--row > div { max-width: 780px; }

.h2 { font-size: clamp(30px, 3.5vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
.h2--white { color: #fff; }

.section__lead { margin-top: 16px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--c-muted); text-wrap: pretty; }
.section--dark .section__lead { color: rgba(255, 255, 255, .62); }

.link-arrow--white { color: #fff; }

@media (max-width: 767px) {
	.section__head--row { flex-direction: column; align-items: flex-start; }
}

/* Две косые черты — знак из баннеров компании. Векторные параллелограммы:
   у градиента под углом края шли лесенкой и полосы выходили разной ширины */
.slashes {
	flex: none;
	width: 20px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath fill='%23e3001b' d='M5.2 0h6.3l-5.2 18H0zM13.7 0H20l-5.2 18H8.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Косая метка */
.tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 6px;
	background: #fff;
	color: var(--c-ink);
	font-size: 13px;
	font-weight: 800;
	transform: skewX(var(--skew));
}
.tag--red { background: var(--c-red); color: #fff; }

/* ---------- 1. Первый экран ----------------------------------------------- */

.intro {
	position: relative;
	overflow: hidden;
	padding: calc(var(--ui-header-h, 76px) + var(--ui-edge) + clamp(20px, 4vh, 48px)) 0 clamp(24px, 4vh, 44px);
	background: var(--c-hero);
}

.intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	gap: clamp(16px, 2vw, 40px);
	align-items: center;
	min-height: clamp(420px, 56vh, 600px);
}

.intro__text { position: relative; z-index: 2; min-width: 0; container-type: inline-size; }

.intro__badge {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 10px 18px 10px 14px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 30px -18px rgba(13, 14, 16, .4);
	font-size: clamp(12px, .95vw, 15px);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .01em;
	transform: skewX(var(--skew));
	transform-origin: left bottom;
}

.intro__title { margin: clamp(16px, 2.6vh, 26px) 0 0; letter-spacing: -.04em; overflow-wrap: normal; word-break: normal; }

.intro__title-big {
	display: block;
	/* Кегль зависит от своей колонки, а не окна: слово всегда целиком. */
	font-size: clamp(32px, 4vw, 76px);
	font-size: clamp(32px, 13cqi, 84px);
	font-weight: 900;
	font-style: italic;
	line-height: .92;
	letter-spacing: -.04em;
	white-space: nowrap;
	text-transform: uppercase;
}

.intro__title-from {
	display: block;
	margin-top: .22em;
	font-size: clamp(22px, 2.1vw, 38px);
	font-size: clamp(22px, 6.8cqi, 42px);
	font-weight: 900;
	font-style: italic;
	line-height: 1.02;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.intro__title-from em { font-style: italic; text-transform: uppercase; }

.intro__lead {
	max-width: 470px;
	margin-top: clamp(14px, 2.2vh, 22px);
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 500;
	line-height: 1.5;
	color: #3a3d45;
}

.intro__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3vh, 30px); }

/* Слайдер занимает только правую колонку: машина не заходит под текст,
   заголовок свободно выделяется и нажимается */
.intro-slider { position: relative; z-index: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }

.intro-slider__stage { display: grid; }

.intro-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	visibility: hidden;
}

.intro-slide.is-active { visibility: visible; }

.intro-slide__ghost {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	font-size: clamp(100px, 12.5vw, 240px);
	font-weight: 900;
	font-style: italic;
	line-height: .8;
	letter-spacing: -.05em;
	color: #dcdfe3;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transform: translateX(6%);
	transition: opacity .7s var(--ease-out), transform 1s var(--ease-out);
}

.intro-slide__pic { position: relative; z-index: 1; display: block; width: 100%; margin-top: 6%; }

.intro-slide__car {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 28px rgba(13, 14, 16, .16));
	opacity: 0;
	transform: translateX(14%) scale(.98);
	transition: opacity .6s var(--ease-out), transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.intro-slide__floor {
	position: absolute;
	z-index: 0;
	left: 2%;
	right: 4%;
	bottom: 22%;
	height: 12%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(13, 14, 16, .28), rgba(13, 14, 16, 0));
	opacity: 0;
	transition: opacity 1s var(--ease-out) .2s;
}

.intro-slide.is-active .intro-slide__car { opacity: 1; transform: none; }
.intro-slide.is-active .intro-slide__ghost { opacity: 1; transform: none; }
.intro-slide.is-active .intro-slide__floor { opacity: 1; }

.intro-slider:not(.is-ready) .intro-slide.is-active :is(.intro-slide__car, .intro-slide__ghost, .intro-slide__floor) { transition: none; }

.intro-slide__cap {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 16px;
	align-self: flex-end;
	min-width: min(100%, 470px);
	margin-top: -2%;
	padding: 12px 12px 12px 18px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 18px 40px -26px rgba(13, 14, 16, .5);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .5s var(--ease-out) .35s, transform .6s var(--ease-out) .35s;
}

.intro-slide.is-active .intro-slide__cap { opacity: 1; transform: none; }

.intro-slide__name { font-size: 21px; font-weight: 900; font-style: italic; letter-spacing: -.02em; line-height: 1.1; }
.intro-slide__note { grid-column: 1; font-size: 13.5px; color: var(--c-muted); }

.intro-slide__calc {
	grid-column: 2;
	grid-row: 1 / 3;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--c-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ui-base) var(--ui-ease), transform .16s var(--ease-out);
}

.intro-slide__calc:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
	.intro-slide__calc:hover { background: var(--c-red); }
}

.intro-slider__nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.intro-slider__arrow {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: background-color var(--ui-fast), color var(--ui-fast);
}

.intro-slider__arrow svg { width: 20px; height: 20px; }
.intro-slider__arrow[data-dir="-1"] svg { transform: scaleX(-1); }
.intro-slider__count { min-width: 56px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.intro-slider__count b { color: var(--c-ink); }

@media (hover: hover) and (pointer: fine) {
	.intro-slider__arrow:hover { background: var(--c-ink); color: #fff; }
}

.intro-facts {
	display: grid;
	grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
	margin: clamp(22px, 3.5vh, 40px) 0 0;
	padding: 0;
	overflow: hidden;
	border-radius: 26px;
	background: #fff;
	list-style: none;
}

.intro-fact {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 176px;
	padding: 28px;
}

.intro-fact:nth-child(n + 3) { border-left: 1px solid var(--c-line); }
.intro-fact--fee { background: var(--c-red); color: #fff; }
.intro-fact__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.intro-fact__body strong { font-size: clamp(24px, 1.8vw, 29px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.intro-fact__body > span { max-width: 26ch; font-size: 14px; line-height: 1.5; color: #555860; }
.intro-fact--fee .intro-fact__body { gap: 10px; }
.intro-fact--fee strong { font-size: clamp(34px, 2.8vw, 44px); font-weight: 900; font-style: italic; white-space: nowrap; }
.intro-fact--fee .intro-fact__body > span { color: #fff; }

@media (max-width: 1050px) {
	.intro-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.intro-fact { min-height: 150px; }
	.intro-fact:nth-child(3) { border-left: 0; }
	.intro-fact:nth-child(n + 3) { border-top: 1px solid var(--c-line); }
	.intro-fact__body > span { max-width: 34ch; }
}

@media (max-width: 900px) {
	.intro__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.intro-slide__ghost { font-size: clamp(90px, 26vw, 200px); }
	.intro-slide__cap { align-self: stretch; }
	.intro-slider { margin-top: 8px; }
}

@media (max-width: 767px) {
	.intro { padding-top: calc(var(--ui-header-h, 60px) + var(--ui-edge) + 20px); }
	.intro__badge { padding: 9px 14px 9px 12px; font-size: clamp(10.5px, 3.05vw, 12px); letter-spacing: 0; gap: 9px; white-space: nowrap; }
	.intro__badge .slashes { width: 15px; height: 13px; }
	.intro__btns .btn { flex: 1 1 100%; }
	.intro-slide__cap { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 4px 12px; }
	.intro-slide__calc { grid-column: 1 / -1; grid-row: auto; margin-top: 8px; }
	.intro-slide__name { font-size: 19px; }
}

@media (max-width: 600px) {
	.intro-facts { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
	.intro-fact { min-height: 0; padding: 20px; }
	.intro-fact:nth-child(n + 2) { border-left: 0; border-top: 1px solid var(--c-line); }
	.intro-fact__body { width: 100%; display: grid; grid-template-columns: minmax(104px, .85fr) minmax(0, 1.15fr); align-items: center; gap: 16px; }
	.intro-fact__body strong { font-size: 21px; letter-spacing: -.03em; }
	.intro-fact__body > span { max-width: none; font-size: 13.5px; line-height: 1.45; }
	.intro-fact--fee .intro-fact__body { grid-template-columns: auto minmax(0, 1fr); gap: 18px; }
	.intro-fact--fee strong { font-size: 32px; }
}

@media (max-width: 359px) {
	.intro__badge { white-space: normal; }
}

/* ---------- 2. Почему с нами спокойно: плиты разного веса ----------------- */

.why { background: #fff; }

.bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(270px, auto);
	gap: 14px;
}

.tile {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
	border-radius: 28px;
	background: var(--c-page);
}

.tile p { font-size: 15px; line-height: 1.55; color: var(--c-muted); }
.tile__title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.tile__title--lg { font-size: clamp(24px, 2vw, 30px); letter-spacing: -.03em; }
.tile__title--xl { font-size: clamp(28px, 2.7vw, 42px); letter-spacing: -.035em; line-height: 1.04; }
.tile__body { display: flex; flex-direction: column; gap: 10px; }

/* Фото на всю плиту, текст снизу по затемнению */
.tile--photo { justify-content: flex-end; color: #fff; }
.tile__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 14, 16, 0) 25%, rgba(13, 14, 16, .88) 100%); }
.tile--photo p { color: rgba(255, 255, 255, .8); max-width: 520px; }
.tile--photo .tag .glyph { width: 16px; height: 16px; color: var(--c-red); }
.tile--short .tile__body { gap: 8px; }

.tile--contract { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 560px; }

.tile--red { background: var(--c-red); color: #fff; }

.tile__big {
	margin: auto 0 10px;
	font-size: clamp(44px, 4.4vw, 70px);
	font-weight: 900;
	font-style: italic;
	letter-spacing: -.045em;
	line-height: 1;
	white-space: nowrap;
}

/* Одинаковая сумма у дешёвой и дорогой машины — довод виден без слов */
.fee-same { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fee-same li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(0, 0, 0, .16); font-size: 13.5px; }
.fee-same b { font-weight: 800; white-space: nowrap; }

.tile--dark { background: var(--c-ink); color: #fff; }
.tile--dark p { color: rgba(255, 255, 255, .64); }

.docs-stack { position: relative; height: 110px; margin-bottom: auto; }

.docs-stack__sheet {
	position: absolute;
	left: 0;
	top: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 140px;
	padding: 14px;
	border-radius: 10px;
	background: #fff;
	color: var(--c-ink);
	font-size: 15px;
	font-weight: 900;
	font-style: italic;
	box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6);
	transform: rotate(-6deg);
	transition: transform .5s var(--ease-out);
}

.docs-stack__sheet + .docs-stack__sheet { left: 70px; top: 28px; background: var(--c-red); color: #fff; transform: rotate(5deg); }
.docs-stack__sheet .glyph { width: 22px; height: 22px; }

.tile--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 24px; }

.tile--truck { padding: 10px; }
.tile__side-photo { flex: none; align-self: stretch; width: 46%; min-height: 250px; object-fit: cover; border-radius: 20px; }
.tile--truck .tile__body { padding: 18px 18px 18px 4px; gap: 8px; }

.tk-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.tk-line b { padding: 6px 10px; border-radius: 8px; background: #fff; font-weight: 800; white-space: nowrap; }
.tk-line b:last-child { background: var(--c-ink); color: #fff; }
.tk-line i { flex: 1; min-width: 30px; height: 0; border-top: 2px dashed #b4b8c1; position: relative; }
.tk-line i::after { content: ""; position: absolute; right: -2px; top: -6px; border: 5px solid transparent; border-left: 7px solid #b4b8c1; }

.tile--budget { background: var(--c-ink); color: #fff; flex-direction: column; align-items: stretch; justify-content: space-between; }
.tile--budget p { color: rgba(255, 255, 255, .64); }
.budget-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.budget-chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 54px;
	padding: 0 16px 0 18px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	transition: background-color var(--ui-fast), border-color var(--ui-fast), transform .16s var(--ease-out);
}

.budget-chip svg { width: 20px; height: 20px; color: var(--c-red); transition: transform .3s var(--ease-out), color var(--ui-fast); }
.budget-chip:active { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
	.budget-chip:hover { background: var(--c-red); border-color: var(--c-red); }
	.budget-chip:hover svg { color: #fff; transform: translateX(3px); }
	.tile--photo:hover .tile__bg { transform: scale(1.05); }
	.tile--docs:hover .docs-stack__sheet { transform: rotate(-9deg) translateY(-4px); }
	.tile--docs:hover .docs-stack__sheet + .docs-stack__sheet { transform: rotate(8deg) translateX(10px); }
}

@media (max-width: 1100px) {
	.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tile--contract { grid-column: 1 / -1; grid-row: auto; min-height: 440px; }
	.tile--wide { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	.bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 10px; }
	.tile { padding: 22px; border-radius: 22px; }
	.tile--contract { min-height: 400px; }
	.tile--short { min-height: 320px; }
	.tile__big { margin-top: 14px; }
	.docs-stack { margin-bottom: 14px; }
	.tile--wide { flex-direction: column; align-items: stretch; }
	.tile__side-photo { width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
	.tile--truck .tile__body { padding: 8px 12px 14px; }
	.budget-chips { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 3. Из чего складывается цена ---------------------------------- */

.price { background: var(--c-page); }

.price__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }

.price-car {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	min-height: 560px;
	padding: 22px;
	border-radius: 28px;
	background: var(--c-ink);
	color: #fff;
}

.price-car__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.price-car::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 14, 16, .1) 0%, rgba(13, 14, 16, 0) 40%, rgba(13, 14, 16, .88) 100%); }

.price-car__tag { align-self: flex-start; padding: 7px 12px; border-radius: 6px; background: #fff; color: var(--c-ink); font-size: 13px; font-weight: 800; transform: skewX(var(--skew)); }

.price-car__info { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.price-car__name { font-size: clamp(24px, 2.3vw, 34px); font-weight: 900; font-style: italic; letter-spacing: -.03em; line-height: 1.05; }
.price-car__specs { display: flex; flex-wrap: wrap; gap: 6px; }
.price-car__specs span { padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.price-car__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.price-car__total span { font-size: 14px; color: rgba(255, 255, 255, .7); }
.price-car__total strong { font-size: clamp(24px, 2.2vw, 32px); font-weight: 900; letter-spacing: -.03em; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
	.price-car:hover .price-car__img { transform: scale(1.04); }
}

.bill { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); border-radius: 28px; background: #fff; }
.bill__title { font-size: 15px; font-weight: 700; color: var(--c-muted); }

.bill__bar { display: flex; gap: 3px; height: 22px; margin: 14px 0 8px; border-radius: 8px; overflow: hidden; }
.bill__bar .seg { display: block; flex-basis: 0; min-width: 6px; }

.seg--car { background: var(--c-ink); }
.seg--road { background: var(--c-blue); }
.seg--duty { background: #7a808c; }
.seg--util { background: #b6bac3; }
.seg--ru { background: #d9dce1; }
.seg--fee { background: var(--c-red); }

.bill__rows { margin: 0; padding: 0; list-style: none; }

.bill-row {
	display: grid;
	grid-template-columns: 12px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--c-line);
}

.bill-row .seg { width: 12px; height: 12px; border-radius: 3px; transform: skewX(var(--skew)); }
.bill-row__label { font-size: 16px; font-weight: 700; line-height: 1.3; }
.bill-row__label small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--c-muted); }
.bill-row__pct { font-size: 13px; font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.bill-row__sum { min-width: 118px; text-align: right; font-size: 16px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

.bill__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	padding: 20px 22px;
	border-radius: 18px;
	background: var(--c-ink);
	color: #fff;
	font-weight: 600;
}

.bill__total strong { font-size: clamp(24px, 2.3vw, 32px); font-weight: 900; letter-spacing: -.03em; white-space: nowrap; }
.bill__note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--c-muted); }

@media (max-width: 960px) {
	.price__grid { grid-template-columns: minmax(0, 1fr); }
	.price-car { min-height: 420px; }
}

@media (max-width: 520px) {
	.bill-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
	.bill-row__pct { display: none; }
	.bill-row__sum { min-width: 0; }
	.bill__total { flex-direction: column; align-items: flex-start; gap: 4px; }
	.price-car { min-height: 380px; padding: 16px; border-radius: 22px; }
}

/* ---------- 4. Как проходит покупка: дорога с остановками ------------------ */

.steps { background: var(--c-ink); color: #fff; }
.steps .section__lead { color: rgba(255, 255, 255, .62); }

.road { position: relative; margin-top: clamp(36px, 4vw, 56px); --road-x: 50%; }

/* трасса: тёмный асфальт с разметкой, поверх — закрашенный пройденный путь */
.road__track {
	position: absolute;
	top: 0;
	bottom: 70px;
	left: var(--road-x);
	width: 18px;
	margin-left: -9px;
	border-radius: 9px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .26) 50%, transparent 50%) 50% 0 / 2px 26px repeat-y,
		#23252b;
}

.road__fill {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: var(--road-p, 0%);
	border-radius: 9px;
	background: linear-gradient(180deg, #ff3349, var(--c-red));
}

.road__car {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: var(--road-p, 0%);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border-radius: 14px;
	color: var(--c-red);
	isolation: isolate;
}

.road__car::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: #fff;
	box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .7);
	transform: skewX(var(--skew));
}

.road__car img { display: block; width: 28px; height: 28px; object-fit: contain; }

.road__stops { position: relative; margin: 0; padding: 0; list-style: none; }

.stop { position: relative; display: flex; padding: 0 0 26px; }
.stop--left { justify-content: flex-start; padding-right: calc(50% + 44px); }
.stop--right { justify-content: flex-end; padding-left: calc(50% + 44px); }
.stop + .stop { margin-top: -90px; }

/* значок остановки на трассе */
.stop__pin {
	position: absolute;
	left: var(--road-x);
	top: 30px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border-radius: 50%;
	background: #2e3138;
	color: rgba(255, 255, 255, .55);
	box-shadow: 0 0 0 5px var(--c-ink);
	transition: background-color .4s var(--ui-ease), color .4s var(--ui-ease);
}

.stop__pin .glyph { width: 20px; height: 20px; }
.stop.is-passed .stop__pin { background: var(--c-red); color: #fff; }

.stop__card {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	width: 100%;
	overflow: hidden;
	border-radius: 24px;
	background: #191b20;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
	transition: background-color .4s var(--ui-ease), box-shadow .4s var(--ui-ease), transform .5s var(--ease-out);
}

.stop.is-passed .stop__card { background: #1f2127; }

.stop__media { position: relative; margin: 0; min-height: 168px; background: #23252b; }
.stop__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.stop__num {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 4px 9px;
	border-radius: 8px;
	background: rgba(13, 14, 16, .78);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	font-style: italic;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.stop__body { padding: 20px 22px 22px; }
.stop__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.stop__text { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .66); }

/* платёж — отрывная квитанция с зубчатым краем */
.stop__pay {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 8px 14px 8px 12px;
	background: #fff;
	color: var(--c-ink);
	font-size: 13.5px;
	font-weight: 800;
	--tooth: radial-gradient(circle at 50% 0, transparent 3.5px, #000 4px);
	-webkit-mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
	              radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
	        mask: radial-gradient(circle 4px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
	              radial-gradient(circle 4px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
	border-radius: 6px;
}

.stop__pay .glyph { width: 17px; height: 17px; color: var(--c-red); }

/* доставка: схема вместо фото, карточка шире по картинке */
.stop--map .stop__card { grid-template-columns: 260px minmax(0, 1fr); }
.stop--map .stop__media { display: flex; align-items: center; padding: 12px; background: #15171b; }
.stop--map .route-legend { display: none; }

@media (hover: hover) and (pointer: fine) {
	.stop__card:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
}

.road__finish {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: max-content;
	margin: 6px auto 0;
	padding: 12px 20px 12px 12px;
	border-radius: 16px;
	background: #fff;
	color: var(--c-ink);
	font-weight: 800;
}

.road__finish span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c-red); color: #fff; }
.road__finish .glyph { width: 20px; height: 20px; }

@media (max-width: 1100px) {
	.stop__card { grid-template-columns: 150px minmax(0, 1fr); }
	.stop--map .stop__card { grid-template-columns: minmax(0, 1fr); }
	.stop--map .stop__media { min-height: 0; }
}

/* телефон и планшет: трасса у левого края, карточки справа */
@media (max-width: 860px) {
	.road { --road-x: 20px; }
	.stop--left, .stop--right { justify-content: flex-start; padding: 0 0 18px 58px; }
	.stop + .stop { margin-top: 0; }
	.stop__pin { top: 18px; }
	.stop__card { grid-template-columns: minmax(0, 1fr); }
	.stop__media { min-height: 0; aspect-ratio: 16 / 9; }
	.stop--map .stop__media { aspect-ratio: auto; }
	.road__finish { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.stop__card, .stop__pin { transition: none; }
}

/* схема маршрута (остановка «Доставка») */
.route-map-box { width: 100%; }
.route-map { display: block; width: 100%; height: auto; overflow: visible; }
.route-map__land { fill: #2a2d36; }
.route-map__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-map__line--land { stroke: var(--c-red); stroke-width: 3.5; }
.route-map__line--sea { stroke: #3d7bff; stroke-width: 3; stroke-dasharray: 2 9; animation: route-flow 1.6s linear infinite; }
.route-map__line--ru { stroke: rgba(255, 255, 255, .7); stroke-width: 2.5; stroke-dasharray: 1 9; animation: route-flow 2.2s linear infinite; }
.route-map__dot { fill: #fff; }
.route-map__dot--small { fill: rgba(255, 255, 255, .7); }
.route-map__dot--main { fill: var(--c-red); stroke: #fff; stroke-width: 3; }
.route-map__pulse { fill: rgba(227, 0, 27, .35); transform-box: fill-box; transform-origin: center; animation: route-pulse 2.4s var(--ease-out) infinite; }
.route-map__label { fill: #fff; font-family: var(--ui-font); font-size: 14px; font-weight: 700; }
.route-map__label--small { fill: rgba(255, 255, 255, .58); font-size: 12px; font-weight: 600; }
.route-map__label--main { font-size: 16px; font-weight: 900; font-style: italic; }

@keyframes route-flow { to { stroke-dashoffset: -22; } }
@keyframes route-pulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.route-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: rgba(255, 255, 255, .72); }
.route-legend li { display: flex; align-items: center; gap: 10px; }
.lg { flex: none; width: 26px; height: 0; border-top: 3px solid var(--c-red); }
.lg--sea { border-top: 3px dotted #3d7bff; }
.lg--ru { border-top: 3px dotted rgba(255, 255, 255, .7); }


/* ---------- 5. Проверка до оплаты: папки отчёта --------------------------- */

.folders {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin-top: clamp(36px, 4vw, 56px);
}

.folder {
	position: relative;
	height: 440px;
	isolation: isolate;
	perspective: 1100px;
}

/* задняя стенка с ярлыком-номером */
.folder__back {
	position: absolute;
	inset: 30px 0 0;
	border-radius: 0 22px 22px 22px;
	background: linear-gradient(180deg, #2b2e35, #191b1f);
}

.folder__tab {
	position: absolute;
	left: 0;
	bottom: 100%;
	display: flex;
	align-items: center;
	width: 42%;
	height: 32px;
	padding: 0 16px;
	border-radius: 14px 14px 0 0;
	background: #2b2e35;
	color: #ff4256;
	font-size: 14px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: .02em;
}

/* скос ярлыка к стенке */
.folder__tab::after {
	content: "";
	position: absolute;
	top: 0;
	right: -15px;
	width: 30px;
	height: 100%;
	border-radius: 0 10px 0 0;
	background: inherit;
	transform: skewX(32deg);
}

.folder__files { position: absolute; left: 14px; right: 14px; top: 46px; height: 240px; }

.file {
	position: absolute;
	margin: 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .7);
	transition: transform .55s var(--ease-out);
}

.file--sheet {
	left: 0;
	top: 0;
	width: 57%;
	padding: 14px 14px 16px;
	transform: rotate(-5deg);
}

.file__title { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.file__title .glyph { width: 16px; height: 16px; color: var(--c-ink); }
.file--sheet ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.file--sheet li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--c-ink); }
.file--sheet li .glyph { flex: none; width: 16px; height: 16px; padding: 2px; border-radius: 5px; background: var(--c-red); color: #fff; }

.file--photo {
	right: -2%;
	top: 48px;
	width: 58%;
	padding: 5px;
	transform: rotate(6deg);
}

.file--photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

.file__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border-radius: 50%;
	background: rgba(13, 14, 16, .72);
	color: #fff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.file__play svg { width: 16px; height: 16px; margin-left: 2px; }

/* передняя створка */
.folder__front {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	height: 55%;
	padding: 22px 22px 20px;
	border-radius: 18px 18px 22px 22px;
	background: linear-gradient(180deg, #383b43, #222429 70%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -18px 30px -24px rgba(0, 0, 0, .8);
	color: #fff;
	transform-origin: 50% 100%;
	transition: transform .55s var(--ease-out);
}

.folder__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.folder__text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .68); }

.folder__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 14px 0 0; list-style: none; }
.folder__meta li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; background: rgba(255, 255, 255, .08); font-size: 12.5px; font-weight: 700; }
.folder__meta .glyph { width: 15px; height: 15px; color: #ff4256; }

@media (hover: hover) and (pointer: fine) {
	.folder:hover .folder__front { transform: rotateX(-14deg); }
	.folder:hover .file--sheet { transform: translateY(-26px) rotate(-8deg); }
	.folder:hover .file--photo { transform: translateY(-38px) rotate(9deg); }
}

.inspect-bar {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 26px;
	padding: 16px 16px 16px 20px;
	border-radius: 24px;
	background: var(--c-page);
}

.inspect-bar__ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #e8f5fd; }
.inspect-bar__ico svg { width: 26px; height: 26px; }
.inspect-bar__text { flex: 1; margin: 0; font-size: 16.5px; line-height: 1.45; color: #3b3e45; }
.inspect-bar__text strong { color: var(--c-ink); }
.inspect-bar__btn { flex: none; }

@media (max-width: 1180px) {
	.folders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.folders { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.folder { height: 400px; }
	.folder__front { height: auto; min-height: 44%; padding: 20px 20px 18px; }
	.folder__meta { margin-top: 0; }
	.inspect-bar { flex-wrap: wrap; padding: 18px; }
	.inspect-bar__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.file, .folder__front { transition: none; }
}

/* ---------- 6. Выдачи ------------------------------------------------------ */

.reviews-preview { background: var(--c-page); }

.deliveries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.review-tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4.2;
	border-radius: 24px;
	background: var(--c-ink);
	color: #fff;
}

.review-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }

.review-tile__count {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border-radius: 10px;
	background: rgba(13, 14, 16, .6);
	font-size: 13px;
	font-weight: 700;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.review-tile__count .glyph { width: 16px; height: 16px; }

.review-tile__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 70px 20px 20px;
	background: linear-gradient(180deg, rgba(13, 14, 16, 0), rgba(13, 14, 16, .88));
}

.review-tile__place { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.review-tile__place .glyph { width: 16px; height: 16px; color: var(--c-red); }
.review-tile__cap strong { font-size: 22px; font-weight: 900; font-style: italic; letter-spacing: -.02em; }

@media (hover: hover) and (pointer: fine) {
	.review-tile:hover img { transform: scale(1.05); }
}

.deliveries__more { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border-radius: 24px; background: #fff; }
.deliveries__ico svg { width: 52px; height: 52px; }
.deliveries__title { margin-top: auto; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.deliveries__text { font-size: 15px; line-height: 1.5; color: var(--c-muted); }
.deliveries__more .btn { margin-top: 8px; }
.deliveries__link { font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
	.deliveries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.deliveries__more { aspect-ratio: auto; }
}

@media (max-width: 640px) {
	.deliveries { grid-template-columns: repeat(4, 76%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; gap: 10px; }
	.deliveries::-webkit-scrollbar { display: none; }
	.deliveries > * { scroll-snap-align: start; }
}

/* ---------- 7. Нашли дешевле ---------------------------------------------- */

.cheaper { background: #fff; }
.cheaper__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }

.compare { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; padding: 10px 6px 18px; }

.compare__card { padding: 20px 22px; border-radius: 20px; }
.compare__card--them { background: var(--c-page); transform: rotate(-2.5deg) translateY(10px); }
.compare__card--us { position: relative; z-index: 1; background: #fff; box-shadow: 0 2px 0 var(--c-ink) inset, 0 0 0 2px var(--c-ink) inset, 0 26px 50px -26px rgba(13, 14, 16, .45); transform: rotate(1.5deg); }

.compare__title { margin-bottom: 8px; font-size: 15px; font-weight: 800; }
.compare__card--us .compare__title { color: var(--c-red); }
.compare ul { margin: 0; padding: 0; list-style: none; }
.compare li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px dashed #d3d5db; font-size: 14px; font-weight: 600; }

.compare i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; }
.compare i .glyph { width: 16px; height: 16px; stroke-width: 2.2; }
.compare i.q { background: #fff; color: #9a9ea8; box-shadow: inset 0 0 0 1px #d3d5db; }
.compare i.ok { background: var(--c-ink); color: #fff; }
.compare__card--us i.ok { background: var(--c-red); }

@media (max-width: 960px) {
	.cheaper__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
	.compare { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.compare__card--them { transform: rotate(-1.5deg); }
	.compare__card--us { margin: -10px 0 0; transform: rotate(1deg); }
}

/* ---------- 8. Вопросы ----------------------------------------------------- */

.faq { background: var(--c-page); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--ui-header-h, 76px) + var(--ui-edge) + 24px); }

.ask-card { margin-top: 28px; padding: 22px; border-radius: 24px; background: #fff; }
.ask-card__top { display: flex; align-items: center; gap: 14px; }
.ask-card__ava { width: 56px; height: 56px; border-radius: 14px; }
.ask-card__name { font-size: 16px; font-weight: 800; }
.ask-card__hours { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 13.5px; color: var(--c-muted); }
.ask-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #1fae5b; box-shadow: 0 0 0 4px rgba(31, 174, 91, .18); }
.ask-card__btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }

.ask-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	border-radius: 12px;
	background: var(--c-page);
	font-size: 15px;
	font-weight: 700;
	transition: background-color var(--ui-fast);
}

.ask-card__btn svg { width: 22px; height: 22px; }
.ask-card__cta { width: 100%; margin-top: 8px; }

@media (hover: hover) and (pointer: fine) {
	.ask-card__btn:hover { background: var(--c-line); }
}

.faq__list { display: grid; gap: 10px; }

/* Открытый вопрос — приподнятая карточка и красный значок, без цветной полосы сбоку */
.faq-item { border-radius: 20px; background: #fff; transition: box-shadow .35s var(--ui-ease); }
.faq-item[open] { box-shadow: 0 22px 44px -30px rgba(13, 14, 16, .32); }

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 76px;
	padding: 18px 20px 18px 26px;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item__ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--c-page);
	transform: skewX(var(--skew));
	transition: background-color var(--ui-fast), color var(--ui-fast);
}

.faq-item__ico svg { width: 18px; height: 18px; transform: skewX(calc(var(--skew) * -1)); transition: transform var(--ui-turn) var(--ui-ease); }
.faq-item[open] .faq-item__ico { background: var(--c-red); color: #fff; }
.faq-item[open] .faq-item__ico svg { transform: skewX(calc(var(--skew) * -1)) rotate(45deg); }
.faq-item.is-closing .faq-item__ico { background: var(--c-page); color: inherit; }
.faq-item.is-closing .faq-item__ico svg { transform: skewX(calc(var(--skew) * -1)); }
.faq-item.is-closing { box-shadow: none; }
.faq-item__a { overflow: hidden; font-size: 16px; line-height: 1.65; color: #3b3e45; }
.faq-item__in { padding: 0 26px 24px; }
.faq-item__in p { margin: 0; }

@media (hover: hover) and (pointer: fine) {
	.faq-item summary:hover .faq-item__ico { background: var(--c-ink); color: #fff; }
	.faq-item[open] summary:hover .faq-item__ico { background: var(--c-red); }
}

@media (max-width: 960px) {
	.faq__grid { grid-template-columns: minmax(0, 1fr); }
	.faq__head { position: static; }
}

@media (max-width: 560px) {
	.faq-item summary { min-height: 64px; padding: 14px 14px 14px 18px; font-size: 16px; }
	.faq-item__a { font-size: 15px; }
	.faq-item__in { padding: 0 18px 18px; }
}

/* ---------- 9. Текст для поиска: разворот ---------------------------------- */

.seo { background: #fff; }

.seo-top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
}

.seo-top__text .h2 { margin-bottom: 22px; }
.seo-lead { margin: 0; font-size: 18px; line-height: 1.7; color: #33363d; }

.seo-why { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.seo-why li { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 8px; border-radius: 14px; background: var(--c-page); font-size: 15px; font-weight: 700; }
.seo-why li span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c-ink); color: #fff; }
.seo-why .glyph { width: 18px; height: 18px; }

.seo-top__photo { position: relative; margin: 0; overflow: hidden; border-radius: 28px; }
.seo-top__photo img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

.seo-h3 { margin: 0 0 18px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.seo-top + .seo-h3 { margin-top: clamp(48px, 6vw, 80px); }

.seo-countries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.seo-country {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 22px 20px;
	border-radius: 24px;
	background: var(--c-page);
	color: var(--c-ink);
	transition: background-color var(--ui-base) var(--ui-ease), color var(--ui-base) var(--ui-ease), transform .3s var(--ease-out);
}

.seo-country__head { display: flex; align-items: center; gap: 12px; }
.seo-country__head strong { font-size: 24px; font-weight: 900; font-style: italic; letter-spacing: -.02em; }
.seo-country__head .type-tab__flag { width: 33px; height: 22px; }
.seo-country__arrow { width: 22px; height: 22px; margin-left: auto; color: var(--c-red); transition: transform .3s var(--ease-out); }
.seo-country__text { font-size: 15.5px; line-height: 1.6; color: #3b3e45; transition: color var(--ui-base) var(--ui-ease); }
.seo-country__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.seo-country__tags span { padding: 6px 11px; border-radius: 9px; background: #fff; font-size: 13px; font-weight: 700; transition: background-color var(--ui-base) var(--ui-ease); }

@media (hover: hover) and (pointer: fine) {
	/* без подъёма: сдвиг карточки под курсором давал повторные срабатывания ховера */
	.seo-country:hover { background: var(--c-ink); color: #fff; }
	.seo-country:hover .seo-country__text { color: rgba(255, 255, 255, .7); }
	.seo-country:hover .seo-country__tags span { background: rgba(255, 255, 255, .1); }
	.seo-country:hover .seo-country__arrow { transform: translateX(4px); }
}

.seo-price {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
	margin-top: clamp(48px, 6vw, 80px);
}

.seo-price__text p { margin: 0 0 16px; font-size: 17px; line-height: 1.75; color: #33363d; }
.seo-price__text .btn { margin-top: 10px; }

.seo-price__side { display: grid; gap: 14px; }

/* «квитанция»: статьи цены строками, комиссия выделена, итог — в договоре */
.receipt { padding: 24px 24px 22px; border-radius: 24px; background: var(--c-ink); color: #fff; }
.receipt__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .55); }
.receipt__title .glyph { width: 18px; height: 18px; color: #ff4256; }
.receipt__rows { margin: 0; padding: 0; list-style: none; }
.receipt__rows li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); font-size: 15px; font-weight: 600; }
.receipt__rows .glyph { flex: none; width: 20px; height: 20px; color: rgba(255, 255, 255, .5); }
.receipt__rows li.is-fee { color: #fff; }
.receipt__rows li.is-fee .glyph { color: #ff4256; }
.receipt__rows li b { margin-left: auto; padding: 5px 10px; border-radius: 8px; background: var(--c-red); font-size: 14px; white-space: nowrap; }
.receipt__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 0; font-size: 15px; color: rgba(255, 255, 255, .7); }
.receipt__total b { font-size: 22px; font-weight: 900; font-style: italic; color: #fff; }

/* порог 160 л.с.: два столбика без сумм, только соотношение */
.hp-card { padding: 20px 22px; border-radius: 24px; background: var(--c-page); }
.hp-card__title { margin: 0; font-size: 16px; font-weight: 800; }
.hp-card__bars { position: relative; display: flex; align-items: flex-end; gap: 18px; height: 120px; margin-top: 14px; }
.hp-bar { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.hp-bar i { display: block; width: 100%; height: var(--h); border-radius: 10px 10px 4px 4px; background: #c9ccd3; }
.hp-bar--up i { background: var(--c-red); }
.hp-bar b { position: absolute; bottom: -26px; font-size: 13px; font-weight: 700; color: var(--c-muted); }
.hp-card__line { position: relative; flex: none; width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--c-ink) 0 5px, transparent 5px 9px); }
.hp-card__line em { position: absolute; top: -4px; left: 50%; padding: 2px 7px; border-radius: 6px; background: var(--c-ink); color: #fff; font-size: 11.5px; font-style: normal; font-weight: 800; transform: translate(-50%, -100%); }
.hp-card__note { margin: 36px 0 0; font-size: 14px; color: var(--c-muted); }

@media (max-width: 1000px) {
	.seo-top, .seo-price { grid-template-columns: minmax(0, 1fr); }
	.seo-countries { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 10. Финальная заявка: тёмная карточка, машина на косых полосах -- */

.cta-band { padding: clamp(40px, 6vw, 96px) 0; background: var(--c-page); }

.cta-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	grid-template-rows: auto 1fr;
	column-gap: clamp(28px, 4vw, 64px);
	overflow: hidden;
	isolation: isolate;
	padding: clamp(28px, 4vw, 56px);
	border-radius: 36px;
	background: var(--c-ink);
	color: #fff;
}

.cta-card__main { grid-column: 1; grid-row: 1; position: relative; z-index: 2; min-width: 0; }

.cta-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 8px 14px 8px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cta-card__lead { margin: 16px 0 0; max-width: 540px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* три шага после заявки */
.cta-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: none; }
.cta-steps li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .06); font-size: 14.5px; font-weight: 700; }
.cta-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--c-red); font-size: 14px; font-style: italic; font-weight: 900; transform: skewX(var(--skew)); }

.cta-card__msg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.cta-card__msg a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 18px;
	border-radius: var(--r-btn);
	background: #fff;
	color: var(--c-ink);
	font-weight: 700;
	transition: background-color var(--ui-base) var(--ui-ease), color var(--ui-base) var(--ui-ease), transform .2s var(--ease-out);
}

.cta-card__msg svg { width: 22px; height: 22px; }
.cta-card__msg a:last-child svg { color: var(--c-red); }

@media (hover: hover) and (pointer: fine) {
	.cta-card__msg a:hover { transform: translateY(-2px); }
}

/* машина на косых красных полосах, как на баннере */
.cta-card__stage { grid-column: 1; grid-row: 2; position: relative; display: flex; align-items: flex-end; justify-content: center; min-width: 0; padding-bottom: 16px; margin: 26px 0 calc(clamp(28px, 4vw, 56px) * -1); }

.cta-card__stripe { position: absolute; bottom: 0; z-index: -1; background: var(--c-red); transform: skewX(var(--skew)); }
.cta-card__stripe--a { left: 8%; width: 58%; height: 46%; }
.cta-card__stripe--b { left: 70%; width: 9%; height: 46%; background: #9c0013; }

.cta-card__car {
	position: relative;
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .55));
}

.cta-card__form { grid-column: 2; grid-row: 1 / 3; align-self: center; position: relative; z-index: 2; }

@media (max-width: 1100px) {
	.cta-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
	.cta-card__stage { grid-row: auto; margin: 26px 0 18px; }
	.cta-card__stripe--a, .cta-card__stripe--b { height: 50%; }
	.cta-card__form { grid-column: 1; grid-row: auto; }
}

@media (max-width: 560px) {
	.cta-card { border-radius: 28px; padding: 24px 18px 18px; }
	.cta-steps li { width: 100%; min-width: 0; }
	.cta-steps b { flex-shrink: 0; }
	.cta-card__lead { overflow-wrap: anywhere; }
	.cta-card__msg a { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 11. Выпадающее меню на десктопе ------------------------------- */

.mega-panels { position: relative; }

.mega-panel {
	position: absolute;
	top: 8px;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	max-height: calc(100vh - var(--ui-header-h, 80px) - 40px);
	overflow: auto;
	padding: 10px;
	border-radius: 26px;
	background: #fff;
	box-shadow: var(--ui-shadow-lg);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .2s var(--ui-ease), transform .26s var(--ui-ease);
	overscroll-behavior: contain;
}

.mega-panel.is-open { opacity: 1; transform: none; }
/* display выше перебивает hidden: без этой строки закрытая панель лежала бы
   прозрачным слоем под шапкой и забирала прокрутку и клики */
.mega-panel[hidden] { display: none; }

.mega-side {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 26px 24px 18px;
	border-radius: 20px;
	background: var(--c-ink);
	color: #fff;
}

/* Косые черты фирменного знака в углу колонки */
.mega-side::after {
	content: "";
	position: absolute;
	right: -30px;
	bottom: -40px;
	z-index: -1;
	width: 150px;
	height: 220px;
	background: linear-gradient(90deg, rgba(227, 0, 27, .9) 0 34%, transparent 34% 56%, rgba(227, 0, 27, .5) 56% 78%, transparent 78%);
	transform: skewX(-18deg);
	opacity: .55;
}

.mega-side__title { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.mega-side__sub { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.mega-side__all { margin-top: 10px; }

.mega-side__links { display: grid; gap: 2px; width: 100%; margin: auto 0 0; padding: 18px 0 0; list-style: none; }

.mega-side__links a,
.mega-side__links button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 42px;
	padding: 0 10px;
	margin: 0 -10px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ui-fast), color var(--ui-fast);
}

.mega-side__links .glyph { width: 20px; height: 20px; color: var(--c-red); }

@media (hover: hover) and (pointer: fine) {
	.mega-side__links a:hover, .mega-side__links button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
}

.mega-main { padding: 18px 18px 8px 26px; }
.mega-label { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--c-muted); }

.mega-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }

.mega-brand {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 12px;
	padding: 12px 14px;
	border-radius: 16px;
	background: var(--c-page);
	transition: background-color var(--ui-fast), box-shadow var(--ui-fast);
}

.mega-brand .brand-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 10px; background: #fff; }
.mega-brand .brand-ico--sprite i { width: 28px; height: 28px; }
.mega-brand__name { overflow: hidden; font-size: 15px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.mega-brand__cnt { font-size: 12.5px; color: var(--c-muted); }

@media (hover: hover) and (pointer: fine) {
	.mega-brand:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--c-ink); }
	.mega-brand:hover .mega-brand__name { color: var(--c-red); }
}

.mega-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 20px; margin-top: 20px; }
.mega-group:first-child:has(li:nth-child(9)) { grid-column: span 2; }
.mega-group:first-child:has(li:nth-child(9)) .mega-group__list { columns: 2; column-gap: 20px; }

.mega-group__list { margin: 0; padding: 0; list-style: none; }
.mega-group__list li { break-inside: avoid; }

.mega-group__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding: 4px 8px;
	margin: 0 -8px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	transition: background-color var(--ui-fast) var(--ui-ease);
}

@media (hover: hover) and (pointer: fine) {
	.mega-group__list a:hover { background: var(--c-page); }
	.mega-group__list a:hover .mega-group__name { color: var(--c-red); }
}

.mega-group__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--ui-fast); }
.mega-group__cnt { font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums; }

.mega-bodies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); }

.mega-body {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 16px 0 12px;
	border-radius: 12px;
	background: var(--c-page);
	font-size: 14px;
	font-weight: 700;
	transition: background-color var(--ui-fast), color var(--ui-fast);
}

.mega-body .qf-icon-car {
	display: block;
	width: 40px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--qf-mask) center / contain no-repeat;
	mask: var(--qf-mask) center / contain no-repeat;
}

.mega-body svg.qf-icon { width: 22px; height: 22px; }

@media (hover: hover) and (pointer: fine) {
	.mega-body:hover { background: var(--c-ink); color: #fff; }
}

/* место задаёт скрипт (placeNarrow): под ссылкой «Клиентам» */
.mega-panel--clients { left: 0; right: auto; display: block; width: 760px; max-width: 100%; }
.mega-clients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

.mega-client { display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 14px; border-radius: 18px; transition: background-color var(--ui-fast); }
.mega-client__img { display: block; overflow: hidden; margin-bottom: 8px; border-radius: 12px; background: var(--c-page); }
.mega-client__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease-out); }
.mega-client strong { padding: 0 4px; font-size: 15px; font-weight: 800; }
.mega-client span:not(.mega-client__img) { padding: 0 4px; font-size: 13px; line-height: 1.4; color: var(--c-muted); }

@media (hover: hover) and (pointer: fine) {
	.mega-client:hover { background: var(--c-page); }
	.mega-client:hover img { transform: scale(1.05); }
	.mega-client:hover strong { color: var(--c-red); }
}

@media (max-width: 1440px) {
	.mega-panel { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (max-width: 1280px) {
	.mega-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Движение: кто просил меньше — получает статичную картинку ---- */

@media (prefers-reduced-motion: reduce) {
	.intro-slide__car, .intro-slide__ghost, .intro-slide__floor, .intro-slide__cap { transition: none; }
	.route-map__line--sea, .route-map__line--ru, .route-map__pulse { animation: none; }
}

/* ---------- 12. Меню марок: крупное название страны ---------------------- */

.mega-side__big { font-size: 42px; font-weight: 900; font-style: italic; letter-spacing: -.04em; line-height: 1; }