/* =============================================================
   Палитра DarScoop — генерируется из src/data/palette.json
   Источник: Цвета сняты с логотипа DarScoop (образец предоставлен заказчиком). Сам логотип в макет пока не добавлен — используются только его базовые цвета.
   Руками не правим: измените JSON и пересоберите проект.
   ============================================================= */
:root {
  --brand-100: #FDE2EA;
  --brand-200: #FAC6D6;
  --brand-300: #F29CB6;
  --brand-400: #EA6A90;
  --brand-500: #E03868;
  --brand-600: #C22A57;
  --brand-700: #931340;
  --rose: #D84870;
  --cream-50: #FFFBF7;
  --cream-100: #FDF0DC;
  --cream-150: #FAE3C7;
  --cream-200: #FBDACB;
  --cream-300: #F3C6B2;
  --gold-100: #FFF3CE;
  --gold-300: #FFE58A;
  --gold-400: #FDD24A;
  --gold-500: #FFC70A;
  --gold-600: #E0A500;
  --gold-700: #96690A;
  --lilac-100: #F5E7F1;
  --lilac-200: #E8CFE1;
  --lilac-300: #D0A0C0;
  --lilac-500: #B0739C;
  --lilac-700: #7A4666;
  --ink: #46262F;
  --ink-2: #6B4650;
  --ink-3: #87616C;
  --line: #F7E0D3;
  --line-2: #EFC9B6;
  --mint: #E1F2E4;
  --mint-ink: #2F7043;
}

/* ============================================================
   Точка входа стилей. Порядок импортов важен.
   Сборщик (scripts/build.mjs) разворачивает @import в один файл.
   ============================================================ */

/* ↓ fonts.css */
/* Сгенерировано scripts/prepare-fonts.py — свои шрифты вместо Google Fonts.
   Подмножества: кириллица и латиница. Обновить: python3 scripts/prepare-fonts.py */

@font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/comfortaa-cyrillic-400.woff2?v=78y427") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

@font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/comfortaa-latin-400.woff2?v=78y427") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/comfortaa-cyrillic-500.woff2?v=78y427") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

@font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/comfortaa-latin-500.woff2?v=78y427") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/comfortaa-cyrillic-600.woff2?v=78y427") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

@font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/comfortaa-latin-600.woff2?v=78y427") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/comfortaa-cyrillic-700.woff2?v=78y427") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

@font-face {
    font-family: "Comfortaa";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/comfortaa-latin-700.woff2?v=78y427") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/fredoka-latin-600.woff2?v=78y427") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/fredoka-latin-700.woff2?v=78y427") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face {
    font-family: "M PLUS Rounded 1c";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/m-plus-rounded-1c-cyrillic-700.woff2?v=78y427") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

@font-face {
    font-family: "M PLUS Rounded 1c";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/m-plus-rounded-1c-latin-700.woff2?v=78y427") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* ↓ tokens.css */
/* ============================================================
   Дизайн-токены DarScoop.

   Сами цвета приходят из src/data/palette.json и подставляются
   сборщиком в начало styles/main.css (см. scripts/build.mjs).
   Здесь — только смысловые роли, геометрия и типографика.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Роли палитры --- */
  --brand: var(--brand-500);
  --brand-strong: var(--brand-600);
  --brand-ink: var(--brand-700);

  /* Ошибка живёт в брендовом малиновом, чтобы не спорить с палитрой */
  --rose: var(--brand-100);
  --rose-ink: var(--brand-700);
  --peach: #ffd9c4; /* производный тёплый тон для пятен и сцены */

  /* --- Градиенты --- */
  /* фон страницы — узор из бусинок, поэтому герой без собственной заливки */
  --grad-page: none;
  --grad-sun: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 55%, var(--gold-500) 100%);
  /* белый текст на градиенте: brand-600 даёт 5,86:1 — норма AA для обычного кегля */
  --grad-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  --grad-card: linear-gradient(180deg, #ffffff 0%, var(--cream-50) 100%);

  /* --- Тени: тёплые, с малиновым подтоном --- */
  --sh-xs: 0 1px 2px rgba(120, 60, 70, 0.06);
  --sh-sm: 0 4px 14px rgba(120, 60, 70, 0.08);
  --sh-md: 0 12px 30px rgba(120, 60, 70, 0.1);
  --sh-lg: 0 24px 60px rgba(120, 60, 70, 0.14);
  --sh-focus: 0 0 0 4px rgba(224, 53, 106, 0.25);

  /* --- Радиусы --- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  /* --- Типографика --- */
  /* Заголовки — Fredoka Bold. Кириллицы у Fredoka нет, поэтому сразу за ней
     стоит M PLUS Rounded 1c: браузер подставит её только на русские буквы. */
  --font-display: "Fredoka", "M PLUS Rounded 1c", "Comfortaa", system-ui, sans-serif;
  /* Подзаголовки и текст — Comfortaa (Medium для подзаголовков). */
  --font-sans: "Comfortaa", "M PLUS Rounded 1c", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-2xl: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem);
  --fs-3xl: clamp(2.3rem, 1.3rem + 4.4vw, 4rem);

  /* --- Сетка и ритм --- */
  --w-max: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --gap: clamp(16px, 2.4vw, 28px);
  --section-y: clamp(56px, 8vw, 110px);
  --header-h: 82px;

  /* --- Движение --- */
  --ease: cubic-bezier(0.22, 0.72, 0.28, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* --- Матовое стекло ---
     Карточка — полупрозрачная молочная подложка, сквозь которую виден узор
     страницы. Размытие (backdrop-filter) сознательно не используется: он
     захватывает фон в своём слое, а слой узора лежит отдельно (z-index: -1),
     поэтому вместо размытия узор просто исчезает и карточка становится белой
     плашкой. Узор на сайте сам по себе мягкий, так что сквозь подложку он
     читается как матовое стекло. */
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 252, 248, 0.3));

  /* --- Курсоры ---
     Розовая стрелка со звёздочкой и рука с цветком (набор Pink Cutecore).
     Числа после url() — точка попадания: у стрелки кончик, у руки середина
     кончика пальца. Их считает scripts/prepare-cursors.py и сверяет с этим
     файлом, так что при замене исходника он подскажет новые координаты. */
  --cursor-arrow: url("../assets/cursors/arrow.png?v=78y427") 4 0, auto;
  --cursor-hand: url("../assets/cursors/hand.png?v=78y427") 10 0, pointer;
}

/* Телефон в ландшафте и низкие окна: уменьшаем вертикальный ритм */
@media (max-height: 560px) {
  :root {
    --section-y: clamp(30px, 6vh, 56px);
    --header-h: 68px;
  }
}

/* ↓ base.css */
/* ============================================================
   База: сброс, типографика, служебные классы
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Один отступ на все переходы по якорям. Раньше такой же отступ был ещё и
     на самих секциях (scroll-margin-top) — при переходе они складывались,
     блок оказывался на 198px ниже верха, и подсветка меню не успевала за ним. */
  scroll-padding-top: calc(var(--header-h) + 18px);
}

