/* ==========================================================================
   ХО «ХОШ» — основной файл стилей
   Структура файла:
   1. Переменные и сброс стилей
   2. Базовая типографика
   3. Утилиты / контейнеры / кнопки
   4. Шапка сайта и навигация
   5. Герой-блок
   6. Секции главной страницы (бренды, направления, о компании, почему мы,
      партнёры, контакты)
   7. Формы
   8. Футер
   9. Каталог (бренды, категории, фильтры)
   10. Внутренние страницы (о компании, партнёрам, новости, контакты)
   11. Плейсхолдеры изображений
   12. Scroll-анимации
   13. Адаптивность
   14. Витрина оборудования и анимационные эффекты (главная страница)
   ========================================================================== */

/* ---------- 1. Переменные и сброс стилей ---------- */
:root {
  --color-primary: #0d4d3c;
  --color-primary-dark: #093a2c;
  --color-primary-light: #145c47;
  --color-primary-soft: #e7f0ec;
  --color-accent: #c1272d;
  --color-accent-dark: #9e1e23;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f7f6;
  --color-bg-dark: #0a3226;
  --color-text: #1c2b26;
  --color-text-light: #5c6d67;
  --color-text-inverse: #f4f7f6;
  --color-border: #e1e8e4;

  /* Фирменный ярко-зелёный акцент премиального тёмного стиля:
     --color-green — насыщенный акцент для текста/обводок/свечения,
     --color-green-btn — приглушённый сплошной зелёный для заливки кнопок. */
  --color-green: #1fcb6b;
  --color-green-2: #22d07a;
  --color-green-btn: #148252;
  --color-green-btn-hover: #1a9c62;
  --color-green-soft: rgba(31, 203, 107, 0.14);
  --color-ink: #040a0a;
  --color-ink-2: #081713;

  --font-main: 'Manrope', 'Segoe UI', Tahoma, Arial, sans-serif;

  --container-width: 1200px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(13, 77, 60, 0.08);
  --shadow-md: 0 8px 24px rgba(13, 77, 60, 0.12);
  --shadow-lg: 0 16px 40px rgba(13, 77, 60, 0.16);
  --shadow-green: 0 10px 26px rgba(20, 130, 82, 0.4);

  --transition: 0.25s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Туркменский текст использует расширенную латиницу (ş, ü, ä, ň, ý) —
   Noto Sans гарантированно покрывает эти символы, поэтому для lang="tk"
   она подключается первой в стеке, с откатом на основной шрифт сайта. */
html[lang="tk"] body {
  font-family: 'Noto Sans', var(--font-main);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

/* ---------- 2. Базовая типографика ---------- */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
}

h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { color: var(--color-text-light); }

/* ---------- 3. Утилиты / контейнеры / кнопки ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-header {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-header p {
  margin-top: 12px;
}

.section-header--left {
  margin: 0 0 40px;
  text-align: left;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition), filter var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-green-btn);
  color: #fff;
  box-shadow: var(--shadow-green);
}

.btn-primary:hover {
  background: var(--color-green-btn-hover);
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 14px 34px rgba(20, 130, 82, 0.5);
}

.btn-secondary {
  background: var(--color-primary);
  color: #fff;
}

.btn-secondary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  transform: translateY(-2px) scale(1.015);
}

.btn-block {
  width: 100%;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 0.78rem;
  font-weight: 600;
}

/* ---------- 4. Шапка сайта и навигация ----------
   Шапка тёмная (глубокий зелёный/угольный) на всех страницах — единый
   элемент сайта независимо от того, светлый или тёмный фон самой страницы. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: linear-gradient(120deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  max-width: var(--container-width);
  margin: 0 auto;
}

/* Шапке нужно больше воздуха, чем читаемому контенту: логотип + 6 пунктов
   меню + переключатель языка + кнопка CTA не помещаются в узкий контейнер
   контента, поэтому на широких экранах разрешаем ей быть немного шире. */
@media (min-width: 1180px) {
  .header-inner {
    max-width: 1320px;
  }
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* В шапке логотипу разрешаем сжиматься, чтобы длинный слоган переносился
   по словам на узких экранах, а не выталкивал шапку в горизонтальный скролл. */
.header-inner .brand-logo {
  flex-shrink: 1;
  min-width: 0;
}

.header-inner .brand-logo-text {
  min-width: 190px;
}

.header-inner .brand-logo-text span {
  overflow-wrap: break-word;
}

.brand-logo img {
  height: 54px;
  width: auto;
}

.header-inner .brand-logo-mark,
.site-footer .brand-logo-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-inner .brand-logo-mark img,
.site-footer .brand-logo-mark img {
  height: 54px;
  width: auto;
}

.brand-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-logo-text strong {
  font-size: 1.05rem;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-logo-text span {
  font-size: 0.72rem;
  color: rgba(244, 247, 246, 0.6);
  font-weight: 500;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: calc(26px * var(--nav-scale, 1));
  flex: 1 1 auto;
  min-width: 0;
}

.main-nav a {
  font-weight: 700;
  font-size: calc(0.82rem * var(--nav-scale, 1));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(244, 247, 246, 0.72);
  position: relative;
  padding: 6px 0 12px;
  white-space: nowrap;
  transition: color var(--transition);
}

.main-nav a:hover,
.main-nav a.active {
  color: #fff;
}

.main-nav a.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 2px;
  background: var(--color-green);
  border-radius: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Переключатель языка — одна компактная кнопка (иконка + код языка),
   раскрывающая список из трёх пунктов, вместо трёх кнопок в ряд, которые
   занимали много места в шапке и наезжали на меню при длинных переводах. */
.lang-switch {
  position: relative;
  flex-shrink: 0;
}

.lang-switch-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(31, 203, 107, 0.3);
  border-radius: var(--radius-pill);
  color: rgba(244, 247, 246, 0.85);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: border-color var(--transition), background var(--transition);
}

.lang-switch-toggle:hover,
.lang-switch.open .lang-switch-toggle {
  border-color: rgba(31, 203, 107, 0.6);
  background: rgba(255, 255, 255, 0.05);
}

.lang-switch-icon {
  display: flex;
  width: 15px;
  height: 15px;
  color: var(--color-green);
}

.lang-switch-icon svg {
  width: 100%;
  height: 100%;
}

.lang-switch-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 96px;
  padding: 4px;
  background: var(--color-ink-2);
  border: 1px solid rgba(31, 203, 107, 0.3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 20;
}

.lang-switch.open .lang-switch-menu {
  display: flex;
}

.lang-switch-menu button {
  padding: 8px 12px;
  border-radius: 8px;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(244, 247, 246, 0.75);
  transition: background var(--transition), color var(--transition);
}

.lang-switch-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.lang-switch-menu button.active {
  background: var(--color-green-btn);
  color: #fff;
}

.header-cta {
  display: none;
}

.header-cta.btn-primary {
  padding: 13px 24px;
  font-size: 0.8rem;
}

.nav-cta-mobile {
  display: none;
}

@media (min-width: 1180px) {
  .header-cta {
    display: inline-flex;
  }
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
}

.burger span {
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.open span:nth-child(2) {
  opacity: 0;
}

.burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1180px) {
  .burger { display: none; }
}

@media (max-width: 1179px) {
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 32px 32px;
    gap: 22px;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
    z-index: 400;
  }

  .main-nav.open {
    transform: translateX(0);
  }

  .main-nav a {
    font-size: 0.95rem;
  }

  .nav-cta-mobile {
    display: inline-flex;
    margin-top: 12px;
    width: 100%;
  }
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 50, 38, 0.4);
  z-index: 350;
}

