/* ============================================================
   Сайт ООО «ГТК», Красноярск
   Файл: style.css — всё оформление сайта.

   Разделы файла:
     0. Шрифты сайта (файлы в папке fonts/)
     1. Базовый сброс
     2. Переменные: цвета, шрифты (светлая и тёмная тема)
     3. Общие правила и кнопки
     4. Шапка
     5. Первый экран
     6. Подбор по модели
     7. Направления
     8. Бронза и таблица марок
     9. Что указать в заявке
    10. Заявка
    11. Контакты и подвал
    12. Служебное
    13. Условия работы
    14. Страницы групп: разделы машин, схемы, фото
    15. Фирменные элементы страниц групп: шапка с полосами,
        жёлтая полоса заявки, изделия, этапы заказа
    16. Контактные данные в заявке
    17. Тёмная графитовая гамма сайта
    18. Поиск в шапке и кнопка «Наверх»
    19. 3D-модели оборудования
    20. Выбор деталей в 3D, разборка, подписи
    21. Конструктор втулки (bronza.html)
    22. 3D-витрина на первом экране главной

   Как поменять цвета: правьте значения в разделе 2,
   они автоматически применятся ко всему сайту.
   ============================================================ */


/* ------------------------------------------------------------
   0. ШРИФТЫ САЙТА
   Все шрифты лежат на самом сайте, в папке fonts/ — без загрузки
   со сторонних серверов (Google Fonts не используется).
   Файлы урезаны до латиницы и кириллицы — так они легче.

   Lozung Caps Black — «лозунговый» шрифт только из прописных букв:
                       главные заголовки страниц и разделов (h1, h2)
   Russo One         — подзаголовки, коды направлений (ДСО, БУР…),
                       модели машин, телефоны, надписи на кнопках-метках
   Russo One         — также основной текст: описания, подписи, меню, формы
   Montserrat        — запасной шрифт: из него берутся знаки, которых нет
                       в Russo One и Lozung (стрелки →, «ёлочки», №).
                       Два начертания: Medium (500) и Bold (700)

   У Lozung и Russo One одно начертание. Диапазон font-weight 100 900
   говорит браузеру использовать его при любой жирности
   и не «дорисовывать» ложный полужирный.
   font-display: swap — текст виден сразу, шрифт подменяется по загрузке.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Lozung Caps";
  src: url("fonts/lozung-caps-black.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Russo One";
  src: url("fonts/russo-one.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-500.woff") format("woff");
  font-weight: 100 599;          /* обычный текст — Medium */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-700.woff") format("woff");
  font-weight: 600 900;          /* полужирный и жирный — Bold */
  font-style: normal;
  font-display: swap;
}


/* ------------------------------------------------------------
   1. БАЗОВЫЙ СБРОС — убираем различия между браузерами
   ------------------------------------------------------------ */

/* Размер блока считается вместе с отступами и рамкой */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%; /* iPhone не увеличивает шрифт сам */
  scroll-behavior: smooth;        /* плавная прокрутка к разделам */
  scroll-padding-top: 76px;       /* раздел не прячется под прилипшей шапкой */
}

body {
  margin: 0;
}

img {
  max-width: 100%;
}

/* Элемент с атрибутом hidden всегда скрыт */
[hidden] {
  display: none !important;
}

/* Если в системе включено «уменьшить движение» — без анимаций */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}


/* ------------------------------------------------------------
   2. ПЕРЕМЕННЫЕ
   Раскладка: светлая шапка, тёмный графитовый первый экран
   с композицией из полос логотипа, светлые рабочие разделы, тёмные контакты.
   Акцент один — фирменный жёлтый из логотипа.
   ------------------------------------------------------------ */

/* Светлая тема (по умолчанию) */
:root {
  /* Основные цвета */
  --bg: #ECEDEB;          /* фон страницы — светлый «каменный» серый */
  --surface: #FFFFFF;     /* белые панели и карточки */
  --ink: #191D21;         /* основной текст */
  --muted: #5A6168;       /* второстепенный текст */
  --line: #D1D4D5;        /* тонкие линии и рамки */
  --brand: #FFB000;       /* фирменный жёлтый из логотипа: заливки, кнопки */
  --accent: #8F5E00;      /* тёмный янтарный: текст и рамки на светлом фоне
                             (жёлтый текст на белом плохо читается) */
  --brand-tint: #FFF1CC;  /* бледно-жёлтый: выбранные элементы */
  --on-brand: #15191D;    /* текст на жёлтых кнопках */
  --danger: #B3261E;      /* ошибки в полях формы */

  /* Тёмные полосы (первый экран, контакты) — тёмные в обеих темах */
  --graphite: #22282E;
  --graphite-2: #2D343B;
  --on-dark: #EDEFF0;
  --on-dark-muted: #A9B0B6;

  /* Тёмные полосы на главной картинке (от светлой к тёмной) */
  --rock-1: #59626A;
  --rock-2: #4C555D;
  --rock-3: #424A51;
  --rock-4: #384046;
  --rock-5: #2F363C;

  /* Шрифты (раздел 0): после основного — запасные на случай, если он не загрузился.
     Montserrat стоит запасным и у акцентных шрифтов: в них нет некоторых
     знаков (стрелки →, «ёлочек», №) — эти знаки берутся из Montserrat */
  --f-display: "Lozung Caps", "Russo One", "Montserrat", Arial, sans-serif; /* h1, h2 */
  --f-head: "Russo One", "Montserrat", Arial, sans-serif;                   /* h3, подзаголовки */
  --f-text: "Russo One", "Montserrat", "Segoe UI", Roboto, Arial, sans-serif; /* текст, описания, подписи */
  --f-mono: "Russo One", "Montserrat", Arial, sans-serif;                   /* модели, коды, телефоны */

  /* Максимальная ширина содержимого */
  --maxw: 1200px;
}

