/* ==========================================================================
   АвтоЛюкс — редизайн главной.
   Сцена: светлый серый градиент с красным и жёлтым свечением.
   Поверхности чуть светлее сцены — на этом работает и неоморфизм, и стекло.
   Красный — деньги, связь, внимание. Жёлтый — акцент. Шрифт — PT Sans.
   ========================================================================== */

/* optional, не swap: шрифт свой, с того же домена, грузится за единицы мс
   (тем более с preload в _Layout) - можно просто подождать его и показать
   сразу, не рискуя мелькнуть чужим шрифтом. А вот swap после подгрузки
   переобсчитывает layout для всего текста на странице разом - замерено
   отдельным трейсом: второй, почти полный проход layout сразу после первого,
   ровно от этой подмены шрифта. */
@font-face {
	font-family: "PT Sans";
	src: url("/fonts/PTSans-Regular.woff") format("woff"),
	     url("/fonts/PTSans-Regular.ttf") format("truetype");
	font-weight: 400; font-style: normal; font-display: optional;
}

@font-face {
	font-family: "PT Sans";
	src: url("/fonts/PTSans-Bold.woff") format("woff"),
	     url("/fonts/PTSans-Bold.ttf") format("truetype");
	font-weight: 700; font-style: normal; font-display: optional;
}

:root {
	--flame:     #ffe000;
	--flame-2:   #ffd400;
	--flame-ink: #3d2a00;

	--red:      #cf3a31;
	--red-2:    #a82a23;
	--red-soft: rgba(207, 58, 49, .12);

	/* Светлая сцена */
	--stage-1: #f4f4f7;
	--stage-2: #dcdde2;
	--stage-3: #c2c3cb;
	--stage-4: #b2b3bc;

	/* Поверхности — светлее сцены */
	--surf:       rgba(255, 255, 255, .66);
	--surf-strong:rgba(255, 255, 255, .88);
	--surf-sunk:  #dcdce1;
	--surf-edge:  rgba(255, 255, 255, .85);
	--surf-hair:  rgba(30, 30, 40, .12);

	--ink:     #17171c;
	--text:    #1b1b20;
	--muted:   #5d5b64;
	--muted-2: #82808a;

	--white: #ffffff;

	/* Тёмная шапка. Полоса и карточка — два элемента, но градиент один:
	   --hd-mid это цвет ровно на их стыке, им же залиты вогнутые уголки. */
	--hd-1:   rgba(10, 10, 13, .93);
	--hd-mid: rgba(19, 19, 25, .90);
	--hd-2:   rgba(28, 28, 35, .86);
	--hd-3:   rgba(13, 13, 18, .90);
	--hd-text:  #f3f2f5;
	--hd-muted: #a9a8b3;
	--hd-hair:  rgba(255, 255, 255, .10);
	--hd-hover: rgba(255, 255, 255, .07);
	--hd-blur: saturate(150%) blur(18px);
	--tb-h: 42px;
	--hd-fillet: 14px;

	--blur: saturate(160%) blur(20px);

	/* Кромка стекла вместо тени */
	--lip: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(30, 30, 40, .07);

	/* Кнопка второго плана — то же стекло, что у панелей: светлая кромка
	   сверху и волосяной контур по кругу. Никаких встречных теней. */
	--glass-btn:      inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(30, 30, 40, .10);
	--glass-btn-over: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(207, 58, 49, .32);

	/* Тёплый подсвет под жёлтыми пластинами: один источник, сверху */
	--warm-lift: 0 6px 16px rgba(176, 138, 0, .26);

	--r-s: 4px;
	--r:   6px;
	--r-l: 9px;

	--maxw: 1240px;
	--font: "PT Sans", Tahoma, Arial, sans-serif;
}

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

/* Страховка от бокового скролла. Именно clip, а не hidden: hidden сделал бы
   html прокручиваемым контейнером и сломал бы липкую шапку, а при паре
   clip / visible оба значения остаются как заданы. */
html { scroll-behavior: smooth; overflow-x: clip; }

/* Липкая шапка перекрыла бы заголовок раздела, к которому ведёт якорь */
section[id] { scroll-margin-top: 126px; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--text);
	background: var(--stage-2);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Снимки, которые открываются во весь экран, чуть приглушены — под курсором
   кадр оживает в полную силу. Подсказка тому, что снимок живой, без движения. */
[data-zoom] img {
	filter: saturate(90%);
	transition: filter .2s ease;
}

[data-zoom]:hover img { filter: saturate(100%); }
a { color: inherit; text-decoration: none; }

/* Ссылка внутри обычного текста (не кнопка, не карточка, не пункт меню) -
   без этого она ничем не отличалась от соседних слов, её не было видно. */
.simple-page p a:not(.btn),
.about__cols a:not(.btn),
.crumbs a:not(.btn) {
	color: var(--red);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 700;
}
.simple-page p a:not(.btn):hover,
.about__cols a:not(.btn):hover,
.crumbs a:not(.btn):hover {
	color: var(--red-2);
}
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--r-s); }

/* Сочный серый градиент со свечением */
.backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	/* Отдельный слой: четыре больших градиента рисуются один раз, а не
	   на каждом кадре прокрутки под каждым стеклом */
	transform: translateZ(0);
	background:
		radial-gradient(58vw 44vw at 88% 2%,  rgba(207, 58, 49, .2),  transparent 60%),
		radial-gradient(44vw 36vw at 6% 12%,  rgba(255, 224, 0, .26), transparent 62%),
		radial-gradient(52vw 42vw at 12% 96%, rgba(207, 58, 49, .12), transparent 66%),
		linear-gradient(163deg,
			var(--stage-1) 0%,
			var(--stage-2) 36%,
			var(--stage-3) 72%,
			var(--stage-4) 100%);
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

/* Стеклянная панель */
.pane {
	position: relative;
	background: var(--surf);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	border: 1px solid var(--surf-edge);
	border-radius: var(--r-l);
	box-shadow: var(--lip);
	color: var(--text);
	overflow: hidden;
}

.pane::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 38%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
	pointer-events: none;
	z-index: 1;
}

.pane > * { position: relative; z-index: 2; }

.section { padding: 58px 0; }

/* «Преимущества», «Автопарк и классы» и «О нас» читаются одной стопкой
   панелей, поэтому между ними зазор такой же, как между колонками внутри
   «Автопарка», — 26px, по 13px с каждой стороны. Отбивка от соседей выше
   и ниже стопки остаётся обычной: класс висит только на тех разделах, за
   которыми идёт следующий из стопки. */
.section--stack { padding-bottom: 13px; }
.section--stack + .section { padding-top: 13px; }

.section__title { font-size: clamp(27px, 3.1vw, 38px); margin-bottom: 28px; }

/* Ширина по тексту, а не по колонке: тогда разметка под заголовком может
   мерить себя от него — иначе она тянулась бы во всю ширину секции.
   Из 100% вычтен вылет разметки: без этого длинный заголовок занимал бы всю
   колонку, разметка вылезала бы на 28px за край и страница прокручивалась
   бы вбок. */
