@charset "UTF-8";

/* Страницы сервисов (/online-services/<сервис>/).
   Подключается отдельным файлом — на главной этот CSS не грузится.
   Единицы как в style.scss: rem = px макета / 16 (макет 1440, контейнер 1360). */

/*--------- КНОПКА -----------*/

.sv_btn {
  gap: 1.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  border-radius: 1.375rem;
  background: var(--green-700);
  color: var(--white-700);
  font-size: 1rem;
  font-weight: 700;
  line-height: 130%;
  box-shadow: 0.0278rem 0.0278rem 0.0393rem 0 rgba(0, 0, 0, 0.26), 0.0757rem 0.0757rem 0.107rem 0 rgba(0, 0, 0, 0.25), 0.1661rem 0.1661rem 0.2349rem 0 rgba(0, 0, 0, 0.23), 0.3688rem 0.3688rem 0.5216rem 0 rgba(0, 0, 0, 0.19), 0.625rem 0.625rem 1.3258rem 0 rgba(0, 0, 0, 0.23), -0.03125rem -0.03125rem 0 0 rgba(0, 141, 21, 0.5), inset 0.0625rem 0.0625rem 0.0625rem 0 rgba(255, 255, 255, 0.83), inset -0.0625rem -0.0625rem 0.0625rem 0 rgba(0, 0, 0, 0.23);
}

.sv_btn:hover {
  background: var(--green-600);
}

/* светлая кнопка на коричневых карточках */

.sv_btn--light {
  background: var(--bg-page);
  color: var(--dark-700);
  --btn-arrow: rgba(29, 35, 43, 0.9);
}

.sv_btn--light:hover {
  background: var(--white-700);
}

/*--------- ХЛЕБНЫЕ КРОШКИ -----------*/

.svb {
  margin-bottom: 1.25rem;
}

.svb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.svb li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 130%;
  color: rgba(29, 35, 43, 0.6);
}

/* разделитель — такой же, как в «Вход / Регистрация» в шапке */

.svb li + li::before {
  content: "/";
  opacity: 0.4;
}

.svb a {
  color: rgba(29, 35, 43, 0.6);
  transition: color 0.3s;
}

.svb a:hover {
  color: var(--dark-700);
}

/* последняя крошка — текущая страница */

.svb li:last-child span {
  overflow: hidden;
  color: var(--dark-700);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Герой страницы сервиса свёрстан по макету: крошки поднимаем над заголовком
   отрицательным отступом, чтобы h1 и иллюстрация остались на своих местах.
   Сумма отступов равна нулю — в поток блок ничего не добавляет. */

.sv1--crumbs .svb {
  margin-top: -2.375rem;
  margin-bottom: 1.25rem;
}

/*--------- SV1 — ГЕРОЙ -----------*/

.sv1 {
  position: relative;
  /* 30 + 42 фиксированной шапки и 100 до заголовка по макету */
  padding-top: 10.75rem;
}

.sv1_grid {
  display: flex;
  justify-content: space-between;
}

.sv1_txt {
  width: 41.875rem;
}

.sv1_txt h1 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--dark-700);
}