.nav-overlay.open {
  display: block;
}

/* ---------- 5. Герой-блок ----------
   Глубокий тёмно-зелёный → почти чёрный премиальный фон с едва заметными
   декоративными орбитами и частицами в правой части экрана. */
/* Фон hero — готовая картинка (линии + глобус), см. images/hero/background.jpg.
   Тёмный горизонтальный градиент поверх неё притемняет левую часть под
   текстом, не затрагивая правую половину с глобусом. */
/* Фон hero — фото лаборатории (images/hero/lab-background.jpg), светлое и
   детализированное, поэтому поверх него обязателен плотный тёмно-зелёный
   градиентный оверлей (фирменный --color-ink, не просто чёрный), чтобы
   весь текст — включая карточки статистики справа — оставался читаемым. */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(2, 21, 18, 0.94) 0%, rgba(2, 21, 18, 0.82) 40%, rgba(2, 21, 18, 0.68) 70%, rgba(2, 21, 18, 0.58) 100%),
    url('../images/hero/lab-background.jpg') center / cover no-repeat;
  background-color: var(--color-ink);
  color: #fff;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 48px 24px 0;
  /* Герой занимает экран, но не растягивается бесконечно на больших
     мониторах и не сжимает содержимое на низких — отсюда clamp. */
  min-height: clamp(560px, calc(100vh - 84px), 880px);
}

