/******************************
rem
INDEX:

    00 - Base - Global
    01 - Base - Typography

    10 - Layout - Header
        10.00 - Header
        10.01 - Logo
        10.02 - Catalog
        10.03 - Search
        10.04 - Navigation
    
    20 - Layout - Container

    30 - Main Content
        30.01 Block 1
        30.02 Горячие товары
        30.03 Лента преимуществ
        30.04 Зеленый дом - все для земледелия
        30.05 Не знаете, что выбрать?
        30.06 Мы работаем по всему казахстану
        30.07 Что будет без нас?
        30.08 Вся продукция имеет сертификаты соответствия
        30.09 С нами работают
        30.10 Два блока - Видео 
        30.11 Приложение
        30.12 FAQ Вопрос ответ
        30.13 Форма обратной связи

    40 - Footer

    89 - Адаптив только для хедера и футера
    90 - Responsive
        90.01 Так правки микро мелочи по адаптиву
        90.02 === Основной весь адаптив ниже ноутбуков ===
        90.03 === Планшеты вертикально ===
        90.04 === Мобильные устройства ===

/*
    Default Primary color: #01A572
    Default Border color: #01A572
    Default Text Color:          #1F1F1F & #fff
    Default Body Font:           "Montserrat", sans-serif
*/

/***************************** 30.01 - Block 1 *****************************/
/* === ОСНОВНОЙ БЛОК === */
.banner-slider {
  width: 100%;
  box-sizing: border-box;
}

.banner-container {
  position: relative;
  max-width: 1900px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
}

/* Контейнер слайдов */
.banner-slides {
  position: relative;
  width: 100%;
  height: 400px;
}

/* Отдельный слайд */
.banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.banner-slide.active {
  opacity: 1;
  z-index: 1;
}

.banner-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Стрелки */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  color: #333;
  cursor: pointer;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.banner-arrow svg {
  display: block;
}

.banner-arrow:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.banner-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.banner-arrow:focus-visible {
  outline: 2px solid #01A572;
  outline-offset: 2px;
}

.banner-prev {
  left: 24px;
}

.banner-next {
  right: 24px;
}

/* Точки-индикаторы */
.banner-dots {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 10;
}

/* ТОЧКА РИСУЕТСЯ 12px, А НАЖИМАЕТСЯ 24px.
   PageSpeed: «Touch targets do not have sufficient size or spacing» - кружки
   были 12x12 при минимуме 24x24 (WCAG 2.5.8), попасть пальцем в такой почти
   невозможно. Растёт только зона: сам кружок рисуется фоном в box-content,
   размер и вид прежние.
   */
.banner-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  background-clip: content-box;
  border: none;
  cursor: pointer;
  padding: 6px;
  box-sizing: content-box;
  transition: background 0.3s ease;
}

.banner-dot.active {
  background: #fff;
  background-clip: content-box;
}

/* === АДАПТИВНОСТЬ === */

/* Десктопы (1024px+) */
@media (min-width: 1024px) {
  .banner-slides {
    height: 380px;
  }
  
  .banner-container {
    border-radius: 20px;
  }
}

/* Планшет (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  
  .banner-slides {
    height: 320px;
  }
  
  .banner-container {
    border-radius: 16px;
  }
  
  .banner-arrow {
    width: 44px;
    height: 44px;
  }

  .banner-arrow svg {
    width: 20px;
    height: 20px;
  }
  
  .banner-prev {
    left: 16px;
  }
  
  .banner-next {
    right: 16px;
  }
  
  .banner-dots {
    bottom: 20px;
  }
}

/* Мобилки (до 767px) */
@media (max-width: 767px) {
  
  .banner-container {
    border-radius: 16px;
    overflow: visible;
  }
  
  .banner-slides {
    height: auto;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    margin: 0;
    gap: 12px;
    padding: 0;
  }
  
  .banner-slide {
    position: relative;
    flex: 0 0 85%;
    opacity: 1;
    scroll-snap-align: start;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
  }
  
  /* Скрываем стрелки и точки на мобилке */
  .banner-arrow,
  .banner-dots {
    display: none;
  }
  
  /* Скрываем скроллбар */
  .banner-slides::-webkit-scrollbar {
    display: none;
  }
  
  .banner-slides {
    scrollbar-width: none;
  }
}

/* Маленькие мобилки (до 375px) */
@media (max-width: 375px) {
  .banner-slide {
    height: 160px;
    flex: 0 0 90%;
    border-radius: 12px;
  }
  
  .banner-slides {
    border-radius: 12px;
    gap: 8px;
  }
  
  .banner-container {
    border-radius: 12px;
  }
}

/* === 30.03 ЛЕНТА ПРЕИМУЩЕСТВ === */
.benefits-section {
  overflow: hidden;
  padding: 48px 0;
  background: #fff;
  margin-left: calc(-1 * var(--container-padding, 20px));
  margin-right: calc(-1 * var(--container-padding, 20px));
  position: relative;
  /* Уже есть */
}

.benefits-section::before,
.benefits-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}

.benefits-section::before {
  left: 0;
  background: linear-gradient(90deg, #fff 0%, transparent 100%);
}

.benefits-section::after {
  right: 0;
  background: linear-gradient(270deg, #fff 0%, transparent 100%);
}

.benefits {
  display: flex;
  align-items: stretch;
  gap: 16px;
  animation: scroll-benefits 50s linear infinite;
  width: max-content;
  position: relative;
  z-index: 1;
}

.benefit {
  background: #F7F7F7;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 380px;
  flex-shrink: 0;
  height: 80px;
}

.benefit img {
  width: 60px;
  height: 60px;
}

.benefit p {
  margin: 0;
  line-height: 1.4;
  font-size: 14px;
  font-weight: 600;
  color: #1F1F1F;
}

@keyframes scroll-benefits {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.benefits:hover {
  animation-play-state: paused;
}

.promo-section-scroll {
  display: none;
}

/* === 30.04 Зеленый дом - все для земледелия === */
.info-zeldom-modern {
  margin-top: 48px;
  padding: 80px 0;
  background: #F2F2F2;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.info-zeldom-modern::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(1, 165, 114, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.info-zeldom-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 32px;
}

.info-zeldom-icon img {
  width: 70px;
  height: 65px;
}

.info-zeldom-icon {
  padding-bottom: 20px;
}

.info-zeldom-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-zeldom-title {
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 700;
  color: #1f1f1f;
  line-height: 1.2;
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: 20px;
}

.info-zeldom-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 5px;
  background: linear-gradient(90deg, #01A572 0%, rgba(1, 165, 114, 0.3) 100%);
  border-radius: 3px;
}

.info-zeldom-subtitle {
  font-size: clamp(14px, 2.5vw, 22px);
  line-height: 1.7;
  color: #555;
  margin: 0 0 40px 0;
  font-weight: 500;
  max-width: 800px;
}

.info-zeldom-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
  width: 100%;
  max-width: 1900px;
}

.info-feature {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  /* Свойства поимённо вместо `all` (DESIGN.md, «Движение»): `all` держит под
     наблюдением и размеры с отступами, а меняются здесь только цвета. */
  transition: background var(--zd-dur) var(--zd-ease),
              border-color var(--zd-dur) var(--zd-ease),
              color var(--zd-dur) var(--zd-ease);
}

.info-feature span,
.info-feature p {
  font-style: normal;
  display: inline-block;
  transform: skewX(-6deg) translateY(-1px);
  letter-spacing: -0.3px;
  text-transform: uppercase;
  font-weight: 700;
}

.info-feature span {
  font-size: 22px;
  color: #01A572;
}

.info-feature p {
  color: #1f1f1f;
  font-size: 22px;
  text-align: left;
}

.info-zeldom-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.feature-icon img {
  width: 45px;
  height: 100%;
}

.info-btn-primary {
  padding: 20px 40px;
  background: linear-gradient(135deg, #01A572 0%, #027652 100%);
  color: #fff;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--zd-dur) var(--zd-ease),
              box-shadow var(--zd-dur) var(--zd-ease),
              transform var(--zd-dur) var(--zd-ease),
              color var(--zd-dur) var(--zd-ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.info-btn-secondary {
  padding: 20px 40px;
  background: #F2F2F2;
  color: #01A572;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  border: 2px solid #01A572;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.info-btn-secondary:hover {
  background-color: #01A572;
  color: #fff;
}

/* Остальные стили без изменений */
/*
 * SEO ВАЖНО: контент скрывается ТОЛЬКО через max-height + overflow:hidden.
 * НЕ используем display:none / opacity:0 / visibility:hidden — это
 * сигналит Google «hidden content» и понижает вес. max-height-паттерн
 * Google трактует как обычный аккордеон/Read more и индексирует на полный вес.
 */
.info-zeldom__description {
  padding: 0 32px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              padding 0.3s ease;
  background-color: #F2F2F2;
  border-radius: 0 0 12px 12px;
  transform: translateZ(0);
}

.info-zeldom__description--active {
  padding: 32px;
  max-height: 4000px;
}

.info-zeldom__subtitle {
  color: #01A572;
  margin: 20px 0 8px;
  font-size: 18px;
}

.info-zeldom__subtitle:first-child {
  margin-top: 0;
}

.info-zeldom__paragraph {
  max-width: 1600px;
  margin-bottom: 16px;
}

/* Fade-in только при раскрытии — не оставляем элементы изначально с opacity:0 */
.info-zeldom__description--active .info-zeldom__subtitle {
  animation: fadeInUp 0.5s ease-out 0.1s both;
}

.info-zeldom__description--active .info-zeldom__paragraph {
  animation: fadeInUp 0.5s ease-out 0.2s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.info-zeldom__description>* {
  transform: translateZ(0);
}

.info-zeldom__link {
  color: #01A572;
  border-bottom: solid 1px #01A572;
}

.info-zeldom__hide-button {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: #01A572;
  font-size: 16px;
  font-weight: 600;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  /* Наведение меняет фон, скругление и цвет (см. :hover ниже) - радиус тут в
     списке осознанно, он часть эффекта, а не побочный груз. */
  transition: background-color var(--zd-dur) var(--zd-ease),
              border-radius var(--zd-dur) var(--zd-ease),
              color var(--zd-dur) var(--zd-ease);
  margin-top: 20px;
  border-top: 1px solid #c2c8ce;
}

.info-zeldom__hide-button:hover {
  background-color: rgba(1, 165, 114, 0.1);
  border-radius: 8px;
  color: #007a54;
}



/* 30.05 Не знаете, что выбрать? */
.section-padding {
  padding: 48px 0;
}

.section-work {
  max-width: 1900px;
  background: #3F3F3F;
  width: 100%;
  height: 500px;
  margin: 0 auto;
  padding-left: 40px;     /* только слева — справа карточка должна прижиматься к краю */
  border-radius: 20px;
  display: flex;
  gap: 48px;
  box-sizing: border-box;
}

.left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.left h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.15;
  color: #fff;
  -webkit-background-clip: text;
  background-clip: text;
}

.left p {
  font-size: 18px;
  opacity: 0.88;
  max-width: 700px;
  margin-bottom: 24px;
  color: #fff;
}

.buttons {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.btn {
  padding: 20px 40px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  /* 400мс было выше потолка интерфейса (300 по DESIGN.md) - кнопка отвечала
     с заметной задержкой. Меняются подъём и прозрачность (.btn-white:hover). */
  transition: transform var(--zd-dur) var(--zd-ease),
              opacity var(--zd-dur) var(--zd-ease),
              background var(--zd-dur) var(--zd-ease),
              color var(--zd-dur) var(--zd-ease);
  min-width: 200px;
  box-sizing: border-box;
}

.btn-white {
  background: #fff;
  color: #1f1f1f;
}

.btn-white:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

/* Правая часть */
.right-side {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 32px;
  flex-shrink: 0;
}

.avatars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.avatar-wrapper {
  position: relative;
  width: 84px;
  height: 84px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.4s ease;
  background: linear-gradient(146deg, rgba(3, 153, 106, 1) 0%, rgba(0, 71, 52, 1) 100%);
  z-index: 5;
  flex-shrink: 0;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.1);
  transition: border 0.5s ease;
  position: relative;
  z-index: 2;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  user-select: none;
  -webkit-user-drag: none;
}
/* Круг прогресса */
.progress-ring {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 96px;
  height: 96px;
  transform: rotate(-90deg);
  z-index: 1;
}

.progress-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 4;
}

.progress-circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 251;
  /* 2π × 40 */
  stroke-dashoffset: 251;
  transition: stroke-dashoffset 0.05s linear;
}

.avatar-wrapper.active .progress-circle {
  animation: progressFill 5s linear forwards;
}

@keyframes progressFill {
  0% {
    stroke-dashoffset: 251;
    stroke: #00e6a0;
  }

  50% {
    stroke: #00ffaa;
  }

  100% {
    stroke-dashoffset: 0;
    stroke: #00e6a0;
  }
}

.card-work {
  background: linear-gradient(146deg, rgba(54, 194, 150, 1) 0%, rgba(1, 140, 103, 1) 100%);
  border-radius: 20px;
  padding: 20px 20px 40px 20px;
  width: 400px;
  height: 500px;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* 500мс - вдвое выше потолка; карточка «догоняла» курсор. */
  transition: transform var(--zd-dur-slow) var(--zd-ease),
              box-shadow var(--zd-dur-slow) var(--zd-ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 9;
  box-sizing: border-box;
  flex-shrink: 0;
}

.main-photo {
  width: 400px;
  /* На всю высоту карточки: с auto сверху открывался её зелёный фон. */
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  transition: transform var(--zd-dur-slow) var(--zd-ease),
              opacity var(--zd-dur-slow) var(--zd-ease);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.card-work::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.3) 30%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0) 70%);
  z-index: 2;
  pointer-events: none;
  border-radius: 20px;
}

.name {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  position: relative;
  line-height: 28px;
  z-index: 3;
  text-align: left;
}

.position {
  font-size: 18px;
  opacity: 0.9;
  line-height: 1.6;
  color: #ccc;
  position: relative;
  z-index: 3;
  text-align: left;
}

.position strong {
  color: #00e6a0;
  font-weight: 600;
  display: block;
  font-size: 18px;
}

.right-side-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 3;
}

