/* ============================================================
   ИНКОМ-БЕТОН – бренд поверх шаблона.
   template.css задаёт каркас и типографику, здесь – фирменный
   цвет, герой с нашим шейдером, HUD и калькулятор бетона.
   ============================================================ */

:root{
  /* лайм шаблона -> фирменный зелёный ИНКОМ-БЕТОН */
  --lime:#00af50;
  --lime-soft:#6ee44f;      /* яркий акцент для HUD на тёмном */
}

/* логотип: настоящий знак ИНКОМ-БЕТОН в векторе (img/logo-inkom.svg).
   В шапке знак зелёный, надпись берёт цвет ссылки, поэтому читается
   и на тёмном герое, и на серой плашке после прокрутки */
.logo{ display:block;line-height:0;color:#fff }
.logo__svg{ display:block;height:56px;width:auto;overflow:visible }
@media (max-width:900px){ .logo__svg{ height:42px } }
.tag-btn--lime{ color:#fff }

/* ---------- герой: заголовки сменяют друг друга ---------- */
.hero__titles{ display:grid }
.hero__titles .hero__title{
  grid-area:1 / 1;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.hero__titles .hero__title.is-on{ opacity:1;transform:none }

/* ---------- HUD поверх каркаса ---------- */
.hero__hud{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);
}
.hero__hud.is-on{ opacity:1 }
.hud-tag{
  position:absolute;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime-soft);white-space:nowrap;
  text-shadow:0 0 12px rgba(110,228,79,.45);
}
/* левые метки выше заголовка героя: на остановках они видны одновременно */
.hud-t1{ left:var(--gutter);top:40% }
.hud-t2{ left:var(--gutter);top:44% }
.hud-t3{ right:var(--gutter);top:62%;text-align:right }
.hud-t4{ right:var(--gutter);top:22%;text-align:right }
.hud-t5{ left:50%;top:14%;transform:translateX(-50%) }
.hud-frame{
  position:absolute;left:11%;right:11%;top:34%;bottom:30%;
  border:1px solid rgba(110,228,79,.55);
}
.hud-frame i{ position:absolute;width:14px;height:14px;border:2px solid #cdfcb4 }
.hud-frame i:nth-child(1){ left:-1px;top:-1px;border-right:0;border-bottom:0 }
.hud-frame i:nth-child(2){ right:-1px;top:-1px;border-left:0;border-bottom:0 }
.hud-frame i:nth-child(3){ left:-1px;bottom:-1px;border-right:0;border-top:0 }
.hud-frame i:nth-child(4){ right:-1px;bottom:-1px;border-left:0;border-top:0 }

/* сетка поверх кадра мешает каркасу – гасим к финалу */
.hero__grid{ transition:opacity .6s var(--ease) }
.hero.is-scan .hero__grid{ opacity:.25 }

/* ---------- калькулятор бетона ---------- */
.chips{ display:flex;flex-wrap:wrap;gap:8px;margin-top:28px }
.chip{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  padding:11px 16px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink);
  transition:background-color .25s,border-color .25s,color .25s;
}
.chip:hover{ border-color:var(--ink) }
.chip.is-active{ background:var(--lime);border-color:var(--lime);color:#fff }

.check{ display:flex;align-items:center;gap:12px;margin-top:32px;font-size:19px;cursor:pointer }
.check input{ width:19px;height:19px;accent-color:var(--ink) }

.calc__total{ display:flex;align-items:baseline;gap:10px }
.calc__total span{ color:var(--lime) }
.calc__rows .calc__sum{ margin-top:8px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16) }
.calc__rows .calc__sum b{ color:var(--lime-soft) }
.calc__note{ margin-top:18px;font-size:12px;letter-spacing:.08em;color:#ffb27a }
.calc__note:empty{ display:none }
.calc__fine{ margin-top:14px;font-size:13px;color:#9aa5a1 }

/* ---------- заявка ---------- */
.cta__side{ display:grid;gap:16px;justify-items:start }
.cta__phone{ font-size:clamp(26px,2.4vw,40px);letter-spacing:-.03em }
.cta__phone:hover{ color:var(--lime) }

/* ---------- мелочи ---------- */
.footer__inner{ flex-wrap:wrap }
@media (max-width:900px){
  .hud-frame{ left:6%;right:6% }
  .hud-t1,.hud-t2{ top:auto;bottom:22% }
  .hud-t2{ bottom:18% }
  .hud-t3{ display:none }
}

/* ---------- заявка (секция CTA шаблона) ---------- */
.cta__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,4vw,80px);align-items:start;
}
.cta__left .display{ max-width:14ch }
.cta__contacts{ display:grid;gap:10px;margin-top:clamp(28px,3vw,52px) }
.cta__phone{ font-size:clamp(26px,2.2vw,38px);letter-spacing:-.03em }
.cta__phone:hover{ color:var(--lime) }
.cta__mail{ font-size:19px;color:var(--muted) }
.cta__mail:hover{ color:var(--ink) }
.cta__addr{ margin:6px 0 0;font-size:13px;color:var(--muted) }

.lead{ display:grid;gap:0 }
.lead .field input{ font-size:19px }
.lead .field input::placeholder{ color:#b3bab7 }
.lead__consent{ margin-top:28px;font-size:15px;line-height:1.45;align-items:flex-start }
.lead__consent input{ margin-top:2px;flex:none }
.lead__consent a{ text-decoration:underline }
.lead__submit{ margin-top:28px;justify-self:start;min-width:220px }
.lead__msg{ margin-top:14px;min-height:1.3em;font-size:12px;letter-spacing:.08em }
.lead__msg.is-ok{ color:var(--lime) }
.lead__msg.is-err{ color:#d2593a }

@media (max-width:900px){
  .cta__grid{ grid-template-columns:1fr }
}

/* ============================================================
   КИРИЛЛИЦА В ШАБЛОНЕ
   У шаблона каждое слово в [data-split] – inline-block с
   overflow:hidden (так прячется выезд снизу), а line-height у
   крупных заголовков 0.92–0.95. Латинице этого хватает,
   кириллице нет: «б», «й» вылезают вверх, «р», «у», «д» вниз,
   и края срезались. Расширяем бокс слова паддингами и гасим
   прибавку отрицательными полями, чтобы вёрстка не поехала.
   Сдвиг пряталки увеличен, иначе буква выглядывала бы из
   нижнего паддинга (overflow режет по padding-box).
   ============================================================ */
[data-split] .word{
  padding-top:.26em;
  padding-bottom:.26em;
  margin-top:-.26em;
  margin-bottom:-.26em;
}
[data-split] .word > span{ transform:translateY(170%) }
[data-split].is-visible .word > span{ transform:none }

/* Межстрочный минимум под выносные элементы кириллицы */
.display{ line-height:1.02 }
.hero__title{ line-height:1.0 }
.calc__title,.calc__card-title{ line-height:1.14 }
.calc__total{ line-height:1.16 }
.cta__phone{ line-height:1.12 }

/* ============================================================
   КОНТЕНТНЫЕ СЕКЦИИ: цены, услуги, лаборатория, партнёры
   ============================================================ */
.section{ padding-block:clamp(76px,9vw,150px) }
.section--dark{ background:var(--dark);color:#fff }
.section__head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:20px 32px;margin-bottom:clamp(28px,3.6vw,56px);
}
.section__title{
  margin:0;font-weight:400;line-height:1.06;letter-spacing:-.04em;
  font-size:clamp(32px,3.4vw,62px);
}
.section__note{ max-width:46ch;color:var(--muted);font-size:17px;line-height:1.5 }
/* пояснение и кнопка «Скачать прайс» в шапке блока цен */
.section__aside{ display:grid;gap:16px;justify-items:start }
.section--dark .section__note{ color:#9aa5a1 }

/* таблицы прайса */
.tbl-wrap{ overflow-x:auto;-webkit-overflow-scrolling:touch }
.tbl{ width:100%;min-width:520px;border-collapse:collapse }
.tbl th{
  padding:13px 16px;text-align:left;white-space:nowrap;
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.tbl td{ padding:15px 16px;font-size:17px;border-bottom:1px solid var(--line) }
.tbl th:last-child,.tbl td:last-child{ text-align:right;font-family:var(--mono);white-space:nowrap }
.tbl tbody tr:hover td{ background:var(--paper-2) }
.section--dark .tbl th{ color:#7f8b87;border-color:var(--line-dark) }
.section--dark .tbl td{ border-color:var(--line-dark) }
.section--dark .tbl tbody tr:hover td{ background:rgba(255,255,255,.04) }

/* две колонки: список слева, таблица справа */
.split2{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,4vw,72px);align-items:start }

/* список правил и материалов */
.bullets{ margin:0;padding:0;list-style:none;display:grid;gap:14px }
.bullets li{ position:relative;padding-left:26px;font-size:17px;line-height:1.5 }
.bullets li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--lime);
}

/* лаборатория: раскрывающиеся группы */
.acc{ border-top:1px solid var(--line) }
.acc__item{ border-bottom:1px solid var(--line) }
.acc__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em;
}
.acc__item summary::-webkit-details-marker{ display:none }
.acc__item summary::after{
  content:"+";font-family:var(--mono);font-size:22px;color:var(--muted);flex:none;
}
.acc__item[open] summary::after{ content:"–" }
.acc__body{ padding-bottom:24px }

/* партнёры */
.partners{ display:flex;flex-wrap:wrap;gap:12px }
.partner{
  padding:14px 22px;border:1px solid var(--line);border-radius:10px;
  font-size:17px;letter-spacing:-.01em;
}
.section--dark .partner{ border-color:var(--line-dark) }

/* география доставки */
.geo{ display:flex;flex-wrap:wrap;gap:10px;margin-top:22px }
.geo span{
  padding:9px 16px;border-radius:8px;background:var(--paper-2);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.section--dark .geo span{ background:rgba(255,255,255,.07);color:#d6ded9 }

/* ============================================================
   КАРТА В КАЛЬКУЛЯТОРЕ
   ============================================================ */
.geofield{ display:flex;gap:10px;margin-top:26px;flex-wrap:wrap }
.geofield input{
  flex:1 1 220px;min-width:0;padding:14px 16px;font:inherit;font-size:17px;
  color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:10px;
}
.geofield input:focus{ outline:none;border-color:var(--ink) }
.geofield button{
  padding:14px 20px;border:0;border-radius:10px;cursor:pointer;
  background:var(--lime);color:#fff;font:inherit;font-size:15px;
}
.map{
  height:clamp(240px,30vw,380px);margin-top:14px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-2);
}
.map > div{ height:100% }
.map-hint{ margin-top:10px;font-size:14px;color:var(--muted) }
.map-hint b{ font-family:var(--mono);font-weight:400;color:var(--ink) }
.map-off{ display:grid;place-items:center;height:100%;margin:0;padding:24px;text-align:center;font-size:14px;line-height:1.45;color:var(--muted) }

/* строка выбора: наполнитель, марка, насос */
.selects{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:28px }
.selects label{ display:grid;gap:8px;font-size:14px;color:var(--muted) }
.selects select{
  padding:13px 14px;font:inherit;font-size:17px;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:10px;
}
.selects select:focus{ outline:none;border-color:var(--ink) }

@media (max-width:900px){
  .split2{ grid-template-columns:1fr }
  .tbl td{ font-size:16px;padding:13px }
}

/* подзаголовки внутри секций и отступы между таблицами */
.sub-title{
  margin:0 0 20px;font-weight:500;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(19px,1.7vw,26px);
}
.bullets + .sub-title{ margin-top:44px }
.tbl-wrap--gap{ margin-top:44px }

/* ============================================================
   КАЛЬКУЛЯТОР В ОДИН ЭКРАН
   Параметры сверху, адрес и карта рядом, карточка итога сжата.
   ============================================================ */
.calc{ padding-block:clamp(40px,4.5vw,72px) }
.calc__grid{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,3vw,48px) }
.calc__eyebrow{ font-size:15px }
.calc__title{ font-size:clamp(28px,2.4vw,40px) }
.calc .chips{ margin-top:14px }
.calc .chip{ padding:9px 13px }
.calc .fields{ grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;margin-top:4px }
.calc .field{ gap:4px;padding-block:12px 8px;font-size:17px }
.calc .field span{ font-size:13px;color:var(--muted) }
.calc__vol{ max-width:360px;margin-top:4px }
.calc .volstep{ display:flex;align-items:center;gap:10px;font-size:inherit;color:inherit }
.volstep input{ flex:1;min-width:0;text-align:center;font-size:24px;font-variant-numeric:tabular-nums }
.volstep__btn{ flex:none;width:38px;height:38px;border:1px solid #cfd3d1;background:none;color:var(--ink);
  font-size:22px;line-height:1;cursor:pointer;transition:border-color .2s,background-color .2s }
.volstep__btn:hover{ border-color:var(--ink) }
.volstep__btn:active{ background:#eef0ef }
.calc__volhint{ margin-top:8px;font-size:13px;color:var(--muted);transition:color .3s }
.calc__volhint.is-warn{ color:var(--ink);font-weight:500 }
.calc .selects{ grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px }
.calc .selects label{ gap:5px;font-size:13px }
.calc .selects select{ min-width:0;padding:10px 12px;font-size:15px }
.calc__opts{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px;align-items:start }
.calc__opts .check{ margin-top:0;font-size:16px }
.calc__opts .check input{ width:17px;height:17px }
.calc__opts .selects{ grid-template-columns:minmax(0,1fr);margin-top:8px }
.calc [hidden]{ display:none !important }   /* display:grid у .selects перебивал атрибут hidden */

.calc__where{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
}
.calc__title--map{ margin:0;font-size:clamp(22px,1.8vw,30px) }
.calc .geofield{ position:relative;margin-top:12px;gap:8px;flex-wrap:nowrap }
.calc .geofield input{ flex:1 1 auto;padding:10px 12px;font-size:15px }
.calc .geofield button{ padding:10px 14px;font-size:14px }
.calc .map{ position:relative;height:clamp(230px,30vh,290px);margin-top:0 }
.calc .map-hint{ font-size:13px;line-height:1.4 }
.calc .range{ gap:8px;margin-top:12px;font-size:14px }
.calc .range__labels{ font-size:12px }

.calc__card{ padding:clamp(28px,2.6vw,40px) clamp(22px,2.2vw,36px) clamp(28px,2.6vw,40px) calc(clamp(22px,2.2vw,36px) + 36px) }
.calc__card-title{ margin-top:12px;font-size:clamp(22px,1.8vw,30px) }
.calc__total{ margin-top:6px;font-size:clamp(38px,3.4vw,56px) }
.calc__pct{ margin-top:2px;font-size:17px }
.calc__pct b{ margin-left:8px;font-size:24px }
.calc__divider{ margin:20px -80px }
.calc__sub{ font-size:17px }
.calc__rows{ gap:12px;margin-top:14px }
.calc__rows li{ font-size:15px }
.calc__rows em{ display:block;margin-top:2px;font-size:12px }
.calc__rows b{ font-size:clamp(18px,1.4vw,22px) }
.calc__rows .calc__sum{ margin-top:2px;padding-top:12px }
.calc__rows .calc__sum span{ font-size:18px }
.calc__rows .calc__sum b{ font-size:clamp(24px,2vw,32px) }
.calc__note{ margin-top:12px }
.calc__fine{ margin-top:10px;font-size:12px }

/* подсказки адресов */
.geosuggest{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;
  margin:0;padding:4px;list-style:none;max-height:260px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.geosuggest li{ display:grid;gap:2px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:14px;line-height:1.3 }
.geosuggest li span{ font-size:12px;color:var(--muted) }
.geosuggest li:hover,.geosuggest li.is-active{ background:var(--paper-2) }

/* кнопки масштаба и метки на Яндекс Карте */
.map__zoom{ position:absolute;right:10px;top:10px;z-index:5;display:grid;gap:4px }
.map__zoom button{
  width:34px;height:34px;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  background:#fff;color:var(--ink);font-size:18px;line-height:1;
}
.ypin{
  position:absolute;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);
  background:#00af50;border:3px solid #fff;box-shadow:0 0 0 2px #00af50;
}
.ypin--drop{ width:22px;height:22px;background:#0b1f1c;box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:grab }

/* низкие экраны ноутбуков */
@media (min-width:901px) and (max-height:820px){
  .calc{ padding-block:28px }
  .calc .field{ padding-block:8px 6px }
  .calc .map{ height:220px }
}
@media (max-width:900px){
  .calc__grid,.calc__where{ grid-template-columns:minmax(0,1fr) }
  .calc .map{ height:300px }
}
@media (max-width:560px){
  .calc__opts,.calc .selects{ grid-template-columns:minmax(0,1fr) }
  .calc .fields{ column-gap:14px }
}

/* Шапка: пунктов меню пять, на средних ширинах строки ломались пополам */
.logo__text,
.nav a,
.tag-btn{ white-space:nowrap }
@media (max-width:1500px){
  .nav{ gap:clamp(14px,1.5vw,28px) }
  .nav a{ font-size:15px }
}

/* Таблица шире экрана тянула за собой колонку грида: 1fr это
   minmax(auto,1fr), а auto равен min-content таблицы. Явный
   нулевой минимум оставляет прокрутку внутри .tbl-wrap. */
.tbl-wrap{ min-width:0 }
@media (max-width:900px){
  .split2{ grid-template-columns:minmax(0,1fr) }
}

/* Якорные переходы: липкая шапка накрывала заголовок секции */
.section,.calc,.features,.cta,.intro{ scroll-margin-top:96px }

/* На телефоне колонка с ценой уходила за край, а горизонтальную
   прокрутку внутри таблицы никто не замечает. Разворачиваем каждую
   строку в карточку: подпись слева, значение справа. Подписи берём
   из data-label, их проставляет fillTable в main.js. */
@media (max-width:760px){
  .tbl{ min-width:0 }
  .tbl thead{ display:none }
  .tbl tbody tr{ display:block;padding:12px 0;border-bottom:1px solid var(--line) }
  .tbl tbody tr:hover td{ background:none }
  .tbl td{
    display:flex;align-items:baseline;justify-content:space-between;gap:18px;
    padding:5px 0;border:0;font-size:16px;text-align:right;
  }
  .tbl td::before{
    content:attr(data-label);flex:none;text-align:left;
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);
  }
  .tbl td:last-child{ font-size:18px }
  .acc__item summary{ padding:18px 0 }
}

/* Ролики в блоке «Производство» стоят неподвижно, как у Terminal.
   Увеличение 1.2 и параллакс шаблона нужны картинкам, а у видео
   они срезали бы надписи рентгена у краёв кадра. */
.features__media video.media{ transform:none }

/* Герой как у Terminal: блок на три высоты экрана, ролик растянут на две
   (при экране 900 px это 1800 px, около 18 щелчков колеса). Кадр строго
   следует за прокруткой, мягкость даёт плавный скролл Lenis. */
.hero{ height:300vh; height:300svh }

/* Появление текста по буквам (reveal.js): слово не рвётся посередине строки */
[data-reveal] .rv-w{ display:inline-block; white-space:nowrap }

/* Сайт стал короче: секции плотнее */
.section{ padding-block:clamp(64px,7vw,120px) }

/* ============================================================
   ЧИПЫ И МЕТКИ: моноширинный разреженный капс мелким кеглем
   плохо читался. Берём основной шрифт.
   ============================================================ */
.chip{ font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:-.01em;padding:10px 16px }
.calc .chip{ font-size:14px;padding:8px 13px }
.geo span{ font-family:var(--font);font-size:14px;letter-spacing:0;text-transform:none }

/* ============================================================
   АККОРДЕОН: цены на бетон и испытания лаборатории
   ============================================================ */
.pacc{ border-top:1px solid var(--line) }
.pacc__item{ border-bottom:1px solid var(--line) }
.pacc__head{
  width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) auto auto 44px;align-items:center;gap:24px;
  padding:24px 0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;font:inherit;
}
.pacc__num{ font-size:13px;color:var(--muted) }
.pacc__title{ font-size:clamp(22px,2.1vw,34px);letter-spacing:-.03em;line-height:1.15;transition:color .3s }
.pacc__meta{ font-size:16px;color:var(--muted);white-space:nowrap }
.pacc__from{ font-size:15px;color:var(--muted);white-space:nowrap }
.pacc__from b{ margin-inline:2px;font-weight:400;font-size:clamp(18px,1.5vw,24px);color:var(--ink) }
.pacc__icon{
  position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  transition:background-color .35s,border-color .35s,color .35s;
}
.pacc__icon::before,.pacc__icon::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;border-radius:2px;
  background:currentColor;translate:-50% -50%;transition:rotate .45s var(--ease);
}
.pacc__icon::after{ rotate:90deg }
.pacc__head:hover .pacc__title{ color:var(--lime) }
.pacc__head:hover .pacc__icon{ border-color:currentColor }
.pacc__item.is-open > .pacc__head .pacc__icon{ background:var(--lime);border-color:var(--lime);color:#fff }
.pacc__item.is-open > .pacc__head .pacc__icon::after{ rotate:0deg }
.pacc__body{ display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease) }
.pacc__item.is-open > .pacc__body{ grid-template-rows:1fr }
.pacc__inner{ min-height:0;overflow:hidden }
.pacc__pad{ padding:0 0 30px 80px }
.pacc__item:not(.is-open) .pacc__pad{ visibility:hidden;transition:visibility 0s .55s }

/* плитки марок */
.marks{ display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px }
.mark{
  position:relative;display:grid;gap:3px;padding:16px 16px 14px;overflow:hidden;
  text-align:left;cursor:pointer;font:inherit;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  transition:background-color .3s,border-color .3s,color .3s,transform .4s var(--ease);
}
.mark__name{ font-size:26px;letter-spacing:-.03em;line-height:1.1 }
.mark__spec{ font-size:14px;color:var(--muted);transition:color .3s }
.mark__price{ margin-top:10px;font-size:18px }
.mark__go{ font-size:14px;color:var(--lime-soft);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s }
.mark::after{
  content:"";position:absolute;right:-16px;top:-16px;width:32px;height:32px;rotate:45deg;
  background:var(--lime);opacity:0;transition:opacity .3s;
}
.mark:hover{ background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-3px) }
.mark:hover .mark__spec{ color:#9fb0aa }
.mark:hover .mark__go,.mark:hover::after{ opacity:1;transform:none }
.mark:focus-visible{ outline:2px solid var(--lime);outline-offset:2px }
@media (hover:none){
  .mark__go{ opacity:1;transform:none;color:var(--lime) }
}

/* компактный вариант на тёмном фоне (лаборатория) */
.pacc--sm .pacc__head{ grid-template-columns:minmax(0,1fr) auto 38px;gap:18px;padding:18px 0 }
.pacc--sm .pacc__title{ font-size:clamp(18px,1.5vw,24px) }
.pacc--sm .pacc__icon{ width:38px;height:38px }
.pacc--sm .pacc__pad{ padding:0 0 20px }
.section--dark .pacc,.section--dark .pacc__item,.section--dark .pacc__icon{ border-color:var(--line-dark) }
.section--dark .pacc__from{ color:#9aa5a1 }
.section--dark .pacc__from b{ color:#fff }
.section--dark .pacc__head:hover .pacc__title{ color:var(--lime-soft) }

@media (max-width:760px){
  .pacc__head{ grid-template-columns:minmax(0,1fr) 40px;gap:4px 14px;padding:18px 0 }
  .pacc__num,.pacc__meta{ display:none }
  .pacc__title{ grid-column:1;font-size:21px }
  .pacc__from{ grid-column:1;grid-row:2 }
  .pacc__icon{ grid-column:2;grid-row:1 / span 2;width:40px;height:40px }
  .pacc--sm .pacc__head{ grid-template-columns:minmax(0,1fr) 38px }
  .pacc__pad{ padding:0 0 22px }
  .marks{ grid-template-columns:repeat(2,minmax(0,1fr));gap:8px }
  .mark{ padding:12px 12px 10px }
  .mark__name{ font-size:22px }
  .mark__price{ margin-top:6px;font-size:16px }
}

/* ============================================================
   НАШИ УСЛУГИ
   ============================================================ */
.svc__tabs{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px }
.svc__card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:270px;padding:24px;
  text-align:left;cursor:pointer;font:inherit;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  transition:background-color .45s var(--ease),border-color .45s,color .45s,transform .5s var(--ease);
}
.svc__icon{ display:block;width:76px;height:76px;flex:none;color:var(--ink);transition:color .45s }
.svc__num{ position:absolute;right:22px;top:22px;font-size:12px;color:var(--muted) }
.svc__title{ margin-top:26px;font-size:clamp(21px,1.7vw,27px);letter-spacing:-.03em;line-height:1.15 }
.svc__text{ margin-top:6px;font-size:15px;line-height:1.4;color:var(--muted);transition:color .45s }
.svc__price{ margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:15px;color:var(--lime);transition:color .45s }
.svc__card:hover{ border-color:var(--ink);transform:translateY(-3px) }
.svc__card.is-active{ background:var(--ink);border-color:var(--ink);color:#fff;transform:none }
.svc__card.is-active .svc__icon{ color:#fff }
.svc__card.is-active .svc__text{ color:#9fb0aa }
.svc__card.is-active .svc__price{ color:var(--lime-soft) }
.svc__card.is-active::after{
  content:"";position:absolute;left:34px;bottom:-8px;width:16px;height:16px;border-radius:3px;
  rotate:45deg;background:var(--ink);
}
.svc__card:focus-visible{ outline:2px solid var(--lime);outline-offset:3px }

.svc__panel{ margin-top:14px;padding:clamp(22px,3vw,44px);border-radius:16px;background:var(--paper-2) }
.svc__panel.is-swap{ animation:svcIn .5s var(--ease) }
@keyframes svcIn{ from{ opacity:0;transform:translateY(10px) } }
.svc__cols{ display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px) }
.svc__h{ margin:0 0 16px;font-size:clamp(19px,1.5vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.2 }
.svc__panel .bullets{ gap:10px }
.svc__panel .bullets li{ font-size:16px;line-height:1.45 }
.svc__panel .geo{ margin-top:16px }
.svc__panel .geo span{ background:#fff }
.svc__actions{ display:flex;flex-wrap:wrap;gap:8px;margin-top:22px }
.tiles{ display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px }
.tile{ display:grid;gap:2px;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid var(--line) }
.tile span{ font-size:14px;line-height:1.3;color:var(--muted) }
.tile b{ font-family:var(--mono);font-weight:400;font-size:17px }

@media (max-width:1100px){
  .svc__tabs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .svc__card{ min-height:220px }
  .svc__card.is-active::after{ display:none }
}
@media (max-width:760px){
  .svc__tabs{ gap:8px }
  .svc__cols{ grid-template-columns:minmax(0,1fr) }
  .svc__card{ min-height:0;padding:14px;border-radius:14px }
  .svc__icon{ width:50px;height:50px }
  .svc__num{ top:14px;right:14px }
  .svc__title{ margin-top:12px;font-size:18px }
  .svc__text{ font-size:13px }
  .svc__price{ padding-top:8px;font-size:13px }
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* ---------- анимированные иконки (icons.js) ---------- */
.ic{ width:100%;height:100%;overflow:visible }
.ic path,.ic circle{ fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round }
.ic .ic-liquid{ fill:var(--lime);stroke:none }
.ic .ic-wheel,.ic .ic-joint{ fill:var(--paper-2) }
.svc__card.is-active .ic .ic-wheel,.svc__card.is-active .ic .ic-joint{ fill:var(--ink) }
.ic .ic-drop,.ic .ic-bub{ fill:var(--lime);stroke:none }
.svc__card.is-active .ic .ic-liquid,.svc__card.is-active .ic .ic-drop,.svc__card.is-active .ic .ic-bub{ fill:var(--lime-soft) }
.ic-line{ stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) }
.is-live .ic-line{ stroke-dashoffset:0 }
.ic-a{ animation-play-state:paused !important }
.is-live .ic-a{ animation-play-state:running !important }

.ic .ic-liquid{ transform:translate(0,40px);animation:icWave 2.4s linear infinite }
.calc__card.is-picked{ animation:calcPick 1.2s var(--ease) }
@keyframes calcPick{ 25%{ filter:brightness(1.45) saturate(1.2) } }   /* тень срезал бы фигурный вырез карточки */
.ic-rise{ animation:icRise 5s ease-in-out infinite }
.ic-rise--low{ animation-name:icRiseLow }
.ic-spin{ animation:icDash .9s linear infinite }
.ic-road{ animation:icDash .6s linear infinite }
.ic-hub{ transform-box:fill-box;transform-origin:center;animation:icTurn 1s linear infinite }
.ic-boom{ transform-box:view-box;transform-origin:21.5px 40px;animation:icBoom 4.5s ease-in-out infinite }
.ic-drop{ animation:icDrop 1.5s ease-in infinite }
.ic-bub{ animation:icBub 2.2s ease-in infinite }
.ic-bub--2{ animation-delay:.7s }
.ic-bub--3{ animation-delay:1.4s }
@keyframes icWave{ to{ transform:translate(32px,40px) } }
@keyframes icRise{ 0%,100%{ transform:translateY(12px) } 50%{ transform:translateY(-4px) } }
@keyframes icRiseLow{ 0%,100%{ transform:translateY(14px) } 50%{ transform:translateY(6px) } }
@keyframes icDash{ to{ stroke-dashoffset:-14 } }
@keyframes icTurn{ to{ transform:rotate(360deg) } }
@keyframes icBoom{ 0%,100%{ transform:rotate(5deg) } 50%{ transform:rotate(-9deg) } }
@keyframes icDrop{ 0%{ transform:translateY(0);opacity:0 } 25%{ opacity:1 } 100%{ transform:translateY(16px);opacity:0 } }
@keyframes icBub{ 0%{ transform:translateY(0);opacity:0 } 25%{ opacity:1 } 100%{ transform:translateY(-24px);opacity:0 } }

/* ============================================================
   ЛАБОРАТОРИЯ: тёмный блок, светящаяся сетка и скан-полоса.
   Сгенерированный фон подключается одной строкой:
   .lab{ --lab-img:url(../img/lab.webp) }
   ============================================================ */
.lab{ position:relative;overflow:hidden;isolation:isolate }
.lab__bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 85% 8%, rgba(0,175,80,.30), transparent 70%),
    radial-gradient(45% 40% at 4% 96%, rgba(110,228,79,.14), transparent 70%),
    linear-gradient(180deg, rgba(4,13,12,.55), rgba(4,13,12,.9)),
    var(--lab-img, none) center / cover no-repeat,
    linear-gradient(160deg, #0a2522, #040d0c 70%);
}
.lab__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(110,228,79,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,228,79,.08) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(75% 70% at 65% 25%, #000, transparent 80%);
  mask-image:radial-gradient(75% 70% at 65% 25%, #000, transparent 80%);
}
.lab__scan{
  position:absolute;left:0;right:0;top:0;height:28%;
  background:linear-gradient(180deg, transparent, rgba(110,228,79,.03) 75%, rgba(110,228,79,.10));
  border-bottom:1px solid rgba(110,228,79,.28);
  transform:translateY(-100%);
  animation:labScan 8s linear infinite;animation-play-state:paused;
}
.lab.is-live .lab__scan{ animation-play-state:running }
@keyframes labScan{ to{ transform:translateY(460%) } }
.lab__inner{ position:relative }
.lab .eyebrow{ margin-bottom:14px;color:var(--lime-soft) }
.lab__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-bottom:clamp(36px,4vw,64px);
  overflow:hidden;border:1px solid var(--line-dark);border-radius:16px;background:var(--line-dark);
}
.lab__stat{ padding:22px 24px;background:rgba(4,13,12,.78) }
.lab__stat b{ display:block;font-family:var(--mono);font-weight:400;font-size:clamp(17px,1.5vw,24px);line-height:1.25;color:#fff }
.lab__stat span{ display:block;margin-top:8px;font-size:14px;line-height:1.4;color:#9aa5a1 }
.lab .sub-title{ color:#fff }
.lab .bullets li{ color:#d6ded9 }
.lab .tbl td{ color:#e5ece8 }
@media (max-width:900px){
  .lab__stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lab__stat{ padding:16px }
}

/* ============================================================
   НАМ ДОВЕРЯЮТ: логотипы в одинаковых плитках, посёлки кругами
   ============================================================ */
.logos{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px }
.logo-tile{
  display:grid;place-items:center;height:128px;margin:0;padding:24px 28px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  transition:border-color .3s,transform .4s var(--ease);
}
.logo-tile img{ width:100%;height:100%;object-fit:contain }
.logo-tile:hover{ border-color:var(--ink);transform:translateY(-3px) }
.partners__sub{ margin-top:clamp(36px,4vw,56px) }
.estates{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px }
.estate{
  display:grid;justify-items:center;gap:14px;margin:0;padding:22px 12px 18px;text-align:center;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
}
.estate img{
  width:min(116px,100%);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line);transition:box-shadow .35s;
}
.estate:hover img{ box-shadow:0 0 0 3px #fff,0 0 0 5px var(--lime) }
.estate figcaption{ font-size:16px;line-height:1.25;letter-spacing:-.01em }
@media (max-width:1100px){
  .logos,.estates{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* слои карты со своим z-index не вылезают поверх липкой шапки */
.map{ isolation:isolate }

/* Шапки таблиц: тот же мелкий моноширинный капс, что у чипов, плохо читался */
.tbl th,.tbl th:last-child{ font-family:var(--font);font-size:13px;letter-spacing:0;text-transform:none }
@media (max-width:760px){
  .tbl td::before{ font-family:var(--font);font-size:13px;letter-spacing:0;text-transform:none }
}
@media (max-width:560px){
  .logos,.estates{ grid-template-columns:repeat(2,minmax(0,1fr));gap:8px }
  .logo-tile{ height:92px;padding:16px 18px }
  .estate{ padding:16px 8px 14px }
  .estate figcaption{ font-size:14px }
}

/* ============================================================
   ТЕЛЕФОНЫ: убираем то, что дорого перерисовывать при прокрутке
   ============================================================ */
@media (max-width:900px), (hover:none){
  /* размытие под шапкой пересчитывается на каждом кадре поверх ролика */
  .header.is-scrolled .header__bar{ background:rgba(34,40,38,.94);-webkit-backdrop-filter:none;backdrop-filter:none }
  .band__media img{ transform:none;will-change:auto }
  .calc__glow{ filter:none }
  .media{ will-change:auto }
  .lab__scan{ display:none }
  /* hero: размытая тень у букв перерисовывается при каждом шаге печати,
     сетка с маской накрывает весь кадр. Под затемнением текст читается и так */
  .hero__titles .hero__title{ text-shadow:none }
  .hero__grid{ display:none }
}

/* ============================================================
   ПОМОЩНИК (bot.js)
   ============================================================ */
.bot-fab{
  position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:120;
  display:flex;align-items:center;gap:10px;padding:14px 20px 14px 16px;border:0;border-radius:999px;cursor:pointer;
  background:var(--ink);color:#fff;font:inherit;font-size:15px;font-weight:500;
  box-shadow:0 10px 30px rgba(6,36,36,.28);transition:transform .4s var(--ease),background-color .3s;
}
.bot-fab svg{ width:20px;height:20px;fill:none;stroke:var(--lime-soft);stroke-width:1.8;stroke-linejoin:round }
.bot-fab:hover{ transform:translateY(-2px);background:#0b3a36 }
.bot-fab.is-open{ opacity:0;pointer-events:none }

.bot{
  position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:121;
  display:flex;flex-direction:column;width:min(380px,calc(100vw - 32px));height:min(600px,calc(100svh - 120px));
  overflow:hidden;border-radius:18px;background:#fff;color:var(--ink);
  box-shadow:0 24px 60px rgba(6,36,36,.28),0 0 0 1px var(--line);
  animation:botIn .35s var(--ease);
}
.bot[hidden]{ display:none }   /* display:flex перебивал атрибут hidden */
@keyframes botIn{ from{ opacity:0;transform:translateY(16px) scale(.98) } }
.bot__head{ display:flex;align-items:center;gap:12px;padding:16px 16px 14px 18px;background:var(--ink);color:#fff }
.bot__head div{ display:grid;flex:1;min-width:0 }
.bot__head b{ font-weight:500;font-size:16px }
.bot__head span{ font-size:13px;color:#9fb0aa }
.bot__dot{ width:10px;height:10px;flex:none;border-radius:50%;background:var(--lime-soft);box-shadow:0 0 0 4px rgba(110,228,79,.18) }
.bot__close{ width:34px;height:34px;border:0;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1 }
.bot__log{ flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--paper-2);overscroll-behavior:contain }
.bot__msg{ max-width:88%;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.45;overflow-wrap:anywhere }
.bot__msg--bot{ align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px }
.bot__msg--me{ align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px }
.bot__msg ul{ margin:6px 0;padding-left:18px }
.bot__msg li{ margin:2px 0 }
.bot__msg b{ font-weight:600 }
.bot__msg a:not(.bot__go){ color:var(--lime);text-decoration:underline }
.bot__msg hr{ margin:10px 0;border:0;border-top:1px solid var(--line) }
.bot__go{
  display:inline-block;margin-top:8px;padding:7px 12px;border:0;border-radius:8px;cursor:pointer;
  background:var(--lime);color:#fff;font:inherit;font-size:13px;font-weight:500;text-decoration:none;
}
.bot__typing{ display:flex;gap:4px;padding:13px 14px }
.bot__typing i{ width:6px;height:6px;border-radius:50%;background:var(--muted);animation:botDot 1s infinite }
.bot__typing i:nth-child(2){ animation-delay:.15s }
.bot__typing i:nth-child(3){ animation-delay:.3s }
@keyframes botDot{ 50%{ opacity:.25;transform:translateY(-2px) } }
.bot__quick{ display:flex;gap:6px;overflow-x:auto;padding:10px 12px;border-top:1px solid var(--line);scrollbar-width:none }
.bot__quick::-webkit-scrollbar{ display:none }
.bot__quick button{
  flex:none;padding:7px 11px;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  background:#fff;color:var(--ink);font:inherit;font-size:13px;white-space:nowrap;
}
.bot__quick button:hover{ border-color:var(--ink) }
.bot__form{ display:flex;gap:8px;padding:0 12px 12px }
.bot__form input{ flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;color:var(--ink) }
.bot__form input:focus{ outline:none;border-color:var(--ink) }
.bot__form button{ width:44px;flex:none;border:0;border-radius:10px;cursor:pointer;background:var(--lime) }
.bot__form button svg{ width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round }
@media (max-width:760px){
  .bot-fab span{ display:none }
  .bot-fab{ padding:15px }
  .bot{ right:8px;left:8px;bottom:8px;width:auto;height:min(78svh,620px) }
}
@media (prefers-reduced-motion:reduce){
  .bot{ animation:none }
}

/* ============================================================
   HERO НА ДЕСКТОПЕ: ролик 2,16:1. Растянутый на экран 16:10 он терял
   четверть ширины, и у машины срезало кабину и лоток. Кадр встаёт
   широкой полосой не уже 1,9:1 (по бокам теряется не больше 12%),
   сверху и снизу тёмные поля с мягким переходом.
   ============================================================ */
@media (min-width:768px){
  .hero__sticky{
    --shot-h:min(100svh, 52.6vw);
    --shot-top:calc((100svh - var(--shot-h)) / 2);
  }
  .hero__canvas,
  .hero__poster,
  .hero__hud{ top:var(--shot-top);bottom:auto;height:var(--shot-h) }
  .hero__shade{
    background:
      linear-gradient(180deg, var(--dark) var(--shot-top), rgba(5,8,7,.7) var(--shot-top), rgba(5,8,7,0) calc(var(--shot-top) + 28%)),
      linear-gradient(0deg, var(--dark) var(--shot-top), rgba(5,8,7,.8) var(--shot-top), rgba(5,8,7,0) calc(var(--shot-top) + 42%));
  }
}

/* ============================================================
   HERO НА ТЕЛЕФОНЕ: кадр 16:10 целиком, текст под ним.
   Раньше кадр растягивался на весь высокий экран, и от него
   оставалась середина: миксер и каркас срезало по бокам,
   а подписи HUD налезали на заголовок.
   ============================================================ */
@media (max-width:767px){
  .hero__sticky{
    /* ролик широкий (2,16:1): кадр 1,8:1 во всю ширину, в верхней трети экрана */
    --shot-h:55.6vw;
    --shot-top:max(96px, calc(30svh - 27.8vw));
  }
  .hero__canvas,
  .hero__poster,
  .hero__hud{ top:var(--shot-top);bottom:auto;height:var(--shot-h) }
  .hero__shade{
    background:
      linear-gradient(180deg, var(--dark) var(--shot-top), rgba(5,8,7,0) calc(var(--shot-top) + 70px)),
      linear-gradient(0deg, var(--dark) calc(100% - var(--shot-top) - var(--shot-h)), rgba(5,8,7,0) calc(100% - var(--shot-top) - var(--shot-h) + 110px));
  }
  .hero__content{ top:calc(var(--shot-top) + var(--shot-h) - 36px);bottom:auto;gap:12px }
  .hero__title{ font-size:clamp(34px,10.4vw,46px) }
  .hero__loader{ top:calc(var(--shot-top) + 16px) }
  .hud-frame{ left:6%;right:6%;top:26%;bottom:26% }
  .hud-t4{ top:12% }
  .hud-t5{ top:5% }
  .hud-t1,.hud-t2{ top:auto;bottom:14% }
  .hud-t2{ bottom:9% }

  /* полоса «Результат»: картинка 4:5 сверху, текст под ней на тёмном */
  .band{ height:auto;background:var(--dark) }
  .band__media{ position:relative;inset:auto;height:125vw }
  .band__media picture{ height:100% }
  .band__media::after{ background:linear-gradient(0deg, var(--dark) 0, rgba(5,8,7,0) 45%) }
  .band__content{ height:auto;margin-top:-90px;padding-block:0 64px }

  /* блок «Производство»: ролик закреплён сверху, поэтому текст пункта
     прижимаем к низу его блока, иначе в момент показа он уезжал под ролик */
  .features__media{ top:64px;height:min(44svh, calc(100vw - 32px)) }
  .feature{ min-height:78svh;align-content:end;padding-bottom:6svh }
  .feature__title{ font-size:28px }
  .feature__text{ margin-top:12px;font-size:24px;max-width:none }
}
.band__media picture{ display:block;height:100% }

/* ============================================================
   ГАЛЕРЕЯ ЗАВОДА
   Колонки, а не грид: фотографии разного формата (панорамы 2:1
   и вертикальный кадр) ложатся без пустот и без обрезки.
   ============================================================ */
.gal{ columns:3;column-gap:14px }
.gal__item{
  display:block;width:100%;margin:0 0 14px;padding:0;border:0;cursor:pointer;
  position:relative;overflow:hidden;border-radius:14px;background:var(--paper-2);
  break-inside:avoid;
}
.gal__item img{ display:block;width:100%;height:auto;transition:transform .6s var(--ease) }
.gal__item:hover img{ transform:scale(1.03) }
.gal__cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  font-size:14px;line-height:1.35;text-align:left;color:#fff;
  background:linear-gradient(0deg, rgba(4,13,12,.82), rgba(4,13,12,0));
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;
}
.gal__item:hover .gal__cap,.gal__item:focus-visible .gal__cap{ opacity:1;transform:none }
.gal__item:focus-visible{ outline:2px solid var(--lime);outline-offset:3px }
@media (hover:none){
  .gal__cap{ opacity:1;transform:none;font-size:13px;padding:26px 12px 10px }
}
.gal__item.is-hidden{ display:none }
.gal__more{
  display:block;margin:22px auto 0;padding:14px 28px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:500;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:999px;
  transition:border-color .25s,background-color .25s,color .25s;
}
.gal__more:hover{ border-color:var(--ink);background:var(--ink);color:#fff }
@media (max-width:900px){ .gal{ columns:2;column-gap:10px } .gal__item{ margin-bottom:10px } }
@media (max-width:560px){ .gal{ columns:1 } }

/* просмотр фотографии */
.lb{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,48px);background:rgba(4,13,12,.94);
  animation:lbIn .25s var(--ease);
}
.lb[hidden]{ display:none }
@keyframes lbIn{ from{ opacity:0 } }
.lb__fig{ margin:0;display:grid;gap:14px;max-width:min(1400px,100%);max-height:100% }
.lb__fig img{
  max-width:100%;max-height:calc(100svh - 150px);width:auto;height:auto;margin-inline:auto;
  border-radius:12px;object-fit:contain;
}
.lb__fig figcaption{ text-align:center;font-size:15px;color:#9fb0aa }
.lb__btn{
  position:absolute;display:grid;place-items:center;width:52px;height:52px;cursor:pointer;
  border:1px solid var(--line-dark);border-radius:50%;background:rgba(255,255,255,.06);
  color:#fff;font-size:30px;line-height:1;transition:background-color .25s,border-color .25s;
}
.lb__btn:hover{ background:rgba(255,255,255,.14);border-color:#fff }
.lb__close{ top:clamp(12px,2vw,28px);right:clamp(12px,2vw,28px);font-size:26px }
.lb__prev{ left:clamp(8px,2vw,28px);top:50%;translate:0 -50% }
.lb__next{ right:clamp(8px,2vw,28px);top:50%;translate:0 -50% }
@media (max-width:560px){
  .lb__btn{ width:44px;height:44px }
  .lb__prev{ left:6px } .lb__next{ right:6px }
}

/* правило минимального объёма рядом с полями калькулятора */
.calc__rule{ margin-top:12px;font-size:13px;line-height:1.4;color:var(--muted) }
/* строка доставки, когда объём меньше минимального */
.calc__rows li.is-warn em{ color:#f4f7f5;font-weight:500 }

/* ссылка на блог в подвале */
.footer__inner a{ text-decoration:underline;text-underline-offset:3px }
.footer__inner a:hover{ color:var(--ink) }

/* дополнительные телефоны под основным */
.cta__phones{ display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:2px }
.cta__phones a{ font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em;color:var(--muted) }
.cta__phones a:hover{ color:var(--lime) }

/* ============================================================
   РЕЗУЛЬТАТ: заголовок над изображением (band--stacked).
   Картинка детальная и светлая, текст поверх неё не читался,
   поэтому заголовок стоит сверху, а фото во всю ширину под ним.
   ============================================================ */
.band--stacked{
  position:static;height:auto;color:var(--ink);background:var(--paper);
  padding-block:clamp(56px,7vw,110px) 0;
}
.band--stacked .band__content{
  position:static;height:auto;display:block;padding:0;margin:0 0 clamp(32px,4vw,56px);
}
.band--stacked .band__title{ margin-top:16px;max-width:20ch }
.band--stacked .band__media{
  position:relative;inset:auto;height:auto;overflow:hidden;background:var(--paper-2);
}
.band--stacked .band__media picture{ display:block;height:auto }
.band--stacked .band__media img{
  position:static;width:100%;height:auto;aspect-ratio:1670/941;object-fit:cover;
  transform:none;will-change:auto;
}
.band--stacked .band__media::after{ content:none }

/* ============================================================
   СЕРТИФИКАТЫ: сетка превью документов
   ============================================================ */
.certs{ display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px }
.cert{
  display:grid;gap:4px;align-content:start;padding:16px;border-radius:14px;
  background:var(--paper-2);border:1px solid var(--line);color:var(--ink);
  transition:border-color .3s,transform .4s var(--ease),background-color .3s;
}
.cert:hover{ border-color:var(--ink);transform:translateY(-3px);background:#fff }
.cert__img{
  display:block;aspect-ratio:1/1.32;overflow:hidden;border-radius:8px;margin-bottom:10px;
  background:#fff;border:1px solid var(--line);
}
.cert__img img{ width:100%;height:100%;object-fit:contain;object-position:top }
.cert__title{ font-size:16px;letter-spacing:-.01em;line-height:1.25 }
.cert__sub{ font-size:13px;line-height:1.35;color:var(--muted) }
.cert::after{ content:"PDF";justify-self:start;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--lime) }
@media (max-width:560px){ .certs{ grid-template-columns:repeat(2,minmax(0,1fr));gap:10px } .cert{ padding:12px } }

/* PDF отдаём для просмотра, но их долгий кэш ни к чему на статике */

/* Первый кадр героя картинкой из разметки: виден, пока плеер не нарисовал свой.
   Стоит под холстом, поэтому заголовки и затемнение остаются поверх. */
.hero__poster{ position:absolute;inset:0;width:100%;height:100%;pointer-events:none }
.hero__poster img{ display:block;width:100%;height:100%;object-fit:cover }

/* Предупреждения калькулятора: оранжевый моноширинный шрифт с разрядкой
   на тёмно-зелёном читался плохо. Теперь светлый обычный текст в плашке,
   тёплый цвет остался только у полосы слева. */
.calc__note{
  margin-top:14px;padding:10px 14px 10px 12px;border-left:3px solid #ffb27a;border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.07);color:#f4f7f5;
  font-family:var(--font);font-size:14px;line-height:1.45;letter-spacing:0;
}
.calc__rows li.is-warn em::before{ content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#ffb27a;vertical-align:1px }

/* ============================================================
   ГАЛЕРЕЯ СЕТКОЙ. Колонки давали пустоты: фото разной высоты
   заканчивались на разном уровне. Теперь ячейки 4:3 и полные ряды:
   вертикальный кадр на две строки, одна панорама на две колонки.
   ============================================================ */
.gal{ columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:14px }
.gal__item{ margin:0;aspect-ratio:4/3;height:auto }
.gal__item img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.gal__item--tall{ grid-row:span 2;aspect-ratio:auto }
.gal__item--wide{ grid-column:span 2;aspect-ratio:auto }
@media (max-width:900px){
  .gal{ grid-template-columns:repeat(2,minmax(0,1fr));gap:10px }
  .gal__item{ margin:0 }
  /* в две колонки широкая панорама давала бы дыру, а когда открыты все 16,
     последнее фото растягиваем на весь ряд, чтобы он был полным */
  .gal__item--wide{ grid-column:auto;aspect-ratio:4/3 }
  .gal.is-all .gal__item:last-child{ grid-column:span 2;aspect-ratio:8/3 }
}
@media (max-width:560px){ .gal{ columns:auto } }

/* ============================================================
   СЕРТИФИКАТЫ АККОРДЕОНОМ: группа документов, в шапке веер превью
   ============================================================ */
.cgroup .pacc__head{ grid-template-columns:118px minmax(0,1fr) 44px;gap:22px;padding:20px 0 }
.cgroup__text{ display:grid;gap:4px }
.cgroup__meta{ font-size:15px;color:var(--muted) }
.cgroup .pacc__pad{ padding:4px 0 30px }
.cstack{ position:relative;display:block;width:118px;height:78px }
.cstack img{
  position:absolute;top:4px;left:36px;width:50px;height:68px;object-fit:cover;object-position:top;
  border-radius:4px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px rgba(6,36,36,.12);
  transition:transform .45s var(--ease);
}
.cstack img:nth-child(1){ transform:rotate(-9deg) translateX(-18px);z-index:1 }
.cstack img:nth-child(2){ transform:rotate(0deg);z-index:3 }
.cstack img:nth-child(3){ transform:rotate(9deg) translateX(18px);z-index:2 }
.cgroup .pacc__head:hover .cstack img:nth-child(1){ transform:rotate(-14deg) translateX(-30px) translateY(-2px) }
.cgroup .pacc__head:hover .cstack img:nth-child(2){ transform:translateY(-6px) }
.cgroup .pacc__head:hover .cstack img:nth-child(3){ transform:rotate(14deg) translateX(30px) translateY(-2px) }
.cgroup.is-open .cstack img{ opacity:.55 }
@media (max-width:760px){
  .cgroup .pacc__head{ grid-template-columns:84px minmax(0,1fr) 40px;gap:12px;padding:16px 0 }
  .cstack{ width:84px;height:64px;transform:scale(.8);transform-origin:left center }
  .cgroup .pacc__title,.cgroup__text{ grid-column:auto;grid-row:auto }
  .cgroup .pacc__icon{ grid-column:3;grid-row:1 }
  .cgroup__meta{ font-size:13px }
}

/* форма «позвать менеджера» в помощнике */
.bot__lead{ display:grid;gap:8px;margin-top:10px }
.bot__lead input{ width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;color:var(--ink);background:#fff }
.bot__lead input:focus{ outline:none;border-color:var(--ink) }
.bot__lead .bot__go{ justify-self:start;margin-top:2px }
.bot__lead-msg{ font-size:13px;color:#b5482b }
.bot__trap{ position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0 }
.bot__done{ margin:6px 0 0;font-weight:500;color:#0a7a3b }

/* ---------- шапка: семь пунктов меню и три кнопки ----------
   В плашку шаблона шириной 1240 это не помещалось и уезжало за
   правый край. Плашка шире, серая «Позвонить» дублирует иконку
   телефона и прячется первой, дальше меню уходит в бургер. */
.header__bar{ position:relative;max-width:1480px;gap:clamp(16px,1.6vw,28px) }
.header.is-scrolled .header__bar{ max-width:1500px }
.nav{ gap:clamp(14px,1.3vw,26px);font-size:16px }
.nav a{ font-size:inherit }
.header__actions{ flex:none }
@media (max-width:1560px){ .header__actions .tag-btn--gray{ display:none } }
@media (max-width:1440px){
  .logo__svg{ height:48px }
  .header__actions .tag-btn{ min-width:0;padding-inline:14px }
}
@media (max-width:1200px){
  .nav{ display:none }
  .burger{ display:grid;gap:6px;margin-left:0;padding:8px;background:none;border:0;cursor:pointer }
  .burger span{ width:26px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s }
  .header.is-menu .nav{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:calc(100% + 8px);right:0;min-width:260px;
    padding:8px;border-radius:14px;background:rgba(34,40,38,.96);
    box-shadow:0 18px 40px rgba(0,0,0,.28);
  }
  .header.is-menu .nav a{ padding:12px 14px;border-radius:9px;font-size:17px }
  .header.is-menu .nav a:hover{ background:rgba(255,255,255,.08) }
  .header.is-menu .burger span:first-child{ transform:translateY(4px) rotate(45deg) }
  .header.is-menu .burger span:last-child{ transform:translateY(-4px) rotate(-45deg) }
}
@media (max-width:900px){
  .burger{ margin-left:auto }
  .header.is-menu .nav{ left:0;right:0;min-width:0 }
}

/* ---------- калькулятор: оформить заказ ---------- */
.calc__order{ width:100%;margin-top:18px;min-height:56px;font-size:13px }

/* ---------- окно оформления заказа ---------- */
.omodal{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:16px;background:rgba(5,8,7,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:omFade .25s ease;
}
.omodal[hidden]{ display:none }
@keyframes omFade{ from{ opacity:0 } }
@keyframes omRise{ from{ opacity:0;transform:translateY(16px) } }
.omodal__card{
  position:relative;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  padding:30px clamp(20px,3vw,34px) 26px;border-radius:18px;background:#fff;color:var(--ink);
  box-shadow:0 30px 80px rgba(0,0,0,.35);animation:omRise .35s var(--ease);
}
.omodal__close{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;transition:border-color .2s;
}
.omodal__close:hover{ border-color:var(--ink) }
.omodal__eyebrow{ margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime) }
.omodal__title{ margin:0 0 18px;font-size:clamp(24px,2.4vw,30px);font-weight:500;letter-spacing:-.02em }
.omodal__sum{ margin:0 0 22px;padding:6px 16px;border-radius:12px;background:var(--paper-2) }
.omodal__sum > div{ display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line) }
.omodal__sum > div:first-child{ border-top:0 }
.omodal__sum dt{ font-size:13px;color:var(--muted) }
.omodal__sum dd{ margin:0;display:flex;justify-content:space-between;gap:12px;font-size:15px;line-height:1.35 }
.omodal__sum dd b{ flex:none;font-weight:400;font-size:14px }
.omodal__total{ border-top:1px solid var(--ink)!important }
.omodal__total dt{ color:var(--ink);font-weight:500 }
.omodal__total dd{ justify-content:flex-end }
.omodal__total dd b{ font-size:19px;color:var(--lime) }
.omodal__done{ margin:6px 0;font-size:16px;line-height:1.5 }
.omodal__form{ display:grid;gap:12px }
.omodal__row{ display:grid;grid-template-columns:1fr 1fr;gap:12px }
.omodal__f{ display:grid;gap:6px }
.omodal__f span{ font-size:13px;color:var(--muted) }
.omodal__f input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:16px;color:var(--ink);background:#fff;transition:border-color .2s;
}
.omodal__f input:focus{ outline:none;border-color:var(--ink) }
.omodal__f input::placeholder{ color:#b3bab7 }
.omodal__consent{ margin-top:4px;font-size:14px;line-height:1.45;align-items:flex-start }
.omodal__consent input{ margin-top:2px;flex:none }
.omodal__consent a{ text-decoration:underline }
.omodal__send{ margin-top:6px;width:100%;min-height:56px;font-size:13px;transition:transform .4s var(--ease),background-color .3s,opacity .3s }
.omodal__msg{ margin:0;min-height:1.2em;font-size:13px;color:var(--muted) }
.omodal__msg.is-err{ color:#b5482b }
@media (max-width:560px){
  .omodal{ place-items:end center;padding:0 }
  .omodal__card{ width:100%;max-height:92dvh;border-radius:18px 18px 0 0 }
  .omodal__row{ grid-template-columns:1fr }
  .omodal__sum > div{ grid-template-columns:1fr;gap:2px }
}
button.tag-btn{ border:0;cursor:pointer }

/* ---------- ошибки в формах (js/forms.js) ----------
   Подпись выезжает под полем плавно, рамка краснеет, поле
   коротко вздрагивает. Всё снимается, как только поле правят. */
:root{ --err:#d1452b }
.ferr{ display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease) }
.ferr > span{
  min-height:0;overflow:hidden;font-size:13px;line-height:1.35;letter-spacing:0;text-transform:none;
  font-family:var(--font);color:var(--err);opacity:0;transform:translateY(-4px);
  transition:opacity .3s ease,transform .35s var(--ease);
}
.ferr.is-on{ grid-template-rows:1fr }
.ferr.is-on > span{ opacity:1;transform:none }
.field .ferr.is-on > span{ padding-top:2px }

.has-err, .has-err input{ transition:border-color .3s,background-color .3s,box-shadow .3s }
.field.has-err{ border-color:var(--err);box-shadow:0 1px 0 var(--err) }
.field.has-err > span:first-child{ color:var(--err) }
.omodal__f.has-err input,
.bot__lead input.has-err{ border-color:var(--err);background:#fff6f4;box-shadow:0 0 0 3px rgba(209,69,43,.12) }
.omodal__f.has-err > span:first-child{ color:var(--err) }
.check.has-err{ flex-wrap:wrap;color:var(--err) }
.check.has-err input{ outline:2px solid var(--err);outline-offset:2px;border-radius:3px }
.check .ferr{ flex-basis:100%;padding-left:31px }
.omodal__consent .ferr{ padding-left:31px }

.is-shake{ animation:fShake .42s cubic-bezier(.36,.07,.19,.97) both }
@keyframes fShake{
  15%{ transform:translateX(-6px) } 35%{ transform:translateX(5px) }
  55%{ transform:translateX(-3px) } 75%{ transform:translateX(2px) } 100%{ transform:none }
}
@media (prefers-reduced-motion:reduce){
  .is-shake{ animation:none }
  .ferr,.ferr > span{ transition:none }
}

/* кнопка отправки в окне заказа: серая, пока не заполнено, но нажимается и показывает, чего не хватает */
.omodal__send:not(.is-ready){ background:#d7dcda;color:#7f8986 }
.omodal__send:disabled{ opacity:.7;cursor:progress;transform:none }

/* ---------- плавность на телефоне ----------
   Текст hero и полоса прогресса меняются на каждом шаге прокрутки.
   В своих слоях они перерисовываются сами по себе, а не вместе
   со всей страницей высотой 14 000 px. */
.hero__sticky,
.hero__content,
.hero__progress{ will-change:transform }
/* без Lenis якоря едут средствами браузера, шапка не закрывает начало блока */
html.no-lenis{ scroll-behavior:smooth }
section[id]{ scroll-margin-top:84px }
/* облегчённое появление текста (reveal.js на телефоне) */
.rv-fade{ opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .8s var(--ease) }
.rv-fade.rv-in{ opacity:1;transform:none }

/* ---------- HERO НА ТЕЛЕФОНЕ: кадр и заголовок по центру экрана ----------
   Кадр стоял в верхней трети, под заголовком оставалось полэкрана
   чёрного. Теперь кадр и заголовок одной группой по вертикали
   посередине, текст выровнен по центру. */
@media (max-width:767px){
  .hero__sticky{
    --title-h:calc(2 * clamp(34px,10vw,46px) + 8px);
    --shot-top:max(96px, calc((100svh - var(--shot-h) - var(--title-h) + 20px) / 2));
  }
  .hero__content{ top:calc(var(--shot-top) + var(--shot-h) - 20px);text-align:center;justify-items:center }
  .hero__content .eyebrow{ justify-self:center }
  .hero__titles{ justify-items:center;width:100% }
  .hero__title{ font-size:clamp(34px,10vw,46px) }
}
/* кнопки под заголовком hero: только на телефоне, где под кадром есть место */
.hero__cta{ display:none }
@media (max-width:767px){
  .hero__sticky{ --title-h:calc(2 * clamp(34px,10vw,46px) + 8px + 78px) }
  .hero__cta{ display:flex;justify-content:center;gap:10px;width:100%;margin-top:14px }
  .hero__cta .tag-btn{ flex:1;min-width:0;max-width:180px;min-height:50px }
}

/* ============================================================
   HERO НА ТЕЛЕФОНЕ: вертикальный ролик 9:16 (frames/mobv).
   Кадр во всю ширину от верха экрана, без обрезки по бокам.
   На вытянутых экранах под ним остаётся тёмная полоса, в неё
   и на дорогу ложатся заголовок и кнопки. Перекрывает прежние
   правила для широкого ролика выше.
   ============================================================ */
@media (max-width:767px){
  .hero{ height:300vh;height:300svh }
  .hero__sticky{
    --shot-top:0px;
    --shot-h:min(177.78vw, 100svh);
  }
  .hero__hud,
  .hero__content .eyebrow{ display:none }
  .hero__shade{
    background:
      linear-gradient(180deg, rgba(5,8,7,.5) 0, rgba(5,8,7,0) 130px),
      linear-gradient(0deg, var(--dark) calc(100% - var(--shot-h) + 2px), rgba(5,8,7,.92) calc(100% - var(--shot-h) + 9%), rgba(5,8,7,.55) calc(100% - var(--shot-h) + 24%), rgba(5,8,7,0) calc(100% - var(--shot-h) + 46%));
  }
  .hero__content{ top:auto;bottom:calc(22px + env(safe-area-inset-bottom, 0px)) }
  .hero__titles .hero__title{ text-shadow:0 2px 18px rgba(0,0,0,.45) }
  .hero__loader{ top:104px }
}
@media (max-width:767px){
  .bot-fab{ transition:transform .4s var(--ease),opacity .3s,background-color .3s }
  .in-hero .bot-fab{ opacity:0;transform:translateY(16px);pointer-events:none }
}
/* ролик hero на телефоне (heroVideo.js): встаёт на место холста */
.hero__video{
  position:absolute;left:0;width:100%;top:var(--shot-top, 0);height:var(--shot-h, 100%);
  object-fit:cover;pointer-events:none;background:var(--dark);
}
.hero__video::-webkit-media-controls{ display:none!important }
.hero__video::-webkit-media-controls-start-playback-button{ display:none!important;-webkit-appearance:none }

/* ============================================================
   ЭКРАН ЗАГРУЗКИ. Держится, пока не скачан hero (телефон: ролик,
   компьютер: каждый четвёртый кадр), чтобы сайт открывался уже с плавной машиной. Знак-сфера
   из логотипа вращается, полоска показывает, сколько скачано.
   Всё анимируется через transform и opacity: считает видеокарта.
   ============================================================ */
.preload{ display:none }
@media all{
  html.is-preloading:not(.pre-skip),
  html.is-preloading:not(.pre-skip) body{ overflow:hidden }
  /* hero уже скачан в прошлый раз или зашёл поисковый робот (флаг ставит скрипт в <head>) */
  html.pre-skip .preload{ display:none }
  .preload{
    position:fixed;inset:0;z-index:1000;display:grid;place-content:center;justify-items:center;gap:26px;
    background:var(--dark);color:#fff;touch-action:none;
    transition:opacity .55s var(--ease),visibility 0s .55s;
    /* появляется через 0,3 с: если всё уже в кэше, человек его не увидит */
    opacity:0;animation:preIn .3s ease .3s forwards;
  }
  .preload.is-out{ animation:none;opacity:0;visibility:hidden }
  .preload__mark{ width:92px;height:92px;overflow:visible;animation:preSpin 6s linear infinite }
  .preload__bar{ width:148px;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden }
  .preload__bar span{
    display:block;width:100%;height:100%;background:var(--lime-soft);
    transform:scaleX(0);transform-origin:left center;transition:transform .35s ease-out;
  }
  .preload__pct{ margin:-12px 0 0;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.55) }
  /* прежняя надпись «Загрузка N%» в hero не нужна: процент на экране загрузки */
  .hero__loader{ display:none }
}
@keyframes preSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .preload__mark{ animation-duration:20s } }
@keyframes preIn{ to{ opacity:1 } }