/* ============================================================
   layout.css — каркас страницы: контейнер, секции, hero,
   крупные блоки (кейсы, панели услуг, тёмная секция, цифры, footer)
   Брейкпоинты: desktop 1440+, tablet 768–1024, mobile 375–428
   ============================================================ */

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- секции ---------- */
.section {
  padding-block: var(--space-xl) 0;
}

.section:last-of-type {
  /* было var(--space-xl): вместе с новым верхним отступом футера
     (тоже var(--space-xl)) зазор перед футером задваивался */
  padding-bottom: var(--space-m);
}

/* строка заголовка: h2 слева, pill справа (как в референсе) */
.section__headrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.section__headrow h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  max-width: 16ch;
}

h2 .dim { color: var(--text-dim); }

/* ---------- сетки ---------- */
.grid {
  display: grid;
  gap: var(--space-s);
}

.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- header: плавающий pill ---------- */
.header {
  position: fixed;
  inset: 18px 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none; /* кликается только сам pill и контакт */
}

.header__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  /* без gap: схлопнутые логотип/разделитель не оставляют зазоров,
     интервалы задают сами элементы */
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  background: rgba(240, 242, 244, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 24px rgba(15, 18, 22, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* на первом блоке pill показывает только пункты меню; логотип и
   разделитель появляются после скролла за hero (.header--scrolled из JS) */
.header__pill .logo {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
}

.header__divider {
  width: 0;
  height: 18px;
  background: rgba(15, 18, 22, 0.18);
  opacity: 0;
  transition: width 0.4s ease, margin 0.4s ease, opacity 0.3s ease;
}

.header--scrolled .header__pill .logo {
  max-width: 160px;
  opacity: 1;
  margin-left: 12px; /* отступ от края pill только у видимого логотипа */
}

.header--scrolled .header__divider {
  width: 1px;
  /* справа у «Услуги» свой внутренний паддинг 14px — компенсируем,
     чтобы визуальные зазоры по обе стороны разделителя были равными */
  margin-inline: 16px 2px;
  opacity: 1;
}

/* на index.html «Связаться» больше не живёт в шапке — это теперь
   закреплённая кнопка в ряду hero__quicklinks (см. .hero__quicklink--cta
   ниже). .header__contact остаётся только на страницах без hero, где он
   виден всегда (.header--contact-pill). */
.header__contact {
  pointer-events: auto;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 500;
  color: var(--on-dark);
  mix-blend-mode: difference; /* читается и на тёмном hero, и на светлых секциях */
  text-decoration: none;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* на страницах без hero (.header--contact-pill) — та же полупрозрачная
   «таблетка», что у меню, и тот же тёмный текст без подчёркивания, что
   у пунктов навигации; фон сам держит контраст, mix-blend-mode не нужен */
.header--contact-pill .header__contact {
  background: rgba(240, 242, 244, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 24px rgba(15, 18, 22, 0.08);
  color: var(--text-primary);
  mix-blend-mode: normal;
}

/* ---------- hero (тёмный) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* пилюлю убрали — контент стал короче, поэтому снова якорим к низу
     (через padding-bottom у .hero__content), но с меньшим отступом,
     чем было изначально — блок чуть ниже центра, а не у самого края */
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--on-dark);
}

/* ПЛЕЙСХОЛДЕР (этап 2): canvas NodeGraph (пресет radial), линии справа */
.hero-canvas-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 30%, rgba(47, 185, 232, 0.07), transparent 55%),
    radial-gradient(ellipse at 95% 80%, rgba(124, 140, 255, 0.06), transparent 45%),
    var(--bg-dark);
}

.hero__logo {
  position: absolute;
  top: 24px;
  /* левый край логотипа = левый край .container (текстовых блоков):
     отступ до контейнера + его внутренний паддинг */
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  z-index: 2;
}

.hero__logo img {
  height: 48px;
  width: auto;
}

/* угловой логотип на страницах без hero. По умолчанию — fixed (404.html:
   страница не скроллится вообще, логотип должен быть виден всегда). */
.corner-logo {
  position: fixed;
  top: 24px;
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  z-index: 101; /* выше .header (100), логотип поверх pill-меню при необходимости */
}