.card-photo {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  border-radius: 20px;
  z-index: 1;
}

/* 30.06 Мы работаем по всему казахстану */
.map-block {
  max-width: 1900px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 32px;
  align-items: stretch;
  padding: 48px 0 48px;
}

.map-frame {
  grid-column: 2;
  position: relative;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.map-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 32px;
  color: #1f1f1f;
  line-height: 1.2;
}

.map-title span {
  color: #01A572;
  position: relative;
}

.map-title span::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #01A572, transparent);
  border-radius: 2px;
}

.map-inner {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(1, 165, 114, 0.2);
  background: #f3fbf7;
  padding: 20px;
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-inner::before { content: none; }

.map-inner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  transition: transform 0.5s ease;
}

/* === Счётчики поверх карты === */
.map-stats {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  z-index: 2;
}
.map-stat {
  background: transparent;
  border: 1.5px solid #01A572;
  border-radius: 12px;
  padding: 8px 16px;
  text-align: center;
  pointer-events: auto;
  min-width: 130px;
}
.map-stat__num {
  font-size: 28px;
  font-weight: 700;
  color: #01A572;
  line-height: 1.05;
}
.map-stat__label {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
@media (max-width: 768px) {
  /* На мобиле выносим счётчики под карту — не перекрывают её */
  .map-inner { display: flex; flex-direction: column; gap: 12px; }
  .map-stats {
    position: static;
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
  }
  .map-stat {
    background: #f3fbf7;
    padding: 8px 8px;
    min-width: 0;
    border-radius: 8px;
  }
  .map-stat__num { font-size: 20px; }
  .map-stat__label { font-size: 14px; letter-spacing: 0.2px; }
  .map-inner img { order: 1; }
}
.features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  justify-content: space-between;
}

.feature {
  background: #fff;
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  border: 1.5px solid rgba(1, 165, 114, 0.18);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
}

.feature::before { content: none; }

.feature:hover {
  border-color: #01A572;
  background: #f3fbf7;
  transform: translateY(-6px);
}

