/* =========================================================================
   МЕТАЛЛОМИР (Бишкек, Кыргызстан) — ЕДИНЫЙ ФАЙЛ СТИЛЕЙ (МЯГКИЙ СОВРЕМЕННЫЙ ДИЗАЙН)
   =========================================================================
   Этот файл подключён на КАЖДОЙ странице сайта одной строкой в <head>:
     <link rel="stylesheet" href="css/style.css">
   Меняете здесь — меняется сразу на всех страницах.

   КАК ЧИТАТЬ ЭТОТ ФАЙЛ:
   1. ПЕРЕМЕННЫЕ (:root)       — все цвета, отступы, шрифты, скругления,
                                  тени в одном месте. Хотите перекрасить
                                  сайт или изменить "мягкость" — меняйте тут.
   2. БАЗА                     — сброс браузерных стилей, шрифты, ссылки.
   3. СЕТКА/КОНТЕЙНЕРЫ          — .container, .grid и т.д.
   4. ТИПОГРАФИКА               — заголовки, текст, теги.
   5. КНОПКИ                    — .btn и его варианты.
   6. ШАПКА (HEADER)            — .site-header
   7. ПОДВАЛ (FOOTER)           — .site-footer
   8. КОМПОНЕНТЫ                — карточки, бейджи, таблицы, формы и т.д.
   9. УТИЛИТЫ
   10. MOTION / АНИМАЦИИ         — единая система движения сайта (см. js/motion.js)
   11. АДАПТИВ (МЕДИА-ЗАПРОСЫ)

   Классы во всех HTML-файлах остались прежними — этот файл можно спокойно
   менять (в том числе переключать обратно на другой стиль), не трогая
   разметку страниц.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* -------------------------------------------------------------------------
   1. ПЕРЕМЕННЫЕ — главная панель управления дизайном сайта
------------------------------------------------------------------------- */
:root {
  /* --- Цвета. Хотите другой акцентный цвет — меняйте
         только --accent*, остальное подхватится само. --- */
  --ink:         #000000;   /* чёрный — основной текст и тёмные блоки */
  --paper:       #ffffff;   /* белый фон страницы */
  --paper-dim:   #f3f3f3;   /* светло-серый фон чередующихся секций */
  --card:        #ffffff;   /* белый фон карточек */

  --accent:      #cc2128;   /* фирменный красный МеталлоМир — основной акцент/кнопки */
  --accent-dark: #a31a20;
  --accent-soft: #fcebec;   /* светлая подложка под акцентный текст/бейджи */
  --accent-ink:  #ffffff;
  --accent-2:    #ff8a8f;   /* светлый красный — подсветка на тёмном фоне */

  --primary:     #111111;   /* графит — вторая опорная точка палитры */
  --primary-soft:#f3f3f3;

  --navy:        #000000;   /* чёрный для тёмных блоков (шапка-герой, подвал) */
  --navy-2:      #1a1a1a;

  --muted:       #666666;   /* приглушённый текст */
  --border:      #e3e3e3;   /* лёгкая обводка карточек/полей */
  --ok:          #1c9a5b;
  --danger:      #b3141a;

  /* --- Градиенты для фото-плашек и CTA: только палитра сайта (красный/чёрный) --- */
  --gradient-blue:   linear-gradient(135deg, #000000 0%, #1a1a1a 60%, #333333 100%);
  --gradient-purple: linear-gradient(135deg, #3a0a0d 0%, #7a0f14 60%, #a31a20 100%);
  --gradient-warm:   linear-gradient(135deg, #7a0f14 0%, var(--accent-dark) 55%, var(--accent) 100%);
  --gradient-teal:   linear-gradient(135deg, #000000 0%, #3a0a0d 55%, #7a0f14 100%);
  --gradient-cta:    linear-gradient(135deg, #000000 0%, #5c0d11 55%, #cc2128 100%);

  /* --- Скругления и тени — "мягкость" дизайна --- */
  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow:    0 14px 34px rgba(0,0,0,.10);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.16);

  /* --- Шрифты --- */
  --font-head: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- Отступы (используем везде, чтобы ритм был одинаковым) --- */
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 28px;
  --gap-lg: 48px;
  --gap-xl: 88px;

  --container-w: 1200px;

  /* --- Motion-система: единые easing/длительности для ВСЕГО сайта ---
         --ease-out  — плавное "дорогое" замедление (Apple/Linear-style), для появления.
         --ease-in-out — для hover/press, симметричный.
         Используем ТОЛЬКО transform/opacity/clip-path/filter там, где можно —
         они не вызывают layout reflow и анимируются на GPU. --- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);

  --dur-fast: .22s;
  --dur:      .45s;
  --dur-slow: .75s;
}

/* Переход между страницами (нативный View Transitions API — без единой
   строчки JS и без библиотек; в браузерах без поддержки просто игнорируется
   и переход происходит как обычно). */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .001ms; --dur: .001ms; --dur-slow: .001ms; }
}

/* -------------------------------------------------------------------------
   2. БАЗА
------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }
hr.hard { border: none; border-top: 1px solid var(--border); margin: var(--gap-lg) 0; }

/* Мягкий декоративный разделитель между секциями (раньше — "сигнальная
   лента", теперь — аккуратная затухающая линия с акцентным цветом). */
.hazard-strip {
  height: 4px;
  max-width: 220px;
  margin: 0 auto;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--accent), var(--primary), transparent);
  opacity: .55;
}

/* -------------------------------------------------------------------------
   3. СЕТКА / КОНТЕЙНЕРЫ
------------------------------------------------------------------------- */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--gap-sm);
}
.section { padding: var(--gap-xl) 0; }
.section-tight { padding: var(--gap-lg) 0; }
.grid { display: grid; gap: var(--gap-md); }
.grid > * { min-width: 0; } /* не даёт длинным словам в карточках распирать сетку и вызывать горизонтальный скролл */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* -------------------------------------------------------------------------
   4. ТИПОГРАФИКА
