/* ============================================================================
   OEM.CENTER — Литьё алюминия под давлением
   Таблица стилей одностраничника.

   СТРУКТУРА ФАЙЛА:
     1. Токены (CSS-переменные): цвета, шрифты, размеры
     2. Сброс и базовые стили
     3. Переиспользуемые элементы (контейнер, заголовок секции, кнопки, ссылки)
     4. Блоки страницы сверху вниз (шапка → hero → 01…09 → футер)

   ПРИНЦИП: все цвета и повторяющиеся размеры вынесены в переменные :root —
   чтобы поменять фирменный цвет или фон, правьте одну строку в блоке токенов.
   ============================================================================ */

/* ============ 1. ТОКЕНЫ ============ */
:root{
  /* Фоны */
  --bg:#14161a;            /* основной фон страницы */
  --bg-alt:#171a1f;        /* фон «через один» блок (чередование) */
  --panel:#1e2228;         /* фон карточек */
  --panel-2:#1a1d22;       /* фон карточек (тёмный вариант) */
  --deep:#101215;          /* фон подвала */
  --marquee-bg:#191c21;    /* фон бегущей строки */
  /* Линии и границы */
  --line:#23272d;          /* разделители секций */
  --line-2:#2b3037;        /* границы карточек */
  --steel:#3a4048;         /* границы «стального» акцента */
  /* Акцент (фирменный оранжевый) */
  --accent:#e8823a;
  --accent-h:#f2974f;      /* оранжевый при наведении */
  /* Текст */
  --text:#f1f0ed;          /* основной текст */
  --muted:#a7acb4;         /* приглушённый текст */
  --muted-2:#969ba3;       /* подписи / метки (контраст ≥4.5:1 к --bg) */
  --muted-3:#c9ccd1;       /* описания в карточках */
  --muted-4:#9ba1a9;       /* подписи под цифрами */
  --dim:#8b9099;           /* копирайт (контраст ≥4.5:1 к --deep) */
  --step-dim:#2f353d;      /* «серые» цифры шагов */
  /* Шрифты — системные, без внешних загрузок.
     Раньше подключались Archivo и IBM Plex Mono с fonts.googleapis.com;
     для российской аудитории этот источник ненадёжен, поэтому шрифты
     берутся из операционной системы: страница рисуется мгновенно и
     не зависит от внешних сервисов. */
  --font-display:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Cascadia Mono','Segoe UI Mono','Roboto Mono',Consolas,'Liberation Mono',monospace;
  /* Размеры сетки */
  --maxw:1280px;                       /* максимальная ширина контента */
  --pad-x:clamp(20px,5vw,64px);        /* горизонтальные поля */
  --sec-h:max(600px, calc(100svh - 260px)); /* высота блока = высоте первого экрана */
  /* Высота липкой шапки: 72px содержимого + 1px нижней границы.
     На это значение смещается прокрутка к якорям, чтобы верхняя граница
     блока вставала ВРОВЕНЬ с нижней линией меню, а не пряталась под ним
     и не провисала ниже. Значение перезаписывается скриптом по факту
     (js/main.js, syncHeaderHeight) — на узких экранах шапка ниже. */
  --header-h:73px;
}

/* ============ 2. СБРОС И БАЗОВЫЕ СТИЛИ ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-h)}
button{font-family:inherit}
input,select,textarea{font-family:inherit}
::selection{background:var(--accent);color:var(--bg)}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}

/* Анимации */
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ccpulse{0%{transform:scale(.55);opacity:.75}100%{transform:scale(1.9);opacity:0}}
/* ---- Системная настройка «уменьшить движение» ----
   Если посетитель отключил анимации в настройках устройства (Android:
   Специальные возможности → Отключить анимацию; iOS: Уменьшение движения;
   некоторые режимы энергосбережения включают это сами) — глушим движение.

   ВНИМАНИЕ ПРИ ОТЛАДКЕ: если бегущая строка «не едет», сначала проверьте
   эту настройку на своём устройстве. Скорее всего дело в ней, а не в коде. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}

  /* ИСКЛЮЧЕНИЕ 1: бегущая строка категорий.
     Работает ВСЕГДА, в том числе при включённой настройке «уменьшить
     движение». Это осознанное решение владельца сайта, а не недосмотр —
     НЕ УДАЛЯЙТЕ, считая ошибкой.
     Учтите при правках: непрерывно ползущий текст — одна из типичных
     причин, по которым эту настройку включают, поэтому лента остаётся
     единственным движущимся элементом, который её игнорирует. */
  .marquee__track{animation-duration:32s!important;animation-iteration-count:infinite!important}

  /* ИСКЛЮЧЕНИЕ 2: кружок загрузки формы. Это не украшение, а сообщение
     «идёт загрузка». Замерший кружок читается как зависшая страница. */
  .ya-form__spinner{animation-duration:.8s!important;animation-iteration-count:infinite!important}
}

