/* sferasan.ru — рециркуляторы «Сфера». Оформление «Сфера Принт»: светлый фон и зелёный акцент.
   Решение заказчицы 21.10.2026: сохраняем зелёный стиль, а не тёмную тему АСП.

   Отступы, радиусы, шкала шрифтов, движение и слои — из shared/css/tokens.css, здесь не дублируются.
   Здесь переопределён только цветовой слой, и целиком: base.css написан под тёмную сцену АСП
   (--ink светлый, --bg тёмный, кнопки и фокус на бирюзовом/синем), поэтому всё, что он красит
   цветом, переопределяется ниже явно — иначе на светлом фоне текст исчезает.

   Палитра взята с логотипа «Сфера Принт» (знак-капля: верх #a0c52a, низ #528c31, надпись #1d1d1b)
   и с действующего sferasan.ru (акцент #a5c33c). Светлый лайм #a5c33c на белом даёт 2:1 —
   текстом и фоном под белый текст он быть не может, только заливкой и декором. Для текста,
   ссылок и кнопок взят тот же зелёный, но темнее. Пары, проверенные расчётом (WCAG):
     белый на --sp-green       #3f7a1f  5,2 : 1   кнопка
     --sp-green на --bg        #f6f9ee  4,9 : 1   ссылка
     --sp-green-dark на --tint #eaf2d6  6,6 : 1   подпись на плашке
     --ink на --bg                      15,6 : 1   основной текст
     --ink-muted на --bg                 6,1 : 1   приглушённый текст
     --on-night-2 на --sp-night          8,4 : 1   текст в подвале и баннере cookie */

:root {
  /* ── Палитра бренда ─────────────────────────────────────────────────────── */
  --sp-lime: #a5c33c; /* акцент действующего сайта; только заливка и декор */
  --sp-leaf-top: #a0c52a; /* верх знака */
  --sp-leaf-bottom: #528c31; /* низ знака */
  --sp-green: #3f7a1f; /* текст-ссылка, кнопка */
  --sp-green-dark: #2f5f17; /* нажатие, подпись на плашке */
  --sp-night: #1b2616; /* подвал и баннер cookie — тот же зелёный в глубокой тени */

  /* ── Семантика (переопределяет тёмную из tokens.css) ────────────────────── */
  --bg: #f6f9ee;
  --bg-deep: #eaf2d6; /* плашки и полосы */
  --surface: #ffffff; /* карточки */
  --ink: #1d1f1a; /* цвет надписи логотипа, не чистый чёрный */
  --ink-2: #3b4436;
  --ink-muted: #586152;
  --line: #dde6c8;
  --line-strong: #b9c9a0;
  --photo-bg: #f6f5f8; /* фон готовых фото моделей (сэмплирован с кадров) */

  /* Текст на тёмном зелёном (подвал, cookie) */
  --on-night: #f2f7e6;
  --on-night-2: #b4c2a6;
  --night-line: rgb(255 255 255 / 16%);

  --leaf-gradient: linear-gradient(180deg, var(--sp-leaf-top), var(--sp-leaf-bottom));
  --topbar-bg: rgb(255 255 255 / 92%); /* --surface с прозрачностью */
  --shadow-card: 0 1px 2px rgb(29 31 26 / 6%), 0 8px 24px rgb(29 31 26 / 6%);
}

/* ── Базовые элементы base.css под светлую тему ────────────────────────────── */

::selection {
  background: var(--sp-lime);
  color: var(--ink);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sp-green);
  outline-offset: 3px;
}

a {
  color: var(--sp-green);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--sp-green-dark);
}

.skip-link {
  background: var(--sp-green);
}

body {
  overflow-x: clip;
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Кнопки */
.btn {
  background: var(--sp-green);
  color: #fff;
}

.btn:hover {
  background: var(--sp-green-dark);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--sp-green-dark);
  border: 1.5px solid var(--sp-green);
}

.btn--ghost:hover {
  background: var(--bg-deep);
  color: var(--sp-green-dark);
  border-color: var(--sp-green-dark);
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.btn--quiet {
  background: none;
  border: 1.5px solid transparent;
  color: var(--on-night-2);
}

.btn--quiet:hover {
  background: none;
  border-color: var(--night-line);
  color: var(--on-night);
}

.eyebrow {
  color: var(--sp-green-dark);
  font-weight: 600;
}

/* ── Шапка ─────────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--topbar-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--line);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 4.5rem;
}

.topbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
}

.topbar__logo img {
  width: auto;
  height: 3rem;
}

.topbar__dept {
  font-size: var(--fs-xs);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: 7.5rem;
}

.nav {
  display: flex;
  gap: var(--space-5);
  margin-left: auto;
}

.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding-block: var(--space-2);
}

.nav a:hover {
  color: var(--sp-green);
}

.topbar__phone {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.topbar__phone:hover {
  color: var(--sp-green);
}

/* Меню узкого экрана — без скриптов, на <details> */
.menu {
  display: none;
  margin-left: auto;
}

.menu summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

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

.menu__list {
  position: absolute;
  inset: 100% 0 auto;
  display: grid;
  padding: var(--space-3) clamp(1.25rem, 4vw, 2.5rem) var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.menu__list a {
  padding-block: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 70rem) {
  .nav {
    display: none;
  }

  .menu {
    display: block;
  }

  .topbar__phone {
    margin-left: 0;
  }
}

@media (max-width: 36rem) {
  .topbar__dept {
    display: none;
  }

  .topbar__phone {
    font-size: var(--fs-sm);
  }
}

/* ── Секции ────────────────────────────────────────────────────────────────── */

.sec {
  padding-block: var(--space-9);
}

.sec--tint {
  background: var(--bg-deep);
}

.sec--white {
  background: var(--surface);
}

.sec__head {
  max-width: 48rem;
  margin-bottom: var(--space-7);
}

.sec__head h2 {
  margin-bottom: var(--space-3);
}

.sec__head p {
  color: var(--ink-2);
  font-size: var(--fs-lg);
  margin: 0;
}

/* ── Первый экран ──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  max-width: none;
  padding: var(--space-8) 0 var(--space-9);
  overflow: hidden;
  background:
    radial-gradient(48rem 30rem at 92% -10%, color-mix(in srgb, var(--sp-lime) 32%, transparent), transparent 70%),
    radial-gradient(40rem 26rem at -8% 110%, color-mix(in srgb, var(--sp-leaf-bottom) 14%, transparent), transparent 70%),
    var(--bg);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  margin-bottom: var(--space-5);
}

.hero h1 em {
  font-style: normal;
  color: var(--sp-green);
}

.hero .lead {
  margin-bottom: var(--space-6);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.facts li {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.facts b {
  color: var(--ink);
}

@media (max-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }
}

/* ── Подбор по помещению ───────────────────────────────────────────────────── */

.pick {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.pick h2 {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.pick__lead {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-5);
}

.pick__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}

.field input {
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  min-height: 3rem;
  width: 100%;
}

.field input:focus {
  border-color: var(--sp-green);
  background: var(--surface);
}

.pick__out {
  min-height: 7rem;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-deep);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.pick__out p {
  margin: 0 0 var(--space-2);
}

.pick__vol {
  font-weight: 700;
}

.pick__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.pick__list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.pick__list a {
  font-weight: 700;
}

.pick__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

/* ── Каталог ───────────────────────────────────────────────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.chip {
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  min-height: 2.75rem;
  transition: background var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart);
}

.chip:hover {
  border-color: var(--sp-green);
}

.chip[aria-pressed='true'] {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #fff;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Витрина на главной: шесть карточек. Колонки не уже 19 rem, поэтому на широком экране
   выходит 3 + 3, а не 4 + 2 с «хвостом»; на планшете 2 + 2 + 2, на телефоне одна. */
.cards--trio {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-margin-top: 6rem;
}

.card[hidden] {
  display: none;
}

.card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0;
  background: var(--photo-bg);
  overflow: hidden;
}

/* Знак-капля под фото: виден, пока снимок не готов или не загрузился */
.card__photo::before,
.shot::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3.5rem;
  height: 4.25rem;
  translate: -50% -50%;
  background: var(--leaf-gradient);
  border-radius: 0 100% 100% 100% / 0 90% 100% 100%;
  rotate: -8deg;
  opacity: 0.35;
}

.card__photo img,
.shot img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-5);
}

.card h3 {
  margin-bottom: var(--space-1);
  font-size: var(--fs-xl);
}

.card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.card h3 a:hover {
  color: var(--sp-green);
}

.card__spec {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.card__dims {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.prices {
  margin: auto 0 var(--space-4);
  display: grid;
  gap: var(--space-1);
}

.prices div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-1);
  border-top: 1px solid var(--line);
}