------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 var(--gap-sm);
  overflow-wrap: break-word; /* длинные заголовки не распирают карточки/сетку */
  color: var(--ink);
}
h1 { font-size: clamp(34px, 5.2vw, 64px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: clamp(19px, 2.4vw, 23px); font-weight: 700; }
p  { margin: 0 0 var(--gap-sm); color: var(--ink); }
.lead { font-size: clamp(16.5px, 1.7vw, 19px); color: var(--muted); max-width: 62ch; line-height: 1.65; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent-dark);
  border-radius: var(--radius-pill);
  padding: 7px 14px 7px 10px; margin-bottom: var(--gap-sm);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.section-head { max-width: 760px; margin-bottom: var(--gap-lg); }

/* -------------------------------------------------------------------------
   5. КНОПКИ
------------------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 15px; letter-spacing: -0.005em;
  padding: 15px 26px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur) var(--ease-out-soft),
              background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  white-space: nowrap;
  will-change: transform;
}
/* Лёгкий "блик", проходящий по кнопке при наведении — не постоянная анимация,
   запускается только один раз на hover (transform, без JS). */
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-130%);
  opacity: 0;
}
.btn:hover::before { transform: translateX(130%); opacity: 1; transition: transform .85s var(--ease-out), opacity .1s ease; }
.btn:not(:hover)::before { transition: opacity .15s ease .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: transparent; }
.btn:active { transform: translateY(0) scale(.97); box-shadow: var(--shadow-sm); transition-duration: .1s; }
.btn:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 10px 24px rgba(204,33,40,.32); }
.btn-accent:hover { background: var(--accent-dark); box-shadow: 0 16px 34px rgba(204,33,40,.42); }
.btn-dark   { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-dark:hover { background: #1a1a1a; }
.btn-block  { width: 100%; }
.btn-sm     { padding: 10px 18px; font-size: 13.5px; }

/* Состояния кнопки отправки формы: "отправляем…" → "готово" — короткая,
   физически ощутимая реакция вместо мгновенного/немого скачка интерфейса. */
.btn.is-loading, .btn.is-success { cursor: default; }
.btn.is-loading { opacity: .86; }
.btn.is-loading::after {
  content: ""; width: 15px; height: 15px; margin-left: 2px;
  border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent;
  opacity: .85; animation: btn-spin .7s linear infinite;
}
.btn.is-success { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.is-success::before { display: none; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
  .btn:hover, .btn:active { transform: none; }
}

/* -------------------------------------------------------------------------
   6. ШАПКА
------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,0);
  transition: background-color var(--dur) var(--ease-out-soft),
              box-shadow var(--dur) var(--ease-out-soft),
              border-color var(--dur) var(--ease-out-soft);
  animation: header-in .6s var(--ease-out) both;
}
@keyframes header-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
/* Состояние при прокрутке — добавляется/убирается в js/motion.js */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .72);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 16px 32px -20px rgba(0,0,0,.28);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md); padding-top: 14px; padding-bottom: 14px;
  transition: padding var(--dur) var(--ease-out-soft);
}
.site-header.is-scrolled .container { padding-top: 10px; padding-bottom: 10px; }
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: 21px;
  letter-spacing: -0.01em; color: var(--ink);
}
.logo img { height: 28px; width: auto; display: block; flex-shrink: 0; transition: height var(--dur) var(--ease-out-soft); }
.site-header.is-scrolled .logo img { height: 24px; }
.site-footer .logo img { height: 32px; }
.nav { display: flex; align-items: center; gap: 18px; }
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  color: var(--ink); white-space: nowrap;
  padding: 9px 13px; border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nav-links a:hover { background: var(--paper-dim); }