.sv1_check {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.sv1_check li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sv1_check img {
  display: block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.sv1_check span {
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--dark-700);
}

.sv1 .sv_btn {
  margin-top: 1.75rem;
}

/* холст иллюстрации: система координат из макета — 680×525, слои выходят за края */

.sv1_img_wrap {
  flex-shrink: 0;
}

.sv1_img {
  position: relative;
  width: 42.5rem;
  height: 32.8125rem;
}

.sv1_layer {
  position: absolute;
  /* transform слоя занят параллаксом за курсором (app.js), покачивание — на img */
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sv1_layer img {
  display: block;
  width: 100%;
  height: 100%;
}

.sv1_map {
  left: -1.875rem;
  top: -4.8125rem;
  width: 60.5rem;
  height: 34.9375rem;
  opacity: 0.08;
}

/* робот выгружен вместе со своей тенью — она в макете отдельными слоями под ним */

.sv1_robot {
  left: 8.25rem;
  top: 0.1875rem;
  width: 26.0625rem;
  height: 32.5313rem;
}

.sv1_tether {
  left: 6.625rem;
  top: -1.4375rem;
  width: 4rem;
  height: 4.25rem;
}

.sv1_apple {
  left: 34rem;
  top: 12.875rem;
  width: 10.6875rem;
  height: 10.6875rem;
}

.sv1_google {
  left: 1.625rem;
  top: 21.125rem;
  width: 9.9375rem;
  height: 9.9375rem;
}

/* покачивание мелких объектов: у каждого свой период и амплитуда,
   чтобы они не ходили строем */

.sv1_tether img,
.sv1_apple img,
.sv1_google img {
  will-change: transform;
  -webkit-animation: sv1-float var(--dur, 7s) ease-in-out infinite;
  animation: sv1-float var(--dur, 7s) ease-in-out infinite;
  -webkit-animation-delay: var(--delay, 0s);
  animation-delay: var(--delay, 0s);
}

.sv1_tether img {
  --dur: 5.4s;
  --delay: 0.9s;
  --float: -0.8rem;
}

.sv1_apple img {
  --dur: 6.2s;
  --delay: 0.4s;
  --float: -1.15rem;
}

.sv1_google img {
  --dur: 6.8s;
  --delay: 0.6s;
  --float: -1rem;
}

@-webkit-keyframes sv1-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, var(--float, -0.75rem), 0);
  }
}

@keyframes sv1-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, var(--float, -0.75rem), 0);
  }
}

/* Тени на «полу» под парящими значками. В макете это эллипсы 100×4
   с радиальным градиентом #485562, прозрачностью слоя 50% и размытием слоя 7 —
   отсюда мягкое пятно вдвое выше самой фигуры. Тень робота выгружена картинкой.
   Значок качается, тень остаётся на полу и дышит в такт. */

.sv1_img::before,
.sv1_img::after {
  content: "";
  position: absolute;
  width: 6.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #485562 0%, rgba(72, 85, 98, 0) 100%);
  opacity: 0.62;
  filter: blur(0.21875rem);
  -webkit-animation: sv1-shadow var(--dur, 7s) ease-in-out infinite;
  animation: sv1-shadow var(--dur, 7s) ease-in-out infinite;
  -webkit-animation-delay: var(--delay, 0s);
  animation-delay: var(--delay, 0s);
}

/* под значком Google */

.sv1_img::before {
  left: 3.3125rem;
  top: 31.8125rem;
  --dur: 6.8s;
  --delay: 0.6s;
}

/* под значком Apple */

.sv1_img::after {
  left: 36.3125rem;
  top: 30.4375rem;
  --dur: 6.2s;
  --delay: 0.4s;
}

@-webkit-keyframes sv1-shadow {
  0%, 100% {
    transform: scaleX(1);
    opacity: 0.62;
  }

  50% {
    transform: scaleX(0.86);
    opacity: 0.42;
  }
}

@keyframes sv1-shadow {
  0%, 100% {
    transform: scaleX(1);
    opacity: 0.62;
  }

  50% {
    transform: scaleX(0.86);
    opacity: 0.42;
  }
}

/*--------- SV2 — КАРТИНКА + ТЕКСТ (используется дважды) -----------*/

.sv2 {
  position: relative;
  z-index: 1;
  padding-top: 9.5rem;
}

.sv2_grid {
  display: flex;
  gap: 2.625rem;
}

.sv2_img {
  position: relative;
  flex-shrink: 0;
  width: 41.1875rem;
  height: 22.5625rem;
}

.sv2_img img {
  position: absolute;
  left: 0;
  top: 1.0625rem;
  width: 43.25rem;
  height: 23rem;
}

.sv2_txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  width: 41.1875rem;
}

.sv2_txt h2 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--dark-700);
}

.sv2_lead {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 36.125rem;
}

.sv2_lead p {
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--dark-700);
}

.sv2_accent {
  font-weight: 700;
}

/* вариант «Безопасность операций»: картинка ниже, текст по центру, есть кнопка */

.sv2--safety .sv2_img {
  height: 32.8125rem;
  overflow: hidden;
}

.sv2--safety .sv2_img img {
  left: 3.5625rem;
  top: 0;
  width: 34.0625rem;
  height: 32.8125rem;
}

.sv2--safety .sv2_txt {
  justify-content: center;
  height: 32.8125rem;
}

