/*
Theme Name: Tajiro
Author: Sunshine Group
Version: 1.21
*/

/* ==========================================================================
   Общий слой Tajiro: шрифты, база, логотип, шапка, подвал, механизм появления.
   Стоит на каждой странице, поэтому лежит здесь, а не в страничных файлах.

   Собрано из source/tajiro скриптом tools/port-tajiro.mjs. Править в src/css/;
   style.scss рядом - наследство ecomzy, к этому файлу больше не относится.
   ========================================================================== */

/* ---------------------------------------------------------------
   css/core/fonts.css
   --------------------------------------------------------------- */
/* ==========================================================================
   Tajiro - embedded webfonts (Almarai, Outfit)
   ========================================================================== */

/* --- fonts (embedded) --- */
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/almarai-400.woff2) 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: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/almarai-700.woff2) 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: 'Almarai';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/almarai-800.woff2) 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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/outfit-600.woff2) 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;
}

/* Настоящий жирный, а не подрисованный браузером. Нужен цифрам: подмена ниже
   без него давала синтетический жирный на весах 700 и 800. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/outfit-700.woff2) 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;
}

/* --- Цифры ----------------------------------------------------------------
   У Almarai цифры нарисованы странно: тройка с плоской перекладиной сверху,
   ноль и шестёрка с резкими стыками. На кегле заголовка это читается не
   рисунком шрифта, а браком: «3 steps» цеплял глаз именно поэтому. Второй
   пример, «60 seconds», со страницы убран — там теперь «minutes».

   Подменяем ТОЛЬКО символы 0–9 на Outfit — тот же шрифт, которым набраны
   крупные номера пилларов, у него цифры нормальные. Работает через
   unicode-range: браузер сам берёт этот файл для цифр и Almarai для всего
   остального, размечать что-то руками не нужно.

   Граней две, а не одна. Сперва я объявил один файл на весь диапазон
   400–900, рассчитывая, что браузер не станет ничего досочинять. Замер
   показал обратное: ширина цифры росла с 0.555 на весе 600 до 0.562 на 700
   и 0.569 на 800 — это подрисованный синтетический жирный, он мылит контур.

   Теперь лёгкая половина диапазона отдана файлу 600, тяжёлая — настоящему
   700. Синтезировать браузеру больше нечего. */
@font-face {
  font-family: 'Tajiro Figures';
  src: url(fonts/outfit-600.woff2) format('woff2');
  font-weight: 400 650;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}

@font-face {
  font-family: 'Tajiro Figures';
  src: url(fonts/outfit-700.woff2) format('woff2');
  font-weight: 651 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}

/* ---------------------------------------------------------------
   css/core/base.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Home · Dark accents
   00-base.css — сброс, дизайн-токены, сетка, общие компоненты
   Источник: Figma HoPojxNiFElmltha1NOl3N, node 511:150
   ========================================================================== */

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

/* ГОРИЗОНТАЛЬНОЙ ПРОКРУТКИ НЕТ НИКОГДА.

   Стоит хоть одному блоку вылезти за правый край — и ломается не только он.
   Документ становится шире экрана, а вместе с ним и слой, в котором живут
   элементы с position: fixed; мобильный лист меню берёт ширину документа,
   а не видимой области, и на телефоне встаёт с полосой пустоты у края,
   тогда как страница под ним съезжает влево.

   clip, а не hidden. hidden на корне превращает его в прокручиваемый
   контейнер, и от этого перестаёт работать position: sticky — то есть
   отвалилась бы шапка. clip просто отсекает лишнее и ничего не прокручивает. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

/* Абзацы и пункты списков не кончаются строкой в одно слово. Проверка всех
   страниц на 38 ширинах (320–2560, 17.09.2026) нашла такие хвосты десятками
   — «anytime», «link.», «fees.». pretty правит только последние строки и
   остального переноса не трогает. Селекторы — элементы, поэтому любое
   правило класса (balance у лидов и заголовков) их перебивает. */
p, li, dd, dt, figcaption, blockquote {
  text-wrap: pretty;
}

ul[class], ol[class] { list-style: none; padding: 0; }

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

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

/* --- Design tokens -------------------------------------------------------- */
:root {
  /* Страница светлая и только светлая. Без этой строки браузер на системе с
     тёмной темой отдаёт ей желоб прокрутки, и по правому краю встаёт чёрный
     столб во всю высоту — при кремовой странице выглядит поломкой. */
  color-scheme: light;

  /* Поверхности.

     Кремовый шёл десятью секциями подряд — почти две трети высоты страницы, и
     она читалась сплошным песком. Разбавляем не цветом, а светом: кремовый
     чередуется с почти белым, и песок остаётся тёплым якорем, а не фоном
     всего подряд. Зелёного в фонах нет намеренно — он живёт в акцентах.

     Раскладка идёт ПО ПОРЯДКУ НА СТРАНИЦЕ, а не по номерам файлов: секции
     не раз переставляли, и номера с порядком разошлись.

        1  hero              песок  #eae4d8
        2  stats             крем   (прозрачная, берёт фон body)
        3  how-it-works      белёсый
        4  what-you-get      ТЁМНАЯ
        5  pillar-store      белёсый
        6  pillar-products   крем
        7  pillar-marketing  белёсый
        8  marketplace-ads   крем
        9  the-math          ТЁМНАЯ
       10  growth-manager    крем
       11  trust-security    белёсый
       12  social-proof      крем
       13  footer-cta        ТЁМНАЯ #1f1b17
       14  footer            ТЁМНАЯ #1a1714

     Тёмные приходятся на 4, 9 и 13–14 — между ними ровно по четыре светлые
     секции, и ни одна тёмная не стоит рядом с другой, кроме пары 13–14:
     призыв и подвал читаются одной тёмной опорой страницы и потому разведены
     не тоном секции, а глубиной — подвал глуше призыва.

     Соседние светлые секции одного тона не совпадают нигде: крем и белёсый
     идут через одну. Это и есть всё правило — соседей одного тона не бывает.

     Две секции держат тёмный не ради ритма, а по существу: 09 (шар нарисован
     светом по темноте) и 13–14. Остальные тёмные — вопрос раскладки, и
     переставить их можно. Ровно так 03b и уехала в светлое: она стояла
     тёмной прямо над тёмной 09, и обе сливались в одну полосу.
   */
  --c-bg:            #f5f0eb;  /* кремовый — тёплый якорь */
  --c-bg-plain:      #fbfaf9;  /* почти белый — выдох между кремовыми */
  --c-bg-alt:        #fbf8f3;  /* светлее — карточки, «на золоте» */
  --c-surface:       #ffffff;  /* белые плашки, портреты */

  /* --- Стекло ---------------------------------------------------------------
     Материал крупных плашек: панель аналитики, калькулятор, карточки
     менеджера и доверия, парящие плашки у витрины, панели меню.

     Прозрачности нет: на панелях меню её сняли, потому что сквозь пункты
     проступал текст страницы, а два разных стекла на одной странице
     объяснить нечем.
     -------------------------------------------------------------------------- */
  /* Поверхность в два слоя. Нижний — поворот от белого угла к песочному:
     он и создаёт ощущение, что плоскость наклонена к свету. Верхний —
     блик, узкая светлая полоса поперёк. Именно полоса, а не общее
     осветление: равномерный свет читается бумагой, а стекло выдаёт себя
     тем, что свет на нём собран в одном месте.

     Полоса идёт по второй половине плоскости намеренно. В первой основа
     сама белая, и белый блик на белом — это ничто; видно его становится
     только там, где поверхность уже повернулась в песочное. */
  --glass-bg:
    linear-gradient(115deg,
      transparent 44%,
      rgba(255, 255, 255, 0.7) 54%,
      rgba(255, 255, 255, 0.95) 59%,
      rgba(255, 255, 255, 0.45) 65%,
      transparent 74%),
    /* Нейтральная, а не тёплая. Песочный уход к нижнему углу задумывался
       как поворот плоскости к свету, но на кремовой странице читался
       грязным пятном: плашка выглядела не стеклянной, а замусоленной.
       Поворот остался, только уходит он в холодный серый — так ведёт себя
       стекло, а не бумага. */
    linear-gradient(147deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.7) 28%,
      rgba(246, 247, 248, 0.62) 66%,
      rgba(241, 243, 245, 0.58) 100%);

  /* Кромка. Яркость торца зависит от УГЛА по периметру, а не от положения
     вдоль плашки, — поэтому градиент конический, а не линейный.

     Разница принципиальная и видна как раз на скруглениях. Линейный
     градиент светлеет вдоль прямых сторон и ничего не знает про углы;
     конический идёт по обводу и даёт то, что делает фаска в жизни: две
     короткие яркие дуги там, где поверхность повёрнута к свету, и почти
     погасший торец на боковых стенках.

     Начало отсчёта 128deg — свет приходит сверху слева, как и у всех
     остальных теней на странице. */
  /* Размытие с подъёмом насыщенности. Одно размытие даёт серое молоко;
     saturate возвращает цвет тому, что за стеклом, — именно это читается
     толщей материала. */
  --glass-blur: blur(22px) saturate(175%);

  /* Глухой вариант той же поверхности. Нужен там, где стекло лежит
     ПОВЕРХ содержимого, — это панели меню. Прозрачность им противопоказана:
     сквозь пункты проступает текст страницы, и не читается ни то, ни другое.
     Слой блика оставлен прозрачным намеренно: под ним уже глухая основа. */
  --glass-bg-solid:
    linear-gradient(115deg,
      transparent 44%,
      rgba(255, 255, 255, 0.7) 54%,
      rgba(255, 255, 255, 0.95) 59%,
      rgba(255, 255, 255, 0.45) 65%,
      transparent 74%),
    linear-gradient(147deg,
      #ffffff 0%,
      #fdfdfd 28%,
      #f6f7f8 66%,
      #f1f3f5 100%);

  --glass-edge:
    conic-gradient(from 128deg,
      rgba(255, 255, 255, 1) 0deg,
      rgba(255, 255, 255, 0.92) 14deg,
      rgba(255, 255, 255, 0.24) 46deg,
      rgba(255, 255, 255, 0.05) 120deg,
      rgba(255, 255, 255, 0.26) 158deg,
      rgba(255, 255, 255, 0.95) 180deg,
      rgba(255, 255, 255, 0.88) 196deg,
      rgba(255, 255, 255, 0.22) 228deg,
      rgba(255, 255, 255, 0.05) 300deg,
      rgba(255, 255, 255, 0.3) 338deg,
      rgba(255, 255, 255, 1) 360deg);

  /* Плашка лежит на странице. Последняя тень — прохладная и только снизу:
     это масса стекла, из-за неё кромка читается толстой, а не нарисованной. */
  --glass-shadow:
    0 1px 2px rgba(43, 38, 33, 0.06),
    0 8px 18px -10px rgba(43, 38, 33, 0.16),
    0 26px 46px -28px rgba(43, 38, 33, 0.32),
    /* Двойная кромка: тёмный волосок снаружи и белый кант внутри. Одна
       линия читается нарисованной рамкой, две — торцом стекла, у которого
       есть толщина. Это и есть главный признак материала на непрозрачной
       плашке. */
    0 0 0 1px rgba(43, 38, 33, 0.07),
    inset 3px 4px 8px -5px rgba(255, 255, 255, 1),
    inset -3px -4px 8px -5px rgba(255, 255, 255, 0.6),
    inset 0 -22px 30px -24px rgba(64, 74, 86, 0.22);

  /* Панель меню висит над страницей — глубина заметно больше */
  --glass-shadow-float:
    0 30px 70px -30px rgba(43, 38, 33, 0.38),
    0 6px 16px -8px rgba(43, 38, 33, 0.14),
    0 0 0 1px rgba(43, 38, 33, 0.08),
    inset 3px 4px 8px -5px rgba(255, 255, 255, 1),
    inset -3px -4px 8px -5px rgba(255, 255, 255, 0.6),
    inset 0 -24px 32px -26px rgba(64, 74, 86, 0.20);
  --c-ink-surface:   #2b2621;  /* тёмная плашка (dark accents) */
  --c-ink-surface-2: #1f1d1a;  /* самая тёмная — text/on-dark */

  /* Текст */
  --c-text:        #2b2621;  /* заголовки */
  --c-text-strong: #403b33;  /* нав, подзаголовки */
  --c-text-body:   #4d453d;  /* основной текст */
  --c-text-muted:  #6b645a;  /* подписи, мета — затемнён до AA на кремовом */
  --c-on-dark:        #fbf8f3;  /* текст на тёмном/зелёном */
  --c-on-dark-soft:   #a9a296;
  --c-on-dark-muted:  #8e8579;

  /* Акценты */
  /* Ярче прежнего #234a36. Тот был темнее фона тёмных секций всего на 32
     единицы яркости — кнопка на них почти сливалась, и весь блок читался
     тусклым. У нынешнего отрыв 63, то есть вдвое больше, а белая надпись
     держит контраст 5.36:1 при пороге 4.5. Взять ещё светлее нельзя: на
     следующем шаге надпись падает до 4.29 и перестаёт проходить. */
  --c-green:      #2f7352;  /* основной CTA */
  --c-green-deep: #26603f;  /* hover */
  --c-gold:       #865b2a;  /* акцент/обводки — затемнён до AA как текст */
  --c-sand:       #d4a373;  /* декоративные линейки */

  /* Зелёная шкала. До правки зелёный жил только на кнопках, и страница
     читалась сплошным песком. Роль, которую на образца держит мятный
     (--teal-*), здесь отдана этой шкале: надзаголовки секций, линейки,
     галочки, цифры, ореолы. Песок остался на декоре и золотых деталях. */
  --c-green-text:    #2f6b4a;  /* акцент-текст на кремовом, AA */
  --c-green-bright:  #3d8f63;  /* графика: линейки, иконки, обводки */
  --c-green-mist:    #cfe6d9;  /* бледная заливка */
  --c-green-on-dark: #7fc9a0;  /* акцент на тёмных секциях */

  /* Линии */
  --c-line:         rgba(43, 38, 33, 0.14);   /* нейтральная, а не рыжая */
  --c-line-soft:    rgba(43, 38, 33, 0.09);
  --c-line-gold:    rgba(150, 102, 47, 0.30);
  --c-line-strong:  rgba(150, 102, 47, 0.55);
  --c-line-on-dark: rgba(255, 255, 255, 0.10);
  --c-line-green:   rgba(61, 143, 99, 0.28);

  /* Типографика */
  /* 'Tajiro Figures' стоит первым, но покрывает только цифры (см.
     unicode-range в 00-fonts.css). Всё остальное достаётся Almarai. */
  --f-body: 'Tajiro Figures', 'Almarai', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-display: 'Outfit', 'Almarai', system-ui, sans-serif;

  /* Сетка */
  --container: 1200px;   /* 1440 − 2×120 */

  /* Поле по краям — телефонное. Дальше растёт по min-width, см. «Адаптив»
     в конце файла. На широком экране оно доходит до 120, и тогда контейнер
     ровно 1200 при окне 1440. */
  --gutter: 20px;

  /* Радиусы */
  --r-btn: 4px;
  --r-card: 6px;
  --r-pill: 100px;
  --r-arch: 250px;   /* верх михрабной арки */

  /* Тени */
  --sh-card: 0 1px 2px rgba(43, 38, 33, 0.04),
             0 12px 32px rgba(43, 38, 33, 0.06);
}

