:root {
  --bg: #0B0C0E;
  --bg2: #15161A;
  --bg3: #1E2025;
  --line: #2C2F35;
  --steel: #B4BAC3;
  --text: #EDEBE6;
  --mute: #9BA1A9;
  --hot: #FFB000;
  --hot2: #FF5A1F;
  --ember: #8F1D0B;
  --pad: clamp(20px, 5.4vw, 88px);
  --sec: clamp(88px, 12vw, 190px);
  --u: 'Unbounded', 'Golos Text', sans-serif;
  --g: 'Golos Text', system-ui, sans-serif;
  --m: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
body { margin: 0; font: 400 17px/1.55 var(--g); overflow-x: clip; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

h1, h2 { font-family: var(--u); font-weight: 200; letter-spacing: -.035em; line-height: 1.04; }
h2 { font-size: clamp(32px, 4.9vw, 76px); }

.tag { font: 500 12px/1.3 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px;
  background: var(--hot); color: #0B0C0E; border: 1px solid var(--hot); border-radius: 2px;
  font: 500 15px/1 var(--g); text-decoration: none; cursor: pointer; transition: background .25s, border-color .25s, color .25s;
}
.btn:hover { background: var(--hot2); border-color: var(--hot2); }
.btn--ghost { background: transparent; color: var(--text); border-color: #565B63; }
.btn--ghost:hover { background: transparent; color: var(--hot); border-color: var(--hot); }

/* Ссылка макета не должна лежать на логотипе */
.review-badge { top: auto !important; bottom: 12px; }

/* Шапка */
.hd {
  position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 36px;
  padding: 16px var(--pad); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s;
  background: rgba(11,12,14,.88);
}
.hd.is-solid { background: var(--bg); border-color: var(--line); }
.logo { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 12px; text-decoration: none; font: 300 16px/1 var(--u); letter-spacing: .02em; }
.hd__nav { display: flex; gap: 28px; margin-left: auto; }
.hd__nav a { font: 400 14px/1 var(--g); color: var(--steel); text-decoration: none; transition: color .2s; }
.hd__nav a:hover, .hd__nav a[aria-current] { color: var(--hot); }
.hd__tel { font: 500 15px/1 var(--m); text-decoration: none; white-space: nowrap; }
.hd__tel:hover { color: var(--hot); }

/* Сцена. Без класса live блоки идут обычным потоком: это откат без WebGL и JS. */
.stage { position: relative; background: var(--bg); }
.pin { position: relative; }
#gl { display: none; }
.beat { position: relative; padding: 110px var(--pad) 60px; }
.beat--hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.hud, .scrim { display: none; }

.beat h1 { font-size: clamp(38px, 5.5vw, 96px); margin: 22px 0 26px; }
.beat h2 { font-size: clamp(30px, 3.7vw, 60px); margin: 18px 0 22px; max-width: 12em; }
.beat__lead { max-width: 30em; color: #C9CCD1; font-size: clamp(16px, 1.3vw, 19px); }
.beat__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cue { display: none; font: 400 12px/1 var(--m); color: var(--mute); }
.beat__links { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.14); max-width: 480px; }
.beat__links a {
  display: flex; justify-content: space-between; gap: 18px; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.14);
  text-decoration: none; font-size: 15px; transition: color .2s, padding .2s;
}
.beat__links a:hover { color: var(--hot); padding-left: 8px; }
.beat__links b { font: 400 13px/1.6 var(--m); color: var(--steel); white-space: nowrap; }

html.live .stage { height: 260vh; }
html.live .pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
html.live #gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s; }
html.live #gl.on { opacity: 1; }
html.live .scrim {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(11,12,14,.8) 0, rgba(11,12,14,0) 20%), linear-gradient(90deg, rgba(11,12,14,.96) 0, rgba(11,12,14,.86) 30%, rgba(11,12,14,.5) 42%, rgba(11,12,14,0) 56%);
}
html.live .beat {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(50vw, 800px); padding: 0 0 0 var(--pad);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; will-change: opacity, transform;
}
html.live .beat.is-on { visibility: visible; }
html.live .beat--hero { min-height: 0; opacity: 1; visibility: visible; width: min(54vw, 860px); }
html.live .cue { display: flex; align-items: center; gap: 12px; position: absolute; left: var(--pad); bottom: 34px; }
.cue span { display: block; width: 44px; height: 1px; background: var(--hot); transform-origin: left; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } }

html.live .hud {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; position: absolute; right: var(--pad); bottom: 34px; text-align: right;
}
.hud span, .act__hud span { font: 400 11px/1.2 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); text-shadow: 0 0 10px #0B0C0E, 0 0 4px #0B0C0E; }
.hud strong, .act__hud strong { font: 300 clamp(20px, 2.1vw, 30px)/1.1 var(--u); color: var(--text); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px #0B0C0E, 0 0 6px #0B0C0E; }
.hud strong.is-hot, .act__hud strong.is-hot { color: var(--hot); }
html.live .hud { transition: opacity .3s; }


/* Механизмы после первого экрана: обычные разделы, в каждом окно 3D.
   Механизм движется по мере прокрутки раздела, страница при этом листается как обычно */
.acts { background: var(--bg); }
.act {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 96px); align-items: start;
  padding: clamp(72px, 8vw, 140px) var(--pad); border-top: 1px solid var(--line);
}
.act:first-child { border-top: 0; }
.act__head { grid-column: 1; grid-row: 1; align-self: end; }
.act__body { grid-column: 1; grid-row: 2; }
.act__view { grid-column: 2; grid-row: 1 / 3; align-self: center; position: relative; margin: 0; aspect-ratio: 1.12 / 1; }
.act:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.act:nth-child(even) .act__head, .act:nth-child(even) .act__body { grid-column: 2; }
.act:nth-child(even) .act__view { grid-column: 1; }
.act h2 { font-size: clamp(30px, 3.7vw, 60px); margin: 18px 0 22px; max-width: 12em; }
.act__lead { max-width: 30em; color: #C9CCD1; font-size: clamp(16px, 1.3vw, 19px); }
.act .beat__links { margin-top: 30px; }
/* Края окна растворяются в странице: механизм не сидит в рамке */
.act__view canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s;
  -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
}
html.acts-on .act__view canvas { opacity: 1; }
.act__hud { position: absolute; right: 0; bottom: 4%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; text-align: right; opacity: 0; transition: opacity .6s; }
html.acts-on .act__hud { opacity: 1; }
.act:nth-child(even) .act__hud { right: auto; left: 0; align-items: flex-start; text-align: left; }
/* Без WebGL окна нет: остаётся текст с ценами */
html:not(.live) .act__view { display: none; }
html:not(.live) .act { display: block; }

/* Откат: сцена статична, блоки идут друг за другом */
html.still .stage { height: auto; }
html.still .pin { position: relative; height: auto; overflow: visible; }
html.still #gl { height: 100vh; height: 100svh; bottom: auto; }
html.still .scrim { height: 100vh; height: 100svh; bottom: auto; }
html.still .beat { position: relative; width: auto; opacity: 1 !important; visibility: visible; transform: none !important; padding: 72px var(--pad); }
html.still .beat--hero { min-height: 100svh; }
html.still .hud, html.still .cue { display: none !important; }

/* Секции */
.sec { padding: var(--sec) var(--pad); position: relative; }
.sec__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: clamp(36px, 5vw, 72px); }
.sec__head p { color: var(--mute); max-width: 26em; justify-self: end; }

