/* ---------- page-intro ---------- */
.page-intro {
  padding: 30px 0 60px 0;
}

/* Первый экран занимает высоту вьюпорта (минус фиксированная шапка ~140px),
   контент по центру — чтобы снизу не выглядывала следующая секция.
   Модификатор только для страниц, где это включено. */
.page-intro_min {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 140px);
}

.page-intro_min > .container {
  width: 100%;
}

/* Фиолетовый слой повторяет наложение из макета: #650675 при alpha 0.9.
   Подложка общая для hero и блока услуг — в макете это единый экран,
   иначе на стыке секций виден шов. */
.hero-block {
  background:
    linear-gradient(rgba(101, 6, 117, 0.9), rgba(101, 6, 117, 0.9)),
    url("../images/page-intro/hero-city.jpg") center top / cover no-repeat;
}

/* Верхний отступ пропускает фиксированную шапку (~130px) */
.page-intro_bg_hero {
  padding: 200px 0 130px 0;
}

.page-intro_bg_hero .page-intro__desc {
  max-width: 100%;
  width: 100%;
}

/* В макете шаг строк внутри абзаца 24px, между абзацами 38px */
.page-intro_bg_hero .page-intro__text-container .text + .text {
  margin-top: 14px;
}

/* ---------- hero OneBridge (ETL) ----------
   Фиолетовый первый экран как на Главной, но картинка слева, текст справа.
   Фон — два слоя из макета (фиолетовая подложка + дата-ландшафт), сведённые
   в один jpg. Шапка на странице прозрачная (header_transparent). */
.page-intro_onebridge {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 120px 0 60px 0;
  background: url("../images/page-intro/onebridge-hero-bg.jpg") center / cover no-repeat;
}

.page-intro_onebridge > .container {
  width: 100%;
}

.page-intro_onebridge .page-intro__row {
  align-items: center;
}

/* Картинка прижата к левому краю контейнера (как стартует контент на других
   страницах): убираем авто-центрирование и растяжение флекс-ячейки. */
.page-intro_onebridge .page-intro__img {
  flex: none;
  margin: 0;
  max-width: 460px;
}

/* Текст прижат вправо со значительным зазором от картинки, внутри — по левому краю */
.page-intro_onebridge .page-intro__desc {
  width: 42%;
  max-width: 42%;
}

.page-intro_onebridge .page-intro__text-container {
  margin: 28px 0 40px 0;
  max-width: 100%;
}

/* Синий бренд-акцент «ONE BRIDGE» */
.page-intro_onebridge .h1 span {
  color: #00A1E5;
}

@media screen and (max-width: 768px) {
  .page-intro_onebridge {
    min-height: auto;
    padding: 120px 0 60px 0;
  }

  .page-intro_onebridge .page-intro__img {
    margin: 0 auto;
  }

  .page-intro_onebridge .page-intro__desc {
    width: 100%;
    max-width: 100%;
  }
}

/* Лесенка «визуализировать → прогнозировать → планировать»:
   каждое слово с новой строки, нарастающий отступ, стрелка-маркер.
   Полужирные и крупнее обычного текста — акцентный блок под абзацем. */
.hero-steps {
  list-style: none;
  margin: 22px 0 0 0;
  padding: 0;
}

.hero-steps__item {
  position: relative;
  padding-left: 44px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
}

/* Маркер — кусочек логотипа: голубая линия с узелком */
.hero-steps__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 30px;
  height: 14px;
  background: url("../images/page-intro/hero-step-marker.svg") left center / contain no-repeat;
}

.hero-steps__item:nth-child(2) {
  margin-left: 44px;
}

.hero-steps__item:nth-child(3) {
  margin-left: 88px;
}

.page-intro__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.page-intro__desc {
  max-width: 55%;
  width: 55%;
}

.page-intro__one-bridge {
  max-width: 320px;
  width: 100%;
  margin-top: 20px;
}

.page-intro__text-container {
  margin: 35px 0 65px 0;
  max-width: 480px;
}

.page-intro__img {
  flex-grow: 1;
  margin: 0 auto;
  max-width: 485px;
  width: 100%;
}

.page-intro__img_error {
  max-width: 570px;
}

.description__animation {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .page-intro__row {
    flex-direction: column-reverse;
  }

  .page-intro__row_column_mobile {
    flex-direction: column;
  }

  .page-intro__desc {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }

  .page-intro__one-bridge {
    max-width: 220px;
  }

  .page-intro__img {
    width: 60%;
  }

  .page-intro__text-container {
    margin: 25px auto 35px auto;
  }
}

@media screen and (max-width: 425px) {
  .page-intro__img {
    width: 90%;
  }
}

/* ---------- services ---------- */
.services {
  padding: 0 0 140px 0;
}

/* Разделительная белая линия из макета — по ширине контента */
.services_on-hero .container {
  border-top: 1px solid #ffffff;
  padding-top: 70px;
}

.services__title {
  margin-bottom: 12px;
}

.services__subtitle {
  margin: 0 0 60px 0;
}

.services__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* Переворот карточки. Наведение работает на всю карточку, не только на «Зачем?».
   focus-within — для клавиатуры, _flipped вешает JS по тапу на сенсорных экранах. */