/* Тёмная тема — включается сама, если она выбрана на устройстве */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121518;
    --surface: #1A1E22;
    --ink: #E5E7E8;
    --muted: #9AA1A7;
    --line: #2C3237;
    --brand: #FFB000;
    --accent: #FFB000;     /* на тёмном фоне жёлтый читается хорошо */
    --brand-tint: #33290F;
    --on-brand: #15191D;
    --danger: #FF8A80;
    --graphite: #0C0F11;
    --graphite-2: #171B1F;
    --on-dark: #E5E7E8;
    --on-dark-muted: #99A0A6;
    --rock-1: #3E464C;
    --rock-2: #353C42;
    --rock-3: #2D3338;
    --rock-4: #262B30;
    --rock-5: #1F2428;
    color-scheme: dark; /* тёмные полосы прокрутки и поля ввода */
  }
}

/* Принудительная тёмная тема: data-theme="dark" на теге <html> */
:root[data-theme="dark"] {
  --bg: #121518;
  --surface: #1A1E22;
  --ink: #E5E7E8;
  --muted: #9AA1A7;
  --line: #2C3237;
  --brand: #FFB000;
  --accent: #FFB000;     /* на тёмном фоне жёлтый читается хорошо */
  --brand-tint: #33290F;
  --on-brand: #15191D;
  --danger: #FF8A80;
  --graphite: #0C0F11;
  --graphite-2: #171B1F;
  --on-dark: #E5E7E8;
  --on-dark-muted: #99A0A6;
  --rock-1: #3E464C;
  --rock-2: #353C42;
  --rock-3: #2D3338;
  --rock-4: #262B30;
  --rock-5: #1F2428;
  color-scheme: dark;
}


/* ------------------------------------------------------------
   3. ОБЩИЕ ПРАВИЛА И КНОПКИ
   ------------------------------------------------------------ */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.55;
}

/* Контейнер: ограничивает ширину и держит отступы от краёв
   (не меньше 16px; на iPhone с вырезом экрана — больше) */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Заголовки: h1 и h2 — лозунговым шрифтом (только прописные),
   h3 — Russo One */
h1,
h2,
h3 {
  font-family: var(--f-head);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance; /* ровнее разбивает строки заголовка */
}

h1,
h2 {
  font-family: var(--f-display);
  line-height: 1.05;
  letter-spacing: .01em;
}

/* Цифры одинаковой ширины — модели и телефоны в столбик выглядят ровно */
body {
  font-variant-numeric: tabular-nums;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

/* Кнопки и поля используют шрифт страницы, а не системный */
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Заметная рамка при навигации с клавиатуры (Tab) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Заголовок раздела с пояснением */
.sec-title {
  margin-bottom: 28px;
}

.sec-title h2 {
  font-size: clamp(24px, 3.2vw, 38px);
}

.sec-title p {
  margin-top: 10px;
  color: var(--muted);
  max-width: 60ch; /* удобная длина строки */
}

/* Общая кнопка */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

/* Главная кнопка — фирменная жёлтая */
.btn-main {
  background: var(--brand);
  color: var(--on-brand);
}
.btn-main:hover {
  filter: brightness(1.08);
}

/* Кнопка с рамкой */
.btn-line {
  border-color: var(--ink);
}
.btn-line:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Тихая кнопка без рамки (например, «Очистить») */
.btn-ghost {
  color: var(--muted);
  padding-inline: 8px;
}
.btn-ghost:hover {
  color: var(--ink);
}

/* Кнопка на тёмном фоне */
.btn-light {
  border-color: var(--on-dark);
  color: var(--on-dark);
}
.btn-light:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Короткое сообщение после действия («Скопировано» и т.п.) */
.note {
  font-size: 14px;
  color: var(--muted);
  min-height: 1.4em;
}


/* ------------------------------------------------------------
   4. ШАПКА
   ------------------------------------------------------------ */

/* Закрашивает полоску под вырезом экрана iPhone цветом шапки */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--surface);
}

/* Шапка прилипает к верху при прокрутке */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 8;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* Строка шапки: логотип — меню — телефоны — заявка */
.top-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 12px;
}

/* Логотип */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Логотип — векторный рисунок (SVG) прямо в index.html.
   Тёмные части рисуются цветом текста (currentColor),
   поэтому в тёмной теме они автоматически становятся светлыми,
   а жёлтая полоса остаётся фирменного цвета */
.logo .logo-svg {
  display: block;
  height: 34px;
  width: auto;
  color: var(--ink);
}

/* Подпись рядом с логотипом */
.logo-sub {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 12px;
}

/* Меню */
.menu {
  display: flex;
  gap: 22px;
  margin-left: auto;
}

.menu a {
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
}

.menu a:hover {
  color: var(--accent);
}

/* Телефоны в шапке — моноширинным шрифтом, столбиком */
.top-phones {
  display: flex;
  flex-direction: column;
  font-family: var(--f-mono);
  font-size: 13.5px;
  line-height: 1.35;
}

.top-phones a {
  text-decoration: none;
}

/* Кнопка «Заявка» со счётчиком */
.req-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  border-radius: 2px;
}

.req-pill b {
  font-family: var(--f-mono);
  font-weight: 500;
  background: var(--brand);
  color: var(--on-brand);
  padding: 0 7px;
  border-radius: 2px;
}

