/* ==========================================================================
   Лендинг «Укрытие объекта» — Концерн «РОССИ»
   Дизайн-система: инженерный / промышленный B2B, без «тактического» шума.
   Палитра — фирменная, снята с rossi.ru и официального логотипа:
   тёмно-синий #052034 + красный CTA #CF172F + синий логотипа #0038A7.
   ========================================================================== */

/* Токены (цвет, типографика, отступы, тени, движение) вынесены в
   assets/css/tokens.css — он подключается ПЕРЕД этим файлом.
   Здесь описываются компоненты.

   Цвет, скругления, тени, длительности и типографическая шкала переведены
   на var(--…) полностью. Отступы — частично: в компонентах ещё остаются
   значения 13/15/18/22/26/30px, появившиеся до введения шкалы. Правило:
   правишь блок — переводи его отступы на ближайший шаг --s-*. Массовую
   замену не делали намеренно, чтобы не ломать вёрстку, проверенную на
   12 ширинах от 320 до 1180px. */

/* --------------------------------------------------------------- base --- */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px); -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:var(--fs-600); line-height:var(--lh-base);
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* clip вместо hidden: hidden делает body scroll-контейнером и ломает
   position:sticky у .topbar и .spec-card */
@supports (overflow-x:clip){ body{ overflow-x:clip } }
/* height:auto обязателен вместе с max-width: атрибуты width/height в разметке
   попадают в CSS как презентационный хинт, и если ширину ужимает max-width,
   а высота осталась от атрибута — картинка растягивается по вертикали.
   Компоненты, которым нужна своя высота (.brand__logo, .shot img), задают её
   правилом с более высокой специфичностью и не страдают. */
img,svg{ max-width:100%; height:auto; display:block }
a{ color:inherit }
button{ font:inherit; cursor:pointer }
/* overflow-wrap обязателен: в русском полно длинных слов
   («противоосколочного», «металлоконструкции»), которые на крупных кеглях
   шире своей колонки и вылезают на соседнюю */
h1,h2,h3,h4{
  margin:0; font-weight:800; letter-spacing:-.025em; line-height:1.05;
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto;
}
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }
::selection{ background:var(--accent); color:#fff }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:3px }
/* На тёмно-синих секциях красный контур фокуса сливается с фоном —
   там переключаемся на белый. Отдельным правилом, а не переопределением
   переменной: цвет нужен только контуру, акцент остаётся красным.

   Тёмных секций в текущей вёрстке ровно две: блок заявки (.cta) и подвал
   (.foot). Hero сюда НЕ входит — он светлый, на нём белый контур был бы
   невидим, а это две главные кнопки первого экрана. Класса section--dark
   в разметке больше нет, перечислять его бессмысленно. */
.cta :focus-visible,
.foot :focus-visible{ outline-color:#FFFFFF }

/* Ссылка «Перейти к содержимому»: уведена за экран, возвращается по фокусу. */
.skip-link{
  /* fixed, а не absolute: ссылка получает фокус по Tab не только на самом
     верху страницы. При absolute она позиционируется относительно документа,
     и после прокрутки уезжала бы за пределы экрана вместе с ним. */
  position:fixed; left:var(--s-3); top:-80px; z-index:200;
  padding:10px 18px; border-radius:var(--r-sm);
  background:var(--accent); color:#fff; font-weight:700; font-size:var(--fs-400);
  text-decoration:none; transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:var(--s-3) }

.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--gutter) }
.section{ padding-block:var(--pad-section) }
.section--tight{ padding-block:var(--pad-section-tight) }
.section--soft{ background:var(--bg) }
.section--dark{ background:var(--ink); color:#E7EFF5 }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------ typography */
/* максимум 60px, а не 70: при 70px слово «противоосколочного» шире своей
   колонки в hero и вылезало на соседнюю, наезжая на схему */
/* hyphens:manual — автоперенос ломает «Противоосколочные» в произвольном
   месте («Противооско-лочные»). В H1 разрешаем разрыв только там, где в
   разметке стоит ­. Остальным заголовкам auto из базового правила не мешает. */
.h1{ font-size:var(--fs-h1); letter-spacing:-.035em; line-height:1.03; hyphens:manual }
.h2{ font-size:var(--fs-h2); letter-spacing:-.032em }
.h3{ font-size:var(--fs-h3); letter-spacing:-.02em }
.lead{ font-size:clamp(17px,1.5vw,21px); color:var(--muted); line-height:1.55 }
.section--dark .lead{ color:var(--muted-dark) }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); flex:none }

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em }

.sec-head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,56px); align-items:end; margin-bottom:clamp(32px,4vw,56px);
}
.sec-head p{ color:var(--muted) }
.section--dark .sec-head p{ color:var(--muted-dark) }