.nav-links a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); }
/* Аккуратное аккуратное подчёркивание-индикатор (растёт из центра) —
   для текущего пункта меню, видимое поверх фоновой "таблетки" */
.nav-links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur) var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"]::after { display: none; }
.nav-phone { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; white-space: nowrap; color: var(--ink); transition: color var(--dur-fast) ease; }
.nav-phone:hover { color: var(--accent); }
.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.nav-toggle:hover { border-color: var(--accent-soft); background: var(--accent-soft); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); position: relative;
  transition: transform var(--dur) var(--ease-in-out), opacity var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.site-header.nav-open .nav-toggle span { background: transparent; }
.site-header.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .site-header { animation: none; }
}

/* -------------------------------------------------------------------------
   7. ПОДВАЛ
------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy); color: #fff;
  padding: var(--gap-lg) 0 var(--gap-md);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: var(--gap-lg);
}
.site-footer a { color: #e6e6e6; }
.site-footer a:hover { color: var(--accent); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--gap-lg); }
.footer-grid h4 { color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; margin-bottom: var(--gap-sm); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-grid p { color: #b3b3b3; }
.footer-bottom {
  margin-top: var(--gap-lg); padding-top: var(--gap-sm);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-body); font-size: 13px; color: #999999;
}

/* -------------------------------------------------------------------------
   8. КОМПОНЕНТЫ
------------------------------------------------------------------------- */

/* --- Карточка общего назначения --- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--gap-md);
  transition: box-shadow var(--dur) var(--ease-out-soft), border-color var(--dur) var(--ease-out-soft);
}
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent-soft); }

/* --- Герой-блок первого экрана: реальное фото склада проката (photos/)
       затемнённое градиентом, чтобы белый текст было хорошо видно --- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy) url("../assets/hero-metal-stack.jpg") center center / cover no-repeat;
  padding: var(--gap-xl) 0 var(--gap-lg);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.86) 38%, rgba(122,15,20,.78) 78%, rgba(204,33,40,.62) 100%);
  pointer-events: none;
}
/* Очень тонкие декоративные "пятна" света — создают глубину, почти незаметны,
   очень медленно дрейфуют (18-26s). Двигаются ещё и от курсора (motion.js). */
