/* ============================================
   SAFEVISION — кастомные дополнения к homepage.css
   Подключается ПОСЛЕ homepage.css, перекрывает где нужно.
   ============================================ */

/* ─────────────────────────────────────────────
   HERO — заголовок и пропорции колонок
   Слово «видеонаблюдения» (16 знаков) рвалось на середине, потому что
   base.css задаёт overflow-wrap: break-word на всех h1-h6, а в hero
   стоит max font-size 5.25rem — слово получалось шире своей колонки.
   Решение тройное: запрет рвать слова + уменьшить max шрифта + дать
   текстовой колонке больше места за счёт картинки.
   ───────────────────────────────────────────── */
.hero__title {
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  /* Никаких авто-переносов: слово либо целиком, либо <br> на новую строку.
     Без этого баг возвращается на любой ширине, где слово не влезает. */
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
  /* text-wrap: balance балансирует строки в современных браузерах
     (Chrome 114+, Safari 17.5+, Firefox 121+). В старых — игнорится,
     раскладка остаётся прежней. */
  text-wrap: balance;
}

/* На десктопе расширяем текстовую колонку до 1.4 / 1.0 — картинка
   камеры чуть ужмётся, текст получает дыхание. Меньше 1024px остаётся
   homepage-овская раскладка 1.1 / 1.0 (картинка ещё может быть крупной). */
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

/* Узкие телефоны (≤ 420px): пара пикселей не хватает чтобы «ПОД КЛЮЧ»
   осталось на одной строке с «в Алматы», и кнопки CTA + WhatsApp
   переходят в столбец. Сжимаем заголовок и сами CTA-кнопки чтобы
   раскладка совпадала с тем, что видно на 421px и шире. */
@media (max-width: 420px) {
  .hero__title {
    font-size: 2.25rem;
    line-height: 1.02;
  }
  .hero__cta .btn--lg {
    height: 46px;
    padding-left: 18px;
    padding-right: 6px;
    font-size: 0.8125rem;
    gap: 8px;
  }
  .hero__cta .btn--lg.btn--with-icon-left {
    padding-left: 6px;
    padding-right: 18px;
  }
  .hero__cta .btn--lg .btn__capsule,
  .hero__cta .btn--lg .btn__wa {
    width: 34px;
    height: 34px;
  }
}

/* ─────────────────────────────────────────────
   HEADER LOGO (SVG icon + text "SafeVision.kz")
   ───────────────────────────────────────────── */
.header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.header__logo:hover { opacity: 0.82; }

.header__logo-icon {
  flex-shrink: 0;
  display: block;
}

.header__logo-text {
  white-space: nowrap;
}
.header__logo-text-kz {
  color: var(--color-ink-muted);
  font-weight: 500;
}

@media (max-width: 767px) {
  .header__logo {
    font-size: 0.9375rem;
    gap: 8px;
  }
  .header__logo-icon {
    width: 24px;
    height: 24px;
  }
}

/* ─────────────────────────────────────────────
   FOOTER LOGO — pill-капсула как в header.
   Тёмный elev-фон, тонкая рамка, скруглённые края.
   Всегда в капсуле, на всех экранах. На мобиле/планшете
   весь brand-блок центрируется через .footer__brand.
   ───────────────────────────────────────────── */
.footer__about-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 8px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: 18px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.footer__about-logo:hover {
  background: var(--color-bg-elev-2);
  border-color: var(--color-bg-elev-2);
}

.footer__about-logo-icon {
  flex-shrink: 0;
  display: block;
}
.footer__about-logo-text {
  white-space: nowrap;
}
.footer__about-logo-kz {
  color: var(--color-ink-muted);
  font-weight: 500;
}

/* На мобиле и планшете (< 1024px) brand-блок по центру.
   На десктопе остаётся как есть — слева. */
@media (max-width: 1023px) {
  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__brand .footer__about-text {
    max-width: 360px;
  }
}

/* На мобиле (< 768px): убираем колонки «Сайт» и «Информация» —
   их назначение дублирует бургер-меню сверху, в футере на мобиле
   они только перегружают. Остаётся:
     [brand]      — на всю ширину, центрирован
     [Контакты]   — на всю ширину, центрирован
   На десктопе ≥ 1024px все 4 колонки видны как раньше. */
@media (max-width: 767px) {
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  /* Скрываем 2-ю и 3-ю колонки (Сайт, Информация) на мобиле */
  .footer__grid > div:nth-child(2),
  .footer__grid > div:nth-child(3) {
    display: none;
  }
  /* Контакты — центрированы внутри */
  .footer__grid > .footer__contacts {
    text-align: center;
    align-items: center;
  }
  .footer__grid > .footer__contacts .footer__col-title,
  .footer__grid > .footer__contacts .footer__phone,
  .footer__grid > .footer__contacts .footer__address {
    text-align: center;
  }
  .footer__grid > .footer__contacts .footer__social {
    justify-content: center;
  }
  /* Footer-bottom (copyright + legal) тоже по центру на мобиле */
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .footer__legal {
    justify-content: center;
  }
}