.sv2--safety .sv_btn {
  margin-top: 0.75rem;
}

/*--------- SV3 — КОРИЧНЕВАЯ КАРТОЧКА + ДВЕ БЕЛЫЕ -----------*/

.sv3 {
  position: relative;
  z-index: 1;
  padding-top: 9.5rem;
}

.sv3_card {
  position: relative;
  height: 42.5rem;
  border-radius: 3.125rem;
  overflow: hidden;
}

.sv3_card_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.sv3_body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: 3.25rem;
}

.sv3_txt {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 31.4375rem;
}

.sv3_txt h2 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--white-700);
}

.sv3_lead {
  width: 23.6875rem;
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--white-700);
}

.sv3_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 31.4375rem;
}

.sv3_chips li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.8125rem;
  padding: 0 0.875rem;
  border-radius: 0.7143rem;
  background: var(--white-700);
}

.sv3_chips img {
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.sv3_chips span {
  font-size: 1rem;
  line-height: 130%;
  color: var(--dark-700);
  white-space: nowrap;
}

.sv3_notes {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.sv3_note {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 41.75rem;
  min-height: 20.125rem;
  padding: 3.25rem;
  border-radius: 1.5rem;
  background: var(--white-700);
  box-shadow: 0.125rem 0.125rem 0.0822rem rgba(0, 0, 0, 0.06);
}

.sv3_note_head {
  display: flex;
  gap: 1.25rem;
}

.sv3_note_ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.125rem;
  background: var(--bg-page);
}

.sv3_note_ico img {
  display: block;
  width: 2rem;
  height: 2rem;
}

.sv3_note_intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sv3_note h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 130%;
  color: var(--dark-700);
}

.sv3_note p {
  font-size: 1rem;
  line-height: 130%;
  color: var(--dark-700);
}

/* Предметы на коричневых карточках лежат отдельными слоями поверх фона:
   так карту можно анимировать, а картинка карты на всей странице одна.
   Поворот держим на свойстве rotate, transform свободен под анимацию. */

/* сцена с предметами: система координат карточки 1360 × её высота */

.sv_scene {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 85rem;
  height: 100%;
}

.sv_obj {
  position: absolute;
}

.sv_obj img {
  display: block;
  width: 100%;
  height: 100%;
}

/* световой оверлей из макета — поверх предметов, но под текстом */

.sv_overlay {
  position: absolute;
  left: -6.5rem;
  top: -7.875rem;
  z-index: 0;
  width: 104.25rem;
  height: 69.5rem;
  pointer-events: none;
}

/* карта покачивается и слегка доворачивается */

.sv3_obj_card,
.sv7_obj_card,
.svl_cta_obj {
  -webkit-animation: sv-card-float 8.5s ease-in-out infinite;
  animation: sv-card-float 8.5s ease-in-out infinite;
}

@-webkit-keyframes sv-card-float {
  0%, 100% {
    translate: 0 0;
    rotate: -8deg;
  }

  50% {
    translate: 0 -1.125rem;
    rotate: -6.6deg;
  }
}

@keyframes sv-card-float {
  0%, 100% {
    translate: 0 0;
    rotate: -8deg;
  }

  50% {
    translate: 0 -1.125rem;
    rotate: -6.6deg;
  }
}

.sv3_obj_card {
  left: 38.66563rem;
  top: 21.71875rem;
  width: 24.04375rem;
  height: 15.625rem;
  rotate: -8deg;
}

.sv3_obj_phone {
  /* сдвиг на пару пикселей — у выгрузки телефона несимметричный запас под тень */
  left: 55.40625rem;
  top: 3.7875rem;
  width: 24.53125rem;
  height: 48.1875rem;
  rotate: 9deg;
}

.sv7_obj_receipt {
  left: 41.5rem;
  top: 4.5rem;
  width: 18.75rem;
  height: 49rem;
  rotate: 9.87deg;
}

.sv7_obj_card {
  left: 54.99688rem;
  top: 16.96875rem;
  width: 25.00625rem;
  height: 16.25rem;
  rotate: -8deg;
}

/*--------- SV4 — ШАГИ ОФОРМЛЕНИЯ -----------*/

.sv4 {
  position: relative;
  z-index: 1;
  padding-top: 9.5rem;
}

/* та же подложка-тень, что под отзывами на главной */