.hero-blob {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(60px); opacity: .5; will-change: transform;
}
.hero-blob-1 {
  width: 480px; height: 480px; top: -160px; right: -80px;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
  animation: blob-float-1 22s ease-in-out infinite;
}
.hero-blob-2 {
  width: 380px; height: 380px; bottom: -140px; left: 8%;
  background: radial-gradient(circle, rgba(204,33,40,.45), transparent 70%);
  animation: blob-float-2 26s ease-in-out infinite;
}
@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-26px, 24px) scale(1.08); }
}
@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(22px, -18px) scale(1.05); }
}
.hero .container { position: relative; z-index: 1; }
.hero .eyebrow { background: rgba(255,255,255,.14); color: #fff; }
.hero .eyebrow::before { background: var(--accent); }
.hero h1 { color: #fff; }
.hero .lead { color: #e6e6e6; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--gap-sm) 0 var(--gap-lg); }
.tag {
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.28); padding: 8px 16px; background: rgba(255,255,255,.1); color: #fff;
  backdrop-filter: blur(6px);
}
.tag-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.hero-actions { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.hero-actions .btn:not(.btn-accent) {
  background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(6px);
}
.hero-actions .btn:not(.btn-accent):hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-sm); margin-top: var(--gap-lg); }
.stat {
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: var(--gap-sm) var(--gap-sm);
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px); box-shadow: none;
}
.stat b { display: block; font-family: var(--font-head); font-size: 32px; font-weight: 800; color: #fff; }
.stat span { font-family: var(--font-body); font-size: 13px; color: #cfcfcf; }

/* -------------------------------------------------------------------------
   HERO — ПОСЛЕДОВАТЕЛЬНОЕ ПОЯВЛЕНИЕ ПРИ ЗАГРУЗКЕ (см. js/motion.js, initHero)
   Задержки каждого элемента выставляются из JS через style.transitionDelay —
   здесь только САМА анимация (transform/opacity), один источник правды.
------------------------------------------------------------------------- */
.hero.hero-js .eyebrow,
.hero.hero-js > .container > .lead,
.hero.hero-js .hero-tags .tag,
.hero.hero-js .hero-actions .btn,
.hero.hero-js .hero-stats .stat {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.hero.hero-js .hero-tags .tag,
.hero.hero-js .hero-actions .btn { transform: translateY(12px) scale(.93); }
.hero.hero-ready .eyebrow,
.hero.hero-ready > .container > .lead,
.hero.hero-ready .hero-tags .tag,
.hero.hero-ready .hero-actions .btn,
.hero.hero-ready .hero-stats .stat {
  opacity: 1; transform: none;
}
/* Заголовок — появление по словам (JS оборачивает каждое слово в span.word,
   текст не меняется, только разметка на лету). */
.hero.hero-js h1 .word { overflow: hidden; display: inline-block; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero.hero-js h1 .word-inner {
  display: inline-block;
  transform: translateY(112%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.hero.hero-ready h1 .word-inner { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hero.hero-js .eyebrow, .hero.hero-js > .container > .lead,
  .hero.hero-js .hero-tags .tag, .hero.hero-js .hero-actions .btn,
  .hero.hero-js .hero-stats .stat, .hero.hero-js h1 .word-inner {
    opacity: 1; transform: none;
  }
  .hero-blob { animation: none; }
}

/* --- Плашка-плейсхолдер для фото (пока нет реальных снимков) --- */
.photo-placeholder {
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  display: flex; align-items: flex-end; padding: var(--gap-sm);
  background: linear-gradient(135deg, var(--paper-dim), #f7f7f7);
  color: var(--muted);
}
.photo-placeholder span {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  background: var(--card); color: var(--muted); padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}

/* --- Карточки преимуществ / услуг --- */
.feature-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--gap-md);
  background: var(--card); position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out-soft), box-shadow var(--dur) var(--ease-out-soft),
              border-color var(--dur) var(--ease-out-soft);
}
.feature-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.5) 45%, transparent 65%);
  transform: translateX(-130%); opacity: 0; mix-blend-mode: overlay;
}
.feature-card:hover::after { transform: translateX(130%); opacity: 1; transition: transform .8s var(--ease-out), opacity .1s ease; }
.feature-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: var(--shadow-lg); border-color: var(--accent-soft); }
.feature-card .num {
  font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 12px; display: block;
  transition: transform var(--dur) var(--ease-out-soft);
}
.feature-card:hover .num { transform: translateX(3px); }
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { color: var(--muted); margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover { transform: none; }
  .feature-card::after { display: none; }
}
.feature-card.on-dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.feature-card.on-dark h3, .feature-card.on-dark .num { color: #fff; }
.feature-card.on-dark p { color: #cfcfcf; }
.feature-card.on-accent { background: linear-gradient(135deg, var(--accent), #e8575c); color: #fff; border-color: transparent; }
.feature-card.on-accent h3, .feature-card.on-accent .num { color: #fff; }
.feature-card.on-accent p { color: #fcebec; }

/* --- Категории ассортимента (карточки со ссылкой) --- */
.cat-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  padding: var(--gap-sm); display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out-soft), box-shadow var(--dur) var(--ease-out-soft), border-color var(--dur) var(--ease-out-soft);
}
.cat-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-lg); border-color: var(--accent-soft); }
.cat-card svg { width: 32px; height: 32px; color: var(--accent); fill: var(--accent); transition: transform var(--dur) var(--ease-out-soft); }
.cat-card:hover svg { transform: scale(1.12) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .cat-card:hover { transform: none; } .cat-card:hover svg { transform: none; } }
.cat-card b { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); }
.cat-card span { font-family: var(--font-body); font-size: 12.5px; color: var(--muted); }

/* --- Фото-плашки категорий (яркий градиент поверх реального фото склада,
       вдохновлено референсом technobearing.ru) --- */
.photo-tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); aspect-ratio: 4 / 3.1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--gap-md); color: #fff;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out-soft), box-shadow var(--dur) var(--ease-out-soft);
}
.photo-tile:hover { transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-lg); }
.photo-tile:hover { background-size: 112%; transition: transform var(--dur) var(--ease-out-soft), box-shadow var(--dur) var(--ease-out-soft), background-size 1.1s var(--ease-out-soft); }
.photo-tile::before { content: ""; position: absolute; inset: 0; opacity: .88; }
.photo-tile.grad-blue::before   { background: var(--gradient-blue); }
.photo-tile.grad-purple::before { background: var(--gradient-purple); }
.photo-tile.grad-warm::before   { background: var(--gradient-warm); }
.photo-tile.grad-teal::before   { background: var(--gradient-teal); }
.photo-tile > * { position: relative; z-index: 1; }
.photo-tile b { font-family: var(--font-head); font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.photo-tile span { font-family: var(--font-body); font-size: 12.5px; color: rgba(255,255,255,.82); margin-top: 4px; }
.photo-tile .tile-arrow {
  position: absolute; top: var(--gap-sm); right: var(--gap-sm); z-index: 1;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
  transition: background-color var(--dur-fast) ease, transform var(--dur) var(--ease-out-soft);
}
.photo-tile:hover .tile-arrow { background: rgba(255,255,255,.3); transform: rotate(45deg); }
.photo-tile .tile-arrow svg { width: 15px; height: 15px; stroke: #fff; }
@media (prefers-reduced-motion: reduce) {
  .photo-tile:hover { transform: none; background-size: cover; }
  .photo-tile:hover .tile-arrow { transform: none; }
}

/* --- Широкая фото-полоса (реальные снимки склада/погрузки на всю ширину
       секции — заменяет старые плейсхолдеры) --- */
.photo-strip {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 6;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-sm);
  transition: background-size 1.2s var(--ease-out-soft);
}
.photo-strip:hover { background-size: 108%; }
.photo-figure { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.photo-figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-out-soft);
}
.photo-figure:hover img { transform: scale(1.07); }