.corner-logo img {
  height: 48px;
  width: auto;
}

/* privacy-policy.html: страница скроллится, поэтому логотип должен вести
   себя как hero__logo на index.html — уезжать вместе с контентом, а не
   висеть поверх него постоянно. .page-logo-anchor — узкая полоса в самом
   верху документа; когда она уходит из вьюпорта, main.js переключает
   header в .header--scrolled (мини-лого появляется в pill). */
.page-logo-anchor {
  position: relative;
  /* было 96px — вместе с padding-top секций ниже (.documents/.portfolio/
     .legal) давало слишком большой отступ до контента на второстепенных
     страницах */
  height: 76px;
}

.page-logo-anchor .corner-logo {
  position: absolute;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  /* низ якорит .hero (align-items: flex-end) — нижний отступ напрямую
     двигает блок вверх/вниз по экрану; сделан меньше исходного (110px),
     чтобы текст был чуть ниже центра, а не у самого края */
  padding-block: 120px clamp(92px, 8vh, 84px);
}

.hero__content h1 {
  /* -40% от var(--fs-h1), затем +12pt (16px), затем -8px */
  font-size: clamp(27px, calc(3.24vw + 8px), 54px);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  /* было 17ch — при уменьшенном шрифте это давало узкий блок,
     из-за чего весь текст казался сдвинутым влево */
  max-width: 880px; /* было 760px */
  /* тот же отступ, что у .hero__note margin-top, — одинаковые зазоры
     заголовок→подзаголовок и подзаголовок→пилюля */
  margin-bottom: var(--space-m);
}

.hero__sub {
  max-width: 880px; /* было 760px */
  color: var(--on-dark-secondary);
  font-size: 20.4px; /* было 17px, +20% */
}

/* p.hero__note (а не просто .hero__note): components.css подключается
   ПОСЛЕ layout.css, и правило .pill (там) при равной специфичности
   перебивало бы font-size — поднимаем специфичность через селектор тега */
p.hero__note {
  max-width: 620px; /* было 880px — уже, чтобы перенос падал после тире */
  margin-top: var(--space-m);
  /* больше отступ и менее агрессивное скругление, чем у обычной .pill —
     иначе многострочный текст «вылезает» за скруглённые края капсулы */
  padding: 14px 20px;
  border-radius: var(--radius-l);
  font-size: 16px; /* было 19.6px */
  line-height: 1.5;
  /* .pill задаёт white-space: nowrap (нужно коротким тегам) — здесь текст
     длинный и должен переноситься, иначе вылезает за пределы пилюли */
  white-space: normal;
}

/* ряд кнопок-разделов под пилюлей: в одну строку на десктопе (ширина
   не ограничена контейнером в 880px — иначе 4 длинных лейбла не влезают),
   переносится на планшете/мобильных, где влезть в одну строку физически
   невозможно */
.hero__quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* тот же отступ, что у h1 margin-bottom — одинаковые зазоры
     заголовок→подзаголовок и подзаголовок→кнопки */
  margin-top: var(--space-m);
}

.hero__quicklink {
  padding: 12px 20px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-dark);
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}

.hero__quicklink:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

/* «Связаться» — визуально в том же ряду и с тем же стилем, что у кнопок
   разделов (никакой заливки), но закреплена у правого края страницы и не
   участвует в потоке/переносе flex-ряда: position: fixed держит её на
   одном месте экрана на протяжении всего скролла страницы, а не только
   пока виден hero. Пока виден тёмный hero — контурная, как соседи, текст
   белым по mix-blend-mode (читается на любом фоне под ней). */
.hero__quicklink--cta {
  position: fixed;
  right: var(--gutter);
  bottom: 84px;
  /* выше любого контента на странице (в т.ч. sticky-карточки в «Проектах»),
     чтобы кнопку никогда не перекрывало то, что происходит под ней */
  z-index: 95;
  color: #fff;
  mix-blend-mode: difference;
}