@supports (height: 100svh) {
  .hero-inner { min-height: clamp(560px, calc(100svh - 84px), 880px); }
}

/* Ниже 1080px витрина статистики скрыта, и растягивать герой на весь экран
   нечем: hero-top с flex: 1 просто раздвигал пустоту между подзаголовком и
   панелью преимуществ. Высоту задаёт контент. */
@media (max-width: 1079px) {
  .hero-inner {
    min-height: 0;
  }

  .hero-top {
    padding-bottom: 36px;
  }
}

.hero-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  flex: 1;
  padding-bottom: 40px;
  min-width: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero .badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(244, 247, 246, 0.92);
}

.hero h1 {
  margin: 18px 0 0;
  font-size: clamp(1.75rem, 2.9vw, 2.75rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  /* break-word рвал слова посреди строки на туркменском и английском —
     переносим только там, где слово реально не помещается целиком. */
  overflow-wrap: break-word;
}

.hero h1 .line {
  display: block;
  color: #fff;
}

.hero h1 .line-accent {
  background: linear-gradient(90deg, var(--color-green) 0%, var(--color-green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Заголовок героя разбит на пять строк вручную, и эта разбивка подогнана под
   русский текст. В туркменском и английском те же фразы заметно длиннее —
   «sarp ediş serişdeleriniň we dermanlaryň» это 39 символов против 26 у самой
   длинной русской строки, — и жёсткая строка не помещается в колонку: браузер
   переносит её второй раз, и правый край становится рваным. Уменьшать кегль до
   помещающегося пришлось бы примерно до 1.5rem, что для заголовка первого
   экрана мало. Поэтому для этих языков строки текут естественно.

   Ниже 641px то же самое уже сделано для всех языков в блоке мобильной
   адаптации, поэтому здесь правила ограничены десктопом. */
@media (min-width: 641px) {
  html[lang="tk"] .hero h1,
  html[lang="en"] .hero h1 {
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    line-height: 1.22;
  }

  html[lang="tk"] .hero h1 .line,
  html[lang="en"] .hero h1 .line {
    display: inline;
  }

  /* Градиент по тексту на inline-элементе, который переносится, рендерится
     непредсказуемо, поэтому акцент здесь — сплошной зелёный. */
  html[lang="tk"] .hero h1 .line-accent,
  html[lang="en"] .hero h1 .line-accent {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--color-green);
    -webkit-text-fill-color: var(--color-green);
  }
}

.hero-divider {
  width: 64px;
  height: 4px;
  border-radius: 2px;
  margin: 22px 0 20px;
  background: linear-gradient(90deg, var(--color-green) 0%, var(--color-green-2) 100%);
}

.hero-subtitle {
  color: rgba(244, 247, 246, 0.72);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---- Правая колонка: витрина статистики — аккуратная симметричная сетка
   2x2, вместо разбросанных карточек вразнобой (выглядело неопрятно и
   несимметрично, особенно с более длинным текстом на других языках). ---- */
.hero-visual {
  position: relative;
  display: none;
  min-width: 0;
}

@media (min-width: 1080px) {
  .hero-top {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
  }

  /* Ровная сетка 2x2: grid-auto-rows: 1fr уравнивает высоту всех четырёх
     карточек по самой высокой, поэтому витрина остаётся прямоугольной
     при любой длине текста (RU/TM/EN). Фиксированной высоты нет — на
     низких экранах карточки больше не сплющиваются. */
  .hero-visual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
    align-content: center;
  }
}

/* ---- Панель преимуществ (4 колонки) ---- */
.hero-advantages {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Колонки разделены линиями ::before с left: -14px, поэтому шаг
     колонки ровно 28px — линия оказывается точно посередине зазора. */
  gap: 24px 28px;
  margin: 0 0 36px;
  padding: 26px 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(4px);
}

@media (min-width: 900px) {
  .hero-advantages {
    grid-template-columns: repeat(4, 1fr);
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--container-width) - 48px);
  }
}

/* В две колонки на 520-640px текст преимуществ ужимался до ~145px и
   расползался на 4 строки, поэтому одна колонка включается уже с 640px. */
@media (max-width: 640px) {
  .hero-advantages {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 20px;
  }

  .hero-advantage::before {
    display: none;
  }

  .hero-advantage {
    gap: 14px;
  }

  .hero-advantage-icon svg {
    width: 34px;
    height: 34px;
  }
}

.hero-advantage {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.hero-advantage::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

@media (min-width: 900px) {
  .hero-advantage:first-child::before {
    display: none;
  }
}

@media (max-width: 899px) {
  .hero-advantage:nth-child(odd)::before {
    display: none;
  }
}

.hero-advantage-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-green);
}