/* Видео-врезка (about.html) — то же "окно" с рамкой/тенью, что у фото,
   но без hover-zoom: у видео есть свои элементы управления, которым
   масштабирование контейнера только мешало бы. */
.video-figure {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  background: #000; max-width: 860px; margin: 0 auto;
  border: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease-out-soft), transform var(--dur) var(--ease-out-soft);
}
.video-figure:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.video-figure video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

@media (prefers-reduced-motion: reduce) {
  .photo-strip:hover { background-size: cover; }
  .photo-figure:hover img { transform: none; }
  .video-figure:hover { transform: none; }
}

/* Сетка Instagram Reels (about.html, "Склад и производство") — вертикальные
   ролики 9:16 лучше смотрятся в 2 колонки, а не в 4, как было у фото-плиток. */
.ig-reel-grid { grid-template-columns: repeat(2, 1fr); }
.ig-reel-figure {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); background: var(--card);
  display: flex; align-items: center; justify-content: center;
  min-height: 420px; padding: 0;
  transition: box-shadow var(--dur) var(--ease-out-soft), transform var(--dur) var(--ease-out-soft);
}
.ig-reel-figure:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.ig-reel-figure iframe { border-radius: var(--radius-lg) !important; }
@media (max-width: 760px) { .ig-reel-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ig-reel-figure:hover { transform: none; } }

/* --- Бейдж статуса (в наличии / под заказ) --- */
.badge { font-family: var(--font-body); font-weight: 600; font-size: 11.5px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); }
.badge-ok { background: #e9f9f0; color: var(--ok); border-color: #cdeedb; }

/* --- Таблицы ассортимента --- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; background: var(--card); }
table.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 14px; min-width: 520px; }
table.data-table thead th {
  background: var(--paper-dim); color: var(--ink); text-align: left; padding: 13px 16px;
  font-weight: 700; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap;
}
table.data-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: var(--paper-dim); }
table.data-table td.price { font-weight: 700; white-space: nowrap; font-family: var(--font-mono); font-size: 13.5px; }
table.data-table td.price.tbd { color: var(--muted); font-style: italic; font-weight: 500; }
table.data-table td.add-cell { width: 1%; padding-left: 6px; padding-right: 14px; }

/* --- Кнопка «+» (добавить позицию в расчёт калькулятора) --- */
.add-cart-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--card); color: var(--accent); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.add-cart-btn svg { fill: currentColor; display: block; }
.add-cart-btn:hover { background: var(--accent-soft); border-color: var(--accent); transform: scale(1.08); }
.add-cart-btn:active { transform: scale(.94); }
.add-cart-btn.is-added { background: var(--ok); border-color: var(--ok); color: #fff; cursor: default; }
.add-cart-btn.is-added:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .add-cart-btn:hover, .add-cart-btn:active { transform: none; }
}