/* --- Курсоры --- */

/* Розовая стрелка вместо системной. На тач-экранах курсора нет, и правило там
   ни на что не влияет, поэтому медиазапрос (pointer: fine) не нужен: часть
   браузеров и headless-режимов отдаёт pointer: none — тогда стрелка пропала бы,
   а нарисованный «палец» на кнопках остался, и получилась бы смесь. */
html {
  cursor: var(--cursor-arrow);
}

/* Подписи полей: браузер рисует на них системный курсор, поэтому возвращаем
   общий нарисованный. Кликабельные подписи-обёртки (.option, .chip) ниже
   переопределяют его на руку — они выглядят как элементы управления. */
label {
  cursor: var(--cursor-arrow);
}

/* Ссылки, кнопки и прочие нажимаемые вещи — нарисованная рука. Браузер сам
   ставит системный «палец» на ссылки, и унаследованное значение его не
   перебивает, поэтому перечисляем явно. Выключенные кнопки исключены: у них
   системный not-allowed, он честно говорит «сюда нельзя».

   Ссылки-заглушки (соцсети и юр. документы, у которых адрес ещё не прислан)
   входят сюда же: выглядят они как кнопки и ссылки, а системная стрелка рядом
   с нарисованным курсором выглядит чужой. Что ссылка не работает, сообщают
   aria-disabled и подсказка при наведении. */
a[href],
button:not(:disabled),
summary,
select,
[role="button"] {
  cursor: var(--cursor-hand);
}

/* Текстовые поля оставляем с обычной «палочкой»: по ней видно, куда печатать,
   и она не мешает выделять текст. */
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea {
  cursor: text;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  padding-top: var(--header-h);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
  /* clip, а не hidden: hidden превращает body в скролл-контейнер и ломает sticky-шапку */
  overflow-x: clip;
}

h1,
h2 {
  /* Заголовки: Fredoka Bold */
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h3,
h4 {
  /* Подзаголовки: Comfortaa Medium */
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 0 0 0.5em;
}

h1 {
  font-size: var(--fs-3xl);
}
h2 {
  font-size: var(--fs-2xl);
}
h3 {
  font-size: var(--fs-lg);
}

p {
  margin: 0 0 1em;
}

p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

a {
  color: var(--brand-ink);
  text-decoration-color: rgba(181, 124, 18, 0.35);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}

/* кнопки-ссылки красятся своими правилами, а не общим цветом ссылок */
a:not(.btn):hover {
  color: var(--brand-strong);
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.15em;
}

li + li {
  margin-top: 0.35em;
}

strong {
  font-weight: 700;
}

/* Атрибут hidden должен побеждать авторский display (иначе .catch остаётся видимым) */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-xs);
}

::selection {
  background: var(--brand-200);
  color: var(--ink);
}

/* --- Служебное --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--white);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Бесконечный фон из бусинок и ложек ---
   Слой лежит под контентом (z-index: -1) и растянут на всю высоту страницы,
   поэтому узор прокручивается вместе с контентом и повторяется без конца. */
/* Контейнер фона: обрезает запас слоя, чтобы он не удлинял страницу.
   overflow: clip не создаёт прокрутку и не мешает position: sticky. */
.bead-bg-layer {
  position: absolute;
  top: calc(-1 * var(--header-h));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  overflow: clip;
}

.bead-bg {
  position: absolute;
  /* Слой уезжает на плитку (400px) влево и вверх, поэтому справа и снизу
     нужен запас: слой должен оставаться больше видимой области на всём ходу. */
  top: -400px;
  right: -440px;
  bottom: -800px;
  left: -400px;
  pointer-events: none;
  background-color: var(--cream-50);
  background-image: url("../assets/bg-beads.svg?v=78y427");
  background-repeat: repeat;
  background-size: 400px 400px;
  /* тише, чтобы узор не спорил с текстом */
  opacity: 0.8;
  /* собственный слой: перерисовка страницы (наведение на строки таблиц,
     раскрытие блоков) больше не задевает фон и он не мигает */
  will-change: transform;
  backface-visibility: hidden;
  /* движение плавное: кадры считает композитор, а не перерисовка фона */
  animation: bead-drift 900s linear infinite;
}

/* Второй слой фона — иконки бренда: плывут медленнее бусинок,
   получается лёгкая глубина. Он живёт внутри слоя бусинок, поэтому его
   перерисовка тоже не выходит наружу. */
.bead-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/bg-icons.png?v=78y427");
  background-repeat: repeat;
  background-size: 1500px 1500px;
  opacity: 0.75;
  animation: bead-drift-icons 2400s steps(6000) infinite;
}

/* --- Тематическая полоса прокрутки ---
   Бегунок — малиновая «бусинка» с блеском на кремовом жёлобе.
   Firefox умеет только цвета (scrollbar-color), WebKit/Blink — полный набор. */
html {
  scrollbar-color: var(--brand) var(--cream-150);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 14px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(255, 233, 220, 0.9), rgba(255, 244, 236, 0.9));
}

::-webkit-scrollbar-thumb {
  /* рамка «сжимает» бегунок внутри жёлоба и даёт аккуратный отступ */
  border: 3px solid transparent;
  border-radius: var(--r-full);
  background-image: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 62%),
    var(--grad-brand);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