.icon-wrap {
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-wrap img {
  width: 80px;
  height: 80px;
  transition: transform 0.3s ease;
}
.feature:hover .icon-wrap img { transform: scale(1.05); }

.icon-wrap-logo img {
  width: 60px;
  height: 60px;
}

.feature p {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f1f1f;
  margin: 0;
  transition: color 0.25s ease;
}

.feature:hover p { color: #01A572; }


/* Базовые стили карточки переиспользуются в .utp-card (секция "Почему выбирают") */
.comparison-card {
    background: #fff;
    border: 1px solid #d3d8dd;
    border-radius: 12px;
    padding: 24px 24px;
    min-height: 220px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.comparison-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.comparison-card-icon-wrapper {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3fbf7;
    flex-shrink: 0;
}
.comparison-card-icon { width: 58px; height: 58px; object-fit: contain; }
.comparison-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0;
    line-height: 1.3;
}
.comparison-card-description {
    font-size: 14px;
    line-height: 1.6;
    color: #4a4f54;
    margin: 0;
}

/* === 30.07 Комикс "С нами и без нас" === */
.comic-story {
    max-width: 1024px;
    margin: 0 auto;
    padding: 48px 24px;
}

@media (min-width: 1025px) {
    .comic-story { max-width: min(94vw, 1320px); }
    .comic-slider { max-width: clamp(460px, 38vw, 640px); margin: 0 auto; }
    .comic-slider-track { padding: 0; }
    .comic-stage { flex: 0 0 100%; }
    /* Потолок высоты убран вместе с aspect-ratio у кадра: он сжимал рисунок,
       и под ним снова появлялись поля. Высоту теперь держит ширина слайдера
       (max-width выше). */
    .comic-stage-frame { border-radius: 28px; }
}

.comic-story-header {
    text-align: center;
    margin-bottom: 32px;
}

.comic-story-title {
    font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem);
    font-weight: 700;
    color: #1f1f1f;
    margin: 0 0 8px;
    line-height: 1.15;
}

.comic-story-title .ct-with    { color: #01A572; }
.comic-story-title .ct-without { color: #DC3545; }

.comic-story-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.comic-slider {
    position: relative;
}

.comic-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 6%;
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 4%, rgba(0, 0, 0, 0.75) 8%, #000 14%, #000 86%, rgba(0, 0, 0, 0.75) 92%, rgba(0, 0, 0, 0.3) 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 4%, rgba(0, 0, 0, 0.75) 8%, #000 14%, #000 86%, rgba(0, 0, 0, 0.75) 92%, rgba(0, 0, 0, 0.3) 96%, transparent 100%);
}

.comic-slider-track:active { cursor: grabbing; }

.comic-slider-track::-webkit-scrollbar { display: none; }

.comic-stage {
    flex: 0 0 88%;
    scroll-snap-align: center;
    padding: 0 4px;
    opacity: 0.45;
    transform: scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.comic-stage.is-active {
    opacity: 1;
    transform: scale(1);
}

/*
 * ПОДПИСИ ПОД РИСУНКОМ, А НЕ ПОВЕРХ НЕГО.
 *
 * У героев комикса имена («Ерлан», «Данияр») нарисованы В САМОЙ картинке, по
 * нижнему краю. Плашки с подписями лежали absolute по низу кадра и накрывали
 * их целиком. Теперь кадр - колонка: сверху рисунок, снизу подписи,
 * они друг на друга не заходят. Высота подписи при этом может быть любой (на
 * узком экране текст переносится в две строки) - рисунок сам займёт остаток,
 * потому что тянется flex-ом, а не процентом высоты.
 */
.comic-stage-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    /*
     * ПРОПОРЦИЮ ДЕРЖИТ РИСУНОК, А НЕ КАДР.
     *
     * Кадр стоял 2/3 при рисунках 4/5 - шесть из восьми показывались с
     * тёмными полосами сверху и снизу. Поставить 4/5 кадру мало: снизу в нём
     * лежат подписи, они забирают ~65px, и слот под рисунок опять выходит
     * другой пропорции (0.90) - полосы просто переезжают на бока.
     * Поэтому высоту кадра больше никто не задаёт: она складывается из
     * рисунка и подписей. Ограничение max-height снято по той же причине -
     * оно сжимало рисунок и возвращало поля.
     */
    border-radius: 20px;
    overflow: hidden;
    /* Тёмная тень за кадром убрана по просьбе владельца. */
    box-shadow: none;
}

/*
 * contain, а не cover: cover срезает по краям, а именно у левого и правого
 * края стоят имена героев - «Ерлан» показывался как «рлан». Пропорция кадра
 * теперь совпадает с рисунками, поэтому вписывание идёт без полей; фон
 * остаётся страховкой на случай картинки другого размера.
 */
.comic-stage img {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    /* Все восемь рисунков приведены к 4/5 (два обрезаны сверху - снизу у них
       таблички с именами). Пропорция задана здесь, поэтому высота считается
       от ширины и пустого места не остаётся ни при какой ширине экрана. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
    background: #24301f;
    display: block;
}

.comic-stage-captions {
    display: flex;
    flex: 0 0 auto;
    z-index: 1;
}

.comic-caption {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    padding: 16px 8px;
    backdrop-filter: blur(3px);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/*
 * Цвет плотный, без прозрачности. Полупрозрачный градиент был рассчитан на то,
 * что под плашкой лежит рисунок - он и давал ей цвет. После переноса подписей
 * ПОД рисунок подложки не стало, и плашки выцвели в розовое и бледно-зелёное.
 */
.comic-caption--with {
    background: #01875c;
}

.comic-caption--without {
    background: #921723;
}

.comic-slider-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, transform 0.15s ease;
}

/* Стрелки показываем только на ПК с мышью - на тач-устройствах достаточно свайпа */
@media (hover: hover) and (pointer: fine) {
    .comic-slider-btn { display: flex; }
}

.comic-slider-btn:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.comic-slider-btn--prev { right: calc(100% + 16px); left: auto; }
.comic-slider-btn--next { left: calc(100% + 16px); right: auto; }

.comic-slider-btn:disabled {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    cursor: default;
}

.comic-slider-btn:disabled:hover { transform: translateY(-50%); }

/* ЦЕЛЬ НАЖАТИЯ 24x24, ТОЧКА ПО-ПРЕЖНЕМУ 9px.
   Замерено в браузере на ширине 375: кнопки были 9x9 при шаге между
   центрами 18px. Это провал WCAG 2.2 «Target Size (Minimum)» (2.5.8, AA):
   нужно 24x24, а исключение «разнесённые цели» здесь не спасает — круги
   диаметром 24 вокруг соседних точек пересекаются при шаге 18.
   На телефоне в такую точку попасть трудно, а это единственный способ
   перескочить к нужному кадру.
   Саму точку не увеличиваем: она рисуется в ::before, кнопка вокруг неё
   прозрачная. gap убран в ноль — 24-пиксельная кнопка уже несёт по 7.5px
   поля с каждой стороны, и центры расходятся ровно на 24px. Полоса точек
   при этом становится шире (5x24 вместо 5x9+4x9) — это осознанная плата. */
.comic-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 20px;
}

.comic-slider-dots button {
    width: 24px;
    height: 24px;
    /* position + absolute у ::before, а не grid/flex на самой кнопке:
       раскладочные display на <button> исторически капризны (Safari по-своему
       обходится с анонимным блоком внутри кнопки), а точку надо поставить
       ровно в центр цели. Здесь центрирование не зависит от того, как браузер
       трактует внутренности кнопки. */
    position: relative;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.comic-slider-dots button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d8dde1;
    /* Сдвиг на половину собственного размера — это и есть центрирование.
       Он ОБЯЗАН повторяться в состоянии .is-active ниже: transform —
       единое свойство, и запись одного лишь scale() затёрла бы сдвиг,
       уронив точку вправо-вниз от центра. */
    transform: translate(-50%, -50%);
    /* Длительность и кривая — из css/tokens.css (подключён на index.php),
       свои значения не заводим. transform анимируем на ::before, а не на
       кнопке: масштабировать надо точку, а не область нажатия. */
    transition: background var(--zd-dur) var(--zd-ease),
                transform var(--zd-dur) var(--zd-ease);
}

.comic-slider-dots button.is-active::before {
    background: #01A572;
    /* Сдвиг повторён намеренно — см. комментарий выше: без него scale()
       затирает центрирование. */
    transform: translate(-50%, -50%) scale(1.3);
}

@media (max-width: 640px) {
    .comic-story { padding: 28px 0; }
    .comic-story-header { padding: 0 16px; }
    .comic-slider-track { padding: 0 4%; }
    .comic-stage { flex: 0 0 92%; padding: 0 5px; }
    /* Высоту складывают рисунок и подписи: 58vh давал белую пустоту под подписями. */
    .comic-stage-frame { height: auto; border-radius: 18px; }
    .comic-caption { font-size: 14px; line-height: 1.25; padding: 10px 6px; }
    .comic-slider-dots { padding: 0 16px; }
}

/* === Мобильная адаптация (карточки переиспользуются в .utp-card) === */
@media (max-width: 760px) {
    .comparison-card { padding: 14px 12px; }
    .comparison-card-icon-wrapper { width: 72px; height: 72px; border-radius: 14px; }
    .comparison-card-icon { width: 50px; height: 50px; }
    /* Карточки «почему мы»: заголовок 14 и описание 13 - мельче основного
       текста страницы. Подняты на ступень шкалы. */
    .comparison-card-title { font-size: 18px; }
    .comparison-card-description { font-size: 16px; }
}

/* 30.08 Почему выбирают Зелёный Дом */
.utp-section {
    max-width: 1900px;
    margin: 0 auto;
}

.utp-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.utp-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0 0 12px;
}

.utp-header .sub {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4f54;
    margin: 0;
}

.utp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.utp-card.comparison-card {
    flex: initial;
    height: 100%;
}

.utp-card .comparison-card-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

@media (max-width: 1200px) {
    .utp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .utp-grid { grid-template-columns: 1fr; }
    .utp-header h2 { font-size: 26px; }
}

/* 30.08 Вся продукция имеет сертификаты соответствия */
        .padding-wrapper {
            padding: 48px 0;
            width: 100%;
            max-width: 1900px;
        }
        
        .wrapper {
            width: 100%;
            background: #3F3F3F;
            padding: 20px;
            border-radius: 20px;
            display: flex;
            gap: 32px;
        }

        /* Левая часть */
        .inner-left {
            flex: 1;
            background: linear-gradient(177deg,rgba(32, 135, 103, 1) 0%, rgba(0, 97, 71, 1) 100%);
            border-radius: 16px;
            padding: 32px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            min-width: 300px;
        }

        .inner-left h2 {
            color: #fff;
            font-size: 36px;
            margin: 0;
            font-weight: 700;
            line-height: 1.1;
        }

        .sub {
            color: #fff;
            opacity: 0.8;
            font-size: 18px;
            margin-top: 32px;
        }

        .buttons-container {
            margin-top: 32px;
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
        }

        .cta-btn {
            width: 300px;
            height: 80px;
            border-radius: 16px;
            background: #fff;
            border: none;
            color: #1F1F1F;
            font-size: 22px;
            font-weight: 700;
            cursor: pointer;
            transition: background var(--zd-dur) var(--zd-ease),
                        transform var(--zd-dur) var(--zd-ease);
        }

        .cta-btn:hover {
            background: #f0f0f0;
            transform: translateY(-3px);
        }

        .download-btn {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            background: #474647;
            border: none;
            cursor: pointer;
            transition: transform var(--zd-dur) var(--zd-ease);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .download-btn:hover {
            transform: translateY(-3px);
        }
        .donwload-pdf{
          width: 40px;
          height: 100%;
        }

        /* Правая часть с галереей */
        .inner-right {
            flex: 1.4;
            background: linear-gradient(146deg,rgba(3, 153, 106, 1) 0%, rgba(0, 133, 97, 1) 100%);
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            min-width: 300px;
            user-select: none;
        }

.scroll-mask-left,
.scroll-mask-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 2;
    opacity: 0.9;
    filter: blur(0.5px);
}

.scroll-mask-left {
    left: 0;
    background: linear-gradient(
        90deg,
        #004531 0%,
        #004531 5%,
        rgba(0, 69, 49, 0.95) 25%,
        rgba(0, 69, 49, 0.8) 35%,
        rgba(0, 69, 49, 0.6) 45%,
        rgba(0, 69, 49, 0.4) 55%,
        rgba(0, 69, 49, 0.2) 65%,
        rgba(0, 69, 49, 0.0) 75%,
        transparent 100%
    );
}