/* ============ 3. ПЕРЕИСПОЛЬЗУЕМЫЕ ЭЛЕМЕНТЫ ============ */

/* Контейнер контента */
.container{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--pad-x)}
.container--narrow{max-width:900px}

/* Базовый блок-секция: высота = первому экрану, ссылка «дальше» прижата снизу */
.section{
  min-height:var(--sec-h);
  padding:clamp(40px,5vh,72px) 0;
  position:relative;display:flex;flex-direction:column;
  border-bottom:1px solid var(--line);
}
.section--alt{background:var(--bg-alt)}     /* чередующийся фон */
.section--tight{padding:clamp(28px,3.5vh,48px) 0} /* меньше поля (блок оборудования) */
.section--flush{border-bottom:none}         /* без нижней линии (блок контактов) */

/* Обёртка ссылки «↓ дальше» — идёт сразу под контентом блока */
.section__next{max-width:var(--maxw);width:100%;padding:clamp(28px,4vh,44px) var(--pad-x) 0;margin:0 auto}
.section__next--narrow{max-width:900px}
.next-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.next-link:hover{color:var(--accent)}

/* «Плашка» над заголовком секции: 01 — линия — метка */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow__num{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.eyebrow__line{width:32px;height:1px;background:var(--steel)}
.eyebrow__label{font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;color:var(--muted-2);text-transform:uppercase}

/* Крупный заголовок секции */
.section-title{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5vw,54px);line-height:1.03;letter-spacing:-.02em;text-transform:uppercase;color:var(--text)}
/* Заголовок в одну строку — ТОЛЬКО на широких экранах.
   Без ограничения по ширине nowrap не давал заголовку переноситься,
   он вылезал за правый край и на телефоне появлялась горизонтальная
   прокрутка всей страницы. Ниже 1100px перенос разрешён. */
@media (min-width:1100px){
  .section-title--nowrap{white-space:nowrap}
}
/* Страховка от переполнения длинными словами и адресами */
.section-title,.hero__title{overflow-wrap:break-word}
.section-title--gap{margin-bottom:clamp(28px,3vw,44px)} /* отступ под заголовком (FAQ) */

/* Вводный абзац под заголовком */
.section-lead{margin-top:18px;font-size:16px;color:var(--muted);max-width:60ch;line-height:1.6}
/* Мелкая сноска-примечание */
.note{margin-top:22px;font-size:13.5px;color:var(--muted-2);line-height:1.6;max-width:75ch}

/* Ромбик-маркер (акцент). Модификаторы задают размер */
.diamond{background:var(--accent);transform:rotate(45deg);display:inline-block;flex-shrink:0}
.diamond--7{width:7px;height:7px}
.diamond--8{width:8px;height:8px}
.diamond--9{width:9px;height:9px}
.diamond--11{width:11px;height:11px}

/* Кнопки. Базовый вид + модификаторы цвета и размера */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;border:1px solid transparent;cursor:pointer;text-align:center;white-space:nowrap}
.btn--primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-h);color:var(--bg)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--steel)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--sm{padding:11px 18px;font-size:13px}
.btn--md{padding:12px 20px;font-size:13px}
.btn--lg{padding:17px 32px;font-size:15px}
.btn--block{display:block;width:100%;padding:13px;font-size:13px}