.prices dt {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.prices dd {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.card__actions .btn {
  flex: 1 1 auto;
}

.cat-sub {
  margin: var(--space-8) 0 var(--space-5);
  font-size: var(--fs-xl);
}

.cat-sub--first {
  margin-top: 0;
}

.note {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  max-width: 62ch;
}

/* Комплектующие: строки, а не карточки — тут нет фото и нет выбора из десятка */
.parts {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.parts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.parts b {
  display: block;
}

.parts span {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.parts .price {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-weight: 700;
  font-size: var(--fs-lg);
  white-space: nowrap;
}

/* ── Как работает / почему мы ──────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
  counter-reset: s;
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: s;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.steps li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--sp-lime);
  color: var(--ink);
  font-weight: 800;
}

.steps b {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-lg);
}

.steps span {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-6) var(--space-7);
}

.why h3 {
  margin-bottom: var(--space-2);
  padding-top: var(--space-4);
  border-top: 3px solid var(--sp-lime);
}

.why p {
  color: var(--ink-2);
  margin: 0;
}

.feat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-5);
}

/* Карточка: сверху иллюстрация, снизу заголовок и текст. */
.feat__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s;
  transition-delay: 0s, calc(var(--i, 0) * 0.12s), calc(var(--i, 0) * 0.12s);
}

/* Лёгкое приминание при наведении. */
.feat__card:hover {
  scale: 0.975;
  transition-delay: 0s;
}

/* Появление: карточки скрыты со сдвигом только пока скрипт ждёт блок на экране. */
.feat.is-hidden .feat__card {
  opacity: 0;
  translate: 0 2.5rem;
}

.feat__art {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  color: var(--sp-green);
}

.feat__svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feat__body {
  padding: var(--space-5);
}

.feat__body h3 {
  margin-bottom: var(--space-2);
}

.feat__body p {
  color: var(--ink-2);
  margin: 0;
  font-size: var(--fs-sm);
}

/* Иллюстрации. Стили по умолчанию — конечный кадр (его видят без скрипта и при
   «уменьшить движение»); анимации включает только .is-anim, а идут они, пока блок
   на экране (.is-live). */
.feat__lbl {
  fill: var(--ink-muted);
  stroke: none;
  font: 600 9px var(--font);
}

.feat__market {
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.feat__bar {
  fill: var(--surface);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.feat__bar--grey {
  stroke: var(--ink-muted);
}

.feat__bar--us {
  fill: color-mix(in srgb, var(--sp-lime) 55%, var(--surface));
  transform: scaleY(0.64);
}

.feat__arrow {
  stroke: var(--sp-green-dark);
}

.feat__shield {
  fill: color-mix(in srgb, var(--sp-lime) 28%, var(--surface));
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.feat__check {
  stroke: var(--sp-green-dark);
  stroke-width: 6;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.feat__msg {
  transform-box: fill-box;
  transform-origin: 20% 100%;
}

.feat__msg rect,
.feat__msg > path:first-of-type {
  fill: var(--surface);
}

.feat__msg .feat__msg-us {
  fill: color-mix(in srgb, var(--sp-lime) 55%, var(--surface));
}

.feat__msg circle {
  fill: currentColor;
  stroke: none;
}

.feat__road {
  stroke: var(--ink-muted);
  stroke-dasharray: 8 8;
}

.feat__box {
  fill: var(--surface);
  transform: translateX(14px);
}

.feat__tag {
  fill: color-mix(in srgb, var(--sp-lime) 55%, var(--surface));
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.feat__tag circle:not(:first-child) {
  fill: currentColor;
  stroke: none;
}

/* Анимации: только при .is-anim, на паузе вне экрана. */
.feat.is-anim .feat__svg > *,
.feat.is-anim .feat__svg > * > * {
  animation-duration: 4.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-play-state: paused;
}

.feat.is-anim.is-live .feat__svg > *,
.feat.is-anim.is-live .feat__svg > * > * {
  animation-play-state: running;
}

.feat.is-anim .feat__bar--us { animation-name: feat-bar; }
.feat.is-anim .feat__arrow { animation-name: feat-arrow; }
.feat.is-anim .feat__check { animation-name: feat-check; }
.feat.is-anim .feat__shield { animation-name: feat-shield; }
.feat.is-anim .feat__msg--1 { animation-name: feat-msg; }
.feat.is-anim .feat__msg--2 { animation-name: feat-msg; animation-delay: 0.7s; }
.feat.is-anim .feat__msg--3 { animation-name: feat-msg; animation-delay: 1.4s; }
.feat.is-anim .feat__box { animation-name: feat-box; }
.feat.is-anim .feat__road { animation-name: feat-road; animation-timing-function: linear; animation-duration: 1.6s; }
.feat.is-anim .feat__tag { animation-name: feat-tag; }

@keyframes feat-bar {
  0%, 15% { transform: scaleY(1); }
  55%, 100% { transform: scaleY(0.64); }
}

@keyframes feat-arrow {
  0%, 30% { opacity: 0; translate: 0 -8px; }
  60%, 90% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; }
}

@keyframes feat-check {
  0%, 10% { stroke-dashoffset: 1; }
  45%, 85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}

@keyframes feat-shield {
  0%, 40% { scale: 1; }
  50% { scale: 1.05; }
  60%, 100% { scale: 1; }
}

@keyframes feat-msg {
  0%, 8% { opacity: 0; scale: 0.6; }
  20%, 82% { opacity: 1; scale: 1; }
  95%, 100% { opacity: 0; scale: 0.9; }
}

@keyframes feat-box {
  0% { transform: translateX(-60px); }
  70%, 100% { transform: translateX(14px); }
}

@keyframes feat-road {
  to { stroke-dashoffset: -16; }
}

@keyframes feat-tag {
  0%, 55% { scale: 0.5; opacity: 0; }
  70%, 92% { scale: 1; opacity: 1; }
  100% { scale: 1; opacity: 0; }
}

/* Вариация: два блока в ряд (карточки не растягиваются на всю ширину). */
.feat--duo {
  /* Та же ширина карточки, что у четырёх колонок «Почему мы»: четверть полосы за вычетом
     промежутков. Две карточки стоят по центру полосы. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), calc((100% - 3 * var(--space-5)) / 4)));
  justify-content: center;
}

/* Иллюстрации блока «Документы». Стили по умолчанию — конечный кадр. */
.feat__sheet {
  fill: var(--surface);
}

.feat__fold {
  fill: var(--bg-deep);
}

.feat__stamp {
  stroke: var(--sp-green-dark);
  fill: color-mix(in srgb, var(--sp-lime) 40%, var(--surface));
  transform-box: fill-box;
  transform-origin: 50% 50%;
  rotate: -12deg;
}

.feat__stamp path {
  fill: none;
}

.feat__flask {
  fill: var(--surface);
}

.feat__liquid {
  fill: color-mix(in srgb, var(--sp-lime) 60%, var(--surface));
  stroke: none;
}

.feat__ticks > path:not(.feat__tick) {
  stroke: var(--ink-muted);
  stroke-width: 2;
}

.feat__tick {
  stroke: var(--sp-green-dark);
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.feat.is-anim .feat__stamp { animation-name: feat-stamp; }
.feat.is-anim .feat__liquid { animation-name: feat-liquid; animation-duration: 3.2s; }
.feat.is-anim .feat__tick--1 { animation-name: feat-tick; }
.feat.is-anim .feat__tick--2 { animation-name: feat-tick; animation-delay: 0.6s; }
.feat.is-anim .feat__tick--3 { animation-name: feat-tick; animation-delay: 1.2s; }

@keyframes feat-stamp {
  0%, 20% { scale: 1.8; opacity: 0; }
  38%, 88% { scale: 1; opacity: 1; }
  100% { scale: 1; opacity: 0; }
}

/* Жидкость налита и стоит; уровень чуть колышется (пара процентов), без «налива». */
@keyframes feat-liquid {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -1.6px; }
}

@keyframes feat-tick {
  0%, 8% { stroke-dashoffset: 1; }
  30%, 85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}

/* ── О компании ─────────────────────────────────────────────────────────────── */

/* Первый блок: слева коллаж из кадров производства, справа заголовок и текст. */
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.about-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.about-mosaic figure {
  margin: 0;
  overflow: hidden;
  background: var(--photo-bg);
  border-radius: var(--radius-lg);
}

.about-mosaic__big {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
}

.about-mosaic__small {
  aspect-ratio: 4 / 3;
}

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

@media (max-width: 62rem) {
  .about-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* Лента цеха: крупные живые снимки, соседние кадры видны краями. Листается пальцем, колесом,
   стрелками клавиатуры (трек фокусируется) и кнопками. Автодвижения нет. */
.reel {
  position: relative;
}

.reel__track {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 var(--space-3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior-x: contain;
}

.reel__track:focus-visible {
  outline: 3px solid var(--sp-green);
  outline-offset: 4px;
  border-radius: var(--radius);
}

.reel__item {
  flex: 0 0 min(30rem, 82vw);
  scroll-snap-align: start;
}

.reel__item figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--photo-bg);
  box-shadow: var(--shadow-card);
}

.reel__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reel__item:hover img {
  scale: 1.05;
}

/* Появление при прокрутке: кадры выезжают справа один за другим, один раз. */
.reel.is-hidden .reel__item {
  opacity: 0;
  translate: 3rem 0;
}

.reel__item {
  transition: opacity 0.8s, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.1s);
}

.reel__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.reel__nav[hidden] {
  display: none;
}

.reel__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1.5px solid var(--sp-green);
  border-radius: 50%;
  background: var(--surface);
  color: var(--sp-green-dark);
  font: inherit;
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.reel__btn:hover:not([aria-disabled='true']) {
  background: var(--bg-deep);
}

.reel__btn[aria-disabled='true'] {
  opacity: 0.35;
  cursor: default;
}

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

  .reel.is-hidden .reel__item {
    opacity: 1;
    translate: none;
  }
}

/* Галерея «Возможности»: один кадр открыт широко, остальные — узкие полосы. Раскрывается
   по наведению, фокусу и нажатию. */
.gal {
  display: flex;
  gap: var(--space-2);
  height: clamp(22rem, 34vw, 30rem);
}

.gal__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--photo-bg);
  cursor: pointer;
  transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gal__item.is-active {
  flex-grow: 7;
}

/* Без скрипта первая панель открыта, остальные свёрнуты. */
.gal:not(.is-js) .gal__item:first-child {
  flex-grow: 7;
}

.gal__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gal__item:focus-visible {
  outline: 3px solid var(--sp-green);
  outline-offset: 2px;
}

/* Подпись внизу кадра: иконка всегда, текст — у открытой панели. */
.gal__cap {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgb(0 0 0 / 70%), transparent);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.gal__cap svg {
  flex: none;
}

.gal__cap span {
  opacity: 0;
  transition: opacity 0.3s;
}

.gal__item.is-active .gal__cap span,
.gal:not(.is-js) .gal__item:first-child .gal__cap span {
  opacity: 1;
  transition-delay: 0.25s;
}

.gal__caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* Возможности компании: карточки с фото (соответствие картинок задано заказчицей). */
.gal__caps--photo {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
}

.gal__caps--photo li {
  padding: 0 0 var(--space-4);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.gal__caps--photo li > b,
.gal__caps--photo li {
  line-height: 1.5;
}

.gal__caps--photo li > b {
  margin: var(--space-4) var(--space-4) var(--space-1);
}

.gal__caps--photo li:not(:has(.cap__img)) {
  padding: var(--space-4);
}

.cap__img {
  margin: 0;
  aspect-ratio: 3 / 2;
  background: var(--photo-bg);
}

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

.gal__caps--photo li {
  font-size: var(--fs-sm);
}

.gal__caps--photo li > span {
  display: block;
  margin-inline: var(--space-4);
}

.gal__caps--photo li:not(:has(.cap__img)) > b,
.gal__caps--photo li:not(:has(.cap__img)) > span {
  margin-inline: 0;
}

.gal__caps b {
  display: block;
  color: var(--ink);
  font-size: var(--fs-base);
}

/* Телефон: полосы идут столбцом и раскрываются по высоте (тап). */
@media (max-width: 48rem) {
  .gal {
    flex-direction: column;
    height: auto;
  }

  .gal__item {
    flex: none;
    height: 4.5rem;
    transition: height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .gal__item.is-active,
  .gal:not(.is-js) .gal__item:first-child {
    height: 17rem;
  }

  .gal__cap span {
    opacity: 1;
  }

  .gal__cap {
    padding-block: var(--space-3);
  }
}

/* Панели-шаги («Как заказать», shared/js/gal.js, data-gal-steps): те же раскрывающиеся панели,
   но с номером шага, круглой иконкой и описанием внизу открытой панели; при показе блока выезжают по очереди. */
.gal--steps {
  --gal-step: 180ms;
}

.gal__num {
  position: absolute;
  inset: var(--space-3) auto auto var(--space-3);
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--sp-night);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
}

.gal__cap--step {
  background: linear-gradient(to top, rgb(0 0 0 / 82%), rgb(0 0 0 / 40%) 70%, transparent);
  white-space: normal;
}

.gal__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--sp-night);
  border: 1px solid rgb(255 255 255 / 40%);
}

.gal__txt {
  min-width: 18rem;
  max-width: 28rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.gal__txt b {
  display: block;
  font-size: var(--fs-lg, 1.125rem);
}

.gal__txt small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.45;
}

.gal--steps .gal__item.is-active .gal__txt,
.gal--steps:not(.is-js) .gal__item:first-child .gal__txt {
  opacity: 1;
  transition-delay: 0.25s;
}

/* Выезд по очереди: один раз, при показе блока. */
.gal--steps .gal__item {
  transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gal--steps.is-hidden .gal__item {
  opacity: 0;
  translate: 0 2rem;
}

.gal--steps:not(.is-hidden) .gal__item {
  transition-delay: 0s, calc(var(--i, 0) * var(--gal-step)), calc(var(--i, 0) * var(--gal-step));
}

@media (max-width: 48rem) {
  .gal--steps .gal__item {
    transition: height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .gal--steps .gal__item.is-active,
  .gal--steps:not(.is-js) .gal__item:first-child {
    height: 19rem;
  }

  .gal--steps .gal__txt {
    min-width: 0;
    opacity: 1;
  }

  .gal--steps .gal__txt small {
    display: none;
  }

  .gal--steps .gal__item.is-active .gal__txt small,
  .gal--steps:not(.is-js) .gal__item:first-child .gal__txt small {
    display: block;
  }

  .gal--steps .gal__cap {
    padding-block: var(--space-3);
    min-height: 4.5rem;
  }

  .gal--steps .gal__num {
    inset: var(--space-2) var(--space-3) auto auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gal--steps .gal__item,
  .gal__txt {
    transition: none !important;
  }

  .gal--steps.is-hidden .gal__item {
    opacity: 1;
    translate: none;
  }
}

/* Иллюстрации принципов. Стили по умолчанию — конечный кадр. */
.feat__cal {
  fill: var(--surface);
}

.feat__dot {
  fill: var(--ink-muted);
  stroke: none;
}

.feat__mark {
  stroke: var(--sp-green-dark);
  stroke-width: 5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.feat__sign {
  stroke: var(--sp-green-dark);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.feat__phone {
  fill: color-mix(in srgb, var(--sp-lime) 55%, var(--surface));
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.feat__wave {
  stroke: var(--sp-green-dark);
  stroke-width: 3;
}

.feat__head {
  fill: color-mix(in srgb, var(--sp-lime) 55%, var(--surface));
}

.feat__ear {
  stroke: var(--ink-muted);
}

.feat.is-anim .feat__mark { animation-name: feat-tick; }
.feat.is-anim .feat__sign { animation-name: feat-tick; animation-duration: 4.2s; }
.feat.is-anim .feat__phone { animation-name: feat-ring; animation-duration: 2.4s; }
.feat.is-anim .feat__wave--1 { animation-name: feat-wave; animation-duration: 2.4s; }
.feat.is-anim .feat__wave--2 { animation-name: feat-wave; animation-duration: 2.4s; animation-delay: 0.3s; }

@keyframes feat-ring {
  0%, 55%, 100% { rotate: 0deg; }
  10%, 30% { rotate: -8deg; }
  20%, 40% { rotate: 8deg; }
}

@keyframes feat-wave {
  0%, 15% { opacity: 0; }
  40%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gal__item,
  .gal__cap span {
    transition: none;
  }
}

/* ── Бокс: фото, режимы и инструкция ────────────────────────────────────────── */

.boxinfo--photo {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.boxgal {
  display: grid;
  gap: var(--space-3);
}

.boxgal figure {
  margin: 0;
  overflow: hidden;
  background: var(--photo-bg);
  border-radius: var(--radius-lg);
}

.boxgal__big {
  aspect-ratio: 4 / 5;
}

.boxgal__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.boxgal__small {
  aspect-ratio: 4 / 5;
}

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

@media (max-width: 62rem) {
  .boxinfo--photo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .boxgal__big {
    aspect-ratio: 1;
  }
}

.boxh3 {
  margin: var(--space-6) 0 var(--space-3);
}

/* Два режима работы: две карточки рядом, в каждой описание, чем отличается, и четыре шага. */
.modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.modes__card {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--sp-lime);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.modes__n {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-green-dark);
}

.modes__card h3 {
  margin-bottom: var(--space-3);
}

.modes__card > p {
  color: var(--ink-2);
}

.modes__how {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
}

.modes__how div {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-deep);
  border-radius: var(--radius);
}

.modes__how dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.modes__how dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Шаги: номер, иллюстрация, подпись. Внутри карточки режима — по два в ряд. */
.steps--box {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.steps--box li {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

.steps--box li::before {
  margin: 0;
}

.steps__img {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--photo-bg);
  border-radius: var(--radius);
}

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

@media (max-width: 62rem) {
  .modes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 36rem) {
  .steps--box {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Каталог: иллюстрации блока безопасности ───────────────────────────────── */

.feat--quad {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.feat__eye {
  fill: var(--surface);
}

.feat__iris {
  fill: color-mix(in srgb, var(--sp-lime) 55%, var(--surface));
}

.feat__pupil {
  fill: currentColor;
  stroke: none;
}

.feat__lid {
  fill: color-mix(in srgb, var(--sp-lime) 35%, var(--surface));
  transform-box: fill-box;
  transform-origin: 50% 0;
  scale: 1 0;
}

.feat__ok,
.feat__ok2 {
  stroke: var(--sp-green-dark);
  stroke-width: 5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.feat__print {
  stroke: var(--ink-muted);
  stroke-width: 2.5;
}

.feat__ring {
  stroke: var(--sp-green-dark);
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.feat__mol circle {
  fill: color-mix(in srgb, var(--sp-lime) 45%, var(--surface));
}

.feat__no,
.feat__slash {
  stroke: var(--sp-green-dark);
  stroke-width: 5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.feat__ribbon {
  fill: color-mix(in srgb, var(--sp-lime) 55%, var(--surface));
}

.feat__seal {
  fill: var(--surface);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.feat.is-anim .feat__lid { animation-name: feat-blink; animation-duration: 3.6s; }
.feat.is-anim .feat__ok,
.feat.is-anim .feat__ok2 { animation-name: feat-tick; }
.feat.is-anim .feat__ring { animation-name: feat-tick; animation-duration: 4.2s; }
.feat.is-anim .feat__no { animation-name: feat-tick; }
.feat.is-anim .feat__slash { animation-name: feat-tick; animation-delay: 0.5s; }
.feat.is-anim .feat__seal { animation-name: feat-seal; animation-duration: 3.6s; }

@keyframes feat-blink {
  0%, 45%, 60%, 100% { scale: 1 0; }
  52% { scale: 1 1; }
}

@keyframes feat-seal {
  0%, 30%, 100% { scale: 1; }
  15% { scale: 1.06; }
}

/* ── Схема потока воздуха («Как работает прибор») ──────────────────────────────
   Без сцены (reduced-motion, нет WebGL, слабое устройство, сбой) карточки идут на всю ширину,
   холст не занимает места, а подписи остаются текстом только для скринридера. */
.flow__stage {
  display: none;
}

:root[data-motion='on'] .flow:not([data-state='photo']) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: stretch;
}

:root[data-motion='on'] .flow:not([data-state='photo']) .steps {
  grid-template-columns: minmax(0, 1fr);
}

:root[data-motion='on'] .flow:not([data-state='photo']) .flow__stage {
  position: relative;
  display: block;
  margin: 0;
  align-self: stretch;
  min-height: 36rem;
  width: 100%;
  /* Без рамки и фона: прибор стоит прямо на фоне секции. */
}

.flow__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s;
  /* Края холста растворяются, чтобы частицы не обрезались резко. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}

.flow[data-state='scene'] .flow__canvas {
  opacity: 1;
}

.flow__tag {
  position: absolute;
  inset: 0 auto auto 0;
  translate: var(--x, 0) var(--y, 0);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}

.flow[data-state='scene'] .flow__tag {
  opacity: 1;
}

.flow__tag i {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  border-radius: 50%;
  background: var(--sp-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sp-lime) 35%, transparent);
}

.flow__tag > span {
  position: absolute;
  left: 3.2rem;
  top: 0;
  translate: 0 -50%;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
}

.flow__tag > span::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: 2.7rem;
  height: 1px;
  background: var(--sp-green);
}

/* Без сцены подписи — текст для скринридера. */
.flow:not([data-state='scene']) .flow__tag {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (max-width: 62rem) {
  :root[data-motion='on'] .flow:not([data-state='photo']) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  :root[data-motion='on'] .flow:not([data-state='photo']) .flow__stage {
    min-height: 30rem;
  }
}

@media (max-width: 36rem) {
  /* Узкий экран: прибор по центру, подписи уходят влево от точки, а не за правый край. */
  .flow__tag > span {
    left: auto;
    right: 1.6rem;
    max-width: 7.5rem;
    white-space: normal;
    text-align: right;
    line-height: 1.25;
    font-size: 0.6875rem;
    padding-inline: var(--space-2);
  }

  .flow__tag > span::before {
    right: auto;
    left: 100%;
    width: 1.1rem;
  }
}

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

/* ── Бенто-сетка «Что важно знать о приборах» (тёмный блок) ────────────────────
   Плашки разного размера: высокая на две строки, широкая на две колонки, обычные. */
.sec--dark {
  background: var(--sp-night);
  color: var(--on-night);
}

.sec--dark h2,
.sec--dark h3 {
  color: var(--on-night);
}

.sec--dark .eyebrow {
  color: var(--sp-lime);
}

.sec--dark .clients li {
  background: transparent;
  border-color: var(--night-line);
  color: var(--on-night);
}

.bn {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(15rem, auto);
  gap: var(--space-4);
}

.bn__a { grid-row: span 2; }
.bn__b { grid-column: span 2; }
.bn__d { grid-column: 2 / 5; }

.sec--dark .bn .feat__card {
  background: color-mix(in srgb, var(--on-night) 6%, var(--sp-night));
  border: 1px solid var(--glass-line);
  box-shadow: none;
  transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.7s, border-color 0.3s;
}

.sec--dark .bn .feat__card:hover {
  border-color: var(--sp-lime);
  scale: 1.015;
}

.sec--dark .bn .feat__art {
  flex: 1;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--sp-green) 16%, var(--sp-night));
  border-bottom: 1px solid var(--glass-line);
  color: var(--sp-lime);
}

.sec--dark .bn .feat__svg {
  width: auto;
  max-width: 100%;
  height: 8.5rem;
}

.bn__a .feat__svg {
  height: 12rem;
}

.sec--dark .bn .feat__body h3 {
  color: var(--on-night);
}

.sec--dark .bn .feat__body p {
  color: var(--on-night-2);
}

/* Иллюстрации: стили по умолчанию — конечный кадр. */
.bn__lamp rect {
  fill: color-mix(in srgb, var(--sp-lime) 60%, var(--sp-night));
  stroke: var(--sp-lime);
}

.bn__ray,
.bn__arc,
.bn__edge,
.bn__stand,
.bn__rule {
  stroke: var(--sp-lime);
  stroke-width: 2.5;
}

.bn__arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.bn__body {
  fill: color-mix(in srgb, var(--on-night) 12%, var(--sp-night));
  stroke: var(--on-night-2);
}

.bn__shine {
  fill: color-mix(in srgb, var(--on-night) 22%, transparent);
  stroke: none;
  translate: 0 0;
}

.bn__wall {
  fill: color-mix(in srgb, var(--on-night) 6%, var(--sp-night));
  stroke: var(--night-line);
}

.bn__dev rect {
  fill: color-mix(in srgb, var(--on-night) 85%, var(--sp-night));
  stroke: none;
}

.bn__dev circle {
  fill: var(--sp-lime);
  stroke: none;
}

.bn__dev {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.bn__vol {
  fill: color-mix(in srgb, var(--on-night) 10%, var(--sp-night));
  stroke: var(--on-night-2);
}

.bn__dotv {
  fill: var(--sp-lime);
  stroke: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.feat.is-anim .bn__lamp rect { animation-name: bn-glow; animation-duration: 3s; }
.feat.is-anim .bn__ray { animation-name: bn-ray; animation-duration: 3s; }
.feat.is-anim .bn__arc { animation-name: feat-tick; }
.feat.is-anim .bn__shine { animation-name: bn-shine; animation-duration: 5s; }
.feat.is-anim .bn__dev { animation-name: bn-sway; animation-duration: 5s; }
.feat.is-anim .bn__dotv { animation-name: bn-pulse; animation-duration: 3s; }

@keyframes bn-glow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes bn-ray {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@keyframes bn-shine {
  0%, 100% { translate: -30px 0; opacity: 0; }
  40%, 60% { opacity: 1; }
  100% { translate: 110px 0; }
}

@keyframes bn-sway {
  0%, 100% { rotate: -2deg; }
  50% { rotate: 2deg; }
}

@keyframes bn-pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.35; }
}

@media (max-width: 62rem) {
  .bn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn__a { grid-row: auto; }
  .bn__b { grid-column: span 2; }
  .bn__d { grid-column: 1 / -1; }
}

@media (max-width: 36rem) {
  .bn { grid-template-columns: minmax(0, 1fr); }
  .bn__b, .bn__d { grid-column: auto; }
  .sec--dark .bn .feat__svg { height: 7rem; }
}

/* ── «Где применяются»: вкладки-локации слева, крупное фото справа ──────────────
   Образец — «Виды табличек» на banerprint.pro; логика — shared/js/vidy.js (data-vid-still). */
.vid {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.vid__side {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--sp-green);
}

.vid__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vid__list button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

.vid__list button:hover {
  background: color-mix(in srgb, #fff 16%, transparent);
}

.vid__list button[aria-selected='true'] {
  background: var(--surface);
  color: var(--sp-green-dark);
  border-color: var(--surface);
}

.vid__list button:focus-visible {
  outline: 3px solid var(--sp-lime);
  outline-offset: 2px;
}

.vid__num {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 20%, transparent);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.vid__list button[aria-selected='true'] .vid__num {
  background: var(--sp-green);
  color: #fff;
}

.vid__stage {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--photo-bg);
  box-shadow: var(--shadow-card);
}

.vid__card {
  position: absolute;
  inset: 0;
  margin: 0;
}

.vid__card[data-pos='x'],
.vid__card[data-pos='1'],
.vid__card[data-pos='-1'] {
  display: none;
}

.vid__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: vid-in 0.5s ease;
}

.vid__tag {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--sp-night);
  color: var(--on-night);
  font-size: var(--fs-sm);
  font-weight: 600;
}

@keyframes vid-in {
  from { opacity: 0.35; }
}

/* Мало пунктов (бокс: четыре): панель уже, пилюли растягиваются на всю высоту фото, фото крупное 3:2. */
.vid--few {
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
}

.vid--few .vid__list {
  height: 100%;
  grid-auto-rows: 1fr;
}

.vid--few .vid__stage {
  min-height: 0;
  aspect-ratio: 3 / 2;
}

.vid--few .vid__list button {
  height: 100%;
  min-height: 3.25rem;
  border-radius: var(--radius-lg);
}

@media (max-width: 62rem) {
  .vid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Список — лента вбок: выбранная вкладка подкручивается в кадр скриптом. */
  .vid__list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .vid__list li {
    flex: none;
  }

  .vid__list button {
    width: auto;
    white-space: nowrap;
  }

  .vid__stage {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vid__list button {
    transition: none;
  }

  .vid__card img {
    animation: none;
  }
}

/* ── Бокс: «устройство по частям» — реальные фото с пояснениями ───────────────── */
.feat--parts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-6);
}

.boxpart__photo {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--photo-bg);
}

.boxpart__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.boxpart:hover .boxpart__photo img {
  scale: 1.05;
}

/* Пока блок на экране, кадр очень медленно приближается; вне экрана и при «уменьшить движение» стоит. */
.feat.is-anim.is-live .boxpart__photo img {
  animation: box-drift 12s ease-in-out infinite alternate;
}

@keyframes box-drift {
  from { scale: 1; }
  to { scale: 1.06; }
}

@media (max-width: 36rem) {
  .feat--parts {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

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

  .feat.is-hidden .feat__card {
    opacity: 1;
    translate: none;
  }

  .feat.is-anim .feat__svg *,
  .feat.is-anim .feat__svg > * {
    animation: none !important;
  }
}

/* ── Клиенты, документы ────────────────────────────────────────────────────── */

.clients {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.clients li {
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--ink-2);
}

/* Сетка логотипов клиентов: одинаковые ячейки в ровной решётке. Логотип в ячейке по центру
   с одинаковыми полями, квадратный он или вытянутый: ограничены и высота, и ширина. */
.logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 8 / 5;
  padding: var(--space-4) var(--space-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.logos img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 40rem) {
  .logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logos li {
    padding: var(--space-3) var(--space-4);
  }
}

.docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-5);
}

.docs article {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.docs h3 {
  font-size: var(--fs-lg);
}

.docs p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* ── Заявка и контакты ─────────────────────────────────────────────────────── */

.zayavka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: start;
}

.contacts {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}

.contacts dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.contacts dd {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.contacts a {
  color: var(--ink);
  text-decoration-color: var(--sp-lime);
}

.contacts a:hover {
  color: var(--sp-green);
}

.zayavka__direct {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.zayavka__direct p {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.zayavka__direct ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.zayavka__direct a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem; /* тач-цель: по этим ссылкам звонят с телефона */
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.zayavka__direct a:hover {
  color: var(--sp-green);
}

.zayavka__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--sp-green);
}

.zayavka__ico svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Реквизиты и адрес: иконка, жирная строка и пояснение. */
.proof {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.proof li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: center;
}

.proof .zayavka__ico {
  grid-row: span 2;
}

.proof span:not(.zayavka__ico) {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.zayavka__form {
  min-height: 18rem;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.zayavka__stub {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* Форма Битрикс24 красит себя настройками портала: кнопка «Отправить» выходит белой на светлом
   лайме (2,0 : 1), звёздочка обязательного поля — красной (4,0 : 1). Правильнее поменять цвета в
   настройках формы 17|yb0lq9; пока форма не прислана, перекрываем здесь.
   TODO: после настройки формы на портале убрать этот блок. */
.zayavka__form .b24-form-btn {
  background: var(--sp-green) !important;
  color: #fff !important;
}

.zayavka__form .b24-form-control-required {
  color: #b00020 !important;
}

@media (max-width: 62rem) {
  .zayavka {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* ── Подвал и cookie: тёмно-зелёная полоса ─────────────────────────────────── */

.foot {
  padding-block: var(--space-8) var(--space-6);
  background: var(--sp-night);
  color: var(--on-night-2);
  font-size: var(--fs-sm);
}

.foot a {
  color: var(--on-night);
  text-decoration: none;
}

/* Подчёркивание в покое убрано (как на asfp.space и signboard.pro); при наведении и,
   обязательно, при фокусе с клавиатуры оно возвращается, иначе ссылку не найти. */
.foot a:hover,
.foot a:focus-visible {
  color: var(--sp-lime);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.foot a:focus-visible,
.foot__link:focus-visible {
  outline: 2px solid var(--sp-lime);
  outline-offset: 3px;
}

.foot__in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-7);
}

.foot__head {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-lime);
  font-weight: 700;
}

.foot p {
  margin: 0 0 var(--space-2);
}

.foot b {
  color: var(--on-night);
}

.foot__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.foot__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--on-night);
  text-decoration: none;
  text-underline-offset: 0.2em;
  cursor: pointer;
  text-align: left;
}

.foot__link:hover,
.foot__link:focus-visible {
  color: var(--sp-lime);
  text-decoration: underline;
}

.foot__logo {
  width: auto;
  height: 3.25rem;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius);
}

.foot__bottom {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--night-line);
  font-size: var(--fs-xs);
}

.cookie {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-toast);
  padding-block: var(--space-4);
  background: color-mix(in srgb, var(--sp-night) 97%, transparent);
  border-top: 1px solid var(--night-line);
  color: var(--on-night);
}

.cookie[hidden] {
  display: none;
}

.cookie .btn {
  background: var(--sp-lime);
  color: var(--ink);
}

.cookie .btn:hover {
  background: var(--sp-leaf-top);
  color: var(--ink);
}

.cookie .btn--ghost {
  background: transparent;
  color: var(--on-night);
  border-color: var(--on-night-2);
}

.cookie .btn--ghost:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--on-night);
}

.cookie .btn--quiet {
  background: none;
  color: var(--on-night-2);
}

.cookie__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}

.cookie__text {
  flex: 1 1 22rem;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--on-night-2);
}

.cookie__text a {
  color: var(--sp-lime);
}

.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cookie__tune {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--night-line);
}

.cookie__cats {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.cookie__cats li {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 4%);
}

.cookie__cats label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  cursor: pointer;
}

.cookie__cats input:disabled,
.cookie__cats li:has(input:disabled) label {
  cursor: default;
}

.cookie__cats b {
  font-size: var(--fs-sm);
}

.cookie__cats span {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--on-night-2);
}

.cookie__cats a {
  color: var(--sp-lime);
}

@media (max-width: 56rem) {
  .cookie__actions .btn {
    flex: 1 1 auto;
  }
}

/* ── Страница модели ───────────────────────────────────────────────────────── */

.crumbs {
  padding-block: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.crumbs li + li::before {
  content: '/';
  margin-right: var(--space-2);
  color: var(--line-strong);
}

.model {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding-bottom: var(--space-9);
}

.shot {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 44rem;
  margin: 0;
  background: var(--photo-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.shot img {
  position: absolute;
  inset: 0;
}

.model h1 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem);
  margin-bottom: var(--space-3);
}

.model .lead {
  margin-bottom: var(--space-5);
}

/* Переключатель «на стену / на стойке» — на CSS, без скриптов:
   состояние хранит радиокнопка, остальное показывает :has() */
.mode {
  display: inline-flex;
  padding: var(--space-1);
  gap: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  margin-bottom: var(--space-5);
}

.mode label {
  position: relative;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.mode input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.mode label:has(input:checked) {
  background: var(--sp-green);
  color: #fff;
}

.mode label:has(input:focus-visible) {
  outline: 3px solid var(--sp-green);
  outline-offset: 2px;
}

.model [data-v='stand'] {
  display: none;
}

.model:has(input[value='stand']:checked) [data-v='stand'] {
  display: revert;
}

.model:has(input[value='stand']:checked) [data-v='wall'] {
  display: none;
}

.model__price {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.model__price small {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.spec {
  width: 100%;
  margin: var(--space-6) 0 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.spec th,
.spec td {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.spec th {
  width: 48%;
  padding-right: var(--space-4);
  font-weight: 500;
  color: var(--ink-muted);
}

.spec td {
  font-weight: 600;
}

.spec td small {
  display: block;
  font-weight: 400;
  color: var(--ink-muted);
}

.related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.related a {
  display: block;
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.related a:hover {
  border-color: var(--sp-green);
  color: var(--sp-green);
}

@media (max-width: 62rem) {
  .model {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .shot {
    max-height: 30rem;
  }
}

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

/* ── Отличия модели в карточке ─────────────────────────────────────────────────
   Фото у соседних моделей одинаковое (приборы снаружи совпадают), поэтому
   различие несёт этот блок наверху карточки, а снимок вторичен. */

.card__head {
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.card__head h3 {
  margin-bottom: var(--space-4);
}

.keyfig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: 0;
}

.keyfig div {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--bg-deep);
}

.keyfig__main {
  grid-column: 1 / -1;
  background: var(--sp-green) !important;
  color: #fff;
}

.keyfig dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sp-green-dark);
}

.keyfig__flag {
  grid-column: 1 / -1;
}

.keyfig__main dt {
  color: var(--on-night);
}

.keyfig dd {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.3;
  white-space: nowrap;
}

.keyfig__main dd {
  font-size: var(--fs-xl);
}

.card__photo {
  aspect-ratio: 16 / 10;
}

/* ── Первый экран: фото над подбором ───────────────────────────────────────── */

.hero__aside {
  display: grid;
  min-width: 0;
}

.hero__photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--photo-bg);
  box-shadow: var(--shadow-card);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__aside .pick {
  position: relative;
  margin: calc(-1 * var(--space-7)) var(--space-5) 0;
}

@media (max-width: 36rem) {
  .hero__aside .pick {
    margin-inline: 0;
    margin-top: calc(-1 * var(--space-5));
  }
}

/* ── Разнесённый эскиз на странице модели ──────────────────────────────────── */

.eskiz {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.eskiz__img {
  position: relative;
  aspect-ratio: 10 / 9;
  margin: 0;
  background: var(--photo-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.eskiz__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eskiz__list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.eskiz__list li {
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-left: 3px solid var(--sp-lime);
  color: var(--ink-2);
}

.eskiz__list b {
  color: var(--ink);
}

@media (max-width: 62rem) {
  .eskiz {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* ── Наименование изделия в заголовках ─────────────────────────────────────────
   Изделие называется дословно по регистрационному удостоверению, поэтому заголовки
   длинные: на странице модели название набирается мельче, а модель — крупно под ним. */

.hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
}

.topbar__dept {
  max-width: 13rem;
}

.model h1 {
  display: grid;
  gap: var(--space-1);
}

.model__kind {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--lh-heading);
  color: var(--sp-green-dark);
}

.model__name {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
}

/* ── Многостраничная структура ─────────────────────────────────────────────── */

/* Шапка: семь пунктов меню, подпись у логотипа — только на широком экране */
.topbar__dept {
  display: none;
}

@media (min-width: 80rem) {
  .topbar__dept {
    display: block;
  }
}

.nav {
  gap: var(--space-4);
}

@media (min-width: 80rem) {
  .nav {
    gap: var(--space-5);
  }
}

.nav a[aria-current],
.menu__list a[aria-current] {
  color: var(--sp-green);
  font-weight: 700;
}

.nav a[aria-current] {
  box-shadow: 0 2px 0 var(--sp-lime);
}

/* Заголовок внутренней страницы */
.pagehead {
  padding-bottom: var(--space-6);
  background:
    radial-gradient(36rem 16rem at 100% 0, color-mix(in srgb, var(--sp-lime) 24%, transparent), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}

.pagehead h1 {
  max-width: 28ch;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  margin-bottom: var(--space-3);
}

.pagehead .lead {
  margin: 0;
}

.sec--tight {
  padding-block: var(--space-7);
}

.more {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Текст и иллюстрация рядом */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.split__img {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--photo-bg);
}

.split__img img {
  width: 100%;
  height: auto;
}

@media (max-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* Маркированный список */
.bul {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  max-width: 62ch;
}

.bul li {
  padding-left: var(--space-5);
  position: relative;
  color: var(--ink-2);
}

.bul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--sp-lime);
}

.spec--wide {
  max-width: 52rem;
  margin-top: 0;
}

.boxinfo {
  max-width: 52rem;
}

.boxinfo .hero__cta {
  margin-bottom: var(--space-4);
}

/* Плитки разделов каталога */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tile__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 0;
  background: var(--photo-bg);
}

.tile__photo::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3.5rem;
  height: 4.25rem;
  translate: -50% -50%;
  background: var(--leaf-gradient);
  border-radius: 0 100% 100% 100% / 0 90% 100% 100%;
  rotate: -8deg;
  opacity: 0.35;
}

.tile__photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-5);
}

.tile__h {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.tile__h a {
  color: var(--ink);
  text-decoration: none;
}

/* вся плитка кликабельна: ссылка растягивается на карточку */
.tile {
  position: relative;
}

.tile__h a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.tile__h a:hover {
  color: var(--sp-green);
}

.tile__body p {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.tile__price {
  margin: auto 0 0 !important;
  padding-top: var(--space-3);
  font-weight: 700;
  font-size: var(--fs-lg) !important;
  color: var(--ink) !important;
}

/* Пункты меню не переносятся; подпись у логотипа — только на очень широком экране */
.nav a {
  white-space: nowrap;
}

@media (min-width: 80rem) and (max-width: 99.99rem) {
  .topbar__dept {
    display: none;
  }
}

/* Поля формы Битрикса рисует виджет и рамку фокуса не оставляет — возвращаем её.
   TODO: убрать вместе с остальными перекрытиями формы, когда её настройки будут готовы. */
.zayavka__form .b24-form-control:focus,
.zayavka__form .b24-form-control:focus-visible {
  outline: 3px solid var(--sp-green) !important;
  outline-offset: 2px;
}

/* Блог: список статей */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.post {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.post__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.post__h {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.post__h a {
  color: var(--ink);
  text-decoration: none;
}

/* вся карточка кликабельна: ссылка заголовка растягивается на неё */
.post__h a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.post:hover .post__h a,
.post__h a:hover {
  color: var(--sp-green);
}

.post p:not(.post__meta, .post__more) {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.post__more {
  margin: auto 0 0;
  padding-top: var(--space-3);
  font-weight: 700;
  color: var(--sp-green);
}

/* Блог: текст статьи */
.prose {
  max-width: 46rem;
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--fs-lg);
}

.prose p,
.prose li {
  color: var(--ink-2);
}

.prose ol {
  display: grid;
  gap: var(--space-3);
  margin-bottom: 0;
  padding-left: var(--space-6);
}

.prose .bul {
  max-width: none;
  margin-bottom: 0;
}

.prose a {
  color: var(--sp-green);
}

/* Предыдущая и следующая статья */
.postnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.postnav li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.postnav span {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.postnav a {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.postnav a:hover {
  color: var(--sp-green);
}

.postnav__next {
  text-align: right;
}

/* ── Первый экран: тёмная сцена с 3D-прибором ───────────────────────────────────
   Два режима одной разметки.
   Живой (data-motion="on", сцена не отказала): секция в несколько экранов, внутри
   липкий слой на весь экран; прогресс сцены считается от положения секции, прокрутка
   страницы не перехватывается.
   Статичный (всё остальное): обычная секция — фотография, заголовок и панель подбора.
   Условие «живой» записано одним и тем же префиксом ниже. */

.cine,
.cine__melt {
  /* Почти чёрный с зелёным оттенком: прибор должен выходить из темноты. */
  --cine-bg: color-mix(in srgb, var(--sp-night) 24%, black);
  --cine-lift: color-mix(in srgb, var(--sp-green) 40%, var(--cine-bg));
}

.cine {
  --cine-top: 4.5rem; /* высота шапки; точное значение ставит скрипт */
  position: relative;
  background: var(--cine-bg);
  color: var(--on-night);
}

.cine a:not(.btn) {
  color: var(--sp-lime);
}

.cine .eyebrow {
  color: var(--sp-lime);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

/* — статичный режим — */

.cine__sticky {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(calc(100vh - 4.5rem), 54rem);
  min-height: min(calc(100svh - 4.5rem), 54rem);
  padding: var(--space-7) max(1.25rem, calc((100% - var(--container)) / 2));
  overflow: hidden;
  background: var(--cine-bg);
}

.cine__canvas,
.cine__labels,
.cine__hint {
  display: none;
}

/* Заставка — первый кадр самой сцены (прозрачный рендер), а не фотография: она лежит на
   том же фоне и в том же ракурсе, поэтому подмена холстом не видна. Она же — запасной путь. */
.cine__poster {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  transition: opacity 0.4s, visibility 0s 0.4s;
}

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

/* Фон сцены: затухание к нижней кромке (там стык со светлой частью), зелёная дымка у
   горизонта и свечение за прибором. */
.cine__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--cine-bg) 0, transparent 14%),
    radial-gradient(90rem 15rem at 50% 88%, var(--cine-lift), transparent 70%);
}

/* Свечение за прибором: неподвижный градиент, который двигает композитор (translate и
   opacity), а не перерисовка фона на каждом кадре. */
.cine__glow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 36rem;
  height: 36rem;
  margin: -18rem 0 0 -18rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-lime) 30%, transparent), transparent);
  translate: var(--gx, 66vw) var(--gy, 36vh);
  opacity: var(--gi, 0.3);
  will-change: translate, opacity;
}

/* Виньетка поверх холста, под панелью и подписями. */
.cine__sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 46%, transparent 40%, rgb(0 0 0 / 62%) 100%);
}

/* Левая колонка: текст прямо на сцене и стеклянная плашка с подбором под ним. */
.cine__intro {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-5);
  width: min(34rem, 100%);
}

/* Текст лежит на 3D, поэтому под ним мягкое затемнение самой сцены: растушёванный
   градиент без границы, а не плашка. Затухает к краям и не заходит на прибор. */
.cine__intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -22vh -9rem -22vh -30vw;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 46% 38%,
    rgb(0 0 0 / 74%) 0,
    rgb(0 0 0 / 52%) 36%,
    rgb(0 0 0 / 18%) 62%,
    transparent 78%
  );
}

.cine__panel {
  padding: var(--space-5);
}

.cine__cta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.cine__cta .btn {
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
}

/* Шапка на главной непрозрачна: под ней проезжает тёмная сцена, и 92% белого дают грязно-серый. */
:root[data-motion='on'] .topbar {
  background: var(--surface);
}

/* Стекло: полупрозрачный тёмный фон, размытие, тонкая светлая рамка, мягкая тень.
   Без поддержки backdrop-filter фон остаётся достаточно плотным для контраста. */
.glass {
  background: color-mix(in srgb, var(--sp-night) 58%, transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--on-night) 22%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgb(0 0 0 / 38%), inset 0 1px 0 color-mix(in srgb, var(--on-night) 14%, transparent);
}

.cine__text {
  text-shadow: 0 2px 20px rgb(0 0 0 / 60%);
}

.cine__text h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--on-night);
}

