/* ВЕТЕР РОБОТИКС - общий стиль сайта.
   Палитра и типографика взяты с утверждённой главной; размеры переведены в
   подвижные (clamp), чтобы страница жила и на телефоне, а не только в макете
   шириной 1440. */

:root{
  --fon:        oklch(0.975 0.004 250);
  --fon-vtor:   oklch(0.955 0.004 250);
  --tekst:      oklch(0.16 0.012 250);
  --tekst-vtor: oklch(0.40 0.012 250);
  --tekst-tret: oklch(0.52 0.012 250);
  --liniya:     oklch(0.88 0.006 250);
  --akcent:     oklch(0.58 0.19 55);
  --zelenyj:    oklch(0.44 0.14 150);
  --sinij:      oklch(0.48 0.13 200);
  --krasnyj:    oklch(0.52 0.19 27);   /* статус «сорвана» в журнале */
  /* Высота закреплённой шапки одним числом: её вычитают и отступ прокрутки,
     и липкая часть разлёта. Порознь они разъезжались. */
  --shapka-vys: clamp(70px, 8vh, 96px);
  --polya:      clamp(20px, 4.4vw, 64px);
  --shag:       clamp(48px, 6vw, 88px);
}

*,*::before,*::after{box-sizing:border-box}
/* scroll-padding под высоту закреплённой шапки. Без него при переходе по
   якорю и при обходе клавишей TAB то, на что перешли, оказывается ПОД шапкой:
   по WCAG 2.2 фокус не должен закрываться своей же вёрсткой. */
html{scroll-behavior:smooth;scroll-padding-top:var(--shapka-vys)}
body{
  margin:0; background:var(--fon); color:var(--tekst);
  font-family:'Unbounded',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%}
a{color:inherit;text-decoration:none}

.obolochka{width:100%;max-width:1440px;margin:0 auto}
.razdel{padding:var(--shag) var(--polya) 0}
section.razdel:last-of-type{padding-bottom:var(--shag)}

/* --- шапка: закреплена сверху на всех страницах ---
   Поверх первого экрана прозрачная, при прокрутке встаёт на плотную подложку.
   Раньше она уезжала вместе с первым экраном, и на длинной странице перейти
   в другой раздел было нечем. */
.shapka{position:fixed;top:0;left:0;right:0;z-index:20;
  padding:clamp(12px,1.5vw,20px) var(--polya);transition:background .2s,box-shadow .2s}
.shapka.plotnaya{background:oklch(0.975 0.004 250/.97);
  box-shadow:0 1px 0 var(--liniya)}
/* РАЗМЫТИЕ ФОНА ШАПКИ СНЯТО 03.09: владелец на Макбуке M1 в трёх браузерах проверил адрес ?bez=blur -
   «без блюра сильно меньше тормозит». backdrop-filter пересчитывает размытие при каждом изменении
   картинки под шапкой (кадры платы, видео), на Retina это вся ширина экрана 120 раз в секунду.
   Вместо него подложка плотнее (.97). */
.shapka .shapka-ryad{padding:0}
/* первая секция внутренних страниц не должна уходить под шапку */
section.razdel:first-of-type:not(.pasport){padding-top:calc(var(--shag) + clamp(40px,3.6vw,58px))}

.knopka-menyu{display:none;border:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:34px;padding:0 8px;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.knopka-menyu span{display:block;height:1.5px;background:var(--tekst);
  transition:transform .2s,opacity .2s}
.shapka.otkryto .knopka-menyu span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.shapka.otkryto .knopka-menyu span:nth-child(2){opacity:0}
.shapka.otkryto .knopka-menyu span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* --- меню --- */
/* По центру, а не по базовой линии. Пока в шапке был только текст, базовая
   линия работала. Со знаком слева базовой линией всего логотипа становится
   картинка, и меню уезжает вниз вслед за ней. */
.shapka-ryad{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;
}
.logotip{font-weight:800;font-size:clamp(15px,1.4vw,19px);letter-spacing:.10em}
/* Знак слева от названия. Высота задана в em, поэтому знак растёт и убывает
   вместе с надписью и на узком экране не отрывается от неё. Ширину не
   фиксируем - пропорция знака держится сама. */
.shapka-ryad .logotip{display:inline-flex;align-items:center;
  gap:clamp(7px,.7vw,11px)}
/* Знак крупный, но строку шапки НЕ растит: отрицательные поля возвращают его
   вклад в высоту к прежним 1.75em, и знак выступает за строку симметрично.
   Иначе всё меню съезжает вниз вслед за логотипом. */
.shapka-ryad .logotip img{height:3.25em;width:auto;display:block;flex:0 0 auto;
  margin-top:-.75em;margin-bottom:-.75em}
/* Меню поверх первого экрана читалось слабо: тонкое начертание, мелкий кегль
   и светло-серый цвет на фотографии. Кегль поднят, начертание полужирное
   (600 у IBM Plex Mono подключён), цвет с третьего уровня на второй - он
   заметно темнее. Текущий раздел остаётся самым тёмным, чтобы отличаться. */
.menyu{
  display:flex;gap:clamp(12px,1.7vw,24px);flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:clamp(13px,1.15vw,15px);
  font-weight:600;letter-spacing:.05em;color:var(--tekst-vtor);
}
.menyu a,.menyu .tek{position:relative;padding-bottom:3px;white-space:nowrap}
.menyu a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--akcent);transition:right .18s;
}
.menyu a:hover{color:var(--tekst)}
.menyu a:hover::after{right:0}
.menyu .tek{color:var(--tekst);border-bottom:1px solid var(--akcent)}

/* --- заголовки --- */
.yarlyk{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.22em;
  color:var(--akcent);
}
h1.krupno{
  margin:22px 0 0;font-size:clamp(34px,5.4vw,82px);line-height:1.02;
  font-weight:800;letter-spacing:-.03em;text-wrap:balance;
}
h2.razdel-zag{
  margin:20px 0 0;font-size:clamp(26px,3.1vw,44px);line-height:1.1;
  font-weight:300;letter-spacing:-.02em;max-width:820px;text-wrap:balance;
}
h2.razdel-zag b{font-weight:800}
/* Заголовок витрины идёт одной строкой. Потолок 820 px её ломал: text-wrap
   разбивал фразу надвое. Ширину снимаем, перенос запрещаем, а на узком экране
   возвращаем - там строка физически не помещается. */
h2.razdel-zag.odna-stroka{max-width:none;white-space:nowrap;text-wrap:nowrap}
@media (max-width:900px){
  h2.razdel-zag.odna-stroka{white-space:normal;text-wrap:balance}
}
.vvod{
  margin:18px 0 0;max-width:640px;font-family:'IBM Plex Mono',monospace;
  font-size:clamp(14px,1.15vw,16px);line-height:1.7;color:var(--tekst-vtor);
}

/* --- сетки --- */
.setka{display:grid;gap:clamp(16px,2vw,28px);margin-top:clamp(26px,3vw,40px)}
.setka-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.setka-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* --- сферы: работы, разложенные по миру заказчика ---
   Строка на сферу, две доли: слева кто это, справа работы. Доли общие для
   всех строк, поэтому решения выстраиваются в колонку и читаются подряд.
   Прежняя сетка из шести карточек ложилась 4+2 и высоты плясали. */
/* КОЛОДА ГОРИЗОНТАЛЬНАЯ, решение владельца 28.08: строками сферы занимали
   слишком много высоты. Четыре карточки в ряд с прокруткой вбок - раздел
   умещается в один экран, а не в четыре.
   Прокрутка с прилипанием: карточка встаёт к левому краю, а не замирает
   между двумя. Четвёртая нарочно видна краем - это и есть подсказка, что
   колода продолжается; стрелки для этого не нужны. */
/* Стрелки колоды. Видны всегда: прокрутка вбок сама себя не объявляет, а
   край четвёртой карточки подсказывает слабо. Гаснут на упоре, чтобы было
   понятно, где колода кончилась. */
.koloda-shapka{display:flex;justify-content:flex-end;gap:8px;
  margin-top:clamp(18px,2vw,26px)}
/* 44x44 - размер цели по WCAG 2.2 для касания пальцем. Было 40, это выше
   минимума 24, но ниже усиленного 44. */
.strelka{width:44px;height:44px;padding:0;border:1px solid var(--liniya);
  background:none;cursor:pointer;position:relative;
  transition:border-color .18s ease,opacity .18s ease;
  -webkit-tap-highlight-color:transparent}
.strelka::before{content:'';position:absolute;top:50%;left:50%;
  width:9px;height:9px;margin:-5px 0 0 -3px;
  border-left:2px solid var(--tekst);border-bottom:2px solid var(--tekst)}
.strelka.nazad::before{transform:rotate(45deg)}
.strelka.vpered::before{transform:rotate(-135deg);margin-left:-6px}
.strelka:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){
  .strelka:not(:disabled):hover{border-color:var(--akcent)}
}
.strelka:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}

