@font-face {
  font-family: "SF Pro Variable";
  src: url("fonts/SF-Pro.subset.768629d2.woff2") format("woff2");
  font-weight: 100 1000; /* Supports full weight range */
  font-stretch: 50% 200%; /* Supports stretch if it's variable */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0400-052F, U+2DE0-2DFF, U+A640-A69F, U+2000-206F, U+20AC, U+2116, U+2122, U+00A0, U+00AB-00BB;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Medium.subset.df05f33d.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0100-024F, U+0400-052F, U+2DE0-2DFF, U+A640-A69F, U+2000-206F, U+20AC, U+2116, U+2122, U+00A0, U+00AB-00BB;
}

@font-face {
  font-family: "SF Pro Compressed";
  src: url("fonts/SF-Pro-Compressed-Black.subset.500bbd13.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0400-052F, U+2DE0-2DFF, U+A640-A69F, U+2000-206F, U+20AC, U+2116, U+2122, U+00A0, U+00AB-00BB;
}

.headline {
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000; /* Max weight */
  font-stretch: 47%; /* Match second screen title */
  font-variation-settings: "wdth" 47, "wght" 1000; /* Match second screen title */
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
}

.highlight {
  background: #000;
  padding: 0 0.1em;
  line-height: 1;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.headline .highlight {
  padding: 0;
  line-height: 1;
  background: linear-gradient(to bottom, transparent 15%, #000 15%, #000 85%, transparent 85%);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  /* Фикс для части мобильных браузеров: не раздувать текст в абсолютной верстке карточек */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

.frame {
  --scale: min(100vw / 1920px, 100vh / 1080px);
  --font-scale-x: 0.95;
  --font-scale-y: 1.05;
  --screen-left: calc(237px * var(--scale));
  
  /* === SPACING SYSTEM v1.0 === 
   * Base: 8px
   * Desktop sections gap: 96px
   * Mobile sections gap: 32px
   * Все отступы кратны 8px для визуальной консистентности
   */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 1);    /* 8px */
  --spacing-sm: calc(var(--spacing-unit) * 2);    /* 16px */
  --spacing-md: calc(var(--spacing-unit) * 3);    /* 24px */
  --spacing-lg: calc(var(--spacing-unit) * 4);    /* 32px */
  --spacing-xl: calc(var(--spacing-unit) * 5);    /* 40px */
  --spacing-2xl: calc(var(--spacing-unit) * 6);   /* 48px */
  --spacing-3xl: calc(var(--spacing-unit) * 8);   /* 64px */
  --spacing-4xl: calc(var(--spacing-unit) * 10);  /* 80px */
  --spacing-5xl: calc(var(--spacing-unit) * 12);  /* 96px */
  --spacing-6xl: calc(var(--spacing-unit) * 14);  /* 112px */
  
  /* Section spacing - Desktop */
  --section-gap: calc(var(--spacing-5xl) * var(--scale));     /* 96px */
  --section-pad: calc(var(--spacing-3xl) * var(--scale));     /* 64px */
  --section-end-gap: var(--section-gap);
  
  position: relative;
  width: calc(1920px * var(--scale));
  height: calc(1080px * var(--scale));
  overflow: hidden;
  background: #000;
  margin: 0 auto;
}

/* Hero: чуть ниже по высоте, чтобы экран выглядел компактнее */
main.frame[aria-label="Hero"] {
  /* Было: 1080px. Подкрути значение, если нужно больше/меньше. */
  height: calc(1000px * var(--scale));
}

section.frame {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  padding-left: var(--screen-left);
  padding-right: var(--screen-left);
}

/* Screen-3: чуть компактнее по вертикали (верх/низ) */
section.frame.screen-3 {
  --section-pad: calc(var(--spacing-lg) * var(--scale)); /* 32px вместо 64px (desktop): сжато сильнее */
  /*
   * ВАЖНО: элементы screen-3 почти все absolute + top в пикселях.
   * Поэтому padding/margin секции визуально почти не влияет на "воздух" внутри.
   * Реальная "высота/плотность" задаётся значениями top у элементов ниже.
   *
   * KISS-компрессия: оставляем верхнюю точку (якорь) как есть,
   * а все остальные top сжимаем относительно неё коэффициентом.
   */
  --screen-3-anchor-top: 50px;
  --screen-3-k: 0.8; /* 1 = без сжатия, меньше = компактнее */
  --screen-3-content-bottom: 730px; /* нижняя "опорная" точка контента (desktop) */
  --screen-3-content-extra: 220px;  /* запас снизу под текст/дыхание */

  /* Пользовательское требование: экран по высоте не фиксированный */
  height: auto;
  padding-bottom: calc(
    (
        var(--screen-3-anchor-top) +
        ((var(--screen-3-content-bottom) - var(--screen-3-anchor-top)) * var(--screen-3-k)) +
        var(--screen-3-content-extra)
      ) * var(--scale)
  );
}

section.frame + section.frame {
  margin-top: var(--section-gap);
}

/* Screen-3: уменьшаем зазор между экранами сверху/снизу */
section.frame + section.frame.screen-3 {
  margin-top: calc(var(--section-gap) / 2);
}

section.frame.screen-3 + section.frame {
  margin-top: calc(var(--section-gap) / 2);
}

section.frame:last-of-type {
  margin-bottom: var(--section-end-gap);
}

.bg-image {
  position: absolute;
  left: calc(237px * var(--scale));
  top: calc(103px * var(--scale));
  width: calc(1442px * var(--scale));
  height: calc(878px * var(--scale));
  overflow: hidden;
  pointer-events: none;
}

.bg-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
}

.text-content {
  position: absolute;
  left: 50%;
  top: calc(157px * var(--scale));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Ensure it doesn't collapse horizontally */
  pointer-events: none; /* Let clicks pass through if needed, though text usually selectable */
}

.headline {
  /* Position handling moved to .text-content */
  position: relative;
  width: 100%;
  max-width: calc(1260px * var(--scale));
  margin: 0;
  top: calc(-30px * var(--scale));
  transform: none;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  pointer-events: auto;
}

.subhead {
  /* Position handling moved to .text-content */
  position: relative;
  width: calc(568px * var(--scale));
  margin: 0;
  margin-top: calc(20px * var(--scale)); /* Adjusted gap based on previous positioning */
  top: calc(-30px * var(--scale));
  
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  text-align: center;
  pointer-events: auto;
}

.hero-subtitle {
  --subtitle-top: calc(520px * var(--scale));
  --subtitle-width: calc(1280px * var(--scale));
  --subtitle-height: calc(230px * var(--scale));
  --subtitle-font-size: calc(120px * var(--scale));
  --subtitle-letter-spacing: calc(-4.2px * var(--scale));
  --subtitle-line-gap: calc(110px * var(--scale));
  --subtitle-line2-offset: calc(520px * var(--scale));
  --num-size: calc(32px * var(--scale));
  --num-letter-spacing: calc(-1.2px * var(--scale));
  --num1-left: calc(0px * var(--scale));
  --num2-left: calc(var(--subtitle-width) - (140px * var(--scale)));
  --num3-left: calc(var(--subtitle-line2-offset) - (80px * var(--scale)));
  --num1-top: calc(-22px * var(--scale));
  --num2-top: calc(-22px * var(--scale));
  --num3-top: calc(var(--subtitle-line-gap) - (42px * var(--scale)));
  position: absolute;
  left: 50%;
  top: var(--subtitle-top);
  transform: translateX(-50%);
  width: var(--subtitle-width);
  height: var(--subtitle-height);
  pointer-events: none;
}

.hero-subtitle__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.tag-number {
  position: absolute;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  text-align: left;
  transform: none;
}

.tag-text {
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 50%;
  font-variation-settings: "wdth" 50, "wght" 1000;
  font-style: normal;
  text-transform: uppercase;
  text-align: left;
  transform-origin: left top;
  position: absolute;
  font-size: calc(80.443px * var(--scale) * 0.6666667);
  letter-spacing: calc(-4.0221px * var(--scale) * 0.6666667);
}

.tag-number-1 {
  left: calc(532px * var(--scale));
  top: calc(515px * var(--scale));
}

.tag-text-1 {
  left: calc(532px * var(--scale));
  top: calc(546px * var(--scale));
  transform: scale(var(--font-scale-x), var(--font-scale-y));
  width: calc(341px * var(--scale));
}

.tag-number-2 {
  left: calc(1115px * var(--scale));
  top: calc(595px * var(--scale));
}

.tag-text-2 {
  left: calc(1115px * var(--scale));
  top: calc(625px * var(--scale));
  font-size: calc(132.187px * var(--scale) * 0.6666667);
  letter-spacing: calc(-6.6094px * var(--scale) * 0.6666667);
  transform: scale(var(--font-scale-x), var(--font-scale-y));
  width: calc(303px * var(--scale));
}

.tag-number-3 {
  left: calc(825px * var(--scale));
  top: calc(832px * var(--scale));
}

.tag-text-3 {
  left: calc(825px * var(--scale));
  top: calc(867px * var(--scale));
  transform: scale(var(--font-scale-x), var(--font-scale-y));
  width: calc(260px * var(--scale));
}

.bread {
  position: absolute;
  left: calc(567px * var(--scale));
  top: calc(486px * var(--scale));
  width: calc(786px * var(--scale));
  height: calc(525px * var(--scale));
  pointer-events: none;
}

.bread img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}

.screen-2 {
  height: auto;
}

/* Одинаковые отступы сверху и снизу */
.screen-2__title {
  margin-top: 0;
}

.screen-2__cards {
  margin-bottom: 0;
}

.screen-2::after {
  content: "";
  position: absolute;
  top: calc(170px * var(--scale));
  right: 0;
  width: calc(602px * var(--scale));
  height: calc(522px * var(--scale));
  background: linear-gradient(-90deg, #000 39.867%, rgba(0, 0, 0, 0) 76.21%);
  pointer-events: none;
  z-index: 2;
}

.screen-2__title {
  margin: 0;
  margin-bottom: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: left;
}

.screen-2__hint {
  margin-top: calc(var(--spacing-md) * var(--scale));
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-sm) * var(--scale));
  opacity: 0.5;
}