.cine__text h1 em {
  font-style: normal;
  color: var(--sp-lime);
}

.cine__text .lead {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--on-night);
}

.cine .pick {
  padding: 0;
  margin: 0 0 var(--space-4);
  background: none;
  border: 0;
  box-shadow: none;
}

.cine .pick__lead {
  display: none;
}

.cine .pick__row {
  margin-bottom: var(--space-3);
}

.cine .pick h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
  color: var(--on-night);
}

.cine .pick__lead,
.cine .field,
.cine .pick__note {
  color: var(--on-night-2);
}

.cine .field input {
  color: var(--on-night);
  background: color-mix(in srgb, var(--on-night) 8%, transparent);
  border-color: color-mix(in srgb, var(--on-night) 28%, transparent);
}

.cine .field input::placeholder {
  color: var(--on-night-2);
  opacity: 1;
}

.cine .field input:focus {
  border-color: var(--sp-lime);
  background: color-mix(in srgb, var(--on-night) 12%, transparent);
  outline: 2px solid var(--sp-lime);
  outline-offset: 2px;
}

.cine .pick__out {
  min-height: 3.5rem;
  padding: var(--space-3);
  color: var(--on-night);
  background: color-mix(in srgb, var(--on-night) 8%, transparent);
}

.cine .pick__list li {
  background: color-mix(in srgb, var(--on-night) 10%, transparent);
}

