/* ============================================================
   Главная (/)
   Переписан 27.08.2026 под рендер KabEm Home Web v2. Шапка сайта в
   переделку не входила — прямое условие заказчицы. Что изменилось
   против прежней версии: цифры переехали в первый экран плитками на
   фото (белая полоса из четырёх текстовых фактов убрана), «Почему
   КабЭм» стало четырьмя столпами с номерами вместо шести карточек с
   иконками, продукция — крупной карточкой кабеля и списком строк
   вместо bento из пяти плиток, «Как работаем» — тёмной секцией,
   отрасли — строкой чипов (риски и примеры сняты 31.08 и 16.09.2026),
   перед финалом — «Полезные материалы».

   Ритм: зазор секций даёт общее правило (margin-top 15px), собственные
   padding-block у секций обнулены — иначе складывается втрое.
   Специфичность против общего ритма 09-design-system — повтором
   класса .home, как на «Отраслях» и «О компании».
   ============================================================ */

/* ===== Ритм страницы ===== */

body:not(.admin-body).pages.home.home.home.home.home main > section {
  padding-block: 0;
  scroll-margin-top: 96px;
}

/* Над надзаголовком каждой секции на 10px больше воздуха, чем в общем
   ритме 15 (просьба 28.08.2026). Финальную полосу не трогаем — она
   осталась на общем зазоре. */

/* Зазор всех секций задаёт общий токен --section-gap; свои margin-top у
   «Направлений» и тройного блока и хвостовой padding-bottom у последней
   секции удалены 31.08.2026 — ритм один на весь сайт */

/* ===== 01. Первый экран =====

   Фото уходит под шапку: главную открывает сплошной кадр, а меню лежит
   поверх него прозрачной полосой (просьба 27.08.2026 — «как было, с
   перекрытием верхнего меню»). Сама шапка не переделывается: меняются
   только фон и цвета поверх фото, состав и размеры кнопок прежние. */

body:not(.admin-body):not(.admin-body):not(.admin-body).pages.home main.hm { margin-top: -87px; }

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) {
  background: transparent;
  /* Границы у прозрачной шапки нет: линия шла через весь кадр и читалась
     как посторонняя (просьба 27.08.2026) */
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .brand-logo {
  filter: brightness(0) invert(1);
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .nav-link {
  color: rgba(255, 255, 255, 0.86);
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) a.header-phone,
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) a.header-phone span.header-phone-text,
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) a.header-phone > span,
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) a.header-phone span,
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) a.header-phone strong {
  /* Сам номер лежит в <strong> со своим цветом — без него цифры
     оставались тёмными на кадре (27.08.2026) */
  color: #ffffff;
}

/* Трубка рядом с номером — маска по фону, поэтому красится background */
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .header-phone .header-phone-ico,
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .header-phone span.header-phone-ico {
  background: #ffffff;
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .nav-link.is-active {
  color: var(--color-bg);
}

/* Значки набраны маской по фону, а не обводкой, поэтому белыми их делает
   background, а не stroke (просьба 27.08.2026 — «поиск и телефон белым») */
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .header-search-ico {
  background: var(--color-bg);
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .header-phone-icon {
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--color-bg);
}

body:not(.admin-body):not(.admin-body):not(.admin-body).pages.home .hm-hero {
  /* Секции первого экрана общий светлый градиент не нужен: он просвечивал
     по низу кадра (просьба 27.08.2026) */
  background: none;
}

body:not(.admin-body).pages.home .hm-hero {
  position: relative;
  min-height: 328px;
  display: flex;
  align-items: center;
}

body:not(.admin-body).pages.home .hm-hero .hero-banner-img { will-change: transform; }

/* Затемнение одно: общий градиент .page-hero--photo::after накладывался на
   собственный overlay Главной, и низ кадра выглядел размытым переходом
   (просьба 27.08.2026) */
body:not(.admin-body).pages.home .hm-hero::after { display: none; }

/* Функциональный overlay: слева плотный для текста, справа почти нет */
body:not(.admin-body).pages.home .hm-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 25, 51, 0.94) 0%, rgba(5, 25, 51, 0.82) 38%, rgba(5, 25, 51, 0.38) 68%, rgba(5, 25, 51, 0.08) 100%);
  pointer-events: none;
}