/* после ухода из hero — та же светлая pill с тёмным текстом, что у
   пунктов меню/.header__contact на светлых страницах; mix-blend-mode
   больше не нужен (фон сам держит контраст на любой секции под кнопкой).
   backdrop-filter держит читаемость, даже если под кнопкой окажется
   что-то контрастное (например, тёмная sticky-карточка «Проектов») */
body.is-scrolled .hero__quicklink--cta {
  background: rgba(240, 242, 244, 0.72);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 24px rgba(15, 18, 22, 0.08);
  color: var(--text-primary);
  mix-blend-mode: normal;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.is-scrolled .hero__quicklink--cta:hover {
  background: rgba(240, 242, 244, 0.9);
}

@media (max-width: 767px) {
  .hero__quicklink {
    white-space: normal;
    text-align: center;
    flex: 1 1 auto;
  }
}

/* контакт остаётся пунктом меню на планшете/мобильном — закреплённая
   кнопка там же мешала бы контенту */
@media (max-width: 1024px) {
  .hero__quicklink--cta {
    display: none;
  }
}

/* ---------- лента протоколов ---------- */
.partners {
  padding-block: var(--space-s);
}

/* карусель брендов идёт сразу за hero — нужен собственный отступ сверху,
   а не вплотную к тёмному блоку */
.partners--logos {
  padding-top: calc(var(--space-xl) * 0.7);
}

.partners__inner {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}

.partners__label {
  flex: 0 0 300px;
  color: var(--text-dim);
  font-size: 16px; /* было var(--fs-small)/13px — крупнее, как текст пилюли hero */
}

/* сразу после карусели брендов идёт «Проекты» — свой (уменьшенный)
   верхний отступ вместо стандартного .section, чтобы блоки не расходились */
#cases {
  padding-top: calc(var(--space-xl) * 0.7);
}

/* ---------- кейсы: тёмная sticky-карточка + белые карточки ---------- */
/* картинка и кнопка снова вместе в одной sticky-обёртке — едут и
   «отпускаются» как единое целое, кнопка никогда не остаётся позади в
   потоке документа. containing block для sticky — грид-ячейка (высота
   всего ряда = по более высокой колонке), поэтому карточка «едет» и
   «отпускается» в конце списка независимо от align-items. */
.cases {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-s);
  align-items: start;
}

.cases__feature-wrap {
  position: sticky;
  top: 90px;
}

/* кнопка — position: absolute относительно sticky-обёртки: физически не
   участвует в высоте .cases__feature-wrap (а значит и в высоте грид-ряда,
   которая определяет, где sticky «отпускает» карточку) — поэтому
   выравнивание со списком идёт строго по нижнему краю картинки, а не
   картинки+кнопки. При этом визуально кнопка всегда «приклеена» прямо
   под картинкой и едет вместе с ней (top: 100% от sticky-предка = его
   же положение на экране в любой момент скролла) — не отстаёт и не
   остаётся одна в потоке документа. */
.cases__feature-cta {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-m);
}

.cases__feature {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--on-dark);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.cases__feature h2 {
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  max-width: 15ch;
  position: relative;
  z-index: 1;
}

/* фоновая графика тёмной карточки кейсов: инженерная схема занимает нижние
   ~62% карточки — над ней остаётся сплошной тёмный фон .cases__feature,
   так пилюля и заголовок сидят на чистом чёрном, а не поверх линий схемы */