.section__title--c {
	width: fit-content;
	max-width: calc(100% - 56px);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Не полоска, а кусок дорожной разметки: прерывистая, с растворением к краям.
   Чуть шире текста — так она выглядит уложенной под ним, а не подчёркиванием. */
.section__title--c::after {
	content: "";
	display: block;
	width: calc(100% + 56px);
	height: 4px;
	margin: 9px 0 0 -28px;
	background: repeating-linear-gradient(90deg, var(--red) 0 34px, transparent 34px 56px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* --------------------------------------------------------------------------
   Кнопки — без теней и без смещения
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 0;
	border-radius: 8px;
	font-family: var(--font);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
	padding: 14px 24px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

/* Жёлтая — блик сверху и тёмная кромка снизу, без тени наружу.
   Тень вниз есть только у кнопки в шапке (см. .masthead .btn--go). */
.btn--go {
	background: linear-gradient(180deg, var(--flame) 0%, var(--flame-2) 100%);
	color: var(--flame-ink);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		inset 0 -1px 0 rgba(120, 90, 0, .18);
}

/* Под курсором пластина «садится»: градиент переворачивается.
   Смещения по-прежнему нет. */
.btn--go:hover {
	background: linear-gradient(180deg, var(--flame-2) 0%, var(--flame) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .5),
		inset 0 -1px 0 rgba(120, 90, 0, .24);
}

/* Второй план — стекло, а не серая пластина */
.btn--glass {
	background: rgba(255, 255, 255, .56);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	color: var(--text);
	box-shadow: var(--glass-btn);
}

.btn--glass:hover {
	background: rgba(255, 255, 255, .82);
	box-shadow: var(--glass-btn-over);
	color: var(--red);
}

.btn--sm { padding: 12px 20px; font-size: 15px; border-radius: 8px; }

/* --------------------------------------------------------------------------
   Служебная полоса — во всю ширину экрана, верхняя часть общего градиента
   -------------------------------------------------------------------------- */
.topbar {
	height: var(--tb-h);
	background: linear-gradient(180deg, var(--hd-1) 0%, var(--hd-mid) 100%);
	backdrop-filter: var(--hd-blur);
	-webkit-backdrop-filter: var(--hd-blur);
	font-size: 14.5px;
	color: var(--hd-muted);
	overflow: hidden;
	/* Шапка прилипает и живёт на каждом кадре прокрутки (JS переключает её
	   классы) - свой композитный слой, иначе блюр здесь пересчитывается
	   рывками прямо в момент, когда страница только начала скроллиться. */
	will-change: backdrop-filter;
}

.topbar__row {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 2px;
	/* Правим отступ, а не поля: margin сбил бы `margin: 0 auto` у .wrap и
	   строка перестала бы держаться середины страницы. 18px поля страницы
	   плюс 16px поля карточки минус 11px поля ячейки. */
	padding-left: 23px;
	padding-right: 23px;
}

.topbar__cell {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 7px 11px;
	border-radius: var(--r-s);
	color: var(--hd-muted);
	white-space: nowrap;
	overflow: hidden;
	transition: color .16s ease, background .16s ease;
}

.topbar a.topbar__cell:hover { color: var(--hd-text); background: var(--hd-hover); }
.topbar__cell i { font-size: 14px; color: var(--flame); opacity: .78; }
.topbar a.topbar__cell:hover i { opacity: 1; }

/* Многоточие вешаем на вложенный span: во флекс-контейнере оно не работает */
.topbar__cell > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Адрес и почта прижаты к левому краю, «Лидер» — к правому */
.topbar__cell--lider { margin-left: auto; color: var(--hd-text); }
.topbar__cell--lider .fa-arrow-up-right-from-square { font-size: 10px; color: var(--hd-muted); }

/* Телефон и график живут в шапке рядом с «Записаться». Сюда они спускаются
   только на узких экранах, где в шапке для них уже нет места. */
.topbar__cell--hours,
.topbar__cell--phone { display: none; }
.topbar__cell--phone { font-weight: 700; color: var(--flame); letter-spacing: -.01em; }
.topbar a.topbar__cell--phone:hover { color: var(--flame); }

.city { position: relative; }

/* Переключатель города — та же жёлтая пластина, что и кнопка «Записаться» */
.city__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--flame) 0%, var(--flame-2) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		inset 0 -1px 0 rgba(120, 90, 0, .18),
		var(--warm-lift);
	color: var(--flame-ink);
	font-family: var(--font);
	cursor: pointer;
	text-align: left;
	transition: background .2s ease, box-shadow .2s ease;
}

.city__btn:hover,
.city.is-open .city__btn {
	background: linear-gradient(180deg, var(--flame-2) 0%, var(--flame) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .5),
		inset 0 -1px 0 rgba(120, 90, 0, .24),
		0 2px 7px rgba(176, 138, 0, .22);
}

.city__btn .fa-location-dot { font-size: 18px; }
.city__btn .fa-chevron-down { font-size: 12px; opacity: .7; transition: transform .2s ease; }
.city.is-open .city__btn .fa-chevron-down { transform: rotate(180deg); }

.city__txt { display: block; line-height: 1.15; }
.city__txt small { display: block; font-size: 12.5px; font-weight: 400; opacity: .72; }
.city__txt b { font-size: 18px; font-weight: 700; }

/* Подсказка, что филиалов больше одного: тонкая, в две строки */
.city-hint {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--hd-muted);
}

.city-hint i { font-size: 16px; color: var(--flame); }

.city__menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 330px;
	padding: 6px;
	border-radius: var(--r-l);
	border: 1px solid var(--surf-edge);
	background: var(--surf-strong);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	box-shadow: var(--lip), 0 14px 34px rgba(38, 38, 52, .20);
	z-index: 300;
	display: none;
}

.city.is-open .city__menu { display: block; }

.city__menu a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 2px 14px;
	padding: 11px 13px;
	border-radius: var(--r);
	color: var(--text);
}

.city__menu a:hover { background: var(--surf-sunk); }
.city__menu a b { grid-column: 1; font-size: 16px; }
.city__menu a small { grid-column: 1; color: var(--muted); font-size: 13px; }

.city__menu a i {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-size: 15px;
	color: var(--muted-2);
	transition: color .16s ease;
}

.city__menu a:hover i { color: var(--red); }
.city__menu a[aria-current] { background: var(--red-soft); }
.city__menu a[aria-current] i { color: var(--red); }

/* На тёмном тёплый подсвет не читается — под шапкой обычная тень вниз */
.masthead .btn--go {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .6),
		inset 0 -1px 0 rgba(120, 90, 0, .28),
		0 4px 14px rgba(0, 0, 0, .38);
}

/* Специфичность та же, что у .btn--go:hover, и правило идёт позже — без
   этой строки нажатое состояние кнопки в шапке перестало бы работать. */
.masthead .btn--go:hover {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .42),
		inset 0 -1px 0 rgba(120, 90, 0, .34),
		0 2px 8px rgba(0, 0, 0, .34);
}

/* Тот же переключатель внутри тёмной шапки. Правила ограничены .masthead:
   на мобильных узел уезжает в светлый ящик меню и снова светлеет. */
.masthead .city__btn {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .6),
		inset 0 -1px 0 rgba(120, 90, 0, .28),
		0 4px 14px rgba(0, 0, 0, .38);
}

.masthead .city__btn:hover,
.masthead .city.is-open .city__btn {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .42),
		inset 0 -1px 0 rgba(120, 90, 0, .34),
		0 2px 8px rgba(0, 0, 0, .34);
}

.masthead .city__menu {
	border-color: var(--hd-hair);
	background: linear-gradient(180deg, rgba(24, 24, 30, .97), rgba(14, 14, 19, .97));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 42px rgba(0, 0, 0, .45);
	color: var(--hd-text);
}

.masthead .city__menu a { color: var(--hd-text); }
.masthead .city__menu a small { color: var(--hd-muted); }
.masthead .city__menu a i { color: var(--hd-muted); }
.masthead .city__menu a:hover { background: var(--hd-hover); }
.masthead .city__menu a:hover i { color: var(--flame); }
.masthead .city__menu a[aria-current] { background: rgba(255, 224, 0, .11); }
.masthead .city__menu a[aria-current] i { color: var(--flame); }