.sfery{margin-top:clamp(14px,1.5vw,20px);display:flex;
  gap:clamp(12px,1.4vw,20px);overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;
  padding-bottom:4px;
  /* Карточки выходят к самому краю страницы при прокрутке, а не упираются
     в поле обёртки: так видно, что за краем что-то есть. */
  margin-inline:calc(-1 * var(--polya));padding-inline:var(--polya);
  /* ВЫГЛЯД СЛЕВА. Прибавка к отступу прокрутки сдвигает точку прилипания:
     карточка встаёт не вплотную к полю, а на выглядок дальше, и слева
     всегда видно край предыдущей. Без этого колода на любой остановке
     выглядела началом - «дальше только вправо». */
  --vyglyad:clamp(16px,2.2vw,38px);
  scroll-padding-left:calc(var(--polya) + var(--vyglyad))}
.sfery::-webkit-scrollbar{display:none}
/* КАРТОЧКА СФЕРЫ: текст ПОВЕРХ кадра.
   Приём с карточек сфер Burro (снимок владельца 29.08): кадр занимает всю
   карточку, снизу затемнение, название крупно белым, подробности по
   наведению. Так карточка НЕ растёт в высоту от числа строк - у нас это была
   главная беда, из-за неё раздел и разъезжался. */
.sfera{flex:0 0 clamp(268px,25vw,340px);scroll-snap-align:start;
  /* Прямые углы, решение владельца 29.08: скругление было единственным
     украшением карточки и спорило с прямым набором сайта. */
  position:relative;overflow:hidden;border-radius:0;
  aspect-ratio:3/4;background:var(--fon-vtor);
  display:flex;align-items:flex-end}
.sfera-kadr{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(0.23,1,0.32,1)}
/* Затемнение снизу - без него белый текст на светлом небе не читается.
   Проверено замером: на кадре посёлка верх кадра почти белый. */
.sfera-tuman{position:absolute;inset:0;
  background:linear-gradient(to top,
    oklch(0.14 0.012 250 / .62) 0%,
    oklch(0.14 0.012 250 / .40) 30%,
    oklch(0.14 0.012 250 / .06) 60%,
    transparent 100%);
  transition:opacity .3s cubic-bezier(0.23,1,0.32,1)}
/* z-index обязателен: без него подложка с z-index:-1 проваливается ПОД
   снимок (у карточки нет своего контекста наложения). */
.sfera-tekst{position:relative;z-index:1;padding:clamp(16px,1.6vw,22px);
  width:100%;color:oklch(0.99 0 0)}
/* ПОДЛОЖКА ПОД ВЫЕХАВШИЙ ТЕКСТ. Градиент затемняет НИЗ кадра, а подробности
   выезжают вверх - на середину снимка, где бывает и небо, и белая стена.
   Текст там не читался. Подложка приходит вместе с текстом и уходит с ним.
   Верхние 26 px растворяем, чтобы у плашки не было ребра поперёк кадра. */
.sfera-tekst::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    oklch(0.12 0.012 250 / .74) 0%,
    oklch(0.12 0.012 250 / .74) calc(100% - 26px),
    oklch(0.12 0.012 250 / 0) 100%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .28s cubic-bezier(0.23,1,0.32,1)}
.sfera-imya{font-family:'IBM Plex Mono',monospace;font-size:clamp(14px,1.3vw,17px);
  letter-spacing:.06em;font-weight:600;color:oklch(0.99 0 0);
  line-height:1.25}
/* Подробности: закрыты, открываются наведением. Не display:none - иначе
   переход невозможен, и содержимое пропадает для читалки экрана. */
.sfera-podrobno{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .34s cubic-bezier(0.23,1,0.32,1),
             opacity .24s ease,margin-top .34s cubic-bezier(0.23,1,0.32,1)}
.sfera-kto{margin:0 0 10px;font-family:'IBM Plex Mono',monospace;
  font-size:12px;line-height:1.5;color:oklch(0.86 0.01 250)}
.itogi{list-style:none;margin:0;padding:0}
.itogi li{padding:7px 0;border-bottom:1px solid oklch(0.99 0 0 / .18);
  font-size:13.5px;line-height:1.4;color:oklch(0.97 0 0)}
.itogi li:last-child{border-bottom:0}
.sfera .chem{margin-top:10px;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.04em;color:oklch(0.86 0.01 250);
  display:flex;align-items:baseline;gap:9px}
.sfera .chem-yarlyk{font-size:10px;letter-spacing:.14em;
  color:oklch(0.74 0.01 250);flex:0 0 auto}
.sfera .chem a{border-bottom:1px solid oklch(0.72 0.19 55)}

@media (hover:hover) and (pointer:fine){
  .sfera:hover .sfera-podrobno,
  .sfera:focus-within .sfera-podrobno{max-height:340px;opacity:1;margin-top:12px}
  .sfera:hover .sfera-tuman,
  .sfera:focus-within .sfera-tuman{opacity:1.0}
  .sfera:hover .sfera-tekst::before,
  .sfera:focus-within .sfera-tekst::before{opacity:1}
  .sfera:hover .sfera-kadr{transform:scale(1.04)}
}
/* На пальцах наведения нет: подробности показываем всегда, иначе половина
   содержимого просто недоступна. */
@media (hover:none){
  /* ОБЫЧНЫЙ ПОТОК, А НЕ ФЛЕКС-РЯД. Карточка сверстана флексом ради того,
     чтобы текст прижимался к низу кадра; там кадр лежит слоем (absolute) и
     в ряду стоит один только текст. Здесь кадр становится обычным элементом
     и попадает в ТОТ ЖЕ ряд - текст сжимался в ноль ширины и пропадал
     совсем: владелец видел серый прямоугольник и кадр внизу (29.08). */
  .sfera{aspect-ratio:auto;display:block;background:transparent}
  .sfera-podrobno{max-height:none;opacity:1;margin-top:12px}
  .sfera-kadr{position:relative;height:auto;aspect-ratio:16/10}
  .sfera-tuman{display:none}
  .sfera-tekst{color:var(--tekst);padding-inline:0}
  .sfera-tekst::before{display:none}   /* текст стоит под кадром, на светлом */
  .sfera-imya{color:oklch(0.55 0.19 55)}
  .sfera-kto{color:var(--tekst-vtor)}
  .itogi li{color:var(--tekst);border-bottom-color:var(--liniya)}
  .sfera .chem{color:var(--tekst-vtor)}
  .sfera .chem-yarlyk{color:var(--tekst-tret)}
}
@media (prefers-reduced-motion:reduce){
  .sfera-kadr,.sfera-podrobno,.sfera-tuman,.sfera-tekst::before{transition:none}
  .sfera:hover .sfera-kadr{transform:none}
}

/* Призыв сразу после колоды: раздел больше не кончается ничем. */
.posle-kolody{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,2vw,28px);margin-top:clamp(22px,2.4vw,32px);
  padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--liniya)}
.posle-kolody p{margin:0;flex:1 1 320px;max-width:56ch;
  font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.7;
  color:var(--tekst-vtor)}

/* --- карточки --- */
.kartochka{border-top:3px solid var(--akcent);padding-top:18px;
  display:flex;flex-direction:column;height:100%}
.kartochka.sin{border-top-color:var(--sinij)}
.kartochka.ser{border-top-color:var(--tekst-tret)}
.kartochka h3{margin:10px 0 0;font-size:clamp(18px,1.6vw,22px);font-weight:800;
  letter-spacing:-.01em}
.kartochka .nadpis{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:var(--tekst-tret)}
.kartochka p{margin:12px 0 0;font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;line-height:1.65;color:var(--tekst-vtor)}

/* таблица характеристик прижата к низу - тогда у всех карточек она в одной полосе */
.harakteristiki{margin-top:auto;border-top:1px solid var(--liniya);padding-top:16px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.95}
.harakteristiki .stroka{display:flex;justify-content:space-between;gap:10px}
.harakteristiki .imya{color:var(--tekst-tret)}
.harakteristiki .znachenie{font-weight:600;color:oklch(0.20 0.012 250);white-space:nowrap}

/* --- лента снимков, без скриптов --- */
.ramka-lenty{position:relative;width:100%;aspect-ratio:4/3;margin-bottom:16px;
  background:oklch(0.94 0.004 250);overflow:hidden}
.lenta{display:flex;width:100%;height:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth}
.lenta::-webkit-scrollbar{display:none}
.lenta img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;
  scroll-snap-align:center;display:block}
.tochki{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:center}
.tochki a{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent}
.tochki a::before{content:'';width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.28);
  transition:transform .15s,background .15s}
