/* ===========================================================================
   STYLES.CSS — Единый файл стилей проекта imba-site
   Порядок слоёв: reset → variables → typography → layout → components
   Все переменные из variables.css, typography.css, layout.css, components.css
   Формула: 1rem = 10px (Xpx / 10 = Xrem)
   =========================================================================== */

/* ===========================================================================
   1. RESET — Сброс стилей
   Источник: reset.css
   =========================================================================== */

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

body {
  min-height: 100dvh;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  background: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* Дополнительные сбросы из styles.css (Taptop/Webflow) */
blockquote,
p {
  margin-block-start: 0;
  margin-block-end: 0;
}

.w-richtext > :first-child {
  margin-top: 0;
}
.w-richtext > :last-child {
  margin-bottom: 0;
}
.w-embed:before,
.w-embed:after,
.w-richtext:before,
.w-richtext:after {
  content: unset;
}

::before,
::after {
  box-sizing: border-box;
}

a,
button,
.button,
.submit_button,
[role="button"] {
  display: inline-block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  user-select: none;
  padding: 0;
  background-image: unset !important;
  margin: 0;
  border-width: 0;
}

button:focus {
  outline: revert;
}

section,
header,
footer {
  position: relative;
}

video {
  width: 100%;
  object-fit: cover;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-wrap: inherit;
  margin-top: 0;
  margin-bottom: 0;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible {
  outline-color: var(--c-brand, #0a0a0a);
  outline-width: var(--m2, 0.2rem);
  outline-offset: var(--m2, 0.2rem);
  outline-style: solid;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

input,
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  background-image: none;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  background-color: var(--c-bg, #ffffff) !important;
  color: var(--c-fg, #0a0a0a) !important;
  -webkit-box-shadow: 0 0 0 5rem var(--c-bg, #ffffff) inset;
  -webkit-text-fill-color: var(--c-fg, #0a0a0a);
}

a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* Taptop */

html,
.mosaic-wrap {
  color: inherit;
}

/* Сбросы и предустановки виджета формы Taptop */
.form {
  padding: 0;
}

.upload-list,
.form__label-text,
.form__widget-group,
.text-subtitle,
.form__field {
  margin: 0;
  font-weight: inherit;
}

.form__textarea,
.form__input {
  background-image: none;
  border: none;
  border-radius: 0;
}

.form__field-error {
  display: none !important;
}

.form__widget-group {
  row-gap: unset;
}

.form__widget-item:has(:checked) .form__checkbox-styled,
.form__widget-item:has(:checked) .form__radio-styled {
  background-image: unset;
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   2. VARIABLES — Дизайн-токены
   Источники: variables.css + styles.css (настройки)
   Цвета, размеры, анимации, брейкпоинты, прозрачность
   =========================================================================== */

/* 2.1 БРЕЙКПОИНТЫ */
:root {
  --sm-l: 992;
  --sm-t: 991;
  --sm-m: 479;
}

/* 2.2 ЦВЕТОВАЯ СИСТЕМА */
:root {
  color-scheme: light;
}

:root {
  /* Затемнение */
  --c-overlay: rgb(0, 0, 0);

  /* Статичные */
  --c-fg-s: #323435;
  --c-fg-light-s: #ffffff;
  --c-fg-mute-s: #a0a5a8;
  /* --c-fg-mute-light: #666666; */

  /* Фон */
  --c-bg-light-s: #ffffff;
  --c-bg-s: #f8fafb;
  --c-bg-dark-s: #ecf1f4;
  /* --c-bg-darker-s: #DEE3E6; */
  --c-bg-darker-s: #C1C3C5;
  --c-bg-black-s: #1d1f20;
  --c-bg-dark-grey-s: #323435;

  --c-bg-accent-1: #fff0e0;
}

[data-theme="light"] {
  /* Текст и иконки */
  --c-fg: #323435;
  --c-fg-light: #ffffff;
  --c-fg-mute: #a0a5a8;
  /* --c-fg-mute-light: #666666; */

  /* Фон */
  --c-bg-light: #ffffff;
  --c-bg: #f8fafb;
  --c-bg-dark: #ecf1f4;
  --c-bg-black: #1d1f20;
  --c-bg-dark-grey: #323435;

  /* Обводки/линии */
  /* --c-line: #f0f0f0; */

  /* Цвета бренда */
  /* --c-brand: #0a15ec;
  --c-brand-hover: #333333; */

  /* Системные уведомления */
  /* --c-success: #00c853;
  --c-success-bg: rgba(0, 200, 83, 0.1);
  --c-error: #ff1744;
  --c-error-bg: rgba(239, 93, 93, 0.1); */

  /* Скроллбар ползунок */
  --c-scroll-thumb: #c9c9c9;
  --c-scroll-thumb-hover: #a0a0a0;
}

/* Inverse: site light → element dark */
[data-theme="light"] [data-theme="inverse"] {
  --c-fg: #ffffff;
  --c-bg: #323435;

  /* --c-bg-dark-grey: #ffffff;
    --c-bg-light: #ffffff; */

  /* Текст и иконки */
  /* --c-fg: #323435;
  --c-fg-light: #ffffff;
  --c-fg-mute: #a0a5a8; */
  /* --c-fg-mute-light: #666666; */

  /* Фон */
  /* --c-bg-light: #ffffff;
  --c-bg: #f8fafb;
  --c-bg-dark: #ecf1f4;
  --c-bg-black: #1d1f20; */
}

:root {
  /* Стандартные коэффициенты прозрачности */
  --o-fg: 0.6;
  --o-disabled: 0.3;
  --o-bg: 0.7;
}

[data-theme="dark"] {
  --c-fg: #fff;
  --c-bg: #323435;
  --c-bg-dark: #323435;
}

/* Inverse: site dark → element light */
[data-theme="dark"] [data-theme="inverse"] {
  --c-fg: #0a0a0a;
  --c-fg-s: #fff;
  --c-fg-mute: #666666;
  --c-bg: #ffffff;
  --c-line: #f0f0f0;
  --c-surface: #f4f4f4;
  --c-scroll-thumb: #c9c9c9;
  --c-scroll-thumb-hover: #a0a0a0;
}

/* Любой элемент с data-theme получает фон и цвет */
[data-theme="light"],
[data-theme="dark"],
[data-theme="inverse"] {
  background-color: var(--c-bg-dark);
  color: var(--c-fg);
}

.main {
  background-color: var(--c-bg-dark);
}

::selection {
  background-color: var(--c-brand, #0a0a0a);
}

/* 2.3 СИСТЕМА РАЗМЕРОВ (1rem = 10px) */
:root {
  --m1: 1px;
  --m2: 0.2rem;
  --m4: 0.4rem;
  --m5: 0.5rem;
  --m6: 0.6rem;
  --m8: 0.8rem;
  --m10: 1rem;
  --m12: 1.2rem;
  --m14: 1.4rem;
  --m16: 1.6rem;
  --m20: 2rem;
  --m24: 2.4rem;
  --m32: 3.2rem;
  --m40: 4rem;
  --m120: 120rem;
  --m160: 16rem;
  --section-y-indent: 16rem;
  --radius: 4rem;
  --radius-s: 2rem;
}

@media screen and (max-width: 479px) {
  :root {
    --section-y-indent: 10rem;
    --radius: 3rem;
    --radius-s: 1.5rem;
  }
}
:root {
  --header-height: 7rem;
}

@media screen and (max-width: 479px) {
  :root {
    --header-height: 5rem;
  }
}

/* 2.4 АНИМАЦИИ */
:root {
  /* af — кривая ускорения */
  /* --af: cubic-bezier(0.32, 0.72, 0, 1); */
  /* --af: cubic-bezier(0.85, 0.01, 0.04, 1); */
  /* --af: cubic-bezier(0.58, 0, 0.43, 1); */
  /* --af: cubic-bezier(0.25, 1, 0.5, 1); */
  --af-modal: cubic-bezier(0.625, 0.05, 0, 1);
  --af: cubic-bezier(0.16, 1, 0.3, 1);

  /* ad — длительность переходов */
  --ad-fast: 300ms;
  --ad-medium: 600ms;
  --ad-slow: 700ms;
  --ad-super-slow: 2000ms;

  /* a — готовые пресеты */
  --a-marquee: 20s infinite linear;
}

/* 2.5 РАЗМЫТИЕ */
:root {
  --blur: 0.5rem;
  --b-blur: 0.5rem;
}

/* 2.6 ПАДДИНГИ СТРАНИЦЫ */
:root {
  --page-paddings: 2rem;
}
@media screen and (max-width: 479px) {
  :root {
    --page-paddings: 1.5rem;
  }
}

/* ===========================================================================
   3. TYPOGRAPHY — Типографика и шрифты
   Источник: typography.css (Inter Tight, self-hosted)
   =========================================================================== */

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

::selection {
  background-color: var(--c-fg);
  color: var(--c-bg);
}

/* --- */

.u-h1 {
  font-size: 5.5rem;
  line-height: 1.1;
  font-weight: 600;
}

.u-h1--main {
  font-size: clamp(2rem, 5.2vw, 5.5rem);
}

.u-h2 {
  font-size: 4.2rem;
  line-height: 1.2;
  font-weight: 600;
}

.u-h2--do {
  max-width: 54rem;
}

.u-h2--do-item {
  max-width: 38rem;
}

.u-h3 {
  font-size: 2.6rem;
  line-height: 1.2;
  font-weight: 600;
}

.u-h4 {
  font-size: 2.2rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.u-caption {
  font-size: 2.2rem;
  line-height: 1.2;
  font-weight: 400;
}

.u-caption--testimonial {
  margin-bottom: 6rem;
}

.u-text {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
}

.u-text--l {
  font-size: 2.2rem;
}

.u-text-muted {
  color: var(--c-fg);
  opacity: var(--o-fg);
}

.u-text-muted-light {
  color: var(--c-fg);
  opacity: var(--o-disabled);
}

.u-link {
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
  justify-self: baseline;
  letter-spacing: 0.01em;
  position: relative;
}

.u-link--regular {
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.4;
}

.u-link--s {
  font-size: 1.8rem;
}

.u-link--xs {
  font-size: 1.8rem;
}

.u-link--underline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 1.8rem;
}

.u-link--footer {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

@media screen and (max-width: 479px) {
  .u-h1 {
    font-size: 3.2rem;
    /* font-weight: 500; */
  }

  .u-h1--main {
    /* font-weight: 500; */
  }

  .u-h2 {
    font-size: 2.7rem;
  }

  .u-h3 {
    font-size: 2.1rem;
  }

  .u-h4 {
    font-size: 1.8rem;
  }

  .u-caption {
    font-size: 1.8rem;
  }

  .u-text {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .u-text--l {
    font-size: 1.8rem;
  }

  .u-link {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .u-link--s,
  .u-link--xs,
  .u-link--underline,
  .u-link--underline {
    font-size: 1.6rem;
  }
}

/* --- ТЕКСТОВЫЕ УТИЛИТЫ --- */
.u-text-left {
  text-align: left;
}
.u-text-center {
  text-align: center;
}
.u-text-right {
  text-align: right;
}

.u-text-strong {
  font-weight: 500;
}

/* .u-text-highlighted,
.u-text-highlighted span span {
  color: var(--c-brand, #0a0a0a) !important;
  font-weight: 600;
} */

.u-text-color-muted {
  color: var(--c-fg-mute);
}

.u-text-color-brand {
  color: var(--c-brand);
}

.u-text-color-inherit {
  color: inherit;
}

/* --- ТЕКСТОВЫЕ ТРОЕТОЧИЯ И БАЛАНС --- */
.u-text-clamp-1,
.u-text-clamp-2,
.u-text-clamp-3,
.u-text-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u-text-clamp-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.u-text-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.u-text-clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.u-text-clamp-4 {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.u-wrap-balance,
.u-wrap-balance span {
  text-wrap: balance;
}

.u-vertical-trim {
  display: flow-root;
}
.u-vertical-trim::before,
.u-vertical-trim::after {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + 0.4em);
}

/* ===========================================================================
   4. LAYOUT — Сетки, утилиты, видимость
   Источники: layout.css + styles.css (утилиты)
   =========================================================================== */

/* 4.0 БАЗОВЫЙ РАЗМЕР ШРИФТА
     62.5% = 10px → 1rem = 10px.
     Все размеры в проекте задаются в rem (число ÷ 10 = px).
     Медиа-запросы ниже переопределяют для VW-скейлинга. */
html {
  font-size: 62.5%;
}

/* 4.1 МЕТОД ЛИНЕЙНОГО СКЕЙЛИНГА (VW + REM) */
/* @media screen and (min-width: 1920px) {
    html {
      font-size: 0.521vw;
    }
  }
  @media screen and (min-width: 992px) and (max-width: 1919px) {
    html {
      font-size: 0.625vw;
    }
  }
  @media screen and (min-width: 480px) and (max-width: 991px) {
    html {
      font-size: 1.302vw;
    }
  }
  @media screen and (max-width: 479px) {
    html {
      font-size: 2.564vw;
    }
  } */

/* 4.2 ГЛОБАЛЬНЫЕ НАСТРОЙКИ СТРАНИЦЫ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  shape-rendering: geometricPrecision;
  font-variant-ligatures: common-ligatures;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "clig", "calt";
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  color: var(--c-fg);
  background: var(--c-bg-dark);
}

body {
  font-family:
    "Inter Tight",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 2.4rem;
  line-height: 1.4;
}

/* Для Taptop/Webflow */
.page {
  background-color: var(--c-bg, #ffffff);
}

/* --- РАЗМЕРЫ --- */
.u-full-size,
.u-full-size * {
  height: 100%;
  width: 100%;
}

.u-width-auto,
.u-width-auto * {
  height: 100%;
  width: auto;
}
.u-height-auto,
.u-height-auto * {
  height: auto;
  width: 100%;
}
.u-object-fit-cover {
  object-fit: cover;
}

.u-overflow-hidden {
  overflow: clip;
}

.u-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- ЭФФЕКТЫ --- */
.u-blur {
  -webkit-filter: blur(var(--blur, 0.5rem));
  filter: blur(var(--blur, 0.5rem));
}

.u-backdrop-blur {
  -webkit-backdrop-filter: blur(var(--b-blur, 0.5rem));
  backdrop-filter: blur(var(--b-blur, 0.5rem));
}

/* --- ПЕРЕХОДЫ --- */
.filter-tag-remove,
.filter-btn,
.filter-color-btn,
.u-transition-fast {
  transition: all var(--ad-fast, 400ms) var(--af);
}

.do-item,
.before-after-label,
.project-card__bg,
.project-list-link,
.project-list-link__line,
.link-line,
.mega-menu-content,
.qwz-option-box,
.scroll-lazy-card,
.reveal,
.tooltip,
.qwz-progress__bar,
.filter-drawer-inner,
.filter-drawer,
.filter-drawer-overlay,
.preloader-close-trigger,
.filter-drawer,
.filter-rating-btn,
.hover-img-list-gallery-img,
.hover-img-list-item-img,
.hover-img-list-item__arrow,
.quiz-btn,
.quiz-option__box,
.quiz-progress__bar,
.frm-textarea,
.temp-slide,
.frm-check-input::after,
.frm-check-input,
.droplist-radio::after,
.droplist-radio,
.frm-file,
.frm-radio-input::after,
.frm-radio-input,
.frm-input,
.frm-select,
.frm-select,
.accord-2l-child__trigger,
.accord-2l__trigger,
.toc-nav-link,
.accord-2l-child__content,
.interactive-map-item-dot,
.cursor-follower__media,
.custom-cursor__media,
.before-after-label,
.img-zones-indicator,
.tabs-video-tab,
.tabs-video-tab-num,
.nteractive-map-item__dot,
.interactive-map-point-tooltip,
.interactive-map-item,
.interactive-map-point,
.accord-2l__content,
.cursor-follower,
.ursor-follower__media,
.calculator-option,
.calculator-option__input,
.cookie-toggle-track,
.droplist__btn,
.droplist__input,
.droplist__checkbox,
.droplist__item,
.droplist-list,
.droplist-trigger-icon,
.droplist-trigger,
.scroll-top--fixed,
.swiper-pagination-bullet,
.banner__close,
.cookie-toggle-track::after,
.cookie-settings,
.cookie-btn,
.cookie,
.scroll-top,
.header-overlay,
.lnk,
.modal-close,
.modal-content,
.modal-bg,
.mega-menu-close,
.mega-menu-content,
.mega-menu-bg,
.swiper-btn,
.icon,
.accord-item__content,
.accord-item__icon,
.tabs-btn,
.accord-item__trigger,
::-webkit-scrollbar-thumb,
.nav-link,
.card,
.btn,
.header-submenu,
.header-submenu-link,
.header__menu-arrow,
.header-menu-link,
.header-hamburger-line,
.u-transition-medium {
  transition: all var(--ad-medium, 700ms) var(--af);
}

.header__nav,
[header-scroll-hide],
.header-submenu,
.u-transition-slow {
  transition: all var(--ad-slow, 800ms) var(--af-modal);
}

/* --- ВИДИМОСТЬ --- */
.u-hide {
  display: none !important;
}

@media screen and (min-width: 992px) {
  .u-tablet,
  .u-mobile,
  .u-tablet-mobile {
    display: none !important;
  }
}
@media screen and (min-width: 480px) and (max-width: 991px) {
  .u-laptop,
  .u-mobile,
  .u-laptop-mobile {
    display: none !important;
  }
}
@media screen and (max-width: 479px) {
  .u-laptop,
  .u-tablet,
  .u-laptop-tablet {
    display: none !important;
  }
}

/* --- ПАДДИНГИ СТРАНИЦЫ --- */
.u-page-paddings {
  width: 100%;
  padding-inline: var(--page-paddings, 2rem);
}

.u-scroll-margin-top {
  scroll-margin-top: calc(var(--header-height, 6rem) + var(--m20, 2rem));
}

/* Слой-фон — абсолютное позиционирование на всю область родителя */
.u-layer-background,
.u-layer-background img,
.u-layer-background video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* z-index: 0; */
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}

/* --- Анмиаиция по скроллу --- */
.u-scroll-anim-screen {
  position: sticky;
  top: 0;
  overflow-x: clip;
  width: 100%;
  height: 100dvh;
}

.u-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* --- БЛОКИРОВКА СКРОЛЛА --- */
.u-no-scroll {
  overflow: hidden;
  touch-action: none;
  -webkit-overflow-scrolling: none;
}

/* --- СКРОЛЛБАР --- */
/* Добавляется класс .u-no-scrollbar к контейнеру, чтобы скрыть скроллбар, но сохранить прокрутку. */
.u-no-scrollbar {
  scrollbar-width: none;
}
.u-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   СТИЛИ ДЛЯ WEBKIT-БРАУЗЕРОВ (Chrome, Safari, Edge, Opera)
   ============================================================ */

/*
   Псевдоэлементы с префиксом -webkit позволяют детально 
   контролировать внешний вид скроллбара в браузерах на движке WebKit/Blink.
   Список основных псевдоэлементов:
   - ::-webkit-scrollbar             — весь скроллбар
   - ::-webkit-scrollbar-track       — дорожка (трек)
   - ::-webkit-scrollbar-thumb       — ползунок (бегунок)
   - ::-webkit-scrollbar-button      — кнопки вверх/вниз (редко используется)
   - ::-webkit-scrollbar-corner      — уголок при наличии двух скроллбаров
   - ::-webkit-scrollbar-track-piece — часть трека, не занятая ползунком
*/

/* Основные размеры скроллбара */
::-webkit-scrollbar {
  width: 10px; /* Ширина для вертикального скроллбара */
  height: 3px; /* Высота для горизонтального скроллбара */
}

/* Дорожка (трек) — фон, по которому движется ползунок */
::-webkit-scrollbar-track {
  /* Цвет фона дорожки */
  /* background: var(--c-bg, #ffffff); */
  background: transparent;
  /* Скругление углов дорожки */
  /* border-radius: var(--m1, 0.1rem); */
  /* Лёгкая тень внутри */
  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); */
}

/* Ползунок (бегунок) — основная часть, которую тянет пользователь */
::-webkit-scrollbar-thumb {
  background: var(--c-scroll-thumb, #c9c9c9); /* Основной цвет ползунка */
  /* Скругление углов ползунка */
  border-radius: var(--m1, 1px);
  /* Отступ от краёв трека (создаёт "воздух") */
  /* border: 2px solid #e9ecef; */
  /* Плавная смена цвета при наведении */
  /* transition: background 0.2s ease; */
}

/* Ползунок при наведении мыши */
::-webkit-scrollbar-thumb:hover {
  background: var(--c-scroll-thumb-hover, #a0a0a0); /* Более тёмный цвет при наведении */
  cursor: pointer; /* Указатель, чтобы показать интерактивность */
}

/* Ползунок в активном состоянии (зажат) */
::-webkit-scrollbar-thumb:active {
  /* Самый тёмный цвет при зажатии */
  /* background: #212529; */
}

/* Уголок (место пересечения вертикального и горизонтального скроллбаров) */
::-webkit-scrollbar-corner {
  /* Цвет уголка, чтобы он не выделялся */
  /* background: #e9ecef; */
}

/* Кнопки скроллбара (стрелки вверх/вниз) — скрываем, т.к. они редко нужны */
::-webkit-scrollbar-button {
  display: none; /* Полностью скрываем кнопки */
  /* 
       Альтернативно можно задать размеры и стили:
       height: 10px;
       background: #dee2e6;
    */
}

/* ============================================================
   3. СТИЛИ ДЛЯ FIREFOX
   ============================================================ */

/*
   В Firefox нет такого детального контроля, как в WebKit.
   Используются стандартные свойства scrollbar-width и scrollbar-color.
   Важно: эти свойства применяются к самому элементу, а не к псевдоэлементам.
*/

/* 3.1. Основные стили для Firefox */
.custom-scroll-container {
  /*
       scrollbar-width: 
         - auto   — стандартная ширина (зависит от ОС)
         - thin   — узкий скроллбар
         - none   — скрыть скроллбар (но прокрутка остаётся)
    */
  scrollbar-width: thin;

  /*
       scrollbar-color: 
         - первое значение — цвет ползунка (thumb)
         - второе значение — цвет дорожки (track)
    */
  scrollbar-color: #6c757d #e9ecef;
}

/* 
   Дополнительно: в Firefox можно использовать @-moz-document,
   чтобы применить стили только для этого браузера, если нужно.
   Но в данном случае это избыточно, т.к. свойства уже работают.
*/
@-moz-document url-prefix() {
  .custom-scroll-container {
    /* Можно переопределить стили специально для Firefox */
    scrollbar-width: thin;
    scrollbar-color: #6c757d #e9ecef;
  }
}

/* --- КОНТЕЙНЕР --- */
.u-page-container {
  max-width: 1140px;
  margin: 0 auto;
  z-index: 1;
}

.u-page-container--tight {
  max-width: 760px;
}

/* --- СЕТКИ --- */
.u-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.u-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.u-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* @media screen and (max-width: 991px) {
  .u-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .u-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
} */

@media screen and (max-width: 991px) {
  .u-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .u-grid-2 {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 479px) {
  .u-grid-4 {
    grid-template-columns: 1fr;
  }
}