/* --- Base ----------------------------------------------------------------- */
body {
  background: var(--c-bg);
  color: var(--c-text-body);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Сетка ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; }

/* --- Типографические утилиты ---------------------------------------------- */
/* Составное слово через дефис не рвём по дефису («AI- / powered»):
   обёртку <span class="nobr"> ставит разметка. Не U+2011 — в Almarai
   его может не быть. */
.nobr { white-space: nowrap; }

/* Строки заголовков выравниваются по длине сами. Без этого на узкой
   колонке последняя строка регулярно оставалась в одно короткое слово:
   замеры на 320 давали хвосты в 9, 26 и 28 процентов ширины — заголовок
   читался обрубленным, а не свёрстанным.

   Свойство стоит здесь, на .h1 и .h2, а не в файлах секций: заголовок на
   сайте один и тот же объект, и правило у него должно быть одно. Раньше
   balance был проставлен в пяти файлах вразнобой, и половина заголовков
   оставалась без него. */
.h1 {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 38px;
  line-height: 44px;
  letter-spacing: -1px;
  text-wrap: balance;
  color: var(--c-text);
}

.h2 {
  font-family: var(--f-body);
  font-weight: 800;
  /* Единый ряд заголовков секций на всех страницах: 30 → 38 → 48 → 56.
     На телефоне кегль растёт с колонкой и упирается в 30 — заголовок
     держится в две строки на узких экранах. */
  font-size: min(30px, calc((100vw - 40px) * 0.080));
  line-height: 1.27;
  letter-spacing: -0.023em;
  color: var(--c-text);
  text-wrap: balance;
}

.h3 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 19px;
  line-height: 27px;
  letter-spacing: -0.4px;
  color: var(--c-text);
  /* Строки выравниваются по длине, как у .h1 и .h2 выше: на узкой колонке
     заголовок шага «Your store goes live» оставлял «live» одно на строке. */
  text-wrap: balance;
}

.lead {
  font-size: 17px;
  line-height: 27px;
  color: var(--c-text-body);
}

.meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* Надзаголовок секции: «01 — Ваш магазин» */
.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-green-text);
}

/* Акцентная часть фразы в заголовке — только цветом, без курсива. У Almarai
   своего курсива нет, браузер наклонял прямые буквы, и наклон верхней буквы
   заходил в пробел со следующим словом («Everything you» слипалось). Держит
   зелёный на самом крупном кегле страницы (решение владельца, 22.09.2026). */
.h1 em,
.h2 em {
  font-style: normal;
  color: var(--c-green-text);
}

/* --- Общие компоненты ----------------------------------------------------- */

/* Пилюля-надзаголовок с точкой */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 16px;
  border: 1px solid rgba(212, 163, 115, 0.4);
  border-radius: var(--r-pill);
  background: rgba(43, 38, 33, 0.05);   /* светлее, чтобы текст пилюли добирал контраст */
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.eyebrow__dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-green-bright);
  animation: dot-blink 1.6s ease-in-out infinite;
}

.eyebrow__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(61, 143, 99, 0.55);
  animation: dot-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Живая точка: сама мигает прозрачностью, вокруг расходится кольцо. Тем же
   приёмом отмечен менеджер «на связи» в одиннадцатой секции — оттуда кадры
   сюда и вынесены, чтобы в двух местах пульс был буквально один и тот же. */
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