/* ============ 4. ШАПКА (sticky-хедер) ============ */
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(20,22,26,.82);border-bottom:1px solid var(--line)}
.header__inner{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--pad-x);height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:.02em;color:var(--text);text-transform:uppercase;display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo__accent{color:var(--accent)}
.nav{display:flex;gap:clamp(12px,1.8vw,26px);align-items:center;flex-wrap:wrap;justify-content:center}
.nav a{color:var(--muted);font-size:14px;font-weight:500}
.nav a:hover{color:var(--text)}
.header__actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.header__phone{color:var(--text);font-family:var(--font-mono);font-size:14px;font-weight:500;white-space:nowrap}
.header__phone:hover{color:var(--accent)}

/* ============ HERO (первый экран с фоновым видео) ============ */
.hero{position:relative;min-height:var(--sec-h);border-bottom:1px solid var(--line);background:repeating-linear-gradient(135deg,#16191d,#16191d 13px,#1b1e23 13px,#1b1e23 26px);display:flex;align-items:flex-end;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:transparent}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,22,26,.42) 0%,rgba(20,22,26,.6) 55%,rgba(20,22,26,.96) 100%)}
.hero__stat{position:absolute;top:clamp(18px,3vw,32px);right:var(--pad-x);text-align:right;z-index:2}
.hero__stat-num{font-family:var(--font-mono);font-size:clamp(28px,4vw,44px);font-weight:600;color:var(--accent)}
.hero__stat-label{font-size:13px;color:var(--muted)}
.hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:clamp(30px,4vw,52px) var(--pad-x)}
.hero__eyebrow{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.hero__title{margin-top:16px;font-family:var(--font-display);font-weight:900;font-size:clamp(40px,8vw,110px);line-height:.93;letter-spacing:-.03em;text-transform:uppercase;color:var(--text);max-width:16ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:26px}
.hero__scroll{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.hero__scroll:hover{color:var(--accent)}

/* ============ БЕГУЩАЯ СТРОКА (лента категорий) ============ */
.marquee{border-bottom:1px solid var(--line);background:var(--marquee-bg);overflow:hidden;padding:16px 0}
.marquee__track{display:flex;width:max-content;white-space:nowrap;animation:marq 32s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused} /* пауза при наведении */
.marquee__group{display:flex;align-items:center}
.marquee__item{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2.1vw,24px);text-transform:uppercase;color:var(--text);padding:0 26px}

/* ============ ПОЛОСА ПРЕИМУЩЕСТВ (под лентой) ============ */
.highlights{border-bottom:1px solid var(--line);background:var(--bg)}
.highlights__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(28px,3vw,40px) var(--pad-x);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.highlight{display:flex;gap:14px;align-items:flex-start}
.highlight .diamond{margin-top:6px}
.highlight__title{font-weight:700;font-size:16px;color:var(--text)}
.highlight__desc{font-size:13px;color:var(--muted-2);margin-top:3px}

/* ============ БЛОК 01 — ЧТО ОТЛИВАЕМ (плитки с фото) ============ */
.cast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;margin-top:10px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
/* Плитка: фон-картинка задаётся инлайн (background-image в HTML) + зум при наведении */
/* Фото плитки — отдельный тег <img> (а не фон CSS): так изображение
   попадает в поиск по картинкам и получает alt-текст. Зум при наведении
   делает transform:scale — он плавнее, чем пересчёт background-size. */
.cast-card{position:relative;aspect-ratio:1/1;background-color:var(--panel-2);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,2.4vw,30px)}
.cast-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.cast-card:hover .cast-card__img{transform:scale(1.12)}
.cast-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,22,26,.94) 0%,rgba(20,22,26,.55) 42%,rgba(20,22,26,.12) 100%)}
.cast-card__body{position:relative}
.cast-card__num{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.cast-card__title{font-family:var(--font-display);font-weight:700;font-size:21px;text-transform:uppercase;color:var(--text);margin-top:12px}
.cast-card__desc{font-size:13.5px;color:var(--muted-3);margin-top:8px;line-height:1.5}

/* ============ БЛОК 02 — УСЛУГИ (плитки фото + видео при наведении) ============ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:10px}
/* Плитка: фон-картинка инлайн; поверх — видео, всплывающее по наведению (см. js/main.js) */
.svc-card{position:relative;aspect-ratio:4/3;background-color:var(--panel);border:1px solid var(--line-2);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,2.6vw,34px)}
/* Фото плитки — тег <img> ради индексации и alt-текста (см. блок 01) */
.svc-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
/* Видео лежит поверх фото и проявляется при наведении */
.svc-card__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
/* Класс ставится скриптом, если ролика для плитки нет: карточка ведёт себя
   как плитки блока 01 — при наведении просто увеличивается фотография. */