/* --- Плавающая плашка «В расчёте: N позиций» (assortment.html) --- */
.cart-pill {
  position: fixed; left: 50%; bottom: 22px; z-index: 40;
  transform: translate(-50%, 0);
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; text-decoration: none;
  border-radius: var(--radius-pill); padding: 12px 20px 12px 14px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  animation: cart-pill-in var(--dur) var(--ease-out) both;
  transition: box-shadow var(--dur) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.cart-pill svg { width: 20px; height: 20px; fill: var(--accent-2); flex-shrink: 0; }
.cart-pill b { font-family: var(--font-head); }
.cart-pill:hover { box-shadow: 0 28px 64px rgba(0,0,0,.28); }
.cart-pill-arrow { color: var(--accent-2); white-space: nowrap; }
@keyframes cart-pill-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cart-pill.cart-pill-bump { animation: cart-pill-bump .4s var(--ease-out-soft); }
@keyframes cart-pill-bump { 0% { transform: translate(-50%, 0) scale(1); } 40% { transform: translate(-50%, 0) scale(1.06); } 100% { transform: translate(-50%, 0) scale(1); } }
@media (max-width: 620px) {
  .cart-pill { left: var(--gap-sm); right: var(--gap-sm); bottom: 14px; transform: none; justify-content: center; }
  .cart-pill-arrow { display: none; }
  @keyframes cart-pill-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .cart-pill { animation: none; }
  .cart-pill.cart-pill-bump { animation: none; }
}

/* --- Переключатель категорий (ассортимент) --- */
.cat-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap-md); }
.cat-switch button {
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--card); padding: 10px 16px; color: var(--ink);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-soft);
}
.cat-switch button:hover { border-color: var(--accent-soft); background: var(--accent-soft); transform: translateY(-1px); }
.cat-switch button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.cat-switch button:active { transform: translateY(0) scale(.96); }
/* Плавная смена таблицы при переключении категории/поиске (см. assortment.js) */
.table-wrap.is-updating { opacity: 0; transform: translateY(6px); }
.table-wrap { transition: opacity var(--dur) var(--ease-out-soft), transform var(--dur) var(--ease-out-soft); }

/* --- Формы (заявка) --- */
.form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--gap-sm); }
.form-field label { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--muted); }
.form-field label .req { color: var(--accent); }
.form-field input, .form-field textarea {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); padding: 13px 15px; font-size: 15px; color: var(--ink);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft);
}
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
  transform: translateY(-1px);
}
.form-field input.pk-invalid, .form-field textarea.pk-invalid { animation: field-shake .4s var(--ease-in-out); }
@keyframes field-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.form-note { font-family: var(--font-body); font-size: 12.5px; color: var(--muted); }
.form-note.form-warning, .form-note.form-success {
  animation: note-in var(--dur) var(--ease-out) both;
}
@keyframes note-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .form-field input.pk-invalid, .form-field textarea.pk-invalid { animation: none; }
  .form-note.form-warning, .form-note.form-success { animation: none; }
}
.form-consent {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--font-body); font-size: 12.5px; color: var(--muted);
  margin-bottom: var(--gap-sm); cursor: pointer; line-height: 1.5;
}
.form-consent input { margin-top: 3px; flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--accent); }
.form-consent a { color: var(--ink); text-decoration: underline; }
.form-consent a:hover { color: var(--accent); }

