/* ===== Токены ===== */
:root {
  --black: #000;
  --stage: #0B0B0B;      /* фон фотостудии на снимке машины */
  --panel: #0E0E0E;      /* карточки и форма */
  --text: #F2F2F0;
  --muted: #9C9C9A;
  --line: rgb(255 255 255 / .1);
  --line-strong: rgb(255 255 255 / .24);
  --led: #EEF4FF;        /* свет студийных ламп — единственный «акцент» */
  --error: #FF8A73;

  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --glow: 0 0 18px rgb(238 244 255 / .45);
  --gutter: clamp(16px, 3.2vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
::selection { background: var(--text); color: var(--black); }
:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; border-radius: 2px; }

/* ===== Кнопки и ссылки ===== */
/* Кнопка-«таблетка»: при наведении загорается белым и переливается, как полированный металл */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 32px;
  background: var(--text); color: var(--black);
  border: 1px solid var(--text); border-radius: 999px;
  font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: box-shadow .35s, border-color .35s, color .2s, transform .1s;
}
/* переливающийся слой */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: 0;
  background: linear-gradient(110deg, #ffffff 0%, #dfe6f0 22%, #ffffff 40%, #c9d3e1 52%, #ffffff 64%, #e8edf4 82%, #ffffff 100%);
  background-size: 250% 100%;
  transition: opacity .35s;
}
/* мелкая точечная текстура, как на образце */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background-image: radial-gradient(rgb(0 0 0 / .14) .7px, transparent .8px);
  background-size: 4px 4px;
  transition: opacity .35s;
}
.btn:hover, .btn:focus-visible {
  color: var(--black); border-color: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .9), 0 0 22px rgb(255 255 255 / .55), 0 0 60px rgb(200 220 255 / .3);
}
.btn:hover::before, .btn:focus-visible::before { opacity: 1; animation: shimmer 2.4s linear infinite; }
.btn:hover::after, .btn:focus-visible::after { opacity: .5; }
.btn:active { transform: scale(.98); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.btn--outline { background: transparent; color: var(--text); border-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .btn:hover::before, .btn:focus-visible::before { animation: none; } }
/* Подчёркивание, которое «загорается» при наведении */
.link, .nav a {
  position: relative; text-decoration: none;
  transition: color .2s, text-shadow .2s;
}
.link::after, .nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--led); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease, box-shadow .3s;
}
.link:hover, .nav a:hover, .nav a:focus-visible { color: #fff; text-shadow: var(--glow); }
.link:hover::after, .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); box-shadow: 0 0 10px var(--led); }

.link { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; padding: 6px 0; }
.link::after { transform: scaleX(.35); background: rgb(238 244 255 / .6); bottom: 0; }
.link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s; }
.link:hover svg { transform: translateY(3px); }