/* --------------------------------------------------------------------------
   Шапка — карточка прежнего размера, приросшая к полосе над ней
   -------------------------------------------------------------------------- */
/* Отрицательный top: при прокрутке шапка уходит вверх ровно на служебную
   полосу и там прилипает. Высота блока в потоке не меняется, поэтому
   страница под ней никуда не дёргается. */
.masthead {
	position: sticky;
	top: calc(-1 * var(--tb-h));
	z-index: 200;
	color: var(--hd-text);
}

/* Тот же пиксель перекрытия, что и в подвале: стык полосы с карточкой */
.masthead__glass {
	position: relative;
	margin-top: -1px;
	border-radius: 0 0 var(--r-l) var(--r-l);
	background: linear-gradient(180deg, var(--hd-mid) 0%, var(--hd-2) 52%, var(--hd-3) 100%);
	backdrop-filter: var(--hd-blur);
	-webkit-backdrop-filter: var(--hd-blur);
	box-shadow: 0 12px 30px rgba(14, 14, 22, .22);
	transition: box-shadow .25s ease;
	will-change: backdrop-filter;
}

/* Оторвались от верха — тень заметнее, карточка «всплывает» */
.masthead.is-stuck .masthead__glass { box-shadow: 0 16px 38px rgba(14, 14, 22, .38); }

/* Вогнутые уголки на стыке: полоса во всю ширину сходится с карточкой не
   ступенькой, а скруглением наружу — обе читаются одной фигурой. Цвет и
   размытие те же, что на стыке градиента, поэтому шва не видно. */
.masthead__glass::before,
.masthead__glass::after {
	content: "";
	position: absolute;
	top: 0;
	width: var(--hd-fillet);
	height: var(--hd-fillet);
	background: var(--hd-mid);
	backdrop-filter: var(--hd-blur);
	-webkit-backdrop-filter: var(--hd-blur);
	pointer-events: none;
	transition: opacity .2s ease;
}

.masthead__glass::before {
	left: calc(-1 * var(--hd-fillet));
	-webkit-mask: radial-gradient(circle at 0 100%, transparent var(--hd-fillet), #000 0);
	        mask: radial-gradient(circle at 0 100%, transparent var(--hd-fillet), #000 0);
}

.masthead__glass::after {
	right: calc(-1 * var(--hd-fillet));
	-webkit-mask: radial-gradient(circle at 100% 100%, transparent var(--hd-fillet), #000 0);
	        mask: radial-gradient(circle at 100% 100%, transparent var(--hd-fillet), #000 0);
}

/* Полоса уехала — прирастать не к чему, уголки убираем */
.masthead.is-stuck .masthead__glass::before,
.masthead.is-stuck .masthead__glass::after { opacity: 0; }

/* На тёмном красная обводка фокуса пропадает — переключаем на жёлтую */
.masthead :focus-visible { outline-color: var(--flame); }

/* Ярус A: три колонки — логотип строго по центру независимо от боков. */
.mast-a {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
}

/* Ярусы разделены не линейкой, а штрихом, тающим к краям */
.mast-a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hd-hair) 16%, var(--hd-hair) 84%, transparent);
}

.mast-a__side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mast-a__side--end { justify-content: flex-end; }

/* Потолок — кнопка города слева: 9px+9px полей плюс две строки (18px и 12.5px
   при line-height 1.15) дают 53px. Логотип упирается в неё и потому не
   добавляет шапке ни пикселя высоты.
   Ограничение через max-height, а не height: на узком экране флекс ужимает
   ссылку, и при жёсткой высоте max-width расплющил бы логотип. */
.masthead__logo img { width: auto; height: auto; max-height: 52px; display: block; }

/* ПК: объёмный логотип (2005×707, 2.84). Он крупнее обычного, но в раскладке
   занимает те же 52px: лишнее уходит в отрицательные поля, в пределах 12px
   отступа яруса, — шапка не растёт.
   В самом верху страницы он ещё крупнее и вылезает на служебную полосу.
   Растёт через transform от нижней кромки: сетка его не замечает, вверх
   уходит только рисунок. */
@media (min-width: 901px) {
	.masthead__logo { position: relative; z-index: 1; }
	.masthead__logo img {
		height: 64px;
		max-height: none;
		margin: -6px 0;
		transform-origin: 50% 100%;
		transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	}
	/* 80px: над карточкой выходит 9px — ниже строки текста полосы, поэтому
	   на средних экранах логотип не наезжает на адрес и почту */
	.masthead.is-top .masthead__logo img { transform: scale(1.25); }
}

/* Во всю ширину середина полосы свободна (адрес с почтой кончаются на ~453px
   от края, центр — 620px): 102×290px, над карточкой 31px */
@media (min-width: 1240px) {
	.masthead.is-top .masthead__logo img { transform: scale(1.6); }
}

/* Телефон и график — как на действующем сайте: номер крупно, режим работы
   строкой ниже. Строение то же, что у кнопки города слева. */
.mast-tel {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 5px 10px;
	border-radius: var(--r);
	color: var(--hd-text);
	white-space: nowrap;
	transition: background .16s ease;
}

.mast-tel:hover { background: var(--hd-hover); }
.mast-tel > i { font-size: 15px; color: var(--flame); }
.mast-tel span { display: block; line-height: 1.16; }
.mast-tel b { display: block; font-size: 18px; letter-spacing: -.01em; }
.mast-tel small { display: block; font-size: 12.5px; font-weight: 400; color: var(--hd-muted); }

/* Ярус B: навигация по центру. Активный и наведённый пункт получают
   подложку — видно, что это кликабельная зона, а не просто текст. */
.mast-b {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 0 16px;
}

.mainnav a {
	position: relative;
	padding: 13px 18px;
	border-radius: var(--r-s) var(--r-s) 0 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--hd-muted);
	letter-spacing: -.01em;
	white-space: nowrap;
	transition: color .16s ease;
}

.mainnav a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--flame);
	opacity: 0;
	transition: opacity .16s ease;
}

/* Отклик только цветом и выступом снизу — подложка тут лишняя */
.mainnav a:hover { color: var(--hd-text); }
.mainnav a:hover::after { opacity: .5; }

.mainnav a[aria-current] { color: var(--flame); }
.mainnav a[aria-current]::after { opacity: 1; }

.burger {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--hd-hair);
	border-radius: var(--r);
	background: rgba(255, 255, 255, .06);
	color: var(--hd-text);
	font-size: 18px;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.burger:hover { background: var(--flame); border-color: var(--flame); color: var(--flame-ink); }

/* --------------------------------------------------------------------------
   Строка сообщения — ровно по ширине страницы, сразу под шапкой
   -------------------------------------------------------------------------- */
.notice {
	/* Отступ, чтобы скруглённый низ карточки шапки не упирался в полосу */
	margin: 12px 0 0;
	padding: 11px 18px;
	border-radius: var(--r);
	background: linear-gradient(180deg, var(--flame) 0%, var(--flame-2) 100%);
	color: var(--flame-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(120, 90, 0, .18);
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   Вступление
   -------------------------------------------------------------------------- */
.intro { position: relative; padding: 62px 0 46px; text-align: center; }
.intro__inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }

/* Конусы по краям заголовка. Стоят за текстом и живут своей жизнью: при
   прокрутке сползают медленнее страницы (параллакс считает app.js).
   Отступ через max(): на широком экране конус встаёт у края страницы, на
   узком — упирается в край окна и не тянет за собой боковую прокрутку. */
.intro__cone {
	position: absolute;
	z-index: 0;
	width: clamp(96px, 11.5vw, 152px);
	height: auto;
	opacity: .92;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 10px 18px rgba(40, 32, 12, .2));
	will-change: transform;
}