/* Ноутбук: прячем подпись у логотипа, чтобы поместилось меню */
@media (max-width: 1240px) {
  .logo-sub {
    display: none;
  }
}

/* Планшет и телефон: меню переносится во вторую строку шапки
   и прокручивается пальцем вбок, если не помещается */
@media (max-width: 1060px) {
  html {
    scroll-padding-top: 110px; /* шапка стала выше */
  }
  .top-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .menu {
    order: 5;           /* после логотипа, телефонов и кнопки */
    width: 100%;
    margin-left: 0;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .menu a {
    white-space: nowrap;
  }
  .top-phones {
    margin-left: auto;
  }
}

/* Телефон: прячем телефоны из шапки (они есть в контактах) */
@media (max-width: 640px) {
  .logo-sub {
    display: none; /* остаётся только логотип */
  }
  .top-phones {
    display: none;
  }
  .top-row {
    justify-content: space-between;
  }
}


/* ------------------------------------------------------------
   5. ПЕРВЫЙ ЭКРАН — тёмная графитовая полоса
   ------------------------------------------------------------ */

.hero {
  background: var(--graphite);
  color: var(--on-dark);
}

/* Две колонки: текст и рисунок */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  padding-block: 60px;
}

/* min-width: 0 не даёт длинному тексту растянуть колонку */
.hero-grid > * {
  min-width: 0;
}

/* Строчка над заголовком */
.kicker {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Главный заголовок: размер плавно меняется от 32 до 56px */
.hero h1 {
  margin-top: 16px;
  /* Lozung Caps широкий, поэтому размер скромнее, чем у обычного шрифта */
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 700;
}

.hero-lede {
  margin-top: 18px;
  font-size: 18px;
  color: var(--on-dark-muted);
  max-width: 50ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Кнопка с рамкой на тёмном фоне */
.hero .btn-line {
  border-color: var(--on-dark);
}
.hero .btn-line:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Главная картинка: композиция из полос логотипа (SVG в index.html) */
.hero-art {
  margin: 0;
}

.hero-art svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: hidden;
}

/* Код направления на полосе (ДСО, ОБГ…) */
.art-code {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 500;
  dominant-baseline: middle;
}

/* Перечень оборудования на полосе */
.art-desc {
  font-family: var(--f-text);
  font-size: 12.5px;
  dominant-baseline: middle;
}

/* Мелкие технические подписи: «НАПРАВЛЕНИЯ», «25°», город */
.art-note {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  fill: var(--on-dark-muted);
}

/* Пунктирная направляющая вдоль скоса полос */
.art-guide {
  stroke: var(--brand);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: .7;
}

/* Вертикаль и дуга отметки угла */
.art-ref,
.art-arc {
  stroke: var(--on-dark-muted);
  stroke-width: 1;
  fill: none;
}
.art-ref {
  stroke-dasharray: 2 3;
}

/* Полосы — ссылки: при наведении становятся чуть светлее */
.art-bar polygon {
  transition: filter .15s;
}
.art-bar:hover polygon {
  filter: brightness(1.15);
}

/* Появление полос при загрузке: выезжают слева одна за другой.
   Полосы видны с самого начала, анимация только сдвигает их */
.art-bar {
  animation: bar-in .7s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i) * 90ms); /* --i — номер полосы из index.html */
}

@keyframes bar-in {
  from { transform: translateX(-16px); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .art-bar {
    animation: none;
  }
}

/* Планшет: колонки друг под другом */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 40px;
  }
}



/* ------------------------------------------------------------
   6. ПОДБОР ПО МОДЕЛИ
   ------------------------------------------------------------ */

.match {
  padding-block: 64px;
}

/* Поле поиска */
.search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--ink);
}

/* Цветная рамка, когда поле в фокусе */
.search:focus-within {
  border-color: var(--accent);
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 16px 18px;
  font-size: 18px;
  outline: none;
}

/* Счётчик найденного справа в поле */
.search-count {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--muted);
  padding-right: 16px;
  white-space: nowrap;
}

/* Кнопки быстрых запросов */
.quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.quick button {
  font-family: var(--f-mono);
  font-size: 13.5px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  border-radius: 2px;
}

.quick button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Сетка карточек машин: две колонки */
.machines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

