/* === TOKENS.CSS === */
/* assets/css/tokens.css */
/* НАЗНАЧЕНИЕ: Дизайн-система - переменные, сброс, типографика, кнопки */
/* СВЯЗИ: все остальные css */
/* РАЗМЕР: ~380 строк */

/* ==========================================================
   ДИЗАЙН-СИСТЕМА SWISS LUXURY
   Dark Luxury. Темный теплый фон - основа, светлые секции - исключение.
   Два шрифта: Prata (дисплей, высокий контраст) и Golos Text (текст).
   Акцент один - золото. Оно и природа заката на рендерах, и деньги:
   на инвестиционной странице делить акцент между двумя цветами
   не на чем, а два равных акцента лишают страницу главного тона.
   На светлых секциях золото берется в темных вариантах - светлое
   на ivory дает 1.9:1 и текстом быть не может.
   ========================================================== */

:root {
  /* -- Темные поверхности --
     Не нейтральный черный, а теплый, с легким оливковым подтоном.
     Подтон держит родство с зеленью парка на рендерах и отличает
     страницу от стандартного темного интерфейса. */
  --void:   #0A0906;
  --void-2: #13120C;
  --void-3: #1C1B13;

  /* -- Светлые поверхности -- */
  --ivory:   #FEFCFA;
  --ivory-2: #F4F0EB;

  /* -- Текст на светлом --
     Значения проверены по контрасту на фоне ivory, а не подобраны на глаз:
     ink 20:1, ink-80 10.5:1, ink-60 5.1:1. Ниже опускать нельзя. */
  --ink:    #0A0906;
  --ink-80: rgba(10, 9, 6, .78);
  --ink-60: rgba(10, 9, 6, .62);

  /* -- Текст на темном: on-void 11.8:1, on-void-soft 7.1:1 -- */
  --on-void:      rgba(254, 252, 250, .78);
  --on-void-soft: rgba(254, 252, 250, .60);

  /* -- Акцент. Он один: золото --
     Взят с закатных рендеров проекта, а не из набора "премиальных"
     цветов: тот же теплый свет, что лежит на фасаде и на воде.
     Одно золото работает и как природа, и как деньги, поэтому
     второй акцент странице не нужен.

     Светлое золото на темном - текст, иконки, цифры, заливка кнопки.
     Темное золото на светлом - то же самое на секциях ivory.

     Контраст (посчитан, не подобран на глаз):
     gold      10.2:1 на void   - акцентный текст и метки темных секций
     gold-lift 12.9:1 на void   - состояние наведения
     void      10.2:1 на gold   - подпись главной кнопки
     gold-deep  6.2:1 на ivory  - акцентный текст светлых секций
     gold-bark  7.0:1 на ivory  - служебные метки светлых секций
     umber     13.0:1 на ivory  - крупные акцентные слова и темная заливка
     gold на ivory дает 1.9:1 - на светлом это только заливка и линии,
     текстом его писать нельзя. */
  --gold:      #D4B678;
  --gold-lift: #E4CE9E;
  --gold-deep: #7A5A18;
  --gold-bark: #6E5320;
  --umber:     #3A2E12;

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

     Тон взят от --gold, а не с образца металлика: страница держится
     на приглушенном теплом золоте, и лимонный блик из готового набора
     выпадал бы из нее ярким пятном. Металл здесь делает не насыщенность,
     а перепад между гранью и бликом.

     Крайние точки проверены по контрасту: подпись на кнопке темная,
     и она обязана читаться на всей длине заливки, включая темный край,
     где стоит первая буква. Темная точка дает 6.6:1, светлая - 15.5:1. */
  --gold-plate: linear-gradient(100deg,
    #B0904F 0%, #C6A868 20%, #D4B678 36%,
    #F2E2B8 50%, #D4B678 64%, #C6A868 80%, #B0904F 100%);

  /* Запас фона над и под строкой для надписей с background-clip: text.
     Замер: при line-height: 1 глифы Prata выше строки на 6px из 34px,
     то есть на 0.18em. Берем 0.26em - хватает и на 44px, где вылет 8px. */
  --plate-pad: .26em;

  /* Ошибка. Отдельный тон, а не оттенок акцента: на странице,
     где акцент золотой, ошибка обязана читаться как ошибка, а не
     как чуть более красное золото. Отсюда явный сдвиг в красный.
     alarm 4.9:1 на ivory, alarm-lift 8.7:1 на void. */
  --alarm:      #B4512C;
  --alarm-lift: #E8977A;

  /* Отметка доступности документа. Смысловой цвет статуса, а не
     украшение: рядом с золотым акцентом зеленый читается как
     отдельный сигнал, а не как оттенок той же краски. */
  --moss: #7FC96A;

  --stone: #646463;

  /* -- Стекло. Значения из технического задания. --
     Читаемость обеспечивает не фон, а backdrop-filter с brightness:
     он затемняет фотографию под карточкой, не трогая цвет самой карточки. */
  --glass:      rgba(255, 255, 255, .08);
  --glass-line: rgba(255, 255, 255, .20);
  --glass-hi:   rgba(255, 255, 255, .13);

  /* -- Линии -- */
  --rule:       rgba(10, 9, 6, .12);
  --rule-soft:  rgba(10, 9, 6, .07);
  --rule-void:  rgba(254, 252, 250, .14);
  --rule-void2: rgba(254, 252, 250, .08);

  /* -- Шрифты -- */
  --display: 'Prata', 'Times New Roman', Georgia, serif;
  --sans:    'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* -- Отступы, база 4px -- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px;

  /* -- Контейнер -- */
  --wrap: 1280px;
  --pad:  clamp(22px, 4vw, 56px);
  --band: clamp(56px, 5.5vw, 88px);

  /* -- Внутренние отступы карточек --
     Один источник на весь сайт. Раньше каждая карточка несла свой clamp,
     и на телефоне они схлопывались вразнобой от 16 до 32px - соседние
     блоки получали разные поля и сетка читалась рваной.
     Нижняя граница совпадает с --pad: на узком экране внутреннее поле
     карточки равно полю страницы, и края выстраиваются в одну линию. */
  --pad-card:    clamp(22px, 2.7vw, 38px);
  --pad-card-sm: clamp(20px, 2.2vw, 30px);

  /* -- Шкала мелкого текста --
     Ступени названы по роли, а не по размеру: одна роль - один токен.
     Раньше те же роли были прописаны числами по файлам, и близкие
     значения расходились - 13 и 13.5, 14 и 14.5 - без разницы в смысле.

     Шкала поднята против русской версии, и на то две причины.

     Первая: на телефоне она поднималась (блок в конце файла), а на
     десктопе оставалась ниже - выходило, что на широком экране текст
     мельче, чем на узком. Читать на большом мониторе оказывалось
     труднее, чем с телефона в руке.

     Вторая: английский набирается длиннее русского при том же смысле.
     "Потенциальный ориентир стоимости" - 31 знак, "The estimate falls
     by about 10 points for every month you wait" - 58. Одна и та же
     сноска, набранная прежними 13.5px, превращалась из двух строк
     в три и читалась уже не подписью, а мелким шрифтом внизу договора. */
  --t-label: 12.5px;  /* заглавные метки с трекингом */
  --t-meta:  13px;    /* дата, статус, служебная строка */
  --t-cap:   14px;    /* подписи под фотографиями */
  --t-note:  15px;    /* сноски и дисклеймеры */
  --t-sm:    15.5px;  /* плотные списки и спецификации */
  --t-md:    16.5px;  /* текст карточек */

  /* -- Скругления -- */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 999px;

  /* -- Кривые. Только затухающие, никакого отскока. -- */
  --out-quart: cubic-bezier(.25, 1, .5, 1);
  --out-expo:  cubic-bezier(.16, 1, .3, 1);

  /* -- Слои --
     Шапка ВЫШЕ выдвижного меню: иначе бургер оказывается под панелью
     и закрыть меню становится нечем. */
  --z-sticky: 40;
  --z-menu:   50;
  --z-header: 60;
  --z-modal:  70;
}

/* ==========================================================
   СБРОС
   ========================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  overflow-x: clip;
}

body {
  background: var(--void);
  color: var(--on-void);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button { cursor: pointer; }

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

ul, ol { list-style: none; }

/* ==========================================================
   ТИПОГРАФИКА
   ========================================================== */

.display, h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.022em;
  text-wrap: balance;
}