/* Подбор */
/* Ритм страницы: разделы чередуются оттенками графита */
.sec { background: var(--bg); }
.alt { --bg: #15161A; --bg2: #0B0C0E; }

/* Заглушка под фотографию: блок заменяется на img того же размера */
.ph { display: grid; place-items: center; aspect-ratio: 16 / 9; margin: 0; padding: 18px; background: #1E2025; border: 1px solid #2C2F35; text-align: center; }
.ph--wide { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
.ph figcaption { font: 400 12px/1.4 var(--m); letter-spacing: .04em; color: var(--mute); }
/* Фото: ссылка на крупный вариант, по клику открывается просмотр */
.ph--img { display: block; position: relative; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; }
.ph--img img, .gal__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.ph--img:hover img, .gal__item:hover img { transform: scale(1.03); }
/* Галерея «Сервис изнутри»: крупный общий план и восемь кадров работы */
.gal { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 56px); }
.gal__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.gal__head p { color: var(--mute); max-width: 28em; justify-self: end; }
.gal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 15.5vw, 250px); gap: 8px; }
.gal__item { position: relative; display: block; overflow: hidden; background: var(--bg3); cursor: zoom-in; }
.gal__item:first-child { grid-column: span 2; grid-row: span 2; }
.gal__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 12px; background: linear-gradient(rgba(11,12,14,0), rgba(11,12,14,.88)); font: 400 13px/1.35 var(--g); color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; pointer-events: none; }
.gal__item:hover .gal__cap, .gal__item:focus-visible .gal__cap { opacity: 1; transform: none; }
.gal__all { margin-top: 18px; }

/* Выбор машины: три шага */
.wiz { position: relative; scroll-margin-top: 96px; }
.wiz__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--bg2); }
.wiz__steps li { display: flex; }
.wiz__steps li + li { border-left: 1px solid var(--line); }
.wiz__steps button { width: 100%; min-height: 72px; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; align-content: center; padding: 14px 18px; background: var(--bg2); border: 0; text-align: left; color: var(--mute); cursor: default; }
.wiz__steps i { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); font: 400 13px/1 var(--m); font-style: normal; }
.wiz__steps span { font: 400 12px/1.3 var(--m); letter-spacing: .06em; text-transform: uppercase; }
.wiz__steps b { font: 300 clamp(15px, 1.5vw, 20px)/1.2 var(--u); letter-spacing: -.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz__steps .is-now button { color: var(--text); }
.wiz__steps .is-now i { background: var(--hot); border-color: var(--hot); color: #0B0C0E; }
.wiz__steps .is-done button { cursor: pointer; transition: background .2s; }
.wiz__steps .is-done button:hover { background: var(--bg3); }
.wiz__steps .is-done i { border-color: var(--hot); color: var(--hot); }

.wiz__search { display: block; margin: 12px 0 30px; border: 1px solid var(--line); background: var(--bg2); transition: border-color .2s; }
.wiz__search:focus-within { border-color: var(--hot); }
.wiz__search input { width: 100%; min-height: 56px; background: none; border: 0; outline: 0; padding: 0 18px; font: 400 16px/1.2 var(--g); }
.wiz__search input::placeholder { color: var(--mute); }
.wiz__search input::-webkit-search-cancel-button { display: none; }
.wiz__body { outline: 0; }
.wiz__title { font: 200 clamp(26px, 3.2vw, 46px)/1.1 var(--u); letter-spacing: -.03em; margin-bottom: 24px; }
.wiz__empty { color: var(--mute); }

.tiles { display: grid; gap: 10px; }
.tiles--brand { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles--model { grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr)); }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; text-align: left; padding: 18px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); cursor: pointer; overflow: hidden; animation: tile-in .42s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 16ms); transition: border-color .18s, background .18s, transform .18s; }
.tile:hover, .tile:focus-visible { border-color: var(--hot); transform: translateY(-2px); }
@keyframes tile-in { from { opacity: 0; transform: translateY(12px); } }
.tile--brand { min-height: clamp(150px, 15vw, 210px); }
.tile--brand small { position: absolute; left: 18px; top: 16px; font: 400 12px/1 var(--m); color: var(--mute); }
.tile--brand b { font: 300 clamp(20px, 2.1vw, 32px)/1.1 var(--u); letter-spacing: -.03em; white-space: nowrap; }
.tile--brand span { font: 400 12px/1.3 var(--m); color: var(--mute); }
.tile--brand::after { content: ''; position: absolute; right: 18px; top: 18px; width: 10px; height: 10px; border-top: 1.5px solid var(--hot); border-right: 1.5px solid var(--hot); transition: transform .18s; }
.tile--brand:hover::after { transform: translate(3px, -3px); }
.tile--model { min-height: 112px; }
.tile--model small { font: 400 11px/1.3 var(--m); color: var(--hot); }
.tile--model b { font: 300 clamp(18px, 1.6vw, 23px)/1.15 var(--u); letter-spacing: -.02em; }
.tile--model span { font: 400 12px/1.35 var(--m); color: var(--steel); }
.tile--model em { font: 400 12px/1.3 var(--g); font-style: normal; color: var(--mute); }