/* Карточка машины */
.machine {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Верх карточки: код направления и название */
.machine-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.machine-code {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid currentColor;
  padding: 1px 6px;
  flex-shrink: 0;
}

.machine h3 {
  font-size: 20px;
}

/* Выбор модели в карточке */
.machine-model {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}

.machine-model select {
  font-family: var(--f-mono);
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 2px;
  max-width: 100%;
}

/* Детали: кнопки-«чипсы» */
.parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.parts button {
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  border-radius: 2px;
  text-align: left;
}

/* Значок «+» перед названием детали */
.parts button::before {
  content: "+ ";
  font-family: var(--f-mono);
  color: var(--accent);
}

.parts button:hover {
  border-color: var(--accent);
}

/* Деталь уже в заявке — жёлтая подсветка и галочка */
.parts button[aria-pressed="true"] {
  background: var(--brand-tint);
  border-color: var(--accent);
}

.parts button[aria-pressed="true"]::before {
  content: "✓ ";
}

/* Подсветка совпадения с поиском */
mark {
  background: var(--brand-tint);
  color: inherit;
  padding: 0 2px;
}

/* Сообщение «ничего не найдено» */
.not-found {
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  max-width: 70ch;
}

/* Планшет и телефон: карточки в одну колонку */
@media (max-width: 820px) {
  .machines {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   7. НАПРАВЛЕНИЯ — строки, разделённые линиями
   ------------------------------------------------------------ */

.lines {
  padding-block: 64px;
  background: var(--surface);
  border-block: 1px solid var(--line);
}

/* Строка: код | название | описание */
.line {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: baseline;
  padding-block: 22px;
  border-top: 1px solid var(--line);
}

.line:last-child {
  border-bottom: 1px solid var(--line);
}

.line-code {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--accent);
}

.line h3 {
  font-size: 22px;
}

.line p {
  color: var(--muted);
}

/* Телефон: код и название в строку, описание ниже */
@media (max-width: 760px) {
  .line {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px 16px;
  }
  .line p {
    grid-column: 2;
  }
}

/* Ссылка «… подробнее →» на страницу группы */
.more {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.more:hover {
  text-decoration: underline;
}

/* В строке направления ссылка встаёт отдельной строкой */
.line .more {
  display: block;
}


/* ------------------------------------------------------------
   8. БРОНЗА И ТАБЛИЦА МАРОК
   ------------------------------------------------------------ */

.bronze {
  padding-block: 64px;
}

/* Две колонки: текст и таблица */
.bronze-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.bronze-grid > * {
  min-width: 0;
}

/* Список того, что принимаем для изготовления */
.accepts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.accepts li {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.accepts b {
  color: var(--accent);
  margin-right: 6px;
}

/* Обёртка таблицы: горизонтальная прокрутка на узком экране */
.table-scroll {
  overflow-x: auto;
}

/* Таблица марок бронзы */
.grades {
  width: 100%;
  min-width: 520px; /* уже не сжимается — прокручивается */
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 15px;
}

.grades caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
}

.grades th,
.grades td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.grades th {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Первая колонка — марка бронзы, моноширинным шрифтом и акцентным цветом */
.grades td:first-child {
  font-family: var(--f-mono);
  color: var(--accent);
  white-space: nowrap;
}

/* Планшет: таблица под текстом */
@media (max-width: 900px) {
  .bronze-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* ------------------------------------------------------------
   9. ЧТО УКАЗАТЬ В ЗАЯВКЕ — сетка пунктов с квадратиками
   ------------------------------------------------------------ */

.checklist {
  padding-block: 64px;
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.check-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
}

/* Пункт с квадратиком-«галочкой» слева */
.check-grid li {
  position: relative;
  padding-left: 30px;
}

.check-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent);
}

.check-grid b {
  display: block;
  font-weight: 600;
}

.check-grid span {
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 860px) {
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .check-grid { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   10. ЗАЯВКА — лист с позициями
   ------------------------------------------------------------ */

.request {
  padding-block: 64px;
}

/* Две колонки: пояснение и лист */
.request-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.request-grid > * {
  min-width: 0;
}

/* Форма «Своя позиция» */
.own label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.own-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.own-row input {
  flex: 1 1 220px;
  min-width: 0;
}

/* Общий вид полей ввода в заявке */
.own input,
.sheet-fields input,
.sheet-fields textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 2px;
}

.own input:focus,
.sheet-fields input:focus,
.sheet-fields textarea:focus {
  border-color: var(--accent);
  outline: none;
}

/* Сам лист заявки */
.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  padding: 20px;
}

/* Шапка таблицы листа */
.sheet-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* Нумерованный список позиций */
.sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pos; /* счётчик для номеров позиций */
}

/* Строка позиции: номер | название | количество | удалить */
.sheet-list li {
  counter-increment: pos;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 76px 32px;
  gap: 8px;
  align-items: center;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

/* Номер позиции */
.sheet-list li::before {
  content: counter(pos) ".";
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--muted);
}

.sheet-list .pos-name {
  overflow-wrap: anywhere;
}

/* Поле количества */
.sheet-list input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--f-mono);
  text-align: right;
  border-radius: 2px;
}

/* Кнопка удаления позиции (×) */
.sheet-list .pos-del {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.sheet-list .pos-del:hover {
  color: var(--accent);
}

/* Текст для пустой заявки */
.sheet-empty {
  padding-block: 18px;
  color: var(--muted);
}

/* Поля «Предприятие» и «Комментарий» */
.sheet-fields {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}

.sheet-fields label {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
}

.sheet-fields textarea {
  resize: vertical;
}

/* Кнопки листа */
.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.sheet .note {
  margin-top: 10px;
}

@media (max-width: 900px) {
  .request-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Узкий телефон: поле количества чуть уже */
@media (max-width: 420px) {
  .sheet-list li {
    grid-template-columns: 24px minmax(0, 1fr) 60px 28px;
  }
}


/* ------------------------------------------------------------
   11. КОНТАКТЫ И ПОДВАЛ
   ------------------------------------------------------------ */

.contacts {
  background: var(--graphite);
  color: var(--on-dark);
}

/* Три зоны: заголовок, список контактов, кнопка */
.contacts-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px 48px;
  padding-block: 64px;
}

.contacts-grid > * {
  min-width: 0;
}

.contacts h2 {
  font-size: clamp(24px, 3.2vw, 38px);
}

.contacts-lede {
  margin-top: 12px;
  color: var(--on-dark-muted);
  max-width: 44ch;
}

/* Список контактов: подпись слева, значение справа */
.contact-list {
  margin: 0;
  display: grid;
}

.contact-list div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--graphite-2);
}

.contact-list dt {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.contact-list dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: clamp(18px, 2.2vw, 24px);
  overflow-wrap: anywhere;
}

.contact-list a {
  text-decoration: none;
}

.contact-list a:hover {
  color: var(--brand);
}