::-webkit-scrollbar-thumb:hover {
  background-image: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, var(--brand-600), var(--brand-700));
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  /* --brand-800 в палитре нет: градиент молча не применялся */
  background-image: linear-gradient(135deg, var(--brand-700), var(--brand-700));
  background-image: linear-gradient(
    135deg,
    var(--brand-700),
    color-mix(in srgb, var(--brand-700) 78%, #000)
  );
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Внутренние прокрутки (таблицы) — тот же стиль, но тоньше */
.table-wrap::-webkit-scrollbar {
  height: 10px;
}

/* --- Иконки ---
   Спрайт с символами лежит в разметке (partials/icons.svg.html),
   сами иконки монохромные: цвет берётся из currentColor. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

.icon--sm {
  width: 1em;
  height: 1em;
}

.icon--lg {
  width: 1.75em;
  height: 1.75em;
}

.muted {
  color: var(--ink-2);
}
.small {
  font-size: var(--fs-sm);
}
.tiny {
  font-size: var(--fs-xs);
}
.center {
  text-align: center;
}
.nowrap {
  white-space: nowrap;
}
.hidden {
  display: none !important;
}

.accent-text {
  color: var(--brand-ink);
}

.mark {
  background: linear-gradient(180deg, transparent 58%, var(--gold-300) 58%);
  border-radius: 4px;
  padding: 0 2px;
}

/* --- Типографские блоки --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-500);
}

.lead {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  color: var(--ink-2);
  max-width: 62ch;
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Вариант для длинных вопросов-заголовков: блок шире, а подводка
   по-прежнему ограничена 62ch — строка не растягивается */
.section-head--wide {
  max-width: min(100%, 880px);
}

.section-head--center .lead {
  margin-inline: auto;
}

.section-head--center .eyebrow::before {
  display: none;
}

/* --- Полосы-разделители --- */
.hr-soft {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  margin: clamp(24px, 4vw, 44px) 0;
}

/* ↓ layout.css */
/* ============================================================
   Раскладка: контейнер, сетки, секции, шапка, подвал
   ============================================================ */

.container {
  width: min(var(--w-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.container--narrow {
  width: min(880px, 100% - var(--gutter) * 2);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(36px, 5vw, 64px);
}

/* Секции не заливаются цветом: фон страницы — узор из бусинок,
   а ритм задают волосяные линии между блоками. */
.section--cream,
.section--white {
  background: none;
}

.section--cream::before,
.section--white::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--line);
  opacity: 0.7;
}

.section--sun {
  background: var(--grad-brand);
  color: var(--ink);
}

/* --- Сетки --- */
.grid {
  display: grid;
  gap: var(--gap);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.grid--sidebar {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.85fr);
  align-items: start;
}

@media (max-width: 900px) {
  .grid--sidebar {
    grid-template-columns: 1fr;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.row--between {
  justify-content: space-between;
}

.row--center {
  justify-content: center;
}

/* ============================================================
   Шапка
   ============================================================ */

.header {
  /* fixed, а не sticky: на мобильном Chrome sticky-шапка с backdrop-filter
     отстаёт от скролла и выглядит обрезанной */
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(255, 253, 246, 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

@media (max-width: 860px) {
  /* без блюра на телефонах — он и давал «уезжающую» шапку */
  .header {
    backdrop-filter: none;
    background: rgba(255, 253, 246, 0.97);
  }
}

.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--header-h);
}

.header__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.header__logo img,
.header__logo svg {
  height: 52px;
  width: auto;
  flex: none;
}

@media (max-width: 520px) {
  .header__logo img,
  .header__logo svg {
    height: 44px;
  }
}

/* Низкие окна: шапка сжимается до 68px, логотип — вместе с ней */
@media (max-height: 560px) {
  .header__logo img,
  .header__logo svg {
    height: 44px;
  }
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.header__link {
  padding: 9px 12px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.header__link:hover {
  background: var(--cream-150);
  color: var(--ink);
}

.header__link.is-active {
  background: var(--brand-100);
  color: var(--brand-ink);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.header__nav + .header__actions {
  margin-inline-start: 0;
}

/* CTA внутри меню нужен только на мобильных */
.header__nav .btn {
  display: none;
}

/* Связь с покупателем — только в мессенджерах, телефона в шапке нет */
.header__socials {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Дубль в мобильном меню: на десктопе иконки уже есть справа */
.header__socials--menu {
  display: none;
}

.header__socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--brand-500);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.header__socials a:hover {
  border-color: var(--brand-300);
  background: var(--brand-100);
  transform: translateY(-1px);
}

.header__socials .icon {
  width: 19px;
  height: 19px;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--white);
  cursor: var(--cursor-hand);
}

.burger span,
.burger span::before,
.burger span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}

.burger span::before {
  transform: translateY(-6px);
}
.burger span::after {
  transform: translateY(4px);
}

.burger[aria-expanded="true"] span {
  background: transparent;
}
.burger[aria-expanded="true"] span::before {
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] span::after {
  transform: rotate(-45deg) translateY(-2px);
}

@media (max-width: 1120px) {
  .header__socials {
    display: none;
  }
}

@media (max-width: 860px) {
  .burger {
    display: inline-flex;
    margin-inline-start: auto;
  }

  .header__nav {
    position: absolute;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px var(--gutter) 20px;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: var(--cream-50);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
  }

  .header__nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .header__actions {
    display: none;
  }

  .header__nav .btn {
    display: inline-flex;
    margin-top: 10px;
    justify-content: center;
  }

  .header__socials--menu {
    display: inline-flex;
    justify-content: center;
    margin-top: 12px;
  }
}

/* ============================================================
   Подвал
   ============================================================ */

.footer {
  margin-top: clamp(40px, 6vw, 80px);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: 32px;
  background: none;
  border-top: 1px solid var(--line);
}

/* В подвале логотип чуть компактнее, чем в шапке */
.footer__brand .header__logo {
  font-size: 1.25rem;
  gap: 11px;
}

/* Логотип в подвале: задаём только высоту, ширину считает пропорция.
   Раньше здесь стояли width+height от квадратной заглушки — из-за них
   настоящий логотип сжимался в квадрат. */
.footer__brand .header__logo img {
  height: 46px;
  width: auto;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
}

.footer__brand p {
  max-width: 34ch;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* Заголовки колонок — подписи, а не ссылки: капс, разрядка и приглушённый цвет.
   Раньше они совпадали по размеру и почти по цвету со ссылками, и разницу было
   видно только при наведении. */
.footer h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.footer__list a {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.footer__list a:hover {
  color: var(--brand-ink);
  text-decoration: underline;
}

.footer__bottom {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.footer__socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
}

.footer__social:hover {
  border-color: var(--brand-300);
  background: var(--cream-100);
}

.footer__social .icon {
  width: 15px;
  height: 15px;
  color: var(--brand-500);
}

.footer__social:hover .icon {
  color: var(--ink);
}

/* ↓ components.css */
/* ============================================================
   Компоненты: кнопки, карточки, чипы, поля, таблицы, аккордеон
   ============================================================ */

/* --- Кнопки --- */
.btn {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: var(--cursor-hand);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
    background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  /* цвет текста кнопки не должен перебиваться общим правилом `a:hover` */
  color: var(--btn-fg);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  --btn-bg: var(--grad-brand);
  --btn-fg: #ffffff;
  --btn-bd: transparent;
  background: var(--grad-brand);
  box-shadow: 0 10px 24px rgba(194, 28, 82, 0.24);
}

.btn--primary:hover {
  box-shadow: 0 16px 34px rgba(194, 28, 82, 0.32);
}

.btn--soft {
  --btn-bg: var(--cream-200);
  --btn-bd: transparent;
}

.btn--soft:hover {
  --btn-bg: var(--gold-400);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bd: var(--line-2);
}

.btn--ghost:hover {
  --btn-bg: var(--cream-100);
}

.btn--lg {
  padding: 16px 30px;
  font-size: var(--fs-md);
}

.btn--sm {
  padding: 9px 16px;
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

/* Иконки-картинки на залитых кнопках делаем белыми: цветной рисунок
   (например, ложка) на малиновом фоне теряет контур. brightness(0) заливает
   силуэт чёрным, invert(1) переворачивает его в белый, прозрачность PNG
   сохраняется. */
.btn--primary img.btn__icon,
.btn--primary svg.btn__icon {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.btn__icon {
  display: inline-grid;
  place-items: center;
  font-size: 1.1em;
  line-height: 1;
}

/* --- Бейджи и пилюли --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: var(--brand-100);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.badge--sun {
  background: var(--grad-sun);
  color: #5a3a06;
}

.badge--mint {
  background: var(--mint);
  color: var(--mint-ink);
}

.badge--rose {
  background: var(--rose);
  color: var(--rose-ink);
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}

.badge--soon {
  background: var(--cream-100);
  color: var(--ink-3);
}

/* --- Карточки --- */
.card {
  position: relative;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}

.card--flat {
  box-shadow: none;
}

.card--sun {
  background: var(--grad-sun);
  border-color: transparent;
}

.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: 8px;
}

.card__emoji {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--cream-150);
  font-size: 1.6rem;
  line-height: 1;
}

.card__list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
}

.card__list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0;
}

.card__list li::before {
  content: "•";
  color: var(--gold-500);
  font-weight: 700;
  line-height: 1.4;
}

/* --- Секция-заглушка данных --- */
.note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--cream-100);
  border: 1px dashed var(--line-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.note__icon {
  font-size: 1.15rem;
  line-height: 1.3;
}

.note strong {
  color: var(--ink);
}

/* --- Чипы (цвета, фильтры) --- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  cursor: var(--cursor-hand);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.chip:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(70, 55, 20, 0.12);
  flex: none;
  box-shadow: inset 0 -2px 4px rgba(70, 55, 20, 0.12);
}

.chip:has(input:checked) {
  background: var(--cream-150);
  border-color: var(--brand-500);
  color: var(--ink);
  box-shadow: var(--sh-xs);
}

.chip:has(input:checked)::after {
  content: "✓";
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-ink);
}

.chip:has(input:focus-visible) {
  box-shadow: var(--sh-focus);
}

.chip--filter {
  padding: 9px 16px;
  border-radius: var(--r-full);
}

.chip--filter:has(input:checked)::after {
  content: none;
}

.chip:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Поля формы --- */
.field {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

/* Подсказка и счётчик символов в одной строке: подсказка слева, счётчик справа */
.field__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.field__count {
  flex: none;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.field__count.is-warn {
  color: var(--brand-ink);
  font-weight: 700;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--fs-sm);
  /* введённое значение заметнее подсказки: сам текст жирный, placeholder — обычный */
  font-weight: 700;
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.input::placeholder,
/* Поле комментария тянется под текст само: ручной ресайз отключён, высота
   считается скриптом. Стартовая высота — на весь лимит (500 символов) плюс
   пустая строка под ним; сверх этого поле прокручивается. */
/* Селектор из двух классов: ниже в файле есть второй .textarea с min-height
   и resize: vertical, и одного класса не хватило бы. */
.textarea.textarea--auto {
  resize: none;
  min-height: 15.5em;
  max-height: 60vh;
  overflow-y: auto;
}

.textarea::placeholder {
  font-weight: 400;
  color: var(--ink-3);
  opacity: 0.75;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--sh-focus);
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

.input--invalid {
  border-color: var(--rose-ink);
  background: #fff8f9;
}

.field__error {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--rose-ink);
  min-height: 1em;
}

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: var(--cursor-hand);
  margin-bottom: 12px;
}

.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brand-500);
}

/* --- Радио-карточки (выбор типа бокса, доставки, ложек) --- */
.option {
  position: relative;
  display: block;
  cursor: var(--cursor-hand);
}

.option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.option__body {
  position: relative; /* галочка позиционируется от карточки, а не от .option:
                         тогда при наведении она едет вместе с ней */
  display: flex;
  gap: 14px;
  align-items: flex-start;
  height: 100%;
  /* справа оставляем место под галочку в углу, иначе она накрывает цену */
  padding: 16px 44px 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}

.option:hover .option__body {
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

.option input:focus-visible + .option__body {
  box-shadow: var(--sh-focus);
}

.option input:checked + .option__body {
  border-color: var(--brand-500);
  background: linear-gradient(180deg, var(--cream-100), var(--white));
  box-shadow: var(--sh-sm);
}

/* Галочка нарисована SVG-иконкой, а не текстовым символом: у «✓» свои метрики,
   из-за них он мелкий и сидит не по центру кружка. Иконка центрируется
   геометрически и масштабируется независимо от шрифта. */
.option input:checked + .option__body::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 11px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"),
    var(--grad-brand);
  background-size: 14px 14px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
}

.option__emoji {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--cream-150);
  font-size: 1.35rem;
  line-height: 1;
}

.option__title {
  display: block;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink);
}

.option__text {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.5;
}

.option__content {
  flex: 1;
  min-width: 0;
}

.option__price {
  flex: none;
  margin-top: 6px;
  margin-left: auto;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-ink);
}

