/* Стили страницы «front».
   Вынесены из инлайн-<style> статичной вёрстки.
   Подключаются автоматически по слагу — см. inc/enqueue.php. */

.ind-mini__acts{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
  .two-col{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
  @media (max-width:900px){.two-col{grid-template-columns:1fr;gap:40px}}
  /* локальные штрихи главной */
  .hero{background:var(--navy);position:relative;overflow:clip;border-radius:0 0 var(--r-lg) var(--r-lg)}
  .hero__inner{max-width:var(--container);margin:0 auto;padding:96px var(--pad) 92px;position:relative;z-index:1;display:flex;flex-direction:column;gap:30px}
 /* Фон и вуаль. Кадр снят так, что левая треть уже тёмная; вуаль добавляет
     запас контраста под белым текстом и гасит правый край, чтобы спираль
     и кнопка «Подобрать» не тонули в бликах. object-position справа —
     при узком экране обрезаем пустую левую часть, а не главный объект. */
  .hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:75% 50%;z-index:0;pointer-events:none}
  /* Видео фоном лежит ПОВЕРХ картинки-постера, но ниже вуали и текста.
     Появляется по классу is-on, который ставит front.js после первого
     реально отрисованного кадра: до этого момента виден постер, и подмена
     проходит без мигания. Если видео не запустилось — класс не ставится
     и на экране остаётся картинка. */
  .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:75% 50%;z-index:0;pointer-events:none;
    opacity:0;transition:opacity .6s ease}
  .hero__video.is-on{opacity:1}
  /* Посетитель просил убрать анимацию — видео не показываем совсем.
     Скрипт его и не запустит, но правило страхует на случай кэша разметки. */
  @media (prefers-reduced-motion:reduce){
    .hero__video{display:none}
  }
  .hero__veil{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      linear-gradient(90deg, var(--navy) 0%, rgba(34,34,97,.94) 34%, rgba(34,34,97,.72) 62%, rgba(34,34,97,.5) 100%),
      linear-gradient(180deg, rgba(34,34,97,.5) 0%, rgba(34,34,97,0) 32%, rgba(34,34,97,.45) 100%)}
  .hero__spiral{position:absolute;left:-150px;top:50%;transform:translateY(-50%);width:720px;height:720px;object-fit:contain;opacity:.22;pointer-events:none;z-index:0;mix-blend-mode:screen}
  .hero__badge{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--on-dark-2)}
  .hero__badge b{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
  .hero h1{font-family:var(--font-h);font-weight:800;font-size:48px;line-height:1.08;letter-spacing:-.02em;color:#fff;max-width:760px}
  .hero p{font-size:18px;font-weight:600;line-height:1.6;color:var(--on-dark);max-width:640px}
  .hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
  .kpi{position:relative;z-index:2;margin-top:-40px;padding:0 var(--pad)}
  .kpi__grid{max-width:1312px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px -32px rgba(34,34,97,.25);display:grid;grid-template-columns:repeat(4,1fr)}
  .kpi__item{padding:30px;display:flex;flex-direction:column;gap:6px}
  /* Ячейка с визуалом: центрируем, чтобы полоса читалась как четыре равных
     блока, а не как текст с картинкой сбоку. */
  .kpi__item--ico{align-items:center;text-align:center;padding:26px 22px}
  .kpi__item + .kpi__item{border-left:1px solid var(--line)}
  .kpi__n{font-family:var(--font-h);font-weight:800;font-size:42px;letter-spacing:-.02em}
  .kpi__l{font-size:14px;color:var(--muted-2);font-weight:500}
  .clients{padding:48px 0 0;overflow:clip}
  .clients__track{display:flex;width:max-content;animation:marq 32s linear infinite}
  /* Пауза при наведении. Без неё логотип уезжает из-под курсора быстрее,
     чем успевает отработать :hover — подсветка срабатывала через раз. */
  .clients:hover .clients__track,.clients:focus-within .clients__track{animation-play-state:paused}
  @media (prefers-reduced-motion:reduce){.clients__track{animation:none}}
  .clients__row{display:flex;gap:0;height:48px;padding:0;font-family:var(--font-h);font-weight:700;font-size:17px;color:var(--on-dark-2);letter-spacing:.06em;white-space:nowrap;align-items:center}
  .clients__row b{color:var(--green);font-size:9px}
  @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .divider{display:flex;align-items:center;gap:24px;max-width:var(--container);margin:0 auto;padding:80px var(--pad)}
  .divider span{flex:1;height:1px;background:var(--line)}
  .divider img{width:34px;height:34px;object-fit:contain;animation:spin 24s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .cfg{padding:0 var(--pad)}
  .cfg__card{max-width:1312px;margin:0 auto;padding:80px 72px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
  .cfg__steps{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.14)}
  .step{display:flex;gap:24px;align-items:flex-start;padding:22px 16px 22px 8px;border:none;border-bottom:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;width:100%;text-align:left;cursor:pointer;position:relative}
  .step.is-active{background:rgba(255,255,255,.04)}
  .step__n{flex:none;font-size:13px;font-weight:700;margin-top:4px;font-family:var(--font-h);color:rgba(255,255,255,.35)}
  .step.is-active .step__n{color:var(--green)}
  .step__t{display:block;font-family:var(--font-h);font-weight:700;font-size:18px;letter-spacing:-.01em}
  .step__d{display:block;font-size:14px;line-height:1.55;color:var(--on-dark);font-weight:400;margin-top:6px}
  .step:not(.is-active) .step__d{display:none}
  .prod5{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .prod{position:relative;background:var(--surface);border:1px solid transparent;border-radius:var(--r-md);padding:26px 22px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;color:var(--ink);overflow:clip;transition:border-color .2s,transform .25s}
  /* 3D-визуал товара. ЗАГЛУШКА: финальные придут от дизайнера (ТЗ иконок). */
  .prod__img{width:100%;max-width:220px;aspect-ratio:1;object-fit:contain;flex:none;margin:-8px 0 0;transition:transform .25s;-webkit-user-drag:none}
  .prod:hover .prod__img{transform:scale(1.05)}
  .prod__more{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-h);font-weight:700;font-size:14px;color:var(--blue)}
  .prod__more b{font-weight:700;transition:transform .2s}
  .prod:hover .prod__more{color:var(--navy)}
  .prod:hover .prod__more b{transform:translateX(4px)}
  .prod:hover{border-color:var(--line-strong);transform:translateY(-4px);color:var(--ink)}
  /* scroll-margin-top: якорь #lead ведёт сюда с кнопки в первом экране,
     из калькуляторов и при возврате формы с ошибкой. Без отступа шапка
     накрывает заголовок блока, и человек видит середину формы. */
  .lead-sec{background:var(--navy);color:#fff;position:relative;overflow:clip;scroll-margin-top:calc(var(--hdr-h) + 16px)}
  .lead-sec__inner{max-width:var(--container);margin:0 auto;padding:96px var(--pad);display:grid;grid-template-columns:1fr 480px;gap:88px;align-items:start;position:relative;z-index:1}
  .form{background:#fff;border-radius:20px;padding:38px;display:flex;flex-direction:column;gap:18px;color:var(--ink);box-shadow:0 32px 80px -32px rgba(0,0,0,.5)}
  .form__tabs{display:flex;gap:6px;background:var(--surface);border-radius:999px;padding:5px}
  .form__tab{flex:1;cursor:pointer;border:none;border-radius:999px;padding:10px 8px;font-family:var(--font-h);font-weight:700;font-size:13.5px;background:transparent;color:var(--muted);transition:background .2s,color .2s}
  .form__tab.is-active{background:var(--navy);color:#fff}
  .lead-points{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.14);margin-top:10px;max-width:480px}
  .lead-points span{padding:17px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px;font-weight:500;color:var(--on-dark);display:flex;gap:12px;align-items:center}
  .lead-points b{color:var(--green);font-family:var(--font-h);font-weight:700}
  @media (max-width:1100px){.prod5{grid-template-columns:repeat(3,1fr)}.prod__img{max-width:190px}}
  @media (max-width:900px){
    .kpi__grid{grid-template-columns:repeat(2,1fr)}
    .kpi__item:nth-child(3){border-left:none}
    .cfg__card{grid-template-columns:1fr;gap:40px;padding:56px 28px}
    .lead-sec__inner{grid-template-columns:1fr;gap:40px}
    .prod5{grid-template-columns:repeat(2,1fr)}
    .prod__img{max-width:170px}
  }
  @media (max-width:620px){.kpi__grid{grid-template-columns:1fr}.kpi__item+.kpi__item{border-left:none;border-top:1px solid var(--line)}.prod5{grid-template-columns:1fr;gap:12px}.prod{padding:18px 14px 16px}.prod__img{max-width:130px}.prod .h4{font-size:16px!important}}
  /* Подпись под формой лежит на белом фоне карточки, а не на тёмной секции:
     цвет наследуется от .form, инлайновый белый делал её невидимой. */
  .form .muted{color:var(--muted-2)}
  .form .muted b{color:var(--navy)}

@media (max-width:820px){
  /* Текст на мобилке ложится во всю ширину, поэтому вуаль плотнее, чем на
     десктопе: иначе белый заголовок садится на блики и теряет контраст.
     ⚠️ Но плотность НЕ равномерная. Прежний вариант (.9 сверху) душил фон
     целиком, и вертикальный ролик под ним просто не читался — грузили
     полтора мегабайта ради невидимого. Верхняя пятая часть, где текста нет,
     осветлена до .5: там видно цех. Ниже плотность нарастает к тексту.
     Контраст под заголовком проверен замером — держится выше нормы. */
  .hero__veil{background:
    linear-gradient(180deg,
      rgba(34,34,97,.5) 0%,
      rgba(34,34,97,.66) 17%,
      rgba(34,34,97,.86) 38%,
      rgba(34,34,97,.92) 100%)}
  .hero__bg{object-position:70% 50%}
}

/* Вертикальный ролик отдаётся до 580px — там герой портретный (замер:
   540 → 0.78, 600 → 0.92). Он уже обрезан по центру при выпуске, поэтому
   смещать нечего; 75% от горизонтальной версии увело бы кадр в край. */
@media (max-width:580px){
  .hero__video{object-position:50% 50%}
}

  /* Вкладка «Связаться с руководителем»: компания сразу после имени —
     так записано в таблице форм заказчика от 20.08. Поле в разметке одно
     на три вкладки, поэтому порядок задаётся здесь.
     ⚠️ Расписаны ВСЕ видимые элементы: у .srcnote order по умолчанию 0,
     и при частичной расстановке пояснение уехало бы в начало формы. */
  .form[data-tab-active="q"] .field--name{order:1}
  .form[data-tab-active="q"] .field--company{order:2}
  .form[data-tab-active="q"] .field--contact{order:3}
  .form[data-tab-active="q"] .field--topic{order:4}
  .form[data-tab-active="q"] .srcnote{order:5}
  .form[data-tab-active="q"] .field--msg-q{order:6}
  .form[data-tab-active="q"] .btn{order:7}
  .form[data-tab-active="q"] .muted{order:8}