/* ===== Шапка ===== */
.header {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; gap: 40px;
  padding: 20px var(--gutter);
  transition: background .25s, border-color .25s, padding .25s;
  border-bottom: 1px solid transparent;
}
/* мягкое затемнение под шапкой: неоновые линии уходят в темноту и не пересекают логотип */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / .7) 0%, rgb(0 0 0 / .35) 60%, transparent 100%);
  transition: opacity .25s;
}
.header.is-scrolled::before { opacity: 0; }
.header.is-scrolled { background: rgb(0 0 0 / .82); backdrop-filter: blur(12px); border-color: var(--line); padding-block: 14px; }
/* Логотип: серебристое название с бликом, светящаяся «лампа» слева и подпись */
.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.logo__lamp {
  width: 4px; height: 34px; border-radius: 2px; background: var(--led);
  box-shadow: 0 0 8px rgb(238 244 255 / .9), 0 0 22px rgb(238 244 255 / .45);
}
.logo__text { display: grid; gap: 3px; line-height: 1; }
.logo__name {
  font-size: 27px; font-weight: 800; letter-spacing: .3em; margin-right: -.3em;
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 35%, #9ea4ab 50%, #ffffff 65%, #ffffff 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1.2s ease;
}
.logo:hover .logo__name { background-position: -50% 0; }
.logo__sub { font-size: 10.5px; font-weight: 600; letter-spacing: .32em; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .logo__name { transition: none; } }
.nav { display: flex; gap: 32px; margin-left: auto; }
.nav a { font-size: 15px; font-weight: 500; color: #B4B4B2; }
.header__phone { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: text-shadow .2s; }
.header__phone:hover { text-shadow: var(--glow); }
.burger { display: none; }

/* ===== Первый экран ===== */
.hero {
  /* --hero-h ставит скрипт один раз: во встроенных браузерах приложений высота экрана
     меняется при прокрутке (прячется панель), и фото у нижнего края прыгало */
  position: relative; min-height: var(--hero-h, 100svh); overflow: hidden;
  display: flex; align-items: center;
  padding: 110px var(--gutter) 72px;
}
.hero { isolation: isolate; }
.hero__light { position: absolute; inset: 0; }
/* Машина в боксе стоит перед лампами: неоновые линии на стенах уходят за кузов.
   Края фото растворяются в темноте сцены, поэтому рамки кадра не видно. */
.hero__photo {
  position: absolute; z-index: 1; right: 0; bottom: 0;
  width: min(56vw, 820px); height: 100%;
  pointer-events: none;
  /* у фото с мокрым BMW фон светлее чёрного, поэтому к радиальной маске добавлено затухание слева */
  -webkit-mask: radial-gradient(ellipse 82% 80% at 62% 60%, #000 52%, transparent 86%), linear-gradient(90deg, transparent 0, #000 32%);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(ellipse 82% 80% at 62% 60%, #000 52%, transparent 86%), linear-gradient(90deg, transparent 0, #000 32%);
  mask-composite: intersect;
}
.hero__photo picture { display: block; width: 100%; height: 100%; }
.hero__photo img, .hero__photo video {
  /* перед BMW правее середины кадра: на широких экранах обе фары остаются в кадре */
  width: 100%; height: 100%; object-fit: cover; object-position: 64% 58%;
  opacity: 0; animation: photo-in 1.8s cubic-bezier(.2, .7, .2, 1) 1.2s forwards;
}
@keyframes photo-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.hero__copy { z-index: 2; }
.hero__light svg { width: 100%; height: 100%; display: block; }
.led polyline, .led line { fill: none; stroke: var(--led); stroke-width: 6; stroke-linejoin: round; }
.led--core polyline { stroke-width: 2.5; }
.led--faint { stroke-width: 1 !important; opacity: .28; }

/* Единственная анимация на странице: лампы «зажигаются» при загрузке */
.led polyline, .led--faint {
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: draw 1.8s cubic-bezier(.6, 0, .2, 1) .2s forwards;
}
.led--faint { animation-delay: .7s; }
/* левая неоновая полоса зажигается сразу за правой */
.led .led-left { animation-delay: .6s; }
/* Надписи первого экрана проявляются по очереди:
   слова заголовка всплывают из лёгкого размытия, затем абзац, затем кнопки */
.hero h1 .w {
  display: inline-block;
  opacity: 0; transform: translateY(.32em); filter: blur(10px);
  animation: word-in .9s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(.45s + var(--i) * .09s);
}
.hero__lead { opacity: 0; animation: rise 1s cubic-bezier(.2, .7, .2, 1) 1.15s forwards; }
.hero__actions { opacity: 0; animation: rise 1s cubic-bezier(.2, .7, .2, 1) 1.4s forwards; }
@keyframes word-in { to { opacity: 1; transform: none; filter: blur(0); } }
/* анимация закончилась (класс ставит скрипт) — слова становятся обычным текстом без фильтра и слоёв */
.hero h1.is-in .w { animation: none; opacity: 1; transform: none; filter: none; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .led polyline, .led--faint { animation: none; stroke-dashoffset: 0; }
  .hero h1 .w, .hero__lead, .hero__actions, .hero__photo img { animation: none; opacity: 1; transform: none; filter: none; }
}

.hero__copy { position: relative; max-width: 900px; }
.hero h1 {
  font-size: clamp(44px, 6.2vw, 100px);
  font-weight: 700; line-height: .98; letter-spacing: -0.045em;
  max-width: 14ch;
}
.hero__lead { margin-top: 26px; max-width: 54ch; font-size: clamp(17px, 1.4vw, 19px); color: #B8B8B6; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 40px; }

/* ===== Полоса фактов под первым экраном ===== */
.facts { padding: 0 var(--gutter); }
/* Kustov: по макету Олега — одна скруглённая панель, у каждого факта значок в тёмном квадрате */
.facts__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px clamp(16px, 2.4vw, 40px);
  padding: clamp(22px, 2.6vw, 36px); border-radius: 22px;
  background: var(--panel); border: 1px solid var(--line);
}
.fact { display: grid; align-content: start; gap: 8px; padding: 6px 0; }
.fact__ico {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px;
  border-radius: 14px; background: rgb(255 255 255 / .09);
}
.fact__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fact b { font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.fact span { font-size: 14px; line-height: 1.45; color: var(--muted); max-width: 26ch; }

/* ===== Обёртка раздела (без рамки) ===== */
.frame { position: relative; }

/* ===== Машина в профиль ===== */
/* Машина — сцена во всю ширину экрана: заголовок по центру над ней, пол от края до края */
#car { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.car__head { text-align: center; display: grid; justify-items: center; gap: 18px; padding: 0 var(--gutter); }
.car__head h2 { max-width: 18ch; }
.car__head p { color: var(--muted); max-width: 58ch; }
.car__head p.car__note { color: var(--text); font-weight: 600; margin-top: -4px; }
.car__stage { position: relative; margin-top: clamp(8px, 1.5vw, 24px); overflow: hidden; }
.car__img { display: block; width: 100%; height: auto; }
/* сверху фон фотостудии плавно уходит в чёрный, снизу пол — в следующий раздел */
.car__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--black) 0%, transparent 22%, transparent 80%, var(--black) 100%);
}

