/* ==========================================================================
   APS Suite — главная страница asiagps.kz.
   Основа: images/homepage/Main_page/v4/site.css (то, что утвердил директор),
   переведённый на токены дизайн-системы. Подключается только на главной,
   после aps-tokens.css и aps-components.css.

   Что изменено против образца:
   — все кегли и интерлиньяжи из --aps-fs-* / --aps-lh-*, свой трекинг снят;
   — надзаголовок — компонент .aps-eyebrow из системы, вместе с полосой 4 px;
   — сцены масштабируются от --aps-fit, а не от vw (§ 6.1б ТЗ);
   — шапка: градиент только в первом экране, ниже фона нет, схема по секции;
   — виджеты первого экрана — стекло с замеренной альфой (см. § «Первый экран»);
   — фоны глав чередуются 1 тёмный · 2 белый · 3 тёмный · 4 alt · 5 тёмный ·
     6 белый · 7 alt · 8 тёмный · 9 белый;
   — классы секций приходят из шорткодов APS_Home_Picks и не переименовываются.
   ========================================================================== */

/* --------------------------------------------------------------- основание */

:root {
  /* Единица масштаба сцены: 1 px при 1280×620, ниже 0.8, выше 1.15.
     Всё внутри .screen считается от неё, поэтому сцена целиком помещается
     в 100svh на 1024×560, 1280×620, 1366×630, 1440×780 и 1920×960. */
  --aps-fit: clamp(0.8px, min(100vw / 1280, 100svh / 620), 1.15px);

  /* Полупрозрачная градиентная подложка. Ровно два места на странице:
     фон шапки в первом экране и ряд логотипов в «APS в цифрах» (§ 6.4д). */
  --aps-home-plate: linear-gradient(180deg, rgba(23, 32, 54, 0.74), rgba(23, 32, 54, 0.16));

  /* Поверхность виджетов первого экрана. α = 0.74 подобрана замером по
     hero.png: самая светлая точка фотографии под виджетом — чисто белый
     пиксель, контраст белого текста на ней 6.90, приглушённого navy-200 —
     4.56 (порог 4.5 достигается уже при α = 0.62, запас взят под подписи). */
  --aps-home-glass: rgba(23, 32, 54, 0.74);
}

/* Тёмная глава. Роли те же, что у .aps-section--inverse в дизайн-системе:
   перечень тёмных поверхностей живёт в aps-tokens.css и селектора главной
   не знает, поэтому здесь он повторён — один раз, для .screen--dark. */
.screen--dark {
  --aps-bg: var(--aps-bg-inverse);
  --aps-bg-alt: var(--aps-bg-inverse-alt);
  --aps-surface: rgba(255, 255, 255, 0.04);
  --aps-surface-alt: rgba(255, 255, 255, 0.07);
  --aps-border: var(--aps-border-inverse);
  --aps-border-strong: rgba(255, 255, 255, 0.28);
  --aps-text: var(--aps-white);
  --aps-text-muted: var(--aps-navy-200);
  --aps-text-subtle: var(--aps-navy-300);
  --aps-accent-text: var(--aps-red-300);
  --aps-focus: var(--aps-navy-300);
  --aps-border-ui: var(--aps-navy-300);
  background: var(--aps-navy-900);
  color: var(--aps-white);
}

/* Глава — экран сцены. Высоту в 100svh даёт только режим сцен (ниже). */
.screen {
  position: relative;
  padding: clamp(30px, 4.3vw, 82px);
  font-size: calc(var(--aps-fs-body-n) * var(--aps-fit));
  line-height: var(--aps-lh-body);
}

.screen h1 { font-size: calc(var(--aps-fs-display-n) * var(--aps-fit)); line-height: var(--aps-lh-display); }
.screen h2 { font-size: calc(var(--aps-fs-h1-n) * var(--aps-fit)); line-height: var(--aps-lh-h1); }
.screen h3 { font-size: calc(var(--aps-fs-h2-n) * var(--aps-fit)); line-height: var(--aps-lh-h2); }
.screen h4 { font-size: calc(var(--aps-fs-h3-n) * var(--aps-fit)); line-height: var(--aps-lh-h3); }
.screen .aps-lead { font-size: calc(var(--aps-fs-lead-n) * var(--aps-fit)); line-height: var(--aps-lh-lead); }
.screen .aps-small,
.screen small { font-size: calc(var(--aps-fs-small-n) * var(--aps-fit)); line-height: var(--aps-lh-small); }
.screen .aps-eyebrow { font-size: calc(var(--aps-fs-eyebrow-n) * var(--aps-fit)); }