.cases__feature-visual {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/schema.png');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.cases__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* ---------- услуги: вступление сверху + панели во всю ширину ---------- */
.focus {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.focus__aside {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  color: var(--text-secondary);
  font-size: 15px;
}

.focus__aside p {
  max-width: 640px;
}

.focus__aside .btn { flex-shrink: 0; }

/* Аккордеон: три колонки, hover расширяет активную и схлопывает соседние.
   Реальное изменение ширины через flex-grow, без overlay/z-index. */
.focus__panels {
  display: flex;
  /* панели встык, без зазоров */
  border-radius: var(--radius-m);
  overflow: hidden;
}

/* state machine на чистом CSS:
   - курсор вне контейнера → все панели в нейтрали (flex-grow: 1);
   - курсор в контейнере → все схлопываются (0.4), панель под курсором
     расширяется (3); переключение между панелями без «пустого» состояния */
@media (hover: hover) {
  .focus__panels:hover .focus-panel { flex-grow: 0.4; }
  .focus__panels .focus-panel:hover { flex-grow: 3; }
}

/* ---------- тёмная секция «что нас определяет» ---------- */
.defines {
  position: relative;
  margin-top: var(--space-xl);
  /* низ выше обычного: последний ряд карточек смещён лесенкой вниз */
  padding-block: var(--space-xl) calc(var(--space-xl) * 1.9);
  background: var(--bg-dark);
  color: var(--on-dark);
  overflow: hidden;
  /* тонкие вертикальные линии-разметка, как в референсе */
  background-image:
    repeating-linear-gradient(to right,
      transparent 0, transparent calc(25% - 1px),
      var(--border-dark) calc(25% - 1px), var(--border-dark) 25%);
}

/* SVG scroll-linked кривая (js/scroll-curve.js) — фоном под контентом */
.scroll-curve-placeholder {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scroll-curve-placeholder svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible; /* заезды кривой за края обрезает сама секция */
}

.scroll-curve circle {
  transition: opacity 0.3s ease;
}

/* контент секции — поверх кривой */
.defines .container {
  position: relative;
}

.defines__head {
  max-width: 860px;
  margin-bottom: var(--space-xl);
}

.defines__head h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  margin-block: var(--space-m) var(--space-s);
}

.defines__head p {
  color: var(--on-dark-secondary);
  max-width: 540px;
}

/* 4 принципа диагональной лесенкой, как в референсе: каждый на своём
   уровне, с крупными вертикальными интервалами; кривая проходит через
   точку под каждой карточкой. Количество и порядок зафиксированы. */
.defines__grid {
  display: block;
}

.principle {
  width: min(380px, 100%);
}

.principle[data-principle="1"] { margin-left: 16%; }
.principle[data-principle="2"] { margin-left: 60%; margin-top: clamp(160px, 24vh, 300px); }
.principle[data-principle="3"] { margin-left: 26%; margin-top: clamp(160px, 24vh, 300px); }
.principle[data-principle="4"] { margin-left: 48%; margin-top: clamp(160px, 24vh, 300px); }

/* ---------- заявление + мини-форма (Feedback-блок) ---------- */
.statement {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-l);
  align-items: start;
  margin-bottom: var(--space-l);
}

.statement h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  max-width: 18ch;
}

.statement p {
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 46ch;
  padding-top: 10px;
}

/* ---------- цифры ---------- */
.numbers {
  display: grid;
  /* та же ширина первой колонки, что у .row__title в «Как мы работаем» —
     тёмные карточки в обеих секциях выглядят одной ширины */
  grid-template-columns: minmax(280px, 380px) 1fr 1fr;
  grid-auto-rows: minmax(220px, auto);
  gap: var(--space-s);
}

.numbers__feature {
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--on-dark);
  border-radius: var(--radius-m);
  padding: var(--space-m);
}

.numbers__feature .pill,
.numbers__feature h2 {
  position: relative;
  z-index: 1; /* поверх .numbers__visual, который теперь во всю карточку */
}

.numbers__feature h2 {
  font-size: clamp(34px, 3.4vw, 56px);
  letter-spacing: -0.02em;
  margin-top: var(--space-s);
}

/* фоновая графика тёмной карточки цифр: картинка во всю карточку;
   тёмный угол самого фото естественно уходит под пилюлю/заголовок,
   лёгкий градиент сверху добавляет запас контраста для текста */
.numbers__visual {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.55) 0%,
      rgba(11, 13, 16, 0.1) 30%,
      rgba(11, 13, 16, 0.3) 100%
    ),
    url('../assets/images/lower_schema.png');
  background-size: auto, cover;
  background-position: center, left top;
  background-repeat: no-repeat, no-repeat;
}

/* ---------- страница 404: помещается в экран целиком, без скролла ---------- */
.page-fit {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* гарантированно без скролла, даже на низких экранах */
}

.page-fit .footer {
  flex-shrink: 0;
  /* больше отступ сверху — футер выше (main сверху сжимается под flex:1);
     больше отступ снизу — воздух между текстом футера и краем экрана */
  padding-block: var(--space-l) var(--space-l);
}