@keyframes dot-ping {
  0%        { transform: scale(0.5); opacity: 1; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}

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

/* --- Тихая пилюля ----------------------------------------------------------
   Тот же компонент, приглушённый: кегль мельче, прописными в разрядку,
   кромка тонкая, точка не пульсирует.

   Живая пилюля метит то, что происходит прямо сейчас («All-in-one
   platform», менеджер на связи) — пульс там несёт смысл. Над заголовком
   внутренней страницы происходить нечему: это просто ярлык раздела, и
   мигающая точка рядом с ним читается уведомлением, которого нет.

   Стояла копией внутри страницы контактов. Понадобилась на второй такой
   странице — значит, место ей здесь, а не в третьем файле подряд. */
.eyebrow--quiet {
  gap: 9px;
  padding: 7px 16px;
  border-color: var(--c-line-soft);
  background: var(--c-bg-alt);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.eyebrow--quiet .eyebrow__dot {
  width: 6px;
  height: 6px;
  background: var(--c-green);
  animation: none;
}

.eyebrow--quiet .eyebrow__dot::after { content: none; }

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding-inline: 34px;
  border-radius: var(--r-btn);
  /* Вес задан здесь, а не в модификаторах: у .btn--ghost стояло 700, а
     основная кнопка веса не имела вовсе и наследовала 400 от body. Рядом
     они читались разными по нажимаемости. */
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-green);
  color: var(--c-on-dark);
  box-shadow: 0 4px 14px rgba(35, 74, 54, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn--primary:hover {
  background: var(--c-green-deep);
  box-shadow: 0 10px 26px rgba(35, 74, 54, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Ghost — стеклянная: полупрозрачная подложка с размытием вместо пустоты */
/* Вторая кнопка первого экрана — бронзовая, а не зелёная.

   Зелёной она стала заодно с общей раскладкой зелёного по странице, и это
   был перебор: рядом стоит зелёная кнопка-заливка, и две зелёные подряд
   читались одинаковыми по весу — глазу непонятно, какая из них главная.
   Бронза разводит их по ролям и подхватывает золотые детали страницы.

   Стрелка внутри — текстовый символ, цвет наследует отсюда же. */
.btn--ghost {
  padding-inline: 22px;
  border: 1.5px solid var(--c-line-gold);
  font-weight: 700;
  color: var(--c-gold);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn--ghost:hover {
  border-color: var(--c-line-strong);
  background: rgba(255, 255, 255, 0.7);
}

/* Светлая кнопка на тёмном фоне */
.btn--light {
  background: var(--c-bg-alt);
  color: var(--c-ink-surface);
}
.btn--light:hover { background: #ffffff; }

/* Компактный вариант для шапки. Размеры у него не здесь, а на ступени
   min-width: 601px ниже: на телефоне этой кнопки нет вовсе — там бургер, —
   и держать её габариты в базе значило бы спорить с телефонным .btn. */
.btn--sm {
  letter-spacing: 0.3px;
}


/* --- Жидкое стекло --------------------------------------------------------
   Приём с образца (.liquid-btn, .glass-panel): полупрозрачная подложка,
   размытие с подсветкой насыщенности, волосяная светлая грань сверху и
   мягкая тень. Поверхность перестаёт быть плоской заливкой — сквозь неё
   видно, что под ней что-то есть.

   Утилита, а не отдельный компонент: её вешают и на кнопку, и на карточку,
   и на панель. Радиус и отступы остаются за тем, к чему её прикладывают.
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 8px 28px rgba(43, 38, 33, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* На тёмных секциях стекло работает наоборот: подложка почти чёрная,
   светится только грань. */
.glass--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Браузеры без backdrop-filter получают честную непрозрачную подложку,
   иначе текст лёг бы прямо на фон секции. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass      { background: rgba(255, 255, 255, 0.92); }
  .glass--dark { background: rgba(26, 23, 20, 0.92); }
}

/* Декоративная линейка под текстом */
.rule {
  width: 120px;
  height: 2px;
  background: var(--c-green-bright);
  border: 0;
}

/* Карточка на кремовом фоне */
.card {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
}

/* Михрабная арка: скруглённый верх, почти прямой низ */
.arch {
  border-radius: var(--r-arch) var(--r-arch) var(--r-card) var(--r-card);
}

/* Точка-разделитель в списках мета-информации */
.dot-sep {
  flex: none;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* --- Доступность ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* --- Адаптив: общие правила -------------------------------------------------
   Снизу вверх. Всё выше по файлу — телефонные значения, здесь они дорастают
   до широкого экрана. Порядок обязателен: правила равной силы, побеждает
   последнее подошедшее, поэтому блоки идут строго по возрастанию порога.

   Пороги смещены на пиксел от прежних (601 вместо 600, 901 вместо 900):
   при max-width граница входила в узкий диапазон, при min-width она должна
   войти в широкий. Без смещения ровно на 600 и 900 пикселах оказался бы
   зазор или наложение. */
@media (min-width: 601px) {
  :root { --gutter: 40px; }
  .h1 { font-size: 52px; line-height: 58px; letter-spacing: -1.4px; }
  .h2 { font-size: 38px; line-height: 46px; letter-spacing: -0.9px; }
  .h3 { font-size: 22px; line-height: 30px; }
  .lead { font-size: 18px; line-height: 29px; }
  .btn { height: 60px; padding-inline: 44px; font-size: 16px; }
  .btn--ghost { padding-inline: 28px; }

  /* Строго после .btn: компактная кнопка шапки должна перебивать общий
     размер, а не наоборот. */
  .btn--sm { height: 50px; padding-inline: 30px; font-size: 15px; }

}

@media (min-width: 901px) {
  :root { --gutter: 64px; }
  .h1 { font-size: 72px; line-height: 78px; letter-spacing: -2px; }
  .h2 { font-size: 48px; line-height: 56px; letter-spacing: -1.2px; }
  .lead { font-size: 20px; line-height: 32px; }
}

@media (min-width: 1281px) {
  :root { --gutter: 120px; }
  .h2 { font-size: 56px; line-height: 62px; letter-spacing: -1.5px; }
}





/* --- Кнопки на телефоне ---------------------------------------------------
   Во всю ширину колонки: на узком экране кнопка по содержимому висит
   слева от пустоты, а палец целится в первый попавшийся край. Компактная
   кнопка шапки исключена — она живёт в баре, а не в потоке. Кнопка формы
   (.btn--block, shared/forms.css) тоже: она и так во всю ширину своей
   формы, а потолок 420 делал её уже полей на 461–600 (контакты, оплата). */
@media (max-width: 600px) {
  .btn:not(.btn--sm):not(.btn--block) {
    width: 100%;
    max-width: 420px;
  }

  /* Обёртки кнопок сжимаются по содержимому, и «во всю ширину» считалось
     от них, а не от колонки. Растягиваем сами обёртки. */
  .s-03b__actions,
  .s-04__actions,
  .s-06__actions,
  .s-07__actions,
  .s-08__actions,
  .s-09__actions,
  .s-12__actions,
  .s-13__actions {
    display: flex;
    width: 100%;
  }
  /* Подвал блока историй сжимался по содержимому, и кнопка выходила уже
     прочих на 45 px. */
  .s-09__foot { width: 100%; }
}

/* На 320–380 длинная надпись («…get $40 in ad
   credit») шире кнопки: даём перенос и режем боковые поля. min-height
   держит прежнюю высоту у коротких кнопок, height:auto — под две строки. */
@media (max-width: 380px) {
  .btn:not(.btn--sm) {
    white-space: normal;
    height: auto;
    min-height: 56px;
    padding-block: 12px;
    padding-inline: 16px;
    line-height: 1.25;
    text-align: center;
  }
}


/* --- Заголовки на телефоне ------------------------------------------------
   Базовые кегли задавались под узкую колонку с выключкой по левому краю.
   После центрирования и кнопок во всю ширину они стали мелковаты рядом с
   ними: поднимаем на две-три ступени, интерлиньяж следом. */
@media (max-width: 600px) {
  .h1 { font-size: 42px; line-height: 48px; letter-spacing: -1.1px; }
  .h2 { font-size: min(30px, calc((100vw - 40px) * 0.080)); line-height: 1.27; letter-spacing: -0.023em; }
  .h3 { font-size: 21px; line-height: 29px; }
  .lead { font-size: 18px; line-height: 28px; }
}


/* --- Ряд показателей в столпах ---------------------------------------------
   Один компонент на 06, 07 и 08. Разбор — в scratchpad/stats-unify.mjs.
   Коротко: раньше у каждой секции были свои правила на один и тот же
   элемент, и ряды разошлись — три в строку, два и один, каждый со своей
   строки; подписи где прописными, где строчными.

   Здесь вся геометрия и вся типографика. В файлах секций остаются только
   цвета — фон у столпов разный, у 08 тёмный.
   -------------------------------------------------------------------------- */
.s-06__stats,
.s-07__stats,
.s-08__stats {
    display: grid;
  /* РАССТОЯНИЕ МЕЖДУ ПОКАЗАТЕЛЯМИ ЗАДАЁТ ТОЛЬКО ЗАЗОР.

     Колонка равна своей надписи, а не трети контейнера. Пока она была
     третью, просвет между показателями считался как «треть минус надпись»
     и гулял вместе с шириной блока, а блоки разные: ряду у хранилища
     достаётся 263 точки, у товаров 520, на free-basic до 701. Замеры дали
     от 12 до 161 — разница в тринадцать раз. Четыре одинаковых по смыслу
     ряда выглядели четырьмя разными вёрстками.

     Теперь на всю страницу два числа и ни одного больше: 12 на телефоне,
     24 с 601. Ряд занимает столько, сколько просит содержимое, остаток
     доли остаётся пустым — он и раньше был пустым, только размазывался по
     просветам. Ступени 901 и 1101 правят кегль и НЕ ТРОГАЮТ зазор: стоит
     переопределить его где-то ещё, и расстояния снова разъедутся. */
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 12px;
    align-items: start;
    margin: 0;
}

/* В разметке подпись идёт первой (dt — термин, dd — значение), на экране
   значение сверху. Отсюда column-reverse. */
.s-06__stat,
.s-07__stat,
.s-08__stat {
    display: flex;
    flex-direction: column-reverse;
  /* ТОЛЬКО НА ТЕЛЕФОНЕ число стоит по середине своей подписи; с 601 оба
     прижимаются к левому краю ячейки, правило ниже.

     Ячейка шириной в то, что шире: обычно это подпись, а число под ней
     втрое короче — «0» при «CAMERA CREW». На телефоне, где ряд занимает
     почти всю ширину экрана, три коротких числа у левых кромок читались
     лесенкой. По середине подписи они собираются в столбик.

     На широком экране заметно обратное: ряд перестаёт держать левую
     вертикаль, общую у заголовка, текста, галочек и кнопки столпа, и
     средний показатель начинает выделяться на фоне соседних. Поэтому центр
     живёт ровно там, где от него есть польза. */
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}

.s-06__stat-value,
.s-07__stat-value,
.s-08__stat-value {
    margin: 0;
    font-family: var(--f-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
  /* Числа не переносятся: «10,000+» на двух строках — уже не число. */
    white-space: nowrap;
}

.s-06__stat-label,
.s-07__stat-label,
.s-08__stat-label {
    font-size: 10px;
    line-height: 14px;
  /* Прописными в разрядку: подпись читается служебной строкой при числе,
     а не второй строкой текста.

     На телефоне разрядка 0.45 вместо 0.55: на подписи в пятнадцать знаков
     это два пикселя, на глаз при кегле 10 неразличимо, а доля ряда узкая —
     эти два пикселя и решают, встанет подпись в строку или сломается. С
     601 возвращается 0.55. */
    text-transform: uppercase;
    letter-spacing: 0.45px;
  /* Резерв на две строки. Длинные подписи в узкую долю в одну не влезают,
     и без резерва ряды разъезжаются по высоте. */
    min-height: 28px;
}

@media (min-width: 601px) {
  /* Второе и последнее число зазора. Разбор — в базовом правиле выше. */
  .s-06__stats,
  .s-07__stats,
  .s-08__stats { gap: 24px; }

  .s-06__stat-value,
  .s-07__stat-value,
  .s-08__stat-value { font-size: 28px; line-height: 30px; }

  .s-06__stat-label,
  .s-07__stat-label,
  .s-08__stat-label {
    font-size: 11px;
    line-height: 15px;
    min-height: 30px;
    letter-spacing: 0.55px;
  }

  /* Левый край, общий со всем столпом: заголовок, текст, галочки, кнопка и
     ряд показателей стоят от одной вертикали. Центр остаётся телефону. */
  .s-06__stat,
  .s-07__stat,
  .s-08__stat {
    align-items: flex-start;
    text-align: left;
  }
}

/* С 901 столп делится на две колонки, и ряд переезжает в ПОЛОВИНУ
   контейнера: самое узкое место на всей странице — у товаров ряду остаётся
   345 точек. Выросший на 601 кегль в эту половину не помещается: три
   показателя просят 306, плюс два зазора по 24 — уже 354.

   Поэтому здесь возвращается телефонный кегль. Не зазор: зазор один на все
   ряды и все ширины, иначе расстояния снова разъедутся. С 1101 половина
   контейнера дорастает сама, и кегль возвращается к крупному.

   Те же две ступени и по той же причине стоят в ряду free-basic,
   css/free-basic/00-base.css у .fb-mini — кегли там держатся одинаковыми с
   этими, иначе ряды разных страниц смотрелись бы разным набором. */
@media (min-width: 901px) {
  .s-06__stat-value,
  .s-07__stat-value,
  .s-08__stat-value { font-size: 24px; line-height: 28px; }

  .s-06__stat-label,
  .s-07__stat-label,
  .s-08__stat-label {
    font-size: 10px;
    line-height: 14px;
    min-height: 28px;
    letter-spacing: 0.45px;
  }
}

@media (min-width: 1101px) {
  .s-06__stat-value,
  .s-07__stat-value,
  .s-08__stat-value { font-size: 28px; line-height: 30px; }

  .s-06__stat-label,
  .s-07__stat-label,
  .s-08__stat-label {
    font-size: 11px;
    line-height: 15px;
    min-height: 30px;
    letter-spacing: 0.55px;
  }
}

/* ---------------------------------------------------------------
   css/shared/logo.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — знак

   Лежит отдельно от шапки, потому что нужен и там, где шапки нет: на
   странице оплаты и на входе стоит только знак, без навигации. Шапка живёт
   на двух страницах, знак — на четырёх. То же правило, по которому файлы
   уходят в shared/, только на уровень глубже.

   Буквы набраны без точек (ȷ и ı), а две цветные точки поставлены поверх
   отдельными элементами. Смещения в em, поэтому точки едут вместе с кеглем
   на брейкпоинтах.
   ========================================================================== */

.nav-logo {
    position: relative;
  /* inline-block ОБЯЗАТЕЛЕН. Точки спозиционированы от верха коробки знака,
     а у строчного элемента высота не применяется вовсе: коробка растёт по
     межстрочному интервалу, её верх уезжает выше текста, и точки вместе с
     ним. В шапке знак — флекс-элемент и блокируется сам, поэтому там всё
     сходилось, а на оплате он стоял обычной ссылкой и точки висели на
     восемь пикселей выше, чем надо. */
    display: inline-block;
    flex: none;
    height: 26px;
    font-family: var(--f-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.52px;
    color: var(--c-text-strong);
}

/* Поле под палец. По знаку ловилось 26 точек высоты — Apple просит 44.
   Поле дано накладкой, а не отступами: точки над буквами спозиционированы
   от верха коробки, и любой отступ сверху увёл бы их от букв. Накладка
   прозрачная, ничего не закрывает и ни на что не влияет, кроме попадания. */
.nav-logo::after {
    content: '';
    position: absolute;
    inset: -9px -8px;
}

.nav-logo__dot {
    position: absolute;
    top: 0.125em;             /* 4px */
    width: 0.15625em;         /* 5px */
    height: 0.15625em;
    border-radius: 50%;
}

/* Точка над ȷ — тем же зелёным, что кнопки. Прежний #2a3d2e читался
   чёрным, и зелёного в логотипе не было видно вовсе. Смещения выставлены
   под ЗАГЛАВНУЮ T: она шире строчной, и от неё едут обе точки. */
.nav-logo__dot--green {   left: 1.1em;   background: var(--c-green); }
.nav-logo__dot--sand {   left: 1.334em;   background: var(--c-sand); }

@media (min-width: 601px) {
  .nav-logo {
    height: 32px;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: -0.64px;
  }
}

/* ---------------------------------------------------------------
   css/shared/header.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Шапка сайта
   Figma: HoPojxNiFElmltha1NOl3N
     160:7   Header / desktop / default
     161:7   Header / desktop / Platform open   (мега-меню)
     192:13  Header / desktop / Resources open  (выпадашка)
     163:28  Header / mobile / closed
     163:36  Header / mobile / open
     205:6   Header / mobile / section expanded

   Доска меню — более ранняя брендинг-итерация (серифный логотип Tajiro,
   IBM Plex Sans, фон #fbf8f3). Перенесены структура, копирайт, размеры и
   поведение; шрифты и фон приведены к языку собранной страницы.
   ========================================================================== */

/* Высота бара живёт в :root — её использует scroll-padding-top документа,
   чтобы якорные переходы не заезжали под липкую шапку. */
:root {   --nav-h: 72px; }

html {   scroll-padding-top: var(--nav-h); }

.site-header {
    --nav-line: rgba(43, 38, 33, 0.10);        /* хайрлайн доски — нейтральный, не золотой */
    --nav-panel-line: rgba(43, 38, 33, 0.09);
  /* Кромка стекла светлая, а не тёмная: тёмная линия по периметру
     превращает панель обратно в плашку с рамкой. */
    --nav-glass-edge: rgba(255, 255, 255, 0.58);
    --nav-chev: rgba(43, 38, 33, 0.45);
    --nav-foot-bg: #f4eee4;                    /* между --c-bg и --c-bg-alt, токена нет */
    --nav-hover: rgba(43, 38, 33, 0.04);
    --nav-shadow: 0 16px 40px rgba(31, 26, 18, 0.10);

    position: sticky;
    top: 0;
    z-index: 50;                                /* панели и бар поверх секций */
  /* Стекло вместо глухой заливки: контент под баром просвечивает и
     размывается, бар перестаёт быть отрезанной полосой.

     Плотность 0.9, а не 0.72. На 0.72 тёмный заголовок, проезжая под баром,
     оставался слишком читаемым: край шапки резал буквы пополам, и это
     выглядело не «текст ушёл за стекло», а «глиф сломан». Особенно на
     цифрах — у них нет флага или засечки, по которой глаз достроил бы
     недостающий верх. На 0.9 стекло осталось стеклом, а проезжающий текст
     стал намёком. */
    background: rgba(245, 240, 235, 0.9);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--nav-line);
}

.site-header__inner {
    display: flex;
    height: var(--nav-h);
    align-items: center;
  /* Телефонное поле: в полосе тут стоят знак, переключатель и бургер, и
     общий зазор нужен только между двумя последними. Десктопные 54 — это
     расстояние от знака до навигации, оно возвращается с 901. */
    gap: 14px;
}

/* Правая часть полосы видна на всех ширинах, но на телефоне в ней остаётся
   ОДИН элемент — переключатель языка и валюты. «Log in» и кнопка оттуда
   сняты: они есть в мобильном листе, а переключателя там больше нет и быть
   не должно — валюта решает, в каких деньгах человек видит цены на всей
   странице, и прятать её за бургер значит прятать цену. */
.site-header__right {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 28px;
}

.site-header__right > .nav__login,
.site-header__right > .btn { display: none; }

/* Бургер стоит следом за правой частью, и своё margin-left: auto ему
   больше не нужно — вправо полосу толкает она. */
.site-header__right + .nav-burger { margin-left: 0; }

/* Логотип переехал в css/shared/logo.css: он нужен четырём страницам, а
   шапка целиком — двум. То же правило, по которому файлы уходят в shared/,
   только на уровень глубже. */

/* --- Десктопная навигация ------------------------------------------------- */
.nav,
.nav__list,
.nav__item {   height: 100%; }

/* Обычный блок — то есть значение по умолчанию, выписанное явно. Ниже 900
   десктопная навигация убирается целиком, и вернуть её выше порога можно
   только этой строкой. */
.nav {   display: none; }

.nav__list {
    display: flex;
    align-items: stretch;
    gap: 38px;
}

.nav__item {   position: relative;   display: flex; }

/* То же значение, что у соседей выше: ниже 1140 мега-пункт перестаёт быть
   якорем для панели, и отменить это можно только явным relative. */
.nav__item--mega {   position: static; }

.nav__trigger,
.nav__link,
.nav__login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-body);
    font-size: 15px;
    color: var(--c-text-strong);
    transition: color 0.18s ease;
}

/* Триггер тянется на всю высоту бара — панель цепляется к его низу,
   а зона наведения покрывает весь бар. */
.nav__trigger,
.nav__link {
    height: 100%;
    letter-spacing: 0.2px;
}

.nav__trigger:hover,
.nav__link:hover,
.nav__login:hover {   color: var(--c-gold); }

/* Шеврон — сплошной треугольник 8×5, остриём вниз (геометрия из Figma).
   На доске он НЕ переворачивается при раскрытии, только меняет цвет. */
.nav__chev {
    flex: none;
    width: 8px;
    height: 5px;
    color: var(--nav-chev);
    transition: color 0.18s ease;
}

.nav__trigger[aria-expanded="true"] {   color: var(--c-gold); }
.nav__trigger[aria-expanded="true"] .nav__chev {   color: var(--c-gold); }

/* --- Выпадающие панели ---------------------------------------------------- */
.nav-panel {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);    /* 8px под нижней границей бара */
    left: 0;
  /* overflow: hidden здесь стоял ради нижних скруглений подвала — и заодно
     срезал мостик через зазор до шапки, из-за чего меню закрывалось на
     полпути к нему. Скругления теперь заданы подвалу и блику напрямую,
     а отсечки нет. */
  /* Граница прозрачна и работает распоркой: в её толщину видно нижний
     слой фона — градиентную кромку, обрезанную по border-box. Слои
     поверхности обрезаны по padding-box и внутрь границы не заходят. */
    border: 1.5px solid transparent;
    border-radius: var(--r-card);

  /* Материал общий со всеми плашками страницы, описан в 00-base.css.
     Здесь берётся «плавающая» глубина: панель висит над содержимым, а не
     лежит на нём. */
    background-image: var(--glass-bg-solid), var(--glass-edge);
    background-origin: padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, border-box;
    box-shadow: var(--glass-shadow-float);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  /* visibility в transition залипает: панель остаётся visible при opacity 0,
     то есть ловит курсор и висит в таб-порядке. Переключаем её мгновенно,
     анимируем только opacity и transform. */
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Раскрытие по наведению. Со скриптом (.nav-js на шапке) панель открывает
   и закрывает js/shared/header.js — с задержкой на закрытие и на смену
   соседнего пункта, чтобы меню не гасло, когда курсор срезает угол по
   дороге к дальней колонке. Чистый CSS :hover остаётся только на случай,
   если скрипт не загрузился. :focus-within — клавиатура, в обоих случаях. */
@media (hover: hover) and (pointer: fine) {
  .site-header:not(.nav-js) .nav__item:hover > .nav-panel,
  .nav__item:focus-within > .nav-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    }

  /* Активный триггер подсвечивается тем же условием */
  .nav__item:hover > .nav__trigger,
  .nav__item:focus-within > .nav__trigger,
  .nav__item:hover > .nav__trigger .nav__chev,
  .nav__item:focus-within > .nav__trigger .nav__chev { color: var(--c-gold); }

  /* Esc гасит панель, пока курсор или фокус ещё внутри пункта.
     Идёт последним — специфичность та же, побеждает порядок. */
  .nav__item.is-dismissed > .nav-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }

  .nav__item.is-dismissed > .nav__trigger,
  .nav__item.is-dismissed > .nav__trigger .nav__chev { color: var(--c-text-strong); }

  .nav__item.is-dismissed > .nav__trigger:hover,
  .nav__item.is-dismissed > .nav__trigger:hover .nav__chev { color: var(--c-gold); }
}

/* Скользящий блик — то, чем стекло отличается от бумаги. Мягкая светлая
   полоса наискось по верхнему углу, обрезана скруглением панели. Своего
   события у неё нет: она просто лежит, как отражение окна на плоскости. */
.nav-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 42%;
    border-radius: var(--r-card) var(--r-card) 0 0;
  /* Под содержимое, а не поверх. Отрицательный z-index кладёт слой между
     фоном панели и её текстом: сверху блик выбеливал подписи колонок и
     первый пункт списка. */
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(168deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.35) 46%,
      rgba(255, 255, 255, 0) 100%);
}

/* right/left выписаны явно: ниже 1140 панель растягивается от поля до поля,
   и вернуть её к привязке по левому краю можно только этими строками. */
.nav-panel--mega {   width: auto;   right: var(--gutter);   left: var(--gutter); }
.nav-panel--small {   width: 388px; }

/* Мостик через 8px зазор между баром и панелью — иначе курсор «выходит»
   из пункта по дороге к панели и меню схлопывается.

   Сверху перекрываем на пиксель больше зазора, чтобы не оставалось щели
   на дробных масштабах.

   По бокам — ровно по панели. Запас в 24 точки стоял здесь с начала и
   стоил документу лишних сорока восьми: ниже 1141 панель растягивается
   от поля до поля, и мостик вылезал за оба края экрана. Вбок не ехало
   только потому, что корень режет лишнее (см. core/base.css), — то есть
   страховка работала вместо вёрстки. Запас возвращается ниже, на ступени
   с наведением: там панель заведомо уже экрана и вылезти ей некуда. */
.nav-panel::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 0;
    left: 0;
    height: 11px;
}