.cine__open {
  display: none;
}

.btn--glass {
  background: transparent;
  color: var(--on-night);
  border: 1.5px solid color-mix(in srgb, var(--on-night) 38%, transparent);
}

.btn--glass:hover {
  background: color-mix(in srgb, var(--on-night) 12%, transparent);
  color: var(--on-night);
  border-color: var(--on-night);
}

.cine__back {
  position: absolute;
  z-index: 3;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--on-night);
  cursor: pointer;
}

.cine__back {
  left: var(--space-4);
  top: var(--space-4);
  text-decoration: none;
}

.cine__back[hidden] {
  display: none;
}

/* Стык с светлой частью: градиент по ступеням, без резкой границы. */
.cine__melt {
  height: clamp(7rem, 28vh, 15rem);
  margin-top: -1px;
  background: linear-gradient(
    to bottom,
    var(--cine-bg) 0%,
    color-mix(in srgb, var(--cine-bg) 72%, var(--bg-deep)) 22%,
    color-mix(in srgb, var(--cine-bg) 34%, var(--bg-deep)) 52%,
    color-mix(in srgb, var(--cine-bg) 9%, var(--bg-deep)) 80%,
    var(--bg-deep) 100%
  );
}

/* — живой режим — */

:root[data-motion='on'] .cine:not([data-state='photo']) {
  height: 520vh;
}