.intro__cone--l { top: 38%; left: max(6px, calc(50% - 600px)); }
.intro__cone--r { top: 24%; right: max(6px, calc(50% - 600px)); }
.intro h1 { font-size: clamp(34px, 5.4vw, 66px); margin: 0 0 18px; }

.intro h1 em {
	font-style: normal;
	color: var(--ink);
	background: linear-gradient(180deg, var(--flame), var(--flame-2));
	border-radius: 6px;
	padding: 0 .16em .06em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.intro h1 .brandname { color: var(--red); }

.intro p { margin: 0 auto; color: var(--muted); font-size: 18px; max-width: 64ch; }

/* --------------------------------------------------------------------------
   Категории — горизонтальная карточка в половину ширины страницы
   -------------------------------------------------------------------------- */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.cat {
	display: grid;
	grid-template-columns: 182px 1fr;
	gap: 20px;
	align-items: center;
	padding: 20px;
	transition: border-color .2s ease;

	/* Свой оттенок стекла у каждой категории. Тон задан одним числом:
	   --tint красит саму подложку, --tint-ink — букву и рамку под курсором
	   (тот же тон, но затемнённый, иначе жёлтая буква пропала бы на белом).
	   Оттенки идут по дуге жёлтый → красный: строка «B» жёлто-янтарная,
	   строка «C»/«D» оранжево-терракотовая, строка «A»/«A1» красная. */
	--tint: 40, 40, 52;
	--tint-ink: 40, 40, 52;
	background:
		linear-gradient(152deg,
			rgba(var(--tint), .30) 0%,
			rgba(var(--tint), .11) 44%,
			rgba(var(--tint), 0) 74%),
		var(--surf);
}

.cat--b1 { --tint: 255, 206,  0; --tint-ink: 150, 116,  0; }
.cat--b2 { --tint: 255, 176, 20; --tint-ink: 150, 100, 10; }
.cat--c  { --tint: 244, 132, 36; --tint-ink: 148,  74, 20; }
.cat--d  { --tint: 226,  96, 40; --tint-ink: 140,  56, 24; }
.cat--a  { --tint: 207,  58, 49; --tint-ink: 130,  34, 28; }
.cat--a1 { --tint: 168,  42, 35; --tint-ink: 110,  26, 22; }

/* Общий курс. Дуга оттенков к этому месту дошла до красного — он замыкает
   её обратно на жёлтый. Буквы-водяного знака нет: курс не про одну категорию. */
.cat--all { --tint: 255, 224, 0; --tint-ink: 150, 120, 0; }
.cat--all .cat__media { min-height: 0; }
.cat--all .cat__pic { padding-top: 0; }

/* Общий белый блик панели поверх оттенка гасил бы его как раз там, где он
   гуще всего — для карточек делаем блик вдвое слабее */
.cat::before { background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); }

.cat:hover { border-color: rgba(var(--tint-ink), .45); }

.cat__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 150px;
}

/* Буква прижата к верху, транспорт стоит на ней снизу */
.cat__glyph {
	position: absolute;
	z-index: 1;
	top: -20px;
	left: -8px;
	font-size: clamp(96px, 11vw, 128px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.07em;
	color: rgba(var(--tint-ink), .17);
	pointer-events: none;
	user-select: none;
}

.cat__pic {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 100%;
	padding-top: 26px;
}

.cat__pic img {
	max-height: 128px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.cat__body { min-width: 0; }

/* Три кегля на всю карточку: 23 заголовок / 15 всё остальное / 25 цена */
.cat__name { font-size: 23px; margin-bottom: 2px; }

.cat__name span {
	display: block;
	font-size: 15px;
	font-weight: 400;
	color: var(--muted);
	letter-spacing: 0;
	margin-top: 4px;
}

/* Условия курса — одной живой строкой, а не таблицей */
.cat__meta {
	margin: 13px 0 14px;
	padding: 12px 0;
	border-top: 1px solid var(--surf-hair);
	border-bottom: 1px solid var(--surf-hair);
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
}

.cat__meta b { color: var(--text); font-weight: 700; }

.cat__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.cat__price { display: flex; align-items: baseline; gap: 7px; }
.cat__price b { font-size: 25px; color: var(--red); letter-spacing: -.02em; }
.cat__price small { font-size: 15px; color: var(--red); opacity: .78; }

.cat__foot .btn { margin-left: auto; font-size: 15px; padding: 11px 20px; }

/* Одинаковый для всех курсов состав вынесен из карточек под сетку */
.cats-incl {
	margin: 22px 0 0;
	text-align: center;
	font-size: 15.5px;
	color: var(--text);
}

.cats-incl b { color: var(--red); }

.cats-note { margin: 8px 0 0; font-size: 14px; color: var(--muted-2); text-align: center; }

/* --------------------------------------------------------------------------
   Преимущества — короткий список доводов и полоса снимков под ним.
   Пять доводов, пять дорожных знаков, пять кадров: блок стал вчетверо ниже
   прежней доски, но обе его мысли — «вот чем мы хороши» и «вот как это
   выглядит» — остались на месте.
   -------------------------------------------------------------------------- */
.perkbox { padding: 34px 30px 30px; }

.perks {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px 22px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.perks li {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 15.5px;
	line-height: 1.3;
	color: var(--text);
}

.perks img { flex: 0 0 auto; width: 44px; height: auto; }

/* Ряд «по ширине»: доля каждого снимка в строке равна его же соотношению
   сторон (--ar). При нулевой основе ширины выходят пропорциональны кадрам,
   высота у всех получается одна и та же, а обрезать ничего не приходится. */
.shots {
	display: flex;
	gap: 12px;
}

.shot {
	position: relative;
	flex: 1 1 0;
	flex-grow: var(--ar, 1);
	min-width: 0;
	margin: 0;
	border-radius: var(--r);
	overflow: hidden;
	transition: box-shadow .2s ease;
}

.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Единственная тень блока — и та только под курсором */
.shot:hover { box-shadow: 0 6px 18px rgba(28, 28, 38, .18); }

/* Без backdrop-filter: подложка и так почти непрозрачная (.9), а на галерее
   с десятком плиток размытие на каждой подписи - это десяток лишних
   GPU-операций на каждый кадр прокрутки, визуально почти не заметных. */
.shot figcaption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	max-width: calc(100% - 20px);
	padding: 6px 11px;
	border-radius: var(--r-s);
	border: 1px solid var(--surf-edge);
	background: rgba(255, 255, 255, .92);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--text);
}

/* --------------------------------------------------------------------------
   Этапы обучения — семь шагов, каждый со своей объёмной иконкой.
   Иконки детальные и сами по себе яркие, поэтому под ними нет ни пластин,
   ни разметки: всё, что рисуется рядом, отнимает у них внимание. Порядок
   держат номера над иконками, а ряд собирает общая нижняя линия — иконки
   разной высоты стоят на ней, как на полке.
   -------------------------------------------------------------------------- */
.flowbar {
	padding: 26px 22px 22px;
	border-radius: var(--r-l);
	border: 1px solid var(--surf-edge);
	background: var(--surf);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	box-shadow: var(--lip);
}

.flow__lead {
	max-width: 760px;
	margin: -12px auto 24px;
	text-align: center;
	font-size: 16.5px;
	line-height: 1.5;
	color: var(--muted);
}

.flow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	align-items: start;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flow__step {
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 10px;
	padding: 0 2px;
}

.flow__step > b { margin-top: 10px; }

/* Иконки нарисованы в разных пропорциях — от почти квадратных до вчетверо
   растянутых. Площадка задаёт им общую высоту и общий низ, а обе стороны
   ограничены сразу: каждая вписывается целиком и ни одна не обрезается. */
.flow__stage {
	display: grid;
	place-items: end center;
	width: 100%;
	height: 124px;
}

.flow__stage img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	position: relative;
	z-index: 0;
	object-fit: contain;
	filter: drop-shadow(0 8px 14px rgba(40, 32, 12, .22));
}