.scroll-mask-right {
    right: 0;
    background: linear-gradient(
        270deg,
        #004531 0%,
        #004531 5%,
        rgba(0, 69, 49, 0.95) 25%,
        rgba(0, 69, 49, 0.8) 35%,
        rgba(0, 69, 49, 0.6) 45%,
        rgba(0, 69, 49, 0.4) 55%,
        rgba(0, 69, 49, 0.2) 65%,
        rgba(0, 69, 49, 0.0) 75%,
        transparent 100%
    );
}
        /* Кнопки навигации для ПК */
        .scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background var(--zd-dur) var(--zd-ease),
                        opacity var(--zd-dur) var(--zd-ease);
            opacity: 0.7;
        }

        .scroll-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            opacity: 1;
        }

        .scroll-btn-left svg {
          width: 15px;
          height: 100%;
          rotate: 180deg;
        }
        .scroll-btn-left{
          left: 20px;
        }
        .scroll-btn-right {
            right: 20px;
        }
        .scroll-btn-right svg {
          width: 15px;
          height: 100%;
        }
        .fas{
          width: 20px;
          height: 100%;
        }

        /* Индикатор скролла для мобильных */
        .scroll-indicator {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
            background: rgba(0, 0, 0, 0.4);
            padding: 8px 20px;
            border-radius: 25px;
            backdrop-filter: blur(10px);
            pointer-events: none;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Галерея - СКРЫТ СКРОЛЛБАР */
        .photo-scroll {
            display: flex;
            gap: 40px;
            padding: 32px;
            height: 100%;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        /* Скрываем скроллбар в Chrome/Safari */
        .photo-scroll::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }
        .photo-scroll img {
          display: inline-block;
          vertical-align: top;
         }

        .ph {
            height: 450px;
            width: auto;
            min-width: 300px;
            border-radius: 20px;
            cursor: pointer;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            flex-shrink: 0;
            object-fit: cover;
        }

        /* Модальное окно - УЛУЧШЕННОЕ */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.88);
            z-index: 1000;
            overflow: hidden;
            cursor: default;
        }

        .modal-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: auto;
            cursor: grab;
        }

        .modal-content.grabbing {
            cursor: grabbing;
        }

        .modal-img-container {
            position: relative;
            display: inline-block;
            max-width: 90%;
            max-height: 90%;
            transition: transform 0.1s ease-out;
        }

        .modal-img {
            max-width: 100%;
            max-height: 90vh;
            border-radius: 8px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
            cursor: grab;
            user-select: none;
            -webkit-user-drag: none;
            display: block;
        }

        .close-modal {
            position: fixed;
            top: 25px;
            right: 35px;
            color: #fff;
            font-size: 45px;
            cursor: pointer;
            z-index: 1001;
            background: rgba(0, 0, 0, 0.3);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background var(--zd-dur) var(--zd-ease),
                        transform var(--zd-dur) var(--zd-ease);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .close-modal:hover {
            background: rgba(0, 0, 0, 0.5);
            transform: scale(1.1);
        }

        .zoom-controls {
            position: fixed;
            bottom: 30px;
            right: 30px;
            display: flex;
            gap: 16px;
            z-index: 1001;
        }

        .zoom-btn {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            /* backdrop-filter из списка исключён намеренно: он самый дорогой
               в отрисовке, а при наведении не меняется - `all` пересчитывал
               размытие на каждом кадре впустую. */
            transition: background var(--zd-dur) var(--zd-ease),
                        transform var(--zd-dur) var(--zd-ease);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .zoom-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.1);
        }

        .zoom-info {
            position: fixed;
            bottom: calc(80px + var(--zd-nav-lift));
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            background: rgba(0, 0, 0, 0.4);
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            backdrop-filter: blur(10px);
            z-index: 1001;
            display: none;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }


/* 30.09 С нами работают */
.brands-wrapper {
  overflow: hidden;
  padding: 48px 0;
  background: #fff;
  margin-left: calc(-1 * var(--container-padding, 20px));
  margin-right: calc(-1 * var(--container-padding, 20px));
  position: relative;
  text-align: center;
}

.brands-wrapper h2 {
  font-size: 3rem;
  margin-top: 0;
  margin-bottom: 16px;
  font-weight: 700;
  color: #1f1f1f;
  opacity: 50%;
}

.brands-invite {
  font-size: 1.125rem;
  color: #5a5a5a;
  margin: 0 auto 40px;
  max-width: 640px;
}

.brands-invite a {
  color: var(--color-accent, #2e7d32);
  font-weight: 600;
  text-decoration: underline;
}

.brands-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Градиентные маски по краям */
.brands-carousel::before,
.brands-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  z-index: 2;
  pointer-events: none;
}

.brands-carousel::before {
  left: 0;
  background: linear-gradient(90deg, #fff 0%, transparent 100%);
}

.brands-carousel::after {
  right: 0;
  background: linear-gradient(270deg, #fff 0%, transparent 100%);
}

.brands-track {
  display: flex;
  align-items: center;
  gap: 80px;
  animation: scroll-brands 30s linear infinite;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0); /* Для Safari */
  -webkit-transform: translate3d(0, 0, 0);
}

.brands-track a {
  display: flex;
  flex-shrink: 0;
}

.brands-track img {
  height: 50px;
  /*
   * width: auto ОБЯЗАТЕЛЕН, а не «на всякий случай».
   *
   * У картинки в разметке стоят настоящие width/height (1200x450 у SVG
   * логотипов - это их viewBox). CSS задавал только высоту, и ширина
   * оставалась атрибутной: каждый логотип раскладывался в 1200x50, растянутый
   * поперёк, а вся лента выходила 39 120px. В кадр помещался ОДИН логотип, за
   * ним пустота до края экрана.
   *
   * Атрибуты размеров при этом снимать нельзя - они держат место до загрузки и
   * не дают странице дёргаться. Поэтому пропорцию восстанавливает CSS.
   */
  width: auto;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter var(--zd-dur-slow) var(--zd-ease),
              opacity var(--zd-dur-slow) var(--zd-ease);
  flex-shrink: 0;
  display: block;
}

.brands-track img:hover {
  filter: grayscale(0);
  opacity: 1;
}

.brands-carousel:hover .brands-track {
  animation-play-state: paused;
}

@keyframes scroll-brands {
  0% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
  }
}

/* Скорость одинакова на всех устройствах - длительность анимации вычисляется в JS по реальной ширине трека */
@media (max-width: 768px) {
  .brands-track {
    gap: 40px;
  }

  .brands-track img {
    height: 40px;
  }
  
  .brands-carousel::before,
  .brands-carousel::after {
    width: 100px;
  }
}

/* Отключение анимации при ресайзе */
.brands-track {
  animation-play-state: running;
  -webkit-animation-play-state: running;
}


/* 30.10 Два блока - Видео */
.two-blocks-section {
  padding: 20px 20px;
  background-color: #F2F2F2;
  border-radius: 20px;
  margin: 0 auto;
  max-width: 1900px;
  height: 100%;
}

.two-blocks-p {
  padding: 48px 0;
}

.two-blocks-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  height: 100%;
  max-width: 1900px;
  margin: 0 auto;
  align-items: stretch;
}

/* Общая настройка блоков */
.block {
  border-radius: 20px;
  position: relative;
  box-sizing: border-box;
  min-height: 400px;
}

/* Левый блок - Видео */
.video-block {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Основной контейнер видео */
.video-wrapper {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--zd-dur-slow) var(--zd-ease),
              box-shadow var(--zd-dur-slow) var(--zd-ease);
  background: #1f1f1f;
}

.video-wrapper:hover {
  transform: translateY(-5px);
}

/* Постер видео */
.video-poster {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 соотношение */
  overflow: hidden;
}

.poster-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  /* Меняется только яркость постера (.video-wrapper:hover .poster-image). */
  transition: filter var(--zd-dur-slow) var(--zd-ease);
}

.video-wrapper:hover .poster-image {
  filter: brightness(0.6);
}

/* Оверлей с кнопкой воспроизведения */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #1f1f1f52;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background var(--zd-dur-slow) var(--zd-ease),
              opacity var(--zd-dur-slow) var(--zd-ease);
}

.video-wrapper:hover .video-overlay {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* Кнопка воспроизведения */
.play-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: transform var(--zd-dur) var(--zd-ease),
              opacity var(--zd-dur) var(--zd-ease);
}

.play-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--zd-dur) var(--zd-ease),
              background var(--zd-dur) var(--zd-ease);
}

.play-icon svg {
  width: 24px;
  height: 28px;
  color: #00A572;
  margin-left: 4px;
}

.play-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.video-duration {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

/* Контейнер для iframe */
.video-iframe-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  /* visibility в списке обязателен: без него скрытый слой остаётся кликабельным
     весь переход - он перекрывает страницу невидимой плёнкой. */
  transition: opacity var(--zd-dur) var(--zd-ease),
              visibility var(--zd-dur) var(--zd-ease);
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.video-iframe-container.active {
  opacity: 1;
  visibility: visible;
}

.video-iframe-wrapper {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
}

.video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 16px;
}

.video-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  /* backdrop-filter не меняется при наведении и в список не входит: это самое
     дорогое свойство здесь, `all` пересчитывал размытие впустую. */
  transition: background var(--zd-dur) var(--zd-ease),
              border-color var(--zd-dur) var(--zd-ease),
              transform var(--zd-dur) var(--zd-ease);
  z-index: 1001;
  backdrop-filter: blur(10px);
}

.video-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

/* Информация о видео */
.video-info {
  text-align: left;
  padding: 0 8px;
}

.video-title {
  color: #1f1f1f;
  font-size: 22px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 8px;
}

.video-description {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* Правый блок - Предупреждение */
.warning-block {
  background: #fff;
  border: 2px solid #e53935;
  text-align: center;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}

.warning-content {
  padding: 48px 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.warning-title {
  font-size: 22px;
  font-weight: 700;
  color: #e53935;
  margin: 0;
  line-height: 1.4;
}

/* Кнопка */
.warning-btn {
  display: block;
  background: #e53935;
  color: #fff;
  padding: 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  border-radius: 0 0 8px 8px;
  transition: background var(--zd-dur) var(--zd-ease);
  margin-top: auto;
  border: none;
  cursor: pointer;
  width: 100%;
}

.warning-btn:hover {
  background: #c62828;
}

/* Блокировка скролла когда видео открыто */
body.video-open {
  overflow: hidden;
}

/* 30.11 Приложение */
.page-promo-wrapper {
    display: flex;
    align-items: flex-end;
    max-width: 1400px;
    margin: 0px auto;
    position: relative;
    height: 380px;
}
.page-promo-padding{
    padding: 48px 0;
}
.phone-outer-container {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 300px; 
    height: 100%; 
    z-index: 10; 
}
.promo-phone-image {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}
.promo-block {
    display: flex;
    background-color: #01A572; 
    color: #fff;
    padding: 40px;
    align-items: center;
    width: 100%;
    min-height: 250px;
    margin-left: 200px; 
    border-radius: 12px;
    z-index: 5;
}

.promo-content {
    flex-grow: 1; 
    padding-left: 80px;
}

.promo-title {
    font-size: 2.5em; 
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: bold;
}

.promo-text {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.text-and-buttons-row {
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    width: 100%;
}

.store-links-buttons {
    display: flex;
    gap: 16px;
}

.store-btn {
    display: flex;
    align-items: center;
    background-color: #1f1f1f; 
    color: #fff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    padding: 8px 40px;
    height: 48px; 
    transition: background-color 0.2s, transform 0.2s;
    text-align: left;
}

.btn-text {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    align-items: center;
    height: 100%;
}
.store-btn .btn-logo {
    filter: invert(100%) brightness(100%);
    height: 25px; 
    width: auto;
    margin-right: 8px;
}


/* 30.12 FAQ Вопрос ответ в main.css*/

/* 30.13 Форма обратной связи */
.form-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 8px;
}

.form-header {
  text-align: center;
  margin-bottom: 32px;
}

.form-header h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1f1f1f;
}

.form-header p {
  font-size: 18px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.form-content {
  position: relative;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

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

.form-field.full {
  grid-column: 1 / -1;
}

.form-label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 4px;
}

.required::after {
  content: "*";
  color: #ff4757;
  margin-left: 3px;
}

.form-input {
  padding: 12px 16px;
  border: 2px solid #c2c8ce;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color var(--zd-dur-fast) var(--zd-ease),
              background var(--zd-dur-fast) var(--zd-ease);
  background: #fff;
  width: 100%;
}

.form-input:focus {
  outline: none;
  border-color: #01A572;
}

/* Поле телефона */
.phone-field {
  position: relative;
}

/* Своя широкая зона у кода страны - как в формах входа и регистрации
   (css/registration.css). Здесь высота уже была во всё поле (top/bottom:
   2px), не хватало ширины и читаемости надписи.
   */
.country-selector {
  position: absolute;
  left: 2px;
  /* 1px вместо 2px по вертикали: при поле 46px зазор в два пикселя с каждой
     стороны оставлял селектору 42px - на два меньше порога 44px. */
  top: 1px;
  bottom: 1px;
  width: 104px;
  background: #f8f9fa;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  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="%2301A572" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
  -webkit-tap-highlight-color: transparent;
}

.phone-input {
  padding-left: 114px;
}

textarea.form-input {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

select.form-input {
  cursor: pointer;
  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="%2301A572" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 32px;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--zd-dur-fast) var(--zd-ease),
              border-color var(--zd-dur-fast) var(--zd-ease);
  border: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}

.checkbox-container:hover {
  background: #f1f3f5;
}

.checkbox-container input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #01A572;
}

.checkbox-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
  cursor: pointer;
}