.svc-card--nofilm:hover .svc-card__img{transform:scale(1.09)}
.svc-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,22,26,.94) 0%,rgba(20,22,26,.5) 45%,rgba(20,22,26,.12) 100%);pointer-events:none}
.svc-card__body{position:relative}
.svc-card__num{font-family:var(--font-mono);font-size:13px;color:var(--accent)}
.svc-card__title{font-family:var(--font-display);font-weight:700;font-size:22px;text-transform:uppercase;color:var(--text);margin-top:14px}
.svc-card__desc{font-size:14.5px;color:var(--muted-3);line-height:1.6;margin-top:12px}

/* ============ БЛОК 03 — ПАРК ОБОРУДОВАНИЯ ============ */
.equip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:10px}
.machine{background:var(--panel);border:1px solid var(--line-2);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.machine--flagship{border-color:var(--accent)}       /* выделенная «флагман»-карточка */
.machine__badge{position:absolute;top:16px;right:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--bg);background:var(--accent);padding:4px 9px;border-radius:3px;text-transform:uppercase}
.machine__head{padding:26px 28px;border-bottom:1px solid var(--line-2)}
.machine__head-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase}
.machine__value{font-family:var(--font-display);font-weight:900;font-size:44px;color:var(--text);line-height:1;margin-top:8px}
.machine__value small{font-size:.5em;color:var(--accent)}
.machine__rows{padding:24px 28px;display:flex;flex-direction:column;gap:12px}
.machine__cta{padding:0 28px 24px;margin-top:auto}
/* Строка характеристики «ключ — значение» */
.spec{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.spec__key{color:var(--muted-2)}
.spec__val{font-family:var(--font-mono);color:var(--text)}
.spec__val--accent{color:var(--accent)}
/* Инфо-плашка под карточками (сплавы / автоматизация) */
.panel{margin-top:20px;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:clamp(11px,1.2vw,15px) clamp(22px,2.4vw,30px)}
.panel__line{font-size:15.5px;line-height:1.6;color:var(--text)}
.panel__line--muted{color:var(--muted);margin-top:6px}
.panel__line .mono-accent{font-family:var(--font-mono);color:var(--accent)}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.auto-item{display:flex;gap:11px;align-items:center;font-size:14.5px;color:var(--muted-3)}

/* ============ БЛОК 04 — ЦЕНЫ ============ */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:clamp(36px,4vw,56px)}
.price-card{background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:clamp(26px,3vw,38px)}
.price-card--accent{border-color:var(--accent)}
.price-card__label{font-family:var(--font-mono);font-size:13px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em}
.price-card--accent .price-card__label{color:var(--accent)}
.price-card__price{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.price-card__value{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,4.6vw,56px);color:var(--text);line-height:1}
.price-card__unit{font-family:var(--font-mono);font-size:14px;color:var(--muted-2)}
.price-card .btn{margin-top:24px}