/* --- Шаги-нумерация --- */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.step {
  counter-increment: step;
  position: relative;
  padding: 26px 22px 22px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--grad-sun);
  font-family: var(--font-display);
  font-weight: 700;
  color: #4a3708;
  box-shadow: var(--sh-xs);
}

.step__icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

/* --- Таблицы --- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-sm);
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: var(--fs-sm);
}

.table caption {
  text-align: left;
  padding: 18px 20px 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.table th,
.table td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table thead th {
  background: var(--cream-100);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ink);
  border-bottom-color: var(--line-2);
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: var(--cream-50);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink);
}

.table__accent td {
  background: linear-gradient(90deg, var(--cream-150), var(--white));
}

/* --- Аккордеон --- */
.accordion {
  display: grid;
  gap: 12px;
}

.acc {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease);
}

.acc[open] {
  border-color: var(--brand-200);
  box-shadow: var(--sh-sm);
}

.acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  cursor: var(--cursor-hand);
  list-style: none;
}

.acc__q::-webkit-details-marker {
  display: none;
}

/* Плюс рисуем двумя градиентными полосками, а не текстовым глифом: у глифа
   свои метрики, из-за них знак сидит не по центру кружка, а при повороте
   плашки смещённый глиф уезжает в сторону. Градиенты центрированы
   геометрически, поэтому поворот на 45° даёт ровный крестик на том же месте. */
.acc__q::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--cream-150);
  background-image: linear-gradient(var(--brand-ink), var(--brand-ink)),
    linear-gradient(var(--brand-ink), var(--brand-ink));
  background-size: 12px 2px, 2px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}

.acc[open] .acc__q::after {
  transform: rotate(45deg);
  background-color: var(--brand-200);
}

.acc__a {
  padding: 0 20px 20px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* --- Степпер (число перемешиваний) --- */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: var(--white);
}

/* --- Прогресс оформления --- */
.progress {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 clamp(22px, 3vw, 34px);
  list-style: none;
}

.progress__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 16px 9px 10px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-3);
  transition: all var(--t-base) var(--ease);
}

.progress__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream-100);
  font-size: var(--fs-xs);
}

.progress__item.is-active {
  border-color: var(--brand-500);
  background: var(--cream-150);
  color: var(--ink);
  box-shadow: var(--sh-xs);
}

