/* =============================================================
   Lombard v2 — design tokens + base layer.
   Дизайн «Orion Finance» перенесён из макетов design/*.dc.html:
   тёплая светлая бумага + янтарный акцент, всегда-тёмные hero/
   хедер/футер (#0B0B0E), Inter Tight + JetBrains Mono.
   Брендовые значения меняются в блоке BRAND ниже.
   ============================================================= */

/* === BRAND === */
:root {
  --brand-amber:      #C97A10;   /* основной акцент (кнопки, ссылки) */
  --brand-amber-hi:   #EF9F27;   /* светлый янтарь (градиенты, hover на тёмном) */
  --brand-amber-deep: #A96208;   /* прижатый/hover на светлом */
  --brand-amber-soft: #FFC46B;   /* блик в градиентных заголовках */
  --brand-night:      #0B0B0E;   /* фирменный «ночной» фон hero/хедера/футера */
  --brand-night-2:    #141419;

  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* === Semantic palette — LIGHT (тёплая бумага, default) === */
:root {
  /* — токены в терминах макета — */
  --s1: #FFFFFF;                      /* карточки */
  --s2: #F5F4F1;                      /* подложки/панели */
  --s3: #EDEBE6;                      /* нажатые/нейтральные чипы */
  --t1: #12120F;                      /* основной текст */
  --t2: #5F5F58;                      /* вторичный текст */
  --t3: #8B8B83;                      /* подписи */
  --bd: #E6E4DE;                      /* границы */
  --bd2: #D5D2C9;                     /* границы сильнее */
  --ac: var(--brand-amber);
  --ac2: var(--brand-amber-hi);
  --ac-dim: rgba(201, 122, 16, .09);  /* янтарная подложка чипов/иконок */
  --ac-glow: rgba(201, 122, 16, .2);  /* свечение CTA */
  --ok: #1D9E75;
  --ok-bg: rgba(29, 158, 117, .1);
  --red: #D14343;

  /* — легаси-алиасы (старые имена, на них построен остальной CSS) — */
  --bg:         #FBFAF8;
  --surface:    var(--s1);
  --surface-2:  var(--s2);
  --surface-3:  var(--s3);
  --ink:        var(--t1);
  --ink-2:      #3A3933;
  --muted:      var(--t2);
  --line:       var(--bd);
  --line-strong:var(--bd2);

  --accent:      var(--ac);
  --accent-deep: var(--brand-amber-deep);
  --accent-hi:   var(--ac2);
  --on-accent:   #12120F;            /* тёмный текст на янтарной заливке */
  --gold-ink:    #A96208;            /* янтарный текст, проходящий AA на светлом */

  --vault:    var(--brand-night);    /* всегда-тёмные поверхности */
  --on-vault: #F7F7F9;

  --focus:   var(--brand-amber-hi);
  --success: var(--ok);
  --danger:  var(--red);

  /* градиент для акцентных линий/прогресса/заголовков */
  --gold-gradient: linear-gradient(96deg, var(--ac2), var(--brand-amber-soft) 55%, var(--ac2));
  --line-gradient: linear-gradient(90deg, var(--ac), var(--ac2));

  /* стеклянные панели на тёмном (хедер) */
  --glass-bg:     rgba(11, 11, 14, .8);
  --glass-border: rgba(255, 255, 255, .08);
  --blur: 20px;

  --glow-sm: 0 6px 20px var(--ac-glow);
  --glow-md: 0 12px 32px var(--ac-glow);

  --shadow-sm: 0 1px 2px rgba(18,18,15,.05), 0 1px 3px rgba(18,18,15,.04);
  --shadow-md: 0 16px 36px rgba(18,18,15,.09);
  --shadow-lg: 0 20px 50px rgba(18,18,15,.06);
  --shadow-pop: 0 18px 40px rgba(18,18,15,.1);
}

/* === Semantic palette — DARK (по макету «Страницы») === */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s1: #141419;
    --s2: #1A1A20;
    --s3: #24242C;
    --t1: #F7F7F9;
    --t2: #9A9AA6;
    --t3: #6B6B76;
    --bd: #232329;
    --bd2: #2E2E38;
    --ac-dim: rgba(239, 159, 39, .12);
    --ok-bg: rgba(29, 158, 117, .14);

    --bg:         #0B0B0E;
    --ink-2:      #C8C8D2;

    --accent-deep: #E08E18;
    --gold-ink:    var(--ac2);

    --glow-sm: 0 6px 20px rgba(239, 159, 39, .25);
    --glow-md: 0 12px 32px rgba(239, 159, 39, .3);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 16px 36px rgba(0,0,0,.5);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.45);
    --shadow-pop: 0 18px 40px rgba(0,0,0,.55);
  }
}
/* explicit theme toggle wins over the media query */
:root[data-theme="dark"] {
  --s1: #141419;
  --s2: #1A1A20;
  --s3: #24242C;
  --t1: #F7F7F9;
  --t2: #9A9AA6;
  --t3: #6B6B76;
  --bd: #232329;
  --bd2: #2E2E38;
  --ac-dim: rgba(239, 159, 39, .12);
  --ok-bg: rgba(29, 158, 117, .14);

  --bg:         #0B0B0E;
  --ink-2:      #C8C8D2;

  --accent-deep: #E08E18;
  --gold-ink:    var(--ac2);

  --glow-sm: 0 6px 20px rgba(239, 159, 39, .25);
  --glow-md: 0 12px 32px rgba(239, 159, 39, .3);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 16px 36px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.45);
  --shadow-pop: 0 18px 40px rgba(0,0,0,.55);
}

