/* ===== RESET & BASE STYLES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

/* ===== CUSTOM SCROLLBAR (только десктоп) ===== */
@media (min-width: 769px) {
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(247, 230, 200, 0.3);
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--c-caramel) 0%, var(--c-accent) 100%);
    border-radius: 10px;
    border: 2px solid rgba(247, 230, 200, 0.3);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--c-accent) 0%, #7a3d1c 100%);
  }
}

/* На мобильных — скрываем кастомный скроллбар */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 0;
    display: none;
  }
  html {
    scrollbar-width: none;
  }
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--c-caramel) rgba(247, 230, 200, 0.3);
  /* Блокируем overscroll bounce — причина дёрганья фона на мобилках */
  overscroll-behavior: none;
  /* Блокируем горизонтальный скролл от 100vw-элементов */
  overflow-x: hidden;
}

.page {

  background:
    radial-gradient(circle at 28% 22%,
      rgba(255, 244, 224, .95) 0%,
      rgba(255, 244, 224, .55) 35%,
      rgba(255, 244, 224, 0) 65%),
    linear-gradient(135deg,
      #f7e6c8 0%,
      #eacb95 38%,
      var(--c-caramel) 70%,
      var(--c-accent) 100%);
  background-attachment: fixed;
  /* чтобы фон “держался” при скролле */

}

:root {
  --header-h: 90px;
  /* высота шапки */
  --section-min: 720px;
  /* минимум “дорогого” кадра */
  --section-max: 980px;
  /* максимум, чтобы не растягивать пустоту */
  --section-pad-y: clamp(48px, 6vh, 92px);
  --social-block-height: 110px;
}

/* базовая секция для всех экранов ниже hero */
.section{
  min-height: auto;
  padding-block: var(--section-pad-y);
}

/* HERO — без вертикальных паддингов */
.section--hero {
  padding-block: 0;
  min-height: 100svh;
  min-height: var(--app-height, 100svh);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

body {
  position: relative;
  isolation: isolate;
  /* safe-area для in-app браузеров (Telegram) и устройств с чёлкой */
  padding-top: env(safe-area-inset-top);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  opacity: 0.10;
  mix-blend-mode: soft-light;

  background-image:
    repeating-linear-gradient(135deg,
      rgba(var(--c-white-rgb), 0.08) 0,
      rgba(var(--c-white-rgb), 0.08) 2px,
      rgba(var(--c-black-rgb), 0.06) 2px,
      rgba(var(--c-black-rgb), 0.06) 6px);
}


/* ===== CONTAINER ===== */
/* Это наш утилитарный класс для ограничения ширины */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}