/* ============================================
   HOMEPAGE – стили для 16 блоков главной страницы
   ============================================ */

/* ─────────────────────────────────────────────
   [0] HEADER / NAVIGATION
   ───────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: 16px 0;
  background: transparent;
  transition: background var(--transition-base), padding var(--transition-base);
}
.header.is-scrolled {
  background: rgba(14, 15, 13, 0.85);
  backdrop-filter: blur(16px);
  padding: 10px 0;
}

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  padding: 8px 14px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.nav-pill {
  display: none;
  align-items: center;
  gap: 2px;
  height: 52px;
  padding: 5px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
}
@media (min-width: 1024px) {
  .nav-pill { display: inline-flex; }
}

.nav-pill__item {
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  border-radius: var(--radius-pill);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.nav-pill__item:hover {
  color: var(--color-ink);
  background: var(--color-bg-elev-2);
}
.nav-pill__item--has-dropdown {
  border: none;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  gap: 8px;
  padding-right: 16px;
}
.nav-pill__chev {
  margin-left: 2px;
  transition: transform var(--transition-base);
  opacity: 0.7;
}
.nav-pill__group.is-open .nav-pill__chev {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-pill__group.is-open .nav-pill__item--has-dropdown {
  color: var(--color-ink);
  background: var(--color-bg-elev-2);
}

.nav-pill__group {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 340px;
  padding: 10px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base),
              transform var(--transition-base),
              visibility var(--transition-base);
  z-index: 102;
}
.nav-dropdown--wide { min-width: 680px; }

.nav-dropdown::before {
  /* невидимый «мост» над dropdown, чтобы курсор мог пройти от кнопки */
  content: '';
  position: absolute;
  top: -18px; left: 0; right: 0;
  height: 20px;
}

.nav-pill__group.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-dropdown__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nav-dropdown__col-title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-ink-dim);
  padding: 6px 12px 8px;
}

.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  color: var(--color-ink);
}
.nav-dropdown__item:hover {
  background: var(--color-bg-elev-2);
}

.nav-dropdown__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.nav-dropdown__item:hover .nav-dropdown__icon {
  background: var(--color-accent);
  color: var(--color-bg);
}

.nav-dropdown__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nav-dropdown__text strong {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}
.nav-dropdown__text small {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  line-height: 1.3;
  white-space: nowrap;
}

.nav-dropdown__brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown__brand small {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-dim);
  font-style: normal;
}
.nav-dropdown__brand:hover {
  background: var(--color-bg-elev-2);
  color: var(--color-accent);
}

.nav-dropdown__all {
  display: block;
  margin-top: 8px;
  padding: 12px;
  text-align: center;
  background: var(--color-bg-elev-2);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown__all:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.nav-pill__item--cta {
  background: var(--color-accent);
  color: #0E0F0D;
  padding: 0 6px 0 16px;
  gap: 8px;
  margin-left: 4px;
}
.nav-pill__item--cta:hover {
  background: var(--color-accent-dark);
  color: #0E0F0D;
}
.nav-pill__item--cta .btn__capsule {
  width: 28px; height: 28px;
}

.header__contact {
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 16px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
}
@media (min-width: 1280px) {
  .header__contact { display: inline-flex; }
}
.header__contact svg {
  color: var(--color-accent);
}

/* Группа мобильных/планшетных action-кнопок справа в хедере:
   [WhatsApp] [Звонок] [Бургер]. Показывается на <1024px, скрывается на
   десктопе где её роль играют nav-pill CTA и .header__contact. */
.header__mobile-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1024px) {
  .header__mobile-actions { display: none; }
}

/* Мини-кнопка-кружок в хедере (WA / звонок) — визуально идентична
   .burger (та же форма, тот же фон и border), отличие только в
   содержимом (svg иконка вместо bars). */
.header__mini-btn {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.header__mini-btn:hover {
  background: var(--color-bg-elev-2);
  border-color: var(--color-accent);
}

/* Burger */
.burger {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Убирает 300ms tap-delay в мобильных браузерах — кнопка срабатывает мгновенно */
  touch-action: manipulation;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
}
.burger__bars {
  width: 18px; height: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.burger__bars span {
  display: block;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}
.burger.is-active .burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-active .burger__bars span:nth-child(2) { opacity: 0; }
.burger.is-active .burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ─────────────────────────────────────────────
   MOBILE NAV – чистый плоский iOS-стиль
   ───────────────────────────────────────────── */
.mnav {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 99;
  transform: translateX(100%);
  /* Быстрее стандартного --transition-slow (0.3s) — ощущается «отзывчивее» на мобилке.
     Кривая слегка резвее в начале, чтобы глаз сразу видел движение. */
  transition: transform 0.22s cubic-bezier(0.2, 0.85, 0.35, 1);
  overflow: hidden;
}
.mnav.is-open { transform: translateX(0); }

.mnav__scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 84px 20px 40px;
}

/* Навигационный список */
.mnav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}
.mnav__list > li {
  border-bottom: 1px solid var(--color-line);
}

.mnav__item {
  /* <details> wrapper */
}

.mnav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.mnav__row::-webkit-details-marker { display: none; }
.mnav__row:active,
.mnav__row:hover {
  color: var(--color-accent);
}

.mnav__row--link {
  justify-content: space-between;
}
.mnav__arrow {
  opacity: 0.4;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.mnav__row--link:hover .mnav__arrow,
.mnav__row--link:active .mnav__arrow {
  opacity: 1;
  transform: translateX(3px);
  color: var(--color-accent);
}

.mnav__chev {
  opacity: 0.5;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.mnav__item[open] > .mnav__row {
  color: var(--color-accent);
}
.mnav__item[open] .mnav__chev {
  transform: rotate(180deg);
  opacity: 1;
}

/* Подпункты */
.mnav__sub {
  display: flex;
  flex-direction: column;
  padding: 4px 0 16px 4px;
  animation: mnav-slide 0.22s ease-out;
}
@keyframes mnav-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mnav__sub-title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-ink-dim);
  padding: 10px 0 4px;
}
.mnav__sub-title:first-child {
  padding-top: 0;
}