/* Перенос строки только на мобиле/планшете.
   На десктопе ≥ 1024px br скрыт — текст в одну строку как раньше. */
.br-not-desk { display: inline; }
@media (min-width: 1024px) {
  .br-not-desk { display: none; }
}

/* ─────────────────────────────────────────────
   HERO IMAGE PLACEHOLDER fallback
   (если картинка не загрузилась — полосатый плейсхолдер)
   ───────────────────────────────────────────── */
.hero__visual--placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-bg-elev-2) 0 8px,
      var(--color-bg-elev) 8px 16px
    );
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  aspect-ratio: 5 / 3;
}

/* Ещё fallback — если изображения нет, .product-card и .gallery__item
   показывают полосатый паттерн вместо пустой белой дыры */
.product-card__image,
.gallery__item {
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-bg-elev-2) 0 8px,
      var(--color-bg-elev) 8px 16px
    );
}

/* ─────────────────────────────────────────────
   ESTIMATE — образец сметы как настоящий КП
   Светлая секция, карточка с тенью, таблица с тонкими разделителями.
   На мобиле table.estimate-table превращается в карточки-стек.
   ───────────────────────────────────────────── */
.estimate-card {
  margin-top: 32px;
  background: var(--color-bg-light-elev);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
}
@media (min-width: 1024px) {
  .estimate-card {
    margin-top: 48px;
    border-radius: var(--radius-xl);
  }
}

.estimate-card__head {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .estimate-card__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 36px;
  }
}
.estimate-card__doc-no {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-light-muted);
  margin-bottom: 6px;
}
.estimate-card__doc-title {
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-ink-light);
  line-height: 1.3;
}
.estimate-card__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 768px) {
  .estimate-card__head-right { align-items: flex-end; text-align: right; }
}
.estimate-card__client {
  font-size: 0.8125rem;
  color: var(--color-ink-light-muted);
}

/* Swipe-индикатор: видим только когда таблица не помещается по ширине
   (то есть на узких экранах). На десктопе скрываем. */
.estimate-card__swipe-hint {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(212, 245, 106, 0.16);
  border: 1px solid rgba(212, 245, 106, 0.40);
  border-radius: var(--radius-pill);
  color: var(--color-accent-dark);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  animation: swipe-pulse 1.8s ease-in-out infinite;
}
@media (max-width: 1023px) {
  .estimate-card__swipe-hint { display: inline-flex; }
}
@keyframes swipe-pulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* TABLE — на всех устройствах остаётся обычной таблицей.
   Min-width 920px — гарантия что числовые колонки и артикул умещаются
   в одну строку, описание позиции максимум 2 строки.
   На мобиле горизонтальный скролл через .estimate-table-wrap. */
.estimate-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.estimate-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  color: var(--color-ink-light);
  table-layout: fixed;
}
/* Распределение ширины колонок: позиция растягивается, остальные фикс.
   1-я (Позиция): auto. 2-я (Артикул): 160px. 3-я (Кол-во): 90px.
   4-я (Цена): 130px. 5-я (Сумма): 140px. Сумма ≈ 520px на колонки 2-5,
   позиция получает 920-520 = 400px. На широких экранах позиция
   увеличивается. */
.estimate-table col-position { width: auto; }
.estimate-table thead th:nth-child(1),
.estimate-table tbody td:nth-child(1) { width: auto; }
.estimate-table thead th:nth-child(2),
.estimate-table tbody td:nth-child(2) { width: 160px; }
.estimate-table thead th:nth-child(3),
.estimate-table tbody td:nth-child(3) { width: 90px; }
.estimate-table thead th:nth-child(4),
.estimate-table tbody td:nth-child(4) { width: 130px; }
.estimate-table thead th:nth-child(5),
.estimate-table tbody td:nth-child(5) { width: 140px; }
.estimate-table thead th {
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.025);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-light-muted);
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.estimate-table thead th.num { text-align: right; }
.estimate-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
  line-height: 1.45;
}
.estimate-table tbody td.num { text-align: right; white-space: nowrap; }
.estimate-table tbody td:nth-child(2) { white-space: nowrap; }
/* Описание под названием — макс 2 строки */
.estimate-cell-muted {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.estimate-table tbody tr:hover { background: rgba(0, 0, 0, 0.02); }
.estimate-table tbody td strong {
  color: var(--color-ink-light);
  font-weight: 600;
}
.estimate-cell-muted {
  color: var(--color-ink-light-muted);
  font-size: 0.8125rem;
}
.estimate-cell-label { display: none; }
.estimate-table__divider td {
  padding: 10px 24px !important;
  background: rgba(0, 0, 0, 0.04);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-light-muted);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.estimate-table tfoot th,
.estimate-table tfoot td {
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.04);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink-light);
  text-align: left;
  border-top: 2px solid rgba(0, 0, 0, 0.08);
}
.estimate-table tfoot td.num {
  text-align: right;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.estimate-card__foot {
  padding: 22px 24px;
  background: rgba(0, 0, 0, 0.025);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .estimate-card__foot {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 36px;
  }
}
.estimate-card__foot-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.estimate-card__perk {
  font-size: 0.8125rem;
  color: var(--color-ink-light-muted);
  font-weight: 500;
}

.estimate__note {
  margin-top: 20px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-ink-light-muted);
}