.works__head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 26px; }
.works__head .wiz__title { margin: 0; }
.works__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 400 12px/1.4 var(--m); color: var(--steel); }
.works__label { margin: 0 0 14px; }
.works__hot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 40px; }
.works__hot a { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 22px; background: var(--bg2); border: 1px solid var(--line); text-decoration: none; animation: tile-in .42s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 50ms); transition: border-color .18s; }
.works__hot a:hover { border-color: var(--hot); }
.works__hot span { font: 300 clamp(17px, 1.5vw, 21px)/1.25 var(--u); letter-spacing: -.02em; }
.works__hot small { font-size: 14px; line-height: 1.4; color: var(--mute); }
.works__hot b { margin-top: 10px; font: 400 15px/1.3 var(--m); color: var(--text); }
.works__hot b.real { color: var(--hot); }
.works__all { columns: 3; column-gap: 32px; }
.wgrp { break-inside: avoid; margin-bottom: 26px; }
.wgrp summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hot); cursor: pointer; list-style: none; }
.wgrp summary::-webkit-details-marker { display: none; }
.wgrp h4 { margin: 0; font: 300 18px/1.2 var(--u); letter-spacing: -.02em; }
.wgrp small { font: 400 12px/1 var(--m); color: var(--mute); }
.wgrp a { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 15px; line-height: 1.3; transition: color .15s, padding .15s; }
.wgrp a:hover { color: var(--hot); padding-left: 6px; }
.wgrp b { font: 400 13px/1.5 var(--m); color: var(--steel); white-space: nowrap; }
.wgrp b.real { color: var(--hot); }