/* Фоны глав: двух подряд одинаковых нет (§ 6.4д, п. 9). */
#chapter-2,
#chapter-6,
#chapter-9 { background: var(--aps-bg); }
#chapter-4,
#chapter-7 { background: var(--aps-bg-alt); }

/* -------------------------------------------------------------------- шапка */

/* Шапка одна на весь сайт; на главной она прозрачная и меняет схему
   по секции под собой. Классы переключает aps-home.js, CSS описывает
   только состояния. Теней и обводок под текст нет (§ 6.4д, п. 6). */
.aps-home .elementor-location-header,
.aps-home .site-head {
  background: var(--aps-home-plate);
  transition: background var(--aps-t-base), color var(--aps-t-base);
}

/* Ниже первого экрана шапка выпадает при прокрутке вверх — без фона совсем. */
.aps-home.aps-head-floating .elementor-location-header,
.aps-home.aps-head-floating .site-head { background: none; }

.aps-home.aps-head-dark .elementor-location-header,
.aps-home.aps-head-dark .site-head { color: var(--aps-white); }
.aps-home.aps-head-dark .elementor-location-header a,
.aps-home.aps-head-dark .site-head a { color: var(--aps-white); }

.aps-home.aps-head-light .elementor-location-header,
.aps-home.aps-head-light .site-head { color: var(--aps-text); }
.aps-home.aps-head-light .elementor-location-header a,
.aps-home.aps-head-light .site-head a { color: var(--aps-navy-900); }

/* Активный пункт — полоса 2 px под текстом, цвет по схеме. */
.aps-home .elementor-location-header .menu-item > a,
.aps-home .site-head .menu-item > a { position: relative; }

.aps-home .elementor-location-header .menu-item.is-current > a::after,
.aps-home .site-head .menu-item.is-current > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: var(--aps-radius-bar);
  background: var(--aps-accent-text);
}
.aps-home.aps-head-dark .elementor-location-header .menu-item.is-current > a::after,
.aps-home.aps-head-dark .site-head .menu-item.is-current > a::after { background: var(--aps-accent-on-dark); }

/* Двухрядный пункт меню главной: разметку даёт APS_Header_Menu. */
.menu-item__note {
  display: block;
  margin-top: 2px;
  font-size: var(--aps-fs-eyebrow);
  line-height: var(--aps-lh-eyebrow);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.72;
}

/* ------------------------------------------------------------- первый экран */

.screen--hero {
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--aps-white);
  background: var(--aps-navy-900);
}

.hero-bg,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(9, 13, 21, 0.94), rgba(9, 13, 21, 0.66) 55%, rgba(9, 13, 21, 0.24)),
    linear-gradient(0deg, rgba(9, 13, 21, 0.72), transparent 55%);
}

.hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: 7vw;
  width: 100%;
}

.hero-copy .aps-lead { color: var(--aps-navy-100); max-width: 34em; }
.hero-copy h1 em { font-style: normal; border-bottom: var(--aps-bar) solid var(--aps-accent); padding-bottom: 2px; }

.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--aps-fit)) calc(18 * var(--aps-fit));
  margin-top: var(--aps-space-5);
  font-size: calc(var(--aps-fs-small-n) * var(--aps-fit));
  color: var(--aps-navy-100);
}
.hero-notes span::before { content: "✓"; color: var(--aps-accent-on-dark); margin-right: var(--aps-space-2); }

/* Виджеты — стекло поверх фотографии. Альфа замерена, см. --aps-home-glass. */
.widgets {
  display: grid;
  gap: var(--aps-space-3);
  width: 100%;
  max-width: 44em;
}