/* main — прямой flex-child body.page-fit (header/corner-logo — fixed,
   в раскладке не участвуют); растягивается на всё, что не занял футер */
.page-fit > main {
  flex: 1;
  min-height: 0;
  display: flex;
}

.error404 {
  flex: 1;
  min-height: 0; /* даёт блоку сжиматься, а не выталкивать футер за экран */
  padding-top: 96px;
  background: var(--bg-page);
  display: flex;
  align-items: center;
}

.error404__container {
  max-width: 720px;
  text-align: center;
}

.error404 .pill {
  margin-bottom: var(--space-m);
}

.error404 h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-s);
}

.error404__container > p {
  color: var(--text-secondary);
  max-width: 46ch;
  margin-inline: auto;
}

.error404__countdown {
  margin-top: var(--space-m);
  color: var(--text-dim);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.error404__countdown #countdown-num {
  color: var(--text-primary);
  font-weight: 600;
}

.error404__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-l);
  flex-wrap: wrap;
}

/* ---------- страница «Официальные документы» ---------- */
.documents {
  /* клиренс под header даёт .page-logo-anchor перед секцией (как .legal) */
  padding-top: var(--space-m);
  padding-bottom: var(--space-xl);
  background: var(--bg-page);
  min-height: 100vh;
}

.documents h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--space-s);
}

.documents__intro {
  color: var(--text-secondary);
  /* во всю ширину контейнера — до правого края крайней карточки,
     без переноса в одну строку */
  max-width: none;
  margin-top: var(--space-s);
  margin-bottom: var(--space-l);
}

.documents__grid {
  margin-top: var(--space-l);
}

/* ---------- страница «Портфолио проектов» ---------- */
.portfolio {
  /* клиренс под header даёт .page-logo-anchor перед секцией (как .legal) */
  padding-top: var(--space-m);
  padding-bottom: var(--space-xl);
  background: var(--bg-page);
  min-height: 100vh;
}

.portfolio h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--space-s);
}

.portfolio__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
}

/* пилюли-кнопки фильтра: неактивная — контурная, активная — залитая */
.portfolio__tag {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.portfolio__tag:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.portfolio__tag.is-active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-card);
}

.portfolio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
  align-items: start;
}

.portfolio__empty {
  color: var(--text-dim);
  margin-top: var(--space-l);
}

@media (max-width: 767px) {
  .portfolio__grid { grid-template-columns: 1fr; }
}

/* ---------- страница «Системы безопасности»: шапка ---------- */
/* .portfolio переиспользуется здесь только как шапка-тизер перед следующим
   блоком, а не как единственная секция страницы — сбрасываем min-height:
   100vh (иначе шапка растягивалась на весь экран) и уменьшаем нижний
   отступ, чтобы не складывался с верхним отступом следующей .section */
.security-hero {
  min-height: 0;
  padding-bottom: 0;
}

/* .documents__intro тянет свой обычный margin-bottom: var(--space-l) —
   это и есть основной вклад в разрыв перед следующей секцией, а не
   паддинг самой .section (тот уже сведён к минимуму выше). У
   .documents__intro в остальных случаях ещё и max-width:none
   (растягивается во всю ширину контейнера) — на всех страницах-услугах
   это выглядело растянутым; сужаем и оставляем по левому краю, как
   большинство текстовых блоков на сайте. Проценты у max-width считаются
   от content-box .container (паддинги-gutter уже не входят). */
.security-hero .documents__intro {
  margin-bottom: 0;
  max-width: 85%;
}

/* следующая секция (#composition) идёт сразу за шапкой — обычный верхний
   отступ .section (var(--space-xl)) оставлял между ними слишком большой
   разрыв */
#composition {
  padding-top: 24px;
}

/* contacts.html: тот же приём — секция идёт сразу за шапкой */
#team {
  padding-top: 24px;
}

/* карта (виджет Яндекс.Карт вставляет свой iframe сам) — во всю ширину
   контейнера, скруглённая, как остальные крупные карточки на сайте */