/* === Scales === */
:root {
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 14px;   /* инпуты, чипы */
  --r-btn: 13px;  /* кнопки — фирменный радиус макета */
  --r-lg: 18px;   /* карточки */
  --r-xl: 22px;   /* панели */
  --r-2xl: 26px;  /* крупные CTA-плиты */
  --r-pill: 999px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --container: 1240px;
  --container-wide: 1320px;

  /* type scale (макет живёт мелким плотным набором) */
  --fs-caption: .75rem;     /* 12 */
  --fs-sm:      .84375rem;  /* 13.5 */
  --fs-base:    .9375rem;   /* 15 */
  --fs-lg:      1rem;       /* 16 */
  --fs-xl:      1.25rem;    /* 20 */
  --fs-2xl:     clamp(1.5rem, 1.15rem + 1.5vw, 2rem);            /* h2 карточек */
  --fs-3xl:     clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);          /* h2 секций */
  --fs-display: clamp(2rem, 1.3rem + 3.4vw, 3.25rem);            /* h1 hero */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* long deceleration — reveals */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* slight overshoot — small UI */
  --dur: .22s;
  --dur-slow: .5s;
  --dur-reveal: .75s;
}

/* === Фирменные анимации макета === */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes shine {
  0%   { transform: translateX(-160%) skewX(-14deg); }
  55%  { transform: translateX(240%) skewX(-14deg); }
  100% { transform: translateX(240%) skewX(-14deg); }
}
@keyframes marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--ac-glow); }
  50%      { box-shadow: 0 0 0 7px rgba(239, 159, 39, 0); }
}
@keyframes pulse-ok {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, .35); }
  50%      { box-shadow: 0 0 0 7px rgba(29, 158, 117, 0); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(24px, -18px) scale(1.06); }
  66%      { transform: translate(-16px, 14px) scale(.96); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes menu-item {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Base layer === */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: clip — reveal-элементы (translateX до появления) не должны
   расширять страницу вбок на телефонах; clip дешевле hidden (не создаёт
   скролл-контейнер). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* text-rendering: optimizeLegibility замедляет раскладку длинных
     кириллических страниц — auto быстрее, визуальной разницы нет */
  /* clip, а не hidden: hidden делает body скролл-контейнером, и
     position: sticky у хедера липнет к нему вместо экрана (хедер
     «уезжает» при прокрутке). clip просто обрезает без контейнера. */
  overflow-x: clip;
  /* sticky footer: short pages (login, 404, «спасибо») keep the footer at
     the bottom edge of the viewport — main stretches, footer never floats
     mid-screen. Applies to every layout that uses <main>. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
/* a lone section on a short page fills the whole first screen so the footer
   starts right past the fold, one small scroll away. 68px = sticky header. */
body > main > .section:only-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 68px);
}
body > main > .section--center:only-child {
  justify-content: center;
}
@media (max-width: 560px) {
  body > main > .section--center:only-child {
    justify-content: flex-start;
    padding-top: var(--s-12);
  }
}

/* выделение текста — фирменный янтарь */
::selection {
  background: var(--ac);
  color: #12120F;
}

/* Заголовки: единый плотный гротеск Inter Tight, вес 800, отрицательный
   трекинг — «журнальный» голос макета. */
h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
}
h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }

/* Слова в заголовках не переносим по слогам («Рефинансиро-вание» выглядит
   неряшливо); чтобы длинное слово помещалось на 390px, вместо переносов
   ужимается кегль (медиазапрос ниже). break-word остаётся страховкой на
   случай слова уже самого экрана. */
h1 {
  overflow-wrap: break-word;
}
@media (max-width: 480px) {
  :root {
    --fs-display: clamp(1.9rem, 1rem + 4.6vw, 2.3rem);
    --fs-3xl: clamp(1.65rem, 1.1rem + 2.6vw, 2.1rem);
  }
}

p { margin: 0 0 var(--s-4); }

a { color: var(--gold-ink); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--ac2); }

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

/* accessible focus */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* layout helper */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* =============================================================
   Theme cross-fade.
   theme.js puts .theme-switching on <html> for ~450ms around the
   data-theme flip so every surface fades instead of snapping.
   ============================================================= */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color .4s ease, color .4s ease,
              border-color .4s ease, fill .4s ease, stroke .4s ease,
              box-shadow .4s ease, background .4s ease !important;
}

/* =============================================================
   Scroll-reveal primitives.
   reveal.js stamps .js-reveal on <html>; without JS everything
   stays fully visible (SEO / no-JS safe). Elements opt in with
   data-reveal (up | left | right | blur | scale); an optional
   inline --reveal-delay staggers cards.
   ============================================================= */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-reveal) ease,
              transform var(--dur-reveal) var(--ease-out),
              filter var(--dur-reveal) ease;
  transition-delay: var(--reveal-delay, 0s);
}
html.js-reveal [data-reveal="left"]  { transform: translateX(-34px); }
html.js-reveal [data-reveal="right"] { transform: translateX(34px); }
html.js-reveal [data-reveal="blur"]  { transform: translateY(16px); filter: blur(9px); }
html.js-reveal [data-reveal="scale"] { transform: scale(.94) translateY(18px); }
html.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

/* the signature: assay/проба hallmark chip (stat-плашка макета) */
.hallmark {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--t1);
  padding: .5em .85em;
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  background: var(--s1);
  white-space: nowrap;
}
.hallmark__unit { color: var(--t3); font-size: .8em; font-family: var(--font-sans); }

/* figures set in mono (sums, rates, contract numbers) */
.figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* акцентный градиентный фрагмент заголовка (hero) */
.grad-text {
  background: var(--gold-gradient);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

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