.services__item {
  min-height: 455px;
  perspective: 1200px;
  cursor: pointer;
}

.services__card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform .6s;
}

.services__item:hover .services__card,
.services__item:focus-within .services__card,
.services__item_flipped .services__card {
  transform: rotateY(180deg);
}

.services__face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 43px 27px 40px 27px;
  border-radius: 10px;
  background-color: #00A1E5;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.services__face_back {
  transform: rotateY(180deg);
}

.services__icon {
  display: block;
  flex: none;
  width: 70px;
  height: 70px;
}

/* 18px, а не 20px из макета: «ETL-система OneBridge» при 20px даёт 237.8px
   при доступных 227.2px и уезжает на вторую строку, сдвигая весь текст.
   В макете карточка была 302px, у нас контейнер 1200px даёт 281px. */
.services__card-title {
  margin: 22px 0 0 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 130%;
}

.services__card-text {
  margin: 28px 0 20px 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 300;
  line-height: 140%;
}

/* Пилюля и блок ответа — flex-элементы с margin-top: auto, поэтому на обеих
   гранях их низ совпадает с нижним паддингом карточки (40px). */
.services__hint {
  flex: none;
  align-self: center;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 151px;
  height: 41px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #00A1E5;
  font-size: 16px;
  font-weight: 700;
}

/* Отрицательные боковые поля равны внутреннему паддингу: белый блок шире
   текстовой колонки, но сам текст стоит на тех же 27px, что и описание выше —
   абзацы читаются как одно целое, а белый фон работает акцентом. */
.services__answer {
  flex: none;
  margin: auto -16px 0 -16px;
  padding: 16px;
  border-radius: 5px;
  background-color: #ffffff;
  color: #00A0E3;
  font-size: 15px;
  font-weight: 400;
  line-height: 140%;
}

/* ---------- info ---------- */
.info {
  padding: var(--padding-section);

}

.info_bg_color {
  background-color: #F4F4F4;
}

.info__list {
  margin: var(--margin-block);
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 100px;
  justify-content: center;
  align-items: center;
}

.info__list_grid_50 {
  grid-template-columns: repeat(2, 1fr);
}

.info__list-item {
  border-left: 2px solid #00A0E3;
  padding: 0 55px 0 35px;
}

.info__list-item:nth-child(2n) {
  border-left: 2px solid #650675;
}

.info__list-text-container {
  margin-top: 20px;
}

@media screen and (max-width: 1200px) {
  .info__list {
    row-gap: 80px;
  }
}