.mnav__sublink {
  display: block;
  padding: 11px 0;
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.mnav__sublink:hover,
.mnav__sublink:active {
  color: var(--color-ink);
}
.mnav__sublink--all {
  margin-top: 4px;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Низ: CTA + контакты */
.mnav__foot {
  margin-top: 32px;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mnav__cta {
  justify-content: center;
  width: 100%;
}

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

.mnav__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.mnav__contact:hover,
.mnav__contact:active {
  background: var(--color-bg-elev-2);
}

.mnav__contact-ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mnav__contact-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.mnav__contact-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  line-height: 1.2;
}
.mnav__contact-val {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.3;
}

.mnav__contact--wa .btn__wa {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--color-accent);   /* лаймовая иконка — как у телефона */
  box-shadow: none;              /* убираем inset-окантовку */
}

/* ─────────────────────────────────────────────
   [1] HERO
   ───────────────────────────────────────────── */
.hero {
  padding: 40px 0 96px;
}
@media (min-width: 768px) {
  .hero { padding: 64px 0 128px; }
}
@media (min-width: 1024px) {
  .hero { padding: 112px 0 176px; }
}
@media (min-width: 1440px) {
  .hero { padding: 128px 0 192px; }
}

.hero__inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: stretch;
  }
  .hero__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .hero__content .hero__cta {
    margin-top: auto;
  }
}

/* Медиа-колонка: картинка + буллеты под ней */
.hero__media {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1024px) {
  .hero__media {
    height: 100%;
  }
  .hero__media .hero__benefits--under {
    margin-top: auto;
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__title {
  margin-top: 8px;
}

/* «под ключ» (лаймовый em) — 80% от основного размера заголовка.
   Работает на планшете, ноутбуке, десктопе. На мобильных переопределяется ниже. */
.hero__title em {
  font-size: 0.8em;
  line-height: 1;
}

/* На мобильных — основной заголовок крупнее, а «под ключ» фиксированного размера,
   чтобы сохранить тот же визуальный контраст, который нравится */
@media (max-width: 639px) {
  .hero__title {
    font-size: 3.375rem;   /* 54px — вместо текущих 44px */
    line-height: 0.96;
    letter-spacing: -0.048em;
  }
  .hero__title em {
    font-size: 2.75rem;    /* 44px — оставляем как было */
  }
}

.hero__benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.hero__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}
.hero__benefits li::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%230E0F0D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}

/* Буллеты под картинкой (правая колонка, под бейджем) */
.hero__benefits--under {
  padding-left: 4px;
  padding-top: 4px;
}
.hero__benefits--under li {
  font-size: 0.875rem;
}
@media (min-width: 1024px) {
  .hero__benefits--under {
    padding-left: 12px;
    gap: 12px;
  }
}

/* Hero visual + img */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Градиентное затемнение на картинке (снизу + лёгкое слева снизу) */
.hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* вертикальный градиент снизу — для бейджика */
    linear-gradient(
      to top,
      rgba(14, 15, 13, 0.75) 0%,
      rgba(14, 15, 13, 0.45) 25%,
      rgba(14, 15, 13, 0.10) 55%,
      rgba(14, 15, 13, 0.00) 100%
    ),
    /* тёплый тон поверх — чтобы не уходило в сине-серое */
    linear-gradient(
      to bottom right,
      rgba(14, 15, 13, 0.10) 0%,
      rgba(14, 15, 13, 0.00) 40%
    );
  border-radius: inherit;
}

/* Price badge – компактный glass-бейдж поверх картинки */
.hero__price-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: rgba(14, 15, 13, 0.72);
  border: 1px solid rgba(212, 245, 106, 0.22);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.2);
}
.hero__price-badge strong {
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: -0.005em;
}
@media (min-width: 768px) {
  .hero__price-badge {
    left: 20px;
    bottom: 20px;
    padding: 12px 18px;
    font-size: 0.875rem;
    border-radius: 16px;
  }
}
@media (max-width: 420px) {
  .hero__price-badge {
    left: 10px;
    bottom: 10px;
    padding: 8px 12px;
    font-size: 0.75rem;
    border-radius: 12px;
  }
}

.hero__cta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Компактные кнопки по контенту на всех размерах.
   Иконки прижаты к левому/правому краю через padding (.btn--with-icon-*). */
.hero__cta > .btn {
  width: auto;
  flex: 0 0 auto;
}

.hero__cta-note {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  margin-top: 4px;
}

.hero__visual {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   [2] TRUST-STRIP
   ───────────────────────────────────────────── */
.trust-strip {
  padding: 64px 0;
  background: var(--color-bg-elev);
  border-block: 1px solid var(--color-line);
}
@media (min-width: 1024px) {
  .trust-strip { padding: 96px 0; }
}

.trust-strip__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .trust-strip__stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
  }
}

.trust-strip__stats > div {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (min-width: 768px) {
  .trust-strip__stats > div {
    flex: 0 0 auto;
    align-items: center;
    text-align: center;
  }
}

/* ТОЛЬКО на мобиле (≤767px): каждая цифра в свою карточку,
   чтобы 4 блока не сливались в визуальную кашу на узком экране. */
@media (max-width: 767px) {
  .trust-strip__stats > div {
    padding: 22px 14px;
    background: var(--color-bg-elev-2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    min-height: 120px;
    justify-content: center;
    gap: 8px;
  }
  .trust-strip__stat-num {
    font-size: 2rem;
  }
  .trust-strip__stat-label {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }
}

.trust-strip__stat-num {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}
.trust-strip__stat-num em {
  color: var(--color-accent);
  font-style: normal;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 2px;
}
.trust-strip__stat-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  display: block;
  max-width: 180px;
}

.trust-strip__brands {
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.trust-strip__brands-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-dim);
}
.trust-strip__brands-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}
.trust-strip__brand {
  font-family: var(--font-serif);
  font-size: 1.125rem;          /* 18px — было 26px */
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  font-style: italic;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.trust-strip__brand:hover {
  color: var(--color-ink);
}
/* На мобильных — ещё компактнее, чтобы 5 брендов вошли в одну строку */
@media (max-width: 639px) {
  .trust-strip__brands-row {
    gap: 10px 14px;
    justify-content: space-between;
  }
  .trust-strip__brand {
    font-size: 0.875rem;        /* 14px */
  }
}

/* ─────────────────────────────────────────────
   [3] QUICK FORM
   ───────────────────────────────────────────── */

/* Инверсия light-переменных на всех светлых секциях главной:
   - фон секции → #FFFFFF (был бежевый)
   - карточки/элементы внутри → #EEEDF3 (прохладный светло-лавандовый)
   Свап делается через CSS custom properties, так что все существующие
   правила (.quick-form__card, .process-step, .about__fact, .blog-card и т.д.)
   автоматически подхватывают новые цвета. */
.quick-form,
.process,
.about,
.blog-mini {
  --color-bg-light:      #FFFFFF;
  --color-bg-light-elev: #EEEDF3;
}

.quick-form__inner {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .quick-form__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
  }
}