/* Кнопка «Скопировать контакты» — под списком, во второй колонке */
.contacts-copy {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.contacts .note {
  color: var(--on-dark-muted);
}

@media (max-width: 860px) {
  .contacts-grid {
    grid-template-columns: 1fr;
    padding-block: 48px;
  }
  .contacts-copy {
    grid-column: 1;
  }
}

@media (max-width: 420px) {
  .contact-list div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Подвал */
.foot {
  background: var(--graphite);
  color: var(--on-dark-muted);
  font-size: 14px;
  border-top: 1px solid var(--graphite-2);
}

.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 20px;
}

/* Логотип и копирайт в подвале */
.foot-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.foot-logo {
  height: 24px;
  width: auto;
  color: var(--on-dark); /* тёмные части логотипа становятся светлыми */
}


/* ------------------------------------------------------------
   12. СЛУЖЕБНОЕ
   ------------------------------------------------------------ */

/* Текст только для экранных дикторов (невидим на экране) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Скрытое поле для копирования текста в старых браузерах */
.copy-buf {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
}


/* ------------------------------------------------------------
   13. УСЛОВИЯ РАБОТЫ (главная)
   ------------------------------------------------------------ */

.terms {
  padding-block: 64px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.term-list {
  margin: 0;
}

/* Строка условия: название слева, описание справа */
.term {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 8px 32px;
  padding-block: 18px;
  border-top: 1px solid var(--line);
}

.term:last-child {
  border-bottom: 1px solid var(--line);
}

.term dt {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 20px;
}

.term dd {
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

/* Телефон: название над описанием */
@media (max-width: 700px) {
  .term {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   14. СТРАНИЦЫ ГРУПП (drobilki, obogashchenie, burenie, bronza)
   ------------------------------------------------------------ */

/* Пункт меню текущей страницы */
.menu a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* Тёмная шапка страницы */
.page-hero {
  background: var(--graphite);
  color: var(--on-dark);
}

.page-hero .wrap {
  padding-block: 40px 48px;
}

/* «Хлебные крошки»: Главная → Дробильное оборудование */
.crumbs {
  font-size: 14px;
  color: var(--on-dark-muted);
}

.crumbs a {
  color: var(--on-dark-muted);
}

.crumbs a:hover {
  color: var(--brand);
}

.page-hero h1 {
  margin-top: 22px;
  font-size: clamp(24px, 3.5vw, 44px);
  font-weight: 700;
}

.page-hero .hero-lede {
  max-width: 62ch;
}

/* Быстрые переходы к типам дробилок */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.jump a {
  font-family: var(--f-mono);
  font-size: 13.5px;
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid var(--graphite-2);
  border-radius: 2px;
}

.jump a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Блок «Стадии дробления» */
.stages {
  padding-block: 56px;
}

/* Раздел одного типа дробилок */
.ctype {
  padding-block: 56px;
  border-top: 1px solid var(--line);
}

/* Чередование фона, чтобы разделы читались отдельно */
.ctype:nth-of-type(even) {
  background: var(--surface);
}

/* Две колонки: описание и карточка запчастей */
.ctype-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Заголовок раздела с кодом типа */
.ctype-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.ctype-head h2 {
  font-size: clamp(21px, 2.7vw, 30px);
}

.ctype p {
  margin-top: 14px;
  color: var(--muted);
  max-width: 62ch;
}

/* Краткие сведения: стадия, материалы, маркировка */
.ctype-facts {
  margin: 20px 0 0;
  display: grid;
  gap: 0;
}

.ctype-facts div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding-block: 9px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.ctype-facts dt {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}

.ctype-facts dd {
  margin: 0;
}

/* Схема принципа работы */
.scheme {
  margin: 22px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  max-width: 340px;
}

.ctype:nth-of-type(even) .scheme {
  background: var(--surface);
}

.scheme svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Линии схемы — цветом текста, подвижные части — акцентом */
.scheme .s-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.scheme .s-move {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.scheme .s-fill {
  fill: var(--muted);
  opacity: .35;
}
.scheme .s-dash {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.scheme text {
  font-family: var(--f-mono);
  font-size: 10px;
  fill: var(--muted);
}

.scheme figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* Таблица моделей внутри раздела */
.ctype .table-scroll {
  margin-top: 22px;
}

/* Карточка запчастей на странице дробилок — одна в колонке */
.machines.single {
  grid-template-columns: 1fr;
  margin-top: 0;
}

/* Итоговый блок «Не нашли модель?» */
.cta-band {
  padding-block: 56px;
  border-top: 1px solid var(--line);
}

.cta-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
}

.cta-box h2 {
  font-size: clamp(22px, 2.6vw, 30px);
}

.cta-box p {
  margin-top: 8px;
  color: var(--muted);
  max-width: 60ch;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Планшет и телефон: колонки раздела друг под другом */
@media (max-width: 900px) {
  .ctype-grid {
    grid-template-columns: minmax(0, 1fr); /* minmax не даёт таблице растянуть страницу */
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .ctype-facts div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Правая колонка раздела дробилки: фото над карточками запчастей */
.ctype-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* Фото дробилки: одинаковые пропорции 4:3, лишнее обрезается по краям */
.ctype-photo {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.ctype-photo img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


/* ------------------------------------------------------------
   15. ФИРМЕННЫЕ ЭЛЕМЕНТЫ СТРАНИЦ ГРУПП
   ------------------------------------------------------------ */

/* Жёлтая скошенная полоска над заголовками разделов —
   повторяет верхнюю полосу логотипа */
.sec-title h2::before,
.ctype-head::before {
  content: "";
  display: block;
  width: 46px;
  height: 8px;
  margin-bottom: 14px;
  background: var(--brand);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); /* скос справа */
}

/* У заголовка раздела машины полоска встаёт отдельной строкой:
   сама она 46px, а отступ справа занимает остаток строки */
.ctype-head::before {
  flex: 0 0 46px;
  margin-right: calc(100% - 46px);
  margin-bottom: 0;
}

/* Шапка страницы группы: текст слева, полосы-навигация справа */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 48px;
  align-items: center;
}

/* На страницах групп полосы чуть компактнее */
.page-hero .hero-art {
  max-width: 440px;
  justify-self: end;
  width: 100%;
}

/* Текущая группа — жёлтая полоса; остальные — графитовые ссылки на другие страницы */
.art-bar[aria-current="page"] {
  pointer-events: none; /* на текущую страницу ссылка не нужна */
}

@media (max-width: 900px) {
  .page-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .page-hero .hero-art {
    justify-self: start;
    max-width: 380px;
  }
}

/* Жёлтая полоса с призывом к заявке (внизу страниц групп).
   Тёмный текст на жёлтом — высокий контраст в обеих темах */
.cta-band--brand {
  background: var(--brand);
  color: var(--on-brand);
  border-top: 0;
}

.cta-band--brand .cta-box {
  background: transparent;
  border: 0;
  padding: 0;
}

.cta-band--brand .cta-box h2::before {
  display: none; /* жёлтая полоска на жёлтом фоне не нужна */
}

.cta-band--brand .cta-box p {
  color: var(--on-brand);
  opacity: .82;
}

/* Тёмная кнопка на жёлтом фоне */
.btn-dark {
  background: var(--on-brand);
  color: var(--brand);
}
.btn-dark:hover {
  filter: brightness(1.25);
}

/* Кнопка с рамкой на жёлтом фоне */
.cta-band--brand .btn-line {
  border-color: var(--on-brand);
  color: var(--on-brand);
}
.cta-band--brand .btn-line:hover {
  background: var(--on-brand);
  color: var(--brand);
}

/* Сетка изделий (страница бронзы) */
.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.product svg {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
}

.product h3 {
  font-size: 20px;
}

.product p {
  color: var(--muted);
  font-size: 15px;
}

/* Кнопка «В заявку» у изделия */
.add-item {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
}
.add-item::before {
  content: "+ ";
  font-family: var(--f-mono);
  color: var(--accent);
}
.add-item:hover {
  border-color: var(--accent);
}
.add-item[aria-pressed="true"] {
  background: var(--brand-tint);
  border-color: var(--accent);
}
.add-item[aria-pressed="true"]::before {
  content: "✓ ";
}

@media (max-width: 860px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .products { grid-template-columns: minmax(0, 1fr); }
}

/* Этапы заказа — настоящая последовательность, поэтому с номерами */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  counter-reset: step;
  border-top: 2px solid var(--ink);
}

/* Цепочка из пяти этапов (страница обогащения) */
.steps.steps-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.steps li {
  counter-increment: step;
  padding: 18px 20px 4px 0;
  min-width: 0;
}

/* Номер этапа */
.steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 8px;
}

.steps b {
  display: block;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 18px;
}

.steps span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 860px) {
  .steps,
  .steps.steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .steps,
  .steps.steps-5 { grid-template-columns: minmax(0, 1fr); }
}

/* Обычный раздел страницы группы (на светлом фоне) */
.block {
  padding-block: 56px;
  border-top: 1px solid var(--line);
}

.block--white {
  background: var(--surface);
}


/* ------------------------------------------------------------
   16. КОНТАКТНЫЕ ДАННЫЕ В ЗАЯВКЕ
   ------------------------------------------------------------ */

/* Подзаголовок «Контактные данные» */
.fields-title {
  font-weight: 600;
  margin-top: 4px;
}

/* Звёздочка у обязательных полей */
.req-mark {
  color: var(--danger);
  font-weight: 600;
}

/* Текст ошибки под полем (пустой — не занимает места) */
.field-err {
  color: var(--danger);
  font-size: 13.5px;
}
.field-err:empty {
  display: none;
}

/* Поле с ошибкой — красная рамка */
.sheet-fields input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* Пояснение под полями */
.fields-hint {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--muted);
}


/* ------------------------------------------------------------
   17. ТЁМНАЯ ГРАФИТОВАЯ ГАММА САЙТА
   Включается классом class="theme-graphite" на теге <html>
   (сейчас включена на всех страницах: index, drobilki,
   obogashchenie, burenie, bronza). Чтобы вернуть странице светлый фон,
   уберите этот класс из её тега <html>.
   Действует всегда, независимо от светлой или тёмной темы устройства.
   Блок стоит в конце файла, поэтому перекрывает значения выше.
   Цвета подобраны с запасом по контрасту: основной текст ~13:1,
   второстепенный ~7:1, жёлтый акцент ~9:1 к фону.
   ------------------------------------------------------------ */
:root.theme-graphite {
  --bg: #1B2025;          /* фон страницы — графит, близкий к тёмным полосам логотипа */
  --surface: #232930;     /* карточки, шапка и чередующиеся разделы — чуть светлее */
  --ink: #ECEEF0;         /* основной текст — почти белый */
  --muted: #A7AFB6;       /* второстепенный текст */
  --line: #353C43;        /* линии и рамки */
  --brand: #FFB000;       /* фирменный жёлтый */
  --accent: #FFB000;      /* на тёмном фоне жёлтый текст хорошо читается */
  --brand-tint: #3A3020;  /* подсветка выбранных деталей */
  --on-brand: #15191D;    /* тёмный текст на жёлтом */
  --danger: #FF8A80;

  /* Шапка страницы и контакты — темнее основного фона */
  --graphite: #121518;
  --graphite-2: #2A3037;
  --on-dark: #ECEEF0;
  --on-dark-muted: #A7AFB6;

  /* Графитовые полосы на картинке в шапке — заметно светлее фона шапки */
  --rock-1: #4E575F;
  --rock-2: #3E464D;
  --rock-3: #323940;

  color-scheme: dark; /* тёмные полосы прокрутки и поля ввода */
}

/* Кнопка «Заявка» в шапке на тёмном фоне — жёлтая, чтобы не терялась */
.theme-graphite .req-pill {
  background: var(--brand);
  color: var(--on-brand);
}
.theme-graphite .req-pill b {
  background: var(--on-brand);
  color: var(--brand);
}

/* Разделы направлений: чередование двух оттенков графита */
.theme-graphite .ctype:nth-of-type(even),
.theme-graphite .block--white {
  background: var(--surface);
}

/* Подложка схем и фото — на тон темнее карточек, чтобы рисунок читался */
.theme-graphite .scheme,
.theme-graphite .ctype:nth-of-type(even) .scheme {
  background: var(--bg);
}
.theme-graphite .ctype:nth-of-type(even) .machine,
.theme-graphite .ctype:nth-of-type(even) .grades,
.theme-graphite .block--white .grades {
  background: var(--bg);
}

/* Главная: поле поиска на тёмном фоне — светлая рамка, жёлтая при вводе */
.theme-graphite .search {
  border-color: var(--line);
}
.theme-graphite .search:focus-within {
  border-color: var(--brand);
}

/* Главная: разделы «Направления», «Условия», «Что указать» чуть светлее фона,
   карточки на них — на тон темнее, чтобы не сливались */
.theme-graphite .lines .line,
.theme-graphite .terms .term {
  border-color: var(--line);
}
.theme-graphite .bronze .accepts li {
  background: var(--surface);
}


/* ------------------------------------------------------------
   18. ПОИСК В ШАПКЕ И КНОПКА «НАВЕРХ»
   ------------------------------------------------------------ */

/* Поле поиска в шапке */
.top-search {
  display: flex;
  align-items: center;
  width: 210px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 2px;
}

/* Жёлтая рамка, когда в поле ставят курсор */
.top-search:focus-within {
  border-color: var(--brand);
}

.top-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 7px 10px;
  font-size: 14px;
  outline: none;
}

.top-search button {
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  padding: 0 10px;
  align-self: stretch;
  color: var(--muted);
  cursor: pointer;
}

.top-search button:hover {
  color: var(--brand);
}

/* Кнопка-лупа для телефона — на компьютере скрыта */
.search-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 38px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
}

.search-toggle[aria-expanded="true"] {
  border-color: var(--brand);
  color: var(--brand);
}

/* Ноутбук: поле поиска уже */
@media (max-width: 1240px) {
  .top-search {
    width: 170px;
  }
}

/* Небольшой ноутбук: телефоны из шапки убираем, чтобы всё поместилось
   (номера остаются в разделе «Контакты») */
@media (max-width: 1180px) {
  .top-phones {
    display: none;
  }
}

/* Планшет и телефон: поиск открывается кнопкой-лупой отдельной строкой */
@media (max-width: 1060px) {
  .top-phones {
    display: flex;      /* меню ушло во вторую строку — место для телефонов есть */
  }
  .search-toggle {
    display: grid;
  }
  .top-search {
    display: none;      /* скрыт, пока не нажали лупу */
    order: 4;           /* строка под логотипом, над меню */
    width: 100%;
  }
  .top-search.open {
    display: flex;
  }
  .top-search input {
    padding-block: 10px;
    font-size: 16px;    /* 16px — чтобы iPhone не увеличивал страницу при вводе */
  }
}

@media (max-width: 640px) {
  .top-phones {
    display: none;
  }
  .search-toggle {
    margin-left: auto;  /* лупа и «Заявка» прижаты вправо */
  }
}

/* Кнопка «Наверх»: появляется при прокрутке, стоит в правом нижнем углу.
   Отступы учитывают вырез экрана и полосу жестов на телефоне */
.to-top {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 7;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  text-decoration: none;
  transition: transform .15s;
}

.to-top:hover {
  transform: translateY(-2px);
}

/* С поиском в шапке места меньше: подпись у логотипа убираем,
   промежутки между пунктами делаем чуть плотнее */
.logo-sub {
  display: none;
}
.top-row {
  gap: 20px;
}
.menu {
  gap: 18px;
}
@media (min-width: 1061px) {
  .top-search {
    width: 190px; /* на компьютере; на телефоне поле во всю ширину */
  }
}


/* ------------------------------------------------------------
   19. 3D-МОДЕЛИ ОБОРУДОВАНИЯ (рисует models3d.js)
   ------------------------------------------------------------ */

/* Рамка модели: фон — графит с мягким светлым пятном в центре */
.model3d {
  margin: 0;
  border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 38%, var(--surface), var(--graphite));
}

/* Сцена: пропорции 4:3. touch-action: pan-y — палец по вертикали
   прокручивает страницу, по горизонтали вращает модель */
.model3d-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
}