.nav-panel--mega .nav-panel__body {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 26px 32px;
}

.nav-panel--small .nav-panel__body {   padding: 22px 28px; }

.nav-col {
    display: flex;
  /* Расписано покомпонентно, а не сокращением: ниже 1140 колонки переходят
     на равные доли, и лестнице нужно одно имя свойства на всех ступенях. */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
}

.nav-col--trade {   flex-basis: 0; }

/* Надзаголовок колонки + хайрлайн под ним */
.nav-col__kicker {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--nav-line);
    font-size: 11px;
    letter-spacing: 2px;
}

.nav-col__list {
    display: flex;
    flex-direction: column;
  /* Пункт уже несёт свои отступы (padding ниже) — именно они и разводят
     строки. Зазор поверх них дублировал ту же работу второй раз, отчего
     список и выглядел раздутым: между соседними подписями набегало 34 px
     пустоты при высоте самой подписи в 20. */
    gap: 4px;
}

/* --- Пункт меню (общий для панелей и мобильного аккордеона) --------------- */
.nav-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 9px;
    margin-inline: -12px;      /* подложка ховера шире текста, текст не съезжает */
    border-radius: var(--r-btn);
    transition: background-color 0.18s ease;
}

/* Строку делает строкой не линия под ней, а признак того, что отсюда
   можно уйти. Разделители эту работу делали в лоб — резали полотно на
   куски и читались решёткой; здесь вместо них у каждого пункта стрелка.

   Она стоит всегда, а не только под курсором: если показывать её по
   наведению, при беглом взгляде меню снова выглядит текстом. В покое она
   бледная и не спорит с подписями, под курсором наливается и делает шаг
   вправо — тем же приёмом, что стрелка в подвале панели. */