/* Подпись поверх иконки: тень от рисунка падает на 22px вниз, в зазор и
   на первую строку названия — пусть ложится под текст, а не на него. */
.flow__step b,
.flow__step small {
	position: relative;
	z-index: 1;
}

.flow__step b {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--text);
}

/* Номер стоит над иконкой, отдельной строкой: порядок читается первым,
   а рисунок остаётся открытым целиком. */
.flow__num {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--white);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.flow__step small { font-size: 13px; line-height: 1.35; color: var(--muted); }

/* Три иконки нарисованы «в полный рост» и рядом с остальными выглядели
   крупнее нужного — им отдана не вся высота площадки */
.flow__step--sm .flow__stage img { max-height: 86%; }

/* --------------------------------------------------------------------------
   Отзывы — лента карточек на scroll-snap.
   Прокрутка нативная: пальцем на телефоне, стрелками на десктопе. Ни одной
   библиотеки, а новый отзыв из админки просто дописывается в конец ленты.
   -------------------------------------------------------------------------- */
.rev__lead {
	max-width: 640px;
	margin: -12px auto 18px;
	text-align: center;
	font-size: 16.5px;
	color: var(--muted);
}

/* Ссылки на площадки и стрелки — одной строкой над лентой */
.rev__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.rev__links { display: flex; flex-wrap: wrap; gap: 10px; }
.rev__links .fa-arrow-up-right-from-square { font-size: 11px; opacity: .55; }

.rev__nav { display: flex; gap: 8px; margin-left: auto; }

.rev__arrow {
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: var(--r);
	background: rgba(255, 255, 255, .56);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	box-shadow: var(--glass-btn);
	color: var(--text);
	font-size: 15px;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s ease;
}

.rev__arrow:hover { background: rgba(255, 255, 255, .82); box-shadow: var(--glass-btn-over); color: var(--red); }
.rev__arrow[disabled] { opacity: .35; cursor: default; background: rgba(255, 255, 255, .56); box-shadow: var(--glass-btn); color: var(--text); }

.rev__track {
	/* Сколько карточек влезает в ленту. Дробное значение на узких экранах
	   оставляет край следующей торчать — сразу видно, что лента листается. */
	--rev-cols: 5;
	--rev-gap: 14px;

	display: flex;
	align-items: stretch;
	gap: var(--rev-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Полоса прокрутки тут только мешает: листают стрелками, пальцем и мышью */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.rev__track::-webkit-scrollbar { display: none; }

/* Притягивание выключено и пока тянут, и пока лента доезжает: иначе браузер
   в конце дёргал бы её к ближайшей карточке рывком, без смягчения.
   Плавную доводку делает скрипт, снап возвращается уже после остановки. */
.rev__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.rev__track.is-dragging,
.rev__track.is-settling { scroll-snap-type: none; }

/* Развернули отзыв — карточки перестают равняться по самой высокой,
   иначе вслед за одной вытянулись бы все восемь. */
.rev__track.has-open { align-items: flex-start; }

/* Картинка не должна перехватывать перетаскивание своим родным drag-n-drop */
.rev__track img { -webkit-user-drag: none; pointer-events: none; }

.rev {
	flex: 0 0 calc((100% - (var(--rev-cols) - 1) * var(--rev-gap)) / var(--rev-cols));
	/* Размытие .pane здесь не видно: сверху его целиком закрывает фото,
	   снизу — почти плотная панель текста со своим стеклом. А считалось оно
	   на каждом кадре для всех восьми карточек — отсюда и подлагивание. */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* Фото во всю ширину карточки и ровно 3:4 — пропорции исходников, кадр
   не режется вовсе. */
.rev__pic {
	position: relative;
	z-index: 3;
	aspect-ratio: 3 / 4;
	background: var(--surf-sunk);
}

.rev__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Текст наезжает на фото снизу. Верхняя кромка панели почти прозрачна и
   размывает то, что под ней, — снимок не обрывается, а уходит в матовое
   стекло. Ниже 44px фон добирает плотность, и текст читается спокойно. */
.rev__body {
	position: relative;
	z-index: 4;
	margin-top: -44px;
	padding: 20px 16px 14px;
	border-radius: var(--r-l) var(--r-l) 0 0;
	background: linear-gradient(180deg,
		rgba(255, 255, 255, .5) 0,
		rgba(255, 255, 255, .84) 30px,
		var(--surf-strong) 52px);
	backdrop-filter: saturate(170%) blur(14px);
	-webkit-backdrop-filter: saturate(170%) blur(14px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Кавычка сидит верхом на кромке текстовой панели */
.rev__quote {
	position: absolute;
	right: 14px;
	top: -18px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--flame) 0%, var(--flame-2) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 10px rgba(150, 130, 40, .3);
	color: var(--flame-ink);
	font-size: 14px;
}

.rev__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.42;
	color: var(--muted);
	/* Пять строк — ровно на превью. Раз есть «Читать полностью», держать
	   в карточке больше незачем: это только вытягивает всю ленту. */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rev.is-open .rev__text { display: block; overflow: visible; }

.rev__more {
	align-self: flex-start;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	color: var(--red);
	cursor: pointer;
	border-bottom: 1px dashed currentColor;
	transition: color .16s ease;
}

.rev__more:hover { color: var(--red-2); }
.rev__more[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Автопарк и классы — две колонки одной высоты.
   Высоту задаёт автопарк: у его плиток проставлены пропорции самих кадров,
   поэтому панорамы не режутся ни при какой ширине. Классы дотягиваются до
   этой высоты рядами в 1fr — подгонять числа вручную не приходится.
   -------------------------------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* Каждая колонка — самостоятельная стеклянная панель, как «О нас» и призыв */
.duo__col { display: flex; flex-direction: column; min-width: 0; padding: 30px; }

/* Панорамы занимают ряд целиком, кадры поспокойнее делят средний ряд */
.fleet {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.fleet__tile {
	position: relative;
	margin: 0;
	aspect-ratio: 1.5;
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--lip);
}

.fleet__tile--lead { grid-column: 1 / -1; aspect-ratio: 2.02; }
.fleet__tile--wide { grid-column: 1 / -1; aspect-ratio: 2.41; }

.fleet__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Классы: две колонки и три ряда. Ряды не равны, а соотносятся как сами
   кадры: 1.333 у кабинетов против 0.962 у медкабинета с автодромом, отсюда
   1.39fr у нижнего. При этом ряды заданы долями, поэтому сетка по-прежнему
   сама заполняет высоту колонки, а обрезка кадров выходит меньше процента. */
.rooms {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1.39fr;
	gap: 12px;
}

.room {
	position: relative;
	margin: 0;
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--lip);
}

.room img { display: block; width: 100%; height: 100%; object-fit: cover; }

.room figcaption {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 6px 11px;
	border-radius: var(--r-s);
	border: 1px solid var(--surf-edge);
	background: rgba(255, 255, 255, .92);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--text);
}

/* Галерея по филиалам (автопарк/классы): кадров у городов разное число и разные
   пропорции, поэтому вместо сетки под конкретные снимки - ряды, которые сами
   подстраиваются под --ar каждого кадра и переносятся по ширине. Обрезки нет:
   aspect-ratio плитки равен aspect-ratio самого фото. */
.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.gallery__tile {
	position: relative;
	margin: 0;
	flex: 1 1 240px;
	aspect-ratio: var(--ar, 1.33);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--lip);
}

.gallery__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gallery__tile figcaption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	max-width: calc(100% - 20px);
	padding: 7px 12px;
	border-radius: var(--r-s);
	border: 1px solid rgba(255, 255, 255, .72);
	background: rgba(255, 255, 255, .92);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--text);
}