.tochki a.tek::before{background:#fff;transform:scale(1.25);
  box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.zaglushka{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  color:oklch(0.68 0.008 250)}

/* --- перечни и мелкие блоки --- */
.perechen{font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.75;
  color:var(--tekst-vtor);margin-top:7px}
.podzagolovok-bloka{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:var(--akcent)}
.polosa{border-top:1px solid var(--liniya);padding-top:22px}
/* Кегль подобран под САМУЮ ДЛИННУЮ ячейку - перечень каналов. Замер: при
   34 пикселях надпись «RTK · 4G · WiFi · RC» требует 371 пиксель, а ячейка
   даёт 273. Одним зазором не обойтись: даже сведя его в ноль, получим 292.
   Поэтому уменьшены оба - и кегль, и промежуток между ячейками. */
.chislo{font-size:clamp(21px,1.9vw,26px);font-weight:600;line-height:1.1;
  white-space:nowrap}
.podpis-chisla{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:oklch(0.44 0.012 250);margin-top:6px;line-height:1.5}

/* --- состояния --- */
.sostoyanie{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em}
.rabotaet{color:var(--zelenyj)}
.gotovim{color:var(--tekst-tret)}

/* --- кнопка --- */
.knopka{display:inline-flex;align-items:center;gap:13px;border:1px solid var(--akcent);
  padding:13px 22px;font-size:13px;letter-spacing:.10em;color:var(--akcent);
  transition:background .15s,color .15s}
.knopka:hover{background:var(--akcent);color:oklch(0.98 0.01 60)}

/* --- подвал --- */
.podval{margin-top:var(--shag);border-top:1px solid var(--liniya);
  padding:34px var(--polya) 44px}
.podval-ryad{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:1440px;margin:0 auto}
.podval-menyu{display:flex;gap:clamp(12px,1.8vw,24px);flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;
  color:var(--tekst-tret)}
.podval-menyu a:hover{color:var(--tekst)}
.podval-niz{max-width:1440px;margin:18px auto 0;font-family:'IBM Plex Mono',monospace;
  font-size:12px;color:var(--tekst-tret)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- первый экран главной ---
   Устройство: видео на весь экран, поверх только шапка и заголовок. Паспорт
   машины вынесен ОТДЕЛЬНОЙ секцией под видео - иначе ему нужна подложка,
   а подложка закрывает машину. */
.geroy{position:relative;height:min(88vh,860px);min-height:460px;overflow:hidden}
.geroy video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.geroy-tuman{position:absolute;inset:0;background:linear-gradient(180deg,
  oklch(0.99 0.003 250/.86) 0%, oklch(0.99 0.003 250/.34) 11%,
  oklch(0.99 0.003 250/0) 26%, oklch(0.99 0.003 250/0) 44%,
  oklch(0.99 0.003 250/.30) 62%, oklch(0.99 0.003 250/.76) 80%,
  oklch(0.99 0.003 250/.97) 94%, var(--fon) 100%)}
.geroy-soderzhimoe{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:clamp(16px,2.4vw,40px) var(--polya) clamp(20px,3vw,44px)}
/* ширину НЕ трогаем: у .obolochka сетка 1440, та же что у логотипа. И сужение,
   и снятие ограничения одинаково уводят левую кромку от логотипа. */
.geroy-podzag{color:oklch(0.44 0.19 45);font-weight:600;max-width:none;text-wrap:pretty}
/* 02.09: фраза первого экрана стала длиннее («Гусеничные и колёсные роботы...») и
   упиралась в потолок ширины .vvod - «площадок» уезжало на вторую строку. */

/* ПЕРВЫЙ ЭКРАН РАЗДЕЛА «ТЕХНОЛОГИИ». Тёмный на светлом сайте намеренно: это
   взгляд лидара, и он в этом разделе главный. Сюда встанет видео с рендеров
   (вид сверху вперемежку с видом из кабины); до него фоном идёт то же облако
   точек, что и в блоке ниже. */
/* Высота на пятую часть меньше первого экрана главной, решение владельца
   29.08. Селектор из ДВУХ классов намеренно: ниже по файлу стоит правило
   .geroy для широких экранов (100vh - 170px), и с одним классом оно
   перебивало эту высоту - замер показывал 730 px вместо заданных. */
.geroy.geroy-teh{height:clamp(340px,calc(0.8 * (100svh - 170px)),780px);
  background:oklch(0.12 0.016 250)}
.geroy-teh .oblako-fon{position:absolute;inset:0;width:100%;height:100%;
  display:block}
/* Видео лежит ПОВЕРХ облака: облако остаётся подложкой на время загрузки.
   z-index обязателен - в разметке видео идёт ПЕРЕД облаком, и без него
   облако рисуется сверху и закрывает кадр (проверено на боевом 29.08). */
.geroy-teh .geroy-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:1}
.geroy-teh .geroy-soderzhimoe{z-index:2}
/* Затемнение снизу вверх: текст стоит внизу, и без подложки белое по точкам
   не читается. Сверху кадр остаётся открытым. */
.geroy-teh .geroy-soderzhimoe{background:linear-gradient(to top,
  oklch(0.10 0.014 250 / .92) 0%, oklch(0.10 0.014 250 / .74) 26%,
  oklch(0.10 0.014 250 / .20) 58%, transparent 100%)}
.geroy-teh .krupno{color:oklch(0.99 0 0);font-size:clamp(30px,4.6vw,68px)}
.geroy-teh .krupno b{font-weight:800}
.yarlyk-temnyj{color:oklch(0.80 0.15 60)}
.geroy-podzag-teh{color:oklch(0.86 0.012 250);max-width:56ch}
/* Пока шапка прозрачная и лежит на тёмном экране - её буквы светлые. Как
   только читатель прокрутил и шапка стала плотной (светлая подложка), она
   возвращается к обычному чёрному: правила ниже действуют ТОЛЬКО до этого. */
.shapka.nad-temnym:not(.plotnaya) .logotip span,
.shapka.nad-temnym:not(.plotnaya) .menyu a,
.shapka.nad-temnym:not(.plotnaya) .menyu .tek{color:oklch(0.99 0 0)}
.shapka.nad-temnym:not(.plotnaya) .menyu .tek{border-bottom-color:oklch(0.99 0 0)}
.shapka.nad-temnym:not(.plotnaya) .knopka-menyu span{background:oklch(0.99 0 0)}
/* Знак на тёмном - отдельный файл veter-znak-svet.png (подставляет сборщик).
   Фильтром invert его красить нельзя: оранжевая часть уходит в синий. Когда
   шапка стала плотной, светлый знак остаётся - и на светлой подложке пропал
   бы, поэтому там возвращаем ему чёрный тем же фильтром. */
.shapka.nad-temnym.plotnaya .logotip img{filter:invert(1) hue-rotate(180deg)}
/* Числа опущены ниже, а под ними оставлен воздух: 29.08 с первого экрана
   снята кнопка «ОБСУДИТЬ ЗАДАЧУ», и на её месте снизу стал выглядывать
   следующий раздел (замерено на 1440x900: 109 px). Возвращаем на место тот
   же вертикальный объём, что занимала кнопка. */
.pasport{padding-top:clamp(38px,8vw,120px);
  padding-bottom:clamp(20px,5vw,74px)}
/* Промежуток между ключевыми числами сужен: он отдаёт ширину ячейкам. */
.pasport .setka{gap:clamp(10px,1.1vw,16px)}
.pasport .chislo{font-weight:600}

@media (max-width:700px){
  /* Кадр важнее текста: заголовок прижат к низу, верх экрана отдан машине.
     Подложек под текстом больше нет - они закрывали видео. */
  /* Кадр 16:9, окно высокое - при заполнении по высоте в него попадает лишь
     часть кадра. Чем НИЖЕ окно, тем больше видно: при 74vw видно около 76%%
     кадра против 43%% при прежней высоте. */
  .geroy{height:min(74vw,52vh);min-height:250px}
  /* У технологий свой первый экран: на телефоне общее правило сжимало его до
     289 px, и облако превращалось в полоску (замерено 29.08). */
  .geroy.geroy-teh{height:min(62vh,512px);min-height:352px}
  .geroy-soderzhimoe{padding:10px var(--polya) 14px}
  .geroy-tekst{max-width:none}
  .geroy h1.krupno{font-size:clamp(19px,5.6vw,34px);line-height:1.08;margin:0}
  .geroy-podzag{font-size:10.5px;line-height:1.45;margin-top:7px}
  .geroy-tuman{background:linear-gradient(180deg,
    oklch(0.99 0.003 250/.80) 0%, oklch(0.99 0.003 250/.22) 13%,
    oklch(0.99 0.003 250/0) 28%, oklch(0.99 0.003 250/0) 40%,
    oklch(0.99 0.003 250/.42) 58%, oklch(0.99 0.003 250/.86) 78%,
    oklch(0.99 0.003 250/.99) 93%, var(--fon) 100%)}
  /* Шапка: логотип и меню в одной строке, меню лентой с прокруткой.
     Отдельный блок из двух строк съедал кадр. */
  .shapka-ryad{flex-wrap:nowrap;align-items:center;gap:12px}
  .shapka-ryad .logotip{font-size:12px;white-space:nowrap;flex:0 0 auto}
  /* Меню - выпадающий список по кнопке. Лента с прокруткой прятала три пункта
     из пяти за правым краем: формально они были, нажать их было нельзя. */
  .knopka-menyu{display:flex}
  .menyu{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;font-size:14px;letter-spacing:.04em;
    background:var(--fon);
    box-shadow:0 12px 24px oklch(0.16 0.012 250/.10);
    border-top:1px solid var(--liniya);padding:6px 0}
  .shapka.otkryto .menyu{display:flex}
  .menyu a,.menyu .tek{padding:13px var(--polya);white-space:normal;
    border-bottom:1px solid var(--liniya)}
  .menyu a:last-child,.menyu .tek:last-child{border-bottom:none}
  .menyu a::after{display:none}
  .menyu .tek{color:var(--akcent);border-bottom:1px solid var(--liniya)}
  .shapka{padding-bottom:clamp(12px,1.5vw,20px)}
  .shapka-ryad{position:relative}
  .pasport .setka{grid-template-columns:1fr 1fr;gap:14px 16px}
  .chislo{white-space:normal}
  .pasport .chislo{font-size:23px}
  .pasport .podpis-chisla{font-size:9.5px;letter-spacing:.10em}
}

/* --- БЛОК «ОБЛАКО»: что робот видит лидаром -----------------------------
   Экран из макета. Две анимации: облако течёт сверху вниз (techenie),
   дуга прорисовывается штрихом и по ней бежит точка (risovanie).
   Кадр всегда тёмный: это показания прибора, а не оформление страницы. */
.kadr-oblaka{position:relative;margin-top:clamp(22px,3vw,34px);
  border:1px solid var(--liniya);border-radius:4px;overflow:hidden;
  background:oklch(0.14 0.018 250);aspect-ratio:16/10}
.kadr-oblaka svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* БЕЗ предка: точки лежат в <defs> и выводятся через <use>, а правило
   с предком до клонов внутри <use> не доходит - облако становилось чёрным. */
.to{fill:oklch(0.72 0.02 250)}
.tb{fill:oklch(0.80 0.13 195)}
.td{fill:oklch(0.62 0.015 250)}
.sled{stroke:oklch(0.74 0.19 55);stroke-width:2.5;stroke-linecap:round;
  --dlina:420;animation:risovanie 7s linear infinite}
.begunok{fill:oklch(0.88 0.15 60)}
.techenie{animation:techenie 16s linear infinite}
@keyframes techenie{from{transform:translateY(-900px)}to{transform:translateY(0)}}
@keyframes risovanie{0%{stroke-dashoffset:var(--dlina);opacity:0}6%{opacity:1}
  55%{stroke-dashoffset:0;opacity:1}82%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}}