.model3d-stage.dragging {
  cursor: grabbing;
}

.model3d-stage:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.model3d-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Подпись под моделью */
.model3d figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Значок «вращение» перед подсказкой (подпись под моделью) */
.model3d figcaption .hint::before {
  content: "⟲ ";
  color: var(--brand);
}


/* ------------------------------------------------------------
   20. ВЫБОР ДЕТАЛЕЙ В 3D, РАЗБОРКА, ПОДПИСИ
   ------------------------------------------------------------ */

/* Курсор-«рука» над деталью, которую можно выбрать */
.model3d-stage.on-part {
  cursor: pointer;
}

/* Слой подписей поверх модели */
.m3d-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Подпись детали: тёмная плашка с жёлтой рамкой */
.m3d-label {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--f-text);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  padding: 4px 8px;
  border: 1px solid var(--brand);
  border-radius: 2px;
  background: rgba(18, 21, 24, .88);
  color: var(--ink);
}

/* При разборке подписи можно нажимать — деталь уйдёт в заявку */
.m3d-label.interactive {
  pointer-events: auto;
  cursor: pointer;
}
.m3d-label.interactive:hover {
  background: var(--brand);
  color: var(--on-brand);
}

/* Деталь уже в заявке — галочка и жёлтая плашка */
.m3d-label.in {
  background: var(--brand);
  color: var(--on-brand);
}
.m3d-label.in::after {
  content: " ✓";
}

