/* ==========================================================================
   Инвойс — сайт-сателлит.

   Типографика в два голоса: Unbounded на заголовках и крупных цифрах,
   Manrope на всём остальном. Обе гарнитуры переменные — каждая в двух
   файлах на всю линейку весов. Unbounded широкий и с характером, поэтому
   держится только там, где текста мало: в наборе он бы утомлял.
   Шрифты лежат локально: Google Fonts в РФ нестабилен, и посетитель увидел
   бы системный запасной вместо макета.
   ========================================================================== */

@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('assets/fonts/manrope-var-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('assets/fonts/manrope-var-latin.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:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('assets/fonts/unbounded-var-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('assets/fonts/unbounded-var-latin.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;}

:root {
  /* фон */
  --bg:        #060606;
  --bg-deep:   #020202;
  /* панели с тёмной подложкой: поверх фото белая полупрозрачность не читается */
  --bg-panel:  rgba(14, 14, 14, .52);
  --bg-panel-2:rgba(22, 22, 22, .66);

  /* линии */
  --line:      rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);

  /* текст */
  --text:      #e9edf4;
  --text-dim:  #a3aec1;
  --text-mute: #6f7c92;

  /* акцент */
  /* Лайм вместо шампанского золота: первый экран должен читаться заодно
     с остальным сайтом, а не как отдельная тёмно-золотая обложка.
     Имена переменных прежние — они разошлись по всему файлу. */
  --blue:      #8fce35;
  --blue-hi:   #bdf25a;
  --blue-glow: rgba(150, 220, 60, .42);

  /* металл для дисплейного заголовка */
  --steel: linear-gradient(178deg,
            #ffffff 0%,
            #e4eaf4 22%,
            #b3bfd2 46%,
            #7d8aa1 68%,
            #59647a 100%);

  --shell: min(1280px, 88vw);
  --head: 'Unbounded', 'Manrope', -apple-system, system-ui, sans-serif;
  --ease:  cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Утилиты
   -------------------------------------------------------------------------- */

.shell { width: var(--shell); margin-inline: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.btn::after {            /* блик, пробегающий по кнопке при наведении */
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ease-out);
}
.btn:hover { background: var(--blue-hi); }
.btn:hover::after { left: 115%; }

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */

/* Шапка — отдельная скруглённая плашка, отступающая от краёв окна,
   а не полоса во всю ширину. Фон и размытие живут на плашке. */
.topbar {
  position: fixed;
  inset: clamp(10px, 1.4vh, 18px) 0 auto;
  z-index: 60;
  padding: 0;
  color: var(--ink);
  transition: inset .4s var(--ease);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 12px 11px clamp(18px, 1.8vw, 28px);
  border-radius: 999px;
  /* Было rgba(.9) + backdrop-filter: blur(14px). Размытие подложки браузер
     пересчитывает на каждом кадре прокрутки во всю ширину шапки — это самый
     дорогой эффект на странице. При непрозрачности .96 разницы не видно. */
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(30, 53, 87, .06),
              0 10px 26px -14px rgba(30, 53, 87, .22);
  transition: box-shadow .4s var(--ease);
}

/* название компании — только текст, разрядкой: пиктограмма-логотип из двух
   плашек была плейсхолдером и читалась как шаблон */
/* Логотип клиента — одноцветный, поэтому вставлен маской, а не картинкой:
   так он берёт цвет от родителя и остаётся читаемым и на тёмном кадре
   первого экрана, и на белой пилюле прилипшей шапки. Два файла-варианта
   пришлось бы держать синхронными вручную. */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}
.brand__mark {
  display: block;
  width: 74px;
  height: 42px;
  background-color: currentColor;
  -webkit-mask: url('assets/logo-mask.png') left center / contain no-repeat;
          mask: url('assets/logo-mask.png') left center / contain no-repeat;
}

.burger {
  width: 34px; height: 18px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  display: grid;
  align-content: space-between;
}
.burger span {
  display: block; height: 2px;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s;
}
.burger:hover span:first-child { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Сцена прокрутки: пролёт до офиса

   Высота секции — длина перемотки: чем ниже листаешь, тем дальше кадр.
   Внутри липкий слой держит видео на экране, пока сцена не кончится.
   ========================================================================== */

.flight {
  position: relative;
  z-index: 3;
  height: 320svh;                  /* примерно три экрана прокрутки */
  background: #0f2038;
}
.flight__stick {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.flight__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0f2038;
}
/* затемнение снизу — под подписью */
.flight__veil {
  position: absolute;
  inset: 0;
  /* Подпись лежит поверх кадра, а кадр меняется: без плотной шторки текст
     то читается, то пропадает на светлом небе. Слева добавлен уклон —
     блок с текстом прижат к левому краю. */
  background:
    linear-gradient(180deg,
      rgba(10, 22, 40, .38) 0%,
      rgba(10, 22, 40, .08) 26%,
      rgba(10, 22, 40, .62) 58%,
      rgba(10, 22, 40, .88) 80%,
      rgba(8, 18, 34, .96) 100%),
    linear-gradient(100deg, rgba(8, 18, 34, .55) 0%, rgba(8, 18, 34, .12) 46%, transparent 70%);
}
.flight__cap {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 4.5vh, 54px);
  translate: -50% 0;
  width: var(--shell);
  color: #eef2ec;
}
.flight__k {
  margin: 0;
  font-size: clamp(11.5px, .9vw, 13.5px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acc-soft);
}
/* Строки лежат одна поверх другой и сменяются по ходу пролёта.
   Высоту задаём контейнеру: иначе при смене длинной строки на короткую
   подпись прыгала бы вместе с подсказкой под ней.

   Считаем её от кегля, а не от высоты окна: самая длинная строка занимает
   три строки, и на широком невысоком экране vh-запаса не хватало —
   заголовок наезжал на адрес сверху. 3 × 1.08 межстрочного = 3.24. */
.flight__lines {
  /* Все строки лежат в одной ячейке сетки, поэтому блок сам принимает
     высоту самой длинной из них. Раньше высота считалась формулой от кегля
     («три строки на такой-то кегль»), и на узком экране, где заголовок
     переносится на пять строк, он вылезал вверх и наезжал на адрес. */
  display: grid;
  margin: 18px 0 0;
}
.flight__t {
  grid-area: 1 / 1;
  align-self: end;
  margin: 0;
  max-width: 22ch;
  font-size: clamp(21px, 2.4vw, 36px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.03em;
  opacity: 0;
  /* Скрытые строки убираем из отрисовки целиком: filter: blur() держит для
     каждой отдельный слой, и четыре размытых полотна висели поверх видео. */
  visibility: hidden;
  transform: translateY(22px);
  filter: blur(8px);
  /* Уходящая строка гаснет быстрее, чем появляется следующая: строки лежат
     в одной точке, и при равных длительностях они накладывались друг на друга. */
  transition: opacity .26s var(--ease),
              transform .55s var(--ease-out),
              filter .26s var(--ease),
              visibility 0s linear .26s;
}
.flight__t.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition-delay: .18s;
  transition-duration: .5s, .7s, .5s, 0s;
}
/* Действие и цифры прямо на кадре: тёмный кадр — единственное место
   на странице с сильным контрастом, и первый экран держится на нём. */
.flight__act {
  margin: clamp(18px, 2.8vh, 30px) 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 30px);
}
.flight__btn {
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--acc);
  color: #fff;
  font-size: clamp(15px, 1.15vw, 17.5px);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(20, 40, 70, .8);
  transition: background .3s var(--ease), transform .3s var(--ease-out);
}
.flight__btn:hover { background: var(--acc-hi); transform: translateY(-2px); }