/* ---------------------------------------------------------------- button */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 24px; border:1px solid transparent; border-radius:var(--r-sm);
  font-weight:700; font-size:15px; letter-spacing:.01em; text-decoration:none;
  transition:background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(207,23,47,.28) }
.btn--primary:hover{ background:var(--accent-2) }
.btn--ghost{ background:transparent; color:#E7EFF5; border-color:rgba(231,239,245,.32) }
.btn--ghost:hover{ background:rgba(231,239,245,.1); border-color:rgba(231,239,245,.6) }
.btn--dark{ background:var(--ink); color:#fff }
.btn--dark:hover{ background:var(--ink-3) }
.btn--light{ background:var(--paper); color:var(--ink); border-color:var(--line) }
.btn--light:hover{ border-color:#AEC1CE }
.btn--block{ width:100% }
.btn--lg{ padding:18px 30px; font-size:16px }

.arrow{ width:16px; height:16px; flex:none }

/* ---------------------------------------------------------------- header */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar__in{ height:var(--nav-h); display:flex; align-items:center; gap:clamp(16px,2vw,28px) }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; flex:none }
.brand__logo{ height:26px; width:auto; flex:none }
.brand__sep{ width:1px; height:26px; background:var(--line); flex:none }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15 }
.brand__txt b{ font-size:15px; font-weight:800; letter-spacing:-.01em; white-space:nowrap }
.brand__txt span{ font-size:11px; color:var(--muted); letter-spacing:.04em; white-space:nowrap }

/* nowrap обязателен: без него на узком десктопе (1040–1180 px) пункты меню
   переносятся на вторую строку и ломают высоту шапки */
.nav{ display:flex; align-items:center; gap:clamp(14px,1.6vw,26px); flex:none }
.nav a{
  font-size:14.5px; font-weight:500; color:#2A3D4C; text-decoration:none;
  position:relative; padding-block:6px; white-space:nowrap;
}
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--accent); transition:right var(--dur-slow) var(--ease) }
.nav a:hover::after{ right:0 }
.topbar .btn{ padding:12px 20px; font-size:14px }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; place-items:center }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); box-shadow:0 -6px 0 var(--ink), 0 6px 0 var(--ink) }

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative; overflow:hidden; color:var(--text);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(110% 80% at 92% 6%, rgba(0,56,167,.07) 0%, transparent 58%),
    linear-gradient(168deg,#FFFFFF 0%,#F5F9FC 45%,#E6EFF6 100%);
}
.hero::before{ /* инженерная сетка */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.75;
  background-image:
    linear-gradient(rgba(5,32,52,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,32,52,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 78%);
}
.hero__in>*{ min-width:0 }   /* иначе длинное слово распирает колонку грида */
/* Снимок вынесен под текст во всю ширину контейнера. Иначе не сходится
   геометрия: кадр 16:9 в колонке высотой ~740px требует 1314px ширины,
   столько в двухколоночной раскладке нет, и его приходилось резать —
   из кадра пропадала то стена со свёрнутым матом, то верхний ряд люверсов. */
.hero__in{
  position:relative; display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,64px); align-items:start;
  padding-block:clamp(50px,6vw,84px) clamp(26px,3vw,40px);
}
.hero h1{ margin:0 }
.hero__sub{ font-size:clamp(16.5px,1.5vw,20px); color:var(--muted); line-height:1.55 }
/* padding-inline ужат с 30 до 24px: при 30px пара кнопок занимала 537px
   и не влезала в свою колонку (519px), вторая уезжала на строку ниже */
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s-6) }
.hero__actions .btn--lg{ padding-inline:var(--s-6) }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--s-6) }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:7px 14px; font-size:var(--fs-300); color:#3E5567; background:rgba(255,255,255,.7);
}
.chip i{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none }

.hero__fig{ position:relative; margin:0; padding-bottom:clamp(50px,6vw,84px) }
.hero__shot{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  box-shadow:0 18px 44px rgba(5,32,52,.16); background:var(--bg-2);
}
/* кадр показывается целиком, без object-fit: ничего не обрезается */
.hero__shot img{ width:100%; height:auto; display:block }
.hero__badge{
  position:absolute; left:var(--s-5); bottom:var(--s-5); max-width:min(46ch, calc(100% - var(--s-8)));
  background:rgba(5,32,52,.88); color:var(--on-dark); backdrop-filter:blur(6px);
  border-radius:var(--r); padding:var(--s-3) var(--s-4); font-size:var(--fs-300); line-height:1.4;
}
.hero__badge b{ color:#fff; display:block; font-size:var(--fs-400); margin-bottom:var(--s-1) }
.hero__fig figcaption{ margin-top:var(--s-3); font-size:var(--fs-200); color:var(--muted); text-align:center }

/* ---------------------------------------------------------------- trust  */
.trust{ background:var(--paper); border-bottom:1px solid var(--line) }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr) }
.trust__item{ padding:26px 26px 26px 0; border-right:1px solid var(--line) }
.trust__item+.trust__item{ padding-left:26px }
.trust__item:last-child{ border-right:0; padding-right:0 }
.trust__item b{ display:block; font-size:15.5px; font-weight:700; margin-bottom:5px; letter-spacing:-.01em }
.trust__item span{ font-size:13.5px; color:var(--muted); line-height:1.45; display:block }
.trust__ico{ width:22px; height:22px; color:var(--accent); margin-bottom:12px }