body:not(.admin-body).pages.home .hm-hero .page-hero__content {
  position: relative;
  z-index: 1;
  padding-block: 84px 24px;
}

/* Надзаголовок и полоска стоят вплотную: между ними 10px, а не общие 24px
   от надзаголовков сайта (просьба 19.08.2026 — полоску поднять выше).
   Класс повторён, чтобы перебить общее правило первого экрана из 09. */
body:not(.admin-body).pages.home.home.home.home.home .hm-hero .hm-hero-eyebrow {
  margin-bottom: 10px;
  color: #BFDCF6;
}

body:not(.admin-body).pages.home .hm-hero-cable {
  display: block;
  width: 96px;
  height: 3px;
  margin: 0 0 20px;
  border-radius: 3px;
  background: linear-gradient(90deg, #4FA3E8, #BFDCF6);
  transform-origin: left center;
}

body:not(.admin-body).pages.home .hm-hero h1,
body:not(.admin-body).pages.home .hm-hero h1 * { color: var(--color-bg); }
/* Кегль H1 на Главной ужат с 42 до 36, чтобы первый экран уложился в 500px
   (просьба 27.08.2026). Пять :not — вес выше таблицы заголовков из 09. */
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .hm-hero h1 {
  max-width: 760px;
  margin-bottom: 16px;
  font-size: 36px;
  line-height: 1.14;
}

body:not(.admin-body).pages.home .hm-hero .lead {
  color: rgba(255, 255, 255, 0.87);
  /* Лид в две строки вместо трёх: с тремя первый экран не влезал в 500px */
  max-width: 900px;
  margin-bottom: 0;
}

body:not(.admin-body).pages.home .hm-hero-actions { margin-top: 20px; }

/* Цифры плитками на фото: полупрозрачное стекло по рендеру v2 */
body:not(.admin-body).pages.home .hm-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

body:not(.admin-body).pages.home .hm-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Наведения у плиток с цифрами нет: они ничего не открывают, а подсветка
   читалась как обещание перехода (просьба 31.08.2026) */

body:not(.admin-body).pages.home .hm-hero-stat-value {
  color: var(--color-bg);
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.024em;
  font-variant-numeric: tabular-nums;
}

body:not(.admin-body).pages.home .hm-hero-stat-text {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.4;
}

/* Заголовки секций — общий кегль сайта 24/1.25 (разбор Главной 26.08.2026:
   34 было самым крупным отклонением по сайту). В рендере Home Web v2 стояло
   34 и 30 — отступление снято. */
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home main.hm h2 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: var(--ls-h2);
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .hm-why-card h3 {
  font-size: 17px;
}

/* ===== 02. Почему КабЭм ===== */

/* Белая секция начинается сразу под кадром: общий зазор между секциями
   оставлял над ней полосу фона страницы (просьба 27.08.2026) */
body:not(.admin-body).pages.home.home.home.home.home .hm-why {
  /* Никакой полосы фона страницы между кадром и белой секцией:
     секция начинается сразу под фотографией (просьба 28.08.2026) */
  margin-top: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

body:not(.admin-body).pages.home.home.home.home.home .hm-why > .wrap:first-child { padding-top: 25px; }
body:not(.admin-body).pages.home.home.home.home.home .hm-why > .wrap:last-child { padding-bottom: 25px; }

body:not(.admin-body).pages.home .hm-why-head { margin-bottom: 26px; }
body:not(.admin-body).pages.home .hm-why-head .kicker { margin-bottom: 10px; }
body:not(.admin-body).pages.home .hm-why-head h2 { margin: 0 0 16px; }

/* Под заголовком одна строка вместо двух абзацев (31.08.2026) */
body:not(.admin-body).pages.home .hm-why-lead {
  margin: 0;
}

body:not(.admin-body).pages.home .hm-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.admin-body).pages.home .hm-why-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 18px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-soft);
  transition: background 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  body:not(.admin-body).pages.home .hm-why-card:hover {
    border-color: #9BB8D5;
    background: #EAF2FB;
  }
}