.contacts-map {
  margin-top: var(--space-l);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  line-height: 0;
}

.contacts-map iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 480px;
}

/* заголовок «Полный цикл» здесь длиннее обычного — стандартных 16ch
   (.section__headrow h2) не хватало, текст рвался на 3-4 строки */
#pipeline .section__headrow h2 {
  max-width: 30ch;
}

/* service.html: «Концепция сервисного обслуживания» не помещалась в
   стандартных 16ch (.section__headrow h2) */
#concept .section__headrow h2 {
  max-width: 24ch;
}

/* колонки .row здесь 1:1, а не узкая фикс-колонка + широкое описание */
#concept .row {
  grid-template-columns: 1fr 1fr;
}

/* ---------- страница «Системы безопасности»: состав направления ---------- */
/* та же пара «тёмная карточка-фича + список» что у .cases/.numbers на
   главной: картинка с пилюлей и заголовком слева, подразделы — справа */
.security-comp {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-s);
  align-items: stretch;
}

/* automation.html: здесь картинка и список ближе к пропорции 1:2, а не
   узкая фикс-колонка + всё остальное (на глаз читалось как 1:3) */
.security-comp--automation {
  grid-template-columns: 1fr 1fr;
}

.security-comp__feature {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--on-dark);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.security-comp__feature .pill,
.security-comp__feature h2 {
  position: relative;
  z-index: 1;
}

.security-comp__feature h2 {
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin-top: var(--space-s);
  max-width: 14ch;
}

/* фоновая графика: нижняя часть карточки, как у .cases__feature-visual.
   Картинка на каждой странице услуги своя — модификатор
   .security-comp__feature-visual--<страница> переопределяет
   background-image целиком (а не только url через var()) ниже по файлу,
   чтобы не зависеть от особенностей парсинга var() внутри составного
   свойства background-image в разных браузерах. */
.security-comp__feature-visual {
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/image_systems.png');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* automation.html: та же тонировка, другая картинка */
.security-comp__feature-visual--automation {
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/image_auto.png');
}

/* electrical.html: та же тонировка, другая картинка */
.security-comp__feature-visual--electrical {
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/image_montage.png');
}

/* service.html: та же тонировка, другая картинка */
.security-comp__feature-visual--service {
  background-image:
    linear-gradient(
      to bottom,
      rgba(11, 13, 16, 0.9) 0%,
      rgba(11, 13, 16, 0.25) 22%,
      rgba(11, 13, 16, 0.15) 55%,
      rgba(11, 13, 16, 0.5) 100%
    ),
    url('../assets/images/image_service.png');
}

/* ---------- страница «Сервисное обслуживание»: состав, сетка 2×2 ---------- */
/* здесь 4 равные ячейки (картинка + 3 текстовых блока), а не узкая
   колонка-картинка + широкий список, как на security/automation/
   electrical.html — тут по смыслу все 4 блока равнозначны */
.service-comp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
}

.service-comp .security-comp__feature {
  min-height: 0;
}

@media (max-width: 767px) {
  .service-comp { grid-template-columns: 1fr; }
}

.security-comp__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.security-comp__card {
  position: relative;
  flex: 1;
  background: var(--bg-dark-soft);
  color: var(--on-dark);
  border-radius: var(--radius-m);
  padding: var(--space-m);
}

.security-comp__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-s);
}

.security-comp__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.security-comp__card h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

/* прямой child-селектор — только для карточек БЕЗ .security-comp__card-head
   (например, карточки объектов на automation.html): там заголовок не в
   одной строке с точкой, ему нужен собственный отступ снизу */
.security-comp__card > h3 {
  margin-bottom: var(--space-s);
}