/* Подпись по ширине текста, а не во всю плитку */
.fleet__tile figcaption {
	position: absolute;
	left: 12px;
	bottom: 12px;
	max-width: calc(100% - 24px);
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 9px;
	padding: 9px 14px;
	border-radius: var(--r-s);
	border: 1px solid rgba(255, 255, 255, .72);
	background: rgba(255, 255, 255, .92);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--text);
}

.fleet__tile figcaption span { font-size: 13.5px; font-weight: 400; color: var(--muted); }

/* --------------------------------------------------------------------------
   О школе
   -------------------------------------------------------------------------- */
/* Высоту блока задаёт вертикальный коллаж, текст центрируется по нему */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }

.about__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
}

.about__text p { margin: 0 0 16px; color: var(--muted); font-size: 16.5px; }
.about__text strong { color: var(--text); }
.about__pic { align-self: center; }
.about__pic img { width: 100%; height: auto; }

/* Врез — первый абзац крупнее и темнее остальных */
.about__text p.about__lead {
	margin-bottom: 22px;
	font-size: 19px;
	line-height: 1.5;
	color: var(--text);
}

/* Фраза вынута из того же текста: даёт паузу между врезом и колонками */
.about__quote {
	margin: 0 0 26px;
	padding: 2px 0 2px 22px;
	border-left: 3px solid var(--flame);
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ink);
}

/* Хвост текста — двумя газетными колонками: длинно, но читается быстро */
.about__cols { columns: 2; column-gap: 36px; orphans: 2; widows: 2; }
.about__cols p { margin: 0 0 15px; font-size: 16px; }
.about__cols p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Филиалы
   -------------------------------------------------------------------------- */
.branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/*
   Карточка — дом: двускатная крыша над фасадом. Высота ската задана в px,
   а не в %, иначе у карточек разной высоты уклон был бы разным. Вырез идёт
   прямо по фотографии — она и есть фасад.
*/
.branch {
	--roof: 32px;
	display: flex;
	flex-direction: column;
	background: var(--surf-strong);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	color: var(--text);
	/* clip-path режет только отрисовку: цоколь с его отрицательными полями
	   всё равно торчал бы за карточку и растягивал страницу вбок. */
	overflow: hidden;
	clip-path: polygon(0 var(--roof), 50% 0, 100% var(--roof), 100% 100%, 0 100%);
}

.branch__pic {
	width: 100%;
	height: 168px;
	object-fit: cover;
	object-position: center 38%;
}

.branch__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 18px 20px 0;
}

.branch h3 { font-size: 21px; margin-bottom: 8px; }

.branch__addr {
	display: flex;
	gap: 9px;
	margin: 0 0 8px;
	font-size: 15.5px;
	line-height: 1.35;
	color: var(--muted);
	text-decoration: none;
}

.branch__addr:hover { color: var(--text); }

.branch__tel {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 17px;
	font-weight: 700;
	color: var(--red);
}

.branch__tel:hover { color: var(--red-2); }

/* Почта тише телефона: она вторична, и адрес у Краснодона длинный —
   даём ему переноситься по символам, иначе он вылезет из карточки. */
.branch__mail {
	display: flex;
	gap: 9px;
	margin-top: 7px;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.branch__mail:hover { color: var(--red); }
.branch__addr i, .branch__tel i, .branch__mail i { font-size: 14px; margin-top: .18em; }
.branch__addr i, .branch__mail i { color: var(--muted-2); flex: 0 0 auto; }

/* Ссылка-«вход» прижата к цоколю карточки */
.branch__go {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: auto -20px 0;
	padding: 14px 20px;
	border-top: 1px solid var(--surf-hair);
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	transition: background .2s ease, color .2s ease;
}

.branch__go i { color: var(--red); transition: color .2s ease; }
.branch__go:hover { background: var(--red-soft); color: var(--red); }
.branch__go:hover i { color: var(--red); }

/* Текущий филиал: не ссылка, а отметка «вы здесь» — без отклика */
.branch__go--here,
.branch__go--here:hover {
	background: var(--red-soft);
	color: var(--red);
	font-weight: 400;
	cursor: default;
}

/* Карта Яндекса: рамку убираем, скругление даёт сама панель */
.map { margin-top: 18px; padding: 0; }
.map__frame { display: block; width: 100%; height: 380px; border: 0; }

/* --------------------------------------------------------------------------
   Призыв
   -------------------------------------------------------------------------- */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 34px 36px; }
.cta h2 { font-size: clamp(24px, 2.7vw, 32px); margin-bottom: 6px; }
.cta p { margin: 0; color: var(--muted); }
.cta__acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Подвал — зеркало шапки: тот же градиент, только развёрнутый снизу вверх
   -------------------------------------------------------------------------- */
.footer {
	margin-top: 40px;
	color: var(--hd-muted);
	font-size: 15px;
}

.footer__glass {
	position: relative;
	padding: 40px 30px 30px;
	border-radius: var(--r-l) var(--r-l) 0 0;
	background: linear-gradient(180deg, var(--hd-3) 0%, var(--hd-2) 48%, var(--hd-mid) 100%);
	backdrop-filter: var(--hd-blur);
	-webkit-backdrop-filter: var(--hd-blur);
}

/* Те же вогнутые уголки, что в шапке, только вырез смотрит вверх:
   карточка перетекает в полосу, идущую во всю ширину экрана. */
.footer__glass::before,
.footer__glass::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: var(--hd-fillet);
	height: var(--hd-fillet);
	background: var(--hd-mid);
	backdrop-filter: var(--hd-blur);
	-webkit-backdrop-filter: var(--hd-blur);
	pointer-events: none;
}