/* ─────────────────────────────────────────────
   SEGMENTS BENTO — иерархия вместо равномерной сетки
   Hero «Частный дом» занимает левую колонку и rowspan 2,
   остальные 4 — компактная 2×2 сетка справа.
   На планшете hero полной шириной сверху, 4 в 2×2 ниже.
   На мобиле — стек.
   ───────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .segments__grid--bento {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
  }
  .segments__grid--bento .segment-card--hero {
    grid-column: 1 / span 2;
  }
}
@media (min-width: 1024px) {
  .segments__grid--bento {
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
  }
  /* Hero — левый столбец, на 2 строки. Не использую repeat() —
     явные индексы стабильнее при будущих перестановках. */
  .segments__grid--bento .segment-card--hero {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

/* HERO-карточка — реальное фото фасада коттеджа на фоне.
   Текст поверх фото читается за счёт градиентного overlay снизу.
   Чипы и бэйдж — стеклянные (backdrop-filter blur), чтобы хорошо
   ложились поверх любого участка фото. */
.segment-card--hero {
  position: relative;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
@media (min-width: 1024px) {
  .segment-card--hero {
    padding: 40px;
    gap: 28px;
    min-height: 520px;
  }
}
.segment-card--hero:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

/* Фоновое фото — занимает всю карточку под слоем текста */
.segment-card__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.segment-card__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* center 30% — крыша коттеджа на photo-03 в верхней трети кадра.
     При cover-обрезке остаётся в видимой зоне; при подмене фото
     можно подкрутить object-position через override. */
  object-position: center 30%;
  display: block;
  transition: transform var(--transition-slow);
}
.segment-card--hero:hover .segment-card__hero-img {
  transform: scale(1.04);
}
/* Затемнение к низу для читаемости текста.
   Сверху лёгкий тинт чтобы не было ярких пересветов на небе. */
.segment-card__hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 15, 13, 0.30) 0%,
    rgba(14, 15, 13, 0.55) 45%,
    rgba(14, 15, 13, 0.92) 100%
  );
  pointer-events: none;
}

/* Все элементы поверх фото поднимаем z-index */
.segment-card__hero-badge,
.segment-card__hero-body,
.segment-card__hero-cta {
  position: relative;
  z-index: 1;
}

/* Бэйдж «Топ-сегмент» — стеклянный с лаймовой подсветкой,
   читается на любой части фото. На мобиле/планшете (< 768px) делаем
   статичным первым блоком сверху, чтобы не накладывался на заголовок —
   на узких экранах title растёт и упирался в бейдж. */
.segment-card__hero-badge {
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--color-accent);
  color: #0E0F0D;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(212, 245, 106, 0.35);
}
@media (min-width: 768px) {
  .segment-card__hero-badge {
    position: absolute;
    top: 24px;
    right: 24px;
  }
}
@media (min-width: 1024px) {
  .segment-card__hero-badge {
    top: 32px;
    right: 32px;
  }
}

/* Тело hero — прижато к низу, чтобы фото играло основную роль вверху */
.segment-card__hero-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
}

.segment-card__title--hero {
  font-family: var(--font-sans);
  font-size: clamp(1.625rem, 2.8vw, 2.125rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0;
  /* Тонкая тень под заголовком — отделяет текст от фото в светлых
     участках кадра (небо, светлая стена) */
  text-shadow: 0 2px 12px rgba(14, 15, 13, 0.55);
}

.segment-card__desc--hero {
  color: rgba(244, 241, 232, 0.78);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
  text-shadow: 0 1px 8px rgba(14, 15, 13, 0.6);
}

/* Чипы фич — стеклянные с blur, читаемы на фото */
.segment-card__hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.segment-card__tag {
  padding: 5px 12px;
  background: rgba(14, 15, 13, 0.55);
  border: 1px solid rgba(244, 241, 232, 0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--color-ink);
  white-space: nowrap;
}

/* CTA-pill внизу hero — стиль 1-в-1 с hero-кнопкой «Получить расчёт»
   (.btn--primary.btn--lg.btn--with-icon-right): высота 52px,
   тёмная круглая капсула 40px со стрелкой справа. */
.segment-card__hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  height: 52px;
  padding: 0 8px 0 24px;
  background: var(--color-accent);
  color: #0E0F0D;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  margin-top: auto;
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
}
.segment-card__hero-cta .btn__capsule {
  width: 40px;
  height: 40px;
}
.segment-card--hero:hover .segment-card__hero-cta {
  transform: translateX(2px);
  box-shadow: 0 8px 24px rgba(212, 245, 106, 0.25);
}