/* ============ БЛОК 05 — ПРОИЗВОДСТВО В ЦИФРАХ ============ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:clamp(36px,4vw,56px)}
.stat{background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;padding:clamp(26px,3vw,38px)}
.stat__label{font-size:13px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}
.stat__value{font-family:var(--font-mono);font-size:clamp(30px,3.6vw,44px);font-weight:600;color:var(--text);margin-top:12px}
.stat__value small{font-size:.5em;color:var(--muted-2)}
.stat__desc{font-size:13.5px;color:var(--muted-4);margin-top:6px}
.stat--accent .stat__label,.stat--accent .stat__value{color:var(--accent)}

/* ============ БЛОК 06 — КАК НАЧАТЬ РАБОТАТЬ (шаги) ============ */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:clamp(36px,4vw,56px)}
.step{display:block;background:var(--panel);border:1px solid var(--line-2);border-radius:6px;padding:clamp(24px,2.6vw,32px)}
.step__num{font-family:var(--font-mono);font-size:clamp(30px,3.4vw,40px);font-weight:600;color:var(--step-dim)}
.step--last .step__num{color:var(--accent)}
.step__title{font-family:var(--font-display);font-weight:700;font-size:19px;text-transform:uppercase;color:var(--text);margin-top:14px}
.step__desc{font-size:14px;color:var(--muted);line-height:1.6;margin-top:10px}
/* Шаг 01 — кликабелен целиком и ведёт к форме заявки.
   Отдельной кнопки внутри нет, чтобы не дублировать заголовок. */
.step--cta{border-color:var(--accent);background:linear-gradient(180deg,rgba(232,130,58,.09),transparent 60%),var(--panel);transition:border-color .25s ease,transform .25s ease}
.step--cta .step__num,
.step--cta .step__title{color:var(--accent)}
.step--cta .step__title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.step__arrow{transition:transform .25s ease}
.step--cta:hover{border-color:var(--accent-h);transform:translateY(-2px)}
.step--cta:hover .step__arrow{transform:translateX(5px)}
.step--cta:hover .step__desc{color:var(--muted-3)}

/* ============ БЛОК 07 — ПРИМЕРЫ РАБОТ (галерея) ============ */
/* Фон плитки задаётся инлайн в index.html (uploads/images/07/07-0N.jpg).
   Пока файла нет — виден фирменный полосатый паттерн, вёрстка цела. */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:clamp(36px,4vw,56px)}
/* Фото — тег <img> ради индексации и alt-текста. Под ним лежит фирменный
   полосатый паттерн: пока фотографий нет, скрипт убирает незагрузившиеся
   картинки и плитка остаётся оформленной, а не пустой. */
.gallery-item{position:relative;aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:6px;background-color:#191c21;background-image:repeating-linear-gradient(135deg,#191c21,#191c21 11px,#1e2228 11px,#1e2228 22px);overflow:hidden;display:flex;align-items:flex-end;padding:18px;transition:border-color .25s ease}
.gallery-item__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gallery-item:hover{border-color:var(--steel)}
.gallery-item:hover .gallery-item__img{transform:scale(1.09)}
.gallery-item__tag{position:relative;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;background:rgba(20,22,26,.9);padding:6px 10px;border:1px solid var(--line-2);border-radius:3px}

/* ============ БЛОК 08 — КОНТАКТЫ / ФОРМА ЗАЯВКИ ============ */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3vw,48px);margin-top:clamp(36px,4vw,56px)}

/* --- Форма из сервиса Яндекс.Формы ---
   Внутреннее оформление формы (шрифты, цвета полей) задаётся в самом
   сервисе — со страницы стили внутрь рамки не проникают. Здесь только
   контейнер, заглушка загрузки и запасной блок. */
.ya-form{position:relative;display:flex;flex-direction:column;gap:16px;min-height:420px}
.ya-form__frame{width:100%;border:0;display:block;min-height:420px;background:transparent;opacity:0;transition:opacity .3s ease}
.ya-form--ready .ya-form__frame{opacity:1}
.ya-form__frame[hidden]{display:none}
/* Заглушка «Загружаем форму заявки…».
   Лежит поверх области рамки (position:absolute), а не над ней — иначе
   во время загрузки страница вытягивалась бы на две высоты формы. */