/* --- Полоса CTA --- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--gradient-cta);
  color: #fff; padding: var(--gap-lg) 0;
  border-radius: var(--radius-lg); margin: 0 var(--gap-sm);
}
.cta-band::before {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  top: -180px; right: -60px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  animation: blob-float-1 20s ease-in-out infinite;
}
.cta-band .container { position: relative; z-index: 1; max-width: calc(var(--container-w) - var(--gap-sm) * 2); }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #cfcfcf; }
@media (prefers-reduced-motion: reduce) { .cta-band::before { animation: none; } }

/* --- Контактные плашки --- */
.contact-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.contact-row:last-child { border-bottom: none; }
.contact-row .ic {
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px;
  transition: background-color var(--dur-fast) ease, transform var(--dur) var(--ease-out-soft);
}
.contact-row:hover .ic { background: var(--accent); transform: scale(1.08) rotate(-6deg); }
.contact-row b { display: block; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .6; }
.contact-row div a, .contact-row div span { font-size: 16.5px; font-weight: 600; transition: color var(--dur-fast) ease; }
.contact-row div a:hover { color: var(--accent-2); }
@media (prefers-reduced-motion: reduce) { .contact-row:hover .ic { transform: none; } }

/* --- Плейсхолдер карты --- */
.map-placeholder {
  border: 1.5px dashed var(--border); border-radius: var(--radius-lg); min-height: 340px;
  background: linear-gradient(135deg, var(--paper-dim), #f7f7f7);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--gap-md);
}

/* --- Плашка-примечание ("внимание") --- */
.notice {
  border: 1px solid #f6c9cb; background: var(--accent-soft); border-radius: var(--radius);
  padding: 15px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink);
  display: flex; gap: 12px; align-items: flex-start;
}

/* --- Хлебные крошки --- */
.crumbs { font-family: var(--font-body); font-size: 13px; color: var(--muted); margin-bottom: var(--gap-sm); }
.crumbs a:hover { color: var(--accent); }