.widget {
  padding: var(--aps-space-5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--aps-radius-md);
  background: var(--aps-home-glass);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  color: var(--aps-white);
}

.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--aps-space-4);
  font-size: calc(var(--aps-fs-small-n) * var(--aps-fit));
  font-weight: 600;
}
.widget .aps-widget__label,
.widget p { color: var(--aps-navy-200); }
.widget strong { font-weight: 600; }
.widget .aps-widget__value,
.widget-value { font-size: calc(var(--aps-fs-stat-n) * var(--aps-fit)); line-height: 1; font-weight: 700; }
.widget .aps-widget__unit { font-size: 0.5em; color: var(--aps-navy-200); }

.status-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aps-success);
  box-shadow: 0 0 0 4px rgba(30, 142, 78, 0.18);
}

.scroll-note {
  position: absolute;
  left: clamp(30px, 4.3vw, 82px);
  right: clamp(30px, 4.3vw, 82px);
  bottom: var(--aps-space-5);
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(var(--aps-fs-eyebrow-n) * var(--aps-fit));
  letter-spacing: var(--aps-tracking-wide);
  text-transform: uppercase;
}

/* ------------------------------------------- глава 2: куда уходят деньги */

.losses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}

.loss-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 4.3vw, 82px);
}

.loss-intro .overview {
  width: 100%;
  max-height: 31vh;
  object-fit: cover;
  border-radius: var(--aps-radius-md);
  margin-bottom: var(--aps-space-5);
}

/* Разметку карточек даёт [aps_home_industries]: .aps-home-industries
   и .industry-card внутри. Классы не переименовывать. */
.aps-home-industries {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.industry-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(30px, 4.3vw, 82px);
  background: var(--aps-surface);
}
.industry-card:nth-child(even) { background: var(--aps-bg-alt); }

.industry-card__title { margin: 0 0 var(--aps-space-4); }
.industry-card__text { color: var(--aps-text-muted); margin-bottom: var(--aps-space-5); max-width: 34em; }
.industry-card__media { margin: auto 0 0; min-height: 0; flex: 1; }
.industry-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--aps-radius-md); }
.industry-card .aps-btn { align-self: flex-start; margin-top: var(--aps-space-4); }

/* ------------------------------------------------ глава 3: чему верить */

.trust {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 5vw;
  align-items: center;
}

.trust-p { position: relative; color: var(--aps-text-muted); margin-top: var(--aps-space-4); }

/* Посимвольный набор: распорка уже занимает место конечного текста, поэтому
   высота блока не меняется ни на кадр (§ 6.1б, исключение к п. 2 правила
   движения). Без JS в абзаце остаётся обычный текст. */
.typing-space { visibility: hidden; }
.typing-layer { position: absolute; inset: 0; }

.trust-visual {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  min-width: 0;
}

.map-monitor { position: relative; width: 100%; padding: 10px; }
.monitor-screen {
  padding: 11px;
  border-radius: var(--aps-radius-lg);
  border-bottom: 24px solid var(--aps-gray-300);
  background: var(--aps-navy-900);
  box-shadow: var(--aps-shadow-lg);
}
.monitor-bar {
  display: flex;
  align-items: center;
  gap: var(--aps-space-2);
  height: 27px;
  padding: 0 var(--aps-space-2);
  color: var(--aps-navy-100);
  font-size: calc(var(--aps-fs-eyebrow-n) * var(--aps-fit));
}
.monitor-map { position: relative; overflow: hidden; background: var(--aps-navy-50); }

.event-list {
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 47%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--aps-space-3) var(--aps-space-2);
  border-radius: var(--aps-radius-sm);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--aps-shadow-md);
  color: var(--aps-navy-900);
  font-size: calc(var(--aps-fs-small-n) * var(--aps-fit));
}
.event-list span {
  display: flex;
  align-items: center;
  gap: var(--aps-space-2);
  padding: var(--aps-space-3) 0;
  border-bottom: 1px solid var(--aps-border);
}
.event-list b { margin-left: auto; font-weight: 400; }
.event-list i { width: 5px; height: 5px; border-radius: 50%; background: var(--aps-success); flex: none; }
.event-list i.red { background: var(--aps-accent); }