.sv4_bg {
  position: absolute;
  left: 50%;
  top: -14.875rem;
  width: 127.75rem;
  height: 68.125rem;
  margin-left: -8.6875rem;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
}

.sv4_bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.sv4_head {
  display: flex;
  justify-content: space-between;
}

.sv4_head h2 {
  width: 34.375rem;
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--dark-700);
}

.sv4_head_txt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 27.5rem;
  padding-top: 0.8125rem;
}

.sv4_head_txt p {
  font-size: 1rem;
  line-height: 130%;
  color: var(--dark-700);
}

.sv4_list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3.25rem;
}

.sv4_step {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 21.5rem;
  padding: 3.25rem;
  border-radius: 1.5rem;
  background: var(--white-700);
  box-shadow: 0.125rem 0.125rem 0.0822rem rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.sv4_step_lf,
.sv4_step_rg {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24.25rem;
  height: 15rem;
}

.sv4_step h3 {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 130%;
  color: var(--dark-700);
}

.sv4_step_num {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: rgba(29, 35, 43, 0.16);
}

/* экран телефона по макету уходит под нижний край карточки */

.sv4_step_phone {
  position: absolute;
  left: 34.09375rem;
  top: 3.0625rem;
  width: 16.8125rem;
  height: 18.4375rem;
}

.sv4_step_phone img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Шаг 04: экран тот же, что на шаге 03, но приглушён — как под шторкой уведомления.
   Размытие живёт строго в границах экрана, корпус телефона остаётся резким.
   Размеры в процентах от холста телефона — так блок сам ужимается на мобильной. */

.sv4_step_blur {
  position: absolute;
  left: 4.364%;
  top: 3.729%;
  width: 83.643%;
  height: 96.271%;
  border-radius: 2.06875rem;
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(0.09375rem);
  backdrop-filter: blur(0.09375rem);
}

.sv4_note {
  position: absolute;
  left: -3.903%;
  top: 37.627%;
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  width: 107.807%;
  padding: 0.875rem 1rem;
  border-radius: 1.2375rem;
  background: var(--bg-page);
  box-shadow: 0.157rem 0.157rem 0.222rem -0.1329rem rgba(0, 0, 0, 0.23), 0.3484rem 0.3484rem 0.4928rem -0.1772rem rgba(0, 0, 0, 0.19), 0.5906rem 0.5906rem 1.2526rem -0.2214rem rgba(0, 0, 0, 0.06);
}

.sv4_note_ico {
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
}

.sv4_note_ico img {
  display: block;
  width: 100%;
  height: 100%;
}

.sv4_note_txt {
  flex: 1 1 auto;
  min-width: 0;
}

.sv4_note_top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5625rem;
}

.sv4_note_top b {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 146%;
  color: #181818;
}

.sv4_note_top time {
  flex-shrink: 0;
  font-size: 0.6131rem;
  line-height: 142%;
  color: #181818;
  opacity: 0.6;
}

.sv4_note_descr {
  font-size: 0.75rem;
  line-height: 142%;
  color: #181818;
}

.sv4_step_txt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sv4_step_txt p {
  font-size: 1rem;
  line-height: 130%;
  color: var(--dark-700);
}

.sv4_step_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 1.125rem;
  border: 0.0703rem solid rgba(29, 35, 43, 0.16);
}

/* стрелка подсказывает, что шаги продолжаются — короткий толчок вниз */

.sv4_step_arrow img {
  display: block;
  width: 0.625rem;
  height: 0.875rem;
  -webkit-animation: sv4-arrow 2.6s ease-in-out infinite;
  animation: sv4-arrow 2.6s ease-in-out infinite;
}