/* Узкие телефоны (≤ 420px): «Подобрать комплект для дома» — длинный
   текст 27 знаков, на стандартном size 52/40 переносится на 2 строки.
   Сжимаем кнопку и капсулу аналогично hero-CTA на узких экранах. */
@media (max-width: 420px) {
  .segment-card__hero-cta {
    height: 46px;
    padding: 0 6px 0 18px;
    font-size: 0.8125rem;
    gap: 8px;
    white-space: nowrap;
  }
  .segment-card__hero-cta .btn__capsule {
    width: 34px;
    height: 34px;
  }
}

/* SMALL CARDS — без иконок и без перков, текст-only.
   Title прижимаем к верху (без иконки нечего отступать), CTA «Написать →»
   прижимаем к низу через margin-top: auto чтобы низы выровнялись. */
.segments__grid--bento .segment-card:not(.segment-card--hero) {
  display: flex;
  flex-direction: column;
}
.segments__grid--bento .segment-card:not(.segment-card--hero) .segment-card__title {
  margin-top: 0;
}
.segments__grid--bento .segment-card:not(.segment-card--hero) .segment-card__more {
  margin-top: auto;
  padding-top: 16px;
}

/* Единый радиус скругления для всех 5 карточек bento — homepage.css
   ставит малым свой radius, hero был 18px (radius-lg). Принудительно
   выравниваем — иначе hero и 2x2 «прыгают» по углам. */
.segments__grid--bento .segment-card,
.segments__grid--bento .segment-card--hero {
  border-radius: var(--radius-lg);
}

/* ─────────────────────────────────────────────
   WHY-US — выравнивание карточек по высоте
   В CSS Grid дочерние элементы по умолчанию stretch внутри ряда,
   но между рядами высоты разные (зависит от длины описания).
   grid-auto-rows: 1fr заставляет все ряды быть одинаковой высоты —
   все 6 карточек становятся ровными независимо от количества строк.
   ───────────────────────────────────────────── */
.why-grid {
  grid-auto-rows: 1fr;
}
.why-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Описание тянется на всё свободное место, чтобы карточка заполнялась
   равномерно даже если текст коротковат. */
.why-card__desc {
  flex: 1;
}

/* ─────────────────────────────────────────────
   EQUIPMENT BLOCK — Hikvision vs HiWatch (horizontal split)
   2 карточки одна под другой во всю ширину. Внутри — фото и текст бок
   о бок. Вторая карточка зеркальная (фото справа), создаёт ритм-«змейку».
   На мобиле — стек: фото сверху, текст снизу.
   ───────────────────────────────────────────── */
.equipment__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .equipment__grid {
    gap: 28px;
    margin-top: 48px;
  }
}

.equipment__card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.equipment__card:hover {
  border-color: var(--color-bg-elev-2);
  transform: translateY(-2px);
}

@media (min-width: 900px) {
  .equipment__card {
    flex-direction: row;
    align-items: stretch;
    min-height: 420px;
  }
  /* Зеркальная карточка: фото справа, текст слева. Создаёт «змейку» —
     взгляд бежит зигзагом, секция читается ритмично. */
  .equipment__card--reverse {
    flex-direction: row-reverse;
  }
}

/* MEDIA — фото-сторона */
.equipment__card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-bg-elev-2) 0 8px,
      var(--color-bg-elev) 8px 16px
    );
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .equipment__card-media {
    /* На десктопе фото = 50% ширины, тянется на всю высоту карточки.
       aspect-ratio убираем, иначе фото будет принудительно подгонять
       высоту, и текстовая колонка получит слишком много или мало места. */
    flex: 0 0 50%;
    aspect-ratio: auto;
    min-height: 100%;
  }
}
.equipment__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Бейдж-чип в углу фото */
.equipment__card-tag {
  position: absolute;
  top: 16px; left: 16px;
  padding: 6px 14px;
  background: var(--color-accent);
  color: #0E0F0D;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
}
.equipment__card-tag--alt {
  background: rgba(14, 15, 13, 0.85);
  color: var(--color-ink);
  border: 1px solid rgba(244, 241, 232, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* CONTENT — текстовая сторона */
.equipment__card-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}
@media (min-width: 768px) {
  .equipment__card-content {
    padding: 32px;
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .equipment__card-content {
    padding: 44px 48px;
    gap: 22px;
    flex: 1 1 50%;
    justify-content: center;
  }
}

.equipment__card-title {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.equipment__card-lead {
  color: var(--color-ink-muted);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.5;
  margin: 0;
  max-width: 480px;
}

/* Буллеты — короче, плотнее, акцент через жирный + accent-маркер слева */
.equipment__card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  margin: 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  list-style: none;
}
.equipment__card-list li {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-ink);
  padding-left: 20px;
  position: relative;
}
.equipment__card-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 10px; height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}
.equipment__card-list strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* Подвал карточки — chip-теги «для каких объектов» */
.equipment__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.equipment__card-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
}