/* --------------------------------------------------------------- callout */
.callout{
  border-left:3px solid var(--accent); background:var(--paper);
  padding:20px 24px; border-radius:0 var(--r) var(--r) 0; box-shadow:var(--shadow-sm);
}
.callout b{ display:block; font-size:clamp(18px,1.9vw,22px); letter-spacing:-.02em; line-height:1.25; margin-bottom:6px }
.callout span{ color:var(--muted); font-size:15.5px }

.checks{ display:grid; gap:18px; margin-top:30px }
.check{ display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start }
.check__ico{ width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none }
.check__ico svg{ width:15px; height:15px }
.check b{ display:block; font-size:16.5px; font-weight:700; margin-bottom:3px; letter-spacing:-.01em }
.check span{ color:var(--muted); font-size:15px; line-height:1.5 }

.grid-2{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4.5vw,64px); align-items:center }

/* ---------------------------------------------------------------- specs  */
.product{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(28px,4vw,52px); align-items:start }
.spec-card{
  background:var(--paper); color:var(--text); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(26px,3vw,36px);
  position:sticky; top:calc(var(--nav-h) + 20px);
  box-shadow:var(--shadow-md);
}
.spec-card__label{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:800 }
.spec-card__big{ color:var(--ink); font-size:clamp(34px,3.8vw,46px); font-weight:900; letter-spacing:-.045em; line-height:1; margin:12px 0 4px }
.spec-card__big em{ font-style:normal; font-size:.4em; font-weight:700; color:var(--muted); letter-spacing:0; margin-left:6px }
.spec-card__note{ font-size:13.5px; color:var(--muted) }
.spec-rows{ margin-top:26px; border-top:1px solid var(--line) }
.spec-row{ display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px }
.spec-row>dt{ color:var(--muted); flex:none }
.spec-row>dd{ text-align:right; font-weight:700; margin:0 }
.spec-card__foot{ font-size:12.5px; color:var(--muted); margin-top:18px; line-height:1.5 }

.prose h3{ margin:0 0 10px }
.prose p{ color:var(--muted); font-size:16.5px }
.prose p+h3{ margin-top:30px }

.panel{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  padding:clamp(20px,2.6vw,28px);
}
.panel__cap{ font-size:12.5px; color:var(--muted); margin-top:14px; line-height:1.45 }
/* В одну колонку: схема и фото делят и без того неширокую колонку .prose,
   в две они схлопываются до ~300px и оба перестают читаться. */
.scheme-grid{ display:grid; grid-template-columns:1fr; gap:var(--s-4); margin-top:var(--s-6); align-items:start }
.scheme{ margin:0; background:var(--bg); border-radius:var(--r); padding:var(--s-2) }
/* 518px — натуральная ширина единственного фото серийного изделия: выше не
   растягиваем, апскейл сразу видно. min() обязателен — без него это правило
   перебивает глобальный max-width:100%, и картинка вылезает из колонки.
   Снять ограничение, когда придёт кадр в нормальном размере. */
.panel__photo{ max-width:min(518px,100%); margin-inline:auto; border-radius:var(--r-sm) }
.scheme svg{ width:100%; height:auto; display:block }

/* ---------------------------------------------------------- модель угроз */
.threats{ border-top:1px solid var(--line) }
.threat{
  display:grid; grid-template-columns:56px minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(16px,2.4vw,32px); align-items:start;
  padding:clamp(20px,2.4vw,28px) 0; border-bottom:1px solid var(--line);
}
.threat__n{
  font-family:var(--mono); font-size:14px; font-weight:700;
  color:#6B8296; padding-top:3px;   /* было #9AB0C0 — 2,2:1 на белом, нечитаемо */
}
.threat__body h3{ font-size:clamp(19px,2vw,23px); letter-spacing:-.02em; margin-bottom:7px }
.threat__body p{ color:var(--muted); font-size:15px; line-height:1.5 }
.threat__sol{ border-left:2px solid var(--line); padding-left:clamp(16px,2vw,24px) }
.threat__sol p{ color:var(--muted); font-size:14.5px; line-height:1.5 }
.threat__tag{
  display:inline-block; margin-bottom:8px; padding:4px 11px; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:var(--bg-2); color:#42586A;
}
.threat__tag--accent{ background:var(--accent); color:#fff }

/* строка с матом — выделена */
.threat--main{ position:relative }
.threat--main::before{
  content:""; position:absolute; left:-24px; right:-24px; top:0; bottom:0;
  background:rgba(207,23,47,.055); border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0; pointer-events:none;
}
.threat--main>*{ position:relative }
.threat--main .threat__n{ color:var(--accent) }

/* ----------------------------------------------------------- направления */
.dirs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.dir{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  padding:clamp(22px,2.6vw,28px); display:flex; flex-direction:column;
  transition:box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.dir:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px) }