.ya-form__loading{position:absolute;left:0;right:0;top:0;height:420px;display:flex;align-items:center;gap:12px;justify-content:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;border:1px dashed var(--line-2);border-radius:8px;background:var(--bg)}
.ya-form__loading[hidden]{display:none}
.ya-form__spinner{width:16px;height:16px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:yaspin .8s linear infinite}
@keyframes yaspin{to{transform:rotate(360deg)}}
/* запасной блок: показывается, только если форма не загрузилась */
.ya-fallback{background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:clamp(24px,2.8vw,36px)}
.ya-fallback[hidden]{display:none}
.ya-fallback__title{font-family:var(--font-display);font-weight:800;font-size:22px;text-transform:uppercase;color:var(--text)}
.ya-fallback__text{font-size:14.5px;color:var(--muted);line-height:1.6;margin:12px 0 20px}
.ya-fallback__contacts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;font-family:var(--font-mono);font-size:15px}
.ya-fallback__phone{color:var(--text)}
.ya-fallback__phone:hover{color:var(--accent)}
.ya-fallback__email{color:var(--accent)}
.form-note{font-size:12px;color:var(--muted-2);line-height:1.5}
.form-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Правая колонка контактов + карта */
.contact-aside{display:flex;flex-direction:column;gap:16px}
.contact-card{background:var(--panel-2);border:1px solid var(--line-2);border-radius:8px;padding:clamp(24px,2.6vw,32px)}
.contact-card__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase}
.contact-card__phone{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--text);margin-top:14px}
.contact-card__phone:hover{color:var(--accent)}
.contact-card__email{display:block;font-family:var(--font-mono);font-size:16px;color:var(--accent);margin-top:8px}
.contact-card__email:hover{color:var(--accent-h)}
/* Режим работы и адрес производства */
.contact-card__hours,
.contact-card__address{font-style:normal;font-size:14.5px;color:var(--muted);line-height:1.6;margin-top:20px;padding-top:20px;border-top:1px solid var(--line-2)}
.contact-card__address-label{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase;margin-bottom:8px}
/* Кликабельная карта: картинка + пульсирующий курсор, ведёт на Яндекс.Карты */
.map{display:block;position:relative;flex:1;min-height:240px;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.map:hover{border-color:var(--accent)}
.map__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Указатель на карте. Стоит по центру блока — картинка карты
   перекадрирована так, что корпус завода приходится ровно на центр. */
.map__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* Две расходящиеся волны вместо одной — движение читается мягче */
.map__pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:ccpulse 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.map__pulse--delayed{animation-delay:1.2s}
/* Белое кольцо отделяет метку от светлой карты, тень даёт объём */
.map__marker{position:relative;width:46px;height:46px;border-radius:50%;background:var(--accent);
  border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
.map:hover .map__marker{transform:scale(1.08)}
.map__marker svg{display:block;margin:-1px 1px 0 -1px}
.map__label{position:absolute;left:14px;top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase;background:var(--bg);padding:6px 10px;border:1px solid var(--line-2);border-radius:3px}
.map__cta{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--accent);text-transform:uppercase;background:var(--bg);padding:8px 12px;border:1px solid var(--line-2);border-radius:4px}

/* ============ БЛОК 09 — FAQ (аккордеон на <details>) ============ */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq{background:var(--panel);border:1px solid var(--line-2);border-radius:6px;padding:20px 24px}
.faq__q{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.7vw,19px);color:var(--text)}
.faq__ind{color:var(--accent);font-size:22px;line-height:1;transition:transform .2s;flex-shrink:0}
.faq[open] .faq__ind{transform:rotate(45deg)} /* «+» превращается в «×» */
.faq__a{font-size:15px;color:var(--muted);line-height:1.65;margin-top:16px}