:root[data-motion='on'] .cine:not([data-state='photo']) .cine__sticky {
  position: sticky;
  top: var(--cine-top);
  display: block;
  height: calc(100vh - var(--cine-top));
  height: calc(100svh - var(--cine-top));
  padding: 0;
  overflow: hidden;
  background: var(--cine-bg);
}

:root[data-motion='on'] .cine:not([data-state='photo']) .cine__canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* жесты и колесо — странице */
}

/* Заставка уходит только по факту первого отрисованного кадра (data-state ставит скрипт);
   холст под ней уже полностью непрозрачен и показывает ту же картинку. */
:root[data-motion='on'] .cine[data-state='scene'] .cine__poster {
  opacity: 0;
  visibility: hidden;
}

:root[data-motion='on'] .cine:not([data-state='photo']) .cine__labels {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

:root[data-motion='on'] .cine:not([data-state='photo']) .cine__intro {
  position: absolute;
  z-index: 2;
  left: max(1.25rem, calc((100% - var(--container)) / 2));
  top: 50%;
  width: min(34rem, 46%);
  opacity: var(--pp, 1);
  translate: 0 calc(-50% + (1 - var(--pp, 1)) * -3rem);
  will-change: opacity, translate;
}

.cine__note {
  position: absolute;
  right: var(--space-5);
  top: var(--space-4);
  margin: 0;
  font: 500 var(--fs-xs) / 1 ui-monospace, 'SFMono-Regular', Consolas, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-night-2);
}