.security-comp__card > p {
  color: var(--on-dark-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.security-comp__card ul {
  list-style: none;
}

.security-comp__card li {
  color: var(--on-dark-secondary);
  font-size: 15px;
  padding-block: 8px;
  border-top: 1px solid var(--border-dark);
}

.security-comp__card li:first-child {
  border-top: none;
}

.security-comp__card li strong {
  color: var(--on-dark);
  font-weight: 600;
}

@media (max-width: 767px) {
  .security-comp { grid-template-columns: 1fr; }
}

/* ---------- страница «Системы безопасности»: объекты ---------- */
.objects__intro-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  /* было на самом .documents__intro (margin-bottom: var(--space-l)) —
     перенесли на обёртку, раз параграф больше не единственный элемент */
  margin-bottom: var(--space-l);
}

.objects__intro-row .documents__intro {
  /* было none (во всю ширину контейнера) — сузили, чтобы рядом
     поместилась кнопка «Смотреть портфолио» */
  max-width: 760px;
  margin-bottom: 0;
}

.objects__intro-cta {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .objects__intro-row { flex-direction: column; align-items: flex-start; }
  .objects__intro-row .documents__intro { max-width: none; }
}

.objects__grid {
  margin-top: var(--space-l);
}

/* блок «Объекты» (security/automation/electrical/service.html, общий id):
   отступ заголовок→подзаголовок был заметно больше, чем подзаголовок→
   карточки — выравниваем оба до одного меньшего значения явно (margin-top
   у сетки обнулён), а не полагаемся на схлопывание соседних margin */
#objects .section__headrow {
  margin-bottom: var(--space-m);
}

#objects .objects__intro-row {
  margin-bottom: var(--space-m);
}

#objects .objects__grid {
  margin-top: 0;
}

.object-card__thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-s);
  margin-bottom: var(--space-s);
  background:
    linear-gradient(135deg, rgba(47, 185, 232, 0.14), rgba(124, 140, 255, 0.1)),
    var(--bg-panel-light);
  background-size: cover;
  background-position: center;
}

.object-card h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.object-card p {
  color: var(--text-dim);
  font-size: var(--fs-small);
  margin-top: 4px;
}

/* ---------- страница «Системы безопасности»: сервисное обслуживание ---------- */
/* инвертирован — как .feedback (белая карточка), а не тёмная, как раньше;
   текст слева, сетка логотипов справа (аналог .feedback__inner) */
.security-service {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: var(--space-l);
  background: var(--bg-card);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(32px, 5vw, 72px);
}

.security-service__text > .pill {
  margin-bottom: var(--space-m);
}

.security-service h2 {
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  max-width: 26ch;
  margin-bottom: var(--space-s);
}

.security-service p {
  color: var(--text-secondary);
  max-width: 48ch;
  margin-bottom: var(--space-m);
}

.security-service__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-s);
  row-gap: 32px;
}

.security-service__logos img {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-s);
}

@media (max-width: 1024px) {
  .security-service { grid-template-columns: 1fr; }
  .security-service__logos { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
  .security-service__logos { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- юридические страницы (политика конфиденциальности и т.п.) ---------- */
.legal {
  /* клиренс под фиксированный header теперь даёт .page-logo-anchor
     (76px) перед этой секцией — здесь только обычный отступ секции */
  padding-top: var(--space-m);
  padding-bottom: var(--space-xl);
  background: var(--bg-page);
  min-height: 100vh;
}

.legal__container {
  max-width: 920px;
}

.legal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

/* на документах и портфолио отступ до заголовка меньше (-40%+),
   чем на privacy-policy.html, где .legal__top не переопределяется */
.documents .legal__top,
.portfolio .legal__top {
  margin-bottom: calc(var(--space-l) * 0.6);
}

.legal__back {
  display: inline-block;
  color: var(--text-secondary);
  font-size: 15px; /* чуть крупнее var(--fs-small) = 13px */
  transition: color var(--transition);
}

.legal__back:hover {
  color: var(--text-primary);
}

.legal h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-top: var(--space-s);
}

.legal__updated {
  color: var(--text-dim);
  font-size: var(--fs-small);
  margin-top: var(--space-m);
  margin-bottom: var(--space-xl);
}

.legal h2 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}

.legal p {
  color: var(--text-secondary);
  margin-bottom: var(--space-s);
}

.legal ul {
  list-style: disc;
  padding-left: 1.3em;
  color: var(--text-secondary);
  margin-bottom: var(--space-s);
}

.legal li + li {
  margin-top: 6px;
}

.legal strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* .legal__back объявлен раньше .legal a в каскаде — без этой правки
   более позднее общее подчёркивание переопределило бы её text-decoration:none */
.legal__back {
  text-decoration: none;
}

/* ---------- footer ---------- */
.footer {
  padding-block: var(--space-xl);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-m);
  row-gap: var(--space-s);
  align-items: start;
}