/* ============ ПОДВАЛ ============ */
.footer{border-top:1px solid var(--line);background:var(--deep)}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,5vw,64px) var(--pad-x)}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.footer__brand{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:.02em;color:var(--text);text-transform:uppercase;display:flex;align-items:center;gap:11px}
.footer__brand .logo__accent{color:var(--accent)}
.footer__about{font-size:14px;color:var(--muted-2);line-height:1.6;margin-top:16px;max-width:38ch}
.footer__col-title{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase;margin-bottom:14px}
.footer__links{display:flex;flex-direction:column;gap:10px}
.footer__links a{color:var(--muted);font-size:14px}
.footer__links a:hover{color:var(--text)}
.footer__contacts{display:flex;flex-direction:column;gap:10px}
.footer__contacts a{font-family:var(--font-mono);font-size:15px}
.footer__phone{color:var(--text)}
.footer__phone:hover{color:var(--accent)}
.footer__email{color:var(--accent)}
.footer__email:hover{color:var(--accent-h)}
.footer__region{color:var(--muted-2);font-size:14px}
.footer__address{font-style:normal;font-size:13.5px;color:var(--muted-2);line-height:1.6;margin-top:4px}
.footer__cta{margin-top:20px}
/* Реквизиты юр. лица над копирайтом */
.footer__legal-info{border-top:1px solid var(--line);margin-top:40px;padding-top:24px;font-size:13px;color:var(--muted-2);line-height:1.7}
.footer__bottom{border-top:1px solid var(--line);margin-top:24px;padding-top:24px;font-family:var(--font-mono);font-size:12px;color:var(--dim);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center}
.footer__legal{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.footer__legal:hover{color:var(--accent)}

/* ============================================================================
   5. ДОСТУПНОСТЬ И МОБИЛЬНАЯ ШАПКА
   Добавлено при подготовке сайта к размещению на хостинге.
   ============================================================================ */

/* ---- Ссылка «Перейти к содержимому» ----
   Не видна мышью, появляется при переходе клавишей Tab — позволяет
   пропустить меню и сразу попасть в контент. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--bg);
  font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;
  padding:12px 18px;border-radius:0 0 4px 0}
.skip-link:focus{left:0;color:var(--bg)}

/* ---- Видимый фокус для клавиатуры ----
   :focus-visible срабатывает только при навигации с клавиатуры,
   мышиные клики рамку не показывают. */
a:focus-visible,button:focus-visible,summary:focus-visible,iframe:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---- Кнопка бургер-меню ----
   На широких экранах скрыта; показывается медиазапросом ниже. */
.nav-toggle{display:none;width:44px;height:44px;padding:10px;background:transparent;
  border:1px solid var(--line-2);border-radius:4px;cursor:pointer;
  flex-direction:column;justify-content:space-between;flex-shrink:0}
.nav-toggle:hover{border-color:var(--accent)}
.nav-toggle__bar{display:block;width:100%;height:2px;background:var(--text);
  border-radius:2px;transition:transform .25s ease,opacity .2s ease}
/* три полоски складываются в крестик, когда меню открыто */
.nav-toggle--open .nav-toggle__bar:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-toggle--open .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle--open .nav-toggle__bar:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---- Экраны до 900px: навигация в выпадающей панели ---- */
@media (max-width:900px){
  .header__inner{gap:12px}
  .nav-toggle{display:flex}
  /* панель меню разворачивается под шапкой */
  .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;padding:8px var(--pad-x) 16px;
    background:rgba(20,22,26,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line)}
  .nav--open{display:flex}
  .nav a{padding:14px 0;font-size:15px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:none}
  /* телефон и кнопка заказа остаются в шапке, но компактнее */
  .header__actions{gap:10px}
  .header__phone{font-size:13px}
}

/* ---- Экраны до 620px: в шапке только логотип, телефон и бургер ---- */
@media (max-width:620px){
  .header__cta{display:none}          /* кнопка заказа есть в hero и подвале */
  /* Шапка не влезала по ширине и создавала горизонтальную прокрутку всей
     страницы. Замерено: логотип 20px = 160px плюс телефон 13px = 138px,
     итого 298px, а на экране 360px под них остаётся 264px (поля 2×20,
     кнопка меню 40, промежутки 16). Не хватало 34px.
     Уменьшенные размеры ниже дают 129 + 127 = 256px — помещается с запасом.
     Телефон намеренно НЕ прячем: это основной способ связи на телефоне. */
  .header__inner{height:64px;gap:8px}
  .logo{font-size:16px;gap:8px}
  .header__actions{gap:8px}
  .header__phone{font-size:12px}
  .nav-toggle{width:40px;height:40px;padding:9px}
  /* Плашка производительности остаётся в правом верхнем углу, но ужимается,
     чтобы не наезжать на заголовок первого экрана. Позиционирование не
     меняем: .hero__stat — абсолютный элемент внутри flex-контейнера. */
  .hero__stat{max-width:9.5rem}
  .hero__stat-num{font-size:24px}
  .hero__stat-label{font-size:11px;line-height:1.4}
  .footer__bottom{justify-content:flex-start}
}