.metka-vyezda{font-family:'IBM Plex Mono',monospace;font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.2em;color:oklch(0.74 0.19 55);margin-bottom:clamp(10px,1.4vw,20px)}

/* Замеры вынесены ПОД кадр: на кадре они закрывали облако, ради которого
   блок и стоит, а на узком экране не помещались вовсе. */
.zamery-oblaka{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,52px);
  align-items:flex-end;margin-top:clamp(16px,2vw,26px);
  font-family:'IBM Plex Mono',monospace}
.chislo-zamera{font-size:clamp(22px,2.6vw,34px);font-weight:600;
  color:var(--tekst);font-variant-numeric:tabular-nums}
.podpis-zamera{font-size:clamp(9px,.85vw,11px);letter-spacing:.14em;
  color:var(--tekst-tret);margin-top:6px}
.pometa-zamera{margin-left:auto;font-size:clamp(9px,.85vw,11px);letter-spacing:.14em;
  color:var(--tekst-tret);text-align:right;line-height:1.9}

@media (max-width:700px){
  .kadr-oblaka{aspect-ratio:16/10;border:0;border-radius:0}
  .kadr-oblaka svg{position:relative;aspect-ratio:16/10;
    border:1px solid var(--liniya);border-radius:4px}
  .zamery-oblaka{gap:14px 22px}
  .pometa-zamera{margin-left:0;text-align:left;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .techenie,.sled{animation:none}
  .sled{stroke-dashoffset:0;opacity:1}
}

/* Два кадра рядом: живой вид с камеры и он же точками лидара.
   На узком экране становятся друг под другом. */
.dva-kadra{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(22px,3vw,34px)}
.dva-kadra figure{margin:0}
.kadr-kamery video{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border:1px solid var(--liniya);border-radius:4px;background:oklch(0.14 0.018 250)}
.dva-kadra figcaption{margin-top:10px;font-family:'IBM Plex Mono',monospace;
  font-size:clamp(9px,.85vw,11px);letter-spacing:.14em;color:var(--tekst-tret)}
.dva-kadra .kadr-oblaka{margin-top:0}
.figura-oblaka{margin:0}

/* Надпись вынесена ИЗ кадра: в макете кадр был во всю ширину экрана, а в паре
   с кадром камеры он вдвое уже, и текст закрывал облако целиком. */
.pod-kadrami{margin-top:clamp(20px,2.6vw,32px);max-width:74ch}
.pod-kadrami h3{margin:0;font-size:clamp(20px,2.5vw,34px);line-height:1.08;
  font-weight:300;letter-spacing:-.01em;text-wrap:balance}
.pod-kadrami h3 b{font-weight:800}
.pod-kadrami p{margin:clamp(10px,1.2vw,16px) 0 0;max-width:56ch;
  font-family:'IBM Plex Mono',monospace;font-size:clamp(12px,1.05vw,14.5px);
  line-height:1.65;color:var(--tekst-vtor)}
@media (max-width:700px){
  .dva-kadra{grid-template-columns:1fr;gap:22px}
}

/* Переход по якорю ставил метку раздела ПОД липкую шапку: на 390 от строки
   «02 · БЛОК УПРАВЛЕНИЯ» была видна половина. Отводим на высоту шапки. */
[id]{scroll-margin-top:calc(var(--shag) + 18px)}

/* Плавная прокрутка - тоже движение: при просьбе его уменьшить она отключается
   вместе с остальным. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* --- РАЗДЕЛ «ПОЛНЫЙ ЦИКЛ» НА РАЗЛЁТЕ ПЛАТЫ -----------------------------
   Плата разбирается по прокрутке. Полоса задаёт длину разбора: чем выше,
   тем медленнее разлёт. Кадр липкий, текст меняется по ходу. */
/* 29.08: раздел сжат по требованию владельца - «не помещается на экран».
   Было: дорожка 420vh и липкая часть 100vh, которую сверху накрывала шапка,
   то есть кадр начинался под ней. Стало: дорожка короче, а липкая часть
   ровно на видимую высоту. */
/* 29.08, вторая правка: раздел теперь РОВНО экран. Заголовок переехал внутрь
   липкого кадра, и кадр разложен сеткой в три строки - заголовок, сцена,
   подпись шага. Раньше заголовок стоял снаружи, экран занимал он, а плата
   уходила под кромку. Раздел без вертикальных отступов: они добавлялись к
   экрану и снова выталкивали содержимое. */
/* 03.09: снимки сфер грузятся после ворот hero-видео (data-src); пока src нет, браузер показывает alt текстом
   («робот на обочине с мульчером») - владелец: убрать. Текст alt прозрачный до загрузки. */
img.sfera-kadr[data-src]{color:transparent;font-size:0}
.razlet{padding-top:0;padding-bottom:0;margin-top:var(--shag)}/* 03.09 владелец: кнопка «Все новости» прилипала к блоку - отступ как между разделами */
.razlet-polosa{position:relative;height:300vh}
.razlet-lipkiy{position:sticky;top:var(--shapka-vys);
  height:calc(100svh - var(--shapka-vys));overflow:hidden}
/* ДВЕ КОЛОНКИ: слева текст, справа плата. Правая доля чуть больше - плата
   стоит наискось и по ширине занимает больше, чем кажется. */
/* ПЛАТА ФОНОМ ВО ВЕСЬ БЛОК (владелец 03.09: «сделаем во весь блок фоном эту прокрутку, а текст
   наложим сверху»). Сцена лежит абсолютно под всем липким блоком, текст одной колонкой слева поверх. */
.razlet-set{height:100%;display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  padding-block:clamp(12px,2.2vh,28px)}
.razlet-tekst{position:relative;z-index:1;max-width:min(52ch,46%)}
.razlet-shapka .razdel-zag{margin-top:6px}
.razlet-shapka .vvod{margin-top:clamp(8px,1.2vh,14px)}
/* Сцена занимает ВСЮ высоту своей колонки: minmax(0,1fr) и min-height:0
   обязательны, иначе колонка растёт под содержимое холста и кадр вылезает
   за экран. */
.razlet-scena{position:absolute;inset:0;z-index:0}
.holst-razleta{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform;contain:strict}
/* Затенение слева под текст: статичный градиент, композитору ничего не стоит. */
.razlet-scena::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,16,21,.82) 0%,rgba(16,16,21,.55) 34%,rgba(16,16,21,0) 60%)}/* 03.09: холст ровно под кадр 16:9 по центру панели - вдвое меньше пикселей на отправку в композитор каждый кадр *//* 03.09: свой слой, перерисовка холста не задевает текст */
.razlet-zagruzka{position:absolute;inset:0;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--tekst-tret)}

/* Подписи шагов стоят под заголовком в левой колонке. Высота задана заранее
   по самому длинному шагу: иначе смена текста дёргала бы колонку, а вместе
   с ней и всю сетку. */
.razlet-podpisi{position:relative;
  margin-top:clamp(18px,3vh,42px);min-height:clamp(190px,30vh,290px)}