.sv4_step:nth-child(2) .sv4_step_arrow img {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sv4_step:nth-child(3) .sv4_step_arrow img {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sv4_step:nth-child(4) .sv4_step_arrow img {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@-webkit-keyframes sv4-arrow {
  0%, 55%, 100% {
    transform: translate3d(0, 0, 0);
  }

  30% {
    transform: translate3d(0, 0.25rem, 0);
  }
}

@keyframes sv4-arrow {
  0%, 55%, 100% {
    transform: translate3d(0, 0, 0);
  }

  30% {
    transform: translate3d(0, 0.25rem, 0);
  }
}

/* Параллакс шагов: пока карточка въезжает снизу, экран телефона подтягивается
   вверх и встаёт на макетное место, а плашка уведомления идёт чуть быстрее —
   слои расходятся. Двигаем только вниз от макетной позиции: картинка обрезана
   по нижнему краю карточки, и подъём выше оставил бы там пустую полосу.
   Прокруточные таймлайны есть не везде — без них слои просто стоят на месте. */

@supports (animation-timeline: view()) {
  /* таймлайн вешаем на саму карточку: у телефона над ним карточка с overflow: hidden,
     а это скролл-контейнер — view() внутри него считал бы прогресс не по странице */

  .sv4_step {
    view-timeline-name: --sv4-step;
  }

  .sv4_step_phone {
    -webkit-animation: sv4-phone-parallax linear both;
    animation: sv4-phone-parallax linear both;
    animation-timeline: --sv4-step;
    animation-range: entry 0% cover 55%;
  }

  .sv4_note {
    -webkit-animation: sv4-note-parallax linear both;
    animation: sv4-note-parallax linear both;
    animation-timeline: --sv4-step;
    animation-range: entry 0% cover 55%;
  }

@-webkit-keyframes sv4-phone-parallax {
    from {
      transform: translate3d(0, 4rem, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
}

@keyframes sv4-phone-parallax {
    from {
      transform: translate3d(0, 4rem, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes sv4-note-parallax {
    from {
      transform: translate3d(0, 2rem, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
}

@keyframes sv4-note-parallax {
    from {
      transform: translate3d(0, 2rem, 0);
    }

    to {
      transform: translate3d(0, 0, 0);
    }
}
}

/*--------- SV5 — ГДЕ ЕЩЁ ИСПОЛЬЗОВАТЬ КАРТУ -----------*/

.sv5 {
  position: relative;
  z-index: 1;
  padding-top: 9.5rem;
}

.sv5_card {
  position: relative;
  /* высота = экран минус шапка (4.5rem) минус воздух сверху и снизу (3rem),
     но не больше макетных 40rem. Нижняя граница — высота текстовой колонки с кнопкой.
     Сколько плиток положить в колонку под эту высоту, считает app.js. */
  height: min(40rem, 100vh - 7.5rem);
  height: clamp(31.5625rem, 100svh - 7.5rem, 40rem);
  border-radius: 1.5rem;
  background: var(--white-700);
  overflow: hidden;
}

.sv5_txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 41.9375rem;
  height: 100%;
  padding: 3.25rem 0 3.25rem 3.25rem;
}

.sv5_txt h2 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--dark-700);
}

.sv5_lead {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 34.1875rem;
  margin-top: 1.5rem;
}

.sv5_lead p {
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--dark-700);
}

.sv5 .sv_btn {
  margin-top: auto;
}

/* колонки логотипов: каждая полоса продублирована и едет по кругу */

.sv5_logos {
  position: absolute;
  left: 43.8125rem;
  top: 0;
  display: flex;
  gap: 1.625rem;
  height: 100%;
}

.sv5_col {
  position: relative;
  flex-shrink: 0;
  width: 7.0625rem;
  height: 100%;
  overflow: hidden;
}

.sv5_col_in {
  position: absolute;
  left: 0;
  top: -0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  -webkit-animation: sv5_scroll_up 46s linear infinite;
  animation: sv5_scroll_up 46s linear infinite;
}

.sv5_col--tall .sv5_col_in {
  top: -5.3125rem;
  -webkit-animation: sv5_scroll_down 54s linear infinite;
  animation: sv5_scroll_down 54s linear infinite;
}

/* плитка: рамка и скругление — CSS, из макета только сам логотип */

.sv5_logo {
  display: block;
  flex-shrink: 0;
  width: 7.0625rem;
  height: 7.0625rem;
  border: 0.03125rem solid rgba(29, 35, 43, 0.28);
  border-radius: 1.3273rem;
}

.sv5_logo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* когда у плитки появится href — она станет кликабельной */

.sv5_logo[href] {
  transition: border-color 0.3s, transform 0.3s;
}

.sv5_logo[href]:hover {
  border-color: rgba(29, 35, 43, 0.5);
  transform: translateY(-0.125rem);
}

/* Шаг прокрутки — длина одного ряда плиток. Сколько их в ряду, зависит от высоты
   карточки, поэтому точное значение подставляет app.js в --sv5-loop. */

@-webkit-keyframes sv5_scroll_up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(var(--sv5-loop, 34.75rem) * -1));
  }
}

@keyframes sv5_scroll_up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(var(--sv5-loop, 34.75rem) * -1));
  }
}