@media screen and (max-width: 992px) {
  .info__list {
    row-gap: 60px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 576px) {
  .info__list {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 40px;
  }

  .info__list-item {
    padding: 0 0 0 35px;
  }
}

/* ---------- technologies ---------- */
.technologies {
  padding: var(--padding-section);
  background-color: #F4F4F4;
}

.technologies__subtitle {
  margin-top: 25px;
  text-align: center;
}

/* Вариант блока для Главной: белый фон, заголовок и подзаголовок слева.
   На consulting.html секция остаётся серой и по центру. */
.technologies_bg_white {
  background-color: #ffffff;
  padding: 50px 0;
}

.technologies_bg_white .technologies__subtitle {
  margin-top: 12px;
  text-align: left;
}

/* Цвета чисел взяты из самой диаграммы, чтобы совпадать с её секторами.
   На других страницах остаются прежние #650675 / #00A0E3. */
.technologies_bg_white .technologies__list-heading {
  color: #6E2E87;
}

.technologies_bg_white .technologies__list-heading_blue {
  color: #00A1E5;
}


.technologies__row {
  position: relative;
}

.technologies__picture {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
}

.technologies__list {
  margin: 75px 0 0 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

.technologies__list-item {
  width: 50%;
}

.technologies__list-item:nth-child(1) {
  padding: 25px 0 100px;
  justify-self: start;
}

.technologies__list-item:nth-child(2) {
  padding: 25px 0 100px;
  justify-self: end;
}

.technologies__list-item:nth-child(3) {
  padding: 100px 0 25px;
  justify-self: start;
}

.technologies__list-item:nth-child(4) {
  padding: 100px 0 25px;
  justify-self: end;
}

.technologies__list-heading {
  margin: 0;
  color: #650675;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.technologies__list-heading_blue {
  color: #00A0E3;
}

.technologies__list-subtitle {
  margin: 10px 0 20px;
  color: #000;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}


@media screen and (max-width: 992px) {
  .technologies__list {
    margin: 40px 0 0 0;
  }

  .technologies__list-item {
    width: 60%;
  }

  .technologies__list-item:nth-child(1) {
    padding: 25px 0 50px;
  }

  .technologies__list-item:nth-child(2) {
    padding: 25px 0 50px;
  }

  .technologies__list-heading {
    font-size: 22px;
  }

  .technologies__list-subtitle {
    font-size: 14px;
  }

  .technologies__list-item .text {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .technologies__list-item {
    width: 70%;
  }
}

/* ---------- presentation ---------- */
.presentation {
  background-image: url("../images/fon/fon-2.png");
  background-size: cover;
  background-position: center center;
  padding: 90px 0;
}

.presentation__subtitle {
  margin: 35px 0 45px 0;
  text-align: center;
}

.presentation__button-container {
  text-align: center;
}

/* Промо-плашка на Главной: сплошной голубой фон, текст слева, кнопка справа.
   На остальных страницах .presentation остаётся с фоном fon-2 и по центру. */
.presentation_promo {
  background-image: none;
  background-color: #00A1E5;
  padding: 60px 0;
}

.presentation__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.presentation_promo .presentation__subtitle {
  margin: 20px 0 0 0;
  text-align: left;
}

@media screen and (max-width: 992px) {
  .presentation {
    padding: 70px 0;
  }
}

@media screen and (max-width: 576px) {
  .presentation {
    padding: 50px 0;
  }
}

/* ---------- clients (бенто) ---------- */
.clients {
  padding: var(--padding-section);
  padding-bottom: 70px;
}

/* Грид 2×2: ряды выравниваются автоматически, без ступенек.
   Верхний ряд — пара (Транспорт/Банки) и стопка (ТОП/FMCG);
   нижний — Промышленность и Госучреждения ровным рядом.
   Левый столбец шире (узким карточкам тесно), 1.22:1 ≈ 55/45. */
.clients__bento {
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  gap: 24px;
  margin-top: 50px;
}

.clients__pair {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.clients__pair .client {
  flex: 1;
  min-width: 0;
}

/* Стопка ТОП+FMCG: нижняя карточка добирает высоту, чтобы её низ совпал
   с низом пары слева (обе ячейки — один ряд грида). */
.clients__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.clients__stack .client:last-child {
  flex-grow: 1;
}

/* Карточка: фото под фиолетовым слоем #6E2E87, скругление, текст поверх */
.client {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-color: #6E2E87;
  background-size: cover;
  background-position: center center;
}

.client::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(110, 46, 135, 0.85);
}

.client__body {
  position: relative;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 32px 28px;
  color: #ffffff;
}

/* Широкие карточки: заголовок слева, список справа, оба прижаты к верху */
.client__body_split {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

/* Список фиксированной ширины 255px во всех широких карточках — заголовок
   занимает остаток. Правый столбец при этом не меняется (там и было ~175 + 255),
   а Промышленность из широкой левой колонки ужимается с 326 до 255. */
.client__body_split .client__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.client__body_split .client__list {
  flex: 0 0 255px;
}

.client__title {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 130%;
}

/* «Банки и страхование» занимает 2 строки, «Транспорт» — одну.
   Резервируем 2 строки, чтобы списки в паре стартовали с одного уровня. */
.client_narrow .client__title {
  min-height: 62px;
}

.client__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.client__list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  font-weight: 300;
  line-height: 145%;
}

.client__list li + li {
  margin-top: 14px;
}

.client__list strong {
  font-weight: 700;
}

.client__list li::before {
  content: "•";
  position: absolute;
  left: 2px;
}

/* ---------- products ---------- */
.products {
  padding: var(--padding-section);
}

.products .text {
  text-align: center;
  margin-top: 25px;
}

.products__list {
  padding: 0;
  margin: 100px 0 0 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.products__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 65px 0;
}

.products__item h3 {
  text-align: center;
}

.products__item+.products__item {
  border-left: 1px solid rgba(0, 0, 0, 0.30);
}

.products__item:nth-last-child(-n+3) {
  border-top: 1px solid rgba(0, 0, 0, 0.30);
}

.products__item:nth-child(4) {
  border-left: none;
}

@media screen and (max-width: 768px) {
  .products__list {
    margin: 60px 0 0 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  .products__item {
    padding: 25px 0 35px 0;
  }

  .products__item:nth-child(3) {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.30);
  }

  .products__item:nth-child(4) {
    border-left: 1px solid rgba(0, 0, 0, 0.30);
  }

  .products__item:nth-child(5) {
    border-left: none;
  }
}

/* ---------- call ---------- */
.call {
  background-image: url("../images/fon/fon-3.png");
  background-size: cover;
  background-position: center center;
  padding: 90px 0;
  position: relative;
}

/* Форма на Главной — на белом фоне, тёмный текст (как в макете).
   Верхний отступ убран: секция клиентов выше уже даёт воздух, иначе
   между блоками копится слишком много белого. */
.call_light {
  background-image: none;
  background-color: #ffffff;
  padding-top: 0;
}

/* На белом фоне нужна тень со всех сторон, иначе верх карточки сливается */
.call_light .call__form {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
}

.call__row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.call__desc {
  width: 50%;
}

.call__desc-row {
  max-width: 450px;
  margin-top: 35px;
}

.call__desc-contact {
  margin-top: 80px;
}

.call__desc-contact a {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.call__desc-contact a:hover {
  opacity: 0.5;
}

.call__form {
  width: 50%;
  padding: 45px 40px;
  border-radius: 5px;
  background: #FFF;
  box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.25);
  height: 100%;
}

.call__form-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.call__form-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.call__form-fieldset {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.call__form-data-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.call__form-button {
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 992px) {
  .call {
    padding: 50px 0 150px 0;
  }

  .call__title-container {
    text-align: center;
  }

  .call__desc-row {
    text-align: center;
    max-width: 100%;
  }

  .call__desc {
    width: 100%;
  }

  .call__row {
    flex-direction: column;
  }

  .call__desc-contact {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    width: 85%;
  }

  .call__form {
    width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .call__form-fieldset {
    flex-direction: column;
  }
}

/* ---------- registry ---------- */
.registry {
  background-image: url("../images/registry/registry-fon.png");
  background-size: cover;
  background-position: center center;
  padding: var(--padding-section);
  position: relative;
}

.registry__row {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

.registry__desc {
  width: 50%;
}

.registry__logo {
  width: 400px;
}

.registry__title-container {
  margin: 30px 0 35px 0;
}

.registry__button-container {
  margin-top: 60px;
}

.registry__images-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  max-width: 410px;
  width: 100%;
}

.registry__images {
  display: block;
  width: 100%;
  object-fit: contain;
}

@media screen and (max-width: 768px) {
  .registry {
    background-image: url("../images/registry/registry-fon-mobile.png");
  }

  .registry__row {
    flex-direction: column;
    align-items: center;
  }

  .registry__desc {
    width: 100%;
    text-align: center;
  }

  .registry__logo {
    width: 240px;
  }

  .registry__images-container {
    max-width: 210px;
    padding-bottom: 75px;
  }

  .registry__button-container {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

/* ---------- registry ---------- */
.advantages-elt {
  padding: var(--padding-section);
  background-color: #F4F4F4;
}

.advantages-elt__titile-container {
  max-width: 550px;
  margin: 0 auto;
  text-align: center;
}

.advantages-elt__list {
  list-style-type: none;
  margin: 100px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 54px;
  counter-reset: list 0;
}

.advantages-elt__item .text {
  margin-top: 20px;
}

.advantages-elt__img-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 60px;
}

.advantages-elt__img-container:before {
  color: #00A0E3;
  content: counter(list);
  counter-increment: list;
  display: inline-block;
  font-weight: 600;
  font-size: 120px;
  transition: .3s;
}

.advantages-elt__img {
  max-width: 200px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .advantages-elt__list {
    grid-template-columns: 1fr;
    margin: 60px 0 0 0;
    gap: 0;
  }

  .advantages-elt__item {
    padding: 40px 0;
  }

  .advantages-elt__item:first-child {
    padding: 0 0 40px 0;
  }

  .advantages-elt__item:last-child {
    padding: 40px 0 0 0;
  }

  .advantages-elt__item+.advantages-elt__item {
    border-top: 1px solid rgba(0, 0, 0, 0.30);
  }

  .advantages-elt__img-container:before {
    font-size: 80px;
  }

  .advantages-elt__img-container {
    margin-bottom: 32px;
  }

  .advantages-elt__img {
    max-width: 120px;
    width: 100%;
  }
}

/* ---------- compatible-services ---------- */
.compatible-services {
  padding: var(--padding-section);
}

.compatible-services__list {
  margin: var(--margin-block);
  padding: 0 0 45px 0;
  list-style-type: none;
  height: 100%;
}

.compatible-services__list-item {
  border-top: 2px solid #00A0E3;
  border-bottom: 2px solid #00A0E3;
  cursor: pointer;
  transition: border 1.5s;
  height: auto;
}

.compatible-services__list-item:hover {
  border-top: 2px solid #650675;
  border-bottom: 2px solid #650675;
}

/* 1-2 линия */
.products__item-inner-border-left,
.products__item-inner-border-right {
  height: 100%;
}

.products__item-inner-border-left {
  position: relative;
}

.products__item-inner-border-left:before,
.products__item-inner-border-left:after {
  content: '';
  position: absolute;
  height: 25%;
  width: 2px;
  background-color: #00A0E3;
  transition: height 0.5s, background-color 1.5s;
}

.compatible-services__list-item:hover .products__item-inner-border-left:before {
  background-color: #650675;
  height: 100%;
}

.compatible-services__list-item:hover .products__item-inner-border-left:after {
  background-color: #650675;
  height: 100%;
}

/* 1 линия */
.products__item-inner-border-left:before {
  top: 0;
  left: 0;
}

/* 2 линия */
.products__item-inner-border-left:after {
  bottom: 0;
  left: 0;
}

/* 3-4 линия */
.products__item-inner-border-right {
  position: relative;
}

.products__item-inner-border-right:before,
.products__item-inner-border-right:after {
  content: '';
  position: absolute;
  height: 25%;
  width: 2px;
  background-color: #00A0E3;
  transition: height 0.5s, background-color 1.5s;
}

.compatible-services__list-item:hover .products__item-inner-border-right:before {
  background-color: #650675;
  height: 100%;
}

.compatible-services__list-item:hover .products__item-inner-border-right:after {
  background-color: #650675;
  height: 100%;
}

/* 1 линия */
.products__item-inner-border-right:before {
  top: 0;
  right: 0;
}

/* 2 линия */
.products__item-inner-border-right:after {
  bottom: 0;
  right: 0;
}

.products__item-content {
  padding: 50px 40px;
  display: flex;
  margin: auto;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 20px;
  position: relative;
  height: 100%;
}

.products__item-content p {
  flex: 1;
}

/* pagination */
.compatible-services__pagination .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.30);
  border-radius: 2px;
  opacity: 1;
}

.compatible-services__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid #00A0E3;
  background-color: #00A0E3;
}

@media screen and (max-width: 1200px) {
  .products__item-content {
    padding: 40px 30px;
    gap: 20px;
  }
}



/* ---------- documentation ---------- */
.documentation {
  padding: var(--padding-section);
  background-color: #F4F4F4;
}

.documentation__row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.documentation__desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 35px;
  max-width: 550px;
  width: 100%;
}

.documentation__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.documentation__list-item {
  border-radius: 5px;
  padding: 35px;
  box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.10);
  height: 277px;
  transition: 0.3s;
  position: relative;
}

.documentation__list-item:hover {
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
}


.documentation__title {
  margin: 0 0 50px 0;
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.documentation__title_white {
  color: #ffffff;
}

.documentation__list-item_white {
  background-color: #ffffff;
}

.documentation__list-item_purple {
  background-color: #650675;
}

.documentation__list-item_blue {
  background-color: #00A0E3;
}

.documentation__button-container {
  position: absolute;
  bottom: 35px;
  right: 35px;
}

@media screen and (max-width: 992px) {
  .documentation__row {
    flex-direction: column;
  }

  .documentation__desc {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 576px) {
  .documentation__list {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ---------- customer ---------- */
.customer {}

.customer__swiper {}

.customer__swiper-js .swiper-wrapper {
  flex-direction: column;
}

.customer__slide {
  padding: 90px 0 140px;
  background-size: cover;
  background-position: center;
  min-height: 865px;
}

.customer__slide_fon-1 {
  background-image: url("../images/customer/customer-fon-1.png");
}

.customer__slide_fon-2 {
  background-image: url("../images/customer/customer-fon-2.png");
}

.customer__slide_fon-3 {
  background-image: url("../images/customer/customer-fon-3.png");
}

.customer__slide_fon-4 {
  background-image: url("../images/customer/customer-fon-4.png");
}

.customer__title {
  max-width: 800px;
  width: 100%;
  color: #F5F5F5;
  font-size: 30px;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}

.customer__title strong {
  font-weight: 600;
}

.customer__row {
  margin: var(--margin-block);
  display: flex;
}

.customer__earlier {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  width: 50%;
  padding-right: 40px;
  border-right: 1px solid #ffffff;
}

.customer__desc {}

.customer__subtitle {
  margin: 0 0 24px 0;
  color: #F5F5F5;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}

.customer__done {
  padding-left: 40px;
  width: 50%;
}

.customer__button-prev.swiper-button-prev {
  left: 15px;
}

.customer__button-next.swiper-button-next {
  right: 15px;
}

.customer__button-prev.swiper-button-prev,
.customer__button-next.swiper-button-next {
  color: #9CA3AF;
  display: none;
}

.customer__pagination.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: .3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  bottom: 70px;
  display: none;
}

.customer .swiper-pagination-bullet {
  border-radius: 2px;
  border: 1px solid #FFF;
  width: 20px;
  height: 20px;
  background-color: transparent;
  opacity: 1;
  bottom: 70px;
}

.customer .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #FFF;
}

@media screen and (max-width: 1200px) {
  .customer__slide {
    padding: 70px 0 120px;
    min-height: 900px;
  }

  .customer__title {
    font-size: 20px;
    text-align: center;
  }

  .customer__row {
    padding: 0 40px;
  }

  .customer .swiper-pagination {
    bottom: 60px;
  }
}

@media screen and (max-width: 992px) {
  .customer__slide {
    padding: 50px 0 100px;
    min-height: 1200px;
  }

  .customer__row {
    flex-direction: column;
  }

  .customer__earlier {
    width: 100%;
    padding: 0;
    border-right: 1px solid transparent;
    padding: 0 0 30px 0;
  }

  .customer__earlier .customer__desc:first-child {
    border-bottom: 1px solid #ffffff;
    padding: 0 0 30px 0;
  }

  .customer__done {
    border-top: 1px solid #ffffff;
    width: 100%;
    padding: 30px 0 0 0;
  }

  .customer .swiper-pagination {
    bottom: 50px;
  }

  .customer .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
  }
}

@media screen and (max-width: 992px) {
  .customer__swiper-js .swiper-wrapper {
    flex-direction: row;
  }

  .customer__button-prev.swiper-button-prev,
  .customer__button-next.swiper-button-next {
    display: block;
  }

  .customer__pagination.swiper-pagination {
    display: block;
  }
}

/* ---------- decision ---------- */
.decision {
  padding: var(--padding-section);
}

.decision__list {
  margin: var(--margin-block);
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 90px;
}

.decision__list-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.decision__list-img-container {
  width: 267px;
  height: 267px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.decision__list-img-fill {
  position: absolute;
  bottom: 0%;
  left: 50%;
  width: 100%;
  height: 50%;
  transform: translate(-50%, 0%);
  background-color: #00A0E3;
  transition: height 0.3s ease;
}

.decision__list-item:hover .decision__list-img-fill {
  height: 100%;
}

.decision__list-img-circle {
  background-color: #FFF;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  filter: drop-shadow(0px 7px 7px rgba(0, 0, 0, 0.40));
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.decision__list-img {}

/* ---------- decision ---------- */
.discount {
  padding: 40px 0;
  background-image: url("../images/discount/discount-fon.png");
  background-size: cover;
  background-position: center;
}

.discount__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.discount__desc p {
  margin: 35px 0 50px 0;
}

.discount__title {
  margin: 0;
  color: #FFF;
  font-size: 36px;
  font-weight: 600;
  line-height: 150%;
}

.discount__title strong {
  font-size: 64px;
  font-weight: 600;
  line-height: 150%;
  text-transform: uppercase;
}

.discount__img-container {
  max-width: 480px;
  width: 100%;
}

.discount__img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 768px) {
  .discount__row {
    flex-direction: column;
  }
}

@media screen and (max-width: 576px) {
  .discount__title {
    font-size: 22px;
  }

  .discount__title strong {
    font-size: 40px;
  }
}

/* ---------- ETL помогает (onebridge, секция 2) ----------
   Заменяет старую «Какие задачи помогает решать ETL». Фото-карточки 2×2 с
   фиолетовым оверлеем и белым текстом — стиль как «Мы помогаем» на Хранилище.
   Секция на белом фоне (чередование с фиолетовыми соседями). */
.etl-helps {
  padding: 60px 0;
}

.etl-helps .h2 {
  margin-bottom: 40px;
}

.etl-helps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.etl-helps__item {
  min-height: 265px;
  padding: 40px 35px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #6E2E87 center / cover no-repeat;
}

/* Заголовок прижат к верху карточки, текст — к низу (space-between).
   Сбрасываем flex:1 у .h3 (он тянется в контексте data-storage). */
.etl-helps__item .h3 {
  flex: none;
}

/* Текст описания в чистый белый ради контраста на фото-фоне (базовый translucent = 0.8) */
.etl-helps__item .text_translucent {
  opacity: 1;
}

.etl-helps__item_1 {
  background-image: url("../images/etl-helps/card-1.jpg");
}

.etl-helps__item_2 {
  background-image: url("../images/etl-helps/card-2.jpg");
}

.etl-helps__item_3 {
  background-image: url("../images/etl-helps/card-3.jpg");
}

.etl-helps__item_4 {
  background-image: url("../images/etl-helps/card-4.jpg");
}

@media screen and (max-width: 768px) {
  .etl-helps__list {
    grid-template-columns: 1fr;
  }
}

/* ---------- data-storage ---------- */
.data-storage {
  padding: 60px 0;
  background-color: #650675;
  /* Синяя дата-картинка под фиолетовым слоем #650675 (как в макете Figma) */
  background-image:
    linear-gradient(rgba(101, 6, 117, 0.86), rgba(101, 6, 117, 0.86)),
    url("../images/data-storage/data-bg.jpg");
  background-size: cover;
  background-position: center center;
}

.h2 {}

.data-storage__list {
  margin: 40px 0 0 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: list 0;
}

.data-storage__list-item {
  padding: 20px;
}

.data-storage__list-item+.data-storage__list-item {
  border-left: 1px solid rgba(255, 255, 255, 0.30);
}

.data-storage__list-item:nth-last-child(-n+3) {
  border-top: 1px solid rgba(255, 255, 255, 0.30);
}

.data-storage__list-item:nth-child(4) {
  border-left: none;
}

.data-storage__list-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.data-storage__list-number::before {
  content: counter(list);
  counter-increment: list;
  color: #FFF;
  font-size: 90px;
  font-weight: 300;
  line-height: 1;
  opacity: 0.4;
}

.data-storage__list-desc {
  margin-top: 10px;
  width: 100%;
  padding-left: 60px;
}

@media screen and (max-width: 992px) {
  .data-storage__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .data-storage__list-number::before {
    font-size: 60px;
  }

  .data-storage__list-desc {
    padding-left: 45px;
  }

  .data-storage__list-item:nth-child(3) {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.30);
  }

  .data-storage__list-item:nth-child(4) {
    border-left: 1px solid rgba(255, 255, 255, 0.30);
  }

  .data-storage__list-item:nth-child(5) {
    border-left: none;
  }
}

@media screen and (max-width: 576px) {
  .data-storage__list {
    grid-template-columns: repeat(1, 1fr);
  }

  .data-storage__list-item {
    padding: 30px 0;
    border-left: 0px solid rgba(255, 255, 255, 0.30);
  }

  .data-storage__list-item+.data-storage__list-item {
    border-left: 0px solid rgba(255, 255, 255, 0.30);
    border-top: 1px solid rgba(255, 255, 255, 0.30);
  }
}

/* ---------- important-processes ---------- */
.important-processes {
  padding: var(--padding-section);
}

.important-processes__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.important-processes__heading {
  display: flex;
  flex-direction: column;
  gap: 35px;
  max-width: 440px;
}

.important-processes__img-container {
  max-width: 500px;
  width: 100%;
}

.important-processes__img {
  width: 100%;
  display: block;
}

.important-processes__list {
  padding: 0;
  margin: 80px 0 0 0;
  list-style-type: none;
  display: flex;
}

.important-processes__list-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.important-processes__list-item:first-child {
  padding-right: 50px;
}

.important-processes__list-item:nth-child(2) {
  padding: 0 50px;
  border-left: 1px solid rgba(0, 0, 0, 0.30);
  border-right: 1px solid rgba(0, 0, 0, 0.30);
}

.important-processes__list-item:last-child {
  padding-left: 50px;
}

@media screen and (max-width: 768px) {
  .important-processes__row {
    flex-direction: column;
  }

  .important-processes__heading {
    text-align: center;
  }

  .important-processes__list {
    flex-direction: column;
    gap: 30px;
    margin: 40px 0 0 0;
    text-align: center;
  }

  .important-processes__list-item {
    gap: 8px;
  }

  .important-processes__list-item:first-child {
    padding-right: 0;
  }

  .important-processes__list-item:nth-child(2) {
    padding: 0;
    border-left: 0px solid rgba(0, 0, 0, 0.30);
    border-right: 0px solid rgba(0, 0, 0, 0.30);
  }

  .important-processes__list-item:last-child {
    padding-left: 0;
  }
}

/* ---------- data-warehouse ---------- */
.data-warehouse {
  padding: 60px 0;
  background-color: #6E2E87;
  background-image: url("../images/data-warehouse/why-bg.jpg");
  background-size: cover;
  background-position: center center;
}

.data-warehouse__list {
  margin: 40px 0 0 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.data-warehouse__list-item {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.10);
  padding: 35px 40px;
  display: grid;
  gap: 20px;
}



@media screen and (max-width: 992px) {
  .data-warehouse__list {
    gap: 30px;

  }

  .data-warehouse__list-item {
    padding: 30px 20px;

    gap: 20px;
  }
}

@media screen and (max-width: 768px) {
  .data-warehouse__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .data-warehouse__list-item {
    padding: 30px 20px;
    gap: 20px;
  }
}


@media screen and (max-width: 576px) {
  .data-warehouse__list {
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
  }

  .data-warehouse__list-img {
    width: 45px;
    margin: 0 auto;
  }

}

/* ---------- problem ----------  */
.problem {
  padding: var(--padding-section);
  background-color: #E8E8E8;
}

.problem__row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.problem__img-container {
  max-width: 350px;
  width: 100%;
}

.problem__img {
  width: 100%;
  display: block;
}

/* ---------- questions ----------  */
.questions {}

.questions__row {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.questions__box {
  border-radius: 4px;
  box-shadow: 0 0 10px 14px rgba(147, 200, 194, .03);
  border: 1px solid rgba(0, 0, 0, 0.30);
}

.questions__title {
  font-size: 18px;
  font-weight: 600;
  padding: 24px 70px 24px 24px;
  background-color: #F4F4F4;
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.3s;
}

.questions__box.questions__box_active .questions__title {
  color: #650675;
}

.questions__title:hover {
  color: #650675;
}

.questions__title::before {
  display: block;
  content: "";
  width: 15px;
  height: 2px;
  position: absolute;
  background: rgba(0, 0, 0, .8);
  top: 50%;
  right: 39px;
  transform: rotate(45deg);
  transition: 0.3s;
}

.questions__title::after {
  display: block;
  content: "";
  width: 15px;
  height: 2px;
  position: absolute;
  background: rgba(0, 0, 0, .8);
  top: 50%;
  right: 29px;
  transform: rotate(135deg);
  transition: 0.3s;
}

.questions__box.questions__box_active .questions__title::before {
  transform: rotate(-45deg);
}

.questions__box.questions__box_active .questions__title::after {
  transform: rotate(225deg);
}

.questions__body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: 0.3s;
}

.questions__box.questions__box_active .questions__body {
  visibility: visible;
  opacity: 1;
  grid-template-rows: 1fr;
}

.questions__body-inner {
  min-height: 0;
}

.questions__body-content {
  padding: 24px;
  background-color: #F4F4F4;
}

/* Текст ответов — 18px вместо базовых 20px (.text): FAQ идёт сразу после
   карточек 16px, крупный кегль давал резкий скачок и утяжелял плотный блок. */
.questions__body-content .text {
  font-size: 18px;
}

/* Нумерация ответов в формате «1)», обычным начертанием и размером текста.
   Flex + align-items: baseline — цифра стоит вровень с текстом по базовой линии,
   не «надстрочником». Размер/цвет как у текста ответов (18px), чтобы совпадало. */
.questions__body-content ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}

.questions__body-content ol li {
  counter-increment: item;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 18px;
  line-height: 150%;
  color: rgba(0, 0, 0, 0.8);
}

.questions__body-content ol li::before {
  content: counter(item) ")";
  flex: none;
  font-weight: 400;
}

.questions__body-content ol li .text {
  flex: 1;
  min-width: 0;
}

/* Отступ между соседними абзацами внутри ответа (напр. определения DWH и ETL
   в Q2), иначе .text (margin: 0) склеивает их встык. */
.questions__body-content > .text + .text {
  margin-top: 14px;
}

@media screen and (max-width: 768px) {
  .problem__row {
    flex-direction: column;
  }
}

/* ---------- opportunities ----------  */
.opportunities {
  padding: var(--padding-section);
}

.opportunities__row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.opportunities__heading {
  display: flex;
  flex-direction: column;
  gap: 75px;
  padding-right: 200px;
}

.opportunities__button {
  width: 250px;
}

.opportunities__swiper-container {
  max-width: 100%;
}

.opportunities__swiper-js {
  padding-top: 40px;
}

.opportunities__img {
  width: 100%;
  display: block;
}

.opportunities__swiper-js .opportunities__pagination {
  top: 0;
  left: 20px;
  width: 90px;
}

/* button-prev */
.opportunities__swiper-js .opportunities__button-prev {
  left: 0;
  top: 0;
  height: auto;
  margin-top: auto;
}

.opportunities__swiper-js .opportunities__button-prev:after {
  font-size: 22px;
  color: #000000;
}

/* button-next */
.opportunities__swiper-js .opportunities__button-next {
  left: 110px;
  top: 0;
  height: auto;
  margin-top: auto;
}

.opportunities__swiper-js .opportunities__button-next:after {
  font-size: 22px;
  color: #000000;
}

@media screen and (max-width: 1200px) {
  .opportunities__heading {
    padding-right: 50px;
  }
}

@media screen and (max-width: 768px) {
  .opportunities__row {
    flex-direction: column-reverse;
  }

  .opportunities__heading {
    padding-right: 0;
    text-align: center;
    gap: 25px;
  }
}


/* ---------- appeal ----------  */
.appeal {
  padding: var(--padding-section);
  background-color: #F4F4F4;
}

.appeal__row {
  position: relative;
}

.appeal__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.appeal__list {
  margin: var(--margin-block);
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.appeal__list-item {
  padding-bottom: 120px;
  width: 65%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.appeal__list-item:nth-child(1) {
  margin-left: 40px;
}

.appeal__list-item:nth-child(2) {
  justify-self: end;
  margin-right: 40px;
}

.appeal__list-item:nth-child(3) {
  width: 50%;
}

.appeal__list-item:nth-child(4) {
  width: 50%;
  justify-self: end;
}

.appeal__list-item:nth-child(5) {
  width: 50%;
  margin-left: 40px;
  padding-bottom: 0;
}

.appeal__icons-mobile {
  display: none;
}

.appeal__list-item:nth-child(6) {
  width: 50%;
  justify-self: end;
  margin-right: 40px;
  padding-bottom: 0;
}

@media screen and (max-width: 1200px) {
  .appeal__circle {
    display: none;
  }

  .appeal__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
  }

  .appeal__icons-mobile {
    display: block;
    width: 100px;
    filter: drop-shadow(0px 5px 7px rgba(0, 0, 0, 0.25));
  }

  .appeal__list-item {
    padding: 0;
    width: 100%;
  }

  .appeal__list-item:nth-child(1) {
    margin-left: auto;
  }

  .appeal__list-item:nth-child(2) {
    justify-self: auto;
    margin-right: auto;
  }

  .appeal__list-item:nth-child(3) {
    width: 100%;
  }

  .appeal__list-item:nth-child(4) {
    width: 100%;
    justify-self: auto;
  }

  .appeal__list-item:nth-child(5) {
    width: 100%;
    margin-left: auto;
    padding-bottom: 0;
  }

  .appeal__list-item:nth-child(6) {
    width: 100%;
    justify-self: auto;
    margin-right: auto;
    padding-bottom: 0;
  }
}

@media screen and (max-width: 576px) {
  .appeal__list {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }

  .appeal__list-item {
    padding: 40px 0;
    align-items: center;
  }

  .appeal__list-item+.appeal__list-item {
    border-top: 1px solid rgba(0, 0, 0, 0.30);
  }

  .appeal__icons-mobile {
    width: 85px;
  }
}

/* ---------- data-operation ----------  */
.data-operation {
  padding: 60px 0;
}

.data-operation__swiper-js {
  margin: var(--margin-block);
  padding: 0 0 45px 0;
}

.data-operation__slide {
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.data-operation__slide-mini {
  width: 20px;
}

.data-operation__img {
  display: flex;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.30);
}

.data-operation__img-foto {
  display: none;
}

.data-operation__img-arrow {
  margin-top: 200px;
}

.data-operation__slide .text {
  margin-top: 32px;
}

/* pagination */
.data-operation__pagination .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.30);
  border-radius: 2px;
  opacity: 1;
}

.data-operation__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid #00A0E3;
  background-color: #00A0E3;
}

@media screen and (max-width: 992px) {
  .data-operation__slide-mini {
    display: none;
  }

  .data-operation__slide {
    width: 100%;
  }

  .data-operation__img-animation {
    display: none;
  }

  .data-operation__img-foto {
    display: block;
  }
}

/* ---------- appeal ----------  */
.popup-call {
  max-width: 375px;
  width: 100%;
}

.popup-call__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.popup-call__form h3 {
  text-align: center;
}

.popup-call__form-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.popup-call__form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.popup-call__form-button {
  display: flex;
  justify-content: flex-end;
}

.politicians__link {
  text-decoration: none;
  color: #650675;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  transition: 0.3s;
}

.politicians__link:hover {
  opacity: 0.5;
}