.nav-item {
    position: relative;
    padding-right: 30px;
}

.nav-item::after {
    content: '';
    position: absolute;
  /* Центр шеврона совпадает с центром строки заголовка: 8 px верхнего
     отступа пункта плюс половина двадцатипиксельной строки. */
    top: 14px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-top: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
    transform: rotate(45deg);
  /* Бронза, а не приглушённый серый. Серого на треть непрозрачности не было
     видно вовсе, а именно эта стрелка и объясняет, что перед тобой меню, —
     значит она обязана читаться до наведения, а не после. Бронза при этом
     не спорит с чёрным заголовком: у них разный тон, а не разная сила. */
    color: var(--c-gold);
    opacity: 0.75;
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.nav-item:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(3px, -3px);
}

.nav-item:hover {   background: var(--nav-hover); }

.nav-item__title {   transition: color 0.18s ease; }
.nav-item:hover .nav-item__title {   color: var(--c-gold); }

.nav-item__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: var(--c-ink-surface-2);
}

.nav-item__desc {
    font-size: 13px;
    line-height: 18px;
    color: var(--c-text-muted);
}

/* --- Подвал панели -------------------------------------------------------- */
.nav-panel__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 38px 21px;
  /* Подвал темнее полотна на четверть тона и отделён волосяной линией:
     ступенька читается как грань, а не как приклеенная плашка. */
    border-top: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 0 0 var(--r-card) var(--r-card);
    background: #f4efe7;
}

.nav-panel--small .nav-panel__foot {   padding: 18px 32px; }
.nav-panel__foot--end {   justify-content: flex-start; }

/* Вес выписан явно. Без него строка идёт дисплейным на 400, а у Outfit в
   проект вшиты только 600 и 700 — браузер подставлял 600, то есть
   объявленное и нарисованное расходились. Пишем то, что и так рисуется. */
.nav-panel__tagline {
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--c-text);
}

.nav-panel__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: var(--c-gold);
}

.nav-panel__arrow {   transition: transform 0.18s ease; }
.nav-panel__link:hover .nav-panel__arrow {   transform: translateX(3px); }

/* Узкий десктоп: 812px уже не влезают справа от триггера — панель
   прижимается к контейнеру, колонки становятся резиновыми.
   Идёт после правил .nav-col, иначе те перебьют flex-basis. */


/* --- Бургер и мобильный лист ----------------------------------------------
   Правила разведены по одному селектору на каждое: ниже 900 у них разные
   значения display (бургер — flex, лист — flex со своей раскладкой), а
   групповое правило лестница переписала бы по первому из них. */
.nav-burger {   display: flex; }
.nav-sheet {   display: flex; }

/* ==========================================================================
   Мобильная шапка — с 900px
   ========================================================================== */


/* Без backdrop-filter бар обязан остаться непрозрачным — под ним едет
   контент, и полупрозрачная заливка превратила бы навигацию в кашу. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--c-bg); }

}


/* --- Телефонные правила без базового двойника --------------------------- */
.nav-col--trade {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}
.nav-burger {
  width: 44px;
  /* тап-таргет: на доске нарисовано 20×8 */
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
  margin-left: auto;
  gap: 6px;
  /* шаг линий 7px */
  color: var(--c-text-strong);
}
.nav-burger__line {
  width: 20px;
  height: 1px;
  background: currentColor;
}
.nav-sheet {
  position: fixed;
  z-index: 100;
  flex-direction: column;
  inset: 0;
  padding: 0 22px calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--c-bg-alt);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.nav-sheet.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