.hero-advantage-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.3;
}

.hero-advantage h4 {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.hero-advantage p {
  color: rgba(244, 247, 246, 0.6);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Простой герой для внутренних страниц */
.page-hero {
  background:
    radial-gradient(ellipse 700px 500px at 88% 20%, rgba(20, 110, 78, 0.22), transparent 62%),
    linear-gradient(150deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: #fff;
  padding: 64px 0;
  text-align: center;
}

.page-hero h1 {
  color: #fff;
}

.page-hero p {
  color: rgba(244, 247, 246, 0.85);
  max-width: 640px;
  margin: 16px auto 0;
}

.breadcrumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(244, 247, 246, 0.7);
  margin-bottom: 16px;
  justify-content: center;
}

.breadcrumbs a {
  color: rgba(244, 247, 246, 0.9);
  font-weight: 600;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* ---------- 6. Секции главной страницы ---------- */

/* Бренды-партнёры */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.brand-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.brand-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

/* ---- "Буклетный" акцент бренда: диагональная угловая плашка + водяной знак ХОШ ----
   Цвет плашки задаётся инлайн через CSS-переменную --brand-accent (см. main.js),
   значение берётся из поля accent в js/catalog-data.js. */
.corner-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 84px;
  height: 84px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.corner-ribbon::after {
  content: '';
  position: absolute;
  width: 124px;
  height: 24px;
  top: 18px;
  right: -32px;
  transform: rotate(45deg);
  background: var(--brand-accent, var(--color-primary));
  box-shadow: 0 2px 6px rgba(10, 30, 24, 0.2);
}

.brand-detail-header .corner-ribbon {
  width: 120px;
  height: 120px;
}

.brand-detail-header .corner-ribbon::after {
  width: 170px;
  height: 32px;
  top: 26px;
  right: -44px;
}

.brand-watermark {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 26px;
  height: 26px;
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
}

.brand-watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-card-logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.brand-card-logo img {
  max-width: 180px;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-card-logo .placeholder-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 1.3rem;
}

.brand-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.brand-card .brand-country {
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

.brand-card p {
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.brand-card .btn {
  padding: 9px 18px;
  font-size: 0.85rem;
}

.section-footer-link {
  text-align: center;
  margin-top: 40px;
}

/* Направления деятельности */
.directions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.direction-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.direction-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.direction-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.direction-icon svg {
  width: 24px;
  height: 24px;
}

.direction-card h3 {
  font-size: 1rem;
}

/* О компании (тизер) */
.about-teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.about-teaser-media {
  position: relative;
}

.about-teaser-text h2 {
  margin-bottom: 18px;
}

.about-teaser-text p {
  margin-bottom: 24px;
}

@media (min-width: 900px) {
  .about-teaser {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

/* Почему мы */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.why-card {
  padding: 28px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.why-card .direction-icon {
  margin-bottom: 16px;
}

.why-card h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.why-card p {
  font-size: 0.9rem;
}

/* Партнёры/поставщики (логотипы) */
.partners-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.partners-strip .logo-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.9rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.partners-strip .logo-slot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-accent, var(--color-primary));
  flex-shrink: 0;
}

.partners-strip .logo-slot:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-accent, var(--color-primary));
}

/* Контакты (CTA-блок) */
.contact-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.contact-cta h2 {
  color: #fff;
}

.contact-cta p {
  color: rgba(244, 247, 246, 0.85);
}

.contact-cta-text {
  position: relative;
  z-index: 1;
}

.contact-cta-decor {
  position: absolute;
  top: 50%;
  right: -10%;
  width: 320px;
  max-width: 60%;
  transform: translateY(-50%);
  opacity: 0.14;
  filter: grayscale(1) brightness(2.4);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 899px) {
  .contact-cta-decor { display: none; }
}

@media (min-width: 900px) {
  .contact-cta {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.contact-cta-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.contact-cta-info a {
  font-weight: 700;
  font-size: 1.05rem;
}

/* ---------- 7. Формы ---------- */
.form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-md);
}

.contact-cta .form-card {
  color: var(--color-text);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 640px) {
  .form-grid.form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
}

.form-field .required-mark {
  color: var(--color-accent);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  background: #fff;
  color: var(--color-text);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-field textarea {
  resize: vertical;
  min-height: 110px;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--color-accent);
}

.field-error {
  display: none;
  font-size: 0.78rem;
  color: var(--color-accent);
  font-weight: 600;
}

.form-field.has-error .field-error {
  display: block;
}

.form-submit-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.form-success {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 600;
  margin-top: 16px;
}

.form-success.show {
  display: flex;
}

/* ---------- 8. Футер ---------- */
.site-footer {
  background: linear-gradient(150deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: rgba(244, 247, 246, 0.85);
  padding: 64px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(244, 247, 246, 0.12);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer-brand .brand-logo {
  display: inline-flex;
  align-items: center;
}

.footer-brand .brand-logo .brand-logo-mark {
  width: 58px;
  height: 58px;
}

.footer-brand .brand-logo-text strong {
  color: #fff;
}

.footer-brand p {
  margin-top: 16px;
  color: rgba(244, 247, 246, 0.65);
  font-size: 0.9rem;
  max-width: 320px;
}

.footer-col h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: rgba(244, 247, 246, 0.7);
  font-size: 0.92rem;
  transition: color var(--transition);
}

.footer-col a:hover {
  color: #fff;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(244, 247, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}

.footer-social a:hover {
  background: var(--color-green);
  border-color: var(--color-green);
  color: #06120d;
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

.footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(244, 247, 246, 0.55);
}

/* ---------- 9. Каталог ---------- */
.filters-bar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-group-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  transition: all var(--transition);
}

.filter-chip:hover {
  border-color: var(--color-primary);
}

.filter-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.catalog-brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.catalog-brand-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.catalog-brand-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.catalog-brand-card-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.catalog-brand-card-logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalog-brand-card-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.catalog-brand-card .placeholder-badge {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.catalog-brand-card-meta {
  color: var(--color-text-light);
  font-size: 0.85rem;
  margin-bottom: 18px;
}

.catalog-brand-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.category-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.category-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.category-card-media {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}

.category-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Цветная лента-подпись с названием категории — фирменный приём печатного
   каталога-буклета. Цвет задаётся инлайн из поля accent бренда (см. main.js). */
.category-card-ribbon {
  padding: 11px 18px;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--brand-accent, var(--color-primary));
}

.category-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.category-card-body p {
  font-size: 0.87rem;
  flex: 1;
}

.category-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 0.8rem;
}

.brand-detail-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

.brand-detail-logo {
  width: 220px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-detail-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-detail-header .placeholder-badge {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  font-size: 2rem;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-light);
}

/* ---------- 10. Внутренние страницы ---------- */
.content-block {
  max-width: 820px;
}

.content-block + .content-block {
  margin-top: 48px;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.value-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.value-item .dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 8px;
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.doc-placeholder {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--color-border);
  background: var(--color-bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text-light);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  padding: 12px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.step-card {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-border);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  margin-bottom: 14px;
}

.step-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.step-card p {
  font-size: 0.88rem;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.news-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.news-card-media {
  aspect-ratio: 16 / 9;
}

.news-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.news-date {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.news-card-body h3 {
  font-size: 1.05rem;
}

.news-card-body p {
  font-size: 0.9rem;
  flex: 1;
}

.contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 900px) {
  .contacts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact-info-item .direction-icon {
  flex-shrink: 0;
}

.contact-info-item h4 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.contact-info-item p,
.contact-info-item a {
  font-size: 0.92rem;
}

.map-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 11. Плейсхолдеры изображений ---------- */
/*
  Плейсхолдер для карточек товаров/брендов, пока нет реальных фото.
  Как только по пути, указанному в data-image, появится настоящий файл,
  скрипт js/main.js автоматически подставит его вместо заглушки (см. main.js).
*/
.image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: rgba(244, 247, 246, 0.92);
  text-align: center;
  padding: 16px;
}

.image-placeholder svg {
  width: 34px;
  height: 34px;
  opacity: 0.9;
}

.image-placeholder span {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.placeholder-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}

/* ---------- 12. Scroll-анимации ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger .reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger .reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger .reveal:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger .reveal:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger .reveal:nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger .reveal:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger .reveal:nth-child(8) { transition-delay: 0.42s; }
.reveal-stagger .reveal:nth-child(9) { transition-delay: 0.48s; }
.reveal-stagger .reveal:nth-child(10) { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

body.lang-fade {
  animation: langFade 0.35s ease;
}

@keyframes langFade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* ---------- 13. Адаптивность (доп. правки) ---------- */
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .contact-cta { padding: 32px 22px; }
  .form-card { padding: 24px 20px; }

  /* Раньше здесь стоял padding-bottom: 48px, который складывался с
     padding-bottom героя-топа и нижним margin панели преимуществ — снизу
     копилось под 120px пустоты. Отступы задаёт только панель. */
  .hero-inner {
    padding: 40px 20px 0;
  }

  .hero-top {
    padding-bottom: 32px;
  }

  .hero-advantages {
    margin-bottom: 32px;
  }

  .hero .badge {
    padding: 7px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }

  /* На телефоне жёсткая разбивка заголовка на 5 блочных строк не работает:
     «медицинского оборудования,» не помещается в ширину экрана и получает
     вторичный перенос с рваным правым краем. Строки становятся строчными и
     текут естественно. Градиент по тексту на перенесённом inline-элементе
     рендерится непредсказуемо, поэтому акцент — сплошной зелёный. */
  .hero h1 {
    margin-top: 14px;
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    line-height: 1.25;
  }

  .hero h1 .line {
    display: inline;
  }

  .hero h1 .line-accent {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--color-green);
    -webkit-text-fill-color: var(--color-green);
  }

  .hero-divider {
    margin: 18px 0 16px;
  }

  .hero-subtitle {
    font-size: 0.97rem;
    margin-bottom: 24px;
  }

  /* Две кнопки в строку не помещаются (у .btn white-space: nowrap), а после
     переноса стояли лесенкой разной ширины — растягиваем на всю ширину. */
  .hero-actions {
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* На узких экранах логотип с фиксированным минимумом ширины и
     переключатель языка/бургер вместе не помещаются в одну строку —
     убираем слоган под названием и снимаем минимальную ширину блока,
     чтобы шапка гарантированно оставалась в одну строку без наложений. */
  .header-inner {
    padding: 12px 16px;
    gap: 12px;
  }

  .header-inner .brand-logo-text {
    min-width: 0;
  }

  .header-inner .brand-logo-text span {
    display: none;
  }

  .header-inner .brand-logo-mark img {
    height: 40px;
  }

  .header-actions {
    gap: 10px;
  }
}

/* ==========================================================================
   14. Правая колонка hero — стеклянные карточки статистики (без фото)
   ========================================================================== */

/* Мягкое зелёное свечение-пятно за карточками — атмосферная подсветка,
   без фотографий, тем же приёмом, что и декор в фоне hero. */
.hero-stats-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86%;
  height: 76%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0, 184, 107, 0.22) 0%, rgba(0, 184, 107, 0.08) 48%, transparent 74%);
  filter: blur(46px);
  pointer-events: none;
  z-index: 0;
}

/* Карточка — колонка «иконка / значение / подпись». Одинаковая структура у
   всех четырёх, поэтому строки выравниваются между собой независимо от того,
   что в карточке: число (9, 500+) или короткая фраза. */
.hero-stat-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  min-height: 150px;
  padding: 22px 20px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.hero-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(31, 203, 107, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

/* Текстовый блок карточки — прямой потомок-обёртка после иконки. */
.hero-stat-card-icon + span {
  display: block;
  width: 100%;
}

.hero-stat-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(31, 203, 107, 0.12);
  border: 1px solid rgba(31, 203, 107, 0.22);
  color: var(--color-green);
}

.hero-stat-card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}