.dir h3{ font-size:19px; letter-spacing:-.018em; margin-bottom:9px }
.dir p{ color:var(--muted); font-size:14.5px; line-height:1.55 }

.dir__ico{
  width:44px; height:44px; border-radius:10px; margin-bottom:16px;
  background:var(--blue-soft); color:var(--blue);
  display:grid; place-items:center; flex:none;
}
.dir__ico svg{ width:23px; height:23px }

/* главная карточка — мат C2 */
.dir--main{
  grid-column:span 2; position:relative; overflow:hidden; border-color:transparent;
  background:linear-gradient(150deg,var(--ink) 0%,#0A3252 60%,#0B3D66 100%);
  color:#fff; padding:clamp(26px,3.2vw,38px);
}
.dir--main:hover{ transform:none; box-shadow:var(--shadow-md) }
.dir--main h3{ font-size:clamp(22px,2.4vw,29px); margin-bottom:12px; max-width:18ch }
.dir--main p{ color:#BBD0E0; font-size:15.5px; max-width:52ch }
.dir__badge{
  display:inline-flex; align-self:flex-start; align-items:center;
  background:var(--accent); color:#fff; border-radius:999px;
  padding:5px 13px; font-size:11.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px;
}
.dir__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:24px; position:relative; z-index:1 }
.dir__art{ position:absolute; right:-26px; bottom:-16px; width:220px; height:150px; pointer-events:none; opacity:.5 }

/* нижняя широкая карточка */
.dir--wide{
  grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between;
  gap:24px; background:var(--blue-soft); border-color:#CBDCF2;
}
.dir--wide:hover{ transform:none; box-shadow:none }
.dir--wide p{ max-width:72ch; margin-top:6px }
.dir--wide .btn{ flex:none }

/* ------------------------------------------------------------- сценарии  */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.case{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper);
  display:flex; flex-direction:column; transition:box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.case:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px) }
.case__media{ position:relative; aspect-ratio:16/9; background:var(--bg-2); overflow:hidden }
.case__media img{ width:100%; height:100%; object-fit:cover }
.case__media svg{ width:100%; height:100% }
.case__idx{
  position:absolute; top:14px; left:14px; z-index:2;
  width:30px; height:30px; border-radius:var(--r-sm); background:rgba(13,19,23,.86);
  color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800;
}
.case__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1 }
.case__body h3{ font-size:20px; margin-bottom:9px }
.case__body p{ color:var(--muted); font-size:15px; line-height:1.5 }
.case__tag{ margin-top:auto; padding-top:18px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted) }

/* Сетка сценариев с ведущей карточкой: первая занимает обе колонки и стоит
   крупнее — окна и проёмы основной сценарий продукта. Остальные идут 2x2. */
.cases--featured{ grid-template-columns:repeat(2,1fr) }
.case--lead{ grid-column:1/-1; flex-direction:row }
.case--lead .case__media{ flex:1 1 52%; aspect-ratio:auto }
.case--lead .case__media img{ height:100%; object-fit:cover }
.case--lead .case__body{ flex:1 1 48%; justify-content:center; padding:var(--pad-card) }
.case--lead h3{ font-size:var(--fs-h3) }
.case--lead p{ font-size:var(--fs-500) }

/* ------------------------------------------------------------- сравнение */
.cmp{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper) }
/* без position:sticky — .cmp имеет overflow:hidden ради скруглений,
   sticky внутри него не работает как ожидается */