/* Потолок 88px: русские слова длинные, при большем кегле
   заголовок начинает ломаться в неудачных местах. */
/* Трекинг на крупном кегле обнулен: у Prata тонкие засечки, и на 88px
   отрицательный трекинг смыкает соседние буквы. Заодно он сжимает
   и пробел между словами - "у озера" слипалось в одно слово,
   поэтому пробелу явно возвращена нормальная ширина. */
h1 {
  font-size: clamp(38px, 6.6vw, 82px);
  letter-spacing: 0;
  word-spacing: .04em;
}

h2 {
  font-size: clamp(31px, 4.4vw, 58px);
  letter-spacing: -.008em;
}

h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -.008em;
}

/* Акцентное слово в заголовке - подпись всего сайта.
   На светлом берем gold-deep: светлое золото дает там 1.9:1
   и в текст не годится. */
h1 em, h2 em, h3 em, .display em {
  font-style: normal;
  color: var(--gold);
}

.on-light h1 em,
.on-light h2 em,
.on-light h3 em,
.on-light .display em { color: var(--gold-deep); }

/* ==========================================================
   ЗОЛОТО ПО МЕТАЛЛУ

   Один список на все надписи, которые набраны золотом крупно:
   акцентные слова заголовков, цена входа, цифры сводки, крайние
   ступени сценария, ориентир рынка. Каждая из них - Prata в кегле
   от 24px, и на таком размере плоская заливка рядом с металлическими
   кнопками читается выцветшей.

   Мелкому тексту это противопоказано и здесь его нет: на кегле
   меньше 20px перепад между гранью и бликом попадает внутрь буквы
   и съедает штрих. Метки, подписи и сноски остаются плоскими.

   Сплошной цвет каждая надпись объявляет у себя и он остается
   запасным: без background-clip: text они просто золотые.
   ========================================================== */

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 em, h2 em, h3 em, .display em,
  .hero-price-value,
  .hero-metrics .figure {
    background-image: var(--gold-plate);
    background-size: 220% 100%;
    background-position: 26% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Блочной надписи фон рисуется высотой в line-height, а глифы Prata
     выше него: при line-height: 1 бокс выходит 34px против 46px реальной
     высоты буквы, и background-clip: text оставляет по 6px сверху и снизу
     непрокрашенными - надпись читается срезанной. Инлайновым em это
     не грозит: у них фон считается по метрикам шрифта, а не по строке.

     Поэтому поле нужно только блочным. Оно в em, чтобы держать запас
     на любом кегле клампа, а отрицательное поле возвращает строке
     исходную высоту - соседи не сдвигаются. */
  .hero-price-value,
  .hero-metrics .figure {
    padding-block: var(--plate-pad);
    margin-block: calc(-1 * var(--plate-pad));
  }

  /* Единица измерения лежит внутри цифры и своего фона не имеет,
     поэтому через ее прозрачные глифы виден тот же градиент. Она
     мельче цифры, и на ней перепад работать не должен - гасим
     прозрачностью, а не отдельным цветом. */
  .hero-metrics .figure small { color: transparent; opacity: .8; }

  /* На светлых полосах градиент снимается: он собран под темный фон,
     и на ivory от него читается только темная грань. */
  .on-light h1 em,
  .on-light h2 em,
  .on-light h3 em,
  .on-light .display em {
    background-image: none;
    color: var(--gold-deep);
  }
}