.flight__stats {
  margin: clamp(22px, 3.4vh, 40px) 0 0;
  padding: clamp(16px, 2.4vh, 24px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
}
.flight__stats b {
  display: block;
  font-size: clamp(19px, 1.9vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.flight__stats span {
  display: block;
  margin-top: 6px;
  font-size: clamp(12px, .95vw, 14.5px);
  color: rgba(238, 242, 236, .72);
}

.flight__hint {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(11.5px, .9vw, 13.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(238, 242, 236, .62);
}
.flight__hint span {
  width: 44px; height: 1px;
  background: currentColor;
  animation: hintRun 2.2s var(--ease-out) infinite;
}
@keyframes hintRun {
  0%   { transform: scaleX(.2); transform-origin: left; opacity: .3; }
  55%  { transform: scaleX(1);  transform-origin: left; opacity: 1; }
  100% { transform: scaleX(.2); transform-origin: right; opacity: .3; }
}


/* --------------------------------------------------------------------------
   Движение первого экрана

   Всё ниже ведёт сам браузер по позиции прокрутки: `animation-timeline`
   считается вне основного потока, поэтому эффекты не стоят ни кадра JS
   и не мешают перемотке ролика. Где таймлайнов нет (Safari до 26),
   экран просто стоит неподвижно — ничего не ломается.
   -------------------------------------------------------------------------- */

/* Полоса пролёта: показывает, сколько ещё лететь. Заодно объясняет,
   почему первый экран не отпускает страницу — он длиной в три экрана. */
.flight__bar {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .14);
}
.flight__bar i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  scale: 0 1;
  background: linear-gradient(90deg, var(--acc-soft), #fff);
}

@supports (animation-timeline: scroll()) {
  /* именованный таймлайн: отсчёт идёт по прокрутке самой секции пролёта */
  .flight { view-timeline: --flight block; }

  @keyframes flightFill { from { scale: 0 1; } to { scale: 1 1; } }
  .flight__bar i {
    animation: flightFill linear both;
    animation-timeline: --flight;
    animation-range: contain 0% contain 100%;
  }

  /* Подпись слегка поднимается к концу пролёта — кадр к этому моменту
     опускается к зданию, и текст уходит вместе с ним. */
  /* -50% по горизонтали обязателен: подпись центрируется тем же свойством
     translate, и без него анимация стирала центрирование — блок уезжал
     вправо на половину своей ширины. */
  @keyframes capRise {
    from { translate: -50% 26px; }
    to   { translate: -50% -10px; }
  }
  .flight__cap {
    animation: capRise linear both;
    animation-timeline: --flight;
    animation-range: contain 0% contain 100%;
  }

  /* Шторка густеет к концу: последние кадры светлее, и по светлому небу
     белая подпись читалась хуже всего. */
  @keyframes veilDeepen { from { opacity: .82; } to { opacity: 1; } }
  .flight__veil {
    animation: veilDeepen linear both;
    animation-timeline: --flight;
    animation-range: contain 0% contain 60%;
  }

  /* Подсказка «листайте» гаснет, как только пролёт начался: она нужна
     ровно до первого движения колеса. */
  @keyframes hintFade { from { opacity: 1; } to { opacity: 0; } }
  .flight__hint {
    animation: hintFade linear both;
    animation-timeline: --flight;
    animation-range: contain 0% contain 14%;
  }
}

@media (max-width: 900px) {
  .flight { height: 260svh; }

  /* Подпись на телефоне — компактная. В прежнем виде она занимала две
     трети экрана и закрывала сам пролёт, ради которого первый экран и
     сделан. Кегли уменьшены примерно вдвое, блок прижат к нижнему краю:
     текст на месте, но кадр видно. */
  .flight__cap { bottom: clamp(14px, 2.6vh, 26px); }
  .flight__k { letter-spacing: .08em; font-size: 10.5px; }
  .flight__lines { margin-top: 8px; }
  .flight__t {
    max-width: 20ch;
    font-size: clamp(17px, 4.8vw, 23px);
    line-height: 1.2;
  }
  .flight__act { flex-direction: column; align-items: stretch; gap: 8px; }
  .flight__btn { padding: 12px 20px; font-size: 14.5px; text-align: center; }
  .flight__hint { justify-content: center; font-size: 10.5px; }
  .flight__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px 16px;
    margin-top: clamp(12px, 2vh, 18px);
    padding-top: clamp(10px, 1.6vh, 14px);
  }
  .flight__stats b { font-size: clamp(14px, 4vw, 17px); line-height: 1.12; }
  .flight__stats span { font-size: 10.5px; line-height: 1.3; }

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

     Бокового уклона нет: на телефоне подпись идёт во всю ширину. */
  .flight__veil {
    background: linear-gradient(180deg,
      rgba(10, 22, 40, .36) 0%,
      rgba(10, 22, 40, .06) 24%,
      rgba(10, 22, 40, .46) 52%,
      rgba(10, 22, 40, .84) 76%,
      rgba(8, 18, 34, .95) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* без анимации сцена превращается в один статичный экран */
  .flight { height: 100svh; }
}

/* ==========================================================================
   Услуги
   ========================================================================== */

/* --------------------------------------------------------------------------
   Услуги

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

   Фигуры собраны из градиентов, а не из картинок: рисунок остаётся резким
   на любом экране, весит ноль и не выглядит вставленной стоковой графикой.
   -------------------------------------------------------------------------- */
.svc {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.svc__i {
  /* Размеры кружка со стрелкой — переменными: от них считается отступ
     текста справа. Отступ был задан отдельным числом и на узком экране
     оказался на 6 px меньше, чем занимает кружок, — описание заходило
     под него. Теперь рассогласоваться нечему. */
  --go-size: clamp(38px, 3.4vw, 46px);
  --go-inset: clamp(16px, 1.6vw, 22px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* высота по содержимому, но не ниже квадрата: жёсткое aspect-ratio при
     более крупном тексте обрезало бы описание в самой длинной карточке */
  min-height: clamp(238px, 21vw, 320px);
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: 22px;
  color: var(--ink);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.svc__i:hover { transform: translateY(-6px); }
/* карточка — ссылка на форму, значит нужна и рамка для клавиатуры */
.svc__i:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* фигура лежит подложкой под текстом */
.svc__art {
  position: absolute;
  z-index: -1;
  inset: 0;
  transition: scale .6s var(--ease-out);
}
.svc__i:hover .svc__art { scale: 1.06; }

/* кружок со стрелкой */
.svc__go {
  position: absolute;
  right: var(--go-inset);
  width: var(--go-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--go-bg);
  transition: translate .35s var(--ease-out);
}
.svc__go::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--go-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L16 8M9 8h7v7'/%3E%3C/svg%3E") center / 55% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L16 8M9 8h7v7'/%3E%3C/svg%3E") center / 55% no-repeat;
}
.svc__i:hover .svc__go { translate: 3px -3px; }

.svc__i b {
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
}
.svc__d {
  font-size: clamp(14px, 1.14vw, 17px);
  line-height: 1.45;
}

/* текст внизу, стрелка внизу */
.svc__i--a, .svc__i--c { justify-content: flex-end; }
.svc__i--a .svc__go, .svc__i--c .svc__go { bottom: var(--go-inset); }
/* последняя строка описания упиралась в кружок со стрелкой */
.svc__i--a b, .svc__i--c b,
.svc__i--a .svc__d, .svc__i--c .svc__d {
  padding-right: calc(var(--go-size) + var(--go-inset) + 12px);
}

/* текст наверху, стрелка наверху */
.svc__i--b, .svc__i--d { justify-content: flex-start; }
.svc__i--b .svc__go, .svc__i--d .svc__go { top: var(--go-inset); }
.svc__i--b b, .svc__i--d b {
  padding-right: calc(var(--go-size) + var(--go-inset) + 12px);
  /* заголовок не ниже кружка: иначе на узком экране, где заголовок влезает
     в одну строку, первая строка описания уходила под стрелку */
  min-height: var(--go-size);
}

/* --- 1. Белая: жёлтый сектор из верхнего угла --- */
.svc__i--a {
  --go-bg: var(--ink);
  --go-fg: #fff;
  background: var(--white);
  box-shadow: var(--sh-1);
}
.svc__i--a:hover { box-shadow: var(--sh-2); }
.svc__i--a .svc__art {
  background:
    radial-gradient(circle at 104% -6%, var(--gold-hi) 0 30%, transparent 30.5%),
    radial-gradient(circle at 104% -6%, var(--gold) 30.5% 52%, transparent 52.5%);
}
.svc__i--a .svc__d { color: var(--ink-2); }

/* --- 2. Синяя: мягкие круги внизу --- */
.svc__i--b {
  --go-bg: #fff;
  --go-fg: var(--acc-deep);
  background: linear-gradient(158deg, #4a7cb5, #2c5285);
  color: #fff;
}
.svc__i--b .svc__art {
  background:
    radial-gradient(circle at 26% 86%, rgba(255, 255, 255, .2) 0 22%, transparent 22.5%),
    radial-gradient(circle at 58% 104%, rgba(255, 255, 255, .14) 0 26%, transparent 26.5%),
    radial-gradient(circle at 92% 70%, rgba(255, 255, 255, .1) 0 16%, transparent 16.5%);
}
.svc__i--b .svc__d { color: #e8f1fb; }

/* --- 3. Почти чёрная: косой блик и тонкое кольцо --- */
.svc__i--c {
  --go-bg: #fff;
  --go-fg: #101722;
  background: #101722;
  color: #fff;
}
.svc__i--c .svc__art {
  background:
    linear-gradient(146deg, rgba(255, 255, 255, .14) 0%, transparent 44%),
    radial-gradient(circle at 74% 74%, transparent 0 21%,
                    rgba(255, 255, 255, .12) 21% 23%, transparent 23.5%),
    radial-gradient(circle at 74% 74%, transparent 0 33%,
                    rgba(255, 255, 255, .07) 33% 34.5%, transparent 35%);
}
.svc__i--c .svc__d { color: rgba(232, 240, 250, .72); }

/* --- 4. Жёлтая: расходящиеся дуги от нижнего края --- */
.svc__i--d {
  --go-bg: var(--ink);
  --go-fg: var(--gold);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold));
  color: var(--ink);
}
.svc__i--d .svc__art {
  /* дуги расходятся от нижнего края и растворяются к верху: на всю плитку
     они давали рябь и забивали текст */
  background: repeating-radial-gradient(circle at 50% 128%,
              rgba(30, 53, 87, .13) 0 2px, transparent 2px 34px);
  -webkit-mask-image: linear-gradient(0deg, #000 0 38%, transparent 82%);
          mask-image: linear-gradient(0deg, #000 0 38%, transparent 82%);
}
.svc__i--d .svc__d { color: #4a3c10; }

@media (max-width: 1000px) {
  .svc__i { min-height: 200px; }
}

/* --------------------------------------------------------------------------
   Боковое оглавление
   -------------------------------------------------------------------------- */

/* Живёт в левом поле макета, поэтому включается только там, где это поле
   реально есть: оболочка — min(1360px, 92vw), и на узких экранах колонка
   наехала бы на контент. */
.rail {
  position: fixed;
  z-index: 50;
  left: 34px;
  top: 50%;
  translate: 0 -50%;
  display: none;
  max-width: 150px;
}
/* Порог такой, чтобы колонка гарантированно поместилась в левое поле:
   при 1560px и оболочке 1120px поле — 220px, колонка занимает 184px. */
@media (min-width: 1560px) {
  :root { --shell: min(1120px, 74vw); }
  .rail { display: block; }
}

.rail__cap {
  display: block;
  margin-bottom: 20px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.rail__list { margin: 0; padding: 0; list-style: none; }
.rail__list li + li { margin-top: 13px; }

.rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-mute);
  transition: color .45s var(--ease);
}
.rail a::before {              /* штрих растёт у активного пункта */
  content: '';
  width: 14px; height: 1px;
  flex: none;
  background: currentColor;
  transition: width .5s var(--ease-out), background .45s var(--ease);
}
.rail i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: .1em;
  opacity: .6;
}
.rail b { font-weight: 400; }

.rail a:hover { color: var(--text-dim); }
.rail .is-here a {
  color: var(--text);
}
.rail .is-here a::before {
  width: 34px;
  background: var(--blue-hi);
}

/* ==========================================================================
   Светлая часть страницы

   Тёмный фон был нужен ровно одному экрану — фотографии в створках контейнера.
   На длинной странице он съедал глубину: одиннадцать блоков подряд на почти
   чёрном читались как один. Поэтому ниже героя сайт переключается на светлую
   тему: секции плотные, со своим фоном, ритм задают цветные блоки-полосы.
   Фото-сцена и 3D под ними не видны, холст на этих экранах гасим.
   ========================================================================== */

:root {
  /* Палитра по референсу клиента: холодный сине-стальной корпоратив,
     жёлтый — только на редких акцентах. */
  --paper:   #eef2f7;   /* светло-голубой фон страницы */
  --paper-2: #f7fafd;
  --white:   #ffffff;

  --ink:   #1e3557;     /* тёмно-синий: заголовки */
  --ink-2: #55677f;     /* основной текст */
  --ink-3: #5a6e88;     /* подписи и мелочь: светлее нельзя — падает контраст */

  /* Синий акцент. Для тёмных плашек нужен осветлённый вариант,
     иначе он на них пропадает. */
  --acc:      #3f6fa8;
  --acc-hi:   #33608f;
  --acc-soft: #a8c8e6;
  --acc-deep: #2c5285;

  /* Яркий синий — только на тёмных плашках: приглушённый --acc на почти
     чёрном теряется, а кнопка действия должна быть видна сразу. */
  --acc-bright:    #1f6fd8;
  --acc-bright-hi: #2f80ed;

  --gold:    #f5c518;   /* жёлтый: круглый бейдж с цифрой, редкие акценты */
  --gold-hi: #ffd94d;

  /* Приглушённая бронза — только в блоке отзывов. Жёлтый --gold на светлой
     фотографии выглядит как подсветка ошибки, бронза читается как отделка. */
  --bronze:    #a9834a;
  --bronze-hi: #c9a961;

  --night:  #1b2f4d;   /* тёмные плашки: карточка офиса, подвал */

  --line-l:  rgba(30, 53, 87, .14);
  --line-l2: rgba(30, 53, 87, .07);

  --r:  20px;           /* общий радиус: один на весь макет, иначе разнобой */
  --r-s: 14px;

  /* Тень в три слоя: контактная линия, ближний ореол и дальний.
     Одна широкая тень читается как серое пятно, а не как объём. */
  --sh-1: 0 1px 2px rgba(30, 53, 87, .06),
          0 6px 14px -8px rgba(30, 53, 87, .14);
  --sh-2: 0 1px 2px rgba(30, 53, 87, .06),
          0 10px 22px -12px rgba(30, 53, 87, .16),
          0 34px 60px -34px rgba(30, 53, 87, .22);
  --sh-3: 0 2px 4px rgba(30, 53, 87, .07),
          0 18px 36px -18px rgba(30, 53, 87, .18),
          0 60px 90px -50px rgba(30, 53, 87, .28);
}

/* фон страницы светлый: иначе на стыке секций мелькает чёрное */
body { background: var(--paper); }

/* --------------------------------------------------------------------------
   Шапка и оглавление на светлом
   -------------------------------------------------------------------------- */

/* при прокрутке плашка чуть подбирается к краю и тень становится плотнее */
.topbar.is-stuck { inset: clamp(6px, .9vh, 12px) 0 auto; }
.topbar.is-stuck .topbar__inner {
  box-shadow: 0 1px 2px rgba(30, 53, 87, .07),
              0 14px 32px -16px rgba(30, 53, 87, .28);
}
.topbar.is-stuck .brand { color: var(--ink); }

.topbar.is-stuck .burger span { background: var(--ink); }

/* навигация появляется только когда шапка «приклеилась»: над фотографией
   героя ряд ссылок мешал заголовку */
.nav {
  display: none;
  gap: clamp(14px, 1.8vw, 30px);
  font-size: clamp(14.5px, 1.11vw, 17px);
  color: var(--ink-2);
}
.nav a { transition: color .3s var(--ease); }
.nav a:hover { color: var(--ink); }

.topbar__cta {
  display: none;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--acc);
  color: #fff;
  font-size: clamp(14px, 1.11vw, 17px);
  font-weight: 500;
  white-space: nowrap;
  transition: background .3s var(--ease);
}
.topbar__cta:hover { background: var(--acc-hi); }

/* Соцсети в шапке. Кружки, а не подписи: рядом стоит кнопка действия,
   и два текстовых пункта отобрали бы у неё внимание. */
.socials { display: none; gap: 8px; }
.social {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-l);
  color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease-out);
}
.social svg { width: 19px; height: 19px; }
.social:hover {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  transform: translateY(-2px);
}
/* пока ссылки нет — пунктир, чтобы заглушка не ушла в бой незамеченной */
.social[href="#"] { border-style: dashed; cursor: default; }
.social[href="#"]:hover { background: transparent; color: var(--ink-2); border-color: var(--line-l); transform: none; }

@media (min-width: 1080px) {
  .nav, .topbar__cta { display: inline-flex; }
  .socials { display: flex; }
  .burger { display: none; }
  /* меню держим по центру шапки: соцсети добавили четвёртый элемент,
     и space-between прижал бы его к логотипу */
  .nav { margin-inline: auto; }
}

/* колонка-оглавление тоже перекрашивается вместе с фоном */
body:has(#topbar.is-stuck) .rail__cap { color: var(--ink-3); }
body:has(#topbar.is-stuck) .rail a { color: var(--ink-3); }
body:has(#topbar.is-stuck) .rail a:hover { color: var(--ink-2); }
body:has(#topbar.is-stuck) .rail .is-here a { color: var(--ink); }
body:has(#topbar.is-stuck) .rail .is-here a::before { background: var(--acc); }

/* --------------------------------------------------------------------------
   Меню на узких экранах

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

@media (max-width: 1079px) {
  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 70;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 var(--gutter, 6vw);
    /* .97 — панель и так непрозрачна, размывать под ней нечего */
    background: rgba(6, 6, 6, .97);
    font-size: clamp(20px, 5.4vw, 26px);
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
  }
  .menu-open .nav { opacity: 1; pointer-events: auto; }
  .nav a {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: var(--text);
  }

  .topbar__cta {
    display: none;
  }
  .menu-open .topbar__cta {
    display: inline-flex;
    position: fixed;
    z-index: 71;
    left: var(--gutter, 6vw);
    right: var(--gutter, 6vw);
    bottom: 40px;
    justify-content: center;
    background: var(--blue-hi);
    color: #fff;
  }

  /* Под раскрытым меню шапка сама по себе не нужна: фон даёт панель.
     Здесь же когда-то снимался `backdrop-filter` — он делал шапку containing
     block для потомков с `position: fixed`, и меню схлопывалось в её полоску.
     Фильтра больше нет нигде в шапке, так что и снимать нечего. */
  .menu-open .topbar {
    background: transparent;
    border-bottom-color: transparent;
  }

  /* Бургер и название остаются поверх раскрытого меню.
     Селекторы с `.topbar` намеренно длиннее: правила светлой шапки
     (`.topbar.is-stuck .brand`) лежат ниже по файлу и при равном весе
     перекрывали бы эти — название на тёмной панели становилось чёрным. */
  .brand  { position: relative; z-index: 80; }
  .burger { position: relative; z-index: 80; }
  .burger span { transform-origin: center; }

  .menu-open .topbar .brand { color: var(--text); }
  .menu-open .topbar .burger span { background: var(--text); }
  .menu-open .topbar .burger span:first-child { transform: translateY(8px) rotate(45deg); }
  .menu-open .topbar .burger span:last-child  { transform: translateY(-8px) rotate(-45deg); }

  /* фон под меню не должен прокручиваться */
  .menu-open, .menu-open body { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Секции
   -------------------------------------------------------------------------- */

/* Секции идут одна за другой без пустых экранов между ними. */
.sec {
  position: relative;
  z-index: 3;
  /* Высота — по содержимому: секция не растягивается на экран целиком,
     чтобы над коротким блоком не висело пустоты. Воздух даёт отступ,
     а не высота окна — его видно и он одинаковый во всех секциях. */
  padding: clamp(78px, 11vh, 152px) 0;
  display: grid;
  align-content: start;
  color: var(--ink);
  /* Ровная бумага. Радиальное свечение стояло под каждой секцией и делало
     страницу одинаковой от начала до конца — самый заметный признак шаблона. */
  background: var(--paper);
}

/* Привязки прокрутки к секциям больше нет.

   Она осталась от той версии, где каждая секция занимала ровно экран, —
   тогда щелчок между блоками был замыслом. Сейчас секции по содержимому,
   и привязка только мешала: браузер на каждой остановке подтягивал
   страницу к ближайшей границе, и это чувствовалось как подтормаживание,
   хотя кадры не терялись. Вернуть — одна строка: html { scroll-snap-type: y proximity }. */

@media (max-width: 900px), (max-height: 700px) {
  .sec { min-height: 0; display: block; }
}

/* Секция на фотографии. Кадр больше не заливаем синим: он и так свой,
   московский, и в светлом виде работает лучше тёмного полотна. Вместо
   заливки — тёплая пелена, плотная слева, где стоит текст, и почти прозрачная
   справа, где нужен сам кадр. Текст поэтому обычный, тёмный. */
.sec--photo {
  position: relative;
  isolation: isolate;
  background: var(--paper-2);
}
.sec--photo::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  /* Тёплый час вместо полудня. Раньше это делал filter: sepia/saturate/
     brightness/contrast прямо в браузере — слой во весь экран с фильтром
     перерисовывался при прокрутке. Тот же пересчёт сделан один раз в файле. */
  background: url('assets/flight-poster-warm.webp') center 38% / cover no-repeat;
}
/* Подпись под лентой ложится на светлую подложку: под ней проходит нижняя,
   почти не забелённая часть кадра, и тёмно-синий текст на башнях терялся.
   Заливать весь низ пеленой нельзя — по нему идёт дуга следующей секции. */
.sec--photo .note-line {
  width: fit-content;
  max-width: min(68ch, 100%);
  padding: 10px clamp(16px, 2vw, 26px);
  border-radius: 999px;
  background: rgba(255, 253, 249, .93);
  color: var(--ink-2);
}

.sec--photo::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(250, 249, 246, .97) 0%,
      rgba(250, 248, 243, .9) 26%,
      rgba(252, 246, 234, .58) 52%,
      rgba(252, 243, 226, .3) 74%,
      rgba(252, 242, 224, .22) 100%),
    linear-gradient(180deg, rgba(255, 253, 249, .72) 0%, transparent 34%);
}

/* цветовые полосы задают ритм: бумага → белый → лайм → бумага */
.sec--tone {
  background: var(--paper-2);
}

/* Дуга на стыке секций: светлая секция «выпирает» в тёмную куполом своего
   же цвета. Купол вешаем на нижнюю секцию, а не на верхнюю: она идёт позже
   в потоке и при равном z-index рисуется поверх — не нужен ни клип, ни маска
   на кадре. Ширина ровно по секции: эллипс шире окна давал бы горизонтальную
   прокрутку, а радиус в процентах даёт ту же пологую дугу без выхода за край. */
.sec--arc {
  --arc-h: clamp(32px, 5.4vw, 92px);
  padding-top: calc(clamp(78px, 11vh, 152px) + var(--arc-h) * .5);
}
.sec--arc::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: calc(var(--arc-h) * -1);
  height: var(--arc-h);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: inherit;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Заголовочная группа
   -------------------------------------------------------------------------- */

/* В одноколоночных секциях: колонтитул прижат к верху экрана, содержимое —
   к низу. Раньше блок висел островком по центру и с обеих сторон оставался
   одинаковый пустой запас — экран читался недозаполненным. */
.sec > .shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Абстрактный рисунок в пустых полях

   Тонкие концентрические окружности — чтобы широкие поля светлых секций
   не читались как недовёрстанные. Ничего не значат, ничего не перекрывают.
   -------------------------------------------------------------------------- */
.sec--art { overflow-x: clip; }
.sec--art::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: var(--art-y, 50%);
  left: var(--art-x, auto);
  right: var(--art-r, -6vw);
  translate: 0 -50%;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  background: repeating-radial-gradient(circle at 50% 50%,
              rgba(63, 111, 168, .17) 0 1px, transparent 1px 38px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 76%);
  opacity: .7;
}
.sec--art--l::after { right: auto; left: var(--art-x, -8vw); }

/* Колонтитул секции — планка во всю ширину: слева номер и название, справа
   заметка, между ними линия со стрелкой. Раньше это была строчка по центру,
   и границы между блоками не читались вовсе. */
.sec__meta {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 20px);
  margin-bottom: clamp(28px, 4.4vh, 56px);
  padding-bottom: clamp(12px, 1.8vh, 18px);
  border-bottom: 1px solid var(--line-l2);
  font-size: clamp(12px, .92vw, 14px);
}
.sec__ix {
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.sec__name {
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
/* линия со стрелкой: линия — градиентом, наконечник — картинкой справа */
.sec__line {
  flex: 1;
  min-width: 24px;
  height: 9px;
  background:
    linear-gradient(var(--line-l), var(--line-l)) left center / calc(100% - 7px) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='none' stroke='%231e3557' stroke-opacity='.34' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 3.5L1 8'/%3E%3C/svg%3E") right center / 8px 9px no-repeat;
}
.sec__aside {
  text-align: right;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: clamp(11px, .84vw, 13px);
  color: var(--acc);
}

/* --------------------------------------------------------------------------
   Заголовочная гарнитура

   Unbounded стоит только на заголовках и крупных цифрах — там, где текста
   мало и характер шрифта работает. В наборе он широкий и утомляет, поэтому
   абзацы, подписи, кнопки и мелкие заголовки карточек остаются на Manrope.
   -------------------------------------------------------------------------- */
.statement,
.bigh span,
.why__h,
.cta__h,
.flight__t,
.offer__head h3,
.stair__s h3,
.stat-row b,
.flight__stats b,
.cta__stats b,
.reviews__score > b,
.why__n,
.stair__s b {
  font-family: var(--head);
}

.statement {
  margin: 0 auto clamp(32px, 5vh, 62px);  max-width: 22ch;
  font-size: clamp(21px, 2.4vw, 35px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--ink);
}
/* Цветное слово в заголовке снято: на сервисных сайтах его не бывает. */
.statement em { font-style: normal; }
.statement i  { font-style: normal; }
/* на лайме белый акцент проваливается — берём глубокий сине-зелёный */

/* Заголовок в два веса: обычный текст и одно слово потяжелее.
   Manrope переменный, поэтому разница честная, а не дорисованная браузером. */
.statement--mix { font-weight: 400; max-width: 26ch; }
.statement--mix em { font-weight: 800; }


/* --------------------------------------------------------------------------
   Направления и валюты
   -------------------------------------------------------------------------- */

/* перечень валют строкой — без плашек и заливок */
/* Лента валют. Едет влево сама и ускоряется от прокрутки — позицию
   задаёт script.js, поэтому здесь только раскладка. */
.mrq {
  margin: clamp(20px, 3vh, 34px) 0 0;
  /* во всю ширину окна, за пределы оболочки: лента должна уходить за края */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mrq__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.mrq__row {
  display: flex;
  gap: clamp(10px, 1.1vw, 16px);
  padding-right: clamp(10px, 1.1vw, 16px);
}
.mrq__i {
  flex: none;
  display: grid;
  place-items: center;
  min-width: clamp(132px, 12vw, 178px);
  padding: clamp(13px, 1.8vh, 18px) clamp(14px, 1.4vw, 22px);
  border: 1px solid var(--line-l);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--sh-1);
  text-align: center;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              border-color .3s var(--ease);
}
.mrq__i:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--acc-soft);
}
/* Флаг настоящий, из открытого набора flagcdn: рисовать их самому —
   значит показать Казахстан без орла, а Корею без триграмм. */
.mrq__f {
  width: 27px;
  height: 18px;
  margin-bottom: 8px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(30, 53, 87, .16);
}
.mrq__i b {
  display: block;
  font-size: clamp(18px, 1.7vw, 25px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.mrq__i i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: clamp(12px, .95vw, 14px);
  color: var(--ink-2);
}
/* Прямые направления — синий код и синяя обводка. Остальные не глушим
   до серого (плитки читались как выключенные), но и не красим синим:
   выдавать их за прямые нельзя. */
.mrq__i--on {
  border-color: var(--acc-soft);
  background: linear-gradient(180deg, #fff, #f2f7fd);
}
.mrq__i--on b { color: var(--acc); }
.mrq__i--more {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--line-l);
}
.mrq__i--more b { color: var(--ink-3); }


/* --------------------------------------------------------------------------
   Валюты
   -------------------------------------------------------------------------- */


/* строка с цифрой охвата: держит масштаб рядом со списком валют */
.stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(18px, 2.8vh, 28px) auto 0;
  max-width: 760px;
  padding: clamp(16px, 1.6vw, 24px) clamp(20px, 2vw, 30px);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--sh-1);
}
.stat-row b {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(84px, 8vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}
.stat-row span {
  max-width: 34ch;
  font-size: clamp(14px, 1.11vw, 17px);
  line-height: 1.5;
  color: var(--ink-2);
}

.note-line {
  margin: clamp(16px, 2.4vh, 26px) auto 0;
  max-width: 68ch;
  text-align: center;
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Криптовалюты на выбор
   -------------------------------------------------------------------------- */

.picks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
.picks__i {
  position: relative;
  padding: clamp(18px, 2.2vh, 24px) clamp(16px, 1.5vw, 22px);
  padding-right: clamp(58px, 5vw, 74px);   /* место под значок в углу */
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--sh-1);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.picks__i:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
/* тикер значком в углу — как в референсе */
.picks__t {
  position: absolute;
  top: clamp(14px, 1.8vh, 20px);
  right: clamp(14px, 1.3vw, 20px);
  display: grid;
  place-items: center;
  width: clamp(38px, 3.4vw, 46px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-3);
  font-size: clamp(10.5px, .85vw, 12.5px);
  font-weight: 700;
  letter-spacing: .02em;
}
.picks__i b {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(15.5px, 1.25vw, 19px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.picks__i p {
  margin: 0;
  font-size: clamp(13px, .98vw, 15px);
  line-height: 1.45;
  color: var(--ink-2);
}
/* Цвет монеты — чтобы её было видно, не вчитываясь в тикер. Оттенки
   затемнены от фирменных ровно настолько, чтобы белый тикер на них
   набирал 4.5:1; у биткоина наоборот — фирменный оранжевый и тёмный текст,
   затемнённый он перестаёт читаться как биткоин. */
.picks__t[data-coin] { color: #fff; }
.picks__t[data-coin="usdt"] { background: #1f8465; }
.picks__t[data-coin="usdc"] { background: #2775ca; }
.picks__t[data-coin="btc"]  { background: #f7931a; color: var(--ink); }
.picks__t[data-coin="eth"]  { background: #4c6ce7; }
.picks__t[data-coin="ton"]  { background: #007abc; }
.picks__t[data-coin="trx"]  { background: #ea0026; }

/* подтверждённое направление помечено самой карточкой, а не значком:
   значки теперь заняты цветом монеты */
.picks__i--on {
  border: 1px solid var(--acc-soft);
  background: linear-gradient(180deg, #fff, #f2f7fd);
}
.picks__i--more {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--line-l);
}
.picks__i--more .picks__t { background: transparent; border: 1px dashed var(--line-l); }

/* --------------------------------------------------------------------------
   Отзывы из Яндекс.Карт
   -------------------------------------------------------------------------- */

.reviews {
  display: grid;
  grid-template-columns: minmax(0, .56fr) minmax(0, 2fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(20px, 3vh, 38px);
  align-items: stretch;
}

/* Карточка рейтинга — единственное тёмное пятно в светлом блоке: цифра 5,0
   должна цепляться взглядом раньше самих отзывов. */
.reviews__score {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 20px;
  background: linear-gradient(158deg, #22293a 0%, #12161f 62%);
  color: #e9edf4;
  box-shadow: 0 22px 50px rgba(16, 26, 44, .3);
}
/* блик по верхнему правому углу — как на стеклянной табличке */
.reviews__score::before {
  content: '';
  position: absolute;
  z-index: 0;
  right: -28%;
  top: -34%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(201, 169, 97, .3), transparent 68%);
}
.reviews__score > * { position: relative; z-index: 1; }

.reviews__src {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12.5px, .95vw, 14.5px);
  font-weight: 600;
  color: rgba(233, 237, 244, .78);
}
.reviews__src svg { width: 14px; height: auto; fill: var(--bronze-hi); }

.reviews__score > b {
  font-size: clamp(46px, 4.6vw, 68px);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--bronze-hi);
}
/* Звёзды рисованные. Текстовые ★★★★★ выдают вёрстку «на скорую руку»:
   у них разный кегль в разных шрифтах и нет контроля над интервалом. */
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 16px; height: auto; fill: var(--bronze-hi); }
.stars--sm svg { width: 14px; fill: var(--bronze); }
.reviews__label {
  margin-top: 2px;
  font-size: clamp(12.5px, .95vw, 14.5px);
  line-height: 1.45;
  color: rgba(233, 237, 244, .62);
}
.reviews__link {
  margin-top: auto;
  padding-top: clamp(14px, 2vh, 20px);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  color: var(--bronze-hi);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(201, 169, 97, .45);
}
.reviews__link:hover { text-decoration-color: currentColor; }

/* Управление лентой. Стрелки — в карточке рейтинга, а не поверх отзывов:
   поверх они закрывают первую и последнюю строку текста. */
.reviews__nav {
  margin-top: clamp(14px, 2vh, 20px);
  padding-top: clamp(14px, 2vh, 20px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  gap: 8px;
}
.reviews__arw {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 169, 97, .5);
  border-radius: 999px;
  background: transparent;
  color: var(--bronze-hi);
  cursor: pointer;
  transition: background .28s var(--ease), color .28s var(--ease),
              opacity .28s var(--ease), transform .28s var(--ease-out);
}
.reviews__arw svg { width: 19px; height: 19px; }
.reviews__arw--next svg { transform: rotate(180deg); }
.reviews__arw:hover { background: var(--bronze-hi); color: #12161f; transform: translateY(-2px); }
.reviews__arw:disabled { opacity: .32; cursor: default; transform: none; }
.reviews__pos {
  margin-left: auto;
  font-size: clamp(13px, 1vw, 15px);
  font-variant-numeric: tabular-nums;
  color: rgba(233, 237, 244, .55);
}
.reviews__pos b { font-weight: 600; color: #fff; }

/* Лента: три карточки на экран, остальные — прокруткой вбок.
   Snap по оси X, поэтому лента всегда останавливается на целой карточке. */
.reviews__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(12px, 1.4vw, 18px)) / 3);
  gap: clamp(12px, 1.4vw, 18px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* запас под тень и подъём карточки при наведении */
  padding: 7px 0 16px;
  scrollbar-width: none;
}
.reviews__list::-webkit-scrollbar { display: none; }
.reviews__list:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
  border-radius: 22px;
}
.review {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2vw, 26px);
  border-radius: 20px;
  background: linear-gradient(168deg, #fff 0%, #fbfaf7 100%);
  box-shadow: 0 1px 2px rgba(30, 53, 87, .05),
              0 18px 40px -22px rgba(48, 40, 24, .4);
}
.review p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--ink);
}
.review footer {
  margin-top: auto;
  padding-top: clamp(12px, 1.8vh, 18px);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Кружок с первой буквой имени вместо аватарки: настоящих фотографий у нас
   нет, а рисовать людям лица — последнее, чего этому сайту не хватало. */
.review__ava {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0ece2;
  /* бронза здесь темнее общей: на песочной плашке --bronze давал 2,95 —
     буква читалась как водяной знак */
  color: #826539;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.review__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.review__who b {
  font-size: clamp(13.5px, 1.02vw, 15.5px);
  font-weight: 600;
  color: var(--ink);
}
.review__who span {
  font-size: clamp(12px, .92vw, 13.5px);
  color: var(--ink-3);
}

/* Заглушки видно невооружённым глазом — чтобы они не уехали в бой
   под видом настоящих отзывов. */
[data-stub] { opacity: .55; }
.review p[data-stub]::after {
  content: ' (заглушка)';
  font-size: .82em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acc);
}
.reviews__link[href="#"]::after { content: ' — ссылку добавит клиент'; }

/* --------------------------------------------------------------------------
   Первая сделка: синий блок и два чёрных
   -------------------------------------------------------------------------- */

/* заголовок капсом — на этом развороте он работает как вывеска */
.statement--caps {
  text-transform: uppercase;
  letter-spacing: -.01em;
  max-width: 26ch;
}
/* Заголовок в одно слово: обычный кегль на нём смотрится потерянно —
   даём крупнее и с разрядкой, чтобы слово держало экран само. */
.statement--word {
  max-width: none;
  font-size: clamp(30px, 4.2vw, 64px);
  font-weight: 700;
  letter-spacing: .01em;
}


/* --------------------------------------------------------------------------
   Шаги сделки
   -------------------------------------------------------------------------- */

/* Лестница: ступени растут слева направо, номера крупно в основании.
   Порядок читается формой, а не только цифрами. */
.stair {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  align-items: end;
}
.stair__s {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.4vh, 26px) clamp(16px, 1.5vw, 24px) clamp(52px, 7vh, 78px);
  border-radius: 16px 16px 0 0;
  background: var(--white);
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
/* ступени: каждая следующая выше предыдущей */
.stair__s:nth-child(1) { min-height: clamp(190px, 26vh, 250px); }
.stair__s:nth-child(2) { min-height: clamp(220px, 30vh, 288px); }
.stair__s:nth-child(3) { min-height: clamp(250px, 34vh, 326px); }
.stair__s:nth-child(4) { min-height: clamp(280px, 38vh, 364px); }
.stair__s:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }

.stair__s h3 {
  margin: 0 0 8px;
  font-size: clamp(16.5px, 1.35vw, 20px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.stair__s p {
  margin: 0;
  font-size: clamp(13.5px, 1.02vw, 16px);
  line-height: 1.5;
  color: var(--ink-2);
}
/* номер в основании ступени — крупный и приглушённый */
.stair__s b {
  position: absolute;
  left: clamp(12px, 1.2vw, 20px);
  bottom: clamp(-14px, -1.6vh, -8px);
  font-size: clamp(58px, 6vw, 92px);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
  color: rgba(30, 53, 87, .1);
  pointer-events: none;
}

/* последняя ступень — тёмная: сделка заканчивается документами */
.stair__s--last {
  background: linear-gradient(155deg, #37659b, var(--acc-deep) 60%, var(--night));
  color: #fff;
}
.stair__s--last p { color: rgba(226, 236, 248, .8); }
.stair__s--last b { color: rgba(255, 255, 255, .18); }

/* строка «что именно оплачиваем» — компактный перечень под карточками */
.pays {
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  font-size: clamp(13.5px, 1.02vw, 16px);
}
.pays__k {
  font-size: clamp(11.5px, .88vw, 13px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc);
}
.pays span:not(.pays__k) {
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--sh-1);
  color: var(--ink-2);
}

/* замыкающая строка блока: короткое действие вместо пустого низа экрана */
.outro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 4vh, 48px);
}
.outro p { margin: 0; font-size: clamp(15px, 1.05vw, 18px); color: var(--ink-2); }
.outro__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--acc);
  color: #fff;
  font-size: clamp(15px, 1.18vw, 18px);
  font-weight: 500;
  white-space: nowrap;
  transition: background .35s var(--ease), transform .3s var(--ease-out);
}
.outro__btn:hover { background: var(--acc-hi); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Офис
   -------------------------------------------------------------------------- */

.office {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}
.office__card {
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: 20px;
  background: linear-gradient(155deg, #37659b, var(--acc-deep) 60%, var(--night));
  color: #eaf1fa;
}
.office__k {
  display: block;
  font-size: clamp(11.5px, .88vw, 13px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc-soft);
}
.office__addr {
  margin: 10px 0 clamp(14px, 2vh, 22px);
  font-size: clamp(23px, 2.3vw, 34px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.office__rows { margin: 0; }
.office__rows > div {
  display: grid;
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
  gap: 14px;
  padding: clamp(9px, 1.2vh, 13px) 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.office__rows dt {
  font-size: clamp(12.5px, .95vw, 14.5px);
  color: rgba(233, 239, 230, .5);
}
.office__rows dd {
  margin: 0;
  font-size: clamp(13.5px, 1.02vw, 16px);
  line-height: 1.45;
}
.office__act {
  margin-top: clamp(18px, 2.6vh, 26px);
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.office__btn {
  flex: 1 1 auto;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--acc);
  color: #fff;
  text-align: center;
  font-size: clamp(13.5px, 1.02vw, 16px);
  font-weight: 500;
  transition: background .3s var(--ease);
}
.office__btn:hover { background: var(--acc-hi); }
.office__btn--ghost {
  background: rgba(255, 255, 255, .09);
  color: #e9efe6;
}
.office__btn--ghost:hover { background: rgba(255, 255, 255, .16); }

/* карта отдаётся виджетом Яндекса — единственный внешний ресурс на странице */
.office__map {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sh-1);
  min-height: clamp(240px, 32vh, 420px);
  background: var(--paper);
}
.office__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}

/* --------------------------------------------------------------------------
   Фотографии офиса
   -------------------------------------------------------------------------- */

/* Галерея во всю ширину окна, за пределы оболочки: снимки офиса —
   единственное прямое доказательство, что компания существует физически,
   и в колонку на 1280px они читались как миниатюры. */
.gal {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: clamp(10px, 1.2vw, 20px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 25vh, 268px);
  gap: clamp(10px, 1.1vw, 16px);
}
.gal__i {
  margin: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  border-radius: 16px;
  background: var(--paper-2) center / cover no-repeat;
}
/* шторка снизу — иначе подпись теряется на светлых кадрах */
.gal__i::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, transparent, rgba(15, 32, 56, .78));
}
.gal__i--big { grid-column: span 2; grid-row: span 2; }
.gal__i figcaption {
  position: relative;
  z-index: 1;
  font-size: clamp(12.5px, .98vw, 15px);
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* пустой слот остаётся заметным, если кадр не подставлен */
.gal__i[data-todo] { border: 1px dashed var(--line-l); }
.gal__i[data-todo]::after { content: none; }
.gal__i[data-todo] figcaption { color: var(--ink-3); text-shadow: none; }
.gal__i[data-todo] figcaption::after { content: ' — ждём фото'; }

/* --------------------------------------------------------------------------
   Стоимость
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Почему легко начать

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

.why {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 70px);
  align-items: start;
}
.why__h {
  margin: 0;
  font-size: clamp(23px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--acc);
}

/* Метки-стикеры: слегка повёрнуты, поэтому читаются как наклейки,
   а не как ещё один ряд кнопок. */
.why__tags {
  margin: clamp(14px, 2vh, 22px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.why__tags li {
  padding: 7px 15px;
  border: 1px solid var(--line-l);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--sh-1);
  font-size: clamp(12px, .92vw, 14px);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.why__tags li:nth-child(1) { rotate: -3deg; }
.why__tags li:nth-child(2) { rotate: 2.5deg; }
.why__tags li:nth-child(3) { rotate: -1.5deg; }

/* Коллаж: широкий кадр и круглый поверх него. Снимки без лиц —
   на два кадра с людьми согласие ещё не подтверждено. */
.why__ph {
  position: relative;
  margin-top: clamp(24px, 4vh, 44px);
  padding-bottom: clamp(28px, 4vh, 48px);
  padding-left: clamp(28px, 4vw, 56px);
}
.why__ph1,
.why__ph2 {
  margin: 0;
  background: var(--paper) center / cover no-repeat;
  box-shadow: var(--sh-2);
}
.why__ph1 {
  height: clamp(190px, 26vh, 290px);
  border-radius: 18px;
}
.why__ph2 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(96px, 11vw, 142px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid var(--paper-2);
}
/* четырёхлучевая искра — тот же мотив, что у окружностей в пустых полях */
.why__spark {
  position: absolute;
  right: clamp(-6px, -.6vw, -2px);
  top: clamp(-14px, -1.4vw, -6px);
  width: clamp(22px, 2.4vw, 34px);
  aspect-ratio: 1;
  background: var(--acc-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.5 6.4 5.1 11 11.5 11.5v1C17.1 13 12.5 17.6 12 24h-1C10.5 17.6 5.9 13 -.5 12.5v-1C5.9 11 10.5 6.4 11 0z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.5 6.4 5.1 11 11.5 11.5v1C17.1 13 12.5 17.6 12 24h-1C10.5 17.6 5.9 13 -.5 12.5v-1C5.9 11 10.5 6.4 11 0z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

.why__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.why__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 34px);
  align-items: center;
  padding: clamp(20px, 3vh, 34px) 0;
  border-top: 1px solid var(--line-l);
}
.why__list li:last-child { border-bottom: 1px solid var(--line-l); }
.why__n {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 300;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.why__list p {
  margin: 0;
  font-size: clamp(14.5px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--ink-2);
}
.why__list b { font-weight: 700; color: var(--ink); }

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

/* --------------------------------------------------------------------------
   Кому подходит
   -------------------------------------------------------------------------- */

/* По образцу MoneyPort, но вертикально: шапка сверху, карточки под ней
   в одну колонку. Панели идут друг за другом, а не рядом. */
.offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: start;
}
/* Снимок офиса в верхнем углу каждой панели: он растворяется к середине
   и к левому краю, поэтому под заголовком и списком остаётся чистая заливка.
   Кадры без людей — на два снимка с лицами согласие ещё не подтверждено,
   и множить их по странице до подтверждения нельзя. */
.offer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(22px, 2.6vw, 38px);
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--sh-1);
}
.offer::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 66%;
  aspect-ratio: 4 / 3;
  background: center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 82% 88% at 100% 0%, #000 0 30%, transparent 74%);
          mask-image: radial-gradient(ellipse 82% 88% at 100% 0%, #000 0 30%, transparent 74%);
}
.offer--dark::before {
  background-image: url('assets/office-counter.webp');
  opacity: .22;
}
.offer:not(.offer--dark)::before {
  background-image: url('assets/office-lounge.webp');
  /* на белом снимок приходится глушить сильнее: светлый фон не прощает
     ни цвета, ни контраста под текстом */
  opacity: .17;
  filter: grayscale(.35);
}
/* Панели контрастной парой: слева бизнес на чёрном, справа частные лица
   на белом. Раньше обе были белыми и разница между ними читалась только
   по заголовку — колонки сливались в одну простыню. */
.offer__head h3 { color: var(--ink); }

.offer--dark {
  background: #101722;
  box-shadow: 0 22px 56px rgba(16, 26, 44, .26);
}
.offer--dark .offer__head h3 { color: #fff; }
.offer--dark .offer__head p { color: rgba(233, 239, 246, .66); }
/* Плашки списка непрозрачные: под ними лежит снимок, и через полупрозрачный
   фон светлые участки кадра поднимали яркость подложки — подпись под
   заголовком строки падала до 3,3 при норме 4,5. */
.offer--dark .offer__list li {
  background: #191f29;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: none;
}
.offer--dark .offer__list li:hover { box-shadow: none; background: #222a37; }
/* Цвет тоже явно: `.offer--dark .offer__list span` перебивал белый номер
   и красил его в цвет подписи — контраст падал до 4,2. */
.offer--dark .offer__list .offer__ix { background: var(--acc-bright); color: #fff; }
.offer--dark .offer__list b { color: #fff; }
.offer--dark .offer__list span { color: rgba(233, 239, 246, .64); }
.offer__head {
  max-width: 62ch;
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
.offer__head h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.offer__head p {
  margin: 8px 0 0;
  font-size: clamp(14.5px, 1.1vw, 17px);
  line-height: 1.55;
  color: var(--ink-2);
}
.offer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(8px, 1vh, 12px);
}
.offer__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  align-items: center;
  padding: clamp(14px, 1.8vh, 19px) clamp(15px, 1.6vw, 22px);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--sh-1);
}
/* вместо иконки — индекс: рисованных значков на сайте нет намеренно */
/* Селектор длиннее нарочно: `.offer__list span` перебивал цвет,
   и белые номера красились в цвет подписи. */
.offer__list .offer__ix {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--acc);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Цвет задаём явно: на синей панели карточки белые, а текст в них
   наследовал бы белый цвет панели и пропадал. */
.offer__list b {
  display: block;
  font-size: clamp(15.5px, 1.2vw, 18.5px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--ink);
}
.offer__list span {
  display: block;
  margin-top: 3px;
  font-size: clamp(13.5px, 1.02vw, 16px);
  line-height: 1.45;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Вопросы
   -------------------------------------------------------------------------- */

/* две колонки: одиннадцать пунктов в одну съедали бы два экрана */
/* Заголовок-слово: одно слово во весь экран, формулировка — подписью под
   ним. Само слово скрыто от программ чтения с экрана: в озвучке остаётся
   только осмысленная строка, а не «эф-а-ку». */
.bigh {
  margin: 0 0 clamp(22px, 3.4vh, 44px);
  text-align: center;
  line-height: .86;
}
.bigh span {
  display: block;
  text-transform: uppercase;
  font-size: clamp(46px, 9.6vw, 150px);
  font-weight: 700;
  letter-spacing: -.045em;
  color: var(--acc);
}
.bigh em {
  display: block;
  margin-top: clamp(8px, 1.4vh, 16px);
  font-style: normal;
  font-size: clamp(17px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink-2);
}
/* Вопросы заходят на слово: карточки перекрывают нижнюю треть букв —
   так блок читается одним куском, а не заголовком и списком по отдельности. */
/* нахлёст считаем от кегля слова, а не от ширины окна: иначе на узком
   экране карточки съедали букву целиком */
.bigh--over { margin-bottom: calc(clamp(46px, 9.6vw, 150px) * -.15); }
.bigh--over + .faq { position: relative; z-index: 1; }

/* Вариант заголовка для отзывов: по левому краю, тонким начертанием и
   тёмно-синим. Жирные 800 на светлом кадре выглядели как крик, а само слово
   и так занимает половину экрана — веса ему добавлять нечем. */
.bigh--left {
  text-align: left;
  margin-bottom: clamp(26px, 4vh, 48px);
}
.bigh--left span {
  /* кегль меньше общего: слово стоит у левого края и не должно упираться
     в башни на кадре — оно подпись к блоку, а не вывеска */
  font-size: clamp(34px, 6.2vw, 96px);
  font-weight: 300;
  letter-spacing: -.035em;
  color: var(--ink);
}
.bigh--left em {
  position: relative;
  margin-top: clamp(14px, 2vh, 22px);
  padding-left: clamp(58px, 6vw, 92px);
  max-width: 34ch;
  font-size: clamp(15.5px, 1.3vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-2);
}
/* короткий бронзовый штрих вместо буллита */
.bigh--left em::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: clamp(38px, 4vw, 62px);
  height: 2px;
  background: var(--bronze);
}

.faq {
  columns: 2;
  column-gap: clamp(12px, 1.4vw, 20px);
}
.faq details {
  break-inside: avoid;
  margin-bottom: 10px;
  padding: 0 clamp(16px, 1.6vw, 22px);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--sh-1);
}
.faq summary {
  position: relative;
  padding: 15px 40px 15px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(16px, 1.36vw, 21px);
  font-weight: 500;
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink-2); }
.faq summary::after {          /* плюс, который складывается в минус */
  content: '';
  position: absolute;
  right: 2px; top: 50%;
  translate: 0 -50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 9px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 9px no-repeat,
    var(--paper-2);
  transition: rotate .4s var(--ease-out), background-size .4s var(--ease-out);
}
.faq details[open] summary::after { rotate: 90deg; background-size: 9px 1.5px, 0 0; }
.faq details p {
  margin: 0 0 20px;
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.62;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Заявка
   -------------------------------------------------------------------------- */

/* Тёмная полоса во всю ширину окна: последний экран отбивается от светлой
   страницы цветом, а не карточкой с полями по бокам. Секция под него
   без вертикальных отступов (.sec--flush) — полоса стыкуется с подвалом. */
.sec--flush { padding: 0; }
.cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* по бокам — ровно до края оболочки, чтобы текст стоял в общей сетке */
  padding: clamp(52px, 7.5vh, 100px) max(clamp(18px, 4vw, 40px), calc(50vw - var(--shell) / 2));
  background: linear-gradient(158deg, #232830 0%, #14171d 62%);
  color: #fff;
}

/* Верхняя строка: заголовок слева, цифры справа — на всю ширину полосы.
   Одной колонкой посередине оставалась пустая половина. */
.cta__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-bottom: clamp(26px, 4vh, 44px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cta__meta {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, .9vw, 14px);
  margin-bottom: clamp(10px, 1.6vh, 16px);
  font-size: clamp(12px, .92vw, 14px);
}
.cta__meta .sec__ix { color: rgba(233, 239, 246, .45); }
.cta__meta .sec__name { color: var(--acc-soft); }

.cta__h {
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  font-size: clamp(18px, 1.95vw, 29px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
}
.cta__h em { font-style: normal; color: var(--acc-soft); }

.cta__p {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(14.5px, 1.05vw, 17px);
  line-height: 1.6;
  color: rgba(233, 239, 246, .64);
}

.cta__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 36px);
}
.cta__stats b {
  display: block;
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
}
.cta__stats span { font-size: clamp(12.5px, .95vw, 14px); color: rgba(233, 239, 246, .5); }

/* Нижняя часть: форма слева, телефон и прямые контакты справа. */
.cta__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  padding-top: clamp(28px, 4.4vh, 52px);
}

/* Поля-строки вместо тёмных прямоугольников: три одинаковые скруглённые
   коробки на чёрном — самая безликая часть любой формы. Строка с номером
   продолжает нумерацию, которой размечен весь сайт. */
.form { display: flex; flex-direction: column; gap: clamp(20px, 3.6vh, 42px); }
.fld {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 6px clamp(12px, 1.4vw, 20px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  transition: border-color .3s var(--ease);
}
.fld:focus-within { border-bottom-color: var(--acc-soft); }
.fld__n {
  grid-row: span 2;
  font-family: var(--head);
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(233, 239, 246, .34);
  transition: color .3s var(--ease);
}
.fld:focus-within .fld__n { color: var(--acc-soft); }
.fld__t {
  font-size: clamp(11.5px, .84vw, 13px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(233, 239, 246, .5);
}
.form input {
  width: 100%;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: clamp(16px, 1.24vw, 19px);
}
.form input:focus { outline: none; }
.form input::placeholder { color: rgba(233, 239, 246, .3); }

.form__go {
  margin-top: clamp(6px, 1.4vh, 14px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
}
.form__note {
  margin: 0;
  flex: 1;
  min-width: 200px;
  font-size: clamp(12px, .86vw, 13.5px);
  line-height: 1.5;
  color: rgba(233, 239, 246, .44);
}

.cta__side {
  display: grid;
  gap: clamp(20px, 3vh, 32px);
  justify-items: center;
}

.cta .btn { background: var(--acc-bright); }
.cta .btn:hover { background: var(--acc-bright-hi); }
/* стрелка в кнопке отъезжает при наведении */
.btn i {
  width: 18px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate .35s var(--ease-out);
}
.btn:hover i { translate: 5px 0; }

@media (max-width: 1000px) {
  .cta__top { grid-template-columns: 1fr; align-items: start; }
  .cta__body { grid-template-columns: 1fr; }
  .cta__side { order: -1; }
}

/* --------------------------------------------------------------------------
   Телефон с перепиской

   Нарисован разметкой, не фотографией: снимок чужого макета на сайте
   платёжного агента выглядит как заимствование, а генерация — как генерация.
   -------------------------------------------------------------------------- */
/* Кольца за телефоном — тот же мотив, что в пустых полях светлых секций. */
/* overflow-x: clip, а не hidden: hidden сделал бы блок прокручиваемым
   контейнером, а нам нужно просто обрезать кольца по краю экрана. */
.cta__phone { position: relative; overflow-x: clip; display: flex; justify-content: center; }
.cta__rings {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 46%;
  translate: -50% -50%;
  width: min(150%, 460px);
  aspect-ratio: 1;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%,
              rgba(255, 255, 255, .11) 0 1px, transparent 1px 34px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 52%, transparent 74%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0 52%, transparent 74%);
}
.cta__phone .phone { position: relative; z-index: 1; }
.phone {
  position: relative;
  width: min(286px, 100%);
  aspect-ratio: 9 / 18.2;
  padding: 9px;
  border-radius: 40px;
  background: linear-gradient(160deg, #444a54, #191c22);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .48),
              inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.phone__bar {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 50%;
  translate: -50% 0;
  width: 82px;
  height: 21px;
  border-radius: 999px;
  background: #0a0c10;
}
.phone__scr {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 32px;
  background: #0d1015;
  overflow: hidden;
}
.phone__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 40px 15px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: #151a23;
}
.phone__ava {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--acc-bright);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.phone__who { display: flex; flex-direction: column; line-height: 1.25; }
.phone__who b { font-size: 14px; font-weight: 600; color: #fff; }
.phone__who i { font-style: normal; font-size: 11.5px; color: rgba(233, 239, 246, .45); }

.phone__chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  overflow: hidden;
}
.bub {
  position: relative;
  margin: 0;
  max-width: 84%;
  padding: 9px 12px 17px;
  border-radius: 14px;
  font-size: 12.8px;
  line-height: 1.42;
}
.bub time { position: absolute; right: 10px; bottom: 5px; font-size: 10px; opacity: .6; }
.bub--out {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: var(--acc-bright);
  color: #fff;
}
.bub--in {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  background: #1d232d;
  color: #e7edf6;
}
.bub--file { display: flex; align-items: center; gap: 9px; padding-right: 46px; }
.bub__f {
  position: relative;
  padding-left: 22px;
  font-size: 12.4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bub__f::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.2-9.19a4 4 0 0 1 5.65 5.66l-9.2 9.19a2 2 0 0 1-2.82-2.83l8.49-8.48'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 1000px) {
  .phone { width: min(260px, 100%); }
}

/* кнопка светлой темы: тёмная плашка с лаймовой заливкой на наведении */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--acc);
  color: #fff;
  font: inherit;
  font-size: clamp(15.5px, 1.22vw, 18.5px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  overflow: hidden;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.btn::after { content: none; }
.btn:hover { background: var(--acc-hi); }

/* --------------------------------------------------------------------------
   Блог: список статей

   Карточка-строка, а не плитка: у статьи есть дата, тег и подзаголовок,
   и в строке они читаются подряд, как в оглавлении, а не разбегаются
   по углам квадрата.
   -------------------------------------------------------------------------- */
.posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
}
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--line-l2);
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--sh-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
              border-color .3s var(--ease);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--acc-soft);
}
.post-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.post-card__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 8px;
  font-size: clamp(11.5px, .86vw, 13px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.post-card__tag { font-weight: 700; color: var(--acc); }
.post-card b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--head);
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--ink);
}
.post-card p {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--ink-2);
}
/* стрелка вместо слова «читать»: подпись повторяла бы заголовок */
.post-card__go {
  width: clamp(40px, 3.4vw, 48px);
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: var(--paper);
  transition: background .3s var(--ease), translate .3s var(--ease-out);
}
.post-card__go::before {
  content: '';
  display: block;
  height: 100%;
  background: var(--acc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 46% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 46% no-repeat;
}
.post-card:hover .post-card__go { background: var(--acc); translate: 4px 0; }
.post-card:hover .post-card__go::before { background: #fff; }

/* Пока статей нет. Показывает скрипт, когда в списке нет ни одной карточки:
   на `:empty` завязываться нельзя — список содержит переносы строк и
   комментарии-маркеры, поэтому пустым для CSS не считается никогда. */
.posts__empty {
  display: none;
  margin: clamp(18px, 2.6vh, 30px) 0 0;
  padding: clamp(24px, 3vw, 40px);
  border: 1px dashed var(--line-l);
  border-radius: 20px;
  text-align: center;
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.6;
  color: var(--ink-2);
}
.posts__empty.is-shown { display: block; }

@media (max-width: 700px) {
  .post-card { grid-template-columns: 1fr; }
  .post-card__go { justify-self: start; }
}

/* --------------------------------------------------------------------------
   Блог: страница статьи

   Одна колонка в 68 знаков. Всё остальное на сайте широкое, но текст,
   который читают подряд, на широкой строке теряет начало следующей.
   -------------------------------------------------------------------------- */
/* Запас под зафиксированную шапку. На главной первый экран уходит под неё
   намеренно — там видео; здесь под ней оказывались хлебные крошки. */
.post { padding-top: clamp(104px, 12vh, 140px); }
.post > .shell { max-width: min(760px, 92vw); margin-inline: auto; }

.post__crumbs {
  display: flex;
  gap: 8px;
  margin-bottom: clamp(20px, 3vh, 34px);
  font-size: clamp(12.5px, .92vw, 14px);
  color: var(--ink-3);
}
.post__crumbs a { color: var(--ink-3); }
.post__crumbs a:hover { color: var(--acc); }

.post__head { margin-bottom: clamp(24px, 3.4vh, 40px); }
.post__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  font-size: clamp(11.5px, .86vw, 13px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.post__tag { font-weight: 700; color: var(--acc); }
.post__h1 {
  margin: 0 0 clamp(14px, 2vh, 20px);
  font-family: var(--head);
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--ink);
}
.post__lead {
  margin: 0;
  padding-left: clamp(14px, 1.6vw, 22px);
  border-left: 3px solid var(--acc-soft);
  font-size: clamp(16px, 1.25vw, 19.5px);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Текст статьи. Стили заданы по тегам: тело пишется в чистом HTML,
   без классов на каждом абзаце — иначе автор статьи будет вынужден
   помнить вёрстку, а он должен помнить смысл. */
.post__body {
  font-size: clamp(16px, 1.22vw, 18.5px);
  line-height: 1.72;
  color: var(--ink);
}
.post__body > * + * { margin-top: 1.1em; }
.post__body h2 {
  margin-top: clamp(34px, 5vh, 58px);
  font-family: var(--head);
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--ink);
}
.post__body h3 {
  margin-top: clamp(26px, 3.6vh, 40px);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.post__body p { margin-block: 0; }
.post__body a {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--acc-soft);
}
.post__body a:hover { text-decoration-color: currentColor; }
.post__body ul,
.post__body ol { margin-block: 0; padding-left: 1.3em; }
.post__body li + li { margin-top: .5em; }
.post__body li::marker { color: var(--acc); }
.post__body blockquote {
  margin: clamp(24px, 3.4vh, 38px) 0;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
  border-radius: 18px;
  background: var(--paper-2);
  font-size: .96em;
  color: var(--ink-2);
}
.post__body blockquote > * + * { margin-top: .8em; }
.post__body img {
  border-radius: 18px;
  box-shadow: var(--sh-1);
}
.post__body figure { margin: clamp(24px, 3.4vh, 38px) 0; }
.post__body figcaption {
  margin-top: 10px;
  font-size: clamp(13px, .98vw, 15px);
  color: var(--ink-3);
}
/* таблица должна прокручиваться сама, а не растягивать страницу */
.post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(14px, 1.05vw, 16px);
}
.post__body table th,
.post__body table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-l2);
  text-align: left;
  vertical-align: top;
}
.post__body table th { font-weight: 700; color: var(--ink); }
.post__body table td { color: var(--ink-2); }
.post__body .scroll-x { overflow-x: auto; }

.post__cta {
  margin-top: clamp(38px, 5.4vh, 66px);
  padding: clamp(24px, 3vw, 38px);
  border-radius: 22px;
  background: linear-gradient(158deg, #232830 0%, #14171d 62%);
  color: #fff;
}
.post__cta b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--head);
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 700;
  letter-spacing: -.02em;
}
.post__cta p {
  margin: 0 0 clamp(16px, 2.2vh, 22px);
  max-width: 46ch;
  font-size: clamp(14.5px, 1.05vw, 17px);
  line-height: 1.6;
  color: rgba(233, 239, 246, .64);
}
.post__cta .btn { background: var(--acc-bright); }
.post__cta .btn:hover { background: var(--acc-bright-hi); }

.post__back {
  margin-top: clamp(26px, 3.6vh, 40px);
  padding-top: clamp(18px, 2.4vh, 24px);
  border-top: 1px solid var(--line-l2);
  font-size: clamp(14px, 1.05vw, 16px);
}
.post__back a { font-weight: 600; color: var(--acc); }
.post__back a:hover { color: var(--acc-hi); }

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

.foot {
  position: relative;
  z-index: 3;
  padding: clamp(44px, 6vh, 76px) 0 26px;
  /* тот же цвет, что у нижнего края плашки заявки: раньше на стыке
     чёрного и синего была видна случайная полоса */
  background: #14171d;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: rgba(233, 239, 246, .6);
  font-size: clamp(13.5px, 1.02vw, 15.5px);
}
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 56px);
  padding-bottom: clamp(28px, 4vh, 46px);
}
.foot__about { display: grid; gap: 16px; align-content: start; }
.foot__about .brand__mark { width: 74px; height: 42px; color: #fff; }
.foot__about p {
  margin: 0;
  max-width: 40ch;
  line-height: 1.6;
  color: rgba(233, 239, 246, .55);
}

.foot__col { display: grid; gap: 11px; align-content: start; }
.foot__col b {
  margin-bottom: 4px;
  font-size: clamp(11.5px, .84vw, 13px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc-soft);
}
.foot__col a { color: #e9eff6; transition: color .3s var(--ease); }
.foot__col a:hover { color: var(--acc-soft); }
.foot__col span { color: rgba(233, 239, 246, .5); }

/* соцсети: значок и подпись в строку */
.foot__soc { display: flex; align-items: center; gap: 10px; }
.foot__soc svg { width: 17px; height: 17px; flex: none; }
/* пока ссылки нет — пунктир, чтобы заглушка не ушла в бой незамеченной */
.foot__soc[href="#"] {
  color: rgba(233, 239, 246, .45);
  cursor: default;
  border-bottom: 1px dashed rgba(233, 239, 246, .3);
  justify-self: start;
}
.foot__soc[href="#"]:hover { color: rgba(233, 239, 246, .45); }

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: clamp(18px, 2.4vh, 26px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: clamp(12.5px, .92vw, 14px);
  color: rgba(233, 239, 246, .42);
}

@media (max-width: 900px) {
  .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot__top { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Оживление: наведение и переходы

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

/* карточки направлений: поднимаются, метка синеет глубже, заголовок темнеет */

/* валюты: код уходит в жёлтый, плитка приподнимается */

/* строки «кому подходит»: сдвиг вправо, номер желтеет */
.offer__list li {
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.offer__list li:hover { transform: translateX(6px); box-shadow: var(--sh-2); }
.offer__list .offer__ix { transition: background .35s var(--ease), color .35s var(--ease); }
.offer__list li:hover .offer__ix { background: var(--gold); color: var(--ink); }

/* условия сделки */

/* отзывы */
.review { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.review:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }

/* шаги сделки: кружок растёт, линия под ним подсвечивается */

/* фотографии офиса: кадр наезжает, подпись проявляется ярче */
.gal__i { overflow: hidden; }
.gal__i::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  /* scale, а не transform: параллакс от прокрутки занимает translate,
     и одно свойство transform они бы перетирали друг у друга */
  scale: 1.06;
  transition: scale .7s var(--ease-out);
}
.gal__i:hover::before { scale: 1.14; }

/* вопросы: строка подсвечивается, плюс поворачивается */
.faq details { transition: box-shadow .3s var(--ease), transform .3s var(--ease-out); }
.faq details:hover { box-shadow: var(--sh-2); }
.faq details[open] { box-shadow: var(--sh-2); }

/* ссылки и кнопки офиса */
.office__btn { transition: background .3s var(--ease), transform .3s var(--ease-out); }
.office__btn:hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Появление блоков
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s var(--ease-out), transform 1.3s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Лестница: элементы списка выходят по очереди, а не всей плитой сразу.
   Порядковый номер проставляет скрипт один раз при загрузке, задержку
   считает CSS — таймеров на каждый элемент нет. Сам контейнер при этом
   не двигается, иначе движение сложилось бы вдвое. */
.js .reveal[data-stagger] { opacity: 1; transform: none; transition: none; }
/* Прятать детей можно только у контейнера с .reveal: класс .is-in ставит
   наблюдатель, а он следит именно за .reveal. Без него дети остались бы
   с нулевой прозрачностью навсегда — так на плашке заявки пропал блок
   контактов и остался серый прямоугольник. */
.js .reveal[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .95s var(--ease-out), transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .reveal[data-stagger].is-in > * { opacity: 1; transform: none; }

/* Этапы выходят по очереди дольше всех остальных списков: шаг между
   ступенями 300 мс, сам подъём 1,4 с на 52 px. Последняя ступень трогается
   через 0,9 с после первой, вся лестница собирается за 2,3 с — очередь
   видно целиком, а не краем глаза. */
.js .reveal.stair[data-stagger] > * {
  transform: translateY(52px);
  transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 300ms);
}
.js .reveal.stair[data-stagger].is-in > * { transform: none; }

/* Карточки услуг выходят строго по одной: шаг 300 мс, как у этапов.
   При общем шаге в 110 мс четыре карточки успевали выйти за треть секунды
   и накладывались друг на друга — очередь не читалась. Кроме подъёма
   добавлен лёгкий доворот масштаба: плитки крупные, и на них движение
   размера заметнее движения по вертикали.

   Наведение при этом не конфликтует: очередь двигает <li>, а подъём
   при наведении — ссылку внутри него. Разные элементы, разные свойства. */
.js .reveal.svc[data-stagger] > * {
  transform: translateY(46px) scale(.97);
  transition: opacity .9s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 300ms);
}
.js .reveal.svc[data-stagger].is-in > * { transform: none; }

/* Заголовок-слово по буквам. Буквы поднимаются с лёгким разворотом —
   одно слово во весь экран иначе просто проявляется, и движения не видно. */
.js .ltr {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translateY(.36em) rotate(3deg);
  transition: opacity .8s var(--ease-out), transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .is-in .ltr { opacity: 1; transform: none; }

/* дубль слова для программ чтения с экрана */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Волосяная линия в колонтитуле выезжает от названия к заметке.
   Раскрываем обрезкой, а не scaleX: наконечник стрелки нарисован фоном
   справа, и от масштабирования он бы плющился на всё время анимации. */
.sec__line {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--ease-out) .2s;
}
.is-in .sec__line { clip-path: inset(0); }

/* Бронзовый штрих под словом «Отзывы» вырастает следом за буквами. */
.bigh--left em::before {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out) .5s;
}
.bigh--left.is-in em::before { transform: none; }

/* Блик проходит по карточке рейтинга, когда она появляется. */
.reviews.is-in .reviews__score::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent);
  animation: sheen 2.2s var(--ease-out) .6s both;
}
@keyframes sheen {
  from { translate: -120% 0; }
  to   { translate: 320% 0; }
}