.quick-form__title {
  margin-bottom: 12px;
}
.quick-form__subtitle {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink-light-muted);
  margin-bottom: 24px;
}

.quick-form__card {
  background: var(--color-bg-light-elev);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
  .quick-form__card { padding: 32px; }
}

.quick-form .field__label {
  color: var(--color-ink-light-muted);
}
.quick-form .field__input,
.quick-form .field__select {
  background: var(--color-bg-light);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--color-ink-light);
}
.quick-form .field__input::placeholder { color: rgba(0, 0, 0, 0.35); }
.quick-form .field__input:focus,
.quick-form .field__select:focus {
  border-color: var(--color-bg);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.quick-form .radio-pill span {
  background: var(--color-bg-light);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--color-ink-light-muted);
}
.quick-form .radio-pill input:checked + span {
  background: var(--color-bg);
  border-color: var(--color-bg);
  color: var(--color-ink);
}
.quick-form .consent__box {
  background: var(--color-bg-light);
  border-color: rgba(0, 0, 0, 0.15);
}
.quick-form .consent__text {
  color: var(--color-ink-light-muted);
}
.quick-form .consent__text a {
  color: var(--color-ink-light);
}

.quick-form__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .quick-form__fields {
    grid-template-columns: 1fr 1fr;
  }
  .quick-form__fields .field--full {
    grid-column: 1 / -1;
  }
}

.quick-form__submit-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.quick-form__submit {
  justify-content: center;
  width: 100%;
}

.quick-form__offer-note {
  font-size: 0.75rem;
  color: var(--color-ink-light-muted);
  text-align: center;
}
.quick-form__offer-note a {
  color: var(--color-ink-light);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.2);
}

.quick-form__alt {
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--color-ink-light-muted);
}
.quick-form__alt-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-ink-light);
  font-weight: 500;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: background var(--transition-fast);
}
.quick-form__alt-link:hover {
  background: rgba(0, 0, 0, 0.04);
}

.quick-form__side-quote {
  padding: 24px;
  background: var(--color-bg-light-elev);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.quick-form__side-quote::before {
  content: '★★★★★';
  /* Тёмный вместо лайма — секция .quick-form светлая (белый фон,
     карточка side-quote лавандовая), лаймовые звёзды на таком фоне
     тонули, читались слабо. Тёмный #13140F (--color-ink-light) —
     тот же цвет, что у основного текста в светлых секциях. */
  color: var(--color-ink-light);
  letter-spacing: 0.1em;
  font-size: 0.875rem;
}
.quick-form__side-quote blockquote {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-light);
  margin: 0;
}
.quick-form__side-quote cite {
  font-size: 0.8125rem;
  color: var(--color-ink-light-muted);
  font-style: normal;
}

/* ─────────────────────────────────────────────
   [4] SEGMENTS
   ───────────────────────────────────────────── */
.segments__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .segments__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .segments__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}
@media (min-width: 1280px) {
  .segments__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.segment-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-base),
              transform var(--transition-base),
              border-color var(--transition-base);
}
@media (hover: hover) {
  .segment-card:hover {
    background: var(--color-bg-elev-2);
    transform: translateY(-2px);
    border-color: var(--color-line);
  }
}
.segment-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.segment-card__title {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-ink);
}
.segment-card__desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
  flex-grow: 1;
}
.segment-card__perk {
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-accent);
  text-align: left;
}
.segment-card__more {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  transition: color var(--transition-fast);
}
@media (hover: hover) {
  .segment-card:hover .segment-card__more {
    color: var(--color-accent);
  }
}