.lede {
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.6;
  color: var(--on-void);
  max-width: 60ch;
  text-wrap: pretty;
}

.on-light .lede { color: var(--ink-80); }

/* Служебная метка. Одна система на весь сайт. */
.kicker {
  display: inline-block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.on-light .kicker { color: var(--gold-bark); }

.note {
  font-size: var(--t-note);
  line-height: 1.62;
  color: var(--on-void-soft);
  max-width: 70ch;
}

.on-light .note { color: var(--ink-60); }

/* Крупная цифра - формат подачи данных */
.figure {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 50px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
}

.on-light .figure { color: var(--ink); }

.figure sup {
  font-size: .42em;
  vertical-align: super;
  letter-spacing: 0;
}

/* Дисклеймер о сценарии. Отдельный класс, потому что этот текст
   обязан быть заметным - он снимает обещание доходности. */
.disclaim {
  font-size: var(--t-note);
  line-height: 1.6;
  color: var(--on-void-soft);
  max-width: 76ch;
}

.on-light .disclaim { color: var(--ink-60); }

/* ==========================================================
   КНОПКИ
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 54px;
  padding: 0 var(--s7);
  border-radius: var(--r-pill);
  background-color: var(--gold);
  background-image: var(--gold-plate);
  background-size: 240% 100%;
  background-position: 12% 50%;
  color: var(--void);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.004em;
  text-align: center;
  transition: transform .4s var(--out-quart), background-position .6s var(--out-quart),
              color .3s ease, box-shadow .3s ease;
}

/* Подпись темная, а не белая: на золотой заливке белый текст дает
   1.9:1 и не читается вовсе. Темная подпись на золоте - от 7.7:1.

   Ховер не меняет цвет, а прокатывает блик по кнопке: у металла
   отклик - это движение света, а не другая краска. Заодно это
   единственный способ анимировать градиент - background-color
   между градиентами не интерполируется. */
.btn:hover {
  background-position: 88% 50%;
  color: var(--void);
  transform: translateY(-2px);
}

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

/* Вторичная кнопка на темном. Обводка золотая, но приглушенная:
   в полную силу она спорит с главной кнопкой, стоящей рядом,
   и пара перестает читаться как "основное и запасное". */
.btn-line {
  background: transparent;
  color: var(--ivory);
  box-shadow: inset 0 0 0 1px rgba(212, 182, 120, .38);
}

.btn-line:hover {
  background: var(--glass-hi);
  color: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* Кнопки на светлых секциях.
   Заливка остается золотой - акцент на сайте один, и менять его
   от секции к секции значит терять его. Но золото на ivory дает
   1.9:1, и без обводки кнопка растворяется в фоне: границу держит
   темное золото (6.2:1), а не сама заливка. */
.on-light .btn {
  background-color: var(--gold);
  background-image: var(--gold-plate);
  color: var(--void);
  box-shadow: inset 0 0 0 1px var(--gold-deep);
}

.on-light .btn:hover {
  background-position: 88% 50%;
  color: var(--void);
  box-shadow: inset 0 0 0 1px var(--gold-deep);
}

.on-light .btn-line {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.on-light .btn-line:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--gold-deep);
  color: var(--gold-deep);
}

.btn svg { width: 16px; height: 16px; flex: none; }

/* Текстовая ссылка со стрелкой */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 15px;
  font-weight: 600;
  color: var(--ivory);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule-void);
  transition: border-color .3s ease, gap .3s var(--out-quart), color .3s ease;
}