.progress__item.is-active .progress__num {
  background: var(--grad-brand);
  color: #ffffff;
}

.progress__item.is-done {
  color: var(--mint-ink);
  border-color: var(--mint);
  background: var(--mint);
}

.progress__item.is-done .progress__num {
  background: var(--white);
  color: var(--mint-ink);
}

/* --- Шаги мастера --- */
.wizard-step {
  display: none;
  animation: fade-up var(--t-slow) var(--ease) both;
}

.wizard-step.is-active {
  display: block;
}

/* --- Итоговая панель --- */
.summary {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--cream-150), var(--cream-100));
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-sm);
}

.summary__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin-bottom: 4px;
}

.summary__rows {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  font-size: var(--fs-sm);
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}

.summary__row dt {
  color: var(--ink-2);
}

.summary__row dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
}

.summary__delim {
  height: 1px;
  background: var(--line-2);
  border: 0;
  margin: 4px 0;
}

.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
}

.summary__total span:last-child {
  font-size: 1.4em;
  color: var(--brand-ink);
}

.toast {
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-sm);
  animation: fade-up var(--t-base) var(--ease) both;
}

.toast--ok {
  border-color: var(--brand-300);
  background: linear-gradient(180deg, var(--cream-50), var(--cream-150));
}

/* --- Модальное окно --- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(70, 55, 20, 0.32);
  backdrop-filter: blur(4px);
  animation: fade var(--t-base) var(--ease) both;
}

/* --- Разное --- */
.stat {
  text-align: center;
}

.price-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
}

.price-tag small {
  font-size: 0.55em;
  color: var(--ink-3);
  font-weight: 600;
}

.link-arrow {
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.link-arrow::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

/* --- Иконки бренда --- */
.section-head__icon {
  display: block;
  width: clamp(64px, 7vw, 92px);
  height: auto;
  margin-bottom: 8px;
}

.section-head--center .section-head__icon {
  margin-inline: auto;
}

.step__icon {
  width: 76px;
  height: 76px;
  margin-bottom: 12px;
}

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

.cta-band__art {
  position: absolute;
  right: clamp(10px, 5vw, 64px);
  bottom: clamp(-24px, -2vw, -8px);
  width: clamp(110px, 17vw, 230px);
  height: auto;
  transform: rotate(-8deg);
  pointer-events: none;
  opacity: 0.95;
}

@media (max-width: 780px) {
  .cta-band__art {
    display: none;
  }
}

/* Набор иконок на странице палитры */
.icon-set {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-set__item {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 18px 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  text-align: center;
}

.icon-set__item img {
  width: 104px;
  height: 104px;
  margin-bottom: 6px;
}

.icon-set__name {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--brand-ink);
}

.icon-set__use {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* Баннер бренда: широкая картинка во всю ширину контейнера */
.brand-banner {
  margin: 0;
}

.brand-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}

/* Вариант набора для широких картинок (логотипы) */
.icon-set--wide {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.icon-set--wide .icon-set__item img {
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: var(--r-sm);
}

/* Знак ложки внутри кнопки */
.btn__icon {
  height: 1.15em;
  width: auto;
  vertical-align: -0.2em;
  margin-right: 6px;
}

/* Квадратный логотип на экране успешного заказа */
.success__logo {
  display: block;
  width: clamp(124px, 18vw, 168px);
  height: auto;
  margin: 0 auto 16px;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

/* Вертикальные фоны для соцсетей */
.social-set {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-set__item {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--grad-card);
}

.social-set__item img {
  width: 100%;
  max-width: 210px;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.social-set__name {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--brand-ink);
}

.social-set__use {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-align: center;
}

/* Ответ на вопрос-заголовок: короткая плашка сразу под ним */
.answer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 14px;
  padding: 8px 20px 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--grad-card);
  box-shadow: var(--sh-sm);
}

.answer__icon {
  height: 26px;
  width: auto;
  flex: none;
}

.answer__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--brand-ink);
  white-space: nowrap;
}

.answer__note {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

@media (max-width: 520px) {
  .answer {
    flex-wrap: wrap;
    gap: 4px 10px;
    border-radius: var(--r-lg);
    padding: 10px 14px;
  }
}

/* Ссылки-заглушки (адрес ещё не прислан) курсор берут общий, из base.css:
   системная стрелка рядом с нарисованным курсором выглядела чужой. */

/* ↓ sections.css */
/* ============================================================
   Секции и «фирменные» блоки: герой, механизм с бусинками,
   типы боксов, лента, FAQ, финальный призыв
   ============================================================ */

/* --- Блоки-обёртки --- */
.band {
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.surface {
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  padding: clamp(20px, 3vw, 36px);
}

/* ============================================================
   Герой
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(36px, 6vw, 72px) clamp(30px, 5vw, 64px);
  background: var(--grad-page);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.55;
  pointer-events: none;
}

.hero::before {
  width: 460px;
  height: 460px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, var(--gold-300), transparent 68%);
}

.hero::after {
  width: 380px;
  height: 380px;
  bottom: -180px;
  left: -120px;
  background: radial-gradient(circle, var(--lilac-200), transparent 70%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 940px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  /* Иллюстрация не должна занимать весь экран (особенно в ландшафте) */
  .hero__visual {
    order: -1;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }

  .hero__card {
    padding: 14px;
  }
}

.hero h1 {
  margin-bottom: 18px;
}

.hero h1 em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
  color: var(--brand-600);
}

/* Девиз бренда под заголовком */
.hero__slogan {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  color: var(--brand-500);
  margin: -4px 0 16px;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.32em;
  background: var(--gold-300);
  border-radius: var(--r-full);
  z-index: -1;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.hero__fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.hero__fact span {
  font-size: 1.1rem;
}

.hero__visual {
  position: relative;
}

.hero__card {
  position: relative;
  padding: clamp(18px, 2.6vw, 30px);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--cream-150), var(--gold-300));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--sh-lg);
}

.hero__card img,
.hero__card > svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(120, 94, 32, 0.18));
}

.hero__sticker {
  position: absolute;
  top: -18px;
  right: -14px;
  padding: 10px 16px;
  border-radius: var(--r-full);
  background: var(--white);
  box-shadow: var(--sh-md);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-ink);
  transform: rotate(6deg);
}

@media (max-width: 520px) {
  .hero__sticker {
    right: 6px;
  }
}

/* --- Плавающие бусинки --- */
.bead-float {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  animation: float-bead var(--dur, 7s) var(--ease) infinite;
  animation-delay: var(--delay, 0s);
  pointer-events: none;
}

/* ============================================================
   Механизм: размешивание → зачерпывание → перенос → высыпание
   ============================================================ */