.screen-2__bars {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-xs) / 2 * var(--scale));
  height: calc(32px * var(--scale));
}

.screen-2__bar {
  display: block;
  height: calc(32px * var(--scale));
  background: #fff;
}

.screen-2__bar--1 {
  width: calc(3.1373px * var(--scale));
}

.screen-2__bar--2 {
  width: calc(10.0392px * var(--scale));
}

.screen-2__bar--3 {
  width: calc(17.5686px * var(--scale));
}

.screen-2__hint-text {
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

.screen-2__cards {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--spacing-4xl) * var(--scale));
  display: flex;
  gap: calc(var(--spacing-sm) * var(--scale));
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-right: calc(var(--spacing-4xl) * var(--scale));
}

.screen-2__cards::-webkit-scrollbar {
  display: none;
}

.screen-2__cards {
  scrollbar-width: none; /* Firefox */
}

.screen-2__card {
  position: relative;
  flex: 0 0 auto;
  width: calc(310px * var(--scale));
  height: calc(420px * var(--scale));
  border: calc(0.2px * var(--scale)) solid #fff;
  border-radius: calc(38px * var(--scale));
  overflow: hidden;
  scroll-snap-align: start;
}

.screen-2__card-text,
.screen-3__text,
.screen-3__num {
  position: absolute;
  margin: 0;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
  text-align: left;
}

.screen-2__card-text {
  left: calc(18px * var(--scale));
}

.screen-2__card-text--1 {
  top: calc(253.8px * var(--scale));
  width: calc(267px * var(--scale));
}

.screen-2__card-text--2 {
  top: calc(287.8px * var(--scale));
  width: calc(218px * var(--scale));
}

.screen-2__card-text--3 {
  top: calc(287.8px * var(--scale));
  width: calc(236px * var(--scale));
}

.screen-2__card-text--4 {
  top: calc(287.8px * var(--scale));
  width: calc(286px * var(--scale));
}

.screen-2__card-text--5 {
  top: calc(321.4px * var(--scale));
  width: calc(286px * var(--scale));
}

.screen-2__card-text--6 {
  top: calc(287.4px * var(--scale));
  width: calc(259px * var(--scale));
}