body.nav-open .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-sheet__bar {
  display: flex;
  flex: none;
  height: var(--nav-h);
  align-items: center;
  justify-content: space-between;
}
.nav-sheet__close {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -10px;
  color: var(--c-ink-surface-2);
}
.nav-sheet__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-acc__row {
  border-bottom: 1px solid var(--nav-line);
}
.nav-acc__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  /* 20 + 20 + 20 = строка 60px */
  /* Тот же шрифт, что в десктопной навигации. Здесь стоял --f-display, и
  мобильное меню оказывалось единственным местом на странице, набранным
  Outfit. Хуже того, у Outfit подключено одно начертание — 600, а строка
  просит 400: браузер подставлял единственное доступное, и пункты выходили
  ещё и жирнее положенного. */
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  color: var(--c-ink-surface-2);
  transition: color 0.18s ease;
}
.nav-acc__chev {
  flex: none;
  width: 10px;
  height: 6px;
  color: var(--nav-chev);
  transition: color 0.18s ease, transform 0.18s ease;
}
.nav-acc__row.is-open {
  border-bottom-color: transparent;
}
.nav-acc__row.is-open .nav-acc__trigger {
  color: var(--c-gold);
}
.nav-acc__row.is-open .nav-acc__chev {
  color: var(--c-gold);
  transform: rotate(180deg);
}
.nav-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.nav-acc__row.is-open .nav-acc__panel {
  grid-template-rows: 1fr;
}
.nav-acc__clip {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
}
.nav-acc__row.is-open .nav-acc__clip {
  visibility: visible;
}
.nav-acc__list {
  padding-top: 2px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--nav-line);
}
.nav-item--tight {
  gap: 3px;
  padding: 9px 0;
  margin-inline: 0;
}
.nav-item--tight:hover {
  background: none;
}
.nav-item--tight .nav-item__desc {
  line-height: 19px;
}
.nav-sheet__login {
  display: block;
  margin-top: 18px;
  padding-block: 12px;
  /* 18 + 12 = 30px до линии, тап-таргет 45px */
  font-size: 16px;
  line-height: 21px;
  color: var(--c-ink-surface-2);
}
.nav-sheet__cta {
  flex: none;
  width: 100%;
  height: 54px;
  margin-top: 30px;
}
body.nav-open {
  overflow: hidden;
}

/* --- Адаптив: снизу вверх ---------------------------------------------------
   Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
   Блоки идут строго по возрастанию порога: правила равной силы, побеждает
   последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
   max-width граница входила в узкий диапазон, при min-width должна войти
   в широкий. -------------------------------------------------------------- */

@media (min-width: 901px) {
  :root {
    --nav-h: 96px;
  }
  .site-header__inner { gap: 54px; }

  /* Панель прижата к правому краю: она последняя в строке, и от левого
     края уехала бы за экран. Ширина по содержимому — списки короткие. */

  .site-header__right > .nav__login { display: inline-flex; }
  .site-header__right > .btn { display: inline-flex; }
  .nav {
    display: block;
  }
  .nav-burger {
    display: none;
  }
  .nav-sheet {
    display: none;
  }
}

@media (min-width: 1141px) {
  .nav__item--mega {
    position: relative;
  }
  .nav-panel--mega {
    width: 812px;
    right: auto;
    left: 0;
  }
  .nav-col {
    /* Расписано покомпонентно, а не сокращением: ниже 1140 колонки переходят
    на равные доли, и лестнице нужно одно имя свойства на всех ступенях. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 376px;
    min-width: auto;
  }
  .nav-col--trade {
    flex-basis: 330px;
  }

  /* Боковой запас мостика. С этой ступени панель стоит от левого края
     пункта и уже экрана на добрую треть — 24 точки в стороны ей ничего не
     ломают, а курсору дают срезать угол к дальней колонке, не выпадая из
     пункта. Ниже ступени запаса нет: там панель во всю ширину поля. */
  .nav-panel::before {
    right: -24px;
    left: -24px;
  }
}


/* Правая группа: «Log in», выбор страны и кнопка. Прежний зазор 28px их на
   901–1280 не вмещал — «Log in» ломался в две строки. Ужимаем зазор и
   запрещаем перенос; с 1281 места снова хватает, и зазор возвращается. */
@media (min-width: 901px) {
  .site-header__right { gap: 16px; }
  .nav__login {
    white-space: nowrap;
  }
}

@media (min-width: 1281px) {
  .site-header__right { gap: 24px; }
}

/* --- Язык и валюта -----------------------------------------------------------
   Один элемент в полосе вместо двух. В баре — короткая надпись с текущим
   выбором, сам выбор в панели. Панель та же, что у Platform и Resources:
   стекло, тот же механизм открытия, та же глубина тени.
   -------------------------------------------------------------------------- */
/* Пункт во всю высоту полосы — как мега-пункты слева. Панель у всех
   висит на calc(100% + 8px), то есть отсчитывается от НИЗА своего пункта:
   пока этот был высотой с кнопку, его панель выезжала на семьдесят точек
   выше соседних и читалась приклеенной к другому месту. Теперь низ у всех
   пунктов один — низ бара, и панели встают на одной линии. */
.nav__item--prefs {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--nav-h);
}

/* Надпись «EN · AED». Обводки нет намеренно: рядом стоит простая ссылка
   «Log in» и зелёная кнопка, третий элемент с рамкой спорил бы с обоими. */