.segments__footer {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   [5] POPULAR MODELS
   ───────────────────────────────────────────── */
.models-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  padding: 6px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
/* На узких мобильных (≤639px) 5 табов в одну строку физически не помещаются
   даже с минимальным padding. Делаем горизонтальный скролл со скрытой полосой —
   стандартный мобильный паттерн (iOS Settings / App Store / Telegram). */
@media (max-width: 639px) {
  .models-tabs {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .models-tabs::-webkit-scrollbar { display: none; }
  .models-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
.models-tab {
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.models-tab:hover { color: var(--color-ink); }
.models-tab.is-active {
  background: var(--color-accent);
  color: #0E0F0D;
}

/* Сетка моделей – flex-wrap с фиксированной шириной карточки.
   Ширина карточек НЕ зависит от того, сколько видимых:
   при любом фильтре карточки остаются одной ширины,
   пустые места остаются справа. */
.models-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}
.models-grid > .product-card {
  /* mobile: 1 колонка */
  width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
@media (min-width: 560px) {
  /* 2 колонки */
  .models-grid > .product-card {
    width: calc((100% - 16px) / 2);
  }
}
@media (min-width: 900px) {
  /* 3 колонки */
  .models-grid > .product-card {
    width: calc((100% - 32px) / 3);
  }
}
@media (min-width: 1200px) {
  /* 4 колонки */
  .models-grid { gap: 20px; }
  .models-grid > .product-card {
    width: calc((100% - 60px) / 4);
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  position: relative;
  height: 100%;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-base);
}
@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-bg-elev-2);
    background: var(--color-bg-elev-2);
  }
}

.product-card__image {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-elev-2);
  /* См. .gallery__item — тот же спек-фикс для мерцаний по скруглённым
     углам. Здесь особенно заметно на стыке tab-бейджа (.product-card__badge)
     с верхним-левым скруглением контейнера. */
  contain: paint;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 6px 14px;
  /* top-left наследует скругление картинки, правый-нижний — плавный */
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Все бейджи на карточке товара кроме "Хит продаж" — тёмный фон с blur,
   чтобы читались на любой продуктовой картинке (в т.ч. светлый бетон Alutech, Nice) */
.product-card__badge:not(.badge--hit) {
  background: rgba(14, 15, 13, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-ink);
  border: 1px solid rgba(244, 241, 232, 0.12);
}

.product-card__title {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
  min-height: 2.6em;       /* резерв под 2 строки имени – чтобы рейтинг не прыгал */
  display: flex;
  align-items: flex-start;
  line-height: 1.25;
}

.product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}
.product-card__rating-stars {
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.product-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  padding: 14px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}
.product-card__specs li {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.product-card__specs li strong {
  color: var(--color-ink);
  font-weight: 500;
  white-space: nowrap;
}

.product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  margin-top: auto;     /* прижимает цену + кнопки к нижней части карточки */
  padding-bottom: 20px; /* воздух перед кнопками «Подробнее / Купить в 1 клик» */
}
.product-card__price-from {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.product-card__price-value {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.product-card__price-note {
  font-size: 0.75rem;
  color: var(--color-ink-dim);
  margin-top: 4px;
  flex-basis: 100%;     /* переносим «под ключ с монтажом» на отдельную строку */
}

.product-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.product-card__actions .btn { flex: 1; justify-content: center; }

/* На мобиле кнопки .btn--sm (34px) слишком низкие для тапа — ниже
   рекомендованного 44px touch target и визуально похожи на бейдж.
   Поднимаем только в карточках каталога и только ≤767px. */
@media (max-width: 767px) {
  .product-card__actions .btn {
    height: 42px;
    padding-inline: 12px;
  }
}

.models-footer {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   [6] WHY-US
   ───────────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

.why-card {
  padding: 24px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--transition-base), transform var(--transition-base);
}
@media (hover: hover) {
  .why-card:hover {
    background: var(--color-bg-elev-2);
    transform: translateY(-2px);
  }
}
.why-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.why-card__title {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}
.why-card__desc {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin: 0;
}

/* ─────────────────────────────────────────────
   [7] PROCESS
   ───────────────────────────────────────────── */
.process {
  color: var(--color-ink-light);
}

.process__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .process__steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
}

.process-step {
  padding: 20px;
  background: var(--color-bg-light-elev);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  min-height: 200px;
}
.process-step--highlight {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.process-step--highlight .process-step__num {
  background: var(--color-bg);
  color: var(--color-accent);
}
.process-step--highlight .process-step__title,
.process-step--highlight .process-step__desc,
.process-step--highlight .process-step__timing {
  color: var(--color-bg);
}
.process-step--highlight .process-step__desc { opacity: 0.75; }

.process-step__num {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--color-bg-light);
  color: var(--color-ink-light-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  flex-shrink: 0;
}

.process-step__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink-light);
  margin: 0;
  margin-top: 32px;
}

.process-step__desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-light-muted);
  margin: 0;
  flex-grow: 1;
}

.process-step__timing {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-light-muted);
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.process__cta {
  margin-top: 40px;
  text-align: center;
}
.process__cta-title {
  font-size: 1rem;
  color: var(--color-ink-light-muted);
  margin-bottom: 16px;
}

/* ─────────────────────────────────────────────
   [8] B2B – ЮРЛИЦАМ
   ───────────────────────────────────────────── */
.b2b {
  background: var(--color-bg-elev);
}

/* Единая 3-колоночная сетка B2B-блока.
   Head = 2 колонки, Visual = 1 колонка (того же размера что нижние карточки).
   Карточки ниже — 3 × 1 колонка. Proof — на всю ширину. */
.b2b__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .b2b__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    row-gap: 32px;
  }
}
@media (min-width: 1024px) {
  .b2b__grid {
    gap: 20px;
    row-gap: 40px;
  }
}

.b2b__head {
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .b2b__head  { grid-column: span 2; }
  .b2b__visual { grid-column: span 1; }
  .b2b__proof { grid-column: 1 / -1; }
}

.b2b__intro {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin-top: 24px;
  max-width: 540px;
}

/* .b2b__cards заменён на единую .b2b__grid — здесь только card стили ниже */

.b2b__card {
  padding: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--transition-base), border-color var(--transition-base);
}
@media (hover: hover) {
  .b2b__card:hover {
    background: var(--color-bg-elev-2);
    border-color: var(--color-accent);
  }
}

.b2b__card-ic {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-elev);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  flex-shrink: 0;
}
@media (hover: hover) {
  .b2b__card:hover .b2b__card-ic {
    background: var(--color-accent);
    color: var(--color-bg);
  }
}

.b2b__card-title {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.b2b__card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.b2b__card-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}
.b2b__card-list li::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 3px;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%230E0F0D" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
}

.b2b__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.b2b__proof {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-dim);
  margin: 0;
}

.b2b__visual {
  padding: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Ярлык «СЧЁТ · ЭСФ · АКТ · ДОГОВОР» — по центру на всех брейкпоинтах.
   Точечно, не трогаем общий .mono (он в других местах проекта). */
.b2b__visual .mono {
  text-align: center;
}
/* Прижимаем блок-мок КП к нижней грани row'а рядом с .b2b__head. Head
   (h2 + intro + CTA-кнопка «Подробнее о работе с юрлицами») задаёт
   row-height — через align-self: end нижняя кромка visual совпадает
   с нижней кромкой CTA. Визуально выглядит как «две колонки сложились
   по низу». На мобиле (single-column) правило индифферентно — там
   visual просто идёт после head'а в одном потоке. */
@media (min-width: 640px) {
  .b2b__visual { align-self: end; }
}
.b2b__doc-mock {
  background: var(--color-bg-light);
  color: var(--color-ink-light);
  padding: 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
}
.b2b__doc-mock::before {
  content: 'ЭСФ';
  position: absolute;
  top: 16px; right: 16px;
  padding: 4px 10px;
  background: var(--color-accent);
  color: #0E0F0D;
  border-radius: 4px;
  font-weight: 700;
}
.b2b__doc-mock-line {
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin: 10px 0;
}
.b2b__doc-mock-line--short { width: 60%; }
.b2b__doc-mock-line--accent {
  background: var(--color-accent);
  width: 40%;
}

/* ─────────────────────────────────────────────
   [9] ABOUT (мини)
   ───────────────────────────────────────────── */
.about {
  color: var(--color-ink-light);
}

.about__inner {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .about__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: stretch;   /* колонки одной высоты */
  }
}

