/* ===== ЭКРАНЫ 04-07: четыре этапа — обычные секции, листаются вниз ===== */
.stages{position:relative}
.stages-sticky{position:static}
.stage-panel{
  position:relative;
  min-height:50vw;                 /* пропорция макета: 700px при 1400 */
  display:flex;flex-direction:column;justify-content:center;
  padding:5vw 0 3.5vw;
}

/* Появление контента этапа: небольшое смещение + масштаб + opacity, 300-500мс (по ТЗ) */
.stage-map,
.stage2-steps > *,
.stage3-grid > *,
.stage4-chain > * {
  opacity:0;
  transform:translateY(14px) scale(.96);
  transition:opacity .4s ease, transform .4s ease;
}
.stage-panel.is-inview .stage-map,
.stage-panel.is-inview .stage2-steps > *,
.stage-panel.is-inview .stage3-grid > *,
.stage-panel.is-inview .stage4-chain > * {
  opacity:1;
  transform:translateY(0) scale(1);
}
.stage2-steps > *:nth-child(1),.stage4-chain > *:nth-child(1){transition-delay:.05s}
.stage2-steps > *:nth-child(3),.stage4-chain > *:nth-child(3){transition-delay:.12s}
.stage2-steps > *:nth-child(5),.stage4-chain > *:nth-child(5){transition-delay:.19s}
.stage2-steps > *:nth-child(7),.stage4-chain > *:nth-child(9){transition-delay:.26s}
.stage3-grid > *:nth-child(1){transition-delay:.05s}
.stage3-grid > *:nth-child(2){transition-delay:.12s}
.stage3-grid > *:nth-child(3){transition-delay:.19s}
.stage3-grid > *:nth-child(4){transition-delay:.26s}
@media (prefers-reduced-motion: reduce){
  .stage-map,.stage2-steps > *,.stage3-grid > *,.stage4-chain > *{transition:none;transform:none;opacity:1}
}
.stage-panel.dark{background:#141414;color:#fff}
.stage-panel.light{background:var(--c-paper);color:var(--c-black)}
.stage-inner{width:100%}

/* Заголовок сцены: RoadRadio-Bold 44px, интерлиньяж 44, трекинг -50 */
.stage-mast{
  font-weight:700;font-size:2.904vw;text-transform:uppercase;   /* по факту: строка 1143px из 1400 */
  line-height:1;letter-spacing:-.05em;
  color:#fff;margin-bottom:2.93vw;max-width:none;
}
.stage-mast .accent{color:var(--c-orange)}
.stage-mast-dark{
  font-weight:700;font-size:2.904vw;text-transform:uppercase;   /* по факту: строка 1143px из 1400 */
  line-height:1;letter-spacing:-.05em;
  color:var(--c-black);margin-bottom:2vw;max-width:none;
}
.stage-mast-dark .accent{color:var(--c-orange)}
.stage-mast-dark.all-accent{color:var(--c-orange)}   /* экран 4 — заголовок целиком оранжевый */
.stage-mast{color:#ececec}                           /* светлый текст на тёмном экране 3 */
.stage-mast.all-accent{color:var(--c-orange)}        /* экран 3 — заголовок целиком оранжевый */

/* Фоновая карта экрана 1 — во всю ширину, из PSD */
.stage-map-bg{
  position:absolute;left:0;top:0;
  width:108%;height:100%;
  object-fit:cover;object-position:center;
  opacity:.5;pointer-events:none;z-index:0;
}
.stage-panel > .stage-inner,.stage-panel > .stage-nav{position:relative;z-index:1}

/* Stage 1 — карта */
.stage-body{display:grid;grid-template-columns:1fr 1fr;gap:2.86vw;align-items:center}
.stage-text h3{
  font-size:2.143vw;font-weight:400;      /* Onest-Regular 30px */
  letter-spacing:-.05em;margin-bottom:1.5vw;
}
.stage-text p{font-size:1.214vw;line-height:1.55;letter-spacing:-.025em;color:var(--c-text-soft);max-width:32vw}
.stage-map{opacity:1}
.stage-map img{width:100%;max-width:33vw;margin:0 auto;display:block}

/* Stage 2 — фиксация требований */
.stage-sub-only{
  font-size:2.143vw;font-weight:400;      /* Onest-Regular 30px */
  letter-spacing:-.05em;margin-bottom:5.07vw;color:var(--c-black);
}
.stage2-steps{display:flex;align-items:flex-start;gap:1vw;flex-wrap:nowrap}
.s2-step{width:14.5vw;flex-shrink:0}
.s2-step img{width:7.7vw;height:7.36vw;object-fit:contain;margin-bottom:1.07vw}
.s2-step p{
  font-size:1.036vw;line-height:1.55;     /* Onest-Regular 14.5px */
  letter-spacing:-.025em;font-weight:400;color:var(--c-black);
}
.s2-arrow{width:2.6vw;height:auto;margin-top:3vw;opacity:.9;flex-shrink:0}

/* Stage 3 — контроль изготовления (карточки 260×237, шаг 40px) */
.stage3-lead{
  font-size:2.143vw;font-weight:400;      /* Onest-Regular 30px */
  letter-spacing:-.05em;color:#d8d8d8;margin-bottom:2.71vw;
}
.stage3-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.857vw}
.s3-card{
  position:relative;overflow:hidden;
  height:16.93vw;                          /* 237px */
  clip-path:polygon(0 0,100% 0,100% 86%,86% 100%,0 100%);
}
.s3-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.05)}
.s3-num{
  position:absolute;left:0;top:.64vw;z-index:2;
  font-family:'Onest';font-weight:700;font-size:1.143vw;color:#fff;  /* 16px */
  padding-left:.3vw;
}
.s3-card .s3-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(252,95,31,.94) 0%,rgba(252,95,31,.55) 38%,transparent 62%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.14vw 1.5vw 1.36vw;
}
.s3-overlay b{font-size:1.143vw;font-weight:700;color:#fff;margin-bottom:.2vw;letter-spacing:-.025em}
.s3-overlay span{font-size:1.143vw;line-height:1.25;color:#fff;letter-spacing:-.025em}

/* Stage 4 — поставка: иконки идут зигзагом (нечётные выше на 29px) */
.stage4-lead{
  font-size:2.143vw;font-weight:400;      /* Onest-Regular 30px */
  letter-spacing:-.05em;color:var(--c-black);margin-bottom:4.93vw;
}
.stage4-chain{display:flex;align-items:flex-start;gap:0;flex-wrap:nowrap;justify-content:space-between}
.s4-step{width:11vw;flex-shrink:0;text-align:left}
.s4-step img{width:5.5vw;height:5.5vw;object-fit:contain;margin-bottom:2vw}   /* 77px */
.s4-step p{
  font-size:1.286vw;line-height:1.33;      /* Onest-Regular 18px, интерлиньяж 24 */
  font-weight:400;letter-spacing:-.025em;color:var(--c-black);
}
.s4-step:nth-of-type(even){margin-top:2.07vw}   /* сдвиг 29px */
.s4-line{width:6.5vw;height:auto;margin-top:1.71vw;flex-shrink:0;opacity:.55}

/* Нижняя навигация — общая, поверх панелей */
.stage-nav{
  margin-top:auto;padding-top:4vw;
  display:flex;align-items:center;gap:7vw;
}
.stage-count{font-size:1.286vw;color:var(--c-orange);flex-shrink:0}   /* 18px */
.stage-nav-links{display:flex;align-items:center;gap:1.4vw;flex-wrap:wrap;font-size:1.143vw}  /* 16px */
.stage-nav-links .snl{color:#8a8a8a;transition:color .25s}
.stage-nav-links .snl.is-active{color:var(--c-orange);font-weight:700}
.stage-nav-links .arrow{color:#5c5c5c}

/* ===== Мобильная/планшетная версия: обычный вертикальный поток (ТЗ п. "Упрощение") ===== */
@media (max-width:1024px){
  .stage-panel{min-height:0;padding:64px 0}
  .stage-nav{padding-top:28px;gap:18px;flex-wrap:wrap}
  .stage-count{font-size:13px}
  .stage-nav-links{gap:10px;font-size:12.5px}
  .stage-body{grid-template-columns:1fr}
  .stage3-grid{grid-template-columns:1fr 1fr}
  .stage-map,
  .stage2-steps > *,
  .stage3-grid > *,
  .stage4-chain > * {
    opacity:1;transform:none;transition:none;
  }
}
@media (max-width:600px){
  .stage3-grid{grid-template-columns:1fr}
  .stage2-steps,.stage4-chain{flex-direction:column}
  .s2-arrow,.s4-line{display:none}
  .stage-panel{padding:48px 0}
}

/* Мобильная px-шкала для sticky-сцены (макет рисовался на 1400px) */
@media (max-width:1024px){
  .stage-mast,.stage-mast-dark{font-size:clamp(20px,5vw,30px);margin-bottom:20px}
  .stage-text h3,.stage-sub-only,.stage3-lead,.stage4-lead{font-size:clamp(18px,4.6vw,24px);margin-bottom:20px}
  .stage-text p{font-size:14.5px;max-width:none}
  .stage-map img{max-width:100%}
  .stage2-steps{flex-wrap:wrap;gap:20px}
  .s2-step{width:calc(50% - 10px)}
  .s2-step img{width:56px;height:56px;margin-bottom:12px}
  .s2-step p{font-size:14px}
  .s3-card{height:auto;aspect-ratio:260/237}
  .s3-num{font-size:14px;top:8px;padding-left:10px}
  .s3-overlay b,.s3-overlay span{font-size:13px}
  .stage3-grid{gap:14px}
  .stage4-chain{flex-wrap:wrap;gap:20px}
  .s4-step{width:calc(50% - 10px);margin-top:0 !important}
  .s4-step img{width:52px;height:52px;margin-bottom:12px}
  .s4-step p{font-size:14px}
  .stage-nav{font-size:13px}
  .stage-count{font-size:13px}
  .stage-nav-links{font-size:12.5px}
}

/* Мобильная навигация этапов: показываем только счётчик и активный пункт —
   цепочка из четырёх пунктов на 375px переносится и читается плохо */
@media (max-width:600px){
  .stage-nav{gap:10px;align-items:baseline}
  .stage-nav-links{gap:0}
  .stage-nav-links .arrow,
  .stage-nav-links .snl:not(.is-active){display:none}
  .stage-nav-links .snl.is-active{font-size:14px}
}