.nav-prefs__trigger {
  /* ЦЕЛЬ КАСАНИЯ, а не только надпись. Сама надпись «EN · AED» высотой в
     23 точки, и по ней на телефоне промахиваются: Apple просит минимум 44,
     Android 48. Высота задана кнопке, а не тексту — на вид ничего не
     меняется, растёт только область, которую ловит палец.

     Поле по краям тоже расширено и уведено отрицательным полем наружу,
     иначе кнопка раздвинула бы полосу и уехала от бургера. */
    min-height: 44px;
    height: auto;
    padding: 0 10px;
    margin-inline: -10px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.nav-prefs__now { font-weight: 700; }

/* НА ТЕЛЕФОНЕ переключатель открывается ЛИСТОМ, а не выпадашкой — тем же
   приёмом, что меню бургера рядом. Причина простая: рядом с ним стоит
   бургер, и два соседних элемента, открывающиеся по-разному, читаются
   разными по смыслу. Стеклянная плашка на пол-экрана к тому же выглядела
   случайной: на телефоне ей не над чем висеть.

   Лист занимает всё под баром, заливка и материал у него те же, что у
   меню: кремовый фон без стекла, без тени и без скруглений. Разметка
   прежняя — меняются только правила.

   С 901 всё возвращается к выпадашке: там она висит над содержимым рядом
   с такими же панелями «Платформы» и «Ресурсов», и лист был бы неуместен. */
  /* Точка отсчёта — САМА ШАПКА, а не пункт: лист должен идти во всю ширину
     экрана, а пункт узкий. Тем же приёмом подвешена мега-панель, там об
     этом сказано у .nav__item--mega.

     fixed здесь не работает: у шапки есть backdrop-filter, а он делает её
     системой координат для fixed-потомков — лист схлопывался в ноль
     высоты. Поэтому absolute от шапки и высота числом. */
.nav__item--prefs { position: static; }

.nav-panel--prefs {
    position: absolute;
    z-index: 100;
    top: 100%;
    right: 0;
    left: 0;
    width: auto;
    height: calc(100dvh - var(--nav-h));
    border: 0;
    border-radius: 0;
    background-image: none;
    background-color: var(--c-bg-alt);
    box-shadow: none;
  /* Лист приезжает сверху, как меню: та же длительность и тот же сдвиг. */
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Поля листа — как у меню бургера, а не панельные восемнадцать. */
.nav-panel--prefs .nav-prefs {
    gap: 26px;
    padding: 26px 22px;
}

.nav-prefs {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
}

.nav-prefs__kicker {
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 1.3px;
    color: var(--c-text-muted);
}

.nav-prefs__opts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Язык — два варианта в строку: они короткие, и столбцом из двух пунктов
   список выглядел бы длиннее, чем есть. */
.nav-prefs__opts--lang {
    flex-direction: row;
    gap: 8px;
}

.nav-prefs__opts--lang .nav-prefs__opt {
  /* width: auto перебивает 100% из общего правила: в строке ширину задаёт
     flex, а 100% плюс зазор дают переполнение — в мобильном листе вторая
     кнопка уезжала за правый край. */
    flex: 1;
    width: auto;
    min-width: 0;
    justify-content: center;
    border: 1px solid var(--c-line);
    border-radius: var(--r-btn);
}

.nav-prefs__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--r-card);
    font-family: var(--f-body);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    color: var(--c-text-strong);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.nav-prefs__opt:hover { background: var(--nav-hover); }

/* Код валюты — тем же дисплейным, что все числа страницы: рядом с названием
   страны он читается значением, а не второй половиной названия. */
.nav-prefs__cur {
    flex: none;
    font-family: var(--f-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-muted);
}

/* Выбранный вариант. Зелёный тинт и зелёный текст — та же пилюля, что у
   надзаголовков столпов; цвет здесь не единственный носитель смысла,
   состояние продублировано в aria-pressed. */
.nav-prefs__opt[aria-pressed="true"] {
    background: color-mix(in srgb, var(--c-green) 10%, transparent);
    color: var(--c-green-text);
    font-weight: 700;
}

.nav-prefs__opt[aria-pressed="true"] .nav-prefs__cur { color: var(--c-green-text); }

.nav-prefs__opts--lang .nav-prefs__opt[aria-pressed="true"] {
    border-color: var(--c-line-green);
}

/* --- Та же пара в мобильном листе --------------------------------------------
   Строка аккордеона, как Platform и Resources. Рамок у вариантов там нет:
   лист и без них узкий, а два уровня обводок в столбце читаются решёткой. */
.nav-prefs--sheet {
    gap: 16px;
    padding: 4px 0 12px;
}

.nav-prefs--sheet .nav-prefs__opt { font-size: 16px; line-height: 24px; }
.nav-prefs--sheet .nav-prefs__cur { font-size: 14px; }


/* ==========================================================================
   С 901 переключатель снова выпадашка

   Правила стоят В КОНЦЕ ФАЙЛА, а не в общем блоке 901 выше. Причина та же,
   что у ступеней в других файлах: телефонные правила .nav-panel--prefs
   объявлены НИЖЕ того блока, и при равной силе побеждало бы последнее —
   лист остался бы и на десктопе. Здесь он перебивается порядком.
   ========================================================================== */
@media (min-width: 901px) {
  .nav__item--prefs { position: relative; }

  .nav-panel--prefs {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 268px;
    height: auto;
    border: 1.5px solid transparent;
    border-radius: var(--r-card);
    background-image: var(--glass-bg-solid), var(--glass-edge);
    background-color: transparent;
    box-shadow: var(--glass-shadow-float);
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .nav-panel--prefs.is-open { transform: none; }

  .nav-panel--prefs .nav-prefs { gap: 18px; padding: 18px; }
}

/* ---------------------------------------------------------------
   css/shared/footer.css
   --------------------------------------------------------------- */
/* ==========================================================================
   14 · Footer — тёмный подвал: бренд-блок, 5 колонок ссылок, нижняя строка
   Figma: HoPojxNiFElmltha1NOl3N, node 511:710
   ========================================================================== */

.s-14 {
  /* значения, которых нет в токенах 00-base */
    --s14-bg: #1a1714;                    /* тот же тёмный, что в секции 09 */
    --s14-wordmark: #f7f3ec;
    --s14-text: rgba(245, 241, 232, 0.7);
    --s14-text-hi: #f7f3ec;                    /* hover ссылок */
    --s14-divider: rgba(212, 163, 115, 0.2);   /* --c-sand @ 20% */
    --s14-chev: rgba(245, 241, 232, 0.45);  /* шеврон аккордеона на мобиле */

    padding-block: 64px 40px;
    background: var(--s14-bg);
    color: var(--s14-text);
}

.s-14__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* --- Верхняя часть: бренд + колонки --------------------------------------- */
.s-14__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
}

/* --- Бренд ---------------------------------------------------------------- */
.s-14__brand {
    display: flex;
  /* Расписано покомпонентно, а не сокращением: ниже 1280 меняется только
     основа, и лестнице нужно одно и то же имя свойства на всех ступенях. */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    flex-direction: column;
    gap: 16px;
    max-width: 460px;
}

.s-14__wordmark {
  /* Точки знака позиционируются от него, поэтому он система координат.
     Междустрочие ровно в кегль — как в шапке: смещения точек заданы в em
     от кегля, и лишняя полустрока сверху увела бы их на пиксел вверх. */
    position: relative;
    font-family: var(--f-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -0.6px;
    color: var(--s14-wordmark);
}

.s-14__about {
    font-size: 14px;
    line-height: 23px;
}

/* Ряд соцсетей под описанием убран по решению владельца (30.09.2026) —
   ссылки в нём были заглушками. Он же держал воздух между описанием и
   адресом (22 + 26 точек); теперь это делает поле адреса — те же 30
   точек, что между адресом и копирайтом, чтобы три группы стояли ровно. */
.s-14__address {
    margin-top: 14px;
    font-size: 13px;
    font-style: normal;
    line-height: 20px;
}

/* --- Колонки ссылок ------------------------------------------------------- */
.s-14__nav {
    display: block;
  /* Значения по умолчанию выписаны явно: ниже 1140 колонка становится
     многоколоночным потоком, ниже 600 — простым блоком, и снять это выше
     порогов можно только тем, что здесь написано. */
    width: 100%;
    margin-bottom: 0;
    columns: auto;
    column-gap: 32px;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
}

/* Колонка. Своих значений на широком экране у неё нет — только те, что
   гасят телефонные: разделительная линия и поля многоколоночного потока. */
.s-14__col {
    margin-bottom: 0;
    break-inside: avoid;
    border-bottom: 1px solid var(--s14-divider);
}

/* Заголовок колонки — кнопка: ниже 600px тот же узел работает строкой
   аккордеона. На десктопе раскрывать нечего, поэтому кнопка инертна
   (клики и таб-порядок снимает js/14-footer.js). */
.s-14__col-head {   font: inherit; }

.s-14__col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 18px;
    transition: color 0.18s ease;
    width: 100%;
    margin-bottom: 0;   /* в макете это gap 12 + пустой спейсер 4 + gap 12 */
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;   /* подписи в разметке живут обычным регистром */
    color: var(--s14-wordmark);
    cursor: default;
}

/* Шеврон нужен только свёрнутым строкам */
.s-14__chev {   display: none; }

/* Шеврон показывается только в режиме аккордеона, а он весь держится
   на классе — значит и здесь гейтом служит класс, а не ширина. */
.s-14__col.is-collapsible .s-14__chev {
    display: block;
    flex: none;
    width: 10px;
    height: 6px;
    color: var(--s14-chev);
    transition: color 0.18s ease, transform 0.18s ease;
}

/* --- Аккордеон: гейт — класс, а не ширина --------------------------------
   .is-collapsible вешает и снимает скрипт по порогу max-width: 600px
   (14-footer.js). Пока класса нет, эти правила не совпадают ни с чем. */
.s-14__col.is-collapsible .s-14__col-title {   cursor: pointer; }
/* Раскрытая строка золотится, шеврон переворачивается — как в шапке */
.s-14__col.is-open .s-14__col-title {   color: var(--c-sand); }

.s-14__col.is-open .s-14__chev {
    color: var(--c-sand);
    transform: rotate(180deg);
}
/* 0fr → 1fr: высота едет сама, без замера содержимого скриптом */
.s-14__col.is-collapsible .s-14__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
}

.s-14__col.is-collapsible.is-open .s-14__panel {   grid-template-rows: 1fr; }
/* Клип схлопывается до нуля, отступы живут внутри него: на самой панели
   padding не дал бы строке сложиться полностью. */
.s-14__col.is-collapsible .s-14__clip {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;          /* убирает ссылки из таб-порядка свёрнутыми */
}

.s-14__col.is-collapsible.is-open .s-14__clip {   visibility: visible; }

.s-14__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Селектор двойной намеренно, как и в телефонном правиле: сброс
   ul[class] { padding: 0 } в 00-base.css имеет специфичность (0,1,1) и
   молча съел бы поле, заданное одиночным классом. */
.s-14 .s-14__links {
    padding-top: 2px;
    padding-bottom: 22px;
}

/* flex-строка вместо блока — убирает лишние 4px под inline-baseline */
.s-14__links > li {   display: flex; }

.s-14__link {
    padding-block: 10px;
    margin-block: -10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--s14-text);
    transition: color 0.18s ease;
}

.s-14__link:hover,
.s-14__link:focus-visible {
    color: var(--s14-text-hi);
}

/* --- Разделитель ---------------------------------------------------------- */
.s-14__divider {
    flex: none;            /* не даём флексу сплющить полоску в 0 */
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--s14-divider);
}