/* Footer-блок с CTA «Вызвать инженера» под двумя карточками */
.equipment__footer {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .equipment__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}
@media (min-width: 1024px) {
  .equipment__footer {
    margin-top: 48px;
    padding-top: 36px;
  }
}
.equipment__footer-note {
  color: var(--color-ink-muted);
  font-size: 0.9375rem;
  max-width: 620px;
  margin: 0;
}

/* ─────────────────────────────────────────────
   AUDIT BANNER — перехват тёплого трафика
   ───────────────────────────────────────────── */
.audit-banner .container {
  display: flex;
  justify-content: center;
}
.audit-banner__inner {
  max-width: 820px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.audit-banner__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.audit-banner__text {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  color: var(--color-ink-light-muted);
  max-width: 620px;
}
.audit-banner__text strong {
  color: var(--color-ink-light);
  font-weight: 600;
}
.audit-banner__cta {
  margin-top: 8px;
}

/* ─────────────────────────────────────────────
   CONTACTS MAP — grayscale filter + 2GIS badge only
   Google убран по требованию клиента.
   ───────────────────────────────────────────── */
.contacts__map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  min-height: 360px;
}
@media (min-width: 768px) {
  .contacts__map { min-height: 460px; }
}
.contacts__map iframe {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  display: block;
  filter: grayscale(1) contrast(0.95) brightness(0.94);
  transition: filter var(--transition-slow);
}
.contacts__map:hover iframe {
  filter: grayscale(0.7) contrast(1) brightness(1);
}