.scoop {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

.scoop__stage {
  position: relative;
  min-height: clamp(340px, 46vw, 470px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 90% at 18% 0%, var(--cream-100), transparent 58%),
    radial-gradient(110% 85% at 92% 100%, var(--lilac-100), transparent 62%),
    linear-gradient(180deg, var(--cream-50), var(--cream-150));
  box-shadow: inset 0 -34px 60px rgba(120, 60, 70, 0.06);
  overflow: hidden;
  isolation: isolate;
}

/* Тёплый «стол» под посудой */
.scoop__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(255, 233, 220, 0.9));
  pointer-events: none;
  z-index: 0;
}

/* ---------- Чаша (стекло: задняя стенка → бусинки → передняя) ---------- */

.scoop__bowl {
  position: absolute;
  left: clamp(6px, 4.5%, 56px);
  bottom: clamp(30px, 8%, 58px);
  width: clamp(124px, 29%, 258px);
  aspect-ratio: 320 / 260;
  z-index: 2;
}

.scoop__bowl-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scoop__bowl-art--front {
  z-index: 2;
  pointer-events: none;
}

/* Бусинки лежат между стенками стекла */
.scoop__bowl-beads {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform;
}

/* ---------- Ложка ---------- */

.scoop__spoon-wrap {
  position: absolute;
  left: 27%;
  top: 4%;
  width: clamp(76px, 16.5%, 146px);
  z-index: 5;
  transform-origin: 50% 78%;
  filter: drop-shadow(0 14px 20px rgba(120, 60, 70, 0.2));
  will-change: transform;
}

.scoop__spoon {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 78%;
  rotate: 8deg;
}

/* Бусинки, которые «лежат» в ложке во время переноса */
.scoop__spoon-beads {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scoop__spoon-beads .bead {
  position: absolute;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 220ms var(--ease-bounce);
}

.scoop__spoon-beads.is-filled .bead {
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- Тарелка ---------- */

.scoop__plate,
.scoop__plate-rim {
  position: absolute;
  right: clamp(10px, 5%, 54px);
  bottom: clamp(24px, 7%, 52px);
  width: clamp(152px, 47%, 380px);
  aspect-ratio: 320 / 220;
}

.scoop__plate {
  z-index: 1;
}

.scoop__plate-art,
.scoop__plate-rim img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Передняя стенка бортика — поверх бусинок */
.scoop__plate-rim {
  z-index: 4;
  pointer-events: none;
}

.scoop__plate-empty {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 62%;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  transition: opacity var(--t-base) var(--ease);
}

.scoop__plate-empty.is-hidden {
  opacity: 0;
}

/* ---------- Слой бусинок и подсказка ---------- */

.scoop__drops {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.bead {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--size, 26px);
  height: var(--size, 26px);
  pointer-events: none;
  will-change: transform;
}

.bead svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(120, 60, 70, 0.22));
}

.bead--bowl {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--sz, 10%);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.bead--bowl svg {
  filter: drop-shadow(0 2px 3px rgba(120, 60, 70, 0.28));
}

.bead--drop {
  left: 0;
  top: 0;
}

.bead--drop.is-settled {
  pointer-events: auto;
  cursor: help;
}

/* Подсказка — отдельный слой: не вращается вместе с бусинкой */
.scoop__tip {
  position: absolute;
  z-index: 9;
  max-width: min(260px, 80%);
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: rgba(70, 38, 47, 0.94);
  color: #fff4ec;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px)) scale(0.96);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  box-shadow: 0 10px 22px rgba(70, 38, 47, 0.22);
}

.scoop__tip.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 10px)) scale(1);
}

/* Если сверху мало места — показываем под бусинкой */
.scoop__tip.is-below {
  transform: translate(-50%, 10px) scale(0.96);
}

.scoop__tip.is-below.is-visible {
  transform: translate(-50%, 10px) scale(1);
}

.scoop__tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}

.scoop__tip.is-below::after {
  bottom: auto;
  top: -5px;
}

/* Панель управления: подпись + сегменты + кнопка в одну строку */
.scoop__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.scoop__group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.scoop__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.scoop__panel .btn {
  margin-inline-start: 0;
  white-space: nowrap;
}

/* Сегментированный выбор */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--cream-150);
  border: 1px solid var(--line);
}

.seg__btn {
  min-width: 34px;
  padding: 6px 11px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.25;
  color: var(--ink-2);
  cursor: var(--cursor-hand);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.seg__btn:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
}

.seg__btn:active {
  transform: scale(0.97);
}

/* Явная индикация выбора: залитая брендовая пилюля */
.seg__btn.is-active,
.seg__btn.is-active:hover {
  background: var(--grad-brand);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(194, 28, 82, 0.26);
}

.seg__btn:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

.scoop__status {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  min-height: 1.6em;
}

@media (max-width: 720px) {
  .scoop__group {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .scoop__panel .btn {
    width: 100%;
    margin-inline-start: 0;
  }
}

/* Улов */
.catch {
  display: grid;
  gap: 14px;
}

.catch__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}

.catch__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.catch__item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  font-size: var(--fs-sm);
  animation: pop var(--t-base) var(--ease-bounce) both;
  animation-delay: var(--delay, 0s);
}

.catch__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-xs);
  background: var(--cream-100);
  font-size: 1.05rem;
}

.catch__body {
  min-width: 0;
}

.catch__name {
  display: block;
  font-weight: 700;
  line-height: 1.3;
}

.catch__meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catch__empty {
  padding: 22px;
  text-align: center;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-2);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

/* ============================================================
   Лента с примерами подарков
   ============================================================ */

/* ============================================================
   Типы боксов, преимущества
   ============================================================ */

.type-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.feature h3 {
  font-size: var(--fs-md);
  margin-bottom: 4px;
}

.feature p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   Финальный призыв
   ============================================================ */

.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 60px);
  border-radius: var(--r-xl);
  background: var(--grad-sun);
  box-shadow: var(--sh-lg);
  text-align: center;
}

.cta-band h2 {
  margin-bottom: 10px;
}

.cta-band .lead {
  margin-inline: auto;
  color: #5a3a06;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.cta-band .btn--ghost {
  --btn-bg: rgba(255, 255, 255, 0.6);
  --btn-bd: rgba(255, 255, 255, 0.9);
}

/* --- Полоса доверия --- */
.trust {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.trust__item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  font-size: var(--fs-sm);
}

.trust__icon {
  font-size: 1.4rem;
  line-height: 1;
}

/* ============================================================
   Мобильные правки: низкий экран (телефон в ландшафте)
   Идут в конце файла, иначе базовые правила ниже по каскаду
   перебивают их при той же специфичности.
   ============================================================ */

/* Низкий экран (телефон в ландшафте, маленькое окно) */
@media (max-height: 560px) {
  .hero {
    padding-block: 16px 24px;
  }

  .hero__visual {
    max-width: 240px;
  }

  .scoop__stage {
    min-height: 250px;
  }
}