/* Заголовки разделов */
.car__head h2, .section__head h2, .prices__head h2, .booking h2 {
  font-size: clamp(34px, 4.4vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -0.04em;
}
/* ===== Разделы ===== */
.section { padding: clamp(40px, 5vw, 80px) var(--gutter); }
.facts + .section { padding-top: clamp(32px, 4vw, 56px); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }

/* ===== Переливающаяся белая рамка ===== */
/* Рамка подсвечивается там, где курсор: участок кромки загорается белым,
   внутрь падает мягкое пятно света, наружу — слабое свечение.
   Координаты --mx/--my задаёт скрипт; без мыши (телефон) остаётся спокойная тонкая рамка. */
.glow-frame {
  --mx: -999px; --my: -999px;
  position: relative; isolation: isolate;
  border: 1px solid rgb(255 255 255 / .1);
}
/* загорающийся участок кромки */
.glow-frame::after {
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgb(255 255 255 / .95), rgb(255 255 255 / .35) 35%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgb(255 255 255 / .55));
}
/* пятно света внутри карточки — только под курсором */
.glow-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(255 255 255 / .08), transparent 60%);
}
.glow-frame:hover::before { opacity: 1; }

/* ===== Бегущая белая рамка (карточки услуг) ===== */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.run-frame { position: relative; isolation: isolate; }
.run-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--spin),
    rgb(255 255 255 / .08) 0deg, rgb(255 255 255 / .95) 40deg, rgb(255 255 255 / .08) 95deg,
    rgb(255 255 255 / .08) 180deg, rgb(255 255 255 / .7) 225deg, rgb(255 255 255 / .08) 280deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 6s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .run-frame:hover::after { animation-duration: 2.5s; filter: drop-shadow(0 0 6px rgb(255 255 255 / .7)); }
}
/* соседние карточки стартуют с разных точек — волны не идут строем */
.run-frame:nth-child(2n)::after { animation-delay: -2s; }
.run-frame:nth-child(3n)::after { animation-delay: -4s; }
@keyframes spin-border { to { --spin: 360deg; } }
/* карусель ушла с экрана — рамки не крутим (класс ставит скрипт) */
.carousel.is-offscreen .run-frame::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .run-frame::after { animation: none; } }

/* ===== Карусель услуг ===== */
.section__head p { color: var(--muted); max-width: 46ch; }
.carousel { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.carousel__track {
  list-style: none; margin: 0; padding: 8px var(--gutter) 12px;
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scroll-behavior: smooth; scrollbar-width: none;
  cursor: grab; user-select: none;
}
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carousel__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel__track { scroll-behavior: auto; } }

/* крупные стрелки по бокам карусели */
.carousel__btn {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(255 255 255 / .92); color: #000; border: 0; cursor: pointer;
  box-shadow: 0 8px 30px rgb(0 0 0 / .5);
  transition: opacity .25s, transform .2s, box-shadow .25s;
}
.carousel__btn--prev { left: calc(var(--gutter) - 14px); }
.carousel__btn--next { right: calc(var(--gutter) - 14px); }
.carousel__btn:hover { box-shadow: 0 0 0 1px #fff, 0 0 26px rgb(255 255 255 / .55); }
.carousel__btn:active { transform: translateY(-50%) scale(.94); }
.carousel__btn:disabled { opacity: 0; pointer-events: none; }
.carousel__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* точки: где мы в карусели, по ним тоже можно листать */
.carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.carousel__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: rgb(255 255 255 / .28); transition: width .3s, background .3s;
}
.carousel__dots button[aria-current="true"] { width: 28px; background: #fff; }

.tile {
  flex: 0 0 clamp(280px, 30vw, 380px);
  aspect-ratio: 3 / 4.2;
  scroll-snap-align: start;
  border-radius: 22px;
  background-color: #0d0d0d;
  perspective: 1600px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.tile:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .12); }