@-webkit-keyframes sv5_scroll_down {
  from {
    transform: translateY(calc(var(--sv5-loop, 34.75rem) * -1));
  }

  to {
    transform: translateY(0);
  }
}

@keyframes sv5_scroll_down {
  from {
    transform: translateY(calc(var(--sv5-loop, 34.75rem) * -1));
  }

  to {
    transform: translateY(0);
  }
}

/* те же кадры для горизонтальных рядов — ими пользуется мобильная версия */

@-webkit-keyframes sv5_scroll_left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(var(--sv5-loop, 34.75rem) * -1));
  }
}

@keyframes sv5_scroll_left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(var(--sv5-loop, 34.75rem) * -1));
  }
}

@-webkit-keyframes sv5_scroll_right {
  from {
    transform: translateX(calc(var(--sv5-loop, 34.75rem) * -1));
  }

  to {
    transform: translateX(0);
  }
}

@keyframes sv5_scroll_right {
  from {
    transform: translateX(calc(var(--sv5-loop, 34.75rem) * -1));
  }

  to {
    transform: translateX(0);
  }
}

/*--------- SV6 — ПОЧЕМУ ВЫБИРАЮТ -----------*/

.sv6 {
  position: relative;
  z-index: 1;
  padding-top: 9.5rem;
}

.sv6_grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 37.5rem;
}

.sv6_img_wrap {
  flex-shrink: 0;
  margin: -12rem 0 0;
}

.sv6_img {
  position: relative;
  width: 41.875rem;
  height: 37.5rem;
}

/* холст иллюстрации: система координат из макета — 670×600, слои выходят за края */

.sv6_layer {
  position: absolute;
}

.sv6_layer > img {
  display: block;
  width: 100%;
  height: 100%;
}

/* карта, робот и их тени — одним рендером: в исходнике это единый слой */

.sv6_base {
  left: -2.63125rem;
  top: 1.0625rem;
  width: 41.625rem;
  height: 35.25rem;
}

.sv6_google {
  left: 6.50625rem;
  top: 7.9125rem;
  width: 7.03125rem;
  height: 7.03125rem;
}

.sv6_apple {
  left: 30.80625rem;
  top: 6.61875rem;
  width: 8.35625rem;
  height: 8.35625rem;
}

.sv6_tether {
  left: -0.01875rem;
  top: 24.88125rem;
  width: 3.75rem;
  height: 3.98125rem;
}

.sv6_plate {
  left: 27.54375rem;
  top: 20.18125rem;
  width: 14.875rem;
  height: 11.225rem;
}

/* Подпись на картонной плашке — обычный текст поверх картинки, правится в разметке.
   Размеры собственные, из макета: рамка 190.7×44.8 повёрнута на 6°. */

.sv6_badge {
  position: absolute;
  left: 31.5125rem;
  top: 25.1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.35913rem;
  width: 11.91875rem;
  height: 2.8rem;
  padding: 0.525rem 0.60781rem;
  /* Матрица из макета: там не просто поворот, а поворот со скосом — подпись
     «ложится» на картонку по её перспективе, отсюда наклон букв.
     Точка отсчёта левый верхний угол, как в Figma. */
  transform: matrix(0.9945, -0.1045, -0.2588, 0.9659, 0, 0);
  transform-origin: 0 0;
}

.sv6_badge_ico {
  flex-shrink: 0;
  /* в выгрузке к иконке 28×28 добавилась мягкая тень снизу */
  width: 1.765rem;
  height: 1.828rem;
}

.sv6_badge_ico img {
  display: block;
  width: 100%;
  height: 100%;
}

.sv6_badge_txt {
  /* уже макетных 137: подпись должна обрываться на картонке, а не за её скошенным краем */
  width: 5.8125rem;
  padding-top: 0.10951rem;
}

