/* ============ СЛАВЯНКОР — бруталистский лендинг ============ */
:root {
  --bg: #0E0E0E;
  --red: #FF2D20;
  --lime: #C8FF00;
  --beige: #EFEAE3;
  --card: #111318;
  --grey: #A0A0A0;
  --white: #FFFFFF;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Stalinist One", "Arial Black", sans-serif;
  --urbanist: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }


/* отладочный режим измерений */
.flat-hero .hero { background: #000; }
.flat-hero .hero__l1, .flat-hero .hero__l2, .flat-hero .hero__l3 { display: none; }

/* ============ ХЕДЕР ============ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  background: transparent;
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.25s, background 0.25s, border-color 0.25s;
}
.header--solid {
  opacity: 1;
  background: rgba(14, 7, 7, 0.88);
  backdrop-filter: blur(8px);
  border-bottom-color: #2a1616;
}
.logo {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.logo span { color: var(--red); }
.nav { display: flex; gap: 32px; }
.nav a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: color 0.15s;
}
.nav a:hover { color: var(--red); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.burger span {
  width: 26px;
  height: 3px;
  background: var(--white);
  transition: transform 0.2s, opacity 0.2s;
}
.burger--open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger--open span:nth-child(2) { opacity: 0; }
.burger--open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============ HERO: координаты из 1.svg (canvas 1924×1080) ============ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 540px;
  overflow: hidden;
  background: #470707;
  isolation: isolate;
}
.hero__l1, .hero__l2, .hero__l3 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero__l1 { z-index: 0; }
.hero__l2 { z-index: 1; opacity: 0.5; mix-blend-mode: screen; }
.hero__l3 { z-index: 2; opacity: 0.2; mix-blend-mode: multiply; }
@supports (mix-blend-mode: plus-darker) {
  .hero__l3 { mix-blend-mode: plus-darker; }
}

/* заголовок: зелёный слой поверх красного эхо (по bbox из SVG) */
.hero__title { position: absolute; inset: 0; z-index: 3; }
.hero__title span {
  position: absolute;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
}
/* красное эхо: по центру, поднято относительно основного слоя */
.hero__title-red {
  left: 50%;
  top: calc(45% - 34.6px);
  transform: translateX(calc(-50% - 12px));
  font-size: 5.4vw;
  color: #BB1202;
}
/* основной слой: по центру, подогнан под bbox макета (w≈1530) */
.hero__title-green {
  left: 50%;
  top: calc(45% - 15px);
  transform: translateX(-50%);
  font-size: 7.17vw;
  color: #D3FFD7;
}

/* РїРѕРґРїРёСЃСЊ: x=606.7 y=659 w=640 h=65 */
.hero__sub {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 61%;
  transform: translateX(-50%);
  font-family: var(--urbanist);
  font-size: 2.6vw;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #E5FFE7;
}

/* квадратная кнопка со стрелкой: 157×157 @ (850.5, 828.5) */
.hero__btn {
  position: absolute;
  z-index: 3;
  left: 44.2%;
  top: 76.7%;
  width: 157px;
  height: 157px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #404040;
  font-family: var(--urbanist);
  transition: background 0.2s, transform 0.2s;
}
.hero__btn-label {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
}
.hero__btn:hover { background: #BB1202; transform: scale(1.04); }

/* ============ БЕГУЩАЯ СТРОКА ============ */
.marquee {
  overflow: hidden;
  background: var(--red);
  border-block: 3px solid var(--white);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: scroll 22s linear infinite;
}
.marquee__track span {
  padding: 12px 0;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--white);
}
@keyframes scroll { to { transform: translateX(-50%); } }

/* ============ ЭКРАН 2 (координаты из 2.svg, canvas 1924×454) ============ */
.s2 {
  position: relative;
  overflow: hidden;
  background: #111111;
  aspect-ratio: 1924 / 454;
  isolation: isolate;
}
.s2__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* затемнение 80% поверх фото */
.s2__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.8);
}
/* квадратная текстура слева: x=-1019 y=8, 1590×1590, hard-light 20% */
.s2__tex {
  position: absolute;
  z-index: 2;
  left: -53%;
  top: 1.76%;
  width: 82.6%;
  opacity: 0.2;
  mix-blend-mode: hard-light;
  pointer-events: none;
}
/* текст: абзац Urbanist 30px, блок x=819 y=51 w=866 h=203 (по 2.svg) */
.s2__text {
  position: absolute;
  z-index: 3;
  left: 42.6%;
  top: 11.2%;
  width: 45%;
}
.s2__text p {
  font-family: var(--urbanist);
  font-size: clamp(13px, 1.56vw, 30px);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -0.015em;
  color: #FFFCFC;
}
.s2__red {
  color: #FF4040;
  font-weight: 700;
}