body:not(.admin-body).pages.home .hm-why-num {
  color: var(--color-accent-text, #1870BD);
  /* 13/18 — как у надзаголовков секций: дробный кегль 12,5 был
     единственным в этой роли (проверка выравнивания 26.08.2026) */
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 18px;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

body:not(.admin-body).pages.home .hm-why-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  text-wrap: balance;
}

body:not(.admin-body).pages.home .hm-why-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ===== 03. Что поставляем ===== */

/* Линия под шапкой секции убрана, отступы поджаты: блок «Что поставляем»
   просили ниже (просьба 27.08.2026) */
body:not(.admin-body).pages.home .hm-products-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 14px;
  padding-bottom: 0;
  border-bottom: 0;
}

body:not(.admin-body).pages.home .hm-products-head-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body:not(.admin-body).pages.home .hm-products-head-copy .kicker { margin: 0; }
body:not(.admin-body).pages.home .hm-products-head-copy h2 { margin: 0; }

body:not(.admin-body).pages.home .hm-products-all {
  flex: none;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  gap: 10px;
}

body:not(.admin-body).pages.home .hm-products-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  /* Колонки заканчиваются на одной линии: карточка кабеля была выше
     строк направлений на 73px (разбор 28.08.2026) */
  align-items: stretch;
}

/* Карточка кабеля: фото во всю плитку, текст поверх затемнения */
body:not(.admin-body).pages.home .hm-cable-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #10233C;
}

body:not(.admin-body).pages.home .hm-cable-media {
  position: absolute;
  inset: 0;
}

body:not(.admin-body).pages.home .hm-cable-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease;
}

body:not(.admin-body).pages.home .hm-cable-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 31, 56, 0.15) 0%, rgba(10, 31, 56, 0.86) 68%, rgba(10, 31, 56, 0.96) 100%);
}

@media (hover: hover) {
  body:not(.admin-body).pages.home .hm-cable-card:hover .hm-cable-img {
    opacity: 0.82;
    transform: scale(1.05);
  }
}

body:not(.admin-body).pages.home .hm-cable-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
}

body:not(.admin-body).pages.home .hm-cable-kicker {
  margin: 0;
  color: #BFDCF6;
}

body:not(.admin-body).pages.home .hm-cable-body h3 {
  margin: 0;
  color: var(--color-bg);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

body:not(.admin-body).pages.home .hm-cable-text {
  margin: 0;
  max-width: 420px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.5;
}

body:not(.admin-body).pages.home .hm-cable-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  color: var(--color-bg);
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

body:not(.admin-body).pages.home .hm-cable-link .contact-link-arrow { background: currentColor; }

/* Остальные направления — строками с миниатюрой */
body:not(.admin-body).pages.home .hm-directions-list {
  display: flex;
  flex-direction: column;
}

body:not(.admin-body).pages.home .hm-direction-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 18px;
  gap: 18px;
  align-items: center;
  /* Ряд ниже: раздел «Что поставляем» занимал слишком много места
     (просьба 28.08.2026). Отступы симметричны — было 12/14 */
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  color: inherit;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
  body:not(.admin-body).pages.home .hm-direction-row:hover {
    border-color: var(--color-border);
    background: var(--color-bg);
    transform: translateX(4px);
  }
}

body:not(.admin-body).pages.home .hm-direction-media {
  width: 72px;
  height: 52px;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--color-border);
}