.sv6_badge_title {
  font-size: 0.65707rem;
  font-weight: 800;
  line-height: 0.75rem;
  letter-spacing: -0.01796rem;
  /* в макете надпись «вдавлена» в картон — чистой чёрной её быть не должно */
  color: #2e1e12;
  text-shadow: 0.175px 0.438px 0 rgba(255, 255, 255, 0.29);
}

/* если подпись длиннее плашки — подрезаем многоточием, как в макете */

.sv6_badge_descr {
  overflow: hidden;
  font-size: 0.43805rem;
  font-weight: 700;
  line-height: 0.75rem;
  letter-spacing: -0.01796rem;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #2e1e12;
  text-shadow: 0.175px 0.438px 0 rgba(255, 255, 255, 0.29);
}

/* парящие предметы покачиваются; плашка и картон под ней — синхронно, как одно целое */

.sv6_google img,
.sv6_apple img,
.sv6_tether img,
.sv6_plate img {
  -webkit-animation: sv6-float var(--dur, 7s) ease-in-out infinite;
  animation: sv6-float var(--dur, 7s) ease-in-out infinite;
  -webkit-animation-delay: var(--delay, 0s);
  animation-delay: var(--delay, 0s);
}

/* у плашки transform занят матрицей, поэтому качаем независимым translate */

.sv6_badge {
  -webkit-animation: sv6-float-badge var(--dur, 7s) ease-in-out infinite;
  animation: sv6-float-badge var(--dur, 7s) ease-in-out infinite;
  -webkit-animation-delay: var(--delay, 0s);
  animation-delay: var(--delay, 0s);
}

.sv6_google img {
  --dur: 6.8s;
  --delay: 0.6s;
  --float: -0.7rem;
}

.sv6_apple img {
  --dur: 6.2s;
  --delay: 0.4s;
  --float: -0.85rem;
}

.sv6_tether img {
  --dur: 5.4s;
  --delay: 0.9s;
  --float: -0.6rem;
}

.sv6_plate img,
.sv6_badge {
  --dur: 7.4s;
  --delay: 0.2s;
  --float: -0.55rem;
}

@-webkit-keyframes sv6-float-badge {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 var(--float, -0.55rem);
  }
}

@keyframes sv6-float-badge {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 var(--float, -0.55rem);
  }
}

@-webkit-keyframes sv6-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, var(--float, -0.75rem), 0);
  }
}

@keyframes sv6-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, var(--float, -0.75rem), 0);
  }
}

/* картинка шире своей колонки и лежит абсолютом — текст поднимаем над ней */

.sv6_txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 42.5rem;
}

.sv6_title {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sv6_title h2 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--dark-700);
}

.sv6_title p {
  width: 36.375rem;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 130%;
  color: var(--dark-700);
}

.sv6_check {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.sv6_check li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sv6_check img {
  display: block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.sv6_check span {
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--dark-700);
}

/*--------- SV7 — СТОИМОСТЬ -----------*/

.sv7 {
  position: relative;
  z-index: 1;
  padding-top: 9.5rem;
}

.sv7_card {
  position: relative;
  height: 45rem;
  border-radius: 3.125rem;
  overflow: hidden;
}

.sv7_card_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.sv7_body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: 3.25rem;
}

.sv7_txt {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 31.4375rem;
}

.sv7_txt h2 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--white-700);
}

.sv7_offer {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sv7_price {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  align-self: flex-start;
  height: 3.375rem;
  padding: 0 1rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.3);
}

.sv7_price b {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 130%;
  color: var(--white-700);
}

.sv7_price s {
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 130%;
  color: rgba(255, 255, 255, 0.42);
}

.sv7_offer_txt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sv7_accent {
  font-size: 1rem;
  line-height: 130%;
  color: var(--white-700);
}

.sv7_accent b {
  font-weight: 700;
}

.sv7_note {
  font-size: 0.875rem;
  line-height: 130%;
  color: var(--white-700);
}