.screen-2__card-text--7 {
  top: calc(287.4px * var(--scale));
  width: calc(259px * var(--scale));
}

.screen-2__image {
  position: absolute;
  pointer-events: none;
}

.screen-2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screen-2__image--1 {
  left: calc(61.8px * var(--scale));
  top: calc(-40.2px * var(--scale));
  width: calc(330px * var(--scale));
  height: calc(330px * var(--scale));
}

.screen-2__image--2 {
  left: calc(73.8px * var(--scale));
  top: calc(-16.2px * var(--scale));
  width: calc(320px * var(--scale));
  height: calc(320px * var(--scale));
}

.screen-2__image--3 {
  left: calc(60.8px * var(--scale));
  top: calc(-32.2px * var(--scale));
  width: calc(346px * var(--scale));
  height: calc(346px * var(--scale));
}

.screen-2__image--4 {
  left: calc(22.8px * var(--scale));
  top: calc(-41.2px * var(--scale));
  width: calc(342px * var(--scale));
  height: calc(342px * var(--scale));
}

.screen-2__image--5 {
  left: calc(17.4px * var(--scale));
  top: calc(-57.6px * var(--scale));
  width: calc(386px * var(--scale));
  height: calc(386px * var(--scale));
}

.screen-2__image--6 {
  left: calc(46.4px * var(--scale));
  top: calc(-19.6px * var(--scale));
  width: calc(358px * var(--scale));
  height: calc(358px * var(--scale));
}

.screen-2__image--7 {
  left: calc(-0.6px * var(--scale));
  top: calc(-61.6px * var(--scale));
  width: calc(410px * var(--scale));
  height: calc(410px * var(--scale));
}