/* Телефон в ландшафте: возвращаем две колонки, чтобы всё влезло в экран */
@media (max-height: 560px) and (min-width: 700px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 24px;
    align-items: center;
  }

  .hero__visual {
    order: 0;
    max-width: 250px;
    margin-inline: auto 0;
  }

  .hero h1 {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    margin-bottom: 10px;
  }

  .hero .lead {
    font-size: 0.95rem;
  }

  .hero__slogan {
    margin: -2px 0 10px;
  }

  /* В ландшафте кнопки поднимаем выше описания, а факты прячем */
  .hero__copy {
    display: flex;
    flex-direction: column;
  }

  .hero__actions {
    order: 1;
    margin-top: 14px;
  }

  .hero .lead {
    order: 2;
    margin-top: 14px;
    margin-bottom: 0;
  }

  .hero__facts {
    display: none;
  }
}

/* ↓ pages.css */
/* ============================================================
   Страницы: оформление заказа, прайс-лист, каталог подарков
   ============================================================ */

/* --- Компактная шапка внутренних страниц --- */
.page-hero {
  padding-block: clamp(28px, 4vw, 52px) clamp(16px, 2vw, 26px);
  background: var(--grad-page);
}

.page-hero h1 {
  margin-bottom: 12px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  padding: 0;
  list-style: none;
}

.breadcrumbs li {
  margin: 0;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--line-2);
}

.breadcrumbs a {
  color: var(--ink-2);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--brand-ink);
  text-decoration: underline;
}

/* ============================================================
   Оформление заказа
   ============================================================ */

.wizard__head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.wizard__counter {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-3);
}

.wizard__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: 20px;
  border-top: 1px dashed var(--line-2);
}

.wizard__hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  max-width: 44ch;
}

/* --- Выбор количества ложек --- */
.spoon-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Три типа бокса держим в одну строку на десктопе */
[data-ot-types] {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* «Хит» — ленточка через левый верхний угол. В углу справа живёт галочка
   выбора, поэтому угол именно левый. */
.spoon-card .badge {
  position: absolute;
  top: 14px;
  left: -38px;
  width: 124px;
  padding: 2px 0;
  border-radius: 3px;
  transform: rotate(-45deg);
  display: block;
  text-align: center;
  font-size: 11px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(120, 60, 70, 0.18);
}

.spoon-card .option__body {
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  text-align: center;
}

.spoon-card .option__price {
  font-size: 1.25rem;
}

/* Крупные ложки фоном: левый нижний угол карточки свободен, там они не мешают
   тексту и сразу показывают количество. Обрезаются скруглением карточки. */
.spoon-card .option__body {
  overflow: hidden;
}

.spoon-card__decor {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 92px;
  margin: 2px 0 2px;
}

/* Крупно и по центру, как на референсе: ложки — главный элемент карточки,
   а не фоновое пятно в углу. Раскладка зависит от количества: пара
   крест-накрест, трио веером, одна — прямо. */
.spoon-card__decor img {
  height: 92px;
  width: auto;
}

.spoon-card__decor img + img {
  margin-left: -12px;
}

/* ровно две: навстречу друг другу */
.spoon-card__decor img:nth-child(1):nth-last-child(2) {
  transform: rotate(-14deg) translateX(7px);
}

.spoon-card__decor img:nth-child(2):nth-last-child(1) {
  transform: rotate(14deg) translateX(-7px);
}

/* ровно три: веер, средняя чуть выше */
.spoon-card__decor img:nth-child(1):nth-last-child(3) {
  transform: rotate(-17deg) translateX(9px) translateY(2px);
}

.spoon-card__decor img:nth-child(2):nth-last-child(2) {
  transform: translateY(-8px);
}

.spoon-card__decor img:nth-child(3):nth-last-child(1) {
  transform: rotate(17deg) translateX(-9px) translateY(2px);
}

/* текст всегда над декором */
.spoon-card .option__title,
.spoon-card__row,
.spoon-card .option__price {
  position: relative;
  z-index: 1;
}

.spoon-card__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* --- Группы полей --- */
.form-block + .form-block {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px dashed var(--line-2);
}

.form-block__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 6px;
}

.form-block__step {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
}

.form-block__lead {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: 16px;
}

.form-grid {
  display: grid;
  gap: 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* --- Мессенджеры --- */
.messengers {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.messenger {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--white);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.messenger.is-connected {
  border-color: var(--mint-ink);
  background: linear-gradient(180deg, var(--mint), var(--white));
}

.messenger__logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--cream-150);
  color: var(--ink);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.messenger__logo .icon {
  width: 24px;
  height: 24px;
}

.messenger.is-connected .messenger__logo {
  background: var(--white);
  color: var(--mint-ink);
}

.messenger__body {
  min-width: 0;
  flex: 1;
}

.messenger__name {
  display: block;
  font-weight: 700;
}

.messenger__state {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* --- Экран успеха --- */
.success {
  text-align: center;
  padding: clamp(28px, 4vw, 48px);
}

.success__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--grad-sun);
  font-size: 2.4rem;
  box-shadow: var(--sh-md);
  animation: pop var(--t-slow) var(--ease-bounce) both;
}

.success__code {
  display: inline-block;
  margin: 10px 0 18px;
  padding: 10px 20px;
  border-radius: var(--r-full);
  background: var(--cream-150);
  border: 1px dashed var(--line-2);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.success__list {
  max-width: 460px;
  margin: 22px auto 0;
  text-align: left;
  display: grid;
  gap: 10px;
  font-size: var(--fs-sm);
}

.success__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-2);
}

.success__row:last-child {
  border-bottom: 0;
}

/* ============================================================
   Прайс-лист
   ============================================================ */

.tier-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

/* Бейдж не должен сдвигать цену и кнопку в соседних карточках */
.tier > .badge {
  position: absolute;
  top: 14px;
  right: 14px;
}

.tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}

.tier--featured {
  border-color: var(--brand-500);
  background: linear-gradient(180deg, var(--cream-150), var(--white));
  box-shadow: var(--sh-md);
}

.tier__spoons {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
}

.tier__gifts {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.tier__price {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  color: var(--ink);
  line-height: 1.1;
}

.tier__price small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
  margin-top: 4px;
}

.price-note {
  margin-top: 18px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  max-width: 80ch;
}

/* --- Калькулятор-мини --- */
.calc {
  display: grid;
  gap: 16px;
}

.calc__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-2);
}

.calc__row:last-of-type {
  border-bottom: 0;
}

.calc__label {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.calc__value {
  font-weight: 700;
}

/* ============================================================
   Каталог подарков
   ============================================================ */

.cat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.cat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}

.cat-card__top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cat-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--cream-100);
  font-size: 1.25rem;
}

.cat-card__cat {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.cat-card__name {
  display: block;
  font-weight: 700;
  line-height: 1.3;
}

.cat-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.rarity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
}

.rarity__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(255, 212, 95, 0.28);
}

.rarity--medium .rarity__dot {
  background: var(--lilac-500);
  box-shadow: 0 0 0 3px rgba(176, 115, 156, 0.22);
}

.rarity--big .rarity__dot {
  background: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(253, 226, 234, 0.9), 0 0 0 4px rgba(224, 53, 106, 0.25);
}