/* Подпись узла: точка на детали, тонкая линия-выноска и текст с моноширинным индексом. */
.cine__tag {
  position: absolute;
  z-index: 2;
  inset: 0 auto auto 0;
  translate: var(--x, 0) var(--y, 0);
  opacity: var(--on, 0);
  pointer-events: none;
}

.cine__tag i {
  position: absolute;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  margin: -0.225rem 0 0 -0.225rem;
  border-radius: var(--radius-pill);
  background: var(--sp-lime);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sp-lime) 22%, transparent), 0 0 16px var(--sp-lime);
}

.cine__tag-line {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--len, 0);
  height: 1px;
  background: linear-gradient(90deg, var(--sp-lime), color-mix(in srgb, var(--on-night) 55%, transparent));
  transform-origin: 0 50%;
  rotate: var(--ang, 0rad);
  scale: var(--on, 0) 1;
}

.cine__tag-text {
  position: absolute;
  left: var(--dx, 0);
  top: var(--dy, 0);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: clamp(0.95rem, 0.75rem + 0.55vw, 1.25rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--on-night);
  text-shadow: 0 0 14px rgb(0 0 0 / 85%);
  translate: 0.7rem -50%;
}

.cine__tag[data-side='left'] .cine__tag-text {
  align-items: flex-end;
  text-align: right;
  translate: calc(-100% - 0.7rem) -50%;
}