body:not(.admin-body).pages.home .hm-direction-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:not(.admin-body).pages.home .hm-direction-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body:not(.admin-body).pages.home .hm-direction-title {
  color: var(--color-text);
  font-size: 17px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.006em;
}

body:not(.admin-body).pages.home .hm-direction-text {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Ссылка внутри примечания жила своим интерлиньяжем 24 против 25.6 у
   соседних ссылок — наследует строку абзаца (проверка 26.08.2026) */
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .hm-directions-note .text-link-inline {
  font-size: inherit;
  line-height: inherit;
}

body:not(.admin-body).pages.home .hm-directions-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ===== 04. Как работаем ===== */

body:not(.admin-body).pages.home.home.home.home.home .hm-process {
  background: #10233C;
}

body:not(.admin-body).pages.home.home.home.home.home .hm-process > .wrap:first-child { padding-top: 25px; }
body:not(.admin-body).pages.home.home.home.home.home .hm-process > .wrap:last-child { padding-bottom: 40px; }

body:not(.admin-body).pages.home .hm-process-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 26px;
}

body:not(.admin-body).pages.home .hm-process-head-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body:not(.admin-body).pages.home .hm-process-head-copy .kicker {
  margin: 0;
  color: #BFDCF6;
}

body:not(.admin-body).pages.home .hm-process-head-copy h2 {
  margin: 0;
  color: var(--color-bg);
}

body:not(.admin-body).pages.home .hm-process-link {
  flex: none;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #BFDCF6;
}

body:not(.admin-body).pages.home .hm-process-link .contact-link-arrow { background: currentColor; }

body:not(.admin-body).pages.home .hm-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

body:not(.admin-body).pages.home .hm-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

/* У первого шага левой линии нет: она читалась бы как край секции */
body:not(.admin-body).pages.home .hm-step:first-child {
  padding-left: 0;
  border-left-color: transparent;
}

body:not(.admin-body).pages.home .hm-step-num {
  color: rgba(191, 220, 246, 0.5);
  font-size: 34px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

body:not(.admin-body).pages.home .hm-step h3 {
  margin: 0;
  color: var(--color-bg);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.006em;
}

body:not(.admin-body).pages.home .hm-step p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
}

/* ===== 05. Отрасли (риски сняты 16.09.2026) ===== */

/* Отрасли идут отдельной строкой во всю ширину секции: в половинной
   колонке шесть чипов вставали в три ряда (просьба 27.08.2026) */
body:not(.admin-body).pages.home .hm-sectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body:not(.admin-body).pages.home .hm-sectors .kicker,
body:not(.admin-body).pages.home .hm-sector-chips {
  margin: 0;
}

body:not(.admin-body).pages.home .hm-sectors .kicker { margin: 0; }

body:not(.admin-body).pages.home .hm-sector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body:not(.admin-body).pages.home .hm-client-sector {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  padding: 11px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.2;
  transition: border-color 0.22s ease, background 0.22s ease;
}

@media (hover: hover) {
  body:not(.admin-body).pages.home .hm-client-sector:hover {
    border-color: #9BB8D5;
    background: #EAF2FB;
  }
}

/* ===== 06. Полезные материалы =====
   Карточки статей — общий компонент .art-card (09-design-system), здесь
   только шапка раздела: как у «Что поставляем», ссылка справа */

body:not(.admin-body).pages.home .hm-materials-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 14px;
}

body:not(.admin-body).pages.home .hm-materials-head-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body:not(.admin-body).pages.home .hm-materials-head-copy .kicker,
body:not(.admin-body).pages.home .hm-materials-head-copy h2 {
  margin: 0;
}