/* Карточка переворачивается: спереди фото и цена, сзади — что входит в услугу */
.tile__inner {
  position: relative; height: 100%; border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2, .75, .2, 1);
}
.tile.is-flipped .tile__inner { transform: rotateY(180deg); }
.tile__face {
  position: absolute; inset: 0; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 30px 28px 26px; border-radius: inherit; color: #fff;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.tile__back { transform: rotateY(180deg); }
/* clip, а не hidden: фокус на кнопке не может «прокрутить» оборот и сдвинуть текст */
.tile__face { overflow: clip; }
.tile__front, .tile__back { cursor: pointer; }
.tile__front { text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
/* затемнение сверху и снизу держит текст читаемым на любом фото */
.tile__front::before, .tile__back::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.tile__front::before { background: linear-gradient(180deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .35) 34%, rgb(0 0 0 / 0) 52%, rgb(0 0 0 / 0) 60%, rgb(0 0 0 / .8) 100%); }
.tile__back::before { background: radial-gradient(120% 70% at 50% 0%, rgb(255 255 255 / .07), transparent 60%); }
.tile__photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.tile__tag { font-size: 15px; font-weight: 600; opacity: .9; }
.tile__title { margin-top: 14px; font-size: clamp(25px, 2.3vw, 31px); font-weight: 700; line-height: 1.16; letter-spacing: -0.02em; max-width: 13ch; }
.tile__foot { margin-top: auto; position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tile__foot p { display: grid; gap: 2px; }
.tile__foot b { font-size: 18px; font-weight: 600; white-space: nowrap; }
.tile__foot span { font-size: 14px; opacity: .7; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }
.tile__more { flex: none; text-shadow: none; }

.nowrap { white-space: nowrap; }
.tile__about { margin-top: 14px; font-size: 16px; line-height: 1.5; color: #EDEDEB; }
.tile__list {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid rgb(255 255 255 / .16);
  display: grid; gap: 10px; font-size: 14px; line-height: 1.4; color: #D2D2D0;
}
.tile__list li { position: relative; padding-left: 24px; }
.tile__list li::before {
  content: ""; position: absolute; left: 2px; top: .38em; width: 11px; height: 6px;
  border-left: 1.6px solid var(--led); border-bottom: 1.6px solid var(--led);
  transform: rotate(-45deg);
}
/* цена и срок крупно над кнопкой — только на широкой карточке */
.tile__facts {
  margin: auto 0 0; padding-top: 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.tile__facts div { padding: 14px 16px; border-radius: 14px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); }
.tile__facts dt { font-size: 12px; color: rgb(255 255 255 / .6); }
.tile__facts dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.tile__facts + .tile__actions { margin-top: 0; }
.tile__tag-price { display: none; } /* цена уже есть в блоке выше */
.tile__actions { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 10px; }
.tile__actions .btn { flex: 1; }
/* узкая карточка (телефон): кнопка уходит под цену во всю ширину */
.tile { container-type: inline-size; }
@container (max-width: 330px) {
  .tile__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  /* оборот узкой карточки: всё компактнее, чтобы влезло без прокрутки */
  .tile__back { padding: 22px 20px 20px; }
  .tile__back .tile__tag { font-size: 13px; }
  .tile__about { margin-top: 10px; font-size: 14.5px; line-height: 1.45; }
  .tile__list { margin-top: 14px; padding-top: 12px; gap: 7px; font-size: 13px; }
  .tile__actions { padding-top: 12px; }
  /* блок «Цена / Срок» сюда не влезает — цена переезжает в подпись */
  .tile__facts { display: none; }
  .tile__facts + .tile__actions { margin-top: auto; }
  .tile__tag-price { display: inline; }
}
/* оборот широкой карточки: крупнее, без пустоты внизу */
@container (min-width: 360px) {
  .tile__back { padding: 32px 28px 26px; }
  .tile__about { margin-top: 16px; font-size: 17.5px; line-height: 1.45; }
  .tile__list { margin-top: 20px; padding-top: 18px; gap: 12px; font-size: 15px; }
  .tile__actions .btn { min-height: 48px; }
}
/* Цвет-подложка, пока фото не загрузилось или его ещё нет */
.tile--polish   .tile__front { background-color: #141414; }
.tile--ceramic  .tile__front { background-color: #3d4146; }
.tile--film     .tile__front { background-color: #24456f; }
.tile--lights   .tile__front { background-color: #1a1f27; }
.tile--wheels   .tile__front { background-color: #2a2a2a; }
.tile--interior .tile__front { background-color: #3a271c; }
.tile__back { background-color: #0d0d0d; }
@media (prefers-reduced-motion: reduce) { .tile, .tile__inner { transition: none; } }

/* Пакеты */
.prices__head { text-align: center; display: grid; justify-items: center; gap: 18px; margin-bottom: 52px; }
.prices__head p { max-width: 56ch; color: var(--muted); }
.size-toggle { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 15px; font-weight: 500; }
.size-toggle__label { color: var(--muted); transition: color .15s; }
.size-toggle__label.is-on { color: var(--text); }
.switch {
  position: relative; width: 48px; height: 26px; border-radius: 13px;
  background: rgb(255 255 255 / .14); border: 0; cursor: pointer; padding: 0;
}
.switch span {
  position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text); transition: transform .2s ease;
}
.switch[aria-checked="true"] span { transform: translateX(22px); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 36px; border-radius: 22px;
  background: var(--panel); border: 1px solid var(--line);
}
.plan--main { background: var(--black); border-color: var(--line-strong); }
.plan__badge {
  position: absolute; top: 28px; right: 28px;
  padding: 4px 10px; border-radius: 20px;
  background: var(--text); color: var(--black); font-size: 12px; font-weight: 700;
}
.plan h3 { font-size: 22px; font-weight: 600; }
.plan__for { margin-top: 8px; font-size: 15px; color: var(--muted); min-height: 3.1em; }
.plan__price { margin: 26px 0 26px; font-size: 18px; color: var(--muted); }
.plan__price b { font-size: 44px; font-weight: 400; letter-spacing: -0.04em; color: var(--text); }
.plan .btn { width: 100%; min-height: 46px; font-size: 15px; }
.plan__list { list-style: none; margin: 28px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; font-size: 15px; color: #CFCFCD; }
.plan__list li { position: relative; padding-left: 28px; }
.plan__list li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px;
  border-left: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(-45deg);
}
.plan--main .plan__list li::before { border-color: var(--text); }
.prices__note { margin-top: 36px; text-align: center; font-size: 15px; color: var(--muted); }

/* Запись */
.booking { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px, 6vw, 96px); }
.booking__lead { margin-top: 16px; max-width: 54ch; color: var(--muted); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.field { display: grid; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.field--wide { grid-column: 1 / -1; }
.field input {
  width: 100%; min-height: 52px; padding: 0 16px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 6px;
  font: 400 16px var(--font);
}
.field input::placeholder { color: #6E6E6C; }
/* ===== Красивые выпадающие списки ===== */
.dd__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd { position: relative; }
.dd__btn {
  width: 100%; min-height: 52px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); color: var(--text); text-align: left;
  border: 1px solid var(--line-strong); border-radius: 10px;
  font: 400 16px var(--font); cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.dd__btn:hover { border-color: rgb(255 255 255 / .45); background: #121212; }
.dd__btn:focus-visible, .dd.is-open .dd__btn { outline: none; border-color: var(--led); box-shadow: 0 0 0 3px rgb(238 244 255 / .1); }
.dd.is-empty .dd__value { color: #8A8A88; }
.dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__chev { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.dd.is-open .dd__chev { transform: rotate(180deg); }

.dd__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  padding: 8px;
  background: rgb(18 18 18 / .96); backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / .14); border-radius: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / .7), 0 0 0 1px rgb(0 0 0 / .6);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center;
  transition: opacity .18s ease, transform .18s ease;
}
.dd.is-up .dd__panel { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; transform: translateY(6px) scale(.98); }
.dd.is-open .dd__panel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dd__panel, .dd__chev { transition: none; } }

.dd__search {
  width: 100%; height: 42px; margin-bottom: 6px; padding: 0 12px 0 38px;
  background: #0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9C9A' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 12px center / 17px;
  color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  font: 400 15px var(--font);
}
.dd__search:focus-visible { outline: none; border-color: rgb(255 255 255 / .35); }
.dd__search::placeholder { color: #6E6E6C; }

.dd__list {
  list-style: none; margin: 0; padding: 0;
  max-height: 300px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 2px;
  scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .2) transparent;
}
.dd__list:focus { outline: none; }
.dd__group {
  grid-column: 1 / -1;
  padding: 12px 12px 6px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.dd__group:first-child { padding-top: 6px; }
.dd__opt {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 9px 12px; border-radius: 8px;
  font-size: 15px; line-height: 1.3; color: #DDDDDB; cursor: pointer;
  transition: background .12s, color .12s;
}
.dd__opt[hidden] { display: none; }
.dd__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dd__meta { flex: none; font-size: 13px; color: var(--muted); white-space: nowrap; }
.dd__check { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.dd__opt.is-active { background: rgb(255 255 255 / .08); color: #fff; }
.dd__opt[aria-selected="true"] { color: #fff; font-weight: 600; }
.dd__opt[aria-selected="true"] .dd__check { opacity: 1; }
.dd__list.is-filtered .dd__group { display: none; }.field input:focus-visible { outline: none; border-color: var(--led); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--text); }
.form__error { color: var(--error); font-size: 15px; font-weight: 600; }
.form__submit { justify-self: start; }
.form__ok { padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 15px; }
/* Kustov: поле-ловушка для роботов уведено за экран; кнопка во время отправки */
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__submit:disabled { opacity: .6; cursor: progress; }

/* Карточка «Град»: вместо списка — абзац, с той же линией сверху и отступами, что у списка */
.plan__note { margin: 28px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: #CFCFCD; }

/* Обучение PDR: текст и фото рядом, на телефоне фото сверху */
.train {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(24px, 4vw, 56px); border-radius: 22px;
  background: var(--panel); border: 1px solid var(--line);
}
.train__kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.train h2 { font-size: clamp(34px, 4.4vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.train__text p:not(.train__kicker) { margin-top: 18px; color: var(--muted); max-width: 52ch; }
.train .btn { margin-top: 30px; }
.train__photo { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.train__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .train { grid-template-columns: 1fr; }
  .train__photo { order: -1; }
  .train .btn { width: 100%; }
}

/* Уведомление о cookie: плашка внизу во всю ширину */
.cookies {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  padding: 18px var(--gutter);
  background: rgb(14 14 14 / .96); border-top: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cookies[hidden] { display: none; }
.cookies p { flex: 1 1 420px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.cookies a { color: var(--text); }
.cookies__btns { display: flex; gap: 10px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .cookies__btns { flex: 1 1 100%; }
  .cookies__btns .btn { flex: 1; }
}

.contacts dl { margin: 0; border-top: 1px solid var(--line); }
.contacts dl div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.contacts dt { font-size: 14px; color: var(--muted); }
.contacts dd { margin: 4px 0 0; font-size: 20px; font-weight: 500; }

/* Мессенджеры: две кнопки-«таблетки» */
.messengers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.msg {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); text-decoration: none;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.msg:hover, .msg:focus-visible { border-color: #fff; background: rgb(255 255 255 / .04); box-shadow: 0 0 20px rgb(255 255 255 / .2); }
.msg svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.msg__max {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--text); color: var(--black); font-size: 12px; font-weight: 800;
}

/* Карта: до нажатия — тёмная заглушка с «сеткой улиц», Яндекс не загружается */
.map {
  position: relative; overflow: hidden; margin-top: 22px;
  aspect-ratio: 4 / 3; border-radius: 18px; border: 1px solid var(--line);
  background:
    linear-gradient(115deg, transparent 47%, rgb(255 255 255 / .07) 47.5% 49%, transparent 49.5%),
    linear-gradient(25deg, transparent 60%, rgb(255 255 255 / .05) 60.5% 61.5%, transparent 62%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 34px),
    #0b0b0b;
}
.map__cover {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 20px; text-align: center;
  background: radial-gradient(circle at 50% 45%, rgb(0 0 0 / .1), rgb(0 0 0 / .65) 75%);
}
.map__pin {
  width: 18px; height: 18px; border-radius: 50%; background: var(--led);
  box-shadow: 0 0 0 6px rgb(238 244 255 / .15), 0 0 24px rgb(238 244 255 / .8);
}
.map__addr { font-size: 16px; font-weight: 600; }
.map__show { margin-top: 4px; }
.map__note { max-width: 32ch; font-size: 12px; line-height: 1.45; color: var(--muted); }
/* сама карта: перекрашиваем в тёмную, чтобы не выбивалась из сайта */
.map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: invert(.9) hue-rotate(180deg) saturate(.55) brightness(.95) contrast(.95);
}
.map__open { margin-top: 12px; font-size: 15px; }
.map__open svg { width: 16px; height: 16px; }
.map__open:hover svg { transform: translate(2px, -2px); }

/* ===== До и после ===== */
/* Два снимка рядом: слева «до», справа «после» */
/* Пары «до/после». --ratio — ширина/высота одного снимка.
   На компьютере все пары в ряд: ширина пары пропорциональна её --ratio, поэтому снимки одной высоты. */
.pairs { display: flex; gap: 24px; align-items: stretch; }
/* каждая пара — своя карточка; рамка загорается от курсора, как у пакетов */
.pair {
  flex: calc(var(--ratio) * 2) 1 0; min-width: 0; margin: 0;
  padding: 12px; border-radius: 26px; background: var(--panel);
}
.pair__photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair .ba__side { border-radius: 16px; }
/* стрелка на стыке: «было → стало» */
.pair__photos::after {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 0 0 5px var(--panel), 0 0 22px rgb(255 255 255 / .35);
  pointer-events: none;
}
.pair__caption { padding: 16px 8px 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pair__num {
  display: inline-block; margin-right: 10px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; color: var(--text);
  vertical-align: 2px;
}
.pair__caption b { font-size: 17px; font-weight: 700; line-height: 2; color: var(--text); }
.pair__caption b::after { content: "\A"; white-space: pre; } /* описание — с новой строки */
.ba__side {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: var(--ratio); border-radius: 22px; background: var(--stage);
  border: 1px solid var(--line);
}
.ba__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }

/* переключатель работ (только на планшете и телефоне): «таблетки» в одной капсуле */
.works-tabs { display: none; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; }
.works-tab {
  min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); font: 600 15px var(--font);
  transition: background .25s, color .25s, box-shadow .25s;
}
.works-tab:hover { color: var(--text); }
.works-tab[aria-pressed="true"] { background: var(--text); color: var(--black); box-shadow: 0 0 18px rgb(255 255 255 / .35); }
.ba__side:hover .ba__img { transform: scale(1.04); }
.ba__tag {
  position: absolute; top: 16px; left: 16px;
  padding: 6px 14px; border-radius: 999px;
  background: rgb(0 0 0 / .55); backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / .16);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.ba__side + .ba__side .ba__tag { background: var(--text); color: var(--black); border-color: var(--text); }
/* ===== Отзывы ===== */
.stars {
  display: inline-block; width: 86px; height: 15px; flex: none;
  background: var(--text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M9 .8l2.47 5.01 5.53.8-4 3.9.94 5.5L9 13.42l-4.94 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/svg%3E") 0 0 / 17.2px 15px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M9 .8l2.47 5.01 5.53.8-4 3.9.94 5.5L9 13.42l-4.94 2.6.94-5.5-4-3.9 5.53-.8z'/%3E%3C/svg%3E") 0 0 / 17.2px 15px repeat-x;
}
.ratings { display: flex; flex-wrap: wrap; gap: 14px; }
.rating {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px 12px 16px; border: 1px solid var(--line-strong); border-radius: 16px;
  text-decoration: none;
}
.rating > b { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.rating__info { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }

.reviews { columns: 3 300px; column-gap: 20px; }
.review {
  break-inside: avoid; margin-bottom: 20px;
  display: grid; gap: 18px; padding: 30px 28px;
  border-radius: 22px; background: var(--panel);
}
.review__text { font-size: 16px; line-height: 1.6; color: #DCDCDA; }
.review__who { display: grid; gap: 2px; padding-top: 18px; border-top: 1px solid var(--line); }
.review__who b { font-size: 16px; font-weight: 600; }
.review__who span { font-size: 13px; color: var(--muted); }
/* точки под отзывами — только на телефоне, где отзывы листаются вбок */
.reviews__dots { display: none; justify-content: center; gap: 10px; margin-top: 16px; }
.reviews__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: rgb(255 255 255 / .28); transition: width .3s, background .3s;
}
.reviews__dots button[aria-current="true"] { width: 28px; background: #fff; }
.reviews__note { margin-top: 8px; text-align: center; font-size: 13px; color: var(--muted); }

/* ===== Частые вопросы ===== */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: 110px; display: grid; justify-items: start; gap: 18px; }
.faq__head h2 { font-size: clamp(34px, 4.4vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.faq__head p { color: var(--muted); max-width: 36ch; }
.faq__list { border-top: 1px solid var(--line); }
.qa { position: relative; border-bottom: 1px solid var(--line); }
/* при наведении нижняя линия загорается слева направо, как лампа */
.qa::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--led), rgb(238 244 255 / .35));
  box-shadow: 0 0 10px rgb(238 244 255 / .7);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.qa:has(summary:focus-visible)::after { transform: scaleX(1); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; list-style: none; cursor: pointer;
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.01em;
  transition: color .2s, text-shadow .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa[open] summary { color: #fff; text-shadow: 0 0 18px rgb(238 244 255 / .3); }
.qa summary:focus-visible { outline-offset: 4px; }
/* плюс поворачивается в крестик */
.qa__icon {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform .3s ease, background .3s, border-color .3s, box-shadow .3s;
}
/* кружок загорается белым светом */
.qa summary:focus-visible .qa__icon {
  border-color: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .35), 0 0 18px rgb(238 244 255 / .6), inset 0 0 10px rgb(238 244 255 / .25);
}
/* Подсветка при наведении — только там, где есть мышь. На телефоне палец при прокрутке
   считается «наведением»: линии загорались по всему списку и прокрутка подлагивала. */
@media (hover: hover) and (pointer: fine) {
  .qa:hover::after { transform: scaleX(1); }
  .qa summary:hover { color: #fff; text-shadow: 0 0 18px rgb(238 244 255 / .3); }
  .qa summary:hover .qa__icon {
    border-color: #fff;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .35), 0 0 18px rgb(238 244 255 / .6), inset 0 0 10px rgb(238 244 255 / .25);
  }
}
/* на телефоне светящейся линии нет совсем — меньше работы при прокрутке */
@media (hover: none) { .qa::after { display: none; } }
.qa__icon::before, .qa__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.6px;
  background: currentColor; transform: translate(-50%, -50%);
}
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__icon { transform: rotate(45deg); background: var(--text); border-color: var(--text); color: var(--black); }
.qa__body p { padding: 0 64px 28px 0; color: #BDBDBB; max-width: 70ch; }
/* плавное раскрытие в браузерах, которые это умеют; в остальных ответ просто появляется */
@supports selector(::details-content) {
  .qa { interpolate-size: allow-keywords; }
  .qa::details-content { height: 0; overflow: hidden; transition: height .35s ease, content-visibility .35s allow-discrete; }
  .qa[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .qa::details-content { transition: none; }
  .qa__icon, .ba__img { transition: none; }
}

/* Подвал */
.footer {
  padding: 40px var(--gutter) 48px;
  border-top: 1px solid var(--line);
  display: grid; gap: 14px; font-size: 13px; color: var(--muted);
}
.footer__logo { font-size: 18px; font-weight: 700; letter-spacing: .18em; color: var(--text); }
.footer__demo { color: var(--text); }
.footer__legal { display: grid; gap: 2px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Документы */
.doc-header { padding: 22px var(--gutter); border-bottom: 1px solid var(--line); }
.doc-back { font-weight: 600; text-decoration: none; }
.doc { max-width: 760px; margin: 0 auto; padding: 48px var(--gutter) 80px; color: #D6D6D4; }
.doc h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 300; letter-spacing: -0.03em; color: var(--text); }
.doc h2 { margin-top: 36px; font-size: 20px; font-weight: 600; color: var(--text); }
.doc p, .doc li { margin-top: 12px; }
.doc__date { color: var(--muted); }

/* ===== Телефон и планшет: лёгкий режим для плавной прокрутки =====
   Размытие под шапкой пересчитывается на каждом кадре прокрутки, а бегущие рамки шести карточек
   перерисовываются постоянно — на телефоне от этого страница подлагивала. Здесь их заменяет
   то же оформление без постоянной перерисовки. */
@media (hover: none) {
  .run-frame::after { animation: none; }
  .header.is-scrolled { backdrop-filter: none; background: rgb(0 0 0 / .94); }
  .ba__tag { backdrop-filter: none; background: rgb(0 0 0 / .72); }
  .tile:hover { transform: none; box-shadow: none; }
  /* размытый ореол неоновых линий (SVG-фильтр) — самый тяжёлый слой первого экрана; чёткие линии остаются */
  .hero__light g[filter] { display: none; }
  /* сцена и фото — отдельные слои: при прокрутке они сдвигаются целиком, без перерисовки */
  .hero__light, .hero__photo { transform: translateZ(0); }
}

/* ===== Адаптив ===== */
@media (max-width: 1180px) {
  .header { gap: 28px; }
  .nav { gap: 22px; }
}

@media (max-width: 980px) {
  .works-lead { display: none; }
  .works-tabs { display: inline-flex; }
  .pair:not(.is-active) { display: none; }
  .pair { max-width: min(100%, calc(1240px * var(--ratio) + 8px)); margin: 0 auto; }
  .pair__caption { text-align: center; }
  .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .car__head { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .plan__for { min-height: 0; }
  .booking { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .header { gap: 16px; }
  .header__phone { margin-left: auto; }
  .burger {
    display: grid; place-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  }
  .burger span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: transform .2s; }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; gap: 0;
    background: var(--black); border-bottom: 1px solid var(--line);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 16px var(--gutter); border-top: 1px solid var(--line); font-size: 17px; color: var(--text); }
  .nav a::after { display: none; }
  .facts__grid { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .header:has(.nav.is-open) { background: var(--black); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .header__phone { font-size: 14px; }
  /* на узком экране левая линия попадает под логотип — прячем её */
  .led .led-left { display: none; }
  .logo { gap: 10px; }
  .logo__lamp { height: 28px; }
  .logo__name { font-size: 21px; letter-spacing: .24em; margin-right: -.24em; }
  .logo__sub { font-size: 9px; letter-spacing: .24em; }
  /* Телефон: первый экран НЕ зависит от высоты окна. В Safari на iPhone высота окна меняется
     при каждой прокрутке (сжимается панель адреса), и всё, что было к ней привязано, ездило.
     Теперь сверху текст, под ним фото машины обычным блоком фиксированной формы. */
  .hero {
    min-height: 0; padding: 120px var(--gutter) 0;
    flex-direction: column; align-items: stretch;
  }
  .hero__copy { order: 1; }
  /* стены бокса чуть светлее чёрного — на их фоне был виден верхний край фото; оставляем чёрный фон и неон */
  .hero__light polygon { display: none; }
  /* затемнение сверху вшито в hero-car-mobile.jpg — маска не нужна */
  .hero__photo {
    order: 2; position: relative; right: auto; bottom: auto;
    width: auto; height: auto; aspect-ratio: 718 / 716;
    margin: -24px calc(-1 * var(--gutter)) 0;
    -webkit-mask: none; mask: none;
  }
  .hero__photo img { object-position: 50% 50%; }
  .hero__actions .btn { flex: 1 1 100%; }
  /* на телефоне машина крупнее: обрезаем края кадра */
  .fact { padding: 0; }
  .fact__ico { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 10px; }
  .fact b { font-size: 24px; }
  .fact span { font-size: 14px; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .plan { padding: 26px 22px; }
  .plan__badge { top: 24px; right: 20px; }
  .form { grid-template-columns: 1fr; }
  .form__submit { justify-self: stretch; }
  .pair__photos { gap: 6px; }
  .ba__side { border-radius: 16px; }
  .ba__tag { top: 10px; left: 10px; padding: 4px 11px; font-size: 12px; }
  /* отзывы на телефоне листаются пальцем вбок */
  .reviews {
    display: flex; gap: 12px; columns: auto;
    margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .reviews::-webkit-scrollbar { display: none; }
  .reviews__dots { display: flex; }
  .review { flex: 0 0 86%; scroll-snap-align: start; margin: 0; padding: 24px 22px; }
  .rating { padding: 10px 16px 10px 14px; }
  .rating > b { font-size: 28px; }
  .qa summary { padding: 22px 0; }
  .qa__body p { padding-right: 0; }
}

/* ===== Kustov PDR: отличия от Landy ===== */
/* в логотипе вместо светящейся «лампы» — щит мастерской */
.logo__shield { height: 42px; width: auto; flex: none; filter: drop-shadow(0 2px 10px rgb(0 0 0 / .6)); }
@media (max-width: 640px) { .logo__shield { height: 34px; } }
/* рейтинг Яндекс Карт — ссылка на отзывы */
a.rating { text-decoration: none; color: inherit; transition: border-color .2s; }
a.rating:hover { border-color: var(--line-strong); }
/* вместо MAX — ВКонтакте: две буквы в кружке */
.msg--max .msg__max { font-size: 11px; letter-spacing: .02em; }
.reviews__note a { color: inherit; }
.footer__demo a { color: inherit; }
/* у Kustov в карточках цен нет суммы — кнопка сразу под описанием */
.plan__for + .btn { margin-top: 26px; }

/* длинная надпись «Записаться на бесплатный осмотр» на узком экране переносится — держим по центру */
.plan .btn { text-align: center; line-height: 1.25; padding-block: 10px; }

/* Машина в профиль во всю ширину на большом мониторе выходила выше экрана — ограничиваем высоту.
   Кузов занимает ~11–68% высоты кадра: при 25% сверху крыша и колёса остаются в кадре. */
.car__img { height: min(48.28vw, 72vh); object-fit: cover; object-position: 50% 25%; }