/* ══════════════════════════════════════════════════════════════════
   refresh.css — правки главной страницы по замечаниям заказчика
   от 2026-08-21. Подключается ПОСЛЕ webflow.shared.*.css и только
   переопределяет — ни одного файла оригинала не тронуто.

   Что правится:
     1. вертикальный ритм между разделами («разделы слеплены сильно»)
     2. видео посередине — рамка вместо растягивания на всю ширину
     3. табы «Наши проекты» — полосы прокрутки налезали на кнопки

   Первый экран с планетой намеренно не тронут.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --sec-x:    clamp(16px, 4vw, 48px);    /* поля слева-справа  */
  --sec-y:    clamp(44px, 6vw, 96px);    /* вертикаль раздела  */
  --sec-y-lg: clamp(60px, 8vw, 128px);   /* два акцента        */
}

/* ── 1. единый ритм ───────────────────────────────────────────────
   Было: стыки 48 / 120 / 172 / 96 / 48 / 48 / 96 / 120 px — разброс
   в 3,6 раза, причём «Технологии» вообще без отступов (padding: 0).
   На мобильном два стыка схлопывались до 16 px.
   Стало: 172…201 px на десктопе, 88…104 px на мобильном.         */
.projects, .about, .banner, .expert, .technologii, .howwork, .feedback{
  padding-top:    var(--sec-y);
  padding-bottom: var(--sec-y);
  padding-left:   var(--sec-x);
  padding-right:  var(--sec-x);
  margin-top: 0;
  margin-bottom: 0;
}

/* два осознанных акцента — вокруг видео и перед формой */
.banner, .feedback{
  padding-top:    var(--sec-y-lg);
  padding-bottom: var(--sec-y-lg);
}

/* заголовок проектов наезжал на сетку кейсов (было margin-bottom: -50px) */
.projects-heading{ margin-bottom: 0; }

/* подвал в том же ритме (было 32px, на ≥1280 — 72px) */
footer, .footer{
  padding-top:    var(--sec-y);
  padding-bottom: var(--sec-y);
}

/* ── 2. видео посередине ──────────────────────────────────────────
   Было: height: 869px прибито намертво, без единого медиазапроса.
   Файл 1280×720 растягивался до 1329×869 — увеличение в 1,21× и
   срез 14 % ширины. На мобильном — вертикальная полоса 869 px,
   в которой помещалась пятая часть кадра.
   Стало: 1120×630, ровно пропорция файла, срез 0 %.              */
.banner{ align-items: center; }

.banner .background-video-5{
  width: 100%;
  max-width: 1120px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(202, 180, 255, .14);
}

/* ── 3. табы «Наши проекты» ───────────────────────────────────────
   Было: overflow: scroll по ОБЕИМ осям. Вертикальная прокрутка
   бесполезна (scrollHeight == clientHeight == 55), но браузер рисовал
   полосу со стрелками и отъедал 15 px справа, обрезая чипы. Плюс
   padding-bottom: 0 — горизонтальная полоса лежала вплотную к
   кнопкам.                                                        */
.projects-tabs-button{
  height: auto;
  min-height: 55px;
  overflow-x: auto;              /* было scroll — полоса висела всегда  */
  overflow-y: hidden;            /* было scroll — пустая полоса со стрелками */
  padding-bottom: 14px;          /* воздух между чипами и полосой       */
  scrollbar-width: thin;
  scrollbar-color: rgba(202, 180, 255, .38) rgba(255, 255, 255, .07);
  overscroll-behavior-x: contain;
}
.projects-tabs-button::-webkit-scrollbar{ height: 6px; }
.projects-tabs-button::-webkit-scrollbar-track{
  background: rgba(255, 255, 255, .07);
  border-radius: 99px;
}
.projects-tabs-button::-webkit-scrollbar-thumb{
  background: rgba(202, 180, 255, .38);
  border-radius: 99px;
}
.projects-tabs-button::-webkit-scrollbar-thumb:hover{
  background: rgba(202, 180, 255, .6);
}