body:not(.admin-body).pages.home .hm-materials-all {
  flex: none;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== 07. Финальный призыв ===== */

/* Контакты внутри карточки — часть мобильного рендера: на вебе телефон и
   почта стоят в шапке и подвале, дублировать их в призыве незачем */
/* ============================================================
   Планшет и узкий ноутбук
   ============================================================ */

@media (max-width: 1199px) {
  body:not(.admin-body).pages.home .hm-products-grid { gap: 28px; }
  body:not(.admin-body).pages.home .hm-step { padding-inline: 18px; }
}

@media (max-width: 1023px) {
  body:not(.admin-body).pages.home .hm-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.admin-body).pages.home .hm-products-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  body:not(.admin-body).pages.home .hm-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.admin-body).pages.home .hm-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* В двух столбцах левая линия не нужна первому шагу каждого ряда */
  body:not(.admin-body).pages.home .hm-step:nth-child(odd) {
    padding-left: 0;
    border-left-color: transparent;
  }

  body:not(.admin-body).pages.home .hm-cable-card { min-height: 320px; }

}

/* ============================================================
   Телефон
   ============================================================ */

@media (max-width: 767px) {
  /* ===== Мобильный рендер KabEm Home Mobile (27.08.2026) ===== */

  /* Первый экран: кадр на всю высоту, шапка поверх него */
  body:not(.admin-body).pages.home .hm-hero { min-height: 640px; }

  body:not(.admin-body).pages.home .hm-hero .page-hero__content {
    padding-block: 90px 24px;
  }

  body:not(.admin-body).pages.home .hm-hero h1 { margin-bottom: 14px; }

  /* Кнопки первого экрана — колонкой во всю ширину */
  body:not(.admin-body).pages.home .hm-hero-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body:not(.admin-body).pages.home .hm-hero-actions .btn { width: 100%; }

  /* Цифры — сеткой 2×2 и на самых узких экранах тоже: по одной в строке
     плитки выглядят списком, а не сводкой */
  body:not(.admin-body).pages.home .hm-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
  }

  body:not(.admin-body).pages.home .hm-hero-stat {
    gap: 4px;
    padding: 14px;
  }

  body:not(.admin-body).pages.home .hm-hero-stat-value { font-size: 22px; }
  body:not(.admin-body).pages.home .hm-hero-stat-text { font-size: 12.5px; }

  /* «Почему КабЭм»: заголовок, лид и четыре карточки колонкой, ссылка внизу */
  body:not(.admin-body).pages.home.home.home.home.home .hm-why > .wrap:first-child { padding-top: 25px; }