/* --- Нижняя строка -------------------------------------------------------- */
.s-14__bottom {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.s-14__copyright {
    font-size: 13px;
    line-height: 18px;
}

.s-14__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

/* --- Адаптив -------------------------------------------------------------- */


/* ниже ~1140px пять колонок в строку уже начинают переносить подписи */


/* --- Мобильный аккордеон ---------------------------------------------------
   Figma: HoPojxNiFElmltha1NOl3N, node 208:7 «Footer / mobile».

   Двумя колонками (columns: 2) списки складывались по высоте, а не по
   группам: девять ссылок Platform забивали левую колонку целиком, и
   заголовки соседних групп вставали на случайных высотах — блок читался
   сломанным. На доске вместо этого ряд-на-группу со свёрткой.

   Механика и шеврон — те же, что в мобильном меню шапки (00-header.css,
   блок «Аккордеон»): это один и тот же компонент на двух концах страницы.

   Раскрытие множественное, в отличие от шапки: там выбирают один пункт и
   уходят, а здесь сверяются со списками. К тому же закрытие соседа сверху
   утаскивало бы страницу под пальцем.

   Свёрнутое состояние навешивает скрипт (.is-collapsible). Без него
   аккордеон просто остаётся раскрытым — футер длинный, но целый.
   -------------------------------------------------------------------------- */

/* --- Адаптив: снизу вверх ---------------------------------------------------
   Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
   Блоки идут строго по возрастанию порога: правила равной силы, побеждает
   последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
   max-width граница входила в узкий диапазон, при min-width должна войти
   в широкий. -------------------------------------------------------------- */

@media (min-width: 601px) {
  .s-14 {
    padding-block: 88px 48px;
  }
  .s-14__nav {
    margin-bottom: -40px;
    columns: 3;
  }
  .s-14__col {
    margin-bottom: 40px;
    border-bottom: none;
  }
  .s-14__col-title {
    display: block;
    align-items: normal;
    justify-content: normal;
    gap: normal;
    padding-block: 0;
    transition: none;
    margin-bottom: 28px;
    /* в макете это gap 12 + пустой спейсер 4 + gap 12 */
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    /* подписи в разметке живут обычным регистром */
    color: var(--c-sand);
  }
  .s-14 .s-14__links {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Поле под палец у ссылок НЕ снимаем. Раньше здесь стояло обнуление, и
     с 601 до 900 — планшет, тоже палец — по ссылке подвала ловилось 20
     точек вместо сорока. На раскладку это поле не влияет вовсе: padding
     10 вверх и вниз и ровно такое же отрицательное поле обратно, коробка
     в потоке остаётся двадцать точек, шаг строк те же 32. */
  .s-14__bottom {
    flex-direction: row;
    align-items: center;
    gap: 20px 24px;
  }
  .s-14__badges {
    flex-wrap: nowrap;
    gap: 20px;
  }
}

@media (min-width: 901px) {
  .s-14 {
    /* шеврон аккордеона на мобиле */
    padding-block: 72px 56px;
  }
  .s-14__inner {
    gap: 48px;
  }
  .s-14__top {
    gap: 56px;
  }
}

@media (min-width: 1141px) {
  .s-14__top {
    flex-direction: row;
    gap: 48px;
  }
  .s-14__brand {
    flex-basis: 288px;
    max-width: 320px;
  }
  .s-14__nav {
    display: flex;
    /* Значения по умолчанию выписаны явно: ниже 1140 колонка становится
    многоколоночным потоком, ниже 600 — простым блоком, и снять это выше
    порогов можно только тем, что здесь написано. */
    width: auto;
    margin-bottom: 0;
    columns: auto;
    column-gap: normal;
  }
  .s-14__col {
    margin-bottom: 0;
    break-inside: auto;
  }
  .s-14__col-pair {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
}

/* С 1401, а не с 1281: на 1281 колонка бренда вырастала до 320, зазор до
   66, и навигация теряла сразу 160 точек — ссылки «AI product builder»,
   «Growth Manager», «Contact us» на 1281–1360 ломались в две строки. */
@media (min-width: 1401px) {
  .s-14__top {
    gap: 66px;
  }
  .s-14__brand {
    flex-basis: 320px;
  }
  .s-14__nav {
    gap: 40px;
  }
}


/* Resources и Company — один столбец на двоих. Но только там, где
   столбцы вообще есть: с 1141 подвал раскладывается в ряд, и этим двоим
   отводится одна доля на двоих.

   Ниже — обёртка растворяется. На телефоне разделы идут одной стопкой
   гармошки, шаг у всех один и держится рамкой строки; обёртка добавляла
   между «Resources» и «Company» ещё 32 точки, и в стопке появлялся
   провал ровно в одном месте. В многоколоночном потоке 601–1140 то же
   самое: шаг задан полем столбца, второй ему не нужен. */
.s-14__col-pair {
    display: contents;
}

/* Копирайт переехал под адрес */
.s-14__copyright {
    margin-top: 14px;
}

/* ---------------------------------------------------------------
   css/core/reveal.css
   --------------------------------------------------------------- */
/* ==========================================================================
   00-reveal.css — появление блоков при прокрутке
   Одна система на всю страницу. Ничего не стилизует заново: только
   прячет то, что помечено крючком, и возвращает обратно.

   ЧТО ПОЯВЛЯЕТСЯ
   Интро секции (надзаголовок + заголовок + лид одним куском) и сетки
   равных — там короткая лесенка по соседям. Больше ничего: абзацы,
   иконки и пункты списков приезжают вместе со своим блоком, а не
   поодиночке. Пятнадцать точек съёма на четырнадцать секций.

   ЧЕГО ЗДЕСЬ НЕТ НАМЕРЕННО
   · Шапки. У .site-header внутри лежит .nav-sheet с position: fixed;
     любой transform/translate на предке сделал бы шапку блоком-контейнером
     для него, и мобильный лист перестал бы быть полноэкранным.
   · Внутренностей секций 03, 04, 06, 07, 08, 09, 10. Там крутятся
     постоянные циклы (16s / 18s / 24s) и лежат абсолютные слои;
     помечены только текстовые колонки и шапки, то есть контейнеры,
     которые к этим циклам не относятся.
   · Первого экрана. Герой не появляется вовсе — ему нечего ждать.

   ПРОГРЕССИВНОЕ УЛУЧШЕНИЕ
   Все правила ниже висят на .reveal-armed у <html>. Класс ставит
   js/reveal.js и только после того, как убедился, что движение
   разрешено. Нет скрипта — нет класса — страница выглядит ровно так же,
   как без этого файла. Скрытого состояния «по умолчанию» не существует.
   ========================================================================== */

:root {
  /* Длительность появления. 500 ms — целый делитель всех трёх мастер-циклов
     страницы: 16 / 0.5 = 32, 18 / 0.5 = 36, 24 / 0.5 = 48. Появление
     не зациклено, но живёт в той же сетке времени, что и всё остальное. */
    --reveal-dur: 500ms;

  /* Шаг лесенки по соседям одной сетки: 125 ms = 500 / 4 и тоже целый
     делитель мастеров (16 / 0.125 = 128, 18 / 0.125 = 144, 24 / 0.125 = 192).
     Меньше — лесенка не читается, больше — сетка распадается на карточки. */
    --reveal-step: 125ms;

  /* Подъём. 16 px — шаг вертикального ритма страницы (gap: 16px в шапках
     секций). Ровно столько, чтобы блок «сел на место»; всё, что заметно
     больше, читается уже как выезд, а выездов в брифе нет. */
    --reveal-rise: 12px;
}

/* --- Исходное состояние ----------------------------------------------------
   Только прозрачность. Подъём живёт исключительно в кейфреймах, поэтому
   у невзведённого элемента нет ни translate, ни блока-контейнера. */
.reveal-armed .reveal,
.reveal-armed .reveal-set > * {
    opacity: 0;
}

/* --- Появление --------------------------------------------------------------
   animation, а не transition, и это принципиально: карточки в 11 и 12
   держат собственный transition (transform / box-shadow / border-color
   на :hover). Любое объявление transition отсюда перезаписало бы их
   список целиком и убило бы наведение. Анимация лежит в другом слое
   каскада и ничего чужого не трогает.

   both: backwards держит первый кадр во время задержки (иначе лесенка
   мигала бы), forwards оставляет последний кадр после конца. */
.reveal-armed .reveal.is-revealed,
.reveal-armed .reveal-set.is-revealed > * {
    animation: reveal-rise var(--reveal-dur) linear both;
}

/* --- Лесенка внутри сетки равных --------------------------------------------
   Задержка по nth-child — так же, как у всех циклических сиблингов на
   странице (06, 07, 09). Внутри одного элемента задержек нет: его
   собственная хореография целиком в процентах кейфреймов. */
.reveal-armed .reveal-set.is-revealed > *:nth-child(2) {
    animation-delay: var(--reveal-step);
}
.reveal-armed .reveal-set.is-revealed > *:nth-child(3) {
    animation-delay: calc(var(--reveal-step) * 2);
}
.reveal-armed .reveal-set.is-revealed > *:nth-child(4) {
    animation-delay: calc(var(--reveal-step) * 3);
}
.reveal-armed .reveal-set.is-revealed > *:nth-child(5) {
    animation-delay: calc(var(--reveal-step) * 4);
}
/* Шестой и дальше не растягивают хвост: лесенка упирается в пять шагов
   (625 ms). У сетки 3×2 в секции 11 иначе последняя карточка приезжала бы
   заметно позже, чем взгляд до неё доходит. */
.reveal-armed .reveal-set.is-revealed > *:nth-child(n+6) {
    animation-delay: calc(var(--reveal-step) * 5);
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    /* translate, а не transform: у карточек 11 и 12 на :hover свой
       transform: translateY(-2px). translate — отдельное свойство,
       поэтому подъём появления и подъём на наведении не спорят
       за одно и то же объявление. */
    translate: 0 var(--reveal-rise);
    /* Смягчение — внутри кейфрейма, элементный тайминг linear. Холдов
       у одноразового появления нет, но конвенция на странице одна для
       всех анимаций, и нарушать её ради двух кадров незачем. */
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  to {
    opacity: 1;
    /* none, а не «0 0»: значение «0 0» всё равно оставило бы элемент
       блоком-контейнером и контекстом наложения навсегда. Скрипт вдобавок
       снимает классы после окончания — см. js/reveal.js. */
    translate: none;
  }
}

/* --- prefers-reduced-motion -------------------------------------------------
   Скрипт при «меньше движения» вообще не взводит систему, так что сюда
   в норме не попадают. Блок — страховка на случай, если класс всё же
   окажется на <html> (смена настройки уже после загрузки).

   Почему без него опасно: 00-base.css сжимает любую анимацию до 0.01ms
   и оставляет ЕЁ ПОСЛЕДНИЙ кадр. Последний кадр здесь opacity: 1 — то
   есть сами появившиеся блоки уцелели бы. А вот те, до которых прокрутка
   ещё не дошла, остались бы на opacity: 0 из исходного состояния и
   исчезли бы насовсем. Снимаем и исходное состояние, и анимацию. */
@media (prefers-reduced-motion: reduce) {
  .reveal-armed .reveal,
  .reveal-armed .reveal-set > *,
  .reveal-armed .reveal.is-revealed,
  .reveal-armed .reveal-set.is-revealed > * {
    opacity: 1;
    translate: none;
    animation: none !important;   /* перебивает 0.01ms из 00-base */
  }
}

/* --- Мелкие экраны ----------------------------------------------------------
   На 375 px сетки складываются в одну колонку, и 16 px подъёма на узком
   столбце читаются крупнее, чем на широком. Убавляем до 12 px.
   Горизонтального переполнения подъём не даёт в принципе: движение
   строго по вертикали. */

/* --- Адаптив: снизу вверх ---------------------------------------------------
   Всё выше — телефонные значения. Здесь они дорастают до широкого экрана.
   Блоки идут строго по возрастанию порога: правила равной силы, побеждает
   последнее подошедшее. Пороги смещены на пиксел (601 вместо 600): при
   max-width граница входила в узкий диапазон, при min-width должна войти
   в широкий. -------------------------------------------------------------- */

@media (min-width: 601px) {
  :root {
    /* Подъём. 16 px — шаг вертикального ритма страницы (gap: 16px в шапках
    секций). Ровно столько, чтобы блок «сел на место»; всё, что заметно
    больше, читается уже как выезд, а выездов в брифе нет. */
    --reveal-rise: 16px;
  }
}


/* ==========================================================================
   Админ-бар WordPress. Дописано портом, в src/ этого нет и быть не может.
   ========================================================================== */

/* Шапка липкая (position: sticky; top: 0), бар висит поверх неё. Панели меню
   привязаны к самой шапке (position: absolute), поэтому едут за ней сами -
   отдельных правил, как в ecomzy для её фиксированного выпадающего меню,
   здесь не нужно. */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* Ниже 600px WordPress отпускает бар: он прокручивается вместе со страницей,
   и смещение стало бы дырой под шапкой. */
@media screen and (max-width: 600px) {
  body.admin-bar .site-header {
    top: 0;
  }
}

/* Мобильный лист занимает весь экран (inset: 0) и лёг бы под бар. ecomzy на
   это время бар прятала - делаем так же. */
body.admin-bar.nav-open #wpadminbar {
  display: none !important;
}

/* Бар спрятан - значит и смещение под него лишнее, иначе над шапкой
   осталась бы полоса пустоты ровно в его высоту. В ecomzy на этот случай
   шапка на время меню становилась fixed с top: 0; здесь достаточно снять
   смещение: шапка и так липкая. */
body.admin-bar.nav-open .site-header {
  top: 0;
}