.contacts__map-actions {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.contacts__map-action {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(14, 15, 13, 0.85);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--transition-fast);
}
.contacts__map-action:hover {
  background: var(--color-accent);
  color: #0E0F0D;
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.contacts__map-action svg {
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   FOOTER SOCIAL — Instagram/TG/WA унифицированные
   На hover лайм-фон + чёрная иконка (раньше иконка тоже была лайм
   и пропадала на лайм-фоне). Теперь контраст явный.
   ───────────────────────────────────────────── */
.footer__social-btn {
  color: var(--color-ink-muted);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.footer__social-btn:hover {
  background: var(--color-accent);
  color: #0E0F0D;
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────
   CONTACTS — 4 карточки слева 2x2, карта справа, мессенджеры под картой.
   На мобиле порядок: список → карта → мессенджеры (естественный flow).
   На десктопе через grid-template-areas:
     [list ] [map        ]
     [list ] [messengers ]
   Список тянется на 2 ряда, карта одна, мессенджеры под картой.
   ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .contacts__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "list map"
      "list messengers";
    align-items: stretch;
  }
  .contacts__list { grid-area: list; }
  .contacts__map { grid-area: map; }
  .contacts__messengers { grid-area: messengers; }
}

/* Заголовок контактов на мобиле — всегда 2 строки независимо от
   ширины. font-size с clamp подстраивается под viewport: на 320px
   получается ≈ 1.375rem (22px), на 767px ≈ 1.875rem (30px). Самая
   длинная строка «Мы в Алматы – приезжайте» (24 знака) умещается
   на любой ширине от 320 до 767. */
@media (max-width: 767px) {
  .contacts__title {
    font-size: clamp(1.375rem, 5.5vw, 1.875rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
}

/* На мобиле — grid-template-areas: каждая кнопка занимает свою ячейку
   и сохраняет ширину по контенту (justify-self: start/end/center).
   Telegram (tg) + Instagram (ig) сверху в одной строке, WhatsApp (wa)
   на 2-й строке по центру. Все три центрированы на странице через
   justify-content: center на родителе.
   grid-template-columns: auto auto — колонки по содержимому, не растягиваются. */
@media (max-width: 767px) {
  .contacts__messengers {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "tg ig"
      "wa wa";
    justify-content: center;
    gap: 8px 12px;
  }
  .contacts__messengers > a:nth-child(1) {
    grid-area: wa;
    justify-self: center;
  }
  .contacts__messengers > a:nth-child(2) { grid-area: tg; }
  .contacts__messengers > a:nth-child(3) { grid-area: ig; }
}

/* ─────────────────────────────────────────────
   FOOTER BOTTOM — после удаления Kaspi/Halyk/Freedom осталось
   2 элемента: copyright и legal-ссылки. Раскладываю flex'ом
   с justify-content: space-between (раньше был grid на 3 колонки).
   ───────────────────────────────────────────── */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

/* ─────────────────────────────────────────────
   FOOTER LEGAL — «Реквизиты» (button) и «Политика» (a) в одном стиле:
   серый текст --color-ink-muted, hover на лайм. Один класс для обоих.
   ───────────────────────────────────────────── */
.footer__legal-link {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-ink-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.footer__legal-link:hover {
  color: var(--color-accent);
}

/* ─────────────────────────────────────────────
   REQUISITES MODAL — список реквизитов с легко-копируемыми значениями.
   Лейбл слева mono-метка, значение справа крупным, user-select: all
   позволяет одним кликом выделить и скопировать.
   ───────────────────────────────────────────── */
.requisites-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.requisites-list__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 480px) {
  .requisites-list__row {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }
}
.requisites-list__row:last-child { border-bottom: 0; }

.requisites-list__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  flex-shrink: 0;
  min-width: 96px;
}
.requisites-list__value {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  user-select: all;
  word-break: break-all;
}

/* Sticky FAB — иконка Instagram */
.sticky-fab__icon--ig {
  background: var(--color-bg);
  color: var(--color-accent);
}
.sticky-fab__item:hover .sticky-fab__icon--ig {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ─────────────────────────────────────────────
   PACKAGES — отмена reveal-анимации на блоке моделей.
   Reveal-observer в app.js использует threshold: 0.12 — это требует
   12% площади всего .models-grid быть видимыми. На мобиле контейнер
   с 8 карточками очень высокий (~3500-4000px), 12% от этого = ~450px,
   а viewport ~700-800px — пересечение наступает поздно, и пока юзер
   не дошёл до низа секции, карточки висят с opacity: 0. Снимаем
   reveal-эффект: контейнер сразу показывает все 8 карточек, без
   зависимости от scroll-positionа.
   ───────────────────────────────────────────── */
.models-grid.reveal-stagger > *,
.models-grid.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────
   PRODUCT-CARD IMAGE
   Реальные пропорции Gemini-фото = 600×389 (~3:2).
   aspect-ratio фиксирует слот, cover не режет при точном отношении.
   ───────────────────────────────────────────── */
.product-card__image {
  aspect-ratio: 600 / 389;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-bg-elev-2) 0 8px,
      var(--color-bg-elev) 8px 16px
    );
  min-height: unset;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: 0;
  display: block;
}

/* Пока картинок нет — скрыть alt-текст из placeholder,
   чтобы длинные описания не торчали из полосатого фона. */
.product-card__image img:not([complete]),
.gallery__item img:not([complete]) {
  color: transparent;
  font-size: 0;
}

/* ─────────────────────────────────────────────
   PRODUCT-CARD — выравнивание карточек по высоте
   Карточка = flex-column. Спецификация тянется, цена/кнопки
   прилипают к низу — все карточки становятся ровными.
   ───────────────────────────────────────────── */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card__specs {
  flex: 1;
}

/* ─────────────────────────────────────────────
   PRODUCT-CARD RHYTHM
   Ритм карточки: заголовок → рейтинг → линия-разделитель
   → буллеты → линия-разделитель → цена → кнопки.
   Визуально выделяет спецификацию как отдельный блок.
   ───────────────────────────────────────────── */
.product-card__title {
  margin: 14px 0 0;
  /* Убираем GoLine-овский min-height: 2.6em — он резервировал под 2 строки
     и создавал лишний воздух между заголовком и звёздочками. Теперь
     выравнивание карточек обеспечивает flex:1 на .product-card__specs. */
  min-height: unset;
  display: block;
  align-items: initial;
  /* Плотный line-height — иначе baseline шрифта добавляет ~0.25em
     визуального воздуха снизу, и заголовок «парит» над рейтингом. */
  line-height: 1.1;
}
.product-card__rating {
  margin-top: 6px;     /* 6px = ровно один зазор, плотно к заголовку */
  margin-bottom: 18px;
}

/* Верхняя и нижняя разделительная линия у блока specs,
   плюс "дышащие" отступы до/после. Специфика визуально
   отделена от заголовка и цены. */
.product-card__specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 16px 0;
  margin: 0 0 20px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.product-card__specs li {
  display: block;
  padding-left: 14px;
  position: relative;
  font-size: 0.8125rem;  /* 13px — мельче заголовка */
  line-height: 1.4;
  color: var(--color-ink-muted);
  font-weight: 400;
  /* Отменяем flex-верстку из homepage.css */
  justify-content: initial;
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0;
  /* Жёстко одна строка — иначе на узких колонках длинные буллеты ломались
     на 2 строки и карточки получались разной высоты. Если текст не влезает,
     CSS ставит многоточие вместо переноса. Тексты буллетов в HTML
     подобраны так, что многоточие не должно срабатывать на стандартных
     ширинах сетки (4 / 3 / 2 / 1 колонка). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__specs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 1.5px;
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.85;
}
/* Отменяем старые label/value стили */
.product-card__specs li span,
.product-card__specs li strong {
  display: inline;
  color: inherit;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* ─────────────────────────────────────────────
   MODELS FOOTER — единый CTA-блок «не нашли пакет — соберём индивидуально»
   Слева текст-вопрос клиенту, справа кнопка.
   В тонкой окантовке как отдельная карточка, чтобы не сливался с фоном.
   На мобиле — стек: текст сверху, кнопка снизу full-width.
   ───────────────────────────────────────────── */
.models-footer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 56px;
  padding: 22px 24px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .models-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 26px 32px;
  }
}
@media (min-width: 1024px) {
  .models-footer {
    margin-top: 80px;
    padding: 30px 40px;
  }
}
@media (max-width: 599px) {
  .models-footer {
    margin-top: 36px;
  }
  .models-footer .models-cta {
    width: 100%;
  }
}

.models-footer__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.models-footer__title {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  letter-spacing: -0.015em;
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0;
}
.models-footer__lead {
  color: var(--color-ink-muted);
  font-size: 0.9375rem;
  line-height: 1.45;
  max-width: 560px;
  margin: 0;
}

/* CTA-кнопка — большая, лаймовая, с лёгким лаймовым свечением.
   Стиль одинаковый и в footer'е сетки, и на возможных будущих местах. */
.models-cta {
  flex-shrink: 0;
  height: 48px;
  padding: 0 8px 0 22px;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(212, 245, 106, 0.18),
              0 0 0 1px rgba(14, 15, 13, 0.04) inset;
  justify-content: center;
}
.models-cta .btn__capsule {
  width: 36px;
  height: 36px;
}
.models-cta:hover {
  box-shadow: 0 10px 28px rgba(212, 245, 106, 0.32),
              0 0 0 1px rgba(14, 15, 13, 0.06) inset;
  transform: translateY(-1px);
}
@media (min-width: 900px) {
  .models-cta {
    height: 52px;
    padding: 0 8px 0 26px;
    font-size: 1rem;
  }
  .models-cta .btn__capsule {
    width: 40px;
    height: 40px;
  }
}

/* ─────────────────────────────────────────────
   ABOUT — split-layout (фото слева компактное, текст и факты справа)
   Stripe/Vercel team-page стиль. Фото 4:3 в колонке 5/12 — заметное,
   но не доминирует. Справа: lead + 3 цифры в линию. Без плашек,
   без рамок, без бесполезного воздуха.
   ───────────────────────────────────────────── */
.about .about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .about .about__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    /* stretch: контент справа растягивается на высоту фото слева,
       чтобы нижняя карточка fact'а легла на уровень нижнего края фото. */
    align-items: stretch;
  }
}