.fuel-report { width: 100%; }
/* В режиме сцен отчёт лежит поверх монитора в той же рамке: без inset он
   раздвигал бы документ по горизонтали. */
.fuel-report img { border-radius: var(--aps-radius-md); }

/* --------------------------------------------- глава 4: как это внедряется */

.steps-wrap { position: relative; background: var(--aps-bg-alt); }
.steps-screen { padding: 0; overflow: hidden; }
.steps-rail { display: flex; width: max-content; height: 100%; min-height: inherit; }

.steps-intro {
  width: 55vw;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(30px, 4.3vw, 82px);
  background: var(--aps-bg-alt);
}
.steps-intro p:not(.aps-eyebrow) { color: var(--aps-text-muted); margin-top: var(--aps-space-5); max-width: 30em; }

.step-card {
  width: 28.6vw;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(45 * var(--aps-fit)) 2.7vw;
  border-right: 1px solid var(--aps-border);
  background: var(--aps-surface);
}
.step-card:nth-child(even) { background: var(--aps-bg); }
.step-card__n {
  font-size: calc(var(--aps-fs-display-n) * 2 * var(--aps-fit));
  line-height: 1;
  font-weight: 400;
  color: var(--aps-navy-300);
}
.step-card p { color: var(--aps-text-muted); margin-top: var(--aps-space-4); }
.step-line {
  margin-top: var(--aps-space-6);
  padding-top: var(--aps-space-4);
  border-top: 1px solid var(--aps-border);
  color: var(--aps-text-subtle);
  font-size: calc(var(--aps-fs-eyebrow-n) * var(--aps-fit));
  letter-spacing: var(--aps-tracking-wide);
  text-transform: uppercase;
}

/* ------------------------------------------------- глава 5: кому это нужно */

.roles { display: flex; flex-direction: column; justify-content: space-between; }
.role-content {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 5vw;
  align-items: center;
  flex: 1;
  min-height: 0;
  margin-top: var(--aps-space-4);
}
.role-content p:not(.aps-eyebrow) { color: var(--aps-text-muted); max-width: 30em; }
.role-images { position: relative; aspect-ratio: 16 / 9; max-height: 41vh; }
.role-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--aps-t-base);
}
.role-image.active { opacity: 1; }

.role-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--aps-space-3); margin-top: var(--aps-space-5); }
.role-tabs button {
  display: flex;
  flex-direction: column;
  gap: var(--aps-space-3);
  min-height: 84px;
  padding: var(--aps-space-4) var(--aps-space-2) 0;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--aps-border-strong);
  background: transparent;
  color: var(--aps-text-muted);
  font: inherit;
  font-size: calc(var(--aps-fs-small-n) * var(--aps-fit));
  cursor: pointer;
}
.role-tabs button[aria-selected="true"] {
  border-top: 2px solid var(--aps-accent);
  color: var(--aps-text);
}
.role-tabs button[aria-selected="true"] .aps-icon { color: var(--aps-accent); }

/* --------------------------------------------------- глава 6: платформы */

/* Разметку даёт [aps_home_platforms]. */
.aps-home-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
  gap: 4vw;
  margin-top: var(--aps-space-5);
}
.platform-card {
  display: flex;
  flex-direction: column;
  gap: var(--aps-space-4);
  padding: var(--aps-space-5);
  border: 1px solid var(--aps-border);
  border-radius: var(--aps-radius-md);
  background: var(--aps-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--aps-t-base), transform var(--aps-t-base);
}
.platform-card:hover { border-color: var(--aps-border-strong); transform: translateY(-2px); }
.platform-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.platform-card__title { margin: 0; }
.platform-card__text { color: var(--aps-text-muted); }
.platform-card__text p { margin: 0; }

/* ------------------------------------- глава 7: что ставится на технику */

.equipment {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 6vw;
  align-items: center;
  overflow: hidden;
}