.privacy-link {
  color: #01A572;
  font-weight: 600;
  text-decoration: none;
  padding: 1px 3px;
  transition: color var(--zd-dur-fast) var(--zd-ease),
              background var(--zd-dur-fast) var(--zd-ease);
  background: rgba(1, 165, 114, 0.1);
  border-radius: 3px;
  display: inline-block;
  margin: 0 1px;
}

.privacy-link:hover {
  color: #027652;
  background: rgba(1, 165, 114, 0.2);
}

/* ПОДВАЛ ФОРМЫ.
   Здесь стоял position:sticky + z-index:100 - «фиксированная кнопка». Сброс
   в relative лежит в @media (max-width:992px), то есть липла кнопка на
   ДЕСКТОПЕ, где форма и так помещается на экран целиком. Итог: подвал
   всплывал над строкой согласия, которая по потоку ниже, и наезжал на неё -
   чекбокс с ссылкой на политику оказывался под кнопкой. Мобильному
   прилипание не досталось ни разу.
   */
.form-footer {
  position: static;
  padding: 16px 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.submit-btn-container {
  display: flex;
  justify-content: center;
}

.submit-btn {
  width: 100%;
  max-width: 500px;
  padding: 16px;
  background: linear-gradient(135deg, #01A572 0%, #027652 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--zd-dur) var(--zd-ease),
              box-shadow var(--zd-dur) var(--zd-ease),
              background var(--zd-dur) var(--zd-ease);
  box-shadow: 0 4px 12px rgba(1, 165, 114, 0.2);
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(1, 165, 114, 0.3);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

.submit-btn-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Сообщения об ошибках и успехе */
/* СООБЩЕНИЕ ОБ ОШИБКЕ ОБЯЗАНО ЧИТАТЬСЯ. Было #ff4757 на 12px - контраст к
   белому 3.3:1 при норме 4.5:1, и это единственный текст, объясняющий,
   почему форма не отправляется. Аудитория 40-65+: не прочитал - бросил
   заказ. #D32036 даёт 5.1:1 и остаётся тем же тревожным красным. Замер
   PageSpeed + свой.
   */
.error-message {
  color: #D32036;
  font-size: 14px;
  margin-top: 4px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, height 0.2s ease;
}

.error-message.show {
  opacity: 1;
  height: auto;
}

.error-border {
  border-color: #ff4757 !important;
}

.success-message {
  background: #d4edda;
  color: #155724;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity var(--zd-dur) var(--zd-ease-out),
              transform var(--zd-dur) var(--zd-ease-out);
  border: 1px solid #c3e6cb;
}

.success-message.show {
  opacity: 1;
  transform: translateY(0);
}

/* Прогресс-бар */
.form-progress {
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  margin: 8px 0 20px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(135deg, #01A572 0%, #027652 100%);
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 2px;
}

/***************************** 90 - Responsive *****************************/
/* 90.01 Так правки микро мелочи по адаптиву */
        @media (max-width: 1200px) {
           .wrapper { flex-direction: column; gap: 20px; }
            .inner-left h2 { font-size: 45px; }
            .sub { font-size: 24px; }
            .cta-btn { width: 250px; height: 80px; font-size: 20px; }
            .download-btn { width: 80px; height: 80px; }
            .ph { height: 400px; min-width: 280px; }
        }

/* 90.02 === Основной весь адаптив ниже ноутбуков === */
@media (max-width: 1024px) {
  .section-work {
      flex-direction: column;
      height: auto;
      padding: 20px;
      gap: 32px;
      border-radius: 20px;
  }
  .left h2 {
    font-size: 36px;
  }

  .left p {
    font-size: 16px;
    max-width: 600px;
  }

  .card-work {
    width: 100%;
  }

  .brands-wrapper{
    padding: 32px 0;
  }

  .two-blocks-p{
    padding: 32px 0;
  }

  .page-promo-padding{
    padding: 32px 0;
  }
  
  .faq{
    padding: 32px 0;
  }

  .main-photo {
      width: 100%;
  }

  .right-side{
   flex-direction: column;
   align-items: center;
   gap: 32px;
   width: 100%;
  }
  .avatars {
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px;
  }
  .scroll-btn {
    display: none;
  }

  .scroll-indicator {
    display: flex;
  }

  .inner-right {
    cursor: grab;
  }

  .inner-right:active {
    cursor: grabbing;
  }

  .hot-line {
    background-color: #F2F2F2;
    height: 5px;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
  }

  .two-blocks-section {
    padding: 48px 20px;
  }

  .two-blocks-container {
    gap: 24px;
  }

  .block {
    min-height: 350px;
  }

  .warning-content {
    padding: 40px 32px;
  }

  .warning-title {
    font-size: 22px;
  }

  .play-icon {
    width: 70px;
    height: 70px;
  }

  .play-icon svg {
    width: 22px;
    height: 26px;
  }

  .play-text {
    font-size: 16px;
  }

  .promo-section {
    display: none;
  }

  .promo-section-scroll {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0px 0px 0px;
    background: #fff;
  }

  /* Категории */
  /*
   * ПОЛОСА СНОВА ПРОКРУЧИВАЕТСЯ ВБОК.
   *
   * Перенос по рядам занимал три ряда и полэкрана, а главное - подписи в
   * узкой колонке рвались по слогам: «Семена кор-мовых», «Различное
   * оборудова-ние». Колонка расширена (см. grid-auto-columns), так что
   * длинное слово помещается целиком, а одиннадцать разделов уходят вбок.
   *
   * Отрицательные поля по краям - чтобы полоса шла от края до края экрана, а
   * первая и последняя плитка не липли к нему при прокрутке (scroll-padding).
   */
  .categories-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--container-padding, 20px));
    margin-right: calc(-1 * var(--container-padding, 20px));
    padding: 0 20px;
    scroll-padding-left: 20px;
    scroll-padding-right: 20px;
  }

  .categories-wrapper::-webkit-scrollbar {
    display: none;
  }

  /*
   * РОВНАЯ СЕТКА РАЗДЕЛОВ, как на странице разделов.
   *
   * align-items: stretch - плитки ряда одной высоты. Было `start`, и высота
   * равнялась содержимому каждой: замер на 390px давал три разные высоты -
   * 120px у «Удобрений» (подпись в строку), 138px у большинства и 157px у
   * «Средств защиты растений» (три строки). Низ ряда получался рваным.
   */
  .categories {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    /*
     * 132px, а не прежние 104px: при 104 подпись лезла в перенос по слогам -
     * «оборудова-ние», «кор-мовых». Мерил по самому длинному слову полосы:
     * «оборудование» в кегле 12px занимает ~96px, плюс поля - в 132 колонке
     * оно встаёт целиком, и переносится только между словами.
     * Ширина колонки шире иконки (90px) намеренно: место нужно подписи, а
     * иконка стоит по центру.
     */
    grid-auto-columns: 132px;
    /*
     * Между колонками было 4px, и подписи соседних разделов почти
     * соприкасались - «Различное оборудование» и «Удобрения Стимуляторы»
     * читались как одна фраза. Было 3-4px между
     * текстами. 14px - это примерно ширина пробела в кегле подписи, взгляд
     * видит границу и без линий. По вертикали тоже прибавили: подпись
     * бывает в три-четыре строки, и ряды слипались.
     */
    gap: 12px 14px;
    scroll-snap-type: x proximity;
    align-items: stretch;
  }

  /*
   * center, а не flex-start. Подпись - блок шириной по тексту, и у короткого
   * названия («Удобрения») она прижималась к левому краю ячейки, а иконка
   * 90px в колонке 100px стояла тоже слева: текст не совпадал с картинкой над
   * ним. text-align: center внутри узкого блока этого не лечит.
   */
  .category {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
    scroll-snap-align: start;
  }

  /*
   * ЦЕНТРИРОВАТЬ НАДО ССЫЛКУ ИЗНУТРИ, А НЕ ПЛИТКУ СНАРУЖИ.
   *
   * Внутри .category лежит ОДНА ссылка, а уже в ней - картинка и подпись.
   * Поэтому align-items у плитки центрировал ссылку целиком, а внутри неё
   * блоки по-прежнему шли от левого края: у длинного названия ссылка занимала
   * все 100px, и картинка 80px прижималась влево - центр картинки и центр
   * текста расходились на 12px (замер на 390px). У короткого названия ссылка
   * ужималась по тексту, и та же вёрстка выглядела выровненной - отсюда и
   * ощущение, что плитки стоят вразнобой.
   */
  .category > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-decoration: none;
  }

  .category-img {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    background: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
  }

  .category-img img {
    width: 90px;
    height: 90px;
    object-fit: contain;
  }

  .category p {
    font-size: 12px;
    font-weight: 500;
    color: #1F1F1F;
    margin-top: 8px;
    line-height: 1.3;
    /* 100% колонки, а не 104px: при жёстком потолке подпись была ШИРЕ своей
       колонки и залезала в межколоночный зазор с обеих сторон - те самые
       3-4px до соседнего текста. */
    max-width: 100%;
    /*
     * ПЕРЕНОС ПО СЛОГАМ УБРАН. Он и рисовал «Семена кор-мовых» и «Различное
     * оборудова-ние»: в узкой колонке слово не помещалось, и браузер рвал его
     * по словарю. Колонка теперь шире самого длинного слова, поэтому строка
     * делится только между словами. break-word оставлен подстраховкой на
     * случай слова длиннее колонки - оно останется внутри плитки, а не
     * полезет к соседям.
     */
    overflow-wrap: break-word;
  }

}

  /* 90.03 Планшеты вертикально */
  @media (max-width: 992px) {
      .inner-left,
  .inner-right {
    width: 100%;
  }

  .inner-left h2 {
    font-size: 36px;
  }

  .ph {
    height: 350px;
    min-width: 250px;
  }

  .scroll-indicator {
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    padding: 8px 16px;
  }

  .sub {
    font-size: 18px;
    margin-top: 16px;
  }
      .form-footer {
    position: relative;
    bottom: auto;
    padding-top: 20px;
    padding-bottom: 0;
    background: transparent;
    backdrop-filter: none;
    border-top: none;
  }

}

    /* 90.04 Мобильные устройства */