.cine__tag-text b {
  font: 500 var(--fs-xs) / 1 ui-monospace, 'SFMono-Regular', Consolas, monospace;
  letter-spacing: 0.22em;
  color: var(--sp-lime);
}

.cine__hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  translate: -50% 0;
  margin: 0;
  font: 500 var(--fs-xs) / 1 ui-monospace, 'SFMono-Regular', Consolas, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-night-2);
  opacity: var(--hint, 1);
  pointer-events: none;
}

.cine__hint::after {
  content: '';
  display: block;
  width: 1px;
  height: 1.5rem;
  margin: var(--space-2) auto 0;
  background: linear-gradient(var(--on-night-2), transparent);
}

:root[data-motion='on'] .cine:not([data-state='photo']) .cine__hint {
  display: block;
}

:root[data-motion='on'] .cine:not([data-state='photo']) .cine__back {
  opacity: var(--back, 0);
}

@media (max-width: 48rem) {
  .cine__sticky {
    align-items: end;
    /* Заставка занимает ровно один экран, как кадр сцены; текст начинается там же, где у
       живой сцены (над ним остаётся прибор), а длинная панель уходит ниже, на тёмный фон. */
    padding: calc(100vh - 4.5rem - 18rem) var(--space-3) var(--space-4);
    padding-top: calc(100svh - 4.5rem - 18rem);
  }

  .cine__poster {
    bottom: auto;
    height: calc(100vh - 4.5rem);
    height: calc(100svh - 4.5rem);
  }

  .cine__glow::before {
    translate: var(--gx, 50vw) var(--gy, 30vh);
  }

  .cine__intro {
    width: 100%;
    gap: var(--space-3);
  }

  .cine__intro::before {
    inset: -30vh -3rem -4rem -3rem;
    background: linear-gradient(to top, rgb(0 0 0 / 70%) 0, rgb(0 0 0 / 50%) 55%, transparent 100%);
  }

  .cine__panel {
    padding: var(--space-4);
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) {
    height: 380vh;
  }

  /* Телефон: над компактной стеклянной «шторкой» — заголовок на сцене; форма в шторке
     разворачивается по тапу. Так в начале сцены прибор виден над ними целиком. */
  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__intro {
    left: var(--space-3);
    right: var(--space-3);
    top: auto;
    bottom: var(--space-3);
    width: auto;
    translate: 0 calc((1 - var(--pp, 1)) * 3rem);
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__text h1 {
    margin: 0;
    font-size: 1.45rem;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__text .eyebrow,
  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__text .lead {
    display: none;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__open {
    display: inline-flex;
    justify-content: center;
    width: 100%;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__panel .pick {
    display: none;
    margin: var(--space-3) 0 0;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__intro.is-open .pick {
    display: block;
  }

  .cine__cta {
    margin-top: var(--space-3);
  }

  .cine__cta .btn {
    padding-inline: var(--space-3);
    padding-block: var(--space-2);
    font-size: var(--fs-sm);
  }

  .cine .pick__row {
    margin-bottom: var(--space-3);
  }

  .cine .pick__out {
    min-height: 0;
  }

  .cine__note {
    right: var(--space-3);
  }

  .cine__tag-text {
    font-size: 0.8rem;
  }
}

/* ── Этап 01: информационный блок «Что такое рециркулятор» ─────────────────────
   Настоящее содержимое (не декорация). В статичном запасном пути идёт в потоке под
   панелью; на живой сцене появляется на этапе «Снимаем со стены» слева от прибора. */

.cine__info {
  position: relative;
  z-index: 2;
  width: min(32rem, 100%);
  margin-top: var(--space-6);
  text-shadow: 0 2px 20px rgb(0 0 0 / 60%);
}

/* Затемнение нужно только на живой сцене, где текст лежит на 3D; в статике блоки стоят
   на тёмном фоне, а чужое затемнение перекрывало бы соседние блоки. */
.cine__info::before {
  display: none;
  content: '';
  position: absolute;
  z-index: -1;
  inset: -16vh -8rem -16vh -30vw;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 46% 50%,
    rgb(0 0 0 / 74%) 0,
    rgb(0 0 0 / 52%) 38%,
    rgb(0 0 0 / 18%) 64%,
    transparent 80%
  );
}

.cine__info h2 {
  /* Один отступ под заголовком для всех блоков сцены (01, 02 и финал). */
  margin-bottom: var(--space-5);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--on-night);
}

.cine__info-lead {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-base);
  color: var(--on-night-2);
}

.cine__facts {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.cine__facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.cine__facts svg {
  margin-top: 0.1rem;
  color: var(--sp-lime);
}

.cine__facts b {
  display: block;
  font-weight: 600;
  color: var(--on-night);
}

.cine__more {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-sm);
  color: var(--on-night-2);
}

:root[data-motion='on'] .cine:not([data-state='photo']) .cine__info::before {
  display: block;
}

:root[data-motion='on'] .cine:not([data-state='photo']) .cine__info {
  position: absolute;
  left: max(1.25rem, calc((100% - var(--container)) / 2));
  top: 47%;
  width: min(28rem, 40%);
  margin: 0;
  opacity: var(--on, 0);
  translate: 0 calc(-50% + (1 - var(--on, 0)) * 2rem);
  will-change: opacity, translate;
}

/* Телефон: заголовок, три пиктограммы в ряд с короткими подписями и кнопка. Описания
   остаются в разметке для скринридера, но визуально скрыты: иначе блок не уместился бы
   под прибором и налезал бы на него. */
@media (max-width: 48rem) {
  /* На телефоне блоки сжаты: отступ на ступень меньше, но тот же для всех трёх. */
  .cine__info h2 {
    margin-bottom: var(--space-4);
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__info {
    left: var(--space-3);
    right: var(--space-3);
    top: auto;
    bottom: var(--space-3);
    width: auto;
    translate: 0 calc((1 - var(--on, 0)) * 2rem);
  }

  .cine__info::before {
    inset: -30vh -3rem -4rem -3rem;
    background: linear-gradient(to top, rgb(0 0 0 / 75%) 0, rgb(0 0 0 / 55%) 60%, transparent 100%);
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__info h2 {
    font-size: 1.25rem;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__info-lead,
  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__more {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__facts li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-1);
    text-align: center;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__facts b {
    font-size: var(--fs-xs);
    line-height: 1.25;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__info .btn {
    width: 100%;
    justify-content: center;
    padding-block: var(--space-2);
  }

}

/* ── Этап 02: «Наши преимущества» ───────────────────────────────────────────────
   Тот же блок, что «Что такое рециркулятор»: слева, с затемнением под текстом. Без кнопки
   (она есть на этапе 01). */

:root[data-motion='on'] .cine:not([data-state='photo']) .cine__adv,
:root[data-motion='on'] .cine:not([data-state='photo']) .cine__fin {
  width: min(24rem, 34%);
}

.cine__adv .cine__facts {
  margin-bottom: 0;
}

@media (max-width: 48rem) {
  /* Телефон: четыре пиктограммы в ряд с короткими подписями. Над ними разлёт поднят
     (см. look в scene.js), чтобы не налезать на подпись «Вентиляторы». */
  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__adv,
  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__fin {
    width: auto;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__adv .cine__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0;
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__adv h2 {
    font-size: 1.1rem;
  }
}

/* ── Финал: «Коротко о приборах» ─────────────────────────────────────────────────
   Тот же блок, что на этапах 01 и 02, слева. Появляется, когда прибор собран, остаётся до
   конца сцены. Без кнопки. */

.cine__fin .cine__facts {
  margin-bottom: var(--space-5);
}

/* Статичный запасной путь: заставка занимает только первый экран, а блоки идут под панелью
   тремя колонками, а не растягивают заставку на всю высоту. */
:root:not([data-motion='on']) .cine__poster,
.cine[data-state='photo'] .cine__poster {
  bottom: auto;
  height: calc(100vh - 4.5rem);
  height: calc(100svh - 4.5rem);
}

@media (min-width: 62rem) {
  .cine__sticky {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-7);
    align-content: center;
  }

  .cine__intro {
    grid-column: 1 / -1;
  }

  .cine__info {
    width: auto;
    align-self: start;
  }
}

@media (max-width: 48rem) {
  /* Телефон, финал: две колонки по два факта, названия целиком. */
  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__fin .cine__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-2);
    margin-bottom: var(--space-3);
  }

  :root[data-motion='on'] .cine:not([data-state='photo']) .cine__fin h2 {
    font-size: 1.1rem;
  }
}

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

/* ── Юридические документы: читаемая колонка ───────────────────────────────── */

.legal > * {
  max-width: 52rem;
}

.legal h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-xl);
}

.legal p,
.legal li {
  color: var(--ink-2);
  font-size: var(--fs-base);
  line-height: 1.7;
}

.legal p {
  margin: 0 0 var(--space-3);
}

.legal ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.legal__right {
  text-align: right;
}

/* ── Сертификаты: регистрационное удостоверение ────────────────────────────── */

.ru {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.ru__scan {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--surface);
}

.ru__scan img {
  display: block;
  width: 100%;
  height: auto;
}

.ru__scan:focus-visible {
  outline: 3px solid var(--sp-green);
  outline-offset: 3px;
}

.ru__facts {
  display: grid;
  margin: var(--space-5) 0;
}

.ru__facts div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.ru__facts dt {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.ru__facts dd {
  margin: 0;
  font-weight: 600;
}

.ru__models {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ru__models li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 600;
}

@media (max-width: 62rem) {
  .ru {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .ru__scan {
    max-width: 22rem;
  }
}

@media (max-width: 36rem) {
  .ru__facts div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* ── Карточка товара с переключателем вариантов (/accessories/) ─────────────── */

.product {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  max-width: 56rem;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.product__photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--photo-bg);
}

.product__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product__body h3 {
  margin-bottom: var(--space-4);
}

.product__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.product__opts legend {
  width: 100%;
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pick-opt {
  position: relative;
}

.pick-opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.pick-opt span {
  display: block;
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-weight: 600;
  background: var(--surface);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.pick-opt input:checked + span {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #fff;
}

.pick-opt input:focus-visible + span {
  outline: 3px solid var(--sp-lime);
  outline-offset: 2px;
}

.product__price {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1;
}

.product__desc,
.product__fit {
  margin: 0 0 var(--space-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.product__fit {
  margin-bottom: var(--space-5);
}

@media (max-width: 48rem) {
  .product {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pick-opt span {
    transition: none;
  }
}

.warn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 56rem;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--sp-green);
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
  color: var(--ink);
}

.warn__ico {
  flex: none;
  color: var(--sp-green-dark);
}

.warn p {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
}

.warn b {
  color: var(--sp-green-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Колода «Как заказать» (shared/js/izdk.js, текстовый вариант) ───────────────
   Без скрипта — сетка карточек из списка; со скриптом (izdk--js) список прячется и строится колода:
   слева панель с шагами, справа веер текстовых карточек, под ним счётчик, точки и стрелки. */
.izdk__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.izdk__list[hidden] {
  display: none;
}

.izdk__card {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.izdk__card h3 {
  margin-bottom: var(--space-2);
}

.izdk__card p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.izdk__ui {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.izdk__side {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--sp-green);
}

.izdk__deck {
  display: grid;
  gap: var(--space-2);
}

.izdk__tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, #fff 35%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

.izdk__tab:hover {
  background: color-mix(in srgb, #fff 16%, transparent);
}

.izdk__tab[aria-selected='true'] {
  background: var(--surface);
  color: var(--sp-green-dark);
  border-color: var(--surface);
}

.izdk__tab:focus-visible {
  outline: 3px solid var(--sp-lime);
  outline-offset: 2px;
}

.izdk__tab-num {
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 20%, transparent);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.izdk__tab[aria-selected='true'] .izdk__tab-num {
  background: var(--sp-green);
  color: #fff;
}

.izdk__pause {
  align-self: flex-start;
  margin: var(--space-3) 0 0;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.izdk__pause[hidden] {
  display: none;
}

.izdk__stage {
  position: relative;
  min-height: 19rem;
  overflow: hidden;
}

.izdk__photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(22rem, 78%);
  margin: 0;
  transform: translate(-50%, -50%) scale(0.75);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s;
}

.izdk__text {
  display: grid;
  align-content: center;
  min-height: 12rem;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-lg);
  color: var(--ink);
}

.izdk__text p {
  margin: 0;
}

.izdk__photo[data-pos='active'] {
  z-index: 3;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.izdk__photo[data-pos='prev'],
.izdk__photo[data-pos='next'] {
  z-index: 2;
  opacity: 0.55;
  pointer-events: auto;
  cursor: pointer;
}

.izdk__photo[data-pos='prev'] {
  transform: translate(-92%, -50%) scale(0.82) rotate(-4deg);
}

.izdk__photo[data-pos='next'] {
  transform: translate(-8%, -50%) scale(0.82) rotate(4deg);
}

.izdk__cap {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
  opacity: 0;
  transition: opacity 0.3s;
}

.izdk__photo[data-pos='active'] .izdk__cap {
  opacity: 1;
}

.izdk__badge {
  padding: 0.1rem var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.izdk__title {
  font-weight: 700;
}

.izdk__nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.izdk__count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-2);
}

.izdk__dots {
  display: flex;
  gap: var(--space-2);
}

.izdk__dot {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border: 1.5px solid var(--sp-green);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.izdk__dot[aria-current='true'] {
  background: var(--sp-green);
}

.izdk__dot:focus-visible,
.izdk__arrow:focus-visible {
  outline: 3px solid var(--sp-lime);
  outline-offset: 2px;
}

.izdk__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--sp-green);
  border-radius: 50%;
  background: var(--surface);
  color: var(--sp-green-dark);
  font: inherit;
  font-size: var(--fs-lg);
  cursor: pointer;
}

.izdk__arrow:hover {
  background: var(--bg-deep);
}

@media (max-width: 56rem) {
  .izdk__ui {
    grid-template-columns: minmax(0, 1fr);
  }

  .izdk__deck {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .izdk__tab {
    flex: none;
    white-space: nowrap;
  }

  .izdk__nav {
    grid-column: 1;
  }

  .izdk__stage {
    min-height: 17rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .izdk__photo,
  .izdk__cap,
  .izdk__tab {
    transition: none;
  }
}

/* Обязательная надпись для медизделий — спокойная полоса перед подвалом на всех страницах. */
.med {
  padding-block: var(--space-4);
  background: var(--bg-deep);
  border-top: 1px solid var(--line-strong);
  color: var(--ink);
}

.med p {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: center;
}

/* Строка «текст + картинка», стороны чередуются (/accessories/). */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  margin-bottom: var(--space-8);
}

.duo--flip .duo__text {
  order: 2;
}

.duo__text h3 {
  margin-bottom: var(--space-3);
}

.duo__text p {
  color: var(--ink-2);
}

.duo__img {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  background: var(--photo-bg);
  box-shadow: var(--shadow-card);
}

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

@media (max-width: 62rem) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-7);
  }

  .duo--flip .duo__text {
    order: 0;
  }
}

.duo__img--fit img {
  object-fit: contain;
}

/* Колода шагов с картинками: фото сверху, номер и текст шага под ним. */
.izdk__fig {
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--photo-bg);
}

.izdk__fig img,
.izdk__photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.izdk__card:has(.izdk__fig) {
  overflow: hidden;
}

.izdk__photo > img {
  aspect-ratio: 3 / 2;
  height: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.izdk__photo:has(> img) {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.izdk__text--under {
  min-height: 0;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--fs-base);
}

.izdk__photo:has(> img) .izdk__cap {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
}

.izdk--text .izdk__stage {
  min-height: 28rem;
}

@media (max-width: 56rem) {
  .izdk--text .izdk__stage {
    min-height: 26rem;
  }
}

/* ── Сервис: шесть карточек и иллюстрации ──────────────────────────────────── */
.feat--trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 62rem) {
  .feat--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 36rem) {
  .feat--trio { grid-template-columns: minmax(0, 1fr); }
}

.sv__dot {
  fill: color-mix(in srgb, var(--sp-lime) 70%, var(--surface));
  stroke: var(--sp-green-dark);
  stroke-width: 1.5;
}

.sv__num {
  fill: var(--sp-green-dark);
  stroke: none;
  font: 800 28px var(--font);
}

.sv__gear,
.sv__wrench,
.sv__snow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.sv__gear circle:first-child,
.sv__lampbody,
.sv__tube,
.sv__clock {
  fill: var(--surface);
}

.sv__wrench path {
  fill: color-mix(in srgb, var(--sp-lime) 55%, var(--surface));
}

.sv__ray,
.sv__rays,
.sv__tick,
.sv__hand,
.sv__clockhand {
  stroke: var(--ink-muted);
}

.sv__stop,
.sv__slash {
  stroke: var(--sp-green-dark);
  stroke-width: 5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.sv__hand {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.feat.is-anim .sv__dot { animation-name: sv-dot; animation-delay: calc(var(--k) * 0.3s); }
.feat.is-anim .sv__gear { animation-name: sv-spin; animation-duration: 12s; animation-timing-function: linear; }
.feat.is-anim .sv__wrench { animation-name: sv-wrench; }
.feat.is-anim .sv__hand { animation-name: sv-hand; animation-duration: 6s; }
.feat.is-anim .sv__rays { animation-name: sv-rays; animation-duration: 3s; }
.feat.is-anim .sv__stop,
.feat.is-anim .sv__slash { animation-name: feat-tick; }
.feat.is-anim .sv__snow { animation-name: sv-spin; animation-duration: 16s; animation-timing-function: linear; }
.feat.is-anim .sv__clockhand { animation-name: sv-spin; animation-duration: 8s; animation-timing-function: linear; transform-box: view-box; transform-origin: 150px 86px; }

@keyframes sv-dot {
  0%, 20% { opacity: 0.25; }
  35%, 85% { opacity: 1; }
  100% { opacity: 0.25; }
}

@keyframes sv-spin {
  to { rotate: 360deg; }
}

@keyframes sv-wrench {
  0%, 100% { rotate: -8deg; }
  50% { rotate: 8deg; }
}

@keyframes sv-hand {
  0%, 100% { rotate: -50deg; }
  50% { rotate: 50deg; }
}

@keyframes sv-rays {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.gal--steps + .hero__cta {
  margin-top: var(--space-6);
}

/* Плашка «Вы выбрали: …» над формой заявки (zakaz.js). */
.zayavka__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sp-green);
  border-radius: var(--radius-lg);
}

.zayavka__pick[hidden] {
  display: none;
}

.zayavka__pick p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.zayavka__pick b {
  color: var(--ink);
  font-size: var(--fs-base);
}

/* Блог: кадр в карточке списка и иллюстрации внутри статьи. */
.post__fig {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--photo-bg);
}

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

.prose__fig {
  margin: var(--space-6) 0;
}

.prose__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--photo-bg);
}

.prose__fig figcaption {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* Эскизы и инфографика — схемы на светлом фоне: тонкая рамка, чтобы кадр не растворялся в странице. */
.prose__fig--info img {
  border: 1px solid var(--line);
}

/* Страница модели: таблица объёмов по категориям помещения и показания. */
.spec-scroll {
  overflow-x: auto;
}

.spec--cat {
  width: 100%;
  min-width: 30rem;
  max-width: 46rem;
  text-align: center;
  background: var(--surface);
}

.spec--cat thead th {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-align: center;
}

.spec--cat tbody th {
  text-align: left;
  max-width: 14rem;
}

.spec--cat td {
  font-weight: 700;
}

.indic {
  margin-top: var(--space-5);
  max-width: 46rem;
}

.indic p {
  margin: 0 0 var(--space-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* Таблица по категориям: перебиваем общие правила .spec (ширина первой колонки, выравнивание). */
.spec--cat th,
.spec--cat td {
  width: auto;
  padding: var(--space-3);
  text-align: center;
}

.spec--cat tbody th,
.spec--cat thead th:first-child {
  width: 14rem;
  text-align: left;
}