/* ============================================================================
   6. ПОЯСНЕНИЕ ВНУТРИ ПЛИТКИ (блоки 01 и 02)
   
   Зачем: плитки выглядят активными (фото увеличивается при наведении),
   и люди по ним кликают. Раньше клик ничего не давал.
   
   Как устроено: нативный <details> — то же решение, что у аккордеона FAQ.
   Без единой строчки JS, работает с клавиатуры и со скринридерами.
   
   Ключевое: панель с текстом позиционируется АБСОЛЮТНО поверх плитки,
   поэтому при раскрытии сетка не сдвигается и вёрстка страницы
   остаётся прежней. Кликабельна вся площадь плитки.
   ============================================================================ */

.tile-info{position:absolute;inset:0;z-index:3}

/* Прозрачная область-переключатель на всю плитку */
.tile-info__trigger{position:absolute;inset:0;z-index:2;display:block;list-style:none;cursor:pointer}
.tile-info__trigger::-webkit-details-marker{display:none}

/* Подпись-подсказка в углу: «Подробнее» / «Закрыть» */
.tile-info__hint{position:absolute;right:14px;top:14px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:rgba(20,22,26,.85);
  border:1px solid var(--line-2);border-radius:3px;padding:5px 9px;
  transition:color .2s ease,border-color .2s ease}
.tile-info__hint--less{display:none}
.tile-info[open] .tile-info__hint--more{display:none}
.tile-info[open] .tile-info__hint--less{display:block}
.tile-info__trigger:hover .tile-info__hint,
.tile-info[open] .tile-info__hint{color:var(--accent);border-color:var(--accent)}

/* Панель с текстом. pointer-events:none — чтобы клик по тексту тоже
   закрывал панель, а не проваливался мимо переключателя. */
.tile-info__panel{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(16,18,21,.96);backdrop-filter:blur(2px);
  padding:clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;justify-content:center;gap:12px}
.tile-info__title{font-family:var(--font-display);font-weight:700;font-size:17px;
  text-transform:uppercase;color:var(--accent);letter-spacing:.01em}
.tile-info__text{font-size:13.5px;color:var(--muted-3);line-height:1.65}

/* Узкие экраны: текста в плитке помещается меньше — ужимаем кегль */
@media (max-width:620px){
  .tile-info__title{font-size:15px}
  .tile-info__text{font-size:12.5px;line-height:1.55}
  .tile-info__panel{padding:18px;gap:8px}
}

/* ---- Блок 06: шаг 01 — единственный кликабельный из четырёх ----
   Курсор-палец и подпись-призыв делают это отличие явным, чтобы
   не возникало ожидания, что остальные шаги тоже нажимаются. */
.step--cta{cursor:pointer}
.step__cta-hint{display:inline-flex;align-items:center;margin-top:16px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:6px 10px}
.step--cta:hover .step__cta-hint{background:var(--accent);color:var(--bg)}

/* ---- Совсем узкие экраны (до 400px): ещё немного ужимаем шапку ----
   На аппаратах вроде iPhone SE и бюджетных Android ширина 320–375px.
   Замерено: логотип 15px = 119px, телефон 11px = 117px — вместе 236px
   при доступных 264px. Запас 28px на разные шрифты и масштаб системы. */
@media (max-width:400px){
  .logo{font-size:15px;gap:6px}
  .header__actions{gap:6px}
  .header__phone{font-size:11px}
  .nav-toggle{width:38px;height:38px;padding:8px}
}

/* ---- Страховка от горизонтальной прокрутки ----
   Если что-то в будущем всё же вылезет за правый край, страница не
   поедет вбок. Намеренно clip, а НЕ hidden: hidden создаёт область прокрутки
   и ломает липкую шапку (position:sticky), clip — нет. */
body{overflow-x:clip}