/* --------------------------------------------------------------------------
   Движение от прокрутки

   Всё, что ниже, ведёт сам браузер по позиции блока в окне: анимации со
   `view()` идут мимо основного потока, поэтому не стоят ни кадра JS. Где
   таймлайнов нет (Safari до 26), блок просто стоит неподвижно.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @keyframes drift {
    from { translate: 0 -3.5%; }
    to   { translate: 0 3.5%; }
  }

  /* кадры в галерее и снимок в отзывах уплывают медленнее страницы */
  .gal__i::before,
  .sec--photo::before {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  /* запас по краям, чтобы сдвиг не открывал пустоту */
  .gal__i::before { inset: -6% 0; }
  .sec--photo::before { inset: -5% 0; }

  /* лента отзывов слегка подъезжает вбок на подходе */
  @keyframes slideIn {
    from { translate: 4% 0; opacity: .55; }
    to   { translate: 0 0; opacity: 1; }
  }
  .reviews__list {
    animation: slideIn linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 32%;
  }
}

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

@media (max-width: 1200px) {
  .stair { grid-template-columns: repeat(2, 1fr); row-gap: 12px; align-items: stretch; }
  .stair__s { min-height: 0 !important; border-radius: 16px; }
}

@media (max-width: 1000px) {
  .cta { grid-template-columns: 1fr; }
  .office { grid-template-columns: 1fr; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .reviews__list { grid-auto-columns: 46%; }
  .picks { grid-template-columns: repeat(2, 1fr); }
  .faq { columns: 1; }
  /* Две панели «кому подходит» правила не имели вовсе и оставались рядом
     на любом экране: на телефоне в каждой оставалось по 170 px, заголовки
     строк ломались посреди слова и вылезали за карточку. */
  .offers { grid-template-columns: 1fr; }
}

/* Телефон: всё, чему и двух колонок много. Порог 620 px — ниже него
   колонка в двухколоночной сетке уходит под 180 px, а на такой ширине
   ломаются уже отдельные слова. */
@media (max-width: 620px) {
  .picks { grid-template-columns: 1fr; }
  .gal { grid-template-columns: 1fr; grid-auto-rows: clamp(180px, 46vw, 240px); }
  .gal__i--big { grid-column: span 1; grid-row: span 1; }
  .why__list li { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 900px) {
  /* ---------- Первый экран на телефоне ----------
     Подпись, действие и цифры лежат на кадре, поэтому на узком экране
     разводим их в столбик и поджимаем к нижнему краю. */
  /* услуги в столбик: в четыре колонки на 375px они нечитаемы */
  .svc { grid-template-columns: 1fr; gap: 10px; }

  .flight__act { flex-direction: column; align-items: stretch; }
  .flight__btn { text-align: center; }
  .flight__stats { grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
  .flight__cap { bottom: clamp(20px, 3.5vh, 40px); }

  /* на телефоне карточка отзыва занимает почти всю ширину */
  .reviews__list { grid-auto-columns: 86%; }
  .reviews__nav { justify-content: flex-start; }

  .mrq__i { min-width: 118px; }
  .stair { grid-template-columns: 1fr; }
  .sec__meta { flex-wrap: wrap; gap: 6px 12px; }
  .sec__line { display: none; }
  .sec__aside { width: 100%; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  [data-stagger] > *, .ltr { opacity: 1 !important; transform: none !important; }
  .sec__line { clip-path: none !important; }
  .bigh--left em::before { transform: none !important; }
  .reviews.is-in .reviews__score::after { content: none; }
}