.footer__glass::before {
	left: calc(-1 * var(--hd-fillet));
	-webkit-mask: radial-gradient(circle at 0 0, transparent var(--hd-fillet), #000 0);
	        mask: radial-gradient(circle at 0 0, transparent var(--hd-fillet), #000 0);
}

.footer__glass::after {
	right: calc(-1 * var(--hd-fillet));
	-webkit-mask: radial-gradient(circle at 100% 0, transparent var(--hd-fillet), #000 0);
	        mask: radial-gradient(circle at 100% 0, transparent var(--hd-fillet), #000 0);
}

.footer a { color: var(--hd-text); transition: color .16s ease; }
.footer a:hover { color: var(--flame); }
.footer :focus-visible { outline-color: var(--flame); }

.footer__grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
	gap: 30px;
}

.footer__logo { width: auto; height: auto; max-height: 104px; margin-bottom: 18px; }
.footer h4 { color: var(--white); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 20px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer p { margin: 0 0 16px; max-width: 34ch; }

.footer__contacts li { color: var(--hd-muted); }
.footer__tel { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }

/* ВКонтакте — не строчка в списке, а жёлтая пластина с логотипом */
.footer__vk {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px 9px 13px;
	border-radius: var(--r);
	background: linear-gradient(180deg, var(--flame) 0%, var(--flame-2) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 90, 0, .18);
	transition: background .18s ease;
}

.footer a.footer__vk,
.footer a.footer__vk:hover { color: var(--flame-ink); }
.footer__vk:hover { background: linear-gradient(180deg, var(--flame-2) 0%, var(--flame) 100%); }
.footer__vk i { font-size: 23px; }
.footer__vk b { display: block; font-size: 15.5px; line-height: 1.2; letter-spacing: -.01em; }
.footer__vk small { display: block; font-size: 12.5px; line-height: 1.2; opacity: .68; }

/* Обязательные по закону ссылки: вынесены из списков и отбиты линией, но
   намеренно приглушены — они для проверяющих, а не для будущих учеников.
   Отсюда мелкий кегль, серые иконки и никакого жёлтого. */
.footer__official {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer .footer__official a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 11px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-s);
	font-size: 13px;
	font-weight: 400;
	color: #83808c;
	transition: border-color .16s ease, color .16s ease;
}

.footer .footer__official a:hover { border-color: rgba(255, 255, 255, .2); color: var(--hd-muted); }
.footer__official i { font-size: 12.5px; color: #6d6a76; }

/* Полоса заходит на карточку на пиксель. Высота карточки дробная, и при
   округлении между двумя слоями с backdrop-filter в части браузеров
   оставалась светлая волосяная щель — перекрытие её закрывает. */
.footer__legal {
	margin-top: -1px;
	background: linear-gradient(180deg, var(--hd-mid) 0%, var(--hd-1) 100%);
	backdrop-filter: var(--hd-blur);
	-webkit-backdrop-filter: var(--hd-blur);
	font-size: 13.5px;
	color: #7c7986;
}

.footer__legal-row {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Мобильное меню
   -------------------------------------------------------------------------- */
.drawer {
	position: fixed;
	inset: 8px 8px 8px auto;
	width: min(330px, 88vw);
	z-index: 400;
	transform: translateX(calc(100% + 20px));
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	padding: 16px;
	border-radius: var(--r-l);
	border: 1px solid var(--surf-edge);
	background: var(--surf-strong);
	backdrop-filter: var(--blur);
	-webkit-backdrop-filter: var(--blur);
	box-shadow: var(--lip);
	color: var(--text);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.drawer.is-open { transform: translateX(0); }

.drawer__x {
	align-self: flex-end;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: var(--r-s);
	background: rgba(255, 255, 255, .56);
	box-shadow: var(--glass-btn);
	color: var(--text);
	font-size: 19px;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}

.drawer__x:hover { background: rgba(255, 255, 255, .86); box-shadow: var(--glass-btn-over); color: var(--red); }
.drawer a { padding: 12px 10px; border-radius: var(--r-s); font-size: 17px; font-weight: 700; }
.drawer a:hover { background: var(--surf-sunk); color: var(--red); }
.drawer__foot { margin-top: auto; padding: 16px 10px 4px; font-size: 15px; color: var(--muted); }
.drawer__foot a { font-size: 15px; padding: 0; }

/* Гнездо для переключателя города — низ меню, по центру */
.drawer__city {
	display: flex;
	justify-content: center;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--surf-hair);
}

.drawer__city:empty { display: none; }
.drawer__city .city { width: 100%; }
.drawer__city .city__btn { width: 100%; justify-content: center; }

/* Список разворачивается вверх: внизу ящика для него нет места */
.drawer__city .city__menu {
	top: auto;
	bottom: calc(100% + 10px);
	left: 0;
	right: 0;
	min-width: 0;
}

.drawer .city__menu a { padding: 10px 12px; font-size: 15px; font-weight: 400; }
.drawer .city__menu a:hover { color: var(--text); }

.scrim {
	position: fixed;
	inset: 0;
	z-index: 350;
	background: rgba(30, 30, 40, .42);
	backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
}

.scrim.is-open { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   Лайтбокс — свой, на чистом JS: библиотека из проекта тянет за собой jQuery
   -------------------------------------------------------------------------- */
[data-zoom] { cursor: zoom-in; }
[data-zoom]:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.lbox {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: grid;
	place-items: center;
	padding: 26px;
	background: rgba(22, 22, 30, .62);
	backdrop-filter: saturate(120%) blur(14px);
	-webkit-backdrop-filter: saturate(120%) blur(14px);
	opacity: 0;
	transition: opacity .22s ease;
}

.lbox[hidden] { display: none; }
.lbox.is-open { opacity: 1; }

.lbox__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0;
	max-width: 100%;
}

.lbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(1160px, 92vw);
	max-height: 80vh;
	border-radius: var(--r);
	border: 1px solid rgba(255, 255, 255, .24);
	background: #fff;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

.lbox__cap {
	padding: 8px 16px;
	border-radius: var(--r-s);
	border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-align: center;
}

.lbox__cap:empty { display: none; }

.lbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: var(--r);
	background: rgba(255, 255, 255, .14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.lbox__btn:hover {
	background: var(--flame);
	border-color: var(--flame);
	color: var(--flame-ink);
}

.lbox__close { top: 22px; right: 22px; }
.lbox__nav--prev { left: 22px;  top: 50%; margin-top: -23px; }
.lbox__nav--next { right: 22px; top: 50%; margin-top: -23px; }

/* Одиночное фото — листать нечего */
.lbox--single .lbox__nav { display: none; }

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
	.city-hint { display: none; }
}

@media (max-width: 1140px) {
	.cats { grid-template-columns: 1fr; }
}

/* Логотипу перестаёт хватать середины — телефон спускается в служебную
   полосу. График там уже не помещается, он остаётся в контактах подвала. */
@media (max-width: 1000px) {
	.mast-tel { display: none; }
	.topbar__cell--phone { display: flex; }
}

@media (max-width: 1080px) {
	/* Карточек в ленте становится меньше — сами они шире и ниже */
	.rev__track { --rev-cols: 4; }

	/* Колонка вдвое шире — скат поднимаем, чтобы уклон остался прежним */
	.branches { grid-template-columns: repeat(2, 1fr); }
	.branch { --roof: 52px; }
	.branch__pic { height: 182px; }
	.about { grid-template-columns: 1fr; }
	.about__pic { width: min(300px, 78%); margin: 0 auto; padding: 0 0 34px; }
	.footer__grid { grid-template-columns: 1fr 1fr; }

	/* Колонки рядом больше не помещаются — блоки встают друг под друга.
	   Во всю ширину панорама в ряд целиком была бы вдвое выше остального,
	   поэтому автопарк переходит в ровный квадрат 2×2. */
	.duo { grid-template-columns: 1fr; gap: 36px; }
	.fleet__tile { aspect-ratio: 1.85; }
	.fleet__tile--lead,
	.fleet__tile--wide { grid-column: auto; aspect-ratio: 1.85; }

	/* Классам сетка уже не по размеру: раскладываем колонками, тогда кадры
	   разных пропорций встают друг под друга и ничего не обрезается. */
	.rooms { display: block; columns: 3; column-gap: 12px; }
	.room { break-inside: avoid; margin-bottom: 12px; }
	.room img { height: auto; }

	/* Мозаика в узкой колонке разваливается — раскладываем колонками,
	   кадры встают по своим пропорциям и не обрезаются вовсе. */
	.shots { gap: 10px; }
	.perks { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.rev__track { --rev-cols: 3; }

	:root { --tb-h: 40px; }

	/* Навигация в ряд уже не помещается — уходит в бургер */
	.mast-b { display: none; }
	.burger { display: inline-grid; place-items: center; }

	/* Ярус остался один — разделять нечего */
	.mast-a::after { display: none; }

	/* Полоса с адресом и телефоном сворачивается при прокрутке вниз и
	   выезжает обратно при прокрутке вверх. Сдвигаем шапку целиком через
	   transform: раскладка при этом не меняется и страница не дёргается. */
	.masthead { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
	.masthead.is-up { transform: translateY(var(--tb-h)); }

	/* Полоса вернулась — вернулись и уголки стыка */
	.masthead.is-stuck.is-up .masthead__glass::before,
	.masthead.is-stuck.is-up .masthead__glass::after { opacity: 1; }

	/* Логотип держится середины свободного места: когда бок слева шире правого,
	   он сам уезжает вправо, вместо того чтобы сжиматься. */
	.mast-a { display: flex; justify-content: space-between; padding: 10px 12px; gap: 10px; }
	.mast-a__side { flex: 0 0 auto; }
	.masthead__logo { margin: 0 auto; min-width: 0; }
	/* Здесь потолок задаёт бургер: у кнопки города пропала вторая строка */
	.masthead__logo img { max-height: 44px; }
	.city__txt small { display: none; }
	.section { padding: 44px 0; }

	/* Семь шагов в ряд перестают помещаться — перекладываем их в два ряда */
	.flow { grid-template-columns: repeat(4, 1fr); gap: 26px 10px; }
	.intro { padding: 44px 0 34px; }
	.about__text { padding: 24px; }
	.cta { padding: 26px 22px; }
	.perkbox { padding: 26px 20px 22px; }
	.duo__col { padding: 22px 20px; }

	/* Плитки мельчают — подпись обязана ужаться до одной строки */
	.fleet__tile figcaption,
	.room figcaption {
		left: 8px;
		bottom: 8px;
		max-width: calc(100% - 16px);
		gap: 2px 7px;
		padding: 6px 10px;
		font-size: 13.5px;
	}
	.fleet__tile figcaption span { font-size: 12px; }

	.perks { grid-template-columns: repeat(2, 1fr); }
	.perks img { width: 38px; }
	/* Два снимка в строку, третий под ними во всю ширину */
	.shots { flex-wrap: wrap; }
	.shot { flex-basis: calc(50% - 6px); }

	/* Листают пальцем — стрелки лишние, ссылки занимают строку целиком */
	.rev__nav { display: none; }
	.rev__links { width: 100%; }
	.rev__links .btn { flex: 1 1 240px; }
}

@media (max-width: 760px) {
	/* Дробное значение оставляет край следующей карточки торчать */
	.rev__track { --rev-cols: 2.2; }

	.mast-a__side--end .btn { display: none; }
	.topbar__cell--lider { display: none; }

	.rooms { columns: 2; }

	/* Заголовок занимает всю ширину — конусам встать негде */
	.intro__cone { display: none; }

	/* На узком экране колонки становятся слишком тесными для строки */
	.about__cols { columns: 1; }
	.about__text p.about__lead { font-size: 17.5px; }
	.about__quote { font-size: 18px; padding-left: 16px; }
}

@media (max-width: 620px) {
	/* В полосе остаются адрес слева и телефон справа */
	.topbar__cell--mail { display: none; }
	.topbar__cell { padding: 7px 8px; }
	.topbar__row { padding-left: 22px; padding-right: 22px; }

	.cat { grid-template-columns: 1fr; gap: 14px; }
	.cat__media { min-height: 128px; }

	/* Буква уходит в левый верхний угол карточки, транспорт встаёт поверх неё */
	.cat__glyph { top: -12px; left: -6px; bottom: auto; transform: none; font-size: 88px; }

	/* Цена и кнопка держатся одной строкой: перенос съедал бы целый экран */
	.cat__foot { flex-wrap: nowrap; gap: 10px; }
	.cat__price { min-width: 0; white-space: nowrap; }
	.cat__foot .btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
}

@media (max-width: 620px) {
	.flow { grid-template-columns: repeat(2, 1fr); }
	.flowbar { padding: 22px 16px 18px; }
}

@media (max-width: 560px) {
	.rev__track { --rev-cols: 1.15; }
	.rev__text { font-size: 14px; }

	.branches, .footer__grid { grid-template-columns: 1fr; }
	.masthead__logo img { max-height: 40px; }
	.topbar { font-size: 13.5px; }

	/* Адрес и телефон в одну строку уже не помещаются — ставим их друг
	   под друга, полоса становится двухстрочной. */
	:root { --tb-h: 58px; }
	.topbar__row { flex-direction: column; justify-content: center; align-items: stretch; gap: 0; }
	.topbar__cell { padding: 3px 8px; }
	.topbar__cell--lider { margin-left: 0; }
	.footer__glass { padding: 30px 20px 24px; }

	/* Ужимаем обе половины строки, чтобы кнопка гарантированно осталась рядом с ценой */
	.cat { padding: 16px; }
	.cat__foot { gap: 8px; }
	.cat__price { gap: 5px; }
	.cat__price b { font-size: 20px; }
	.cat__price small { font-size: 13px; }
	.cat__foot .btn { padding: 10px 14px; font-size: 14px; }

	/* Одна колонка: кадры перестают резаться в квадрат, подпись занимает край */
	.fleet { grid-template-columns: 1fr; }
	.fleet__tile,
	.fleet__tile--lead,
	.fleet__tile--wide { aspect-ratio: 1.8; }

	.perks { grid-template-columns: 1fr; gap: 13px; }
	.perkbox { padding: 22px 16px 18px; }
	.duo__col { padding: 20px 16px; }

	.lbox { padding: 14px; }
	.lbox__btn { width: 40px; height: 40px; font-size: 16px; }
	.lbox__close { top: 14px; right: 14px; }
	.lbox__nav--prev { left: 10px;  margin-top: -20px; }
	.lbox__nav--next { right: 10px; margin-top: -20px; }
	.lbox__img { max-height: 70vh; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pane, .city__menu, .drawer, .flowbar, .branch { background: #f0f0f3; }
	.fleet__tile figcaption, .room figcaption { background: rgba(255, 255, 255, .95); }
	/* Без размытия полупрозрачные шапка и подвал станут мутными — делаем их плотными */
	.topbar { background: linear-gradient(180deg, #0b0b0e 0%, #14141a 100%); }
	.masthead__glass { background: linear-gradient(180deg, #14141a 0%, #1c1c23 52%, #0f0f14 100%); }
	.footer__glass { background: linear-gradient(180deg, #0f0f14 0%, #1c1c23 48%, #14141a 100%); }
	.footer__legal { background: linear-gradient(180deg, #14141a 0%, #0b0b0e 100%); }
	.masthead__glass::before, .masthead__glass::after,
	.footer__glass::before, .footer__glass::after { background: #14141a; }
	.masthead .city__menu { background: #1a1a21; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ==========================================================================
   Простые внутренние страницы (автодром, документы, faq и т.п.) - Фаза 6.
   Не главная, поэтому без претензий: тот же каркас пластин/цветов/шрифта,
   без Bootstrap и jQuery, качество можно будет поднять позже.
   ========================================================================== */
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--text); }

.simple-page { padding: 28px clamp(16px, 4vw, 40px); }
.simple-page h1 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 20px; }
.simple-page p { line-height: 1.6; margin: 0 0 14px; }
.simple-page ul { margin: 0 0 14px; padding-left: 22px; line-height: 1.6; }
.simple-page ul ul { margin-top: 6px; margin-bottom: 6px; }
.simple-page h2 { font-size: 20px; margin: 24px 0 10px; }

.simple-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.simple-gallery figure {
	position: relative;
	margin: 0;
	flex: 1 1 260px;
	aspect-ratio: var(--ar, 1.33);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--lip);
}
.simple-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }

.app-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.app-links__item { flex: 1 1 200px; text-align: center; }
.app-links__item img { height: 44px; width: auto; margin-bottom: 10px; }