.sv7_check {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sv7_check li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sv7_check img {
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  opacity: 0.42;
}

.sv7_check span {
  font-size: 1rem;
  line-height: 130%;
  color: var(--white-700);
}

.sv7_check b {
  font-weight: 700;
}

.sv7_action {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  /* кнопка по макету выступает левее текста */
  margin-left: -0.625rem;
}

.sv7_small {
  width: 15.9375rem;
  font-size: 0.75rem;
  line-height: 130%;
  color: var(--white-700);
}

/*--------- SVL — СПИСОК СЕРВИСОВ (/online-services/) -----------*/

.svl_hero {
  position: relative;
  /* столько же, сколько у героя страницы сервиса: 30 + 42 шапки и отступ до заголовка */
  padding-top: 10.75rem;
}

.svl_hero_grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 37.5rem;
}

.svl_hero_txt {
  width: 41.875rem;
}

.svl_hero h1 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--dark-700);
}

.svl_lead {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 43rem;
  margin-top: 1.75rem;
}

.svl_lead p {
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--dark-700);
}

.svl_hero .sv_btn {
  margin-top: 2.25rem;
}

.svl {
  position: relative;
  z-index: 1;
  padding-top: 9.5rem;
}

.svl_title {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--dark-700);
}

.svl_group {
  margin-top: 3.25rem;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 130%;
  color: var(--dark-700);
}

.svl_grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr [4];
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.svl_card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: var(--white-700);
  box-shadow: 0.125rem 0.125rem 0.0822rem rgba(0, 0, 0, 0.06);
}

/* плитка логотипа — та же, что в стене логотипов: рамка и скругление из CSS */

.svl_ico {
  display: block;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border: 0.03125rem solid rgba(29, 35, 43, 0.28);
  border-radius: 0.65rem;
  overflow: hidden;
}

/* в выгрузке вокруг логотипа много воздуха — на маленькой плитке подтягиваем его */

.svl_ico img {
  display: block;
  width: 132%;
  height: 132%;
  margin: -16%;
}

.svl_txt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.svl_txt b {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 130%;
  color: var(--dark-700);
}

.svl_txt i {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 130%;
  color: rgba(29, 35, 43, 0.72);
}

/* кликабельна только та карточка, у которой появился href */

.svl_card[href] {
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.svl_card[href]:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0.125rem 0.375rem 0.75rem rgba(0, 0, 0, 0.1);
}

.svl_note {
  margin-top: 3.25rem;
  font-size: 1rem;
  line-height: 130%;
  color: rgba(29, 35, 43, 0.72);
}

/* призыв в коричневой карточке — фон и карта те же файлы, что на страницах сервисов */

.svl_cta {
  position: relative;
  z-index: 1;
  padding-top: 9.5rem;
}

.svl_cta_card {
  position: relative;
  height: 27.25rem;
  border-radius: 3.125rem;
  overflow: hidden;
}

.svl_cta_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 62%;
  object-position: center 62%;
}

.svl_cta_obj {
  left: 52rem;
  top: 4rem;
  width: 25.00625rem;
  height: 16.25rem;
  rotate: -8deg;
}

.svl_cta_body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  width: 45rem;
  height: 100%;
  padding: 3.25rem;
}

.svl_cta_body h2 {
  font-size: 4rem;
  font-weight: 500;
  line-height: 110%;
  color: var(--white-700);
}

.svl_cta_body p {
  width: 34rem;
  font-size: 1.125rem;
  line-height: 130%;
  color: var(--white-700);
}

/*--------- SV8 — SEO-ТЕКСТ -----------*/

.sv8 {
  position: relative;
  z-index: 1;
  padding-top: 9.5rem;
}

.sv8 .main {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.sv8 p {
  font-size: 0.875rem;
  line-height: 130%;
  color: rgba(29, 35, 43, 0.72);
}

.sv8_label {
  font-weight: 700;
}

/*--------- ДОСТУПНОСТЬ -----------*/

@media (prefers-reduced-motion: reduce) {
  .sv1_tether img,
  .sv1_apple img,
  .sv1_google img,
  .sv1_img::before,
  .sv1_img::after,
  .sv4_step_arrow img,
  .sv4_step_phone,
  .sv4_note,
  .sv5_col_in,
  .sv6_google img,
  .sv6_apple img,
  .sv6_tether img,
  .sv6_plate img,
  .sv6_badge,
  .sv3_obj_card,
  .sv7_obj_card,
  .svl_cta_obj {
    -webkit-animation: none;
    animation: none;
  }

  .sv1_layer {
    transition: none;
  }
}