/* Разметку даёт [aps_home_equipment]. */
.aps-home-equipment {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  gap: var(--aps-space-5);
}
.equipment-card {
  display: flex;
  flex-direction: column;
  gap: var(--aps-space-2);
  padding: var(--aps-space-5);
  border: 1px solid var(--aps-border);
  border-radius: var(--aps-radius-md);
  background: var(--aps-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--aps-t-base);
}
.equipment-card:hover { border-color: var(--aps-border-strong); }
.equipment-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.equipment-card__type {
  margin: var(--aps-space-2) 0 0;
  font-size: calc(var(--aps-fs-eyebrow-n) * var(--aps-fit));
  line-height: var(--aps-lh-eyebrow);
  font-weight: 700;
  letter-spacing: var(--aps-tracking-wide);
  text-transform: uppercase;
  color: var(--aps-text-subtle);
}
.equipment-card__title { margin: 0; font-size: calc(var(--aps-fs-h4-n) * var(--aps-fit)); line-height: var(--aps-lh-h4); }
.equipment-card__price {
  margin: auto 0 0;
  padding-top: var(--aps-space-3);
  border-top: 1px solid var(--aps-border);
  font-size: calc(var(--aps-fs-h4-n) * var(--aps-fit));
  color: var(--aps-accent-text);
}

/* ------------------------------------------------- глава 8: APS в цифрах */

.proof-wrap { position: relative; background: var(--aps-navy-900); }
.numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--aps-white);
}
.numbers-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--aps-space-7);
  width: 100%;
  height: 100%;
}
.city-bg { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23, 32, 54, 0.73), rgba(23, 32, 54, 0.33)); }
.city-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-toggle {
  position: absolute;
  right: var(--aps-space-5);
  bottom: var(--aps-space-5);
  z-index: 2;
}

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--aps-space-6); text-align: center; }
.stats .aps-stat__value { font-size: calc(var(--aps-fs-stat-n) * 2 * var(--aps-fit)); }

/* Ряд логотипов лежит на той же градиентной подложке, что фон шапки
   в первом экране. Плашек под знаками нет: файлы с прозрачным фоном. */
.numbers .aps-logo-row,
.aps-home-clients .aps-logo-row {
  gap: var(--aps-space-6);
  padding: var(--aps-space-5) var(--aps-space-6);
  border-radius: var(--aps-radius-md);
  background: var(--aps-home-plate);
}
.aps-logo-row__item { display: flex; align-items: center; }
.aps-logo-row__link { display: block; }
.aps-logo-row__img { height: calc(50 * var(--aps-fit)); width: auto; max-width: 100%; object-fit: contain; }

/* --------------------------------------------------- глава 9: заявка */

.request { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 7vw; align-items: center; }
.request-copy > p:not(.aps-eyebrow) { color: var(--aps-text-muted); margin: var(--aps-space-5) 0; max-width: 26em; }
.request-benefit {
  display: flex;
  align-items: center;
  gap: var(--aps-space-4);
  margin: var(--aps-space-3) 0;
  color: var(--aps-text-muted);
}

/* ========================================================== режим сцен ==== */

/* Порог включения: 1024×520 вместо 1024×700. На ноутбуке 1366×768 рабочая
   высота окна Chrome с панелью закладок около 630 px — прежнее условие
   не выполнялось, и вёрстка падала в мобильную ветку (§ 6.1б ТЗ). */
@media (min-width: 1024px) and (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .screen { height: 100svh; min-height: 0; }
  .motion-ready .aps-home-industries { position: absolute; inset: 0; }
  .motion-ready .industry-card { position: absolute; inset: 0; }
  .motion-ready .industry-card:not(:first-child) { transform: translateY(100%); }
  .motion-ready .trust-visual { height: 100%; }
  .motion-ready .fuel-report { position: absolute; inset: auto 0; opacity: 0; visibility: hidden; }
  .motion-ready .steps-screen { position: sticky; top: 0; }
  .motion-ready .roles { margin-top: -100svh; }
  .motion-ready .proof-wrap { height: 200svh; }
  .motion-ready .numbers { position: sticky; top: 0; }
  .motion-ready .request { margin-top: -100svh; }
  .motion-ready .step-card { height: 100svh; }
  .motion-ready .col-0 { transform: translateY(45px); }
  .motion-ready .col-1 { transform: translateY(-45px); }
}