.cat__list { border-top: 1px solid var(--line); }
.grp { border-bottom: 1px solid var(--line); }
.grp summary {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 24px 0; cursor: pointer; list-style: none;
  transition: color .2s;
}
.grp summary::-webkit-details-marker { display: none; }
.grp summary:hover { color: var(--hot); }
.grp summary i { font: 400 12px/1 var(--m); font-style: normal; color: var(--mute); }
.grp summary h3 { font: 300 clamp(20px, 2.3vw, 34px)/1.15 var(--u); letter-spacing: -.025em; }
.grp summary small { font: 400 12px/1 var(--m); color: var(--mute); white-space: nowrap; }
.grp__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; padding: 0 0 34px 0; }
.grp__lead { color: var(--mute); font-size: 15px; max-width: 26em; }
.grp__items { columns: 2; column-gap: 40px; }
.grp__items a {
  break-inside: avoid; display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; text-decoration: none; font-size: 15px; line-height: 1.35;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.grp__items a:hover { color: var(--hot); border-color: #4b3a1a; }
.grp__items b { font: 400 13px/1.5 var(--m); color: var(--steel); white-space: nowrap; }
.grp__items b.real { color: var(--hot); }

/* Окно выбора машины при клике на услугу */
html.is-modal { overflow: hidden; }
.ask { width: min(980px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); padding: 0; background: #15161A; color: var(--text); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.ask[open] { display: flex; animation: ask-in .28s cubic-bezier(.2,.7,.2,1); }
.ask::backdrop { background: rgba(5,6,8,.76); }
@keyframes ask-in { from { opacity: 0; transform: translateY(14px); } }
.ask__box { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 0; padding: clamp(22px, 3vw, 40px); }
.ask__x { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; background: none; border: 0; font-size: 18px; color: var(--steel); cursor: pointer; }
.ask__x:hover { color: var(--hot); }
.ask #ask-s { padding-right: 44px; color: var(--hot); }
.ask h2 { margin: 10px 0 18px; font-size: clamp(24px, 3vw, 40px); font-weight: 200; }
.ask__search { margin: 0 0 14px; flex: none; }
.ask__back { align-self: flex-start; flex: none; margin-bottom: 12px; padding: 6px 0; background: none; border: 0; font: 400 14px/1.2 var(--g); color: var(--steel); cursor: pointer; }
.ask__back:hover { color: var(--hot); }
.ask__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.ask .tile { background: #0B0C0E; }
.ask .tiles--brand { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.ask .tile--brand { min-height: 118px; }

/* Диагностика */
.diag { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.diag__dial { position: sticky; top: 90px; text-align: center; max-width: 460px; }
.diag__dial svg { display: block; width: 100%; height: auto; }
.diag__dial line { stroke: #3A3D44; stroke-width: 2; transition: stroke .3s; }
.diag__dial line.on { stroke: var(--hot); }
.diag__dial line.warm { stroke: var(--hot2); }
.diag__dial line.deep { stroke: #C92B10; }
.diag__num { margin-top: -46%; font: 200 clamp(84px, 11vw, 160px)/1 var(--u); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.diag__unit { font: 400 12px/1 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.diag__lead { color: #C9CCD1; max-width: 32em; margin: 24px 0 44px; }
.diag__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; margin-bottom: 44px; }
.diag__groups h3 { font: 500 12px/1.3 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--hot); margin-bottom: 12px; }
.diag__groups li { display: grid; grid-template-columns: 2em minmax(0, 1fr); padding: 3px 0; font-size: 15px; color: #D4D6DA; line-height: 1.4; }
.diag__groups li i { font: 400 12px/1.7 var(--m); color: #7C828A; font-style: normal; }

/* Акции */
.ledger { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr); gap: 32px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--line); }
.row h3 { font: 300 clamp(18px, 1.8vw, 26px)/1.25 var(--u); letter-spacing: -.02em; }
.row p { color: var(--mute); font-size: 15px; }
.row__price { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.row__price strong { font: 300 clamp(22px, 2.3vw, 34px)/1.1 var(--u); color: var(--hot); white-space: nowrap; }
.row__price s { font: 400 13px/1 var(--m); color: var(--mute); }
.row__price span { font: 400 13px/1.4 var(--m); color: var(--steel); }

/* Компаниям */
.fleet { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 110px); align-items: start; }
.fleet__lead p { color: #C9CCD1; margin-top: 24px; max-width: 28em; }
.fleet__lead .ph { margin-top: 30px; }
.fleet__lead { grid-row: 1 / 3; }
.fleet__facts { border-top: 1px solid var(--line); }
.fleet__facts li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.fleet__facts b { font-weight: 500; }
.fleet__facts span { color: var(--mute); font-size: 15px; }
.fleet > .btn { grid-column: 2; justify-self: start; }

/* Факты */
.about { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.about__num { padding-top: 18px; border-top: 1px solid var(--line); }
.about__num span { display: block; font: 200 clamp(48px, 6.6vw, 104px)/1 var(--u); letter-spacing: -.05em; }
.about__num small { display: block; margin-top: 10px; font: 400 13px/1.3 var(--m); color: var(--mute); }
.about__reviews { grid-column: 1 / -1; margin-top: 8px; padding: 30px; border: 1px dashed var(--line); display: grid; gap: 8px; color: var(--steel); }

/* Контакты */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.contact__info h2 { font-size: clamp(28px, 3.9vw, 60px); margin-bottom: 20px; }
.contact__how { color: var(--mute); }
.contact__how a { color: var(--steel); }
.contact__tel { display: block; margin: 34px 0 10px; font: 200 clamp(26px, 3.6vw, 54px)/1.1 var(--u); letter-spacing: -.03em; text-decoration: none; }
.contact__tel:hover { color: var(--hot); }
.contact__info .btn { margin-top: 30px; }
.contact__info .ph { margin-top: 30px; max-width: 560px; }
.lead { background: var(--bg2); border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; scroll-margin-top: 80px; }
.lead h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; }
.lead label { display: grid; gap: 6px; }
.lead label span { font: 400 12px/1.3 var(--m); color: var(--mute); }
.lead input[type=tel], .lead input[type=text] { background: var(--bg); border: 1px solid #3A3D44; border-radius: 2px; padding: 14px; min-height: 52px; font-size: 17px; }
.lead input:focus { outline: 0; border-color: var(--hot); }
.lead input::placeholder { color: #6F747C; }
.lead.is-error input[type=tel] { border-color: var(--hot2); }
.consent { display: flex !important; grid-template-columns: none; gap: 10px; align-items: flex-start; }
.consent span { font: 400 13px/1.4 var(--g) !important; color: var(--mute) !important; }
.consent input { accent-color: var(--hot); width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.lead__sent { color: var(--hot); font-size: 15px; }
.lead.is-sent button { opacity: .5; pointer-events: none; }

.ft { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px var(--pad); border-top: 1px solid var(--line); font: 400 12px/1.4 var(--m); color: var(--mute); }

.bar { display: none; }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }


/* Подвал: реквизиты продавца и ссылки на документы (ЗоЗПП, 152-ФЗ) */
.ft--site { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px 48px; padding: 34px var(--pad) 40px; border-top: 1px solid var(--line); font: 400 12px/1.65 var(--m); color: var(--mute); }
.ft__req { display: grid; gap: 4px; align-content: start; }
.ft__docs { display: grid; gap: 7px; justify-items: start; align-content: start; }
.ft__docs a { color: var(--steel); text-decoration: none; }
.ft__docs a:hover { color: var(--hot); }
.ft__note { grid-column: 1 / -1; max-width: 920px; color: #7E848C; }
.lead__sent--fail, .sv-sent--fail { color: var(--hot2); }
.lead__sent--fail a, .sv-sent--fail a { color: var(--text); }
.lead.is-busy button, .sv-form.is-busy button { opacity: .6; pointer-events: none; }
.consent a, .sv-consent a { color: var(--steel); text-underline-offset: 2px; }
.consent a:hover, .sv-consent a:hover { color: var(--text); }
@media (max-width: 760px) { .ft--site { grid-template-columns: 1fr; padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
@media (max-width: 1240px) {
  .hd { gap: 24px; }
  .hd__nav { gap: 18px; }
  .hd__nav a { font-size: 13px; }
}
@media (max-width: 1020px) {
  .hd__nav { display: none; }
  .hd__tel { margin-left: auto; }
}
@media (max-width: 1100px) {
  .tiles--brand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .works__all { columns: 2; }
  }

@media (max-width: 820px) {
  .wiz__steps button { min-height: 62px; padding: 10px; grid-template-columns: 1fr; row-gap: 4px; }
  .wiz__steps i { grid-row: auto; width: 26px; height: 26px; font-size: 12px; }
  .wiz__steps span { font-size: 11px; }
  .wiz__steps b { font-size: 13px; }
  .tiles--brand { grid-template-columns: 1fr 1fr; }
  .tiles--brand .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile--brand { min-height: 112px; padding: 14px 12px; }
  .tile--brand b { font-size: min(5vw, 22px); }
  .tile--brand small { left: 12px; top: 12px; }
  .tiles--model { grid-template-columns: 1fr 1fr; }
  .tile--model { min-height: 96px; padding: 12px; }
  .tile--model em { display: none; }
  .works__hot { grid-template-columns: 1fr; }
  .ask { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; }
  .works__all { columns: 1; }
  .wgrp { margin-bottom: 14px; }
  body { font-size: 16px; padding-bottom: 66px; }
  .hd { padding: 14px var(--pad); padding-left: var(--pad); gap: 12px; }
  .logo { font-size: 14px; }
  .logo svg { width: 32px; height: 32px; }
  .hd__tel { font-size: 13px; }

  html.live .scrim { background: linear-gradient(0deg, rgba(11,12,14,.98) 0, rgba(11,12,14,.95) 54%, rgba(11,12,14,.72) 63%, rgba(11,12,14,0) 76%); }
  html.live .beat { width: 100%; padding: 0 var(--pad) 28px; justify-content: flex-end; }
  /* Снизу панель звонка: цены должны помещаться над ней целиком */
  html.live .beat { padding-bottom: calc(58px + env(safe-area-inset-bottom) + 26px); }
  html.live .stage { height: 240vh; }
  html.live .beat--hero { padding-bottom: 76px; }
  /* Где четыре цены, места хватает только на заголовок и прайс */
  html.live .beat:has(.beat__links li:nth-child(4)) .beat__lead { display: none; }
  html.live .beat:not(.beat--hero) .beat__lead { font-size: 14.5px; line-height: 1.42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  html.live .beat__links { margin-top: 14px; }
  html.live .beat__links a { padding: 9px 2px; font-size: 14px; line-height: 1.3; }
  html.live .cue { bottom: 28px; }
  .beat h1 { font-size: 10.6vw; margin: 12px 0 16px; }
  .beat h2 { font-size: 8vw; margin: 10px 0 12px; }
  .beat__lead { font-size: 15px; line-height: 1.45; }
  .beat__cta { margin-top: 20px; }
  .beat__cta .btn { flex: 1 1 auto; min-height: 50px; padding: 0 14px; font-size: 14px; }
  .beat__links { margin-top: 14px; }
  .beat__links a { padding: 9px 0; font-size: 14px; }
  html.live .beat--hero { width: 100%; }
  html.live .hud { top: 74px; right: var(--pad); bottom: auto; }

  .act { grid-template-columns: 1fr; grid-template-rows: none; padding: 60px var(--pad) 52px; }
  .act:nth-child(even) { grid-template-columns: 1fr; }
  .act__head, .act__body, .act__view, .act:nth-child(even) .act__head, .act:nth-child(even) .act__body, .act:nth-child(even) .act__view { grid-column: 1; grid-row: auto; }
  .act__view { margin: 18px calc(-1 * var(--pad)) 14px; aspect-ratio: auto; height: calc(75vw + 30px); }
  /* Показания под картинкой, а не поверх механизма */
  .act__view { display: flex; flex-direction: column; }
  .act__view canvas { position: relative; inset: auto; flex: 1; min-height: 0; }
  .act__hud, .act:nth-child(even) .act__hud { position: static; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px var(--pad) 0; text-align: left; }
  .act__hud strong { font-size: 18px; white-space: nowrap; }
  .act h2 { font-size: 8vw; margin: 10px 0 0; }
  .act__lead { font-size: 15px; line-height: 1.45; }
  .act .beat__links { margin-top: 16px; }

  .sec__head { grid-template-columns: 1fr; gap: 14px; }
  .sec__head p { justify-self: start; }
  .grp summary { grid-template-columns: 2.2em minmax(0, 1fr) auto; padding: 19px 0; }
  .grp__body { grid-template-columns: 1fr; gap: 12px; padding-bottom: 22px; }
  .grp__lead { padding-left: 0; }
  .grp__items { columns: 1; }
  .diag { grid-template-columns: 1fr; }
  .diag__dial { position: relative; top: 0; max-width: 300px; margin: 0 auto; }
  .diag__groups { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .row__price { text-align: left; }
  .fleet { grid-template-columns: 1fr; }
  .fleet > .btn { grid-column: 1; }
  .fleet__lead { grid-row: auto; }
  .fleet__facts li { grid-template-columns: 1fr; gap: 4px; }
  .about { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .ph--wide { aspect-ratio: 16 / 9; }
  .about__reviews { margin-top: 12px; padding: 22px; }
  .gal__head { grid-template-columns: 1fr; gap: 12px; }
  .gal__head p { justify-self: start; }
  .gal__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 31vw; gap: 6px; }
  .gal__cap { display: none; }
  .gal__all { width: 100%; }
  .contact { grid-template-columns: 1fr; }

  .review-badge { top: 58px !important; bottom: auto; font-size: 10px !important; padding: 5px 7px !important; }
  .bar {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    background: var(--bg2); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  }
  .bar a { display: flex; align-items: center; justify-content: center; min-height: 58px; text-decoration: none; font-weight: 500; font-size: 15px; }
  .bar__lead { background: var(--hot); color: #0B0C0E; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue span { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Машина в шапке: для какой машины цены на странице. Клик открывает выбор марки и модели */
.car { position: relative; display: inline-grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 4px; min-height: 44px; max-width: 240px; padding: 6px 34px 6px 12px; background: none; border: 1px solid var(--line); border-radius: 2px; color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s; }
.car[hidden] { display: none; }
.car:hover { border-color: var(--hot); }
.car::after { content: ''; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid var(--steel); border-bottom: 1.5px solid var(--steel); transform: rotate(45deg); }
.car__k { font: 400 10px/1 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.car__v { font: 500 14px/1.15 var(--g); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car:not(.is-set) .car__v { color: var(--hot); }
@media (max-width: 1020px) {
  .car { margin-left: auto; }
  .car:not([hidden]) + .hd__tel, .car:not([hidden]) + .lp-top__tel { margin-left: 0; }
}
/* На телефоне номер остаётся кнопкой с трубкой: снизу ещё есть панель «Позвонить» */
@media (max-width: 560px) {
  .car:not([hidden]) + .hd__tel, .car:not([hidden]) + .lp-top__tel { display: grid; place-items: center; width: 44px; height: 44px; flex: none; font-size: 0; border: 1px solid var(--line); border-radius: 2px; }
  .car:not([hidden]) + .hd__tel::before, .car:not([hidden]) + .lp-top__tel::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--phone) center / contain no-repeat; mask: var(--phone) center / contain no-repeat; }
  .car { max-width: none; min-width: 0; flex: 0 1 auto; }
}
@media (max-width: 440px) { .car__b { display: none; } }
:root { --phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E"); }

/* В окне выбора: машина, выбранная сейчас, и сброс */
.ask__now { margin: -6px 0 16px; padding-right: 44px; font-size: 14px; line-height: 1.4; color: var(--steel); }
.ask__now b { color: var(--text); font-weight: 500; }
.ask__now button { margin-left: 10px; padding: 0; background: none; border: 0; color: var(--hot); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ask__now button:hover { color: var(--text); }

/* Работа не подходит выбранной машине: без цены, приглушённо */
.beat__links a.is-na span, .beat__links a.is-na b { color: var(--mute); }
.beat__links a.is-na b { white-space: normal; text-align: right; }
@media (max-width: 420px) { .act__hud strong { font-size: 15.5px; } .act__hud span { font-size: 10px; } }