/* --- Раздел "оставьте заявку" — двухколоночный --- */
.lead-form-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--card); overflow: hidden; }
.lead-form-grid { display: grid; grid-template-columns: 1fr 1fr; }
.lead-form-side {
  position: relative; overflow: hidden;
  background: var(--gradient-cta);
  color: #fff; padding: var(--gap-lg); display: flex; flex-direction: column; justify-content: center; gap: var(--gap-sm);
}
.lead-form-side::before {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  bottom: -140px; left: -80px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  animation: blob-float-2 24s ease-in-out infinite;
}
.lead-form-side > * { position: relative; z-index: 1; }
.lead-form-side h3 { color: #fff; }
.lead-form-side .eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.lead-form-side .eyebrow::before { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .lead-form-side::before { animation: none; } }
.lead-form-main { padding: var(--gap-lg); }

/* -------------------------------------------------------------------------
   9. УТИЛИТЫ
------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-sm { gap: var(--gap-sm); }
.hide-mobile { display: initial; }
.show-mobile { display: none; }

/* -------------------------------------------------------------------------
   10. MOTION / АНИМАЦИИ — единая scroll-reveal система
   =========================================================================
   Разметка: атрибут data-reveal="up|scale|left|right|clip|stagger" на
   секции/блоке. Логика в js/motion.js (IntersectionObserver) добавляет
   класс .is-visible, когда блок появляется в области видимости — один раз.
   Внутри .is-visible всё анимируется только через opacity/transform/clip-path
   (без влияния на layout, без дёргания страницы).
------------------------------------------------------------------------- */
[data-reveal] { will-change: transform, opacity; }

[data-reveal="up"] {
  opacity: 0; transform: translateY(30px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal="scale"] {
  opacity: 0; transform: scale(.94) translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal="left"] {
  opacity: 0; transform: translateX(-36px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal="right"] {
  opacity: 0; transform: translateX(36px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
/* Мягкая "маска" — изображение проявляется из-под рамки, а не просто гаснет/
   всплывает (отдельный приём для фото, чтобы не все блоки двигались одинаково). */
[data-reveal="clip"] {
  opacity: 0; clip-path: inset(6% 6% 6% 6% round 18px); transform: scale(1.03);
  transition: opacity var(--dur) var(--ease-out), clip-path var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal="up"].is-visible,
[data-reveal="scale"].is-visible,
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible {
  opacity: 1; transform: none;
}
[data-reveal="clip"].is-visible {
  opacity: 1; clip-path: inset(0% 0% 0% 0% round 18px); transform: none;
}

/* Группа с цепной (stagger) анимацией детей — JS выставляет каждому ребёнку
   свою задержку через CSS-переменную --d (мс). */
[data-reveal="stagger"] > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
[data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; }

/* Заголовки секций — последовательное появление eyebrow → h2 → lead */
[data-reveal="heading"] .eyebrow { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
[data-reveal="heading"] h2 { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out) .08s, transform var(--dur-slow) var(--ease-out) .08s; }
[data-reveal="heading"] .lead { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out) .18s, transform var(--dur-slow) var(--ease-out) .18s; }
[data-reveal="heading"].is-visible .eyebrow,
[data-reveal="heading"].is-visible h2,
[data-reveal="heading"].is-visible .lead { opacity: 1; transform: none; }

/* Числа/счётчики — count-up, текст меняет JS (motion.js), сам элемент
   слегка увеличивается в момент завершения подсчёта для акцента. */
[data-count] { display: inline-block; }
[data-count].is-counting { animation: count-pop .3s var(--ease-out-soft); }
@keyframes count-pop { 0% { transform: scale(1); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Пульс значения при пересчёте (калькулятор и т.п.) */
.value-pulse { animation: value-pulse .5s var(--ease-out-soft); }
@keyframes value-pulse {
  0% { color: var(--accent); }
  100% { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="stagger"] > *, [data-reveal="heading"] .eyebrow,
  [data-reveal="heading"] h2, [data-reveal="heading"] .lead {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    transition: none !important;
  }
  [data-count].is-counting, .value-pulse { animation: none; }
}

/* -------------------------------------------------------------------------
   11. АДАПТИВ
------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .lead-form-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
}

/* Шапка тесная уже на обычных ноутбучных экранах (6 пунктов меню + телефон +
   кнопка WhatsApp) — убираем менее важные элементы по очереди, чтобы ничего
   не вылезало за край экрана. */
@media (max-width: 1600px) {
  .nav-phone.hide-mobile { display: none; }
}
@media (max-width: 1040px) {
  .btn-accent.hide-mobile { display: none; }
}
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .show-mobile { display: block; }
  /* Мобильное меню: вместо резкого display:none → flex — плавное появление
     (opacity + небольшой сдвиг), меню остаётся в DOM-потоке, но скрыто
     visibility+pointer-events, пока не открыто — без влияния на layout. */
  .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--border); padding: var(--gap-sm);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease-out-soft), transform var(--dur) var(--ease-out-soft), visibility var(--dur);
  }
  .site-header.nav-open .nav-links {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .nav-links a { padding: 13px 14px; border-radius: var(--radius-sm); }
  /* Лёгкий цепной эффект появления пунктов меню — каждый следующий чуть позже. */
  .nav-links li { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft); }
  .site-header.nav-open .nav-links li { opacity: 1; transform: none; }
  .nav-links li:nth-child(1) { transition-delay: .03s; } .site-header.nav-open .nav-links li:nth-child(1) { transition-delay: .03s; }
  .nav-links li:nth-child(2) { transition-delay: .07s; } .site-header.nav-open .nav-links li:nth-child(2) { transition-delay: .07s; }
  .nav-links li:nth-child(3) { transition-delay: .11s; } .site-header.nav-open .nav-links li:nth-child(3) { transition-delay: .11s; }
  .nav-links li:nth-child(4) { transition-delay: .15s; } .site-header.nav-open .nav-links li:nth-child(4) { transition-delay: .15s; }
  .nav-links li:nth-child(5) { transition-delay: .19s; } .site-header.nav-open .nav-links li:nth-child(5) { transition-delay: .19s; }
  .nav-links li:nth-child(6) { transition-delay: .23s; } .site-header.nav-open .nav-links li:nth-child(6) { transition-delay: .23s; }
  @media (prefers-reduced-motion: reduce) {
    .nav-links, .nav-links li { transition: none; transform: none; }
  }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}
@media (max-width: 380px) {
  .logo { font-size: 17px; gap: 6px; }
  .logo img { height: 21px; }
  .nav { gap: 10px; }
}

/* ---------- Переключатель языка (RU / EN / KY) ---------- */
html.i18n-pending body { visibility: hidden; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--card);
}
.lang-switch button {
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .04em;
  padding: 6px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  cursor: pointer; line-height: 1; transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.lang-switch button:hover { color: var(--ink); background: var(--paper-dim); }
.lang-switch button.active, .lang-switch button.active:hover { background: var(--accent); color: var(--accent-ink); }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  .lang-switch button { padding: 6px 8px; font-size: 11.5px; }
}