/* отладка измерений */
.flat-hero .s2__bg, .flat-hero .s2__tex { display: none; }

/* ============ ЭКРАН 3 (координаты из 3.svg, canvas 1924×1080) ============ */
.s3 {
  position: relative;
  height: 100vh;
  min-height: 540px;
  overflow: hidden;
  background: #ffffff;
}
.s3__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* текст: зелёный абзац x=159 y=60 w=881 h=173, белые выделения */
.s3__text {
  position: absolute;
  z-index: 3;
  left: 8.26%;
  top: 5.56%;
  width: 45.8%;
}
.s3__text p {
  font-family: var(--urbanist);
  font-size: clamp(13px, 1.56vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  color: #75FE69;
}
.s3__w { color: #F8FEF7; }

/* ============ ЭКРАН 4: ТАЙМЛАЙН (координаты из 4.svg, canvas 1924×2856) ============ */
.s4 {
  position: relative;
  overflow: hidden;
  background: #101310;
  aspect-ratio: 1924 / 2856;
}
/* верхняя белая зона 0..420 */
.s4__top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 14.7%;
  background: #ffffff;
  overflow: hidden;
  z-index: 1;
}
.s4__corner { position: absolute; width: 82.6%; top: -24.9%; }
.s4__corner--l { left: -65.5%; }
.s4__corner--r { left: 17.2%; }
/* верхнее изображение (386,268,1014×399) — кроп из высокой картинки */
.s4__hero {
  position: absolute;
  left: 20.05%;
  top: 64.3%;
  width: 52.7%;
  height: 95.7%;
  object-fit: cover;
  object-position: top;
  z-index: 2;
}
/* тикер: середина между макетной позицией и поднятой (по просьбе заказчика) */
.s4__ticker {
  position: absolute;
  left: 0;
  top: 57.2%;
  width: 100%;
  overflow: hidden;
  z-index: 3;
}
.s4__ticker-track {
  display: flex;
  width: max-content;
  animation: s4ticker 30s linear infinite;
}
.s4__ticker-track span {
  font-family: var(--display);
  font-size: 3.9vw;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  color: #A1404A;
}
@keyframes s4ticker { to { transform: translateX(-50%); } }

/* панорама-таймлайн (-53,424,1730×650): две точные копии, лента едет при скролле */
.s4__pano-wrap {
  position: absolute;
  left: -2.8%;
  top: 14.85%;
  width: 89.9%;
  height: 22.76%;
  overflow: hidden;
  z-index: 2;
}
.s4__pano-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.s4__pano-track img {
  height: 100%;
  width: auto;
  display: block;
}

/* хребет таймлайна: линия x=872, y=420..2837, #484848, 6px */
.s4__spine {
  position: absolute;
  left: 45.32%;
  top: 14.7%;
  width: 0.31%;
  height: 84.7%;
  background: #484848;
  z-index: 2;
}
/* узлы: filled r=20 #D9D9D9 */
.s4__node {
  position: absolute;
  width: 2.08%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #D9D9D9;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.s4__node--big { width: 6.6%; }
/* коннекторы: тонкие линии #D9D9D9, 1px */
.s4__link {
  position: absolute;
  height: 1px;
  background: #D9D9D9;
  z-index: 3;
}
/* кольца на концах коннекторов: r=11.5, stroke */
.s4__ring {
  position: absolute;
  width: 1.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #D9D9D9;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* фото-слой тёмной зоны */
.s4__img { position: absolute; z-index: 1; }

/* заливка чёрным 70% с Multiply: начинается под первым текстовым блоком */
.s4__mul {
  position: absolute;
  left: 0;
  right: 0;
  top: 28.3%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
}
.s4__img--l1 { left: 0.1%;  top: 37.96%; width: 45.06%; }
.s4__img--l2 { left: 0.1%;  top: 41.56%; width: 45.37%; opacity: 0.2; mix-blend-mode: luminosity; }
.s4__img--l3 { left: 0.16%; top: 67.83%; width: 45.01%; }
.s4__img--r1 { left: 45.48%; top: 28.57%; width: 54.31%; }
.s4__img--r2a { left: 45.22%; top: 72.66%; width: 54.63%; }
.s4__img--r2b { left: 45.17%; top: 72.7%;  width: 54.63%; }
/* вертикально движущееся изображение (1223,1341,697×989) — выше градиентов, как в SVG */
.s4__tall {
  position: absolute;
  left: 63.56%;
  top: 46.95%;
  width: 36.22%;
  z-index: 4;
  will-change: transform;
}

/* текстовые блоки */
.s4__block { position: absolute; z-index: 3; }
.s4__block--1 { left: 8.62%;  top: 17.88%; width: 29.2%; }
.s4__block--2 { left: 50.47%; top: 29.71%; width: 28.2%; }
.s4__block--3 { left: 9.13%;  top: 65.96%; width: 21.7%; }
.s4__block--4 { left: 8.37%;  top: 41.93%; width: 28.4%; }
.s4__block--5 { left: 50.52%; top: 77.73%; width: 39.9%; }
.s4__block--6 { left: 50.68%; top: 53.84%; width: 22.6%; }

.s4__sub {
  font-family: var(--urbanist);
  font-size: 1.77vw;
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
}
/* красно-зелёный дубль-подзаголовок блока 2 (#E51A06 + эхо #75FE69) */
.s4__sub--duo { color: #E51A06; text-shadow: 0.12vw 0.18vw 0 #75FE69; }
.s4__text {
  margin-top: 1.2vw;
  font-family: var(--urbanist);
  font-size: clamp(13px, 1.56vw, 30px);
  font-weight: 400;
  line-height: 1.3;
  color: #FFFCFC;
}

/* ============ ЭКРАН 5: МЕМЫ (координаты из Мемы.svg, canvas 1924×2082) ============ */
.s5 {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  aspect-ratio: 1924 / 2082;
}
/* заголовок: зелёный слой + розовое эхо (смещено вправо-вверх) */
.s5__title { position: absolute; inset: 0; z-index: 2; }
.s5__title span {
  position: absolute;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.s5__title-green {
  left: 13.2%;
  top: 3.7%;
  font-size: 13.5vw;
  color: #75FE69;
}
.s5__title-pink {
  left: 22.3%;
  top: 1.85%;
  font-size: 11.3vw;
  color: #FFDFDF;
  z-index: -1;
}
/* сетка мемов: 25 ячеек, ряды по высоте 281/2082 */
.s5__grid img {
  position: absolute;
  height: 13.5%;
  object-fit: fill;
  display: block;
}

/* ============ ЭКРАН 6: В МИРУ (координаты из «в миру.svg», canvas 1924×3725) ============ */
.s6 {
  position: relative;
  aspect-ratio: 1924 / 3725;
  background: #101310;
  overflow: hidden;
}
/* фоновая группа: opacity .1 + hard-light, как <g opacity="0.1" style="mix-blend-mode:hard-light"> в SVG */
.s6__bgfx {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  mix-blend-mode: hard-light;
  pointer-events: none;
}
.s6__bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 75.17%; /* фото-фон тянется на rect 1922×2802 */
  object-fit: fill;
}
.s6__tex {
  position: absolute;
  left: 0.1%;
  width: 99.79%;
  object-fit: fill;
}
.s6__tex--1 { top: 8.45%; }
.s6__tex--2 { top: 61.23%; }
.s6__head {
  position: absolute;
  top: 2.52%;
  left: 35.75%;
  font-family: var(--display);
  font-size: 3.9vw;
  line-height: 1.1;
  font-weight: 400;
  color: #A1404A;
  letter-spacing: 0.02em;
}
.s6__text {
  position: absolute;
  width: 45.5%;
  font-family: var(--urbanist);
  font-size: clamp(13px, 1.56vw, 30px);
  line-height: 1.13;
  letter-spacing: -0.015em;
  color: #FFFCFC;
}
.s6__text--1 { top: 6.31%;  left: 26.8%; }
.s6__text--2 { top: 22.99%; left: 25.6%; }
.s6__text--3 { top: 38.71%; left: 25.5%; }
.s6__text--4 { top: 56.94%; left: 25.4%; }
.s6__text--5 { top: 75.2%;  left: 25.3%; }
.s6__text--6 { top: 96.11%; left: 25.3%; }
.s6__ph {
  position: absolute;
  object-fit: fill;
  display: block;
}
.s6__ph--1 { left: 25.05%; top: 10.44%; width: 49.95%; height: 11.84%; }
.s6__ph--2 { left: 25.05%; top: 27.06%; width: 49.95%; height: 10.95%; }
.s6__ph--3 { left: 25.26%; top: 41.82%; width: 49.58%; height: 14.39%; }
.s6__ph--4 { left: 25.26%; top: 60.03%; width: 49.58%; height: 14.47%; }
.s6__ph--5 { left: 25.26%; top: 78.58%; width: 49.58%; height: 16.29%; }

/* ============ ЭКРАН 7: ВЫВОД (координаты из «ВЫвод.svg», canvas 1924×454) ============ */
.s7 {
  position: relative;
  aspect-ratio: 1924 / 454;
  background: #111111;
  overflow: hidden;
}
/* фоновая группа: opacity .2 + hard-light, как <g opacity="0.2" style="mix-blend-mode:hard-light"> */
.s7__bgfx {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: hard-light;
  pointer-events: none;
}
.s7__bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 617.2%; /* rect 1922×2802, видна верхняя часть */
  object-fit: fill;
}
/* квадрат текстуры x=-1019 y=8 1590×1590: видна правая часть до x=571 (29.7%) */
.s7__tex {
  position: absolute;
  left: -52.96%;
  top: 1.76%;
  width: 82.64%;
  aspect-ratio: 1;
  object-fit: fill;
}
.s7__text {
  position: absolute;
  left: 42.46%;
  top: 19.82%;
  width: 44.91%;
  font-family: var(--urbanist);
  font-size: clamp(13px, 1.56vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: #FFFCFC;
}

/* ============ ЭКРАН 8: АВТОРЫ (координаты из «авторы.svg», canvas 1924×463) ============ */
.s8 {
  position: relative;
  aspect-ratio: 1924 / 463;
  background: #101310;
  overflow: hidden;
}
.s8__note {
  position: absolute;
  left: 8.63%;
  top: 15.98%;
  width: 27.03%;
  font-family: var(--urbanist);
  font-size: clamp(13px, 1.56vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: #FFFCFC;
}
.s8__name,
.s8__link {
  position: absolute;
  font-family: var(--urbanist);
  font-size: clamp(13px, 1.56vw, 30px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #FFFCFC;
  white-space: nowrap;
}
.s8__link { text-decoration: none; }
.s8__row--1 .s8__name { left: 51.08%; top: 18.19%; }
.s8__row--1 .s8__link { left: 76.39%; top: 18.05%; }
.s8__row--2 .s8__name { left: 50.94%; top: 39.37%; }
.s8__row--2 .s8__link { left: 76.54%; top: 39.41%; }
.s8__row {
  position: absolute;
  inset: 0;
}

/* ============ ЭКРАН 9: СПАСИБО (координаты из «спасибо.png», канва 1920×484) ============ */
.s9 {
  position: relative;
  aspect-ratio: 1924 / 484;
  background: #101310;
  overflow: hidden;
}
.s9__title {
  position: absolute;
  top: 13.4%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 3.13vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #75FE69;
  white-space: nowrap;
}
.s9__art {
  position: absolute;
  left: 40.05%;
  top: 38.0%;
  width: 15.34%;
  display: block;
}

/* =====================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ===================================================== */
@media (max-width: 860px) {
  .header { padding: 14px 20px; }

  /* экран 9 на мобильном: всё по центру в поток */
  .s9 { aspect-ratio: auto; padding: 60px 20px 70px; }
  .s9__title {
    position: relative;
    left: auto; top: auto;
    transform: none;
    text-align: center;
    font-size: 8.4vw;
    white-space: normal;
    margin-bottom: 28px;
  }
  .s9__art {
    position: relative;
    left: auto; top: auto;
    display: block;
    width: 56%;
    max-width: 300px;
    margin: 6px auto 0;
  }

  /* экран 8 на мобильном: всё в поток, ссылки с переносом */
  .s8 { aspect-ratio: auto; padding: 40px 20px 46px; }
  .s8__note {
    position: relative;
    left: auto; top: auto; width: auto;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 30px;
  }
  .s8__row { position: relative; inset: auto; }
  .s8__row--2 { margin-top: 22px; }
  .s8__row .s8__name,
  .s8__row .s8__link {
    position: static;
    display: block;
    font-size: 15px;
    line-height: 1.4;
    white-space: normal;
  }
  .s8__row .s8__link { margin-top: 4px; text-decoration: underline; }

  /* экран 7 на мобильном: как s2 — текст в поток, слева */
  .s7 { aspect-ratio: auto; padding: 44px 0; }
  .s7__bgfx { opacity: 0.22; mix-blend-mode: normal; }
  .s7__bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .s7__tex { display: none; }
  .s7__text {
    position: relative;
    z-index: 3;
    left: auto;
    top: auto;
    width: auto;
    padding: 0 20px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
  }

  /* экран 6 на мобильном: фоновое фото затемняется, контент в поток */
  .s6 { aspect-ratio: auto; padding: 44px 20px 50px; background: #101310; }
  .s6__bgfx {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    mix-blend-mode: normal;
  }
  .s6__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .s6__tex { display: none; }
  .s6__head {
    position: relative;
    left: auto;
    top: auto;
    text-align: center;
    font-size: 13vw;
    margin: 0 0 26px;
  }
  .s6__text,
  .s6__ph {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
  }
  .s6__ph {
    margin: 14px 0 18px;
    border: 1px solid #2a2e2a;
  }
  .s6__text {
    font-size: 17px;
    line-height: 1.3;
  }

  .burger { display: flex; }
  .nav {
    position: fixed;
    inset: 58px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid #222;
    transform: translateY(-130%);
    transition: transform 0.25s ease;
  }
  .nav--open { transform: translateY(0); }
  .nav a { padding: 16px 20px; border-top: 1px solid #1d1d1d; }

  /* hero на мобильном: всё по центру */
  .hero { height: 100svh; }
  /* экран 5 на мобильном: заголовок по центру, 2×2 мема на экран */
  .s5 { aspect-ratio: auto; padding: 26px 0 40px; }
  .s5__title { position: relative; height: auto; text-align: center; }
  .s5__title span.s5__title-green { position: static; display: block; width: 100%; font-size: 17vw; color: #75FE69; }
  .s5__title span.s5__title-pink {
    position: absolute;
    left: 50%;
    top: 8px;
    font-size: 14vw;
    transform: translateX(calc(-50% + 12px));
  }
  .s5__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 14px;
    margin-top: 18px;
  }
  .s5__grid img {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }

  /* экран 4 на мобильном: всё в поток */
  .s4 { aspect-ratio: auto; }
  .s4__top { position: relative; height: auto; padding-top: 12px; }
  .s4__corner { display: none; }
  .s4__hero { position: static; display: block; width: 90%; margin: 0 auto; }
  .s4__ticker { position: static; }
  .s4__ticker-track span { font-size: 24px; padding: 6px 0; }
  .s4__pano-wrap { position: static; width: 100%; height: 220px; }
  .s4__mul { display: none; }
  .s4__img { filter: brightness(0.3); } /* мобильный эквивалент multiply 70% */
  .s4__spine, .s4__node, .s4__link, .s4__ring { display: none; }
  .s4__img, .s4__tall {
    position: static;
    display: block;
    width: 100%;
    margin: 14px 0;
    transform: none !important;
  }
  .s4__block { position: static; width: auto; padding: 18px 20px; text-align: left; }
  .s4__sub { font-size: 16px; }
  .s4__sub--duo { text-shadow: 1px 1px 0 #75FE69; }
  .s4__text { font-size: 13px; margin-top: 8px; }

  /* экран 3 на мобильном: абзац в потоке поверх фото */
  .s3 { height: auto; min-height: 70vh; padding: 44px 0; }
  .s3__text { position: relative; left: auto; top: auto; width: auto; padding: 0 20px; text-align: left; }
  .s3__text p { font-size: 13px; }

  /* пары «фото + текст поверх» на мобильном */
  .s4__pair { position: relative; }
  .s4__pair .s4__img, .s4__pair .s4__tall {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 14px 0;
    transform: none !important;
  }
  .s4__pair .s4__block {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 22px;
    width: auto;
    padding: 0;
    text-align: left;
  }
  .s4__pair .s4__text { text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.6); }
  .s4__pair .s4__sub { text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
  /* текстурные дубли в потоке не нужны */
  .s4__img--l2, .s4__img--r2b { display: none; }

  /* экран 2 на мобильном: абзац в потоке, поверх слоёв */
  .s2 { aspect-ratio: auto; padding: 44px 0; }
  .s2__text {
    position: relative;
    z-index: 3;
    left: auto;
    top: auto;
    width: auto;
    padding: 0 20px;
    text-align: left;
  }
  .s2__text p { font-size: 13px; }

  .hero__title-red,
  .hero__title-green {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .hero__sub {
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    letter-spacing: 0.02em;
    text-align: center;
  }
  .hero__btn {
    left: 50%;
    transform: translateX(-50%);
    width: 132px;
    height: 132px;
    gap: 8px;
  }
  .hero__btn-label { font-size: 18px; }
  .hero__btn svg { width: 64px; height: 13px; }
}