.about__visual {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .about__visual {
    aspect-ratio: auto;
    height: 100%;
    min-height: 440px;
  }
}

.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Прижимаем кадр к правому краю — при обрезке уходит слева, где между
     людьми больше воздуха. Справа третий человек тогда остаётся целиком. */
  object-position: right center;
  display: block;
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1024px) {
  .about__inner { align-items: stretch; }
  .about__content { height: 100%; }
  .about__facts { flex: 1; }                /* растягивается на высоту визуала */
  .about__cta { align-self: flex-start; }   /* не на всю ширину */
}

.about__lead {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-ink-light-muted);
  margin: 0;
}

/* Четыре факт-карточки с иконкой */
.about__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 520px) {
  .about__facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

.about__fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--color-bg-light-elev);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
@media (hover: hover) {
  .about__fact:hover {
    /* Раньше была лаймовая обводка (--color-accent-dark) — на белой секции
       выглядела агрессивно и выбивалась из общей спокойной цветовой гаммы.
       Мягкое тёмное обрамление (rgba black с низкой альфой) контрастнее
       дефолта (0.06), но не кричит. */
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
  }
}

.about__fact-ic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-ink-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about__fact-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.about__fact-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink-light);
}
.about__fact-num span {
  color: var(--color-accent-dark);
  font-weight: 500;
}
.about__fact-num--text {
  font-size: 1.125rem;
  line-height: 1.15;
}

.about__fact-label {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-ink-light-muted);
}

.about__cta {
  margin-top: 8px;
}
/* На мобиле кнопка «Подробнее о компании» растягивается на всю ширину
   карточки, текст и стрелка — по центру. На десктопе/планшете остаётся
   компактной inline-flex (default .btn), а на ≥1024px сидит у левого
   края через уже существующее align-self: flex-start в .about__inner-стретчинге. */
@media (max-width: 767px) {
  .about__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────
   [10] GALLERY
   ───────────────────────────────────────────── */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 768px)  { .gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
  background: var(--color-bg-elev-2);
  /* contain: paint — спек-фикс для мерцающих «белых» пикселей по
     скруглённым углам. Без него: overflow:hidden + border-radius +
     transformed-child (scaled img) вызывают subpixel antialiasing
     rasterization, при которой светлые пиксели антиалиаса дочернего
     элемента «протекают» за границу радиуса на уровне composite-слоя.
     С `contain: paint` браузер делает pixel-precise клиппинг по
     padding-edge с учётом border-radius — никаких утечек. */
  contain: paint;
}
/* Сам transform на карточке убран — раньше hover-scale(1.02) вносил
   sub-pixel артефакты: границы карточки и её подписи-градиента сдвигались
   на доли пикселя, из-за чего по нижнему и боковым краям поверх соседних
   карточек проскакивали тонкие светлые полоски. Зум-эффект теперь только
   на картинке внутри clipped-карточки. */

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Изначальный лёгкий зум: картинка всегда на ~2% шире контейнера,
     её края заведомо за пределами clipped-области. Hover-анимация
     никогда не «обнажает» нижнюю/боковую кромку контейнера — щели
     с артефактами попросту не могут появиться. */
  transform: scale(1.02);
  transition: transform var(--transition-slow);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (hover: hover) {
  .gallery__item:hover img { transform: scale(1.08); }
}

/* Затемнение нижней половины — читаемость подписи на любой картинке */
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 15, 13, 0)    40%,
    rgba(14, 15, 13, 0.55) 72%,
    rgba(14, 15, 13, 0.95) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.gallery__item-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 18px 16px;
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 2;
}
/* Бейдж типа — «прилеплен» в самый левый верхний угол плитки:
   - top-left скруглён по outer-радиусу карточки (совпадает с .gallery__item)
   - bottom-right скруглён, чтобы дать мягкий переход обратно к фото
   - top-right и bottom-left — прямые, сидит впритык к краям.
   Текст компактный, лаймовый, без лишних засечек и бордера —
   «чище» в духе последнего скриншота от клиента. */