@media (max-width: 768px) {
  .info-zeldom-modern {
    margin-top: 32px;
    padding: 48px 0;
    border-radius: 16px;
  }
  
  .info-zeldom-modern::before {
    width: 400px;
    height: 400px;
    opacity: 0.7;
  }
  
  .info-zeldom-container {
    padding: 0 20px;
  }
  
  .info-zeldom-icon img {
    width: 60px;
    height: 55px;
  }
  
  .info-zeldom-icon {
    padding-bottom: 16px;
  }
  
  .info-zeldom-title {
    margin: 0 0 16px 0;
    padding-bottom: 16px;
  }
  
  .info-zeldom-title::after {
    width: 80px;
    height: 4px;
  }
  
  .info-zeldom-subtitle {
    margin: 0 0 32px 0;
    line-height: 1.5;
  }
  
  .info-zeldom-features {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
  }
  
  .info-feature {
    padding: 16px 16px;
    gap: 16px;
    border-radius: 12px;
  }
  
  .info-feature span,
  .info-feature p {
    font-size: 18px;
    transform: none;
  }
  
  .feature-icon img {
    width: 40px;
  }
  
  .info-zeldom-buttons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .info-btn-primary,
  .info-btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    text-align: center;
  }
  
  .info-zeldom__description--active {
    padding: 20px;
  }
  
  .info-zeldom__subtitle {
    font-size: 18px;
  }
  
  /* 14 -> 16px и просторнее межстрочный: это основной связный текст
     главной страницы, а аудитория сайта 40-65+. */
  .info-zeldom__paragraph {
    font-size: 16px;
    line-height: 1.6;
  }
  
  .info-zeldom__hide-button {
    font-size: 14px;
    padding: 12px;
  }
      .section-padding {
    padding: 48px 0px;
  }

  .section-work {
    flex-direction: column;
    height: auto;
    padding: 20px;
    gap: 32px;
    border-radius: 20px;
  }

  .left h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .left p {
    font-size: 16px;
    max-width: 500px;
  }

  .buttons {
    gap: 16px;
    flex-direction: column;
  }

  .btn {
    padding: 16px 32px;
    font-size: 16px;
    min-width: 180px;
  }

  .right-side {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
  }

  .avatars {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .avatar-wrapper {
    width: 70px;
    height: 70px;
  }

  .progress-ring {
    width: 80px;
    height: 80px;
    top: -5px;
    left: -5px;
  }

  .card-work {
    width: 100%;
    height: 500px;
    padding: 20px 20px 32px 20px;
  }

  .name {
    font-size: 22px;
  }

  .position {
    font-size: 16px;
  }

  .main-photo {
      width: 100%;
  }

  .position strong {
    font-size: 18px;
  }
          .page-promo-wrapper {
        flex-direction: column;
        height: auto;
        align-items: center;
        margin-top: 32px;
    }

    .phone-outer-container {
        position: static;
        width: 250px;
        height: auto;
        margin: 0 auto;
        margin-bottom: -225px;
        z-index: 20;
    }
    
    .promo-phone-image {
        position: static;
    }

    .promo-block {
        margin-left: 0;
        width: calc(100% - 40px);
        text-align: center;
        padding: 260px 20px 20px 20px;
        min-height: 300px;
    }

    .promo-content {
        padding-left: 0;
    }
    
    .promo-title {
        font-size: 1.6em;
    }

    .text-and-buttons-row {
        flex-direction: column;
        justify-content: center;
    }
    
    .store-links-buttons {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    .store-btn{
      padding: 0;
      width: 100%;
      display: flex;
      justify-content: center;
    }
        .photo-scroll {
    padding: 20px;
  }

  .padding-wrapper {
    padding: 32px 0;
  }

  .wrapper {
    padding: 8px;
  }

  .inner-left {
    padding: 20px;
  }

  .inner-left h2 {
    font-size: 28px;
  }

  .cta-btn {
    width: 200px;
    height: 70px;
    font-size: 18px;
  }

  .ph {
    height: 280px;
    min-width: 200px;
  }

  .close-modal {
    top: 20px;
    right: 25px;
    font-size: 35px;
    width: 50px;
    height: 50px;
  }

  .zoom-controls {
    bottom: 20px;
    right: 20px;
  }

  .zoom-btn {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .sub {
    font-size: 16px;
  }

      .form-header h1 {
        font-size: 36px;
      }

      .form-header p {
        font-size: 14px;
      }

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

      /* На узком экране селектор НЕ сужаем: он и так самый мелкий орган
         управления формы, а 12px надписи на телефоне не прочесть. */
      .country-selector {
        width: 100px;
        font-size: 14px;
      }

      .phone-input {
        padding-left: 110px;
      }

      .submit-btn {
        max-width: none;
      }

    .two-blocks-section {
      padding: 40px 16px;
    }

    .two-blocks-container {
      grid-template-columns: 1fr;
      gap: 24px;
      max-width: 600px;
    }

    .block {
      min-height: 300px;
    }

    .warning-content {
      padding: 32px 24px;
    }

    .warning-title {
      font-size: 18px;
    }

    .warning-btn {
      padding: 20px;
      font-size: 16px;
    }

    .video-wrapper {
      border-radius: 16px;
    }

    .play-button {
      gap: 12px;
    }

    .play-icon {
      width: 60px;
      height: 60px;
    }

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

    .play-text {
      font-size: 14px;
    }

    .video-duration {
      bottom: 15px;
      right: 15px;
      font-size: 12px;
      padding: 4px 8px;
    }

    .video-title {
      font-size: 18px;
    }

    .video-description {
      font-size: 16px;
    }

    .video-iframe-container {
      padding: 16px;
    }

    .video-iframe-wrapper {
      max-width: 95%;
    }

    .video-close {
      top: 15px;
      right: 15px;
      width: 45px;
      height: 45px;
      font-size: 18px;
    }

    .faq-title {
      font-size: 2rem;
      margin-bottom: 32px;
    }

    .faq-question {
      padding: 20px;
      font-size: 1.1rem;
    }

    .faq-answer p {
      padding: 24px 20px;
      font-size: 1rem;
    }

    .map-block {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      gap: 20px;
      border-radius: 20px;
    }

    .map-frame {
      grid-column: 1;
      grid-row: 1;
    }

    .features:first-child {
      grid-column: 1;
      grid-row: 2;
    }

    .features:last-child {
      grid-column: 1;
      grid-row: 3;
    }

    .map-title {
      font-size: 1.8rem;
      margin-bottom: 20px;
    }

    .features {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }

    .feature {
      flex: 1;
      min-width: 150px;
      padding: 20px 8px;
    }

    .icon-wrap img {
      width: 70px;
      height: 70px;
    }

    .icon-wrap-logo img {
      width: 55px;
      height: 55px;
    }

    .feature p {
      font-size: 1rem;
    }

    .info-zeldom__link__flex {
      display: flex;
      flex-direction: column;
    }

    .info-zeldom__about {
      margin-left: 0;
      margin-top: 8px;
    }

    .info-zeldom__header {
      padding: 20px;
    }

    .info-zeldom__title {
      font-size: 22px;
    }

    .info-zeldom__text {
      font-size: 14px;
    }

    .info-zeldom__description--active {
      padding: 20px;
    }

    .info-zeldom__subtitle {
      font-size: 18px;
    }

    .category-img {
      width: 80px;
      height: 80px;
    }

    .category-img img {
      width: 80px;
      height: 80px;
    }

    /* 12 -> 14px: подпись под иконкой раздела - единственное, что называет
       категорию. Ширина поднята вместе с кеглем, иначе слово рвётся. Замер.
       Сама ширина теперь у КОЛОНКИ (grid-auto-columns), а подписи - 100% от
       неё: при жёстких 104px в колонке 100px подпись вылезала в межколоночный
       зазор, и до соседнего текста оставалось 3-4px. */
    .category p {
      max-width: 100%;
      font-size: 14px;
    }

    .benefit {
      width: 300px;
      height: auto;
    }

  }

  /* Маленькие экраны */
  @media (max-width: 480px) {
    .info-zeldom-modern {
    padding: 20px 0;
    border-radius: 12px;
    }
  
  .info-zeldom-modern::before {
    width: 300px;
    height: 300px;
    opacity: 0.6;
  }
  
  .info-zeldom-container {
    padding: 0 16px;
  }
  
  .info-zeldom-icon img {
    width: 50px;
    height: 45px;
  }
  
  .info-feature {
    padding: 12px 16px;
    gap: 12px;
  }
  
  .info-feature span,
  .info-feature p {
    font-size: 18px;
  }
  
  .info-feature p {
    font-size: 16px;
  }
  
  .feature-icon img {
    width: 35px;
  }
  
  .info-btn-primary,
  .info-btn-secondary {
    padding: 16px 20px;
    font-size: 14px;
  }
  
  .info-zeldom__description--active {
    padding: 16px;
  }
  
  .info-zeldom__subtitle {
    font-size: 16px;
  }
  
  /* Ещё одна ступень вниз на 480px не нужна: 16px держим до самых узких
     экранов, мельче текст этой аудитории не читается. */
  .info-zeldom__paragraph {
    font-size: 16px;
  }
  
  .info-zeldom__hide-button {
    font-size: 14px;
    padding: 8px;
  }
  .section-work {
    flex-direction: column;
    height: auto;
    padding: 20px 16px;
    gap: 32px;
    border-radius: 20px;
  }

  .left {
    width: 100%;
  }

  .left h2 {
    margin-bottom: 16px;
    line-height: 1.2;
  }

  .left p {
    font-size: 14px;
    margin: 0 auto 24px;
    max-width: 100%;
  }

  .buttons {
    gap: 12px;
  }

  .btn {
    padding: 16px 24px;
    font-size: 16px;
    width: 100%;
    border-radius: 12px;
  }

  .right-side {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  .avatars {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
  }

  .avatar-wrapper {
    width: 75px;
    height: 75px;
  }

  .progress-ring {
    width: 85px;
    height: 85px;
    top: -5px;
    left: -5px;
  }

  .avatar {
    border-width: 2px;
  }

  .card-work {
    width: 100%;
    height: 500px;
    padding: 16px 16px 24px 16px;
    border-radius: 20px;
  }

  .card-work::before {
    border-radius: 20px;
  }

  .main-photo {
    width: 100%;
  }

  .name {
    font-size: 22px;
  }

  .position {
    font-size: 14px;
  }

  .position strong {
    font-size: 16px;
  }

  .card-photo {
    border-radius: 20px;
  }
      .cta-btn {
    width: 100%;
  }

  .download-btn {
    width: 100%;
  }

  .inner-left {
    padding: 20px;
  }

  .inner-left h2 {
    font-size: 22px;
  }

  .buttons-container {
    flex-direction: column;
  }

  .ph {
    height: 220px;
    min-width: 180px;
  }

  .zoom-controls {
    bottom: 15px;
    right: 15px;
    gap: 8px;
  }

  .zoom-btn {
    width: 45px;
    height: 45px;
  }

  .scroll-indicator {
    font-size: 12px;
    padding: 4px 12px;
    bottom: 15px;
  }

  .close-modal {
    top: 15px;
    right: 20px;
    font-size: 30px;
    width: 45px;
    height: 45px;
  }

  .sub {
    font-size: 16px;
  }
    .form-header h1 {
      font-size: 28px;
    }

    .form-header p {
      font-size: 14px;
    }

    .form-input {
      padding: 8px 12px;
      font-size: 14px;
    }

    .country-selector {
      width: 96px;
      padding: 0 8px;
      padding-right: 24px;
    }

    .phone-input {
      padding-left: 106px;
    }

    .checkbox-container {
      padding: 8px;
    }

    .submit-btn {
      padding: 16px;
      font-size: 14px;
    }

    .form-footer {
      padding: 12px 8px;
    }

  .two-blocks-section {
    padding: 16px 12px;
  }

  .block {
    min-height: 250px;
  }

  .warning-content {
    padding: 32px 20px;
  }

  .warning-title {
    font-size: 18px;
  }

  .warning-btn {
    padding: 16px;
    font-size: 14px;
  }

  .video-wrapper {
    border-radius: 20px;
  }

  .play-button {
    gap: 8px;
  }

  .play-icon {
    width: 50px;
    height: 50px;
  }

  .play-icon svg {
    width: 16px;
    height: 20px;
  }

  .play-text {
    font-size: 14px;
  }

  .video-duration {
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    padding: 4px 8px;
  }

  .video-iframe-container {
    padding: 8px;
  }

  .video-iframe-wrapper {
    max-width: 100%;
    border-radius: 8px;
  }

  .video-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .brands-track {
    gap: 40px;
  }

  .brands-track img {
    height: 45px;
  }

  .brands-wrapper h2 {
    font-size: 1.9rem;
  }

  .brands-invite {
    font-size: 1rem;
    padding: 0 16px;
  }

  .faq-title {
    font-size: 1.8rem;
  }

  .faq-question {
    padding: 20px 16px;
    font-size: 1rem;
  }

  .faq-icon {
    font-size: 1.3rem;
    margin-left: 16px;
  }

  .faq-answer p {
    padding: 20px 16px;
  }

  .map-block {
    border-radius: 16px;
    gap: 16px;
  }

  .map-title {
    font-size: 2rem;
  }
}

@media (max-width: 360px) {
  .section-work {
    padding: 20px 16px;
    border-radius: 20px;
    gap: 24px;
  }

  .left h2 {
    font-size: 28px;
  }

  .left p {
    font-size: 14px;
  }

  .btn {
    padding: 16px 20px;
    font-size: 14px;
    min-width: 140px;
  }

  .avatar-wrapper {
    width: 55px;
    height: 55px;
  }

  .progress-ring {
    width: 65px;
    height: 65px;
    top: -5px;
    left: -5px;
  }

  .card-work {
    height: 350px;
    border-radius: 20px;
    padding: 16px 16px 20px 16px;
  }

  .card-work::before {
    border-radius: 20px;
  }

  .name {
    font-size: 18px;
  }

  .position {
    font-size: 14px;
  }

  .position strong {
    font-size: 16px;
  }

  .card-photo {
    border-radius: 20px;
  }
  .warning-content {
    padding: 24px 16px;
  }

  .warning-title {
    font-size: 16px;
  }

  .play-icon {
    width: 45px;
    height: 45px;
  }

  .play-text {
    font-size: 12px;
  }
}
/* ------------------------------------------------------------------
   Тяжёлые блоки главной - отрисовывать по мере прокрутки
      ------------------------------------------------------------------
   Те же соображения, что у секций карточки товара (css/card.css):
   content-visibility: auto откладывает вёрстку блока до момента, когда он
   попадает в зону видимости. Первый экран появляется раньше, работа не
   пропадает, а сдвигается.

   Замер главной: ниже сгиба лежат карта (653px), «как мы работаем» (500px),
   преимущества (557px), комикс (806px) - три тысячи пикселей, которые
   браузер считал до показа первого экрана.

   Карусель брендов и слайдер баннера НЕ трогаем: они на первом экране либо
   сразу под ним, и откладывать их значит показать пустое место.
   ------------------------------------------------------------------
   */
.map-block {
    content-visibility: auto;
    contain-intrinsic-size: auto 653px;
}

.section-work {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

.comic-story {
    content-visibility: auto;
    contain-intrinsic-size: auto 806px;
}

/* Разделы на главной (телефон) - плотнее, как у Kaspi: колонка по длине
   самого длинного слова подписи («комплектующие» в 14px), не шире. */
@media (max-width: 767px) {
  .categories { grid-auto-columns: 112px; gap: 8px 4px; }
  .category-img, .category-img img { width: 76px; height: 76px; }
  .category p { margin-top: 6px; line-height: 1.25; }
}

/* На узком ПК стрелки лежат на краях ленты, а не за краем окна. */
@media (max-width: 1100px) {
    .comic-slider-btn--prev { right: auto; left: 6px; }
    .comic-slider-btn--next { left: auto; right: 6px; }
}

/* Баннер главной: блок держит пропорцию самой картинки (ПК 1920x480, телефон и планшет 640x300),
   а не фиксированную высоту - иначе на любом экране, кроме одного, края обрезались. */
@media (min-width: 1024px) {
  .banner-slides { height: auto; aspect-ratio: 1920 / 480; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .banner-slides { height: auto; aspect-ratio: 640 / 300; }
}
@media (max-width: 767px) {
  .banner-slide { height: auto; aspect-ratio: 640 / 300; }
}

/* ===== Блок «Не знаете, что выбрать?» - кружки команды, нажатие раскрывает контакт (lib/team-picker.php) ===== */
.section-work.zd-team-b { height: auto; padding: 40px; align-items: center; contain-intrinsic-size: auto 360px; }
.zd-team-b .right-side { flex: 1 1 520px; min-width: 0; display: block; }
.zd-team__row { display: flex; flex-wrap: wrap; gap: 20px 24px; }
.zd-team__person {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 104px;
  padding: 0; border: 0; background: none; color: #E5E7EB; cursor: pointer; font: inherit;
}
.zd-team__photo {
  display: block; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #E6F4EC;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); transition: box-shadow .2s ease, transform .2s ease;
}
/* Фото команды вертикальные (2:3), лицо в верхней трети - кадр сдвинут вверх, иначе голова у края круга. */
.zd-team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.zd-team__name { font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; overflow-wrap: normal; word-break: normal; }
@media (hover: hover) { .zd-team__person:hover .zd-team__photo { transform: translateY(-2px); } }
.zd-team__person.is-active { color: #fff; }
.zd-team__person.is-active .zd-team__photo { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #01A572; }
.zd-team__person:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 12px; }
.zd-team__card {
  margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  padding: 20px 24px; border-radius: 18px; background: #4A4A4A; color: #fff;
}
/* Все карточки в одной ячейке: высота блока - по самой высокой, при переключении ничего не прыгает. */
.zd-team { display: grid; grid-template-columns: minmax(0, 1fr); }
.zd-team__row { grid-row: 1; }
.zd-team__card { grid-row: 2; grid-column: 1; }
.zd-team__card[hidden] { display: flex; visibility: hidden; }
.zd-team__info { flex: 1 1 220px; min-width: 0; }
.zd-team__card-name { font-size: 20px; font-weight: 800; line-height: 1.2; }
.zd-team__pos { margin-top: 4px; font-size: 15px; color: #D1D5DB; }
.zd-team__line { margin-top: 6px; font-size: 16px; font-weight: 700; }
.zd-team__contact { color: #6EE7B7; text-decoration: none; }
.zd-team__contact:hover { text-decoration: underline; }
.zd-team__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 12px; background: #01A572; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.zd-team__wa:hover { background: #018A60; color: #fff; }
.zd-team__wa i { font-size: 20px; }
@media (max-width: 1024px) {
  .section-work.zd-team-b { padding: 24px 20px; gap: 24px; }
  .zd-team-b .right-side { flex: none; width: 100%; }
  .section-work.zd-team-b { align-items: stretch; }
  .zd-team-b .left { width: 100%; align-items: flex-start; }
}
@media (max-width: 480px) {
  /* Ряд листается пальцем: имена целиком, без переноса посреди слова. */
  .zd-team__row { flex-wrap: nowrap; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 12px 20px 6px; scroll-padding-left: 20px; scroll-snap-type: x proximity; }
  .zd-team__row::-webkit-scrollbar { display: none; }
  .zd-team__person { flex: none; width: 92px; scroll-snap-align: start; }
  .zd-team__photo { width: 68px; height: 68px; }
  .zd-team__card { padding: 16px; }
  .zd-team__wa { width: 100%; }
}

/* Блок команды, доработка: кружки ровной сеткой по ширине карточки, на телефоне все в один ряд без прокрутки,
   содержимое карточки по центру её высоты. */
.zd-team__row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 16px 12px !important;
  overflow: visible !important; margin: 0 !important; padding: 8px 0 0 !important; justify-items: center; }
.zd-team__person { width: 100% !important; max-width: 128px; }
.zd-team__card { align-content: center; align-items: center; }
.zd-team__info { align-self: center; }
@media (max-width: 480px) {
  /* Телефон: сетка 2x2, фото слева, имя справа - имена не слипаются, текст 14px. */
  .zd-team__row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; justify-items: stretch; padding-top: 4px !important; }
  .zd-team__person { flex-direction: row !important; align-items: center; gap: 10px !important; max-width: none; min-height: 64px;
    padding: 8px 10px !important; border-radius: 14px !important; background: #4A4A4A !important; text-align: left; }
  .zd-team__person.is-active { background: #01A572 !important; }
  .zd-team__photo { flex: none; width: 54px !important; height: 54px !important; }
  .zd-team__person.is-active .zd-team__photo { box-shadow: 0 0 0 2px #fff !important; }
  .zd-team__name { font-size: 14px; text-align: left; line-height: 1.2; }
  .zd-team__card { margin-top: 12px; padding: 16px; }
}
@media (max-width: 360px) {
  .zd-team__row { grid-template-columns: minmax(0, 1fr) !important; }
  .zd-team__person { min-height: 56px; }
}

/* Блок команды на ПК - те же плашки, что на телефоне (фото слева, имя справа), четыре в ряд.
   Фокус с клавиатуры - тонкая зелёная обводка плашки вместо двойной системной. */
@media (min-width: 481px) {
  .zd-team__row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: 10px !important; justify-items: stretch; padding-top: 0 !important; }
  .zd-team__person { flex-direction: row !important; align-items: center; gap: 12px !important; max-width: none; min-height: 72px;
    padding: 10px 14px 10px 10px !important; border-radius: 16px !important; background: #4A4A4A !important; text-align: left; transition: background .15s ease; }
  .zd-team__person:hover { background: #555 !important; }
  .zd-team__person.is-active { background: #01A572 !important; }
  .zd-team__photo { flex: none; width: 60px !important; height: 60px !important; }
  .zd-team__person.is-active .zd-team__photo { box-shadow: 0 0 0 2px #fff !important; }
  .zd-team__person:hover .zd-team__photo { transform: none !important; }
  .zd-team__name { font-size: 15px; text-align: left; line-height: 1.25; }
  .zd-team__card { margin-top: 12px; }
}
.zd-team__person:focus { outline: none; }
.zd-team__person:focus-visible { outline: 2px solid #01A572 !important; outline-offset: 2px !important; box-shadow: none !important; border-radius: 14px !important; }

/* Полоса разделов на главной (телефон): плотнее, как у Kaspi - колонка 80px, картинка 56px, подпись 10px в две строки без переноса по слогам.
   Слово длиннее колонки («комплектующие») переносится по слогам с дефисом, а не рвётся где попало. */
@media (max-width: 1024px) {
  .promo-section-scroll .categories { grid-template-columns: none; grid-auto-columns: 80px; gap: 10px 8px; }
  .promo-section-scroll .category, .promo-section-scroll .category > a { width: 80px; align-items: flex-start; text-align: left; }
  .promo-section-scroll .category-img { margin-left: 0 !important; margin-right: auto !important; }
  .promo-section-scroll .category-img { width: 56px !important; height: 56px !important; border-radius: 14px; }
  .promo-section-scroll .category-img img { width: 44px; height: 44px; }
  /* Иконка и подпись по левому краю колонки - первая колонка начинается по линии баннера (12px). */
  .promo-section-scroll .categories-wrapper { padding-left: 0; padding-right: 12px; margin-left: 0; }
  /* Подложка под полосой (просьба руководства): светлая скруглённая область по линии баннера, тянется до последней иконки
     и уезжает вбок вместе с ними - видно, что полосу можно листать. Плитки иконок на ней белые. */
  .promo-section-scroll .categories { margin-left: 0; padding: 10px 6px 10px 10px; width: max-content; background: #F2F4F5; border-radius: 18px; }
  .promo-section-scroll .category-img { background: #fff !important; }
  /* Подпись - не больше двух строк, дальше многоточие: длинные названия разделов растягивали полосу в 4-5 строк. */
  .promo-section-scroll .category p { text-align: left; width: 100%; padding-right: 2px; box-sizing: border-box; font-size: 10px; line-height: 1.2; margin-top: 4px; overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-hyphens: manual;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 2.4em; }
}

/* Стрелки и точки слайдера главной не заходят в зону текста баннера (отступы в окне выбора области: компьютер 160/65 px, телефон 70/50 px).
   Точки прижаты к нижнему краю (их верх на 32 px от низа - ниже зоны текста на любой ширине от 768 px), стрелки на планшете уже и ближе к краю. */
@media (min-width: 768px) {
  .banner-dots { bottom: 8px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .banner-arrow { width: 36px; height: 36px; }
  .banner-arrow svg { width: 18px; height: 18px; }
  .banner-prev { left: 4px; }
  .banner-next { right: 4px; }
}

/* Полоса разделов (телефон): подпись по центру под иконкой - по левому краю она торчала вправо от плитки и смотрелась криво (владелец 08.10). */
@media (max-width: 1024px) {
  .promo-section-scroll .category, .promo-section-scroll .category > a { align-items: center; text-align: center; }
  .promo-section-scroll .category-img { margin-left: auto !important; margin-right: auto !important; }
  .promo-section-scroll .category p { text-align: center; padding-right: 0; }
}
/* Плотнее после центровки: колонка 74px, меньше поля у подложки и между рядами. */
@media (max-width: 1024px) {
  .promo-section-scroll .categories { grid-auto-columns: 74px; gap: 10px 4px; padding: 8px 6px; }
  .promo-section-scroll .category, .promo-section-scroll .category > a { width: 74px; }
  .promo-section-scroll .category p { margin-bottom: 0; }
}

/* ==== .zi: значки шрифта zd-ui вместо svg (сгенерировано по правилам svg выше) ==== */
.banner-arrow .zi { display: block; }
@media (min-width: 768px) and (max-width: 1023px) { .banner-arrow .zi { width: 20px; font-size: 20px; height: 20px; } }
.scroll-btn-left .zi { width: 15px; font-size: 15px; height: 100%; rotate: 180deg; }
.scroll-btn-right .zi { width: 15px; font-size: 15px; height: 100%; }
.play-icon .zi { width: 24px; font-size: 24px; height: 28px; color: #00A572; margin-left: 4px; }
@media (max-width: 1024px) { .play-icon .zi { width: 22px; font-size: 22px; height: 26px; } }
@media (max-width: 768px) { .play-icon .zi { width: 20px; font-size: 20px; height: 24px; } }
@media (max-width: 480px) { .play-icon .zi { width: 16px; font-size: 16px; height: 20px; } }
@media (min-width: 768px) and (max-width: 1023px) { .banner-arrow .zi { width: 18px; font-size: 18px; height: 18px; } }

/* Плашки команды: колонки от числа сотрудников (--zd-team-wide/--zd-team-mid из lib/team-picker.php), ряды ровные. */
@media (min-width: 1280px) {
  .zd-team__row { grid-template-columns: repeat(var(--zd-team-wide, 3), minmax(0, 1fr)) !important; }
}
@media (min-width: 769px) and (max-width: 1279px) {
  .zd-team__row { grid-template-columns: repeat(var(--zd-team-mid, 3), minmax(0, 1fr)) !important; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .zd-team__row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 481px) {
  .zd-team__person { min-width: 0; }
}
@media (max-width: 480px) {
  /* Две плашки в ряд на 360-414px: фото меньше, чтобы длинное слово должности («Специалист») не упиралось в край. */
  .zd-team__photo { width: 46px !important; height: 46px !important; }
  .zd-team__person { gap: 8px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .zd-team__name { font-size: 14px; overflow-wrap: anywhere; hyphens: auto; }
}
@media (max-width: 400px) {
  /* Уже 400px две плашки в ряд рвут «Менеджер по продажам» на три строки - по одной. */
  .zd-team__row { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Один ролик на главной - одной колонкой по центру, а не половиной сетки слева. */
.two-blocks-container:has(> .block:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 960px; }

/* Единый баннер 1920×700: одна картинка на всех экранах, целиком, только уменьшается. Старые слайды 4:1 в этом режиме режутся - их перезалить. */
.banner-slider--single .banner-slides { height: auto; aspect-ratio: 1920 / 700; }
@media (max-width: 767px) {
  .banner-slider--single .banner-slides { aspect-ratio: auto; }
  .banner-slider--single .banner-slide { height: auto; aspect-ratio: 1920 / 700; flex: 0 0 94%; }
}