.razlet-shag{position:absolute;max-width:min(48ch,84vw);opacity:0;
  transform:translateY(10px);pointer-events:none;
  transition:opacity .22s cubic-bezier(0.23,1,0.32,1),
             transform .22s cubic-bezier(0.23,1,0.32,1)}
.razlet-shag.vidno{opacity:1;transform:none}
.razlet-nomer{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.18em;color:var(--akcent)}
/* Вес 800, как у выделения в заголовке раздела: решение владельца 29.08 -
   «все эти шаги должны быть такими жирными». Тонкое начертание 300 делало
   из шага подпись к картинке, а шаг здесь и есть главное слово блока. */
.razlet-shag h3{margin:10px 0 0;font-size:clamp(20px,2.6vw,34px);line-height:1.1;
  font-weight:800;letter-spacing:-.01em}
/* Крупнее и темнее, решение владельца 29.08: «место позволяет, и мы этим
   гордимся». Мелкий вторичный набор годился, пока это была подпись под
   кадром; в своей колонке это основной текст блока. */
.razlet-shag p{margin:14px 0 0;max-width:46ch;font-family:'IBM Plex Mono',monospace;
  font-size:clamp(14px,1.35vw,19px);line-height:1.6;color:var(--tekst)}

.razlet-hod{display:none}/* 03.09 владелец: оранжевую полосу хода спрятать */
.razlet-hod-staraya{position:absolute;right:clamp(20px,4vw,40px);top:50%;
  transform:translateY(-50%);width:2px;height:min(260px,36vh);
  background:var(--liniya)}
.razlet-hod-zapoln{position:absolute;inset:0 0 auto 0;background:var(--akcent);height:0}

/* Пока сцена не загрузилась, полоса не должна занимать четыре экрана пустоты. */
/* Правило «пока не готов - 52vh» СНЯТО 02.09: с кадрами вместо 3D-сцены блок
   грузится быстро, а прыжок высоты при загрузке владелец назвал багом. */

@media (max-width:700px){
  .razlet-polosa{height:260vh}
  .razlet-shag p{max-width:none}
  /* Две колонки на телефоне не помещаются: плата сверху, текст под ней.
     Порядок задан явно - сцена идёт первой строкой. */
  /* ТЕЛЕФОН: как было до фона (владелец 03.09: «на мобильниках оставь как раньше, иначе сильно
     растягивается») - плата сверху панелью 16:9, текст под ней, кадр целиком. */
  .razlet-set{grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;gap:clamp(10px,2vh,18px);align-items:center}
  .razlet-tekst{max-width:none}
  .razlet-scena{position:relative;inset:auto;min-height:0;height:100%;order:-1}
  .razlet-scena::after{display:none}
  .holst-razleta{inset:0;margin:auto;height:auto;aspect-ratio:16/9;max-height:100%}
  .razlet-podpisi{margin-top:clamp(10px,2vh,18px);
    min-height:clamp(140px,22vh,200px)}
}
@media (prefers-reduced-motion:reduce){
  .razlet-shag{transition:none}
}

/* --- ВХОД КАРТОЧЕК МАШИН ------------------------------------------------
   Карточки на витрине человек видит один-два раза, и это тот редкий случай,
   когда движение уместно: оно убирает рывок, с которым четыре карточки
   возникали разом. Меню и таблицы так НЕ трогаем - их читают и жмут часто.

   Двигаем только смещение и прозрачность: они не вызывают пересчёт разметки
   и считаются видеоядром. */
/* ПРЯЧЕТ СЦЕНАРИЙ, А НЕ СТИЛЬ. Сперва было наоборот: карточки скрывались
   стилем и показывались классом, а на случай отказа наблюдателя стоял показ
   по таймеру в полторы секунды. Таймер отсчитывался от ЗАГРУЗКИ страницы, и
   пока читатель прокручивал до раздела, всё уже было показано - въезда никто
   не видел. Теперь класс «скрыта» вешает сценарий: нет сценария - нет и
   скрытия, страховка не нужна. */
.kartochka{position:relative;border-top:0;
  transition:opacity .32s cubic-bezier(0.23,1,0.32,1) calc(var(--nomer,0) * 60ms),
             transform .32s cubic-bezier(0.23,1,0.32,1) calc(var(--nomer,0) * 60ms)}
.kartochka.skryta{opacity:0;transform:translateY(12px)}

/* Оранжевая линия сверху прочерчивается слева направо. Это подпись раздела
   «сделано руками», а не украшение ради украшения. Линия отдельным слоем:
   рамку по границе масштабировать нельзя. */
.kartochka::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--akcent);transform-origin:left;
  transition:transform .42s cubic-bezier(0.23,1,0.32,1)
             calc(var(--nomer,0) * 60ms + 80ms)}
.kartochka.skryta::before{transform:scaleX(0)}
.kartochka.sin::before{background:var(--sinij)}
.kartochka.ser::before{background:var(--tekst-tret)}

/* Снимки грузятся лениво и выскакивали готовыми. Проявление ставится только
   когда сценарий жив: без него класса нет и снимки видны сразу. */
.lenta.plavno img{opacity:0;transition:opacity .24s ease-out}
.lenta.plavno img.zagruzhena{opacity:1}

/* Отклик на нажатие точки. Наведение закрыто по указателю: на телефоне оно
   срабатывает от касания и залипает. */
.tochki a:active::before{transform:scale(0.88)}
@media (hover:hover) and (pointer:fine){
  .tochki a:hover::before{background:#fff;transform:scale(1.35)}
}

@media (prefers-reduced-motion:reduce){
  /* Проявление оставляем - оно помогает понять, что появилось. Сдвиг и
     прочерк убираем: это движение, а его и просили меньше. */
  .kartochka.skryta{transform:none}
  .kartochka{transition:opacity .32s ease}
  .kartochka.skryta::before{transform:scaleX(1)}
  .kartochka::before{transition:none}
}

/* --- ПЕРВЫЙ ЭКРАН НА БОЛЬШОМ МОНИТОРЕ ----------------------------------
   Кнопка «Обсудить задачу» уходила за нижний край на 95 пикселей: заголовок
   был прижат к низу кадра, а числа с кнопкой начинались уже под ним.
   Поднимаем текст и числа. Видео перекрывается больше - это осознанно:
   кнопка на первом экране важнее лишней полосы кадра.
   Телефон не трогаем: там раскладка уже подобрана отдельно. */
@media (min-width:701px){
  /* Высота кадра ПРИВЯЗАНА К ОКНУ, а не к потолку в пикселях. Прежнее
     min(80vh,780px) переставало расти на высоких мониторах: содержимое
     первого экрана кончалось на 906, а окно было 1100 - и заголовок
     следующего блока лез в кадр на 134 пикселя.
     Под кадром живёт полоса чисел с кнопкой, она примерно 126 px, плюс отступ
     раздела 60. Отсюда вычет 170: заголовок «МАШИНЫ» встаёт на 16 пикселей
     ниже кромки при ЛЮБОЙ высоте окна. */
  .geroy{height:clamp(460px,calc(100vh - 170px),1200px)}
  /* Текст отрывается от нижней кромки, но остаётся в нижней трети: над ним
     машина, под ним числа. */
  /* Отступ снизу поднимает текст. Уменьшен 28.08: заголовок следующего блока
     «МАШИНЫ» начинался ровно на отметке экрана и вылезал на мониторах чуть
     ниже. Опускаем весь блок примерно на 45 пикселей. */
  .geroy-soderzhimoe{padding-bottom:clamp(30px,4vh,62px)}
  /* Числа заходят на кадр. В этом месте туман уже почти сплошной фон,
     поэтому читаемость не страдает. */
  /* Промежуток между подзаголовком и числами был 51 пиксель - слишком большой
     разрыв внутри одного экрана. Сжат примерно до 28: числа поднялись ближе к
     тексту, а кнопка получила больше запаса снизу. */
  /* Отрицательный отступ уменьшен ровно на столько же, на сколько уменьшен
     отступ выше: промежуток между подзаголовком и числами остаётся 28 px. */
  .pasport{position:relative;z-index:1;
    margin-top:calc(-1 * clamp(20px,2.5vh,38px));
    padding-top:clamp(10px,1.2vw,16px)}
}

/* --- ВИТРИНА МАШИН: характеристики слева, машина в центре, кадры справа ---
   Заменила три карточки в ряд. Замысел владельца 28.08 - «типа ангара в игре
   танки»: машина крупно, числа полосками, живые кадры рядом. Тема светлая.

   ВКЛАДКИ ЧЕРЕЗ ВЫРЕЗКУ (рецепт Emil Kowalski): список продублирован, копия
   оформлена активной и закрыта clip-path, который по ней ездит. Сводить цвет
   текста и подчёркивания по отдельности «никогда не садится ровно». */
.vkladki{position:relative;margin-top:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--liniya)}
.ryad{display:flex;gap:0}
.ryad button{appearance:none;border:0;background:none;cursor:pointer;
  padding:13px clamp(12px,1.5vw,24px);font-family:'Unbounded',sans-serif;
  font-size:clamp(13px,1.1vw,16px);font-weight:600;letter-spacing:-.01em;
  color:var(--tekst-tret);white-space:nowrap;
  transition:color .2s cubic-bezier(0.23,1,0.32,1)}