.gallery__item-type {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 5px 11px;
  /* Плотный тёмный из нашей палитры (чуть светлее --color-bg = #0E0F0D),
     solid — не полупрозрачный, как просил клиент. blur убран — на solid
     фоне он ничего не даёт. */
  background: var(--color-bg-elev);
  border-radius: var(--radius-md) 0 var(--radius-md) 0;
  /* Переход с mono (JetBrains) на sans (Geist) — на uppercase-кириллице
     mono даёт плотный «блочный» вид, sans читается чище и пропорциональнее
     на малых размерах. Цвет из лаймового (кислотный на тёмном) — в тёплый
     нейтральный серый: бейдж-ярлык перестаёт соревноваться с лаймовыми
     CTA на странице и воспринимается как спокойная meta-подпись. */
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.gallery__item-location {
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(14, 15, 13, 0.5);
}
.gallery__item-year {
  font-size: 0.6875rem;
  color: rgba(244, 241, 232, 0.72);
}

.gallery__footer {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   [11] REVIEWS CAROUSEL
   ───────────────────────────────────────────── */
/* Карусель тянется на всю ширину вьюпорта (full-bleed) на всех разрешениях.
   margin-inline: calc(50% - 50vw) — классический приём full-bleed внутри
   ограниченного контейнера: элемент выходит за пределы контейнера до обеих
   граней экрана, сохраняя DOM-позицию внутри .container. */
.reviews__carousel {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
}

/* Трек карусели: горизонтальный скролл со snap'ом. Padding-inline выводит
   начало первой карточки ровно на левую кромку содержимого контейнера
   (чтобы она визуально выровнялась с заголовком секции), но при скролле
   карточки проходят через всю ширину экрана. */
.reviews__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: max(
    var(--container-padding-mobile),
    calc((100vw - var(--container-max)) / 2 + var(--container-padding-mobile))
  );
  scroll-padding-inline: max(
    var(--container-padding-mobile),
    calc((100vw - var(--container-max)) / 2 + var(--container-padding-mobile))
  );
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 24px;
}
@media (min-width: 768px) {
  .reviews__track {
    padding-inline: max(
      var(--container-padding-tablet),
      calc((100vw - var(--container-max)) / 2 + var(--container-padding-tablet))
    );
    scroll-padding-inline: max(
      var(--container-padding-tablet),
      calc((100vw - var(--container-max)) / 2 + var(--container-padding-tablet))
    );
  }
}
@media (min-width: 1280px) {
  .reviews__track {
    padding-inline: calc((100vw - var(--container-max)) / 2 + var(--container-padding-desktop));
    scroll-padding-inline: calc((100vw - var(--container-max)) / 2 + var(--container-padding-desktop));
  }
}
.reviews__track::-webkit-scrollbar { display: none; }

/* Фиксированные ширины карточек по брейкпоинтам — иначе при full-bleed
   треке процентные flex-basis раздули бы карточки на широких экранах
   до нечитаемых размеров. */
.review-card {
  flex: 0 0 85%;
  scroll-snap-align: start;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
@media (min-width: 480px)  { .review-card { flex: 0 0 320px; } }
@media (min-width: 768px)  { .review-card { flex: 0 0 360px; } }
@media (min-width: 1280px) { .review-card { flex: 0 0 400px; padding: 28px; } }

.review-card::before {
  content: '"';
  position: absolute;
  top: 14px; right: 22px;
  font-family: var(--font-serif);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.6;
  pointer-events: none;
}

.review-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-right: 32px;
}
.review-card__avatar { display: none; }
.review-card__avatar-legacy {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: #0E0F0D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1rem;
  flex-shrink: 0;
}
.review-card__avatar--alt-1 { background: linear-gradient(135deg, #C9A27B, #8C6A44); color: var(--color-ink); }
.review-card__avatar--alt-2 { background: linear-gradient(135deg, #7CB8B8, #466A6A); color: var(--color-ink); }
.review-card__avatar--alt-3 { background: linear-gradient(135deg, #D99886, #A25C49); color: var(--color-ink); }

.review-card__author {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}
.review-card__role {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-ink-muted);
  margin: 2px 0;
}
.review-card__rating {
  color: var(--color-accent);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.review-card__text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin: 0;
  flex-grow: 1;
}

.review-card__foot {
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Верхний ряд footer'а: "Установлено:" слева, дата справа на одной базовой линии. */
.review-card__foot-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.review-card__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-ink-muted);
}
.review-card__date {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-dim);
  white-space: nowrap;
}
.review-card__equipment {
  font-size: 0.75rem;
  color: var(--color-ink-dim);
}

/* Carousel controls */
.reviews__controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}
.reviews__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.reviews__arrow:hover { background: var(--color-accent); color: #0E0F0D; border-color: var(--color-accent); }

/* Section-head в «Отзывы» — по центру на всех брейкпоинтах */
.reviews .section-head {
  text-align: center;
}
.reviews .section-head .eyebrow {
  display: flex;
  justify-content: center;
}
.reviews .section-head .section-head__sub {
  margin-inline: auto;
}

/* На планшете и десктопе стрелки листания — справа на уровне
   нижней кромки section-head. На мобильном остаются под каруселью
   по центру (дефолтное поведение .reviews__controls выше). */
@media (min-width: 768px) {
  .reviews .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  /* section-head занимает всю ширину первой строки, чтобы text-align: center
     давал истинный центр страницы. Зарезервированный padding-inline исключает
     наложение стрелок на lead-абзац с правой стороны. */
  .reviews .section-head {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
    padding-inline: 120px;
  }
  .reviews__controls {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    margin-top: 0;
    z-index: 1;
  }
  .reviews__carousel {
    grid-column: 1 / -1;
    /* Компенсируем убранный margin-bottom у section-head — теперь отступ
       до карусели даётся карусели сверху. */
    margin-top: var(--space-7);
  }
}

/* ─────────────────────────────────────────────
   [12] BLOG MINI
   ───────────────────────────────────────────── */
.blog-mini__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px)  { .blog-mini__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-mini__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.blog-card {
  display: flex;
  flex-direction: column;
  /* Тёмно-серый из палитры (тот же, что у карточек process / about на тёмных
     секциях). На белом фоне светлой секции блога — максимальный контраст,
     карточки «выстреливают». Лавандовые обложки сверху смотрятся как на
     классической тёмной плашке — в духе hero и других dark-секций сайта. */
  background: var(--color-bg-elev-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (hover: hover) {
  .blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  }
}

.blog-card__cover {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blog-card__cover .photo-placeholder {
  border-radius: 0;
  border: none;
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card__category {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
}

.blog-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* На тёмной карточке — светлый muted вместо тёмного muted */
  color: var(--color-ink-muted);
}
.blog-card__meta span { flex-shrink: 0; }
.blog-card__title {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-ink);
  margin: 0;
}
.blog-card__excerpt {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
  flex-grow: 1;
  margin: 0;
}
.blog-card__more {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: text-shadow var(--transition-fast),
              transform var(--transition-fast);
}
@media (hover: hover) {
  .blog-card:hover .blog-card__more {
    text-shadow: 0 0 14px var(--color-accent-glow-strong);
    transform: translateX(2px);
  }
}
.blog-card:active .blog-card__more {
  text-shadow: 0 0 22px var(--color-accent-glow-strong),
               0 0 4px var(--color-accent);
  transform: translateX(3px);
}

.blog-mini__footer {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* ─────────────────────────────────────────────
   [13] FAQ
   ───────────────────────────────────────────── */

/* Section-head в «Частые вопросы» — eyebrow «FAQ» и заголовок по центру
   на всех брейкпоинтах. Список .faq__list уже центрирован через
   max-width + margin-inline: auto, теперь и шапка его догоняет. */
.faq .section-head {
  text-align: center;
}
.faq .section-head .eyebrow {
  display: flex;
  justify-content: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
  margin-inline: auto;
}

.faq-item {
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.faq-item[open] {
  border-color: var(--color-accent);
}

.faq-item__q {
  cursor: pointer;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
  list-style: none;
  transition: color var(--transition-fast);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--color-accent); }

.faq-item__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-base),
              background var(--transition-base),
              color var(--transition-base);
}
.faq-item[open] .faq-item__icon {
  background: var(--color-accent);
  color: #0E0F0D;
  transform: rotate(45deg);
}

.faq-item__a {
  padding: 0 24px 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-muted);
}

.faq__ask {
  margin-top: 32px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
}
.faq__ask a { color: var(--color-accent); font-weight: 500; }

/* ─────────────────────────────────────────────
   [14] SEO TEXT
   ───────────────────────────────────────────── */
/* Секция светлая с лавандовым фоном (не белый дефолт section--light).
   Разрывает монотонность трёх тёмных секций в хвосте страницы. */
.seo-text.section--light {
  background: #EEEDF3;
}

.seo-text__content {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.seo-text__content h3 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.seo-text__content p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-ink-muted);
  margin: 0;
}
.seo-text__content a {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.seo-text__content a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Переопределение цветов текста на лавандовом фоне — специфичность
   .seo-text__content выше чем .section--light, автоматом не подхватится. */
.seo-text.section--light .seo-text__content h3 {
  color: var(--color-ink-light);
}
.seo-text.section--light .seo-text__content p {
  color: var(--color-ink-light-muted);
}
.seo-text.section--light .seo-text__content a {
  color: var(--color-ink-light);
  border-bottom-color: rgba(0, 0, 0, 0.18);
}
.seo-text.section--light .seo-text__content a:hover {
  color: var(--color-ink-light);
  border-bottom-color: var(--color-ink-light);
}

/* Collapse для 5 последних блоков SEO-текста.
   Современный трюк с grid-template-rows: 0fr → 1fr даёт плавную
   height-анимацию без необходимости знать высоту контента. */
.seo-text__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.seo-text__more-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.seo-text__more.is-expanded {
  grid-template-rows: 1fr;
}

.seo-text__toggle {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.seo-text__toggle-btn {
  padding-inline: 22px;
}
.seo-text__toggle-chevron {
  transition: transform var(--transition-base);
  opacity: 0.7;
}
[data-seo-text-toggle][aria-expanded="true"] .seo-text__toggle-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ─────────────────────────────────────────────
   [15] CONTACTS + MAP
   ───────────────────────────────────────────── */
.contacts__inner {
  display: grid;
  /* minmax(0, 1fr), а не просто 1fr — иначе grid-колонка раздувается по
     min-content своего содержимого. У Яндекс-iframe min-content может быть
     шире колонки → карта «вылезает» вправо за viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 1024px) {
  .contacts__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 48px;
  }
}

.contacts__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .contacts__list { grid-template-columns: 1fr 1fr; }
}

.contacts__item {
  padding: 18px 20px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contacts__item-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.contacts__item-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.35;
}
.contacts__item-value a { transition: color var(--transition-fast); }
.contacts__item-value a:hover { color: var(--color-accent); }
.contacts__item-sub {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  line-height: 1.4;
  margin-top: auto;   /* прижимаем к низу — sub-строки выровнены по всем 4 карточкам */
  padding-top: 4px;
}
/* На мобильных sub-строки в одну линию — br внутри скрываем */
@media (max-width: 639px) {
  .contacts__item-sub br { display: none; }
}

.contacts__messengers {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Яндекс.Карта в сером цвете */
.contacts__map {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
  min-height: 320px;
  /* Страховка: iframe внутри не может растянуться шире родителя */
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 1024px) {
  .contacts__map { aspect-ratio: auto; height: 100%; min-height: 480px; }
}

.contacts__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
}

.contacts__map-actions {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.contacts__map-action {
  padding: 8px 14px;
  background: rgba(14, 15, 13, 0.85);
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition-fast);
}
.contacts__map-action:hover {
  background: var(--color-accent);
  color: #0E0F0D;
}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.footer {
  background: var(--color-bg);
  padding: 80px 0 0;
}
@media (min-width: 1024px) { .footer { padding-top: 112px; } }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 32px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr; gap: 64px; } }

/* Контакты в футере — более компактный и воздушный блок */
.footer__contacts { min-width: 0; }

.footer__col-title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-ink-dim);
  margin-bottom: 14px;
}