/* верхняя строка: лого / название организации / email — начинаются
   на одной высоте (строка 1 грида) */
.footer__col--logo { grid-column: 1; grid-row: 1 / span 2; }
.footer__addr--org { grid-column: 2; grid-row: 1; }
.footer__email { grid-column: 3; grid-row: 1; justify-self: end; }

/* нижняя строка: адрес и «Политика конфиденциальности» на одном уровне */
.footer__addr--city { grid-column: 2; grid-row: 2; }
.footer__policy { grid-column: 3; grid-row: 2; justify-self: end; }

.footer__addr {
  color: var(--text-secondary);
  font-size: 14px;
}

/* line-height: 1 — у email при крупном шрифте (clamp до 32px) даже
   небольшой множитель (1.1) даёт заметный «воздух» над буквами, из-за
   которого верх текста визуально съезжает ниже верха лого/org-строки,
   хотя сами CSS-боксы уже выровнены по grid-строке */
.footer__addr--org,
.footer__email {
  line-height: 1;
}

.footer__email {
  display: block;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: -0.01em;
  text-align: right;
  /* ручная оптическая коррекция: даже при line-height:1 крупный шрифт
     сохраняет built-in отступ над засечками (ascent-метрика шрифта) —
     подвинуть ещё выше, если понадобится, можно увеличив это значение */
  margin-top: -6px;
  transition: color var(--transition);
}

.footer__email:hover { color: var(--text-primary); }

.footer__policy {
  display: inline-block;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Адаптив: tablet 768–1024
   ============================================================ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .cases { grid-template-columns: 1fr; }
  .cases__feature-wrap { position: static; }
  .cases__feature { min-height: 320px; }

  .focus__aside { flex-direction: column; align-items: flex-start; }
  .focus__aside p { max-width: none; }

  .principle[data-principle="2"],
  .principle[data-principle="3"],
  .principle[data-principle="4"] { margin-top: clamp(110px, 15vh, 180px); }

  .numbers { grid-template-columns: repeat(2, 1fr); }

  /* планшет: жёсткая 2-строчная раскладка тесновата — сбрасываем явные
     grid-column/row, элементы идут в порядке DOM (лого, орг., город,
     email, политика), выравнивание по левому краю */
  .footer__inner { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .footer__col--logo,
  .footer__addr--org,
  .footer__addr--city,
  .footer__email,
  .footer__policy {
    grid-column: auto;
    grid-row: auto;
  }
  .footer__email,
  .footer__policy { justify-self: start; text-align: left; }

  .header__contact { display: none; } /* контакт остаётся пунктом меню */
}

/* ============================================================
   Адаптив: mobile до 767
   ============================================================ */
@media (max-width: 767px) {
  .grid--4, .grid--3 { grid-template-columns: 1fr; }

  /* на узком экране логотип в углу спорит с pill-меню — прячем,
     имя компании остаётся в самом pill */
  .hero__logo,
  .corner-logo { display: none; }

  .section__headrow {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .hero__content h1 { margin-bottom: 48px; }

  .partners__inner { flex-direction: column; align-items: flex-start; gap: var(--space-s); }
  .partners__label { flex: none; }
  .partners .marquee { width: 100%; }

  /* на узких экранах аккордеон не работает (нет hover) — колонка,
     панели во всю ширину, описания видны всегда */
  .focus__panels { flex-direction: column; }

  /* mobile: лесенка не нужна — карточки колонкой */
  .principle { width: 100%; }
  .principle[data-principle="1"],
  .principle[data-principle="2"],
  .principle[data-principle="3"],
  .principle[data-principle="4"] { margin-left: 0; margin-top: var(--space-l); }
  .principle[data-principle="1"] { margin-top: 0; }

  .numbers { grid-template-columns: 1fr; }
  .numbers__feature { min-height: 300px; }

  .footer__inner { grid-template-columns: 1fr; }
}