body:not(.admin-body).pages.home.home.home.home.home .hm-why > .wrap:last-child { padding-bottom: 25px; }
  
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home main.hm h2,

  body:not(.admin-body).pages.home .hm-why-head { margin-bottom: 16px; }

  body:not(.admin-body).pages.home .hm-why-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body:not(.admin-body).pages.home .hm-why-card {
    gap: 5px;
    padding: 14px 14px 13px;
  }

  body:not(.admin-body).pages.home .hm-why-card p { font-size: 14px; }

  /* Продукция: карточка кабеля ниже, направления — белыми карточками */
  body:not(.admin-body).pages.home .hm-products-head,
  body:not(.admin-body).pages.home .hm-process-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  body:not(.admin-body).pages.home .hm-cable-card { min-height: 260px; }
  body:not(.admin-body).pages.home .hm-cable-body { padding: 18px; gap: 8px; }
  body:not(.admin-body).pages.home .hm-cable-body h3 { font-size: 24px; }
  body:not(.admin-body).pages.home .hm-cable-text { font-size: 14px; }
  body:not(.admin-body).pages.home .hm-directions-list { gap: 8px; }

  body:not(.admin-body).pages.home .hm-direction-row {
    grid-template-columns: 74px minmax(0, 1fr) 16px;
    gap: 14px;
    padding: 12px;
    border-color: var(--color-border);
    background: var(--color-bg);
  }

  body:not(.admin-body).pages.home .hm-direction-media {
    width: 74px;
    height: 56px;
  }

  body:not(.admin-body).pages.home .hm-direction-title { font-size: 15px; }
  body:not(.admin-body).pages.home .hm-direction-text { font-size: 13px; }
  body:not(.admin-body).pages.home .hm-directions-note { font-size: 13px; }

  /* Как работаем: шаги строками «номер — текст» */
  body:not(.admin-body).pages.home.home.home.home.home .hm-process > .wrap:first-child { padding-top: 25px; }
  body:not(.admin-body).pages.home.home.home.home.home .hm-process > .wrap:last-child { padding-bottom: 40px; }

  body:not(.admin-body).pages.home .hm-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body:not(.admin-body).pages.home .hm-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0 0;
    border-left: 0;
  }

  body:not(.admin-body).pages.home .hm-step-num {
    grid-row: span 2;
    font-size: 22px;
    line-height: 1.2;
  }

  body:not(.admin-body).pages.home .hm-step h3 { font-size: 16px; }
  body:not(.admin-body).pages.home .hm-step p { font-size: 14px; }

  /* Отрасли — по две в ряд */
  body:not(.admin-body).pages.home .hm-sector-chips {
    display: grid;
    /* Одна колонка: в две длинные названия ломались на три строки и
       плашки выходили разной высоты (просьба 28.08.2026) */
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  body:not(.admin-body).pages.home .hm-client-sector {
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.3;
  }

  /* Шапка столбиком, отступ под заголовком даёт общее правило main.hm h2 */
  body:not(.admin-body).pages.home .hm-materials-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 0;
  }

  /* Финальная карточка: кнопка во всю ширину, ниже телефон и часы */
}

/* Кнопка шапки поверх кадра: белая с тёмной подписью, как на проде
   (просьба 27.08.2026). Состав и размеры кнопки прежние — меняются
   только цвета на прозрачной шапке. */
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) a.header-cta {
  border-color: #ffffff;
  background: #ffffff;
  color: #10233C;
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) a.header-cta span {
  color: #10233C;
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) a.header-cta .btn-arrow {
  background: #10233C;
}

@media (hover: hover) {
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) a.header-cta:hover {
    border-color: #EAF2FB;
    background: #EAF2FB;
  }
}

/* Единое правило мобильного H1 (разбор 26.08.2026): 26px, интерлиньяж 1.16,
   разрядка -0.03em. При прежних кеглях слово «электрооборудование» рвалось
   пополам на Главной, а «Каталог» разрывал слово при 320. */
@media (max-width: 430px) {
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .hm-hero h1 {
    font-size: 26px;
    line-height: 1.16;
    letter-spacing: -0.03em;
  }
}