.footer__about-logo {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  margin-bottom: 14px;
}

.footer__about-text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin-bottom: 16px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__link {
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  transition: color var(--transition-fast);
}
.footer__link:hover { color: var(--color-ink); }

.footer__brands {
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  margin-top: 8px;
  line-height: 1.8;
}
.footer__brands a { color: var(--color-ink-muted); }
.footer__brands a:hover { color: var(--color-accent); }

.footer__phone {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-ink);
  display: block;
  margin-bottom: 8px;
}
.footer__email {
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  display: block;
  margin-bottom: 8px;
}
.footer__email:hover { color: var(--color-ink); }
.footer__address {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
  font-style: normal;
  margin-bottom: 12px;
}

.footer__social {
  display: flex;
  gap: 8px;
}
.footer__social-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.footer__social-btn:hover {
  background: var(--color-accent);
  color: #0E0F0D;
  border-color: var(--color-accent);
}

.footer__bottom {
  padding: 28px 0 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  font-size: 0.75rem;
  color: var(--color-ink-dim);
  align-items: center;
}
@media (min-width: 768px) {
  .footer__bottom { grid-template-columns: 1fr auto 1fr; }
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.footer__legal a {
  color: var(--color-ink-muted);
  transition: color var(--transition-fast);
}
.footer__legal a:hover { color: var(--color-ink); }

.footer__payments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: flex-start;
}
@media (min-width: 768px) {
  .footer__payments { justify-content: flex-end; }
}
.footer__payment {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding: 4px 10px;
  background: var(--color-bg-elev);
  border: 1px solid var(--color-line);
  border-radius: 4px;
}