.ryad-aktiv{position:absolute;inset:0;pointer-events:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .28s cubic-bezier(0.77,0,0.175,1)}
.ryad-aktiv button{color:var(--akcent)}
.ryad-aktiv::after{content:'';position:absolute;left:var(--levo);width:var(--shirina);
  bottom:-1px;height:2px;background:var(--akcent)}
@media (hover:hover) and (pointer:fine){.ryad button:hover{color:var(--tekst)}}

.vitrina{display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.5fr) minmax(0,0.7fr);
  gap:clamp(18px,2.4vw,42px);margin-top:clamp(22px,2.6vw,36px);align-items:start}
/* Сцена студийная: светлое пятно под машиной и лёгкое затемнение к краям.
   В играх ангар тёмный, но единая светлая тема сайта важнее сходства. */
/* pan-y: вертикальную прокрутку страницы отдаём браузеру, горизонтальный
   жест забираем себе под листание снимков. */
.kadr{position:relative;aspect-ratio:16/10;overflow:hidden;touch-action:pan-y;
  background:radial-gradient(120% 90% at 50% 78%,
    oklch(0.995 0.002 250) 0%, oklch(0.955 0.004 250) 58%, oklch(0.915 0.006 250) 100%);
  border-top:3px solid var(--akcent)}
.kadr.sin{border-top-color:var(--sinij)}
.kadr.ser{border-top-color:var(--tekst-tret)}
/* Снимки лежат стопкой. Наплыв с размытием: без него глаз видит два предмета,
   меняющихся местами, а не одно превращение. Ниже 20 px - тяжёлое дорого. */
.kadr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:blur(6px);transform:scale(1.02);
  transition:opacity .34s cubic-bezier(0.23,1,0.32,1),
             filter .34s cubic-bezier(0.23,1,0.32,1),
             transform .34s cubic-bezier(0.23,1,0.32,1)}
.kadr img.vidno{opacity:1;filter:blur(0);transform:none}

/* Листание нажатием по краям снимка. Зона треть кадра с каждой стороны: у́же
   промахиваются пальцем, шире - середина перестаёт быть просто картинкой.
   Стрелка обязательна: без неё нажимаемый край угадать нельзя, и получается
   «нажал и не понял», только наоборот - не нажал, потому что не знал. */
.kadr .listat{position:absolute;top:0;bottom:0;width:33%;z-index:2;
  border:0;padding:0;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.kadr .nazad{left:0}
.kadr .vpered{right:0}
.kadr .listat::before{content:'';position:absolute;top:50%;margin-top:-7px;
  width:13px;height:13px;border-left:2px solid var(--tekst);
  border-bottom:2px solid var(--tekst);opacity:0;
  transition:opacity .18s cubic-bezier(0.23,1,0.32,1)}
.kadr .nazad::before{left:18px;transform:rotate(45deg)}
.kadr .vpered::before{right:18px;transform:rotate(-135deg)}
.kadr .listat:active::before{opacity:1}
.kadr .listat:focus-visible{outline:2px solid var(--akcent);outline-offset:-2px}
.kadr .listat:focus-visible::before{opacity:1}
@media (hover:hover) and (pointer:fine){
  .kadr:hover .listat::before{opacity:.4}
  .kadr .listat:hover::before{opacity:1}
}
/* На пальцах наведения нет, поэтому стрелки видны постоянно - иначе край
   остаётся нажимаемым, но никак не обозначенным. */
@media (hover:none){ .kadr .listat::before{opacity:.45} }
@media (prefers-reduced-motion:reduce){ .kadr .listat::before{transition:none} }

.pod-kadrom{display:flex;align-items:center;gap:14px;margin-top:12px}
.tochki-vitriny{display:flex;gap:8px}
.tochki-vitriny button{width:26px;height:26px;padding:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.tochki-vitriny span{width:7px;height:7px;border-radius:50%;background:var(--liniya);
  transition:background .18s,transform .18s cubic-bezier(0.23,1,0.32,1)}
.tochki-vitriny button[aria-current='true'] span{background:var(--akcent);transform:scale(1.3)}
.tochki-vitriny button:active span{transform:scale(0.8)}
.schet{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--tekst-tret);font-variant-numeric:tabular-nums}

.vitrina .shassi{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:var(--tekst-tret)}
.vitrina h3{margin:8px 0 0;font-size:clamp(22px,2.4vw,34px);font-weight:800;
  letter-spacing:-.015em}
.vitrina .opis{margin:12px 0 0;max-width:46ch;font-family:'IBM Plex Mono',monospace;
  font-size:13.5px;line-height:1.7;color:var(--tekst-vtor)}

/* Характеристики полосками: длина - доля от наибольшего в линейке, число
   подписано рядом. Разница читается взглядом, а не чтением. */
.har{margin-top:clamp(16px,2vw,26px);font-family:'IBM Plex Mono',monospace;font-size:13px}
.har .stroka{padding:9px 0;border-bottom:1px solid var(--liniya)}
.har .verh{display:flex;justify-content:space-between;gap:16px}
.har .imya{color:var(--tekst-tret)}
.har .znach{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.har .zhelob{margin-top:7px;height:4px;background:oklch(0.90 0.006 250);overflow:hidden}
.har .poloska{height:100%;width:0;background:var(--akcent);
  transition:width .5s cubic-bezier(0.23,1,0.32,1)}
.har .stroka.sin .poloska{background:var(--sinij)}
.vitrina .naves{margin-top:20px}
/* Навесное метками, а не строкой через точки. Строкой перечень шёл 12.5 px
   цветом --tekst-vtor и читался сноской - при том что прямо над ним стоят
   метки управления рамками. Берём тот же язык: рамка, моноширинный, но цвет
   основной, потому что это содержание карточки, а не примечание. */
/* Вес 600, а не 700: у IBM Plex Mono подключены только 400, 500 и 600, и на
   700 браузер подставил бы поддельный жир. */
.vitrina .naves .podzagolovok-bloka{font-weight:600}
/* БЕЗ РАМОК. Рамка обещает нажатие, а модули не нажимаются - владелец:
   «к чему эта стилистика кнопок, если они не нажимаются». Читаемость держим
   кеглем и цветом, а не обводкой: 15 px основным цветом, крупнее описания
   (13.5) и характеристик (13), потому что перечень модулей - то, ради чего
   машину берут под задачу. Разделитель светлый, он служебный. */
.naves-spisok{display:flex;flex-wrap:wrap;row-gap:4px;margin-top:10px;
  font-family:'IBM Plex Mono',monospace;font-size:15px;line-height:1.65;
  color:var(--tekst)}
.naves-metka{white-space:nowrap}
.naves-metka:not(:last-child)::after{content:'·';margin:0 10px;
  color:var(--liniya)}

/* Живые кадры. Столбец показывается только там, где они есть: у ВЕТЕР снимки
   студийные, у ПАТРУЛЬНЫЙ машины ещё нет - подпись «снято в саду» была бы
   неправдой. */
/* Кадры КОЛОНКОЙ, как в пробе, но высоту им задаёт блок, а не они блоку.
   Столбец растянут на всю высоту ряда (align-self:stretch перебивает
   align-items:start у витрины), кадры делят её поровну. Поэтому высоту
   диктуют характеристики слева - самый длинный столбец, - а галерея под неё
   подстраивается и блок не растёт.
   Сеткой два на два кадр выходил 135 px шириной против 285 в колонке: вчетверо
   меньше по площади, крупный план переставал читаться. */
.detali{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,16px);
  align-self:stretch;min-height:0}
.detali > .podzagolovok-bloka{flex:0 0 auto}
.detali:empty{display:none}
/* flex:1 1 0 - все кадры одной высоты независимо от их собственных пропорций.
   Пол в 96 px: если слева окажется короткий столбец, кадры не схлопнутся. */
/* margin:0 обязателен: figure у браузера идёт с полями 1em/40px, и они съедали
   80 px ширины (кадр выходил 206 вместо 286) и 128 px высоты - флексу нечего
   было раздавать, кадры падали в нижний порог. */
.detal{position:relative;overflow:hidden;background:var(--fon-vtor);
  margin:0;flex:1 1 0;min-height:96px}
.detal img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(0.23,1,0.32,1)}
@media (hover:hover) and (pointer:fine){.detal:hover img{transform:scale(1.04)}}
.detal figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:oklch(0.96 0.005 250);
  background:linear-gradient(to top,oklch(0.12 0.01 250 / .82),transparent)}

/* Смена машины: блоки уходят и возвращаются по очереди, задержки короткие -
   иначе переключение начинает казаться медленным. */
.smena{opacity:0;transform:translateY(6px)}
.smena.est{opacity:1;transform:none;
  transition:opacity .26s cubic-bezier(0.23,1,0.32,1) calc(var(--n,0) * 40ms),
             transform .26s cubic-bezier(0.23,1,0.32,1) calc(var(--n,0) * 40ms)}