.screen-3__title {
  position: absolute;
  left: var(--screen-left);
  top: calc(
    (var(--screen-3-anchor-top) + ((50px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
  transform: none;
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.screen-3__title-highlight,
.screen-8__title-highlight {
  padding: 0;
  line-height: 1;
  background: linear-gradient(
    to bottom,
    transparent 15%,
    #ff5900 15%,
    #ff5900 85%,
    transparent 85%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-3__title-break {
  display: none;
}

.screen-3__dots {
  position: absolute;
  left: var(--screen-left);
  top: calc(
    (var(--screen-3-anchor-top) + ((297px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
  display: flex;
  align-items: center;
}

.screen-3__dot {
  display: block;
  width: calc(26.5424px * var(--scale));
  height: calc(26.5424px * var(--scale));
}

.screen-3__dot + .screen-3__dot {
  margin-left: calc(-8.112px * var(--scale));
}

.screen-3__line {
  position: absolute;
  left: calc(-373px * var(--scale));
  width: calc(3005px * var(--scale));
  height: calc(0.5px * var(--scale));
  background: #fff;
}

.screen-3__line--1 {
  top: calc(
    (var(--screen-3-anchor-top) + ((400px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__line--2 {
  top: calc(
    (var(--screen-3-anchor-top) + ((637px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__text--1 {
  left: var(--screen-left);
  top: calc(
    (var(--screen-3-anchor-top) + ((335px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__text--2 {
  left: calc(50% - (372px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((577px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__text--3 {
  left: calc(50% + (53px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((830px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__num {
  opacity: 0.5;
}

.screen-3__num--1 {
  left: calc(50% + (646px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((335px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__num--2 {
  left: calc(50% + (643px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((577px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__num--3 {
  left: calc(50% + (646px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((830px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__icon {
  position: absolute;
  color: #ff5900;
  width: calc(28px * var(--scale));
  height: calc(28px * var(--scale));
}

.screen-3__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.screen-3__icon--eye {
  left: calc(50% - (372px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((533px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__icon--refresh {
  left: calc(50% + (53px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((786px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-4 {
  height: auto;
}

.screen-4__title,
.screen-5__title {
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: left;
}

.screen-4__title {
  margin: 0;
}

.screen-4__title-mark {
  display: none;
}

.screen-4__grid {
  margin-top: calc(var(--spacing-4xl) * var(--scale));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing-6xl) * var(--scale));
  align-items: start;
}

.screen-4__item {
  position: relative;
  width: 100%;
  max-width: calc(561px * var(--scale));
}

.screen-4__num {
  display: inline-block;
  margin-bottom: calc(18px * var(--scale));
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(30.046px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.9014px * var(--scale));
  opacity: 0.5;
  color: #fff;
}

.screen-4__photo {
  width: 100%;
  height: auto;
  border: none;
  border-radius: calc(18px * var(--scale));
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  margin-bottom: calc(26px * var(--scale));
}

.screen-4__photo--2 {
  width: 100%;
}

.screen-4__photo--1 {
  aspect-ratio: 400 / 152;
}

.screen-4__photo--2 {
  aspect-ratio: 703 / 318;
}

.screen-4__photo--3 {
  aspect-ratio: 462 / 511;
}

.screen-4__photo--4 {
  aspect-ratio: 625 / 438;
}

.screen-4__photo--5 {
  aspect-ratio: 673 / 420;
}

.screen-4__photo--6 {
  aspect-ratio: 1009 / 390;
}

.screen-4__photo--7 {
  aspect-ratio: 324 / 352;
  width: 66.67%;
}

.screen-4__item-title {
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(65.059px * var(--scale));
  line-height: 1;
  letter-spacing: calc(-3.253px * var(--scale));
  text-transform: uppercase;
  color: #fff;
}

.screen-4__item-highlight {
  padding: 0;
  line-height: 1;
  background: linear-gradient(
    to bottom,
    transparent 15%,
    #ff5900 15%,
    #ff5900 85%,
    transparent 85%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-4__list {
  list-style: none;
  margin: calc(var(--spacing-md) * var(--scale)) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--spacing-sm) * var(--scale));
}

.screen-4__list li {
  position: relative;
  padding-left: calc(26px * var(--scale));
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

.screen-4__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.45em + (2px * var(--scale)));
  width: calc(10px * var(--scale));
  height: calc(10px * var(--scale));
  border-radius: 50%;
  background: #ff5900;
}

.screen-5 {
  height: auto;
}

.screen-5__title-break {
  display: block;
}

.screen-5__note {
  margin: calc(24px * var(--scale)) 0 0;
  width: calc(769px * var(--scale));
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  text-align: left;
  white-space: nowrap;
  color: #000;
}

.screen-5__note span {
  display: inline;
  background: #ff5900;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-5__rows {
  position: relative;
  margin-top: calc(var(--spacing-3xl) * var(--scale));
  margin-left: 0;
  margin-right: 0;
  background-image: linear-gradient(-90deg, #000 39.867%, rgba(0, 0, 0, 0) 76.21%);
  background-repeat: no-repeat;
  background-size: calc(602px * var(--scale)) calc(522px * var(--scale));
  background-position: right top;
}

.screen-5__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(var(--spacing-xl) * var(--scale));
  padding: calc(var(--spacing-lg) * var(--scale)) 0;
  border-bottom: calc(0.5px * var(--scale)) solid #fff;
}

.screen-5__row--last {
  border-bottom: none;
}

.screen-5__row--more {
  display: none;
  border-bottom: none;
  padding-top: calc(16px * var(--scale));
  padding-bottom: 0;
}

.screen-5__topic,
.screen-5__desc,
.screen-5__more {
  margin: 0;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

.screen-5__topic {
  opacity: 0.5;
  text-align: left;
  justify-self: start;
}

.screen-5__desc {
  text-align: right;
  justify-self: end;
  white-space: nowrap;
}

.screen-5__more {
  opacity: 0.7;
  font-size: calc(27.031px * var(--scale));
  letter-spacing: calc(-0.8109px * var(--scale));
}

.screen-6 {
  height: auto;
  --screen-6-table-min: calc(1312px * var(--scale));
  --screen-6-col-1-fr: 0.2561fr;
  --screen-6-col-2-fr: 0.4438fr;
  --screen-6-col-3-fr: 0.3001fr;
  --screen-6-row-head: calc(82px * var(--scale));
  --screen-6-row-1: calc(146px * var(--scale));
  --screen-6-row-2: calc(155px * var(--scale));
  --screen-6-row-3: calc(137px * var(--scale));
  --screen-6-col2-pad: calc(61px * var(--scale));
  --screen-6-col3-pad: calc(41px * var(--scale));
  --screen-6-table-gap: calc(var(--spacing-4xl) * var(--scale));
}

.screen-6__title {
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: left;
  color: #fff;
}

.screen-6__hint {
  display: none;
}

.screen-6__scroll {
  margin-top: var(--screen-6-table-gap);
  margin-left: 0;
  margin-right: 0;
}

.screen-6__table {
  width: max(100%, var(--screen-6-table-min));
  display: grid;
  grid-auto-flow: row;
  row-gap: 0;
}

.screen-6__row {
  display: grid;
  grid-template-columns: var(--screen-6-col-1-fr) var(--screen-6-col-2-fr) var(--screen-6-col-3-fr);
  border-bottom: calc(0.5px * var(--scale)) solid #fff;
}

.screen-6__row--head {
  height: var(--screen-6-row-head);
}

.screen-6__row--1 {
  height: var(--screen-6-row-1);
}

.screen-6__row--2 {
  height: var(--screen-6-row-2);
}

.screen-6__row--3 {
  height: var(--screen-6-row-3);
  border-bottom: none;
}

.screen-6__cell {
  display: flex;
  align-items: center;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
  text-align: left;
  padding-right: calc(24px * var(--scale));
}

.screen-6__row--1 .screen-6__cell,
.screen-6__row--2 .screen-6__cell,
.screen-6__row--3 .screen-6__cell {
  font-size: calc(27.855px * var(--scale));
}

.screen-6__cell--col-1,
.screen-6__cell--col-2 {
  border-right: calc(0.5px * var(--scale)) solid #fff;
}

.screen-6__cell--col-1 {
  padding-left: 0;
}

.screen-6__cell--col-2 {
  padding-left: var(--screen-6-col2-pad);
}

.screen-6__cell--col-3 {
  padding-left: var(--screen-6-col3-pad);
  padding-right: 0;
}

.screen-6__cell--head {
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(35.655px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-1.7827px * var(--scale));
  text-transform: uppercase;
}

.screen-6__cell--accent {
  color: #ff5900;
}

.screen-6__badge {
  display: inline;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  text-align: left;
  white-space: nowrap;
  background: #ff5900;
  color: #000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-6__text-wrap {
  display: inline-block;
  white-space: normal;
}

.screen-6__text-wrap--wide {
  max-width: calc(245px * var(--scale));
}

.screen-6__text-wrap--narrow {
  max-width: calc(223px * var(--scale));
}

/* Screen-7: уменьшаем высоту секции снизу (срезаем нижний "хвост") */
section.frame.screen-7 {
  --screen-7-height: 960px; /* было 1080px как у всех frame */
  height: calc(var(--screen-7-height) * var(--scale));
}

.screen-7__title {
  position: absolute;
  left: 50%;
  top: calc(45px * var(--scale));
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: center;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff 0%, #000 158.91%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.screen-7__glow {
  position: absolute;
  left: calc(542px * var(--scale));
  top: calc(505px * var(--scale));
  width: calc(786px * var(--scale));
  height: calc(786px * var(--scale));
  pointer-events: none;
}

.screen-7__glow img {
  width: 100%;
  height: 100%;
  display: block;
}

.screen-7__phone {
  position: absolute;
  left: calc(705.984px * var(--scale));
  top: calc(149.58px * var(--scale));
  width: calc(508.608px * var(--scale));
  height: calc((1100.304px) * var(--scale));
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 0 calc(36px * var(--scale)) rgba(255, 89, 0, 0.45));
}

.screen-7__phone {
  object-fit: contain;
}

.screen-7__note {
  position: absolute;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
  white-space: pre-line;
}

.screen-7__note-text {
  display: inline;
  background: #000;
  padding: calc(2px * var(--scale)) calc(8px * var(--scale));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-7__note--left-top {
  left: calc(50% - (394px * var(--scale)));
  top: calc((291px + 40px) * var(--scale));
  white-space: nowrap;
}

.screen-7__note--left-mid {
  left: calc(50% - (351px * var(--scale)));
  top: calc((541px + 40px) * var(--scale));
  white-space: nowrap;
}

.screen-7__note--right-top {
  left: calc(50% + (363px * var(--scale)));
  top: calc((393px + 40px) * var(--scale));
  transform: translateX(-100%);
  text-align: right;
  white-space: nowrap;
}

.screen-7__note--right-bottom {
  left: calc(50% + (399px * var(--scale)));
  top: calc((645px + 40px) * var(--scale));
  width: calc(284px * var(--scale));
  transform: translateX(-100%);
  text-align: right;
  white-space: normal;
}

.screen-8 {
  height: auto;
}

.screen-8__content {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "price benefits"
    "note note";
  column-gap: calc(var(--spacing-4xl) * var(--scale));
  row-gap: calc(var(--spacing-lg) * var(--scale));
  z-index: 2;
}

.screen-8__price-block {
  grid-area: price;
  display: grid;
  row-gap: calc(var(--spacing-sm) * var(--scale));
  justify-items: start;
}

.screen-8__price {
  width: calc(281px * var(--scale));
  height: calc(80.764px * var(--scale));
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(33.155px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.9946px * var(--scale));
  color: #000;
  background: #ff5900;
  border: none;
  border-radius: calc(17.204px * var(--scale));
  cursor: pointer;
}

.screen-8__caption {
  width: calc(247px * var(--scale));
  margin: 0;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

.screen-8__title {
  grid-area: title;
  width: 100%;
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 1;
  letter-spacing: calc(-3.3895px * var(--scale));
  text-transform: uppercase;
  color: #fff;
}

.screen-8__title-break {
  display: block;
}

.screen-8__title-mobile-break {
  display: none;
}

.screen-8__benefits {
  grid-area: benefits;
  display: grid;
  --benefit-gap: calc(var(--spacing-sm) * var(--scale));
  row-gap: var(--benefit-gap);
  padding-bottom: calc(var(--benefit-gap) / 2);
}

.screen-8__benefit {
  margin: 0;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
  white-space: nowrap;
  position: relative;
}

.screen-8__benefit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(0.5px * var(--scale));
  background: rgba(255, 255, 255, 0.5);
  bottom: calc(var(--benefit-gap) / -2);
}

.screen-8__note {
  grid-area: note;
  margin: 0;
  width: calc(340px * var(--scale));
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
  opacity: 0.5;
}

@media (max-width: 480px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .frame {
    --mobile-w: 440px;
    --mobile-h: 956px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --scale-raw: (100vw - var(--safe-left) - var(--safe-right)) / var(--mobile-w);
    --scale: var(--scale-raw);
    --tag-scale: 0.6666667;
    --screen-left: calc(27px * var(--scale));
    --screen-5-mobile-text-size: calc(19.439px * var(--scale));
    --screen-5-mobile-letter: calc(-0.5832px * var(--scale));
    
    /* Section spacing - Mobile */
    --section-gap: calc(var(--spacing-xl) * var(--scale));    /* 32px */
    --section-pad: calc(var(--spacing-md) * var(--scale));    /* 24px */
    --section-end-gap: var(--section-gap);
    
    width: calc(var(--mobile-w) * var(--scale) + var(--safe-left) + var(--safe-right));
    height: calc(var(--mobile-h) * var(--scale) + var(--safe-top) + var(--safe-bottom));
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    margin: 0;
  }

  section.frame {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
    padding-left: var(--screen-left);
    padding-right: var(--screen-left);
  }

  /* Screen-3: чуть компактнее по вертикали (верх/низ) */
  section.frame.screen-3 {
    --section-pad: calc(var(--spacing-xs) * var(--scale)); /* 8px вместо 24px (mobile): сжато сильнее */
    --screen-3-anchor-top: 49px;
    --screen-3-k: 0.8;
    --screen-3-content-bottom: 592px; /* нижняя "опорная" точка контента (mobile) */
    --screen-3-content-extra: 180px;

    height: auto;
    padding-bottom: calc(
      (
          var(--screen-3-anchor-top) +
          ((var(--screen-3-content-bottom) - var(--screen-3-anchor-top)) * var(--screen-3-k)) +
          var(--screen-3-content-extra)
        ) * var(--scale)
    );
  }

  section.frame + section.frame {
    margin-top: var(--section-gap);
  }

  /* Screen-3: уменьшаем зазор между экранами сверху/снизу */
  section.frame + section.frame.screen-3 {
    margin-top: calc(var(--section-gap) / 2);
  }

  section.frame.screen-3 + section.frame {
    margin-top: calc(var(--section-gap) / 2);
  }

  section.frame:last-of-type {
    margin-bottom: var(--section-end-gap);
  }

  .frame[aria-label="Hero"] {
    --hero-shift: calc(-60px * var(--scale));
  }

  /* Hero (mobile): обрезаем высоту сильнее */
  main.frame[aria-label="Hero"] {
    height: calc(820px * var(--scale));
  }

  .bg-image {
    left: 0;
    top: calc(-24px * var(--scale));
    width: calc(440px * var(--scale));
    height: calc(1171.9365px * var(--scale));
  }

  .bg-image img {
    left: -52.21%;
    top: -7.63%;
    width: 543.1%;
    height: 114.69%;
    max-width: none;
    transform: none;
  }

  .text-content {
    left: 50%;
    top: calc(151px * var(--scale) + var(--hero-shift, 0px));
    transform: translateX(-50%);
    width: calc(400px * var(--scale));
  }

  .headline {
    width: 100%;
    max-width: calc(400px * var(--scale));
    margin: 0;
    transform: none;
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
  }

  .headline .highlight {
    line-height: 1.2;
  }

  .subhead {
    width: calc(302px * var(--scale));
    margin-top: calc(40px * var(--scale));
    font-size: calc(20.303px * var(--scale));
    letter-spacing: calc(-0.6091px * var(--scale));
    line-height: 1.22;
  }

  .hero-subtitle {
    --subtitle-top: calc(520px * var(--scale) + var(--hero-shift, 0px));
    --subtitle-width: calc(400px * var(--scale));
    --subtitle-height: calc(160px * var(--scale));
    --subtitle-font-size: calc(56px * var(--scale));
    --subtitle-letter-spacing: calc(-2.2px * var(--scale));
    --subtitle-line-gap: calc(64px * var(--scale));
    --subtitle-line2-offset: calc(220px * var(--scale));
    --num-size: calc(18px * var(--scale));
    --num-letter-spacing: calc(-0.8px * var(--scale));
    --num1-left: calc(0px * var(--scale));
    --num2-left: calc(var(--subtitle-width) - (60px * var(--scale)));
    --num3-left: calc(var(--subtitle-line2-offset) - (40px * var(--scale)));
    --num1-top: calc(-12px * var(--scale));
    --num2-top: calc(-12px * var(--scale));
    --num3-top: calc(var(--subtitle-line-gap) - (26px * var(--scale)));
  }

  .bread {
    left: calc(-98.2474px * var(--scale));
    top: calc(581px * var(--scale) + var(--hero-shift, 0px));
    width: calc(657.2457px * var(--scale));
    height: calc(439px * var(--scale));
  }

  .bread img {
    left: -0.06%;
    top: 0;
    width: 100%;
    height: 149.71%;
    transform: none;
  }

  .tag-number {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(calc(var(--tag-scale) * 1.5));
    transform-origin: left top;
  }

  .tag-text {
    background: none;
    display: block;
    text-align: left;
    transform: scale(calc(var(--tag-scale) * 1.1));
    transform-origin: left top;
    font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
    font-weight: 1000;
    text-transform: uppercase;
  }

  .tag-text {
    font-variation-settings: "wdth" 47, "wght" 1000;
    font-stretch: 47%;
  }

  .tag-number .highlight {
    background: none;
    padding: 0;
  }

  .tag-number-1 {
    left: calc(57px * var(--scale));
    top: calc(505px * var(--scale) + var(--hero-shift, 0px));
    width: calc(21.2258px * var(--scale));
    height: calc(31.4964px * var(--scale));
    font-size: calc(19.073px * var(--scale));
    letter-spacing: calc(-0.5722px * var(--scale));
  }

  .tag-text-1 {
    left: calc(57px * var(--scale));
    top: calc(522.9643px * var(--scale) + var(--hero-shift, 0px));
    width: calc(235.5384px * var(--scale));
    height: calc(55.4611px * var(--scale));
    font-size: calc(55.08px * var(--scale));
    letter-spacing: calc(-2.754px * var(--scale));
    line-height: 0.829;
    transform: scale(var(--tag-scale));
  }

  .tag-number-2 {
    left: calc(172px * var(--scale));
    top: calc(594px * var(--scale) + var(--hero-shift, 0px));
    width: calc(25.1031px * var(--scale));
    height: calc(37.2497px * var(--scale));
    font-size: calc(22.557px * var(--scale));
    letter-spacing: calc(-0.6767px * var(--scale));
  }

  .tag-text-2 {
    left: calc(172px * var(--scale));
    top: calc(617.1526px * var(--scale) + var(--hero-shift, 0px));
    width: calc(245.3621px * var(--scale));
    height: calc(97.9829px * var(--scale));
    font-size: calc(89.202px * var(--scale));
    letter-spacing: calc(-4.4601px * var(--scale));
    line-height: 0.829;
    transform: scale(var(--tag-scale));
  }

  .tag-number-3 {
    left: calc(65px * var(--scale));
    top: calc(747.0004px * var(--scale) + var(--hero-shift, 0px));
    width: calc(25.5803px * var(--scale));
    height: calc(37.9578px * var(--scale));
    font-size: calc(22.986px * var(--scale));
    letter-spacing: calc(-0.6896px * var(--scale));
  }

  .tag-text-3 {
    left: calc(65px * var(--scale));
    top: calc(772.3579px * var(--scale) + var(--hero-shift, 0px));
    width: calc(226.9219px * var(--scale));
    height: calc(66.8388px * var(--scale));
    font-size: calc(66.379px * var(--scale));
    letter-spacing: calc(-3.319px * var(--scale));
    line-height: 0.829;
    transform: scale(var(--tag-scale));
  }

  .screen-2 {
    height: auto;
  }

  .screen-2::after {
    content: none;
  }

  /* Одинаковые отступы сверху и снизу - Mobile */
  .screen-2__title {
    margin-top: 60px;
    margin-bottom: 0;
  }

  .screen-2__cards {
    margin-bottom: 0;
  }

  .screen-2__title {
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
  }

  .screen-2__hint {
    margin-top: calc(var(--spacing-sm) * var(--scale));
    gap: calc(var(--spacing-sm) * var(--scale));
  }

  .screen-2__bars {
    gap: calc(3px * var(--scale));
    height: calc(22.9234px * var(--scale));
  }

  .screen-2__bar {
    height: calc(22.9234px * var(--scale));
  }

  .screen-2__bar--1 {
    width: calc(2.2474px * var(--scale));
  }

  .screen-2__bar--2 {
    width: calc(7.1917px * var(--scale));
  }

  .screen-2__bar--3 {
    width: calc(12.5854px * var(--scale));
  }

  .screen-2__hint-text {
    font-size: calc(19.954px * var(--scale));
    letter-spacing: calc(-0.5986px * var(--scale));
  }

  .screen-2__cards {
    margin-top: calc(var(--spacing-xl) * var(--scale));
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-right: calc(var(--spacing-xl) * var(--scale));
  }

  .screen-2__cards::-webkit-scrollbar {
    display: none;
  }

  .screen-2__card {
    width: calc(216.3364px * var(--scale));
    /* +14px запаса по высоте, чтобы нижние строки не обрезались на некоторых телефонах */
    height: calc(307.1009px * var(--scale));
    border: calc(0.14px * var(--scale)) solid #fff;
    border-radius: calc(26.519px * var(--scale));
    scroll-snap-align: start;
  }

  .screen-2__card-text,
  .screen-3__text {
    font-size: calc(19.439px * var(--scale));
    letter-spacing: calc(-0.5832px * var(--scale));
  }

  .screen-2__card-text {
    left: calc(12.5625px * var(--scale));
  }

  .screen-2__card-text--1 {
    top: calc(177.12px * var(--scale));
    width: calc(186.3284px * var(--scale));
  }

  .screen-2__card-text--2 {
    top: calc(200.84px * var(--scale));
    width: calc(152.1333px * var(--scale));
  }

  .screen-2__card-text--3 {
    top: calc(200.84px * var(--scale));
    width: calc(164.6948px * var(--scale));
  }

  .screen-2__card-text--4 {
    top: calc(200.84px * var(--scale));
    width: calc(199.5878px * var(--scale));
  }

  .screen-2__card-text--5 {
    top: calc(224.4px * var(--scale));
    width: calc(199.5878px * var(--scale));
  }

  .screen-2__card-text--6 {
    top: calc(200.6px * var(--scale));
    width: calc(180.8px * var(--scale));
  }

  .screen-2__card-text--7 {
    top: calc(200.6px * var(--scale));
    width: calc(180.8px * var(--scale));
  }

  .screen-2__image--1 {
    left: calc(43.13px * var(--scale));
    top: calc(-28.05px * var(--scale));
    width: calc(230.2936px * var(--scale));
    height: calc(230.2936px * var(--scale));
  }

  .screen-2__image--2 {
    left: calc(51.5px * var(--scale));
    top: calc(-11.31px * var(--scale));
    width: calc(223.315px * var(--scale));
    height: calc(223.315px * var(--scale));
  }

  .screen-2__image--3 {
    left: calc(42.43px * var(--scale));
    top: calc(-22.47px * var(--scale));
    width: calc(241.4593px * var(--scale));
    height: calc(241.4593px * var(--scale));
  }

  .screen-2__image--4 {
    left: calc(15.91px * var(--scale));
    top: calc(-28.75px * var(--scale));
    width: calc(238.6679px * var(--scale));
    height: calc(238.6679px * var(--scale));
  }

  .screen-2__image--5 {
    left: calc(12.14px * var(--scale));
    top: calc(-40.2px * var(--scale));
    width: calc(269.4px * var(--scale));
    height: calc(269.4px * var(--scale));
  }

  .screen-2__image--6 {
    left: calc(32.4px * var(--scale));
    top: calc(-13.7px * var(--scale));
    width: calc(249.9px * var(--scale));
    height: calc(249.9px * var(--scale));
  }

  .screen-2__image--7 {
    left: calc(-0.4px * var(--scale));
    top: calc(-43px * var(--scale));
    width: calc(286.2px * var(--scale));
    height: calc(286.2px * var(--scale));
  }

  .screen-3__title {
    left: var(--screen-left);
    top: calc(
      (var(--screen-3-anchor-top) + ((49px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
    white-space: normal;
  }

  .screen-3__title-highlight,
  .screen-8__title-highlight {
    padding: 0;
    line-height: 1;
  }

  .screen-3__title-break {
    display: block;
  }

  .screen-3__dots {
    left: var(--screen-left);
    top: calc(
      (var(--screen-3-anchor-top) + ((297px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-3__dot + .screen-3__dot {
    margin-left: calc(-9px * var(--scale));
  }

  .screen-3__line {
    left: calc(23px * var(--scale));
    width: calc(3005px * var(--scale));
  }

  .screen-3__line--1 {
    top: calc(
      (var(--screen-3-anchor-top) + ((435px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-3__line--2 {
    top: calc(
      (var(--screen-3-anchor-top) + ((602px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-3__text--1 {
    left: var(--screen-left);
    top: calc(
      (var(--screen-3-anchor-top) + ((335px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
    width: calc(288px * var(--scale));
  }

  .screen-3__text--2 {
    left: calc(23px * var(--scale));
    top: calc(
      (var(--screen-3-anchor-top) + ((507px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
    width: calc(329px * var(--scale));
  }

  .screen-3__text--3 {
    left: calc(23px * var(--scale));
    top: calc(
      (var(--screen-3-anchor-top) + ((692px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
    width: calc(329px * var(--scale));
  }

  .screen-3__num--1 {
    display: none;
  }

  .screen-3__num--2 {
    display: none;
  }

  .screen-3__num--3 {
    display: none;
  }

  .screen-3__icon--eye {
    left: calc(23px * var(--scale));
    top: calc(
      (var(--screen-3-anchor-top) + ((463px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-3__icon--refresh {
    left: calc(23px * var(--scale));
    top: calc(
      (var(--screen-3-anchor-top) + ((648px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-4 {
    height: auto;
  }

  .screen-4__title {
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
    white-space: normal;
  }

  .screen-5__title {
    font-size: calc(73.173px * var(--scale));
    letter-spacing: calc(-3.6586px * var(--scale));
  }

  .screen-4__title-mark {
    display: inline;
  }

  .screen-4__grid {
    margin-top: calc(var(--spacing-xl) * var(--scale));
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-3xl) * var(--scale));
  }

  .screen-4__item {
    max-width: none;
  }

  .screen-4__num {
    font-size: calc(27.031px * var(--scale));
    letter-spacing: calc(-0.8109px * var(--scale));
  }

  .screen-4__photo {
    width: 100%;
    height: auto;
    border-radius: calc(16px * var(--scale));
  }

  .screen-4__photo--7 {
    width: 66.67%;
  }

  .screen-4__item-title {
    font-size: calc(42.0893px * var(--scale));
    letter-spacing: calc(-3.1567px * var(--scale));
  }

  .screen-4__item-highlight {
    padding: 0;
    line-height: 1;
  }

  .screen-4__list {
    margin-top: calc(var(--spacing-md) * var(--scale));
    gap: calc(var(--spacing-sm) * var(--scale));
  }

  .screen-4__list li {
    font-size: calc(19.439px * var(--scale));
    letter-spacing: calc(-0.5832px * var(--scale));
  }

  .screen-5 {
    height: auto;
  }

  .screen-5__title {
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
  }

  .screen-5__note {
    margin-top: calc(var(--spacing-md) * var(--scale));
    width: calc(345px * var(--scale));
    white-space: normal;
  }

  .screen-5__note,
  .screen-5__topic,
  .screen-5__desc,
  .screen-5__more {
    font-size: var(--screen-5-mobile-text-size);
    letter-spacing: var(--screen-5-mobile-letter);
  }

  .screen-6__row--1 .screen-6__cell,
  .screen-6__row--2 .screen-6__cell,
  .screen-6__row--3 .screen-6__cell {
    font-size: var(--screen-5-mobile-text-size);
  }

  .screen-6__badge {
    font-size: var(--screen-5-mobile-text-size);
    letter-spacing: var(--screen-5-mobile-letter);
  }

  .screen-5__rows {
    margin-top: calc(var(--spacing-lg) * var(--scale));
    margin-left: 0;
    margin-right: 0;
    background: none;
  }

  .screen-5__row {
    grid-template-columns: 1fr;
    row-gap: calc(var(--spacing-sm) * var(--scale));
    padding: calc(var(--spacing-md) * var(--scale)) 0;
  }

  .screen-5__desc {
    text-align: left;
    justify-self: start;
    white-space: normal;
    width: calc(315px * var(--scale));
  }

  .screen-5__row--more {
    display: none;
  }

  .screen-6 {
    /* Мобилка: делаем секцию компактнее по вертикали */
    --screen-6-table-gap: calc(var(--spacing-lg) * var(--scale));
    --screen-6-row-head: calc(68px * var(--scale));
    --screen-6-row-1: calc(120px * var(--scale));
    --screen-6-row-2: calc(124px * var(--scale));
    --screen-6-row-3: calc(112px * var(--scale));
  }

  /* Мобилка: секция "Как это работает" по высоте auto */
  section.frame.screen-6 {
    height: auto;
    --section-pad: calc(var(--spacing-sm) * var(--scale));
  }

  .screen-6__title {
    font-size: calc(56.448px * var(--scale));
    letter-spacing: calc(-2.8224px * var(--scale));
    width: calc(364px * var(--scale));
    white-space: pre-wrap;
  }

  .screen-6__hint {
    margin-top: calc(var(--spacing-sm) * var(--scale));
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-xs) * var(--scale));
    opacity: 0.5;
  }

  .screen-6__bars {
    display: flex;
    align-items: center;
    gap: calc(3px * var(--scale));
    height: calc(22.923px * var(--scale));
  }

  .screen-6__bar {
    display: block;
    height: calc(22.923px * var(--scale));
    background: #fff;
  }

  .screen-6__bar--1 {
    width: calc(2.247px * var(--scale));
  }

  .screen-6__bar--2 {
    width: calc(7.192px * var(--scale));
  }

  .screen-6__bar--3 {
    width: calc(12.585px * var(--scale));
  }

  .screen-6__hint-text {
    font-family: "SF Pro Display", "Arial", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: calc(19.954px * var(--scale));
    line-height: 1.22;
    letter-spacing: calc(-0.5986px * var(--scale));
    color: #fff;
  }

  .screen-6__scroll {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
  }

  .screen-6__scroll::-webkit-scrollbar {
    display: none;
  }

  .screen-6__table {
    scroll-snap-align: start;
  }

  .screen-7__title {
    left: var(--screen-left);
    top: calc(48px * var(--scale));
    font-size: calc(50.8146px * var(--scale));
    letter-spacing: calc(-3.1761px * var(--scale));
    text-align: left;
    transform: none;
  }

  /* Screen-7: уменьшаем высоту секции снизу (мобилка) */
  section.frame.screen-7 {
    --screen-7-height: 760px;
    height: calc(var(--screen-7-height) * var(--scale));
  }

  .screen-7__glow {
    left: calc(20px * var(--scale));
    top: calc(450.01px * var(--scale));
    width: calc(381.062px * var(--scale));
    height: calc(381.062px * var(--scale));
  }

  .screen-7__phone {
    left: calc(63.8px * var(--scale));
    top: calc(30px * var(--scale));
    width: calc(316.36px * var(--scale));
    height: calc((902.16px + 30px) * var(--scale));
  }

  .screen-7__note {
    font-size: calc(19.054px * var(--scale));
    letter-spacing: calc(-0.5716px * var(--scale));
  }

  .screen-7__note--left-top {
    left: calc(50% - (189.14px * var(--scale)));
    top: calc((316.72px + 36px) * var(--scale));
    font-size: calc(19.924px * var(--scale));
    letter-spacing: calc(-0.5977px * var(--scale));
  }

  .screen-7__note--left-mid {
    left: calc(50% - (183.03px * var(--scale)));
    top: calc((485px + 36px) * var(--scale));
    font-size: calc(18.401px * var(--scale));
    letter-spacing: calc(-0.552px * var(--scale));
  }

  .screen-7__note--right-top {
    left: calc(50% + (177.73px * var(--scale)));
    top: calc((388.54px + 36px) * var(--scale));
  }

  .screen-7__note--right-bottom {
    left: calc(50% + (194.93px * var(--scale)));
    top: calc((573px + 36px) * var(--scale));
    width: calc(192.89px * var(--scale));
    font-size: calc(18.919px * var(--scale));
    letter-spacing: calc(-0.5676px * var(--scale));
  }

  .screen-8__content {
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "price"
      "title"
      "benefits"
      "note";
    row-gap: calc(var(--spacing-md) * var(--scale));
    column-gap: 0;
  }

  .screen-8__price-block {
    /* Мобилка: цена + подпись по центру */
    justify-items: center;
  }

  .screen-8__caption {
    width: calc(247px * var(--scale));
    font-size: calc(19.439px * var(--scale));
    text-align: center;
  }

  .screen-8__title {
    width: 100%;
    font-size: calc(50.8146px * var(--scale));
  }

  .screen-8__title-mobile-break {
    display: block;
  }

  /* На мобиле держим "ты ранний" на одной строке, но оставляем перенос перед "участник" */
  .screen-8__title-highlight .screen-8__title-mobile-break:first-of-type {
    display: none;
  }

  .screen-8__benefits {
    width: 100%;
    --benefit-gap: calc(var(--spacing-md) * var(--scale));
  }

  .screen-8__benefit {
    white-space: normal;
    font-size: calc(19.439px * var(--scale));
  }

  .screen-8__note {
    width: calc(340px * var(--scale));
    font-size: calc(19.439px * var(--scale));
  }

  /* Screen-8: убираем лишнюю фикс-высоту фрейма на мобиле */
  section.frame.screen-8 {
    height: auto;
  }
}