/* ======================================================== узкие экраны ==== */

@media (max-width: 1023px), (max-height: 519px) {
  .screen { min-height: 0; padding: var(--aps-section-py) 6vw; font-size: var(--aps-fs-body); }
  .screen h1 { font-size: var(--aps-fs-h1); }
  .screen h2 { font-size: var(--aps-fs-h2); }
  .screen h3 { font-size: var(--aps-fs-h3); }
  .screen h4 { font-size: var(--aps-fs-h4); }
  .screen .aps-lead { font-size: var(--aps-fs-lead); }
  .screen .aps-small, .screen small { font-size: var(--aps-fs-small); }
  .screen .aps-eyebrow { font-size: var(--aps-fs-eyebrow); }

  .hero-layout { grid-template-columns: 1fr; gap: var(--aps-space-7); }
  .widgets { max-width: none; grid-template-columns: 1fr 1fr; }
  .widget .aps-widget__value, .widget-value { font-size: var(--aps-fs-stat); }
  .scroll-note { display: none; }

  .losses { display: block; }
  .loss-intro { padding: var(--aps-section-py) 6vw; }
  .loss-intro .overview { max-height: none; aspect-ratio: 16 / 9; }
  .aps-home-industries { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; height: auto; }
  .industry-card { position: relative; min-height: 0; padding: var(--aps-space-7) 6vw; }
  .industry-card__media { flex: none; }
  .industry-card__media img { height: 210px; }

  .trust { grid-template-columns: 1fr; gap: var(--aps-space-7); }
  .steps-rail { display: grid; width: auto; grid-template-columns: 1fr 1fr; }
  .steps-intro { width: auto; grid-column: 1 / -1; padding: var(--aps-section-py) 6vw; }
  .step-card { width: auto; height: auto; min-height: 0; padding: var(--aps-space-7) 6vw; }
  .step-card__n { font-size: var(--aps-fs-display); }
  .role-content { grid-template-columns: 1fr; gap: var(--aps-space-6); }
  .role-images { max-height: none; }
  .role-tabs { grid-template-columns: repeat(3, 1fr); }
  .equipment { grid-template-columns: 1fr; gap: var(--aps-space-7); }
  .aps-home-platforms { gap: var(--aps-space-6); }
  .stats { grid-template-columns: 1fr; gap: var(--aps-space-5); }
  .stats .aps-stat__value { font-size: var(--aps-fs-stat); }
  .numbers .aps-logo-row, .aps-home-clients .aps-logo-row { gap: var(--aps-space-5); padding: var(--aps-space-4); }
  .aps-logo-row__img { height: 40px; }
  .request { grid-template-columns: 1fr; gap: var(--aps-space-6); }
  .request-benefit { display: none; }
}

@media (max-width: 600px) {
  .screen { padding: var(--aps-section-py) var(--aps-gutter); }
  .widgets { grid-template-columns: 1fr; }
  .aps-home-industries { grid-template-columns: 1fr; }
  .role-tabs { grid-template-columns: repeat(2, 1fr); }
  .aps-home-equipment { grid-template-columns: 1fr 1fr; }
}

/* =================================================== приглушённое движение = */

@media (prefers-reduced-motion: reduce) {
  /* Сцены не создаются: блоки стоят в потоке в том же порядке, что на
     десктопе, и ни один текст не остаётся невидимым. */
  .aps-home-industries,
  .industry-card,
  .step-card { position: relative; inset: auto; transform: none; }
  .aps-home-industries { overflow: visible; height: auto; }
  .fuel-report { position: relative; opacity: 1; visibility: visible; }
  .typing-space { visibility: visible; }
  .typing-layer { display: none; }
  .steps-rail { display: grid; width: auto; grid-template-columns: repeat(3, 1fr); }
  .steps-intro { width: auto; grid-column: 1 / -1; }
  .step-card { width: auto; height: auto; }
  .role-image { transition: none; }
  .col-0, .col-1 { transform: none !important; }
}