.cmp__head{
  display:grid; grid-template-columns:minmax(0,1.5fr) 128px 128px;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.cmp__head div{ padding:14px 18px; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.cmp__head div+div{ text-align:center; border-left:1px solid var(--line) }
.cmp__head .is-us{ color:var(--ink) }
.cmp__row{ display:grid; grid-template-columns:minmax(0,1.5fr) 128px 128px; border-bottom:1px solid var(--line) }
.cmp__row:last-child{ border-bottom:0 }
.cmp__row:nth-child(even){ background:#FAFCFD }
.cmp__row>div{ padding:14px 18px; display:flex; align-items:center; font-size:15px; color:var(--text); line-height:1.4 }
.cmp__row>div+div{ justify-content:center; border-left:1px solid var(--line) }
.cmp__n{ font-family:var(--mono); font-size:12.5px; color:#6B8296; margin-right:12px; flex:none; width:22px }
.mark{ width:24px; height:24px; flex:none }
.mark--no{ color:#B1414F }
.mark--yes{ color:#2E7D4F }
.cmp-note{ font-size:13px; color:var(--muted); margin-top:18px; line-height:1.55; max-width:80ch }

/* ------------------------------------------------------------ испытания  */
.proof{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap-grid) }
.proof-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); padding:var(--pad-card) }
.proof-card h3{ margin-bottom:12px }
.proof-card p{ color:var(--muted); font-size:15.5px }

.protocol{
  margin-top:22px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg); padding:18px 20px;
}
.protocol dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:14.5px }
.protocol dt{ color:var(--muted) }
.protocol dd{ margin:0; font-weight:700; text-align:right }

.docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px }
.doc{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper);
  display:flex; flex-direction:column; text-align:left;
}
.doc__thumb{ aspect-ratio:3/4; background:linear-gradient(#fff,#F0F2EE); border-bottom:1px solid var(--line); padding:14px }
.doc__thumb svg{ width:100%; height:100% }
.doc__body{ padding:13px 14px 15px }
.doc__body b{ display:block; font-size:13.5px; font-weight:700; line-height:1.3 }
.doc__body small{ display:block; font-size:12px; color:var(--muted); margin-top:4px }

.signal{
  display:flex; gap:12px; align-items:flex-start; margin-top:20px;
  padding:14px 16px; border-radius:var(--r); background:var(--warn-bg); color:var(--warn-ink);
  font-size:13.5px; line-height:1.5; border:1px solid #F0DEC8;
}
.signal svg{ width:18px; height:18px; flex:none; margin-top:1px }

/* ------------------------------------------- интегратор / проектный блок */
.integrator{
  margin-top:var(--s-7); border-radius:var(--r-lg); color:var(--text);
  background:var(--blue-soft); border:1px solid #CBDCF2;
  padding:var(--pad-card);
}
.integrator>p{ color:var(--muted); font-size:var(--fs-600); margin-top:var(--s-3); max-width:78ch }
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); margin-top:clamp(28px,3.4vw,38px) }
.pillar{ border-top:2px solid #CBDCF2; padding-top:var(--s-4); position:relative }
.pillar::before{ content:""; position:absolute; top:-2px; left:0; width:34px; height:2px; background:var(--accent) }
.pillar b{ font-family:var(--mono); font-size:13px; color:var(--accent); font-weight:700; letter-spacing:.08em }
.pillar h4{ font-size:18px; margin:10px 0 8px; letter-spacing:-.015em }
.pillar p{ color:var(--muted); font-size:var(--fs-400); line-height:1.5 }

/* ------------------------------------------------- галерея объектов ---- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4) }
.shot{
  margin:0; position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--bg-2); border:1px solid var(--line);
}
.shot img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9 }
.shot--wide{ grid-column:span 2 }
.shot--wide img{ aspect-ratio:2/1 }
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--s-8) var(--s-4) var(--s-4);
  background:linear-gradient(transparent, rgba(5,32,52,.55) 38%, rgba(5,32,52,.9));
  color:#D7E4EE; font-size:var(--fs-300); line-height:1.4;
}
.shot figcaption b{ display:block; color:#fff; font-size:var(--fs-500); margin-bottom:var(--s-1) }

.shot--cta{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6);
  background:var(--blue-soft); border-color:#CBDCF2; padding:var(--pad-card);
}
.shot--cta p{ color:var(--muted); font-size:var(--fs-500); margin-top:var(--s-2); max-width:52ch }
.shot--cta .btn{ flex:none }

/* ------------------------------------------------- расшифровка ГОСТ / С2 */
.gost{
  margin-top:var(--s-7); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--pad-card);
}
.gost__head{ max-width:80ch }
.gost__head p{ color:var(--muted); font-size:var(--fs-600); margin-top:var(--s-3) }
.gost__fig{ margin:var(--gap-grid) 0 0 }
.gost__fig svg{ width:100%; height:auto; display:block }
.gost__fig figcaption{ margin-top:var(--s-2); font-size:var(--fs-200); color:var(--muted); text-align:center }

.gost__facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5);
  margin-top:var(--gap-grid);
}
.gost__fact{ border-top:2px solid var(--line); padding-top:var(--s-4); position:relative }
.gost__fact::before{ content:""; position:absolute; top:-2px; left:0; width:32px; height:2px; background:var(--accent) }
.gost__fact b{ display:block; font-size:var(--fs-500); font-weight:700; letter-spacing:-.01em; margin-bottom:var(--s-1) }
.gost__fact span{ color:var(--muted); font-size:var(--fs-400); line-height:1.5 }