/* Строка под моделью: кнопка «Разобрать» и подсказка */
.m3d-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.m3d-btn {
  font-size: 14px;
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid var(--brand);
  border-radius: 2px;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
}
.m3d-btn:hover,
.m3d-btn[aria-pressed="true"] {
  background: var(--brand);
  color: var(--on-brand);
}

.m3d-status {
  font-size: 13.5px;
  color: var(--muted);
  min-width: 0;
}


/* ------------------------------------------------------------
   21. КОНСТРУКТОР ВТУЛКИ (bronza.html)
   ------------------------------------------------------------ */

.bush-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: start;
}

.bush-form {
  display: grid;
  gap: 14px;
}

/* Поля по два в ряд */
.bush-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.bush-row {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.bush-row label {
  font-size: 14px;
  color: var(--muted);
}

.bush-row input,
.bush-row select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  font-family: var(--f-mono);
  font-size: 15px;
}

.bush-row input:focus,
.bush-row select:focus {
  border-color: var(--brand);
  outline: none;
}

/* Итог: размеры и масса */
.bush-summary {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.bush-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

.bush-summary span {
  color: var(--muted);
  font-size: 14px;
}

.bush-summary b {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--accent);
}

#bushMsg a {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 900px) {
  .bush-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .bush-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Подписи в разобранном виде: под каждой ячейкой, текст переносится */