.cat-type-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.tag {
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--brand-100);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 700;
}

/* ============================================================
   Страница палитры
   ============================================================ */

.palette-group + .palette-group {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px dashed var(--line-2);
}

.palette-group__head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.palette-group__head h3 {
  margin-bottom: 0;
}

.palette-group__head .muted {
  max-width: 62ch;
}

.palette-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.swatch {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}

.swatch:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.swatch__chip {
  height: 86px;
  border-bottom: 1px solid var(--line);
}

.swatch__body {
  padding: 12px 14px 14px;
}

.swatch__name {
  font-weight: 700;
}

.swatch__hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  text-transform: uppercase;
}

.swatch__role {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.swatch__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-top: 10px;
}

.swatch__from {
  font-size: 11px;
  color: var(--ink-3);
}

.contrast {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--cream-100);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

.contrast--aa {
  background: var(--mint);
  color: var(--mint-ink);
}

.contrast--no {
  background: var(--brand-100);
  color: var(--brand-ink);
}

.palette-examples {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.example {
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
}

.example__label {
  margin-bottom: 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   Утилиты страниц
   ============================================================ */

.mt-0 {
  margin-top: 0;
}
.mt-s {
  margin-top: 12px;
}
.mt-m {
  margin-top: 22px;
}
.mt-l {
  margin-top: 36px;
}

.sticky-note {
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

/* ============================================================
   Страница 404: бусинка укатилась
   ============================================================ */

.notfound {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}

.notfound__art img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
}

.notfound__copy h1 {
  margin-bottom: 12px;
}

/* код 404: ноль сделан бусинкой */
.notfound__code {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  margin: 2px 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--brand-ink);
}

.notfound__bead {
  width: clamp(42px, 6.4vw, 66px);
  height: clamp(42px, 6.4vw, 66px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 58%),
    var(--grad-brand);
  box-shadow: inset 0 -4px 10px rgba(120, 40, 60, 0.18), 0 6px 14px rgba(194, 28, 82, 0.22);
  animation: bead-wobble 4.5s ease-in-out infinite;
}

@keyframes bead-wobble {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(9deg);
  }
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.notfound__links a {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.notfound__links a:hover,
.notfound__links a:focus-visible {
  border-bottom-color: currentColor;
}

@media (max-width: 860px) {
  .notfound {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .notfound__art {
    order: -1;
    max-width: 320px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notfound__bead {
    animation: none;
  }
}

/* --- Шаг «Получатель»: возраст узкий, рядом склонение «год/года/лет» --- */

.form-grid--recipient {
  grid-template-columns: minmax(0, 1fr) 128px;
}

.field__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field__row .input {
  min-width: 0;
}

.field__suffix {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  /* Место под слово зарезервировано по самому длинному варианту («года»),
     иначе при переключении «год/года/лет» менялась бы ширина самого поля. */
  flex: none;
  min-width: 2.6em;
}

.seg--gender {
  display: flex;
}

.seg--gender .seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.seg__icon {
  width: 17px;
  height: 17px;
  flex: none;
}

@media (max-width: 520px) {
  .form-grid--recipient {
    grid-template-columns: minmax(0, 1fr) 108px;
  }

  /* три варианта в строку не влезают — раскладываем в столбик */
  .seg--gender {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border-radius: var(--r-lg);
  }

  .seg--gender .seg__btn {
    justify-content: flex-start;
    padding: 9px 14px;
    border-radius: calc(var(--r-lg) - 5px);
  }
}

/* --- Список товаров на прайсе --- */

.goods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Витрина бусинок --- */

.bead-set {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 18px 12px;
  margin-top: var(--gap);
}

.bead-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
}

.bead-card__bead {
  display: grid;
  place-items: center;
  height: 68px;
}

.bead-card__name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-2);
  text-align: center;
}

/* Бусинка товара в карточке каталога */
.cat-card__bead {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
}

/* чтобы белые и светлые бусинки не растворялись на белой карточке */
.cat-card__bead svg,
.bead-card__bead svg {
  filter: drop-shadow(0 1px 2px rgba(70, 38, 47, 0.28));
}

/* Палитра и витрина бусинок заполняются скриптом: держим место заранее,
   иначе содержимое ниже прыгает вниз (CLS) */
[data-palette-groups] {
  min-height: 60vh;
}

.bead-set {
  min-height: 340px;
}

/* ============================================================
   Матовое стекло на карточках
   ============================================================ */

/* Блок стоит в последнем по порядку файле сборки намеренно: карточки объявлены
   в components, sections и pages, и перекрыть их фон можно только правилом,
   которое идёт после всех.

   Размытия здесь нет — см. объяснение в tokens.css: backdrop-filter захватывает
   фон в своём слое, а узор страницы лежит отдельным слоем с z-index: -1,
   и вместо размытия он просто пропадает. Прозрачная подложка поверх мягкого
   узора даёт тот же матовый эффект и работает во всех браузерах. */
.card,
.surface,
.band,
.step,
.cat-card,
.tier,
.answer,
.option__body,
.catch__item,
.example,
.bead-card,
.trust__item,
.messenger,
.acc,
.table-wrap,
.summary {
  background: var(--glass-bg);
}
/* Матовое стекло на карточках: полупрозрачная подложка, видимая тёплая кромка
   и стеклянный блик по верхней грани. Прозрачности одной мало: на ровном фоне
   за карточкой пусто, и без кромки она выглядит обычной белой плашкой. */
.card,
.surface,
.step,
.cat-card,
.tier,
.answer,
.option__body,
.catch__item,
.example,
.bead-card,
.trust__item,
.messenger,
.acc,
.table-wrap,
.summary {
  background: var(--glass-bg);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), var(--sh-sm);
}

/* ↓ animations.css */
/* ============================================================
   Анимации и движение
   ============================================================ */

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float-bead {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(8deg);
  }
}

/* Бесшовный дрейф фоновой плитки: ровно на её размер */
/* Узор бусинок двигаем через transform, а не background-position:
   так анимация уходит на композитор и не перерисовывается, когда браузер
   перерисовывает что-то поверх фона (например, подсветку строки таблицы).
   Сдвиг ровно на плитку 400px — шва не видно. */
@keyframes bead-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-400px, -400px, 0);
  }
}

/* Второй слой фона: сдвиг ровно на размер плитки иконок */
@keyframes bead-drift-icons {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1500px -1500px;
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* --- Появление блоков при прокрутке --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Служебное для анимации бусин --- */
.scoop__spoon.is-dipping {
  animation: spoon-dip 900ms var(--ease) both;
}

@keyframes spoon-dip {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  30% {
    transform: translate(-38%, 26%) rotate(-24deg);
  }
  55% {
    transform: translate(-34%, 34%) rotate(-42deg);
  }
  75% {
    transform: translate(6%, 10%) rotate(-8deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* ============================================================
   Уважение к настройкам пользователя
   ============================================================ */

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}