.about .about__visual {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-elev);
  margin: 0;
}
.about .about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.about .about__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* На десктопе занимает всю высоту своей колонки (фото-колонки слева),
     facts получает flex: 1 и распределяется так, что низ совпадает
     с низом фото. */
}
@media (min-width: 900px) {
  .about .about__content {
    gap: 32px;
    height: 100%;
  }
}

.about .about__lead {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--color-ink-light-muted);
  margin: 0;
  max-width: 560px;
  letter-spacing: -0.005em;
}

/* 3 факта — горизонтально вытянутые карточки, одна под другой.
   Серая нейтральная палитра, цифра слева в фиксированной колонке,
   подпись справа — все циферы и все подписи выровнены друг под другом.
   Минималистично, без лаймовых акцентов.
   На десктопе flex: 1 на каждой карточке + flex: 1 на самом списке —
   три карточки равномерно заполняют высоту фото-колонки слева. */
.about .about__facts {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 0;
}
@media (min-width: 900px) {
  .about .about__facts {
    flex: 1;
    gap: 16px;
  }
}

.about .about__fact {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* Тот же радиус, что у фото слева — единый ритм скруглений */
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  text-align: left;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}
@media (min-width: 768px) {
  .about .about__fact { padding: 24px 28px; }
}
@media (min-width: 900px) {
  .about .about__fact {
    /* Растягиваются равномерно на доступной высоте */
    flex: 1;
  }
}
.about .about__fact:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateX(2px);
}

/* Цифра — фиксированная min-width слева, чтобы все три выровнялись
   друг под другом и подписи начинались с одной вертикальной линии. */
.about .about__fact-num {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink-light);
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  min-width: 96px;
}
@media (min-width: 768px) {
  .about .about__fact-num { min-width: 120px; }
}
/* «+» и «м²» теперь в нейтральном муute, не лаймовом */
.about .about__fact-num em {
  font-style: normal;
  color: var(--color-ink-light-muted);
  font-weight: 500;
  margin-left: 2px;
  font-size: 0.7em;
}

/* Подпись справа от цифры, без декоративных полосок */
.about .about__fact-label {
  position: static;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-ink-light-muted);
  letter-spacing: -0.005em;
}
.about .about__fact-label::before {
  /* убираем лаймовую полоску из прошлой версии */
  content: none;
}