.m3d-label.grid {
  white-space: normal;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  padding: 3px 7px;
}

/* На телефоне при разборке сцена выше, чтобы деталям хватило места */
.model3d-stage.tall {
  aspect-ratio: 3 / 4;
}



/* ------------------------------------------------------------
   22. 3D-ВИТРИНА НА ПЕРВОМ ЭКРАНЕ ГЛАВНОЙ
   Модель направления и четыре кнопки-полосы под ней
   ------------------------------------------------------------ */

.hero-show {
  display: grid;
  gap: 10px;
}

/* Рамка модели на тёмном фоне первого экрана */
.hero-model {
  border-color: var(--graphite-2);
  background: radial-gradient(110% 85% at 50% 40%, var(--rock-2), var(--graphite));
}

/* Плавная смена модели: картинка гаснет и проявляется */
.hero-model .model3d-stage canvas {
  transition: opacity .25s ease;
}
.hero-model .model3d-stage.swapping canvas {
  opacity: 0;
}

.hero-model figcaption {
  border-top-color: var(--graphite-2);
  color: var(--on-dark-muted);
  align-items: baseline;
}

.hero-model figcaption a {
  color: var(--brand);
  text-decoration: none;
}
.hero-model figcaption a:hover {
  text-decoration: underline;
}

/* Кнопки направлений — скошенные полосы, как в логотипе (25°) */
.hero-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.hero-tab {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: 8px 22px 8px 12px;
  border: 0;
  /* Правый край скошен под углом знака ГТК */
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  background: var(--rock-2);
  color: var(--on-dark);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.hero-tab b {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
}

.hero-tab span {
  font-size: 12px;
  line-height: 1.3;
  color: var(--on-dark-muted);
}

.hero-tab:hover {
  background: var(--rock-1);
}

/* Выбранное направление — фирменный жёлтый */
.hero-tab[aria-selected="true"] {
  background: var(--brand);
  color: var(--on-brand);
}
.hero-tab[aria-selected="true"] span {
  color: var(--on-brand);
}

/* Рамка фокуса внутри полосы: снаружи её обрезал бы скос */
.hero-tab:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: -5px;
}
.hero-tab[aria-selected="true"]:focus-visible {
  outline-color: var(--on-brand);
}

/* Телефон: кнопки в два ряда */
@media (max-width: 560px) {
  .hero-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-tab {
    min-height: 52px;
  }
}


/* Примечание о товарных знаках под таблицей моделей (импортные дробилки) */
.brand-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}


/* Галочка согласия на обработку персональных данных (форма заявки) */
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--brand);
}
.consent a {
  color: var(--accent);
}

/* Поле-ловушка для спам-ботов: убрано с экрана, но есть в разметке */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Кнопка во время отправки */
#reqSend[disabled] {
  opacity: .6;
  cursor: progress;
}

/* Страницы политики и согласия: удобная ширина строки, отступы */
.legal-sec {
  padding-block: 40px 64px;
}
.legal {
  max-width: 820px;
}
.legal h2 {
  margin: 30px 0 10px;
  font-size: clamp(18px, 2.2vw, 24px);
}
.legal p,
.legal li {
  line-height: 1.6;
  color: var(--ink);
}
.legal p + p {
  margin-top: 10px;
}
.legal ul {
  margin: 8px 0 0;
  padding-left: 22px;
}
.legal a {
  color: var(--accent);
}