.hero-stat-card-value {
  display: block;
  font-size: clamp(1.5rem, 1.9vw, 1.75rem);
  font-weight: 800;
  line-height: 1.05;
  background: linear-gradient(90deg, var(--color-green) 0%, var(--color-green-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-stat-card-text {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-white-soft, #f4f8f6);
}

.hero-stat-card-label {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
}

@media (max-width: 1259px) {
  .hero-stat-card {
    min-height: 132px;
    padding: 18px 16px;
    gap: 12px;
  }

  .hero-stat-card-icon { width: 38px; height: 38px; }
}

/* ---- Бегущая строка с оборудованием ---- */
.marquee-section {
  overflow: hidden;
  padding: 26px 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: marqueeScroll 32s linear infinite;
}

.marquee-section:hover .marquee-track,
.marquee-section:focus-within .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  flex: 0 0 auto;
  width: 132px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  filter: grayscale(1) opacity(0.65);
  transition: filter 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.marquee-item:hover {
  filter: grayscale(0) opacity(1);
  transform: translateY(-4px);
  border-color: var(--color-primary-light);
}

.marquee-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Полноэкранная витрина с параллаксом ---- */
.showcase-parallax {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  color: #fff;
}

.showcase-bg {
  position: absolute;
  inset: -60px 0;
  width: 100%;
  height: calc(100% + 120px);
  object-fit: cover;
  z-index: 0;
  transform: translateY(0);
  will-change: transform;
}

.showcase-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(9, 58, 44, 0.94) 0%, rgba(10, 50, 38, 0.86) 45%, rgba(13, 77, 60, 0.6) 100%);
}

.showcase-content {
  position: relative;
  z-index: 2;
  padding: 88px 0;
}

.showcase-content .badge {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.showcase-content h2 {
  color: #fff;
  max-width: 640px;
  margin-top: 18px;
}

.showcase-content p {
  color: rgba(244, 247, 246, 0.85);
  max-width: 560px;
  margin-top: 16px;
}

.showcase-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 40px;
}

.showcase-stat strong {
  display: block;
  font-size: 2.1rem;
  font-weight: 800;
}

.showcase-stat span {
  color: rgba(244, 247, 246, 0.75);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 640px) {
  .showcase-parallax { min-height: 340px; }
  .showcase-content { padding: 64px 0; }
}

/* ---- Коллаж фото в блоке "О компании" ---- */
.about-collage {
  position: relative;
  aspect-ratio: 4 / 3;
}

.about-collage-item {
  position: absolute;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}

.about-collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-collage-item:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--color-primary-soft);
}

.about-collage-main {
  top: 0;
  left: 0;
  width: 78%;
  height: 82%;
  z-index: 1;
}

.about-collage-secondary {
  right: 0;
  bottom: 0;
  width: 48%;
  height: 46%;
  z-index: 2;
  border: 4px solid #fff;
}

.about-collage-badge {
  position: absolute;
  top: -16px;
  right: 18%;
  width: 96px;
  height: 96px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px;
  text-align: center;
  color: #fff;
  background: var(--color-accent);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  animation: heroFloat 5s ease-in-out infinite;
}

.about-collage-badge strong {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.about-collage-badge span {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

@media (max-width: 640px) {
  .about-collage-badge { width: 76px; height: 76px; right: 8%; }
  .about-collage-badge strong { font-size: 0.95rem; }
}

/* ---- Варианты scroll-reveal (для витрины и коллажей) ---- */
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-scale { transform: scale(0.92); }

.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-collage-badge,
  .marquee-track {
    animation: none !important;
  }

  .hero-stat-card {
    transition: none;
  }

  .hero-stat-card:hover {
    transform: none;
  }

  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}