.link:hover { border-color: var(--gold); color: var(--gold); gap: 14px; }
.link svg { width: 15px; height: 15px; flex: none; }

.on-light .link { color: var(--ink); border-bottom-color: var(--rule); }
.on-light .link:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }

/* ==========================================================
   ФОКУС
   ========================================================== */

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.on-light :focus-visible { outline-color: var(--gold-deep); }

/* Текст только для программ чтения с экрана. Нужен там, где состояние
   элемента показано графикой: заполненный квадрат шкалы виден глазами,
   но вслух его никак не прочитать. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Уводим за верхний край, а не влево: сдвиг влево растягивает страницу. */
.skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal);
  padding: var(--s4) var(--s5);
  background: var(--ivory);
  color: var(--void);
  font-weight: 600;
  border-radius: 0 0 var(--r-sm) 0;
  transform: translateY(-140%);
  transition: transform .3s var(--out-quart);
}

.skip:focus { transform: none; }

/* ==========================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   Контент виден по умолчанию, анимация только усиливает.
   ========================================================== */

/* Прячем только там, где скрипты реально работают.
   Без JS весь текст виден сразу. */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .9s var(--out-expo), transform .9s var(--out-expo);
  }

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

  .reveal[data-delay="1"] { transition-delay: .08s; }
  .reveal[data-delay="2"] { transition-delay: .16s; }
  .reveal[data-delay="3"] { transition-delay: .24s; }
  .reveal[data-delay="4"] { transition-delay: .32s; }
}

/* ==========================================================
   ДОСТУПНОСТЬ ДВИЖЕНИЯ
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

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

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

   Заглавные метки поднимаются меньше остальных ступеней: у них
   трекинг .22em, и на равных с текстом карточки они начинают
   спорить с заголовком секции вместо того, чтобы его подписывать.
   ========================================================== */

@media (max-width: 860px) {
  :root {
    --t-label: 13px;
    --t-meta:  13.5px;
    --t-cap:   15px;
    --t-note:  15.5px;
    --t-sm:    16px;
    --t-md:    17px;
  }
}

/* ==========================================================
   ПЕЧАТЬ
   ========================================================== */

@media print {
  .site-head, .sticky-cta, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}