.v50{ margin-top:var(--gap-grid); background:var(--bg); border-radius:var(--r); padding:var(--s-6) }
.v50__title{ font-size:var(--fs-500); font-weight:700; letter-spacing:-.01em }
.v50__title span{ display:block; font-weight:400; font-size:var(--fs-300); color:var(--muted); margin-top:var(--s-1) }
.v50__scale{ margin-top:var(--s-4) }
.v50__bar{
  position:relative; height:14px; border-radius:7px; overflow:hidden;
  background:linear-gradient(90deg,var(--line),var(--bg-2));
}
.v50__band{
  position:absolute; top:0; bottom:0; left:16.66%; right:16.66%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:7px;
}
.v50__ticks{
  display:grid; grid-template-columns:repeat(7,1fr); margin-top:var(--s-2);
  font-family:var(--mono); font-size:var(--fs-100); color:var(--muted); text-align:center;
}
.v50__ticks span:nth-child(2),.v50__ticks span:nth-child(6){ color:var(--accent); font-weight:700 }
.v50__note{ margin-top:var(--s-4); font-size:var(--fs-300); color:var(--muted); line-height:1.55; max-width:88ch }

/* ----------------------------------------------------------- калькулятор */
.calc{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(24px,3.4vw,40px); align-items:start }
.calc__intro{ background:var(--blue-soft); color:var(--text); border:1px solid #CBDCF2; border-radius:var(--r-lg); padding:var(--pad-card) }
.calc__intro h3{ margin-bottom:12px }
.calc__intro p{ color:var(--muted); font-size:var(--fs-500) }
.calc__intro ul{ margin-top:18px; display:grid; gap:10px }
.calc__intro li{ display:grid; grid-template-columns:16px 1fr; gap:var(--s-3); font-size:var(--fs-400); color:#3E5567; align-items:start }
.calc__intro li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-top:8px; margin-left:5px }

.calc__box{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); padding:clamp(22px,2.8vw,30px); box-shadow:var(--shadow-sm) }

.fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.field{ display:flex; flex-direction:column }
.field--full{ grid-column:1/-1 }
.field label{ font-size:13px; font-weight:700; margin-bottom:7px }
.field label .req{ color:var(--accent) }
.field input,.field select,.field textarea{
  width:100%; border:1px solid #CBD2CB; border-radius:var(--r-sm);
  padding:13px 14px; font:inherit; font-size:15.5px; background:var(--paper); color:var(--text);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea{ resize:vertical; min-height:104px }
.field input:focus,.field select:focus,.field textarea:focus{
  /* Прозрачный контур вместо outline:none. В обычном режиме его не видно —
     работает подсветка box-shadow, — а в режиме высокой контрастности
     Windows система перекрашивает его в свой цвет, и фокус снова виден.
     С outline:none там не оставалось вообще никакого признака фокуса. */
  outline:2px solid transparent; outline-offset:2px;
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(207,23,47,.14);
}
.field input[type=file]{ padding:11px 12px; font-size:14px }
.field__hint{ font-size:12.5px; color:var(--muted); margin-top:6px }
.field--err input,.field--err select,.field--err textarea{ border-color:#C0442A; box-shadow:0 0 0 3px rgba(192,68,42,.12) }
.field__err{ font-size:12.5px; color:#C0442A; margin-top:6px; display:none }
.field--err .field__err{ display:block }

.calc__viz{ margin-top:22px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); padding:16px; overflow:hidden }
.calc__viz svg{ width:100%; height:auto }
.result{ margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.result__cell{ background:var(--bg); border-radius:var(--r); padding:16px 18px }
.result__cell strong{
  display:block; font-size:clamp(24px,2.6vw,30px); font-weight:800; letter-spacing:-.03em;
  line-height:1.1; font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.result__cell span{ font-size:12.5px; color:var(--muted); display:block; margin-top:4px; line-height:1.35 }
.calc__actions{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; align-items:center }

/* ---------------------------------------------------------------- шаги   */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,26px) }
.step{ border-top:2px solid var(--line); padding-top:20px; position:relative }
.step::before{ content:""; position:absolute; top:-2px; left:0; width:38px; height:2px; background:var(--accent) }
.step b{ font-family:var(--mono); font-size:13px; color:var(--accent); font-weight:700; letter-spacing:.08em }
.step h3{ font-size:19px; margin:10px 0 8px }
.step p{ color:var(--muted); font-size:14.5px; line-height:1.5 }

/* ----------------------------------------------------------------- FAQ   */
.faq{ max-width:920px }
.faq details{ border-bottom:1px solid var(--line) }
.faq details:first-of-type{ border-top:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-size:clamp(16.5px,1.6vw,19px); font-weight:700; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:13px; height:13px; margin-top:-9px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg); transition:transform var(--dur-slow) var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-4px }
.faq details p{ color:var(--muted); padding-bottom:24px; max-width:80ch; font-size:16px }

/* ------------------------------------------------------------------ CTA  */
.cta{ background:linear-gradient(150deg,#03151F,#052034 52%,#0B3D66); color:#E7EFF5; position:relative; overflow:hidden }
.cta::before{
  content:""; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(110% 80% at 85% 100%,#000,transparent 72%);
          mask-image:radial-gradient(110% 80% at 85% 100%,#000,transparent 72%);
}
.cta__in{ position:relative; display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(30px,4.5vw,60px); align-items:start }
.cta h2{ margin-bottom:18px }
.cta p{ color:#B5CCDE }
.cta__pills{ display:grid; gap:12px; margin-top:28px }
.cta__pill{ display:grid; grid-template-columns:22px 1fr; gap:12px; font-size:15px; color:#C5D9E7; align-items:start }
.cta__pill svg{ width:20px; height:20px; color:var(--accent); margin-top:1px }
.cta__contacts{ margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); display:grid; gap:8px }
.cta__contacts a{ font-size:19px; font-weight:700; text-decoration:none; letter-spacing:-.01em }
.cta__contacts a:hover{ color:var(--accent) }

.lead-form{ background:var(--paper); color:var(--text); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-lg) }
.lead-form h3{ margin-bottom:6px }
.lead-form__sub{ font-size:14.5px; color:var(--muted); margin-bottom:22px }
.consent{ display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start; margin-top:18px; font-size:13px; color:var(--muted); line-height:1.5 }
.consent input{ width:18px; height:18px; margin-top:1px; accent-color:var(--accent) }
.consent a{ color:var(--text); text-decoration:underline; text-underline-offset:2px }
.form-msg{ margin-top:14px; font-size:14px; padding:12px 14px; border-radius:var(--r-sm); display:none }
.form-msg.is-ok{ display:block; background:#EAF3EC; color:#2F6A42; border:1px solid #CBE3D2 }
.form-msg.is-err{ display:block; background:#FBECE8; color:#A7402A; border:1px solid #F2D2C8 }
.form-msg.is-info{ display:block; background:var(--bg); color:#3A463F; border:1px solid var(--line) }

/* --------------------------------------------------------------- footer  */
.foot{ background:var(--ink); color:#A4B9C8; padding-block:clamp(40px,5vw,58px) 28px; font-size:14.5px }
.foot__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(24px,4vw,48px) }
.foot b{ color:#fff; display:block; margin-bottom:10px; font-size:15px }
.foot a{ color:#C9DBE7; text-decoration:none }
.foot a:hover{ color:var(--accent) }
.foot ul{ display:grid; gap:8px }
.foot p{ line-height:1.55 }
.foot__req{ margin-top:14px; font-size:13px; color:#8E9C95; line-height:1.6 }
.foot__req .todo{ background:rgba(207,23,47,.16); color:#F5A3AE; padding:1px 6px; border-radius:4px; font-weight:600 }
.foot__logo{ height:38px; width:auto }
.foot__partners img{ height:30px; width:auto }
.foot__bottom{ margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; color:#7A93A5 }

/* ------------------------------------------------- юридические страницы  */
.doc-page{ max-width:820px; margin-inline:auto; padding-block:clamp(40px,6vw,72px) }
.doc-page h1{ font-size:clamp(28px,4vw,42px); margin-bottom:10px }
.doc-page .doc-date{ color:var(--muted); font-size:14px; margin-bottom:36px }
.doc-page h2{ font-size:clamp(19px,2.2vw,23px); margin:38px 0 12px; letter-spacing:-.02em }
.doc-page p, .doc-page li{ color:#2C3733; font-size:16px; line-height:1.65 }
.doc-page p+p{ margin-top:12px }
.doc-page ol, .doc-page ul{ margin:12px 0 0; padding-left:22px; list-style:decimal; display:grid; gap:8px }
.doc-page ul{ list-style:disc }
.doc-page .fill{ background:#FDF0EA; color:#A7402A; padding:1px 6px; border-radius:4px; font-weight:600; white-space:nowrap }
.doc-back{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--muted); text-decoration:none; margin-bottom:28px }
.doc-back:hover{ color:var(--accent) }

/* ----------------------------------------------------------- sticky CTA  */
.sticky-cta{ display:none }

/* ------------------------------------------------------------ анимации   */
/* Появление секций при прокрутке.
   Прятать содержимое имеет право ТОЛЬКО класс .js, который ставит инлайновый
   скрипт в <head>. Без этой привязки любая осечка со скриптом — блокировщик,
   обрыв сети, синтаксическая ошибка — оставляла невидимой почти всю страницу:
   IntersectionObserver не запускался, класс is-in не появлялся, opacity:0
   оставался навсегда. Теперь при неработающем JS всё просто видно сразу. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal) }
.js .reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js .reveal{ opacity:1; transform:none; transition:none }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ----------------------------------------------------------- адаптивность */
@media (max-width:1180px){
  /* minmax(0,1fr), а не 1fr: 1fr это minmax(auto,1fr), где auto = min-content —
     длинная кнопка в .proof-card распирала трек до 419px при экране 390 */
  .hero__in,.grid-2,.product,.calc,.proof,.cta__in{ grid-template-columns:minmax(0,1fr) }
  .hero__in{ align-items:start }
  .spec-card{ position:static }
  .sec-head{ grid-template-columns:1fr; align-items:start }
  .cases{ grid-template-columns:1fr 1fr }
  .cases--featured{ grid-template-columns:1fr 1fr }
  .steps{ grid-template-columns:1fr 1fr }
  .pillars{ grid-template-columns:1fr }
  .dirs{ grid-template-columns:1fr 1fr }
  .dir--main{ grid-column:1/-1 }
  .dir__art{ opacity:.35 }
  .threat{ grid-template-columns:40px minmax(0,1fr) }
  .threat__sol{ grid-column:2; border-left:0; padding-left:0; padding-top:12px }
  .gost__facts{ grid-template-columns:1fr 1fr }
  .gallery{ grid-template-columns:1fr 1fr }
  .shot--wide{ grid-column:span 2 }
  .foot__grid{ grid-template-columns:1fr 1fr }
  .nav{ display:none }
  .burger{ display:grid }
  .topbar .btn{ display:none }
  .nav.is-open{
    display:flex; position:absolute; left:0; right:0; top:var(--nav-h);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:8px 24px 18px;
    box-shadow:var(--shadow-md);
  }
  .nav.is-open a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:16px }
  .nav.is-open a::after{ display:none }
}
@media (max-width:860px){
  .trust__grid{ grid-template-columns:1fr 1fr }
  .trust__item{ border-right:0; padding:22px 0 }
  .trust__item+.trust__item{ padding-left:0 }
  .trust__item:nth-child(-n+2){ border-bottom:1px solid var(--line) }
  .trust__item:nth-child(odd){ padding-right:20px }
  .cmp__head,.cmp__row{ grid-template-columns:minmax(0,1fr) 74px 74px }
  .cmp__head div,.cmp__row>div{ padding:12px; font-size:14px }
  .cmp__head div{ font-size:11px; letter-spacing:.06em }
}
@media (max-width:680px){
  body{ font-size:16px; padding-bottom:78px }
  .wrap{ padding-inline:var(--gutter-sm) }
  .section{ padding-block:46px }
  .cases,.cases--featured,.steps,.fields,.result,.docs,.foot__grid,.dirs,.gost__facts,.gallery{ grid-template-columns:1fr }
  .case--lead{ flex-direction:column }
  .case--lead .case__media{ aspect-ratio:16/9 }
  .shot--wide{ grid-column:auto }
  .shot--cta{ flex-direction:column; align-items:flex-start }
  .shot--cta .btn{ width:100% }
  .v50__ticks{ font-size:10.5px }
  .dir--wide{ flex-direction:column; align-items:flex-start }
  .dir--wide .btn{ width:100% }
  .dir__art{ display:none }
  .threat--main::before{ left:-18px; right:-18px }
  .trust__grid{ grid-template-columns:1fr }
  .trust__item{ border-bottom:1px solid var(--line) }
  .trust__item:last-child{ border-bottom:0 }
  .hero__actions .btn{ flex:1 1 100% }
  .brand__txt,.brand__sep{ display:none }
  .protocol dl{ grid-template-columns:1fr; gap:2px 0 }
  .protocol dd{ text-align:left; margin-bottom:10px }
  /* nowrap нужен на десктопе, но на мобильном «Запросить подтверждающие
     документы» шире карточки — разрешаем перенос */
  .btn{ white-space:normal }
  .proof-card .btn{ width:100% }
  .foot__bottom{ flex-direction:column; gap:10px }
  /* на узком экране плашка перекрывала почти половину кадра — выносим её
     из наложения под фотографию.
     display:block обязателен: .hero__badge — это <span>, и в статичном потоке
     инлайновый фон рвётся по строкам в «лесенку» */
  .hero__badge{
    display:block; position:static; max-width:none; border-radius:0;
    backdrop-filter:none; padding:var(--s-3) var(--s-4) var(--s-4);
  }
  .sticky-cta{ display:block; position:fixed; left:12px; right:12px; bottom:12px; z-index:var(--z-sticky-cta) }
  .sticky-cta .btn{ width:100%; box-shadow:0 10px 30px rgba(13,19,23,.3) }
}