/* ─────────────────────────────────────────────
   GALLERY — плавное появление без translateY-подскакивания.
   homepage.css задаёт reveal-stagger: opacity 0 + translateY(24) +
   transition 0.7s. На галерее это смотрится как «подскакивание снизу».
   Заменяем на чистое opacity-fade с быстрым timing'ом.
   ───────────────────────────────────────────── */
.gallery__grid.reveal-stagger > * {
  transform: none !important;
  transition-property: opacity;
  transition-duration: 0.35s;
  transition-timing-function: ease-out;
}
.gallery__grid.reveal-stagger.is-visible > * {
  transform: none !important;
}

/* ─────────────────────────────────────────────
   GALLERY — реальные фото работ из works/ + Смотреть ещё
   Сетка 4 колонки на десктопе, 3 на планшете, 2 на мобиле.
   12 фото видны сразу, 27 .gallery__item--more раскрываются по клику.
   Фото единого аспекта 4/3 через object-fit cover, hover-зум +
   лёгкий vignette overlay для премиум-ощущения.
   ───────────────────────────────────────────── */
.gallery__grid {
  gap: 12px;
}
@media (min-width: 768px) {
  .gallery__grid { gap: 14px; }
}
@media (min-width: 1024px) {
  .gallery__grid { gap: 16px; }
}

.gallery__item {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-bg-elev-2) 0 8px,
      var(--color-bg-elev) 8px 16px
    );
  transition: transform var(--transition-base);
}
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform var(--transition-slow);
}
/* Тонкий vignette внизу — еле заметный, держит карточки в общем тёмном
   ритме сайта, маскирует разнобой пользовательских фото. */
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 65%,
    rgba(14, 15, 13, 0.35) 100%
  );
  pointer-events: none;
  transition: background var(--transition-base);
}
.gallery__item:hover {
  transform: translateY(-2px);
}
.gallery__item:hover img {
  transform: scale(1.05);
}
.gallery__item:hover::after {
  background: linear-gradient(180deg,
    transparent 50%,
    rgba(14, 15, 13, 0.5) 100%
  );
}

/* Скрытые до раскрытия */
.gallery__item--more {
  display: none;
}
.gallery__grid--expanded .gallery__item--more {
  display: block;
}

/* Кнопка «Смотреть ещё» — чуть крупнее обычной btn--md */
.gallery__more-btn {
  height: 48px;
  padding: 0 26px;
  font-size: 0.9375rem;
}

/* ─────────────────────────────────────────────
   REVIEWS — выравнивание карточек одной высоты
   Тексты разной длины (короткие 1 предложение, длинные 5+), но
   карточки в карусели должны выглядеть единообразно. min-height +
   flex-column + flex: 1 на тексте дают ровный нижний край во всех 30.
   ───────────────────────────────────────────── */
.review-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
@media (min-width: 768px) {
  .review-card { min-height: 340px; }
}
.review-card__text {
  flex: 1;
}

/* ─────────────────────────────────────────────
   LIGHTBOX — модалка для просмотра фото галереи
   Тёмный backdrop с blur, фото по центру (object-fit: contain),
   стрелки слева/справа, крестик в правом верхнем углу, счётчик внизу.
   Esc / ←/→ работают через клавиатуру (см. inline-script в index.html).
   ───────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(14, 15, 13, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}
@media (min-width: 768px) {
  .lightbox { padding: 32px 64px; }
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
/* overscroll-behavior: contain — событие скролла внутри лайтбокса
   не пробрасывается на body. На iOS это снимает «эффект протаскивания»
   когда свайп чуть-чуть под наклоном вызывал скролл сайта позади. */
.lightbox {
  overscroll-behavior: contain;
}

.lightbox__stage {
  position: relative;
  margin: 0;
  max-width: min(1280px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-bg-elev);
}
.lightbox__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Крестик закрытия — в углу */
.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 241, 232, 0.10);
  border: 1px solid rgba(244, 241, 232, 0.18);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.lightbox__close:hover {
  background: rgba(244, 241, 232, 0.18);
  border-color: rgba(244, 241, 232, 0.32);
}

/* Стрелки навигации — по бокам экрана. z-index 2 чтобы клик не пе-
   рехватывался stage'ем с фото (на мобиле левая стрелка раньше не
   реагировала из-за overlap). */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(244, 241, 232, 0.08);
  border: 1px solid rgba(244, 241, 232, 0.18);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
@media (min-width: 768px) {
  .lightbox__nav { width: 56px; height: 56px; }
}
.lightbox__nav:hover {
  background: var(--color-accent);
  color: #0E0F0D;
  border-color: var(--color-accent);
}
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }
@media (min-width: 768px) {
  .lightbox__prev { left: 24px; }
  .lightbox__next { right: 24px; }
}

/* ─────────────────────────────────────────────
   NAV PILL — убираем дропдаун-шеврон, т.к. у нас нет dropdown-ов
   ───────────────────────────────────────────── */
.nav-pill .nav-pill__item:not(.nav-pill__item--cta) {
  /* уже есть стили из GoLine — не переопределяем */
}