/* ============================================
   МОБИЛЬНЫЕ ВЫРАВНИВАНИЯ (≤767px)
   Центрирование section-head в секциях: segments, why, process, b2b,
   about, faq. Eyebrow и CTA-кнопки тоже центрируются, потому что они
   inline-flex или flex — к ним text-align сам по себе не применяется.
   ============================================ */
@media (max-width: 767px) {

  /* Секции с обычным .section-head (eyebrow + H2 + lead) */
  .segments .section-head,
  .why      .section-head,
  .process  .section-head,
  .about    .section-head,
  .faq      .section-head,
  .gallery  .section-head,
  .blog-mini .section-head,
  .contacts .section-head {
    text-align: center;
  }

  /* Eyebrow — inline-flex, text-align на нём не работает, центрируем через
     display: flex; justify-content: center у родителя-контейнера. Тут проще
     сам eyebrow заставить растягиваться на всю ширину и центрировать
     содержимое внутри. */
  .segments .section-head .eyebrow,
  .why      .section-head .eyebrow,
  .process  .section-head .eyebrow,
  .about    .section-head .eyebrow,
  .faq      .section-head .eyebrow,
  .gallery  .section-head .eyebrow,
  .blog-mini .section-head .eyebrow,
  .contacts .section-head .eyebrow,
  .b2b__head .eyebrow {
    display: flex;
    justify-content: center;
  }

  /* B2B — у него собственный head, не .section-head. Центрируем eyebrow,
     H2, вводный текст и ряд кнопок. */
  .b2b__head {
    text-align: center;
    align-items: center;
  }
  .b2b__intro {
    margin-inline: auto;
  }
  .b2b__actions {
    justify-content: center;
  }

  /* Quick-form — у этой секции нет .section-head, текстовая колонка это
     просто div без специального класса с eyebrow + H2 + subtitle + quote.
     Центрируем конкретные элементы точечно, чтобы не задеть side-quote
     (у него свой типографический ритм и он вне просьбы клиента). */
  .quick-form .eyebrow {
    display: flex;
    justify-content: center;
  }
  .quick-form__title,
  .quick-form__subtitle {
    text-align: center;
  }

  /* Контакты — кнопки WhatsApp + Telegram на мобиле по центру, а не
     прижаты к левому краю. .contacts__messengers это flex-контейнер
     без явного justify-content (= flex-start по дефолту). */
  .contacts__messengers {
    justify-content: center;
  }
}

/* ============================================
   SCROLL-REVEAL ANIMATIONS
   ============================================
   Философия: один базовый эффект (fade + translateY 24px) длиной 700ms,
   easeOutExpo-like curve. Это язык Linear/Vercel/Stripe — «premium»
   без кричащих параллаксов.

   Элементы скрыты по дефолту → получают класс .is-visible от
   IntersectionObserver'а в app.js → анимация разыгрывается. После
   первого срабатывания observer.unobserve() — никакого реверса
   при прокрутке назад, анимация играет ровно один раз.

   Исключение: hero-секция анимируется on-load (animation-delay,
     без observer'а) — это первое впечатление при открытии сайта.
   ============================================ */

/* Базовое «скрытое» состояние. Покрывает:
   - Любой .section-head в секциях (eyebrow + H2 + lead вместе)
   - .b2b__head (альтернативный head в B2B-секции, не .section-head)
   - Произвольные блоки с классом .reveal
   - Детей у контейнеров с классом .reveal-stagger */
.section-head,
.b2b__head,
.reveal,
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-head.is-visible,
.b2b__head.is-visible,
.reveal.is-visible,
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger — задержка между соседними дочерними при .reveal-stagger.
   70ms даёт ритм «волны» без ощущения медлительности: 8 карточек
   в сетке полностью появятся за ~490 + 700 = 1.2s, но большинство
   глаз уже зацепится за первые 2-3. */
.reveal-stagger.is-visible > *:nth-child(1)  { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2)  { transition-delay: 70ms; }
.reveal-stagger.is-visible > *:nth-child(3)  { transition-delay: 140ms; }
.reveal-stagger.is-visible > *:nth-child(4)  { transition-delay: 210ms; }
.reveal-stagger.is-visible > *:nth-child(5)  { transition-delay: 280ms; }
.reveal-stagger.is-visible > *:nth-child(6)  { transition-delay: 350ms; }
.reveal-stagger.is-visible > *:nth-child(7)  { transition-delay: 420ms; }
.reveal-stagger.is-visible > *:nth-child(8)  { transition-delay: 490ms; }
.reveal-stagger.is-visible > *:nth-child(n+9) { transition-delay: 560ms; }

/* Hero on-load — срабатывает при первом paint'е страницы, не ждёт JS.
   Последовательность eyebrow → title → lead → CTA → media даёт
   «собирание композиции» за ~1 секунду. Пик внимания — на title. */
.hero .eyebrow,
.hero .hero__title,
.hero .lead,
.hero__cta,
.hero__media {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-reveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero .eyebrow      { animation-delay: 0.05s; }
.hero .hero__title  { animation-delay: 0.15s; }
.hero .lead         { animation-delay: 0.30s; }
.hero__cta          { animation-delay: 0.45s; }
.hero__media        { animation-delay: 0.60s; }

@keyframes hero-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Защита от «невидимого навсегда» на reduced-motion. base.css уже
   обнуляет все transitions/animations глобально, но явный reset
   здесь страхует: если глобальный rule когда-то изменится, reveal-
   элементы не останутся в opacity: 0. */
@media (prefers-reduced-motion: reduce) {
  .section-head,
  .b2b__head,
  .reveal,
  .reveal-stagger > *,
  .hero .eyebrow,
  .hero .hero__title,
  .hero .lead,
  .hero__cta,
  .hero__media {
    opacity: 1;
    transform: none;
    animation: none;
  }
}