@media (max-width:1100px){
  .vitrina{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  /* Узкий экран: галерея уходит под витрину во всю ширину и снова становится
     сеткой - тянуть её по высоте не с чем, соседей в ряду уже нет. */
  .detali{grid-column:1 / -1;display:grid;align-self:auto;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:clamp(10px,1.4vw,16px)}
  .detal{flex:none;min-height:0}
  .detal img{height:auto;aspect-ratio:3/2}
}
@media (max-width:700px){
  .vitrina{grid-template-columns:1fr}
  .ryad{overflow-x:auto;scrollbar-width:none}
  .ryad::-webkit-scrollbar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .kadr img{transition:opacity .2s ease;filter:none;transform:none}
  .smena.est{transition:opacity .2s ease}
  .ryad-aktiv{transition:none}
  .detal img{transition:none}
}

/* Заголовок и вводка витрины стоят В ОДИН РЯД. По отдельности они съедали
   200 пикселей высоты, и блок не помещался на экран целиком. */
.shapka-vitriny{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,56px);align-items:end}
.shapka-vitriny .vvod{margin-top:0;padding-bottom:6px}
@media (max-width:900px){
  .shapka-vitriny{grid-template-columns:1fr;gap:14px}
  .shapka-vitriny .vvod{padding-bottom:0}
}

/* Строки характеристик поджаты: восемь строк по 45 пикселей давали 365 -
   треть высоты блока. */
.har .stroka{padding:6px 0}
.har .zhelob{margin-top:5px;height:3px}
/* Раздел витрины начинается ближе к первому экрану: обычный шаг между
   разделами тут стоил лишних тридцати пикселей. */
.razdel:has(.vitrina){padding-top:clamp(34px,4.2vw,60px)}

/* Метки управления стоят у названия машины. Раньше это была восьмая строка
   таблицы, ниже «Мест под АКБ» - то есть второй по важности вопрос покупателя
   оказывался ниже количества аккумуляторных мест. */
.metki-upravleniya{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.metka{display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border:1px solid var(--liniya);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--tekst-tret)}
.metka::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--liniya)}
.metka.est{border-color:var(--akcent);color:var(--tekst)}
.metka.est::before{background:var(--akcent)}

/* --- РАЗДЕЛ «ТЕХНОЛОГИИ»: три взгляда на сцену -------------------------
   Кадры сняты в одно мгновение заезда, поэтому стоят в ряд равными: разный
   размер читался бы как разная важность. */
.sloi-steka{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,34px);margin-top:clamp(22px,3vw,38px)}
.sloj-steka figure{margin:0}
.sloj-steka img{width:100%;height:auto;display:block;
  border:1px solid var(--liniya)}
.sloj-steka .yarlyk{margin-top:14px}
.sloj-steka h3{margin:8px 0 0;font-size:clamp(17px,1.5vw,21px);
  line-height:1.2;font-weight:600;letter-spacing:-.01em}
.sloj-steka p{margin:10px 0 0;font-family:'IBM Plex Mono',monospace;
  font-size:clamp(12px,1.05vw,14px);line-height:1.65;color:var(--tekst-vtor)}
.pod-sloyami{margin-top:clamp(22px,3vw,36px);max-width:78ch}
@media (max-width:900px){
  .sloi-steka{grid-template-columns:1fr;gap:clamp(20px,4vw,32px)}
}

/* Крупный набор в полосах разделов «Безопасность» и «Приложение» (29.08).
   Общие .podzagolovok-bloka и .perechen оставлены как есть: их кегль
   подобран под паспорт машины и карточки контакта, где ячейки узкие. */
.krupnye-polosy .podzagolovok-bloka{font-size:clamp(12px,1.05vw,14px);
  letter-spacing:.12em}
.krupnye-polosy .perechen{font-size:clamp(14px,1.2vw,16.5px);
  line-height:1.65;color:var(--tekst);margin-top:12px}
.krupnye-polosy .polosa{padding-top:26px}

/* Вводки разделов «Технологии» шире обычных 640 px: рядом с широким
   заголовком узкая колонка висела слева, а справа оставалась пустота
   (замечание владельца 29.08). text-wrap:pretty убирает висячее слово в
   последней строке - в моноширинном наборе оно особенно заметно. */
.vvod-shire{max-width:min(88ch,1000px);text-wrap:pretty}

/* Кадр внутри полосы раздела. Полоса начинается с линии сверху, поэтому
   картинка идёт ПОД ней с отступом - иначе линия читается как рамка. */
.krupnye-polosy figure{margin:16px 0 18px}
.krupnye-polosy figure img{width:100%;height:auto;display:block;
  border:1px solid var(--liniya)}

/* Кадр срабатывания сторожа: широкий, на всю обёртку, с подписью. */
.kadr-srabotki{margin:clamp(22px,3vw,36px) 0 0}
.kadr-srabotki img{width:100%;height:auto;display:block;
  border:1px solid var(--liniya)}
.kadr-srabotki figcaption{margin-top:10px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.12em;color:var(--tekst-tret)}
/* Снимок экрана приложения светлее лидарных кадров: даём ему рамку и
   ограничиваем ширину, иначе интерфейс растягивается на всю полосу и
   мелкие подписи в нём становятся нечитаемой рябью. */
.kadr-ekrana{max-width:1100px}

/* Шапка без знака (30.08, решение владельца: пока только надпись). Правила
   про отступ и отрицательные поля вокруг знака остаются в силе для случая,
   когда знак вернут; здесь снимаем только зазор, который без картинки
   выглядел бы отступом в пустоту. */
.logotip-bez-znaka{gap:0}

/* ПАСПОРТ МАШИНЫ: своя сетка (30.08). Общее правило .chislo запрещает
   перенос - для «до 600 кг» и «30°» это верно, но с надписью «Работа на
   склонах» слово вылезало из колонки. Здесь перенос разрешён, строки
   балансируются, а колонка держит минимум под самую длинную надпись. */
.pasport .setka-4{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Кегль чуть мельче общего: при 1280 надпись «Работа на склонах» на общем
   размере ломалась на две строки (замерено). Балансировку оставляем на
   случай узких экранов, где перенос неизбежен. */
.pasport .chislo{white-space:normal;text-wrap:balance;
  font-size:clamp(19px,1.62vw,26px)}
@media (max-width:700px){
  .pasport .setka-4{grid-template-columns:1fr 1fr}
}

/* ПОДВАЛ (30.08). Было имя, меню и строка - пусто и неполно. Три колонки:
   кто мы, разделы, связь. На узком экране колонки становятся строками. */
.podval-setka{max-width:1440px;margin:0 auto;display:grid;
  grid-template-columns:minmax(280px,2fr) 1fr 1fr;
  gap:clamp(24px,4vw,64px)}
.podval-opis{margin:14px 0 0;max-width:46ch;font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;line-height:1.7;color:var(--tekst-vtor)}
.podval-zag{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:var(--tekst-tret);margin-bottom:12px}
.podval-menyu{flex-direction:column;gap:9px;font-size:13px;color:var(--tekst-vtor)}
.podval-svyaz{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:9px;font-family:'IBM Plex Mono',monospace;
  font-size:13px;color:var(--tekst-vtor)}
.podval-svyaz a:hover,.podval-menyu a:hover{color:var(--tekst)}
.podval-niz{border-top:1px solid var(--liniya);padding-top:18px;margin-top:30px}
@media (max-width:820px){
  .podval-setka{grid-template-columns:1fr;gap:28px}
}

/* Строка согласия под кнопкой заявки и ссылка на политику в подвале.
   Требование 152-ФЗ: человек должен видеть, на что соглашается, до
   отправки обращения. */
.soglasie{margin:14px 0 0;font-family:'IBM Plex Mono',monospace;
  font-size:12px;line-height:1.6;color:var(--tekst-tret);max-width:60ch}
.soglasie a{border-bottom:1px solid var(--liniya)}
.soglasie a:hover{color:var(--tekst);border-bottom-color:var(--akcent)}
.podval-niz{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.podval-niz a{border-bottom:1px solid var(--liniya)}
.podval-niz a:hover{color:var(--tekst)}

/* --- ФОРМА ЗАЯВКИ (30.08) ---------------------------------------------
   Своя форма вместо перехода в бот. Набор тот же, что на всём сайте:
   моноширинные подписи, прямые углы, оранжевый только на действии. */
.zayavka-forma{margin-top:clamp(26px,3.4vw,40px);max-width:820px}
.zayavka-forma .polya{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,22px)}
.zayavka-forma label{display:block;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.14em;color:var(--tekst-tret);
  text-transform:uppercase}
.zayavka-forma .pole-shirokoe{margin-top:clamp(14px,1.6vw,22px)}
.zayavka-forma input[type=text],.zayavka-forma textarea{
  display:block;width:100%;margin-top:8px;padding:12px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1.5;
  color:var(--tekst);background:var(--fon);border:1px solid var(--liniya);
  border-radius:0;text-transform:none;letter-spacing:0;
  transition:border-color .18s ease}
.zayavka-forma textarea{resize:vertical;min-height:110px}
.zayavka-forma input[type=text]:focus,.zayavka-forma textarea:focus{
  outline:none;border-color:var(--akcent)}
.zayavka-forma input::placeholder,.zayavka-forma textarea::placeholder{
  color:var(--tekst-tret)}
/* Ловушка для роботов: прячем так, чтобы поле не читала и читалка экрана,
   но браузер его отправлял. display:none некоторые роботы распознают. */
.lovushka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.soglasie-otmetka{display:flex;gap:10px;align-items:flex-start;
  margin-top:clamp(16px,2vw,24px);text-transform:none;letter-spacing:0;
  font-size:12.5px;line-height:1.6;color:var(--tekst-vtor);cursor:pointer}
.soglasie-otmetka input{margin-top:2px;width:16px;height:16px;accent-color:var(--akcent)}
.soglasie-otmetka a{border-bottom:1px solid var(--liniya)}
.soglasie-otmetka a:hover{color:var(--tekst);border-bottom-color:var(--akcent)}
.stroka-otpravki{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:clamp(18px,2.2vw,26px)}
.zayavka-forma button.knopka{border:1px solid var(--akcent);cursor:pointer;
  background:none;font-family:inherit}
.otvet-formy{font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  line-height:1.5;color:var(--tekst-vtor)}
.otvet-formy.ok{color:oklch(0.52 0.13 150)}
.otvet-formy.beda{color:oklch(0.55 0.19 25)}
.zayavka-forma[data-shlyot] button{opacity:.6;pointer-events:none}
@media (max-width:700px){
  .zayavka-forma .polya{grid-template-columns:1fr}
}

/* Плитки разделов на странице «такой страницы нет». Полоса уже есть
   в наборе; ссылке добавляем только отклик на наведение и на нажатие -
   без него плитка не выглядит нажимаемой. */
.polosa-ssylka{display:block;text-decoration:none;color:inherit;
  transition:border-color .2s ease,transform .16s ease}
.polosa-ssylka:hover{border-top-color:var(--akcent)}
.polosa-ssylka:active{transform:scale(.99)}
.polosa-ssylka .podzagolovok-bloka{transition:color .2s ease}
.polosa-ssylka:hover .podzagolovok-bloka{color:var(--akcent)}

/* ЛЕНТА НОВОСТЕЙ (30.08). Две колонки: слева заголовок раздела, справа сами
   записи. На узком экране колонки встают друг под друга - потолок ширины
   текста при этом сохраняется, иначе строка растягивается на весь экран и
   читать её тяжело. */
.lenta-novostey{display:grid;gap:clamp(20px,3vw,56px);
  grid-template-columns:minmax(220px,0.8fr) minmax(0,1.6fr);align-items:start}
.lenta-stolbec{max-width:720px}
.novost{border-top:1px solid var(--liniya);padding-top:18px;margin-top:18px}
.novost:first-child{border-top:none;padding-top:0;margin-top:0}
.novost-data{font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--tekst-tret);letter-spacing:.04em}
.novost-zag{font-size:clamp(17px,1.5vw,21px);line-height:1.25;margin:8px 0 0;
  font-weight:600;text-wrap:balance}