/* ===== Меню на прозрачной шапке Главной =====
   Геометрия пунктов теперь общая (19-breadcrumbs), Главной остаются только
   цвета: заливки при наведении нет, вместо неё тонкая белая линия под
   словом и белый текст; активный пункт — белое подчёркивание 2px
   (просьба 28.08.2026) */

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-link,
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-link .nav-link-label {
  color: rgba(255, 255, 255, 0.86) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-link.is-active,
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-link.is-active .nav-link-label {
  color: #ffffff !important;
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-link::before {
  background: #ffffff !important;
}

@media (hover: hover) {
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-link:hover,
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-dropdown--hover:hover > .nav-link {
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    transform: none;
  }

  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-link:hover .nav-link-label {
    color: #ffffff !important;
  }

  /* Тонкая линия вместо плашки: у активного пункта она вдвое толще */
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-link:hover::before {
    height: 1px !important;
    opacity: 1;
  }
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header:not(.is-scrolled) .primary-nav .nav-link.is-active::before {
  height: 2px !important;
  opacity: 1;
}

/* Прокрученная шапка на Главной и «Отраслях» — обычная белая: пункты
   тёмные, активный ещё темнее, подчёркивание тёмное. Правило явное:
   белые цвета прозрачной шапки иначе дотягивались до белого фона. */
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header.is-scrolled .primary-nav .nav-link,
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header.is-scrolled .primary-nav .nav-link .nav-link-label {
  color: #5C6E84 !important;
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header.is-scrolled .primary-nav .nav-link.is-active,
body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header.is-scrolled .primary-nav .nav-link.is-active .nav-link-label {
  color: #10233C !important;
}

body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header.is-scrolled .primary-nav .nav-link::before {
  background: #10233C !important;
}

@media (hover: hover) {
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header.is-scrolled .primary-nav .nav-link:hover,
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .site-header.is-scrolled .primary-nav .nav-link:hover .nav-link-label {
    color: #10233C !important;
  }
}

/* ============================================================
   Главная по рендеру KabEm Home Web v2 (28.08.2026).
   Первый экран и шапка не трогаются — правила ниже касаются только
   блоков под кадром. Дробные кегли рендера (16,5 · 14,5 · 12,5 · 11,5)
   округлены до шкалы: разница незаметна, а правил в проекте меньше.
   ============================================================ */

/* Рендер сделан для 1440: под 768 действует мобильный макет Home Mobile,
   его метрики не трогаем */
@media (min-width: 768px) {
  /* ===== Почему КабЭм ===== */

  /* Крупная шкала Главной узаконена 28.08.2026: H1 36, H2 34 у крупных
     секций и 28 у пары «Риски / Примеры». К общей таблице 32/24 не
     приводить — решение владельца, вопрос закрыт. */
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home main.hm .hm-why h2 {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.022em;
  }

  body:not(.admin-body).pages.home.home.home .hm-why-lead {
    font-size: 16px;
    line-height: 1.6;
  }

  body:not(.admin-body).pages.home.home.home .hm-why-card {
    gap: 7px;
    padding: 18px 18px 16px;
    border: 1px solid var(--color-border);
    background: #F5F9FD;
  }

  body:not(.admin-body).pages.home.home.home .hm-why-card p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* ===== Что поставляем ===== */

  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home main.hm .hm-directions h2,
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home main.hm .hm-process h2,
  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home main.hm .hm-materials h2 {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.022em;
  }

  body:not(.admin-body).pages.home.home.home .hm-products-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
  }

  body:not(.admin-body).pages.home.home.home .hm-cable-card {
    min-height: 344px;
    background: #0A1F38;
  }

  body:not(.admin-body).pages.home.home.home .hm-cable-body {
    gap: 9px;
    padding: 24px;
  }

  body:not(.admin-body).pages.home.home.home .hm-cable-kicker { color: #BFDCF6; }

  body:not(.admin-body).pages.home.home.home .hm-direction-row {
    grid-template-columns: 88px minmax(0, 1fr) 18px;
    gap: 18px;
    padding: 11px 14px;
  }

  body:not(.admin-body).pages.home.home.home .hm-direction-media {
    width: 88px;
    height: 56px;
  }

  body:not(.admin-body).pages.home.home.home .hm-direction-text {
    font-size: 14px;
    line-height: 1.45;
  }

  body:not(.admin-body).pages.home.home.home .hm-direction-row .contact-link-arrow { background: #7FADD8; }

  body:not(.admin-body).pages.home.home.home .hm-directions-note {
    font-size: 14px;
    line-height: 1.5;
  }

  /* ===== Как работаем ===== */

  body:not(.admin-body).pages.home.home.home.home.home.home .hm-process { background: #0A1F38; }

  body:not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body):not(.admin-body).pages.home .hm-process .kicker,
  body:not(.admin-body).pages.home.home.home .hm-process-link { color: #BFDCF6; }

  body:not(.admin-body).pages.home.home.home .hm-step-num { color: rgba(191, 220, 246, 0.55); }

  body:not(.admin-body).pages.home.home.home .hm-step p {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* Телефон в финальной карточке — цель нажатия 44px (прогон мобильной
   версии 26.08.2026: было 316×25) */