.novost-tekst{font-size:15px;line-height:1.55;color:var(--tekst-vtor);margin:8px 0 0;
  max-width:62ch}
@media (max-width:860px){
  .lenta-novostey{grid-template-columns:1fr}
}

/* Хлебные крошки страниц карточек (02.09) */
.hleb{padding:clamp(84px,9vw,120px) var(--polya) 0}
/* Шапка фиксированная и прозрачная: без отступа сверху крошки ложились под знак
   (владелец 02.09, телефон). Следующий раздел идёт вплотную к крошкам. */
.hleb + .razdel,.hleb + section.razdel:first-of-type:not(.pasport){padding-top:clamp(18px,2vw,28px)}/* 03.09: после крошек первый раздел не отступает от шапки второй раз (было 138 px) */
.hleb a{border-bottom:1px solid var(--liniya)}
.hleb a:hover{border-bottom-color:var(--akcent)}
a.sfera{color:inherit;display:block}

/* Лента новостей карточками (02.09, как у rob-com) */
.novosti-setka{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.novosti-setka{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.novosti-setka{grid-template-columns:1fr}}
.novost-kart{display:flex;flex-direction:column;gap:10px}
.novost-kadr{display:block;aspect-ratio:16/9;overflow:hidden;background:oklch(0.94 0.004 250)}
.novost-kadr img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
@media (hover:hover){.novost-kart:hover .novost-kadr img{transform:scale(1.03)}}
.novost-kart .novost-zag{margin:4px 0 0;font-size:clamp(17px,1.4vw,20px);font-weight:700;line-height:1.25;text-wrap:balance}
.novost-kart .novost-zag a:hover{color:var(--akcent)}
.novost-kart .novost-tekst{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.novost-kart .novost-data{margin-top:auto;padding-top:4px}
.skryta-esche{display:none}
.novost-kolonka{max-width:820px;margin-inline:auto}/* 03.09: как на новостных порталах - ОДНА узкая колонка по центру: снимок и текст одной ширины */
.novost-kolonka h1.krupno{max-width:none!important}
.novost-stranica{max-width:none}/* текст во всю колонку 820 px (~72 знака в строке) */
.novost-stranica p{font-size:clamp(17px,1.25vw,19px);line-height:1.65;margin:0 0 1.15em}
.novost-geroy{aspect-ratio:16/9;overflow:hidden;background:oklch(0.94 0.004 250);margin-top:clamp(20px,2.4vw,32px);border-radius:6px}
.novost-geroy img{width:100%;height:100%;object-fit:cover;display:block}

/* Сцена платы на тёмной подложке (02.09): на светлом фоне контурный свет
   не читался, детали сливались с полем страницы. */
.razlet-scena .holst-razleta{background:transparent;border-radius:0}
/* ВЕСЬ БЛОК ТЁМНЫЙ (владелец 02.09: «раз уж у нас тёмный фон схемы, то и блок
   тоже весь нужно сделать в фон»). Кадры сборки сливаются с фоном раздела. */
.razdel.razlet{background:#101015;color:#ecebe5}
/* ФОН = ПРОФИЛЬ ФОНА КАДРОВ. Снят по краям всех 60 кадров (02.09, владелец:
   «фон отличается от рендерного, нужно их слить в один»): сверху #101115,
   к середине светлее (#1e2023..#232325), книзу #16171a. Кадр рисуется на
   7..93 % высоты липкого блока, стопы сдвинуты под это. */
/* Липкий блок растянут на всю ширину экрана (отрицательные поля + свой
   отступ), градиент на нём самом: overflow:hidden блока режет псевдоэлементы,
   а фон по ширине оболочки рисовал прямоугольник с полями по бокам. */
.razlet-lipkiy{margin-left:calc(-1 * var(--polya));margin-right:calc(-1 * var(--polya));padding-left:var(--polya);padding-right:var(--polya);
  background:#101015}
/* 03.09: кадры чистового рендера - фон ровный (чёрный поднят до #101015 при нарезке, plata_kadry_v3.py),
   градиент под кадры Seedance снят, весь блок одного цвета (владелец: «на сайте точно нужно подгонять фон»). */
/* Тот же градиент на контейнере холста: холст рисует профиль фона снаружи
   кадра в своих координатах, и подложка под ним должна совпадать построчно.
   На экране контейнер равен липкому блоку по высоте - строки те же. */
.razlet-scena{background:#101015}
@media (max-width:700px){
  /* Порог тот же, что у перестановки холста наверх (order:-1). На телефоне холст занимает только верх липкого блока: липкий блок ровный
     #16171a, градиент только на контейнере холста, и он во всю ширину. */
  .razlet-lipkiy{background:#101015}
  .razlet-scena{margin-left:calc(-1 * var(--polya));margin-right:calc(-1 * var(--polya))}
}
.razlet .razdel-zag,.razlet-shag h3{color:#f4f3ee}
.razlet .vvod,.razlet-shag p{color:oklch(0.80 0.012 250)}
.razlet-zagruzka{color:oklch(0.70 0.012 250)}
.razlet-hod{background:rgba(255,255,255,.14)}
/* Цвета подложки - как фон кадров видео (k01/k60: верх ~#1f2226, низ ~#26282c), чтобы поля не читались. */

/* Цена «от» на карточке машины (08.09.2026). Число крупное - это ориентир,
   за которым человек и пришёл; оговорка под ним мелкая и приглушённая, чтобы
   не спорила с числом, но и не пряталась. */
.cena-ot{margin:16px 0 0;font-size:15px;line-height:1.45}
.cena-ot b{font-family:Unbounded,system-ui,sans-serif;font-weight:600;font-size:21px;
  display:inline-block;margin-left:2px}
.cena-ot span{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;
  line-height:1.6;color:var(--tekst-tret);margin-top:4px}

/* Значок площадки перед её именем. Владелец 08.09: «где написано телеграм, должна
   быть иконка телеграм, где мах - иконка макс». Знак MAX официальный, с max.ru;
   телеграмовский нарисован по их же марке. Размер задан в разметке, здесь только
   посадка на строку: значок должен стоять на одной оси с буквами, а не висеть. */
.znachok-kanala{display:inline-block;vertical-align:-4px;margin-right:7px;
  border-radius:50%;flex:0 0 auto}