/* scroll-mode.css — обычный скролл вместо поэкранного.

   Раньше каждая секция была ровно 100vh с `overflow: hidden`: содержимое
   обязано было уместиться в высоту, которую заранее не знаешь. Прогон
   tools/shots.py на 1440×680 показывал, чем это кончается — финальный экран
   резался по нижнему краю без всякого признака, а надзаголовок PRO уезжал
   под шапку.

   Ниже — то же самое, что уже было для узких экранов (@media max-width:1023px
   в styles.css), поднятое на все ширины. */

.snap-stop {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  /* Содержимое не должно нырять под фиксированную шапку.
     --nav-h публикует js/nav-height.js. */
  padding-top: calc(var(--nav-h, 69px) + 24px);
  padding-bottom: 64px;
}

/* Первый экран и финал занимают ровно высоту окна и рисуют свой фон
   от края до края — отступ шапки им не нужен. */
#act-map, #act-contact {
  height: 100vh;
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* Полосу прокрутки прятал класс, который ставил snap-navigator.
   В режиме обычного скролла она нужна: это единственный индикатор
   длины страницы. */
html.snap-active { overflow: auto; }

/* Плавная прокрутка по якорям и точкам навигации, но не в ущерб тем,
   кто выключил анимации в системе. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Точки справа остаются оглавлением: теперь они показывают, где ты
   находишься в длинной странице, а не какой «слайд» открыт. */
#snap-progress { position: fixed; }

/* Финал держит 100vh ради глобуса во весь экран, но при низком окне
   контакты в него не влезают и обрезаются. Ниже 760px по высоте
   отпускаем секцию — пусть будет длиннее экрана, страница всё равно
   прокручивается. Найдено прогоном tools/shots.py на 1440×680. */
@media (max-height: 760px) {
  #act-contact {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding-bottom: 48px;
  }
}


/* ── Узкие экраны: секция ровно по содержимому ───────────────────────────
   `min-height: 100vh` держал каждую секцию во весь экран независимо от
   того, сколько в ней текста. На телефоне и планшете это давало пустые
   поля между блоками в половину экрана: замер показывал секции по
   1024–1172px там, где содержимого на 600. В режиме обычного скролла
   растягивать нечего — высоту задаёт контент. */
@media (max-width: 1023px) {
  .snap-stop {
    min-height: 0;
    /* Меньше воздуха между блоками: на узком экране 140px пустоты между
       секциями читаются как «страница кончилась». */
    padding-top: calc(var(--nav-h, 46px) + 14px) !important;
    padding-bottom: 40px !important;
  }
  /* Первому экрану полная высота нужна — это первое впечатление.
     Финалу тоже: под ним карта контактов во весь экран. */
  #act-map, #act-contact { min-height: 100vh; }

  /* Мобильная раскладка услуг тоже держала 100vh и давала до 300px пустоты
     под карточками партнёров: фоновый знак в ней позиционирован абсолютно
     и высоту не занимает, растягивал блок именно min-height. */
  .service-corona-mobile,
  .service-stop { min-height: 0 !important; }
}

/* ── Общего fixed-знака больше нет ─────────────────────────────────────
   #sbf-logo и холст #core-canvas сняты из разметки вместе с CoreEngine и
   слоями: при обычной прокрутке fixed-знак по центру вьюпорта ложился на
   текст. Роль знака перешла на .sect-mark внутри секций (в потоке —
   перекрыть ничего не могут) и на #nav-mark в шапке (индикатор). */

/* ── Крупный знак внутри секции ──────────────────────────────────────────
   Лежит в потоке, едет вместе с содержимым, перекрыть ничего не может. */
.sect-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--mark-size, 120px);
  height: var(--mark-size, 120px);
  margin: 0 auto;
}
.sect-mark img {
  width: 100%; height: auto;
  filter: drop-shadow(0 0 14px rgba(201, 162, 39, 0.35));
}
.sect-mark svg {
  position: absolute; inset: -34%;
  transform: rotate(-90deg);
  overflow: visible;
  pointer-events: none;
}
.sect-mark .mark-track { fill: none; stroke: rgba(201, 162, 39, 0.18); stroke-width: 1.4; }
.sect-mark .mark-fill  { fill: none; stroke: var(--gold, #C9A227); stroke-width: 1.9;
                          stroke-linecap: round;
                          transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); }
.sect-mark .mark-cap {
  /* Кольцо выходит за коробку знака на 34% размера — подпись ставим
     под кольцом, а не под коробкой, иначе она режет дугу */
  position: absolute; top: calc(100% + 0.34 * var(--mark-size, 120px) + 8px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep, #9A7B1E); text-align: center;
  /* Подписи ролей длинные («Две трети — счёт ведём мы, решения за вами»);
     в одну строку они вылезали за край секции. */
  width: max-content; max-width: min(280px, 78vw);
  white-space: normal; line-height: 1.5;
}
@media (max-width: 900px) {
  .sect-mark { --mark-size: 84px; }
  .sect-mark .mark-cap { font-size: 9px; max-width: min(240px, 82vw); }
}

/* ── Знак в шапке ─────────────────────────────────────────────────────────
   Индикатор состояния: роль и доля кольца повторяют активную секцию,
   вспышка — на событиях. Лежит в .nav-brand перед текстом, в потоке —
   ложиться на ссылки ему негде. Отрицательные поля по вертикали: шапка
   не растёт, кольцо (−34% со всех сторон) остаётся внутри её 69px. */
.nav-brand { display: inline-flex; align-items: center; gap: 14px; }
.nav-brand .nav-mark {
  --mark-size: 28px;        /* с кольцом ≈47px — влезает и в сжатую шапку 54px */
  margin: -9px 0;
  flex: none;
}
.nav-brand .nav-mark img { filter: none; transition: filter 0.4s; }
.nav-brand .nav-mark .mark-track { stroke: rgba(43, 43, 51, 0.16); stroke-width: 2.4; }
.nav-brand .nav-mark .mark-fill  { stroke-width: 3; transition-duration: 0.7s; }
/* Роль читается цветом дуги: приём — тёплое золото, обработка — глубокое,
   выдача — светлое свечение */
.nav-brand .nav-mark[data-role="intake"]  .mark-fill { stroke: var(--gold, #C9A227); }
.nav-brand .nav-mark[data-role="process"] .mark-fill { stroke: var(--gold-deep, #9A7B1E); }
.nav-brand .nav-mark[data-role="output"]  .mark-fill { stroke: var(--glow, #E6C257); }
.nav-brand .nav-mark.mark-pulse img { filter: drop-shadow(0 0 8px rgba(230, 194, 87, 0.9)); }
@media (max-width: 900px) {
  .nav-brand { gap: 10px; }
  .nav-brand .nav-mark { --mark-size: 24px; margin: -8px 0; }   /* шапка 46px, кольцо ≈40px */
}


/* Знак услуг встаёт в именованную ячейку композиции. Без этого grid
   раскладывал его в первую свободную — то есть в левую колонку,
   поверх блока «кому подходит». */
.service-corona .sect-mark { grid-area: logo; align-self: start; margin-top: 44px; }
/* Средний ряд сетки услуг был minmax(180px, 28vh) — знак с кольцом и
   подписью занимает ~250px, и подпись ложилась на абзац */
.service-corona { grid-template-rows: auto minmax(272px, 30vh) auto; }
/* Низкое окно: с ростом среднего ряда сетка «Управления» (там ещё дисклеймер)
   вылезала за верх секции — номер уходил под шапку. Знак меньше, ряд ниже. */
@media (min-width: 1024px) and (max-height: 740px) {
  .service-corona { grid-template-rows: auto minmax(224px, 30vh) auto; row-gap: 1.5vh; }
  .service-corona .sect-mark { --mark-size: 96px; margin-top: 36px; }
}

/* Разделённое кольцо «вы / мы» на услугах (data-split). Светлая дуга —
   доля клиента, идёт следом за золотой; подписи стоят снаружи кольца
   на середине своей дуги (координаты ставит js/logo.js). */
.sect-mark .mark-you {
  fill: none; stroke: rgba(43, 43, 51, 0.38); stroke-width: 1.4;   /* услуги на светлом фоне */
  stroke-linecap: round;
  transition: stroke-dasharray 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              stroke-dashoffset 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sect-mark .mark-lbl {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1; padding: 3px 5px; border-radius: 2px;
  background: rgba(251, 246, 239, 0.9);   /* прикрывает дорожку кольца под буквами */
  transition: left 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              top 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s;
  pointer-events: none;
}
.sect-mark .mark-lbl-we  { color: var(--gold, #C9A227); }
.sect-mark .mark-lbl-you { color: rgba(43, 43, 51, 0.65); }
/* «Что выходит из шума» на узких экранах: карточки в потоке, знак между
   подзаголовком и первой карточкой. Кольцо выходит за коробку знака на
   34% — без запаса оно ложилось на подзаголовок и рамку карточки. */
@media (max-width: 1023px) {
  #act-grow .sect-mark { margin: 38px auto 84px; }
}
/* Мобильная раскладка услуг: знак в потоке сразу под заголовком, вместо
   водяного знака-фона, который ничего не делал и лежал под текстом */
.svc-mark-mobile { --mark-size: 72px; margin: 26px auto 66px; }
/* ── Блок партнёров ──────────────────────────────────────────────────────
   Логотипы приходят разной высоты и веса (широкий AVATRADE против
   квадратного XM), поэтому карточки выглядели случайным набором. Держим
   для логотипа фиксированную площадку, а под сеткой — строка о том, где
   лежат деньги клиента: это первый вопрос к любому «партнёрству». */
.partner-card .partner-logo {
  height: 34px; max-width: 100%;
  object-fit: contain; object-position: center;
  filter: none; opacity: 0.92;
}
.partner-card--featured .partner-logo { height: 40px; }
.partner-card { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.partner-card .partner-meta { font-size: 10px; line-height: 1.4; }
.partners-note {
  margin: 10px 0 0; max-width: 320px;
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; line-height: 1.5;
  color: var(--muted);
}
.service-zone-partners .partners-note { max-width: none; text-align: center; }
@media (max-width: 767px) { .partners-note { font-size: 10px; } }

/* Знак-ссылка (на «Что выходит из шума» ведёт на платформу) */
.sect-mark.mark-link { text-decoration: none; cursor: pointer; }
.sect-mark.mark-link:hover img { filter: drop-shadow(0 0 22px rgba(230, 194, 87, 0.75)); }
.sect-mark.mark-link:hover .mark-cap { color: var(--gold-deep); }
.sect-mark.mark-link:focus-visible { outline: 1px solid var(--gold, #C9A227); outline-offset: 34%; }

/* Знак-кнопка (service-3 → партнёр FxPro) */
.sect-mark[data-open-partner] { cursor: pointer; }
.sect-mark[data-open-partner]:hover img,
.sect-mark[data-open-partner]:focus-visible img { filter: drop-shadow(0 0 22px rgba(230, 194, 87, 0.75)); }
.sect-mark[data-open-partner]:focus-visible { outline: 1px solid var(--gold, #C9A227); outline-offset: 40%; }


/* ── Состояния знака ─────────────────────────────────────────────────────
   Роль задаёт data-role, долю кольца — data-part. Оба ставит js/logo.js,
   он же единственный, кто их меняет. */
.sect-mark.mark-complete .mark-fill { stroke: var(--glow, #E6C257); stroke-width: 2.3; }

/* Короткая вспышка: пришла нить на карте, сменился слайд, ушла форма.
   Знак «отзывается» на событие, оставаясь на месте. */
@keyframes sbf-mark-pulse {
  0%   { filter: drop-shadow(0 0 14px rgba(201, 162, 39, 0.35)); }
  35%  { filter: drop-shadow(0 0 26px rgba(230, 194, 87, 0.85)); }
  100% { filter: drop-shadow(0 0 14px rgba(201, 162, 39, 0.35)); }
}
.sect-mark.mark-pulse img { animation: sbf-mark-pulse 0.9s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .sect-mark.mark-pulse img { animation: none; }
}

/* PRO-экран собран на абсолютных блоках: шаги на 26vh, текст с кнопкой на 63vh.
   Знак в потоке между ними попадал в начало секции — на заголовок.
   Ставим его в свободную полосу между карточками шагов и текстом. */
#act-platform-2 .sect-mark {
  position: absolute;
  top: 53.5vh;
  left: 50%;
  transform: translate(-50%, -50%);
  --mark-size: 80px;        /* кольцо ±27px: между низом карточек и текстом на 63vh */
  margin: 0;
}
#act-platform-2 .sect-mark .mark-cap { color: var(--glow, #E6C257); }
/* Между рядом шагов (26vh) и текстом (63vh) знаку хватает места только
   на кольцо — подпись стоит справа от него, по бокам экран пуст */
@media (min-width: 1024px) {
  #act-platform-2 .sect-mark .mark-cap {
    top: 50%; left: calc(100% + 0.34 * var(--mark-size, 92px) + 16px);
    transform: translateY(-50%);
    text-align: left; max-width: 220px;
  }
}
@media (max-width: 1023px) {
  /* На узких экранах блоки уже в потоке — знак тоже */
  #act-platform-2 .sect-mark { position: relative; top: auto; left: auto; transform: none; margin: 34px auto 84px; }
}
/* На низком окне (680px) полоса между шагами и текстом — ~90px; знак 92px
   с подписью в неё не помещался и ложился на абзац. */
@media (min-width: 1024px) and (max-height: 740px) {
  #act-platform-2 .sect-mark { --mark-size: 56px; top: 55.5vh; }
  #act-platform-2 .sect-mark .mark-cap { display: none; }
}


/* ── Колонка графика на act-approach ─────────────────────────────────────
   Раньше здесь был только холст на всю правую половину: подпись линзы и
   легенда висели поверх свечей, а под графиком оставалась пустая половина
   экрана — блок читался как незаконченный. Теперь это подписанный график:
   шапка с инструментом сверху, лента посередине, легенда и подсказка снизу. */
/* Сцена — ровно 100vh, но секция ещё добавляет отступ под шапку, поэтому
   низ колонки (легенда и подсказка) уходил на 93px ниже сгиба. Вычитаем
   шапку из высоты сцены. */
@media (min-width: 901px) {
  /* В styles.css высота задана как `#act-approach #approach-stage` —
     без такой же специфичности правило ниже не применялось. */
  #act-approach #approach-stage { height: calc(100vh - var(--nav-h, 69px) - 46px); min-height: 520px; }
}
.approach-side {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  padding: clamp(16px, 2vw, 28px) clamp(16px, 3vw, 40px) clamp(16px, 2vw, 26px) 0;
  gap: 10px;
  pointer-events: auto;
}
.chart-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.chart-head b { color: var(--gold-deep); font-weight: 700; letter-spacing: 0.1em; }

/* height:70vh и padding-right:5vw заданы в styles.css для старой раскладки,
   где холст был прямой колонкой сетки; теперь размер даёт flex-контейнер. */
#approach-chart {
  position: relative; flex: 1 1 auto;
  height: auto !important; min-height: 240px; padding-right: 0 !important;
}

/* Легенда и подсказка прижаты влево, а не разведены по краям: в правом
   нижнем углу висит плавающая кнопка «Связаться» (position: fixed), и
   любой контент, прижатый к правому краю, оказывался под ней. */
.chart-foot {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 8px 28px; flex-wrap: wrap; line-height: 1.6;
  padding-top: 10px; padding-right: 240px;
  border-top: 1px solid var(--line);
}
.chart-hint {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* Линза: знак стоит по центру ленты, изображение приглушено — внутри
   кольца главное размеченные свечи, знак читается как оправа. */
#approach-chart .approach-lens {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  --mark-size: 150px;
  margin: 0;
  pointer-events: none;
}
/* Знак внутри линзы: 0.16 читалось как грязь на стекле — на светлом фоне
   его почти не было видно. Держим 0.34 и лёгкое свечение: знак виден как
   оправа, но свечи внутри кольца всё ещё главные. */
#approach-chart .approach-lens img {
  opacity: 0.34;
  filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.35));
}
/* Подпись шла тонким золотом прямо по свечам. Плашка того же цвета, что
   фон страницы, была не видна — даём рамку, тень и тёмный текст. */
#approach-chart .approach-lens .mark-cap {
  background: #FFFDF9;
  padding: 7px 12px; border-radius: 3px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-left: 3px solid var(--gold, #C9A227);
  box-shadow: 0 6px 18px rgba(43, 43, 51, 0.10);
  color: var(--ink, #2B2B33); font-size: 11px; letter-spacing: 0.06em;
  text-transform: none; line-height: 1.45; max-width: 230px;
  top: calc(100% + 0.34 * var(--mark-size, 150px) + 14px);
}
#approach-chart .approach-lens .mark-track { stroke: rgba(201, 162, 39, 0.35); }
#approach-chart .approach-lens .mark-fill  { stroke-width: 2.2; }

.lens-legend {
  display: flex; gap: 16px; list-style: none; margin: 0; padding: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.lens-legend li { display: flex; align-items: center; gap: 6px; }
.lens-legend i { width: 14px; height: 0; border-top: 2px solid currentColor; display: block; }
.lens-legend .lg-level i { border-top-style: dashed; color: var(--gold-deep); }
.lens-legend .lg-sma i { color: var(--gold); }
.lens-legend .lg-pat i { border-top: 0; height: 8px; width: 8px; border-radius: 50%; background: var(--glow, #E6C257); }

/* На узких экранах лента — приглушённый фон за текстом, а не колонка:
   линза, шапка и легенда там только мешали бы. */
@media (max-width: 900px) {
  #approach-chart .approach-lens { display: none; }
  .chart-head, .chart-foot { display: none; }
  .approach-side { padding: 0; }
}
/* На низком окне подпись линзы упиралась в колонку шагов */
@media (max-height: 760px) {
  #approach-chart .approach-lens .mark-cap { display: none; }
}

/* ── Подход: три шага ────────────────────────────────────────────────────
   Вместо двух абзацев «про международный опыт» — конвейер из трёх шагов,
   в каждом число, которое можно проверить в самом продукте. */
.approach-steps { list-style: none; margin: 22px 0 0; padding: 0; }
.approach-steps li {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 14px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.approach-steps li:last-child { border-bottom: 1px solid var(--line); }
.approach-steps .step-n {
  grid-row: 1 / span 2;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--gold); letter-spacing: 0.08em; padding-top: 2px;
}
.approach-steps b {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.02em;
}
.approach-steps p {
  margin: 4px 0 0; font-family: 'Montserrat', sans-serif;
  font-size: 13px; line-height: 1.55; color: #55555F;
}
.approach-link {
  display: inline-block; margin-top: 18px;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 39, 0.4);
}
.approach-link:hover { border-bottom-color: currentColor; }
/* На ноутбучном экране (800–860px) ссылка уезжала под сгиб: три шага с
   заголовком занимали всю высоту. Поджимаем отступы, а не режем текст. */
@media (min-width: 1024px) and (max-height: 900px) {
  /* Колонка текста вертикально центрируется в 100vh. Пока в ней было два
     абзаца, это выглядело спокойно; с тремя шагами и ссылкой она стала
     выше окна и вылезала за оба края. Прижимаем к верху свободной полосы. */
  /* Сцена жёстко 100vh: на низком окне (680px) третий шаг обрезался краем.
     Отдаём ей естественную высоту — секция просто станет чуть выше окна. */
  #approach-stage { align-items: start; height: auto; min-height: 100vh; padding-bottom: 28px; }
  #approach-copy { padding-top: 10px; }
  #approach-copy h2 { font-size: 28px; line-height: 1.15; }
  .approach-steps { margin-top: 12px; }
  .approach-steps li { padding: 8px 0; }
  .approach-steps p { font-size: 12px; line-height: 1.4; }
  .approach-link { margin-top: 10px; }
}


/* ── Вход на act-platform-1 ──────────────────────────────────────────────
   Знак больше не лежит поверх скриншота (читался как водяной знак на чужом
   интерфейсе, и было непонятно, зачем он там). Он стоит в колонке текста
   рядом с кнопкой: кольцо заполняется при появлении, клик ведёт в терминал.
   Скриншот при этом просто скриншот — приглушать его нечем и незачем. */
.platform-entry { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.platform-entry .platform-key { --mark-size: 44px; margin: 0; flex: none; }
.platform-entry .platform-key img { filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.4)); }
.platform-entry .cta-primary { margin: 0; }
@media (max-width: 767px) {
  .platform-entry { gap: 12px; }
  .platform-entry .platform-key { --mark-size: 36px; }
}

/* ── Платформа: вкладки, рамка браузера, лайтбокс брифа ────────────────── */
.plat-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.plat-tab {
  flex: 1; padding: 8px 10px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 2px;
  cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.plat-tab:hover { color: var(--gold-deep); border-color: rgba(201, 162, 39, 0.5); }
.plat-tab.is-active { color: var(--ink); border-color: var(--gold); background: rgba(201, 162, 39, 0.10); }

/* Рамка окна браузера: без неё скриншот читался как картинка из стока,
   а не как настоящий интерфейс продукта. */
.plat-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; background: #EDE7DE;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 3px 3px 0 0;
}
.plat-chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(43, 43, 51, 0.18); }
.plat-chrome .plat-url {
  margin-left: 8px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em; color: var(--muted); font-weight: 400;
}
/* Колонка превью: вкладки, окно со скриншотом, кнопка брифа — стопкой.
   Без этого они разъезжались в строку: вкладки слева, кнопка справа. */
.platform-preview { display: flex; flex-direction: column; align-items: stretch;
                    gap: 0; width: 100%; max-width: 660px; margin-left: auto; }
.platform-gate { display: block; text-decoration: none; }
.platform-gate .plat-chrome, .platform-gate .plat-url { text-decoration: none; }
.platform-gate .platform-screenshot { border-radius: 0 0 3px 3px; display: block; width: 100%; height: auto; }

.plat-brief-cta {
  display: block; width: 100%; margin-top: 10px; padding: 10px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-deep); background: transparent;
  border: 1px solid rgba(201, 162, 39, 0.45); border-radius: 2px; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.plat-brief-cta:hover { background: var(--gold); color: var(--ink); }

.plat-lightbox {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw; background: rgba(10, 8, 16, 0.88);
}
.plat-lightbox[hidden] { display: none; }
.plat-lightbox figure { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.plat-lightbox img { max-width: 100%; max-height: 82vh; display: block; border: 1px solid rgba(201, 162, 39, 0.35); }
.plat-lightbox figcaption {
  margin-top: 10px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; color: rgba(251, 246, 239, 0.75);
}
.plat-lb-close {
  position: absolute; top: 16px; right: 20px;
  width: 40px; height: 40px; line-height: 1;
  font-size: 26px; color: rgba(251, 246, 239, 0.8);
  background: transparent; border: 1px solid rgba(251, 246, 239, 0.25);
  border-radius: 2px; cursor: pointer;
}
.plat-lb-close:hover { color: var(--glow, #E6C257); border-color: currentColor; }

/* Карточки платформы стали ссылками — базовое подчёркивание красило и
   заголовок, и описание: блок читался как список гиперссылок. */
.platform-features .pf-card,
.platform-features .pf-card * { text-decoration: none; }
.platform-features .pf-card { display: block; transition: border-color 0.25s, transform 0.25s; }
.platform-features .pf-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.platform-features .pf-num {
  margin: 4px 0 6px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em; color: var(--gold-deep);
}
@media (max-width: 767px) {
  .plat-tab { font-size: 10px; letter-spacing: 0.06em; padding: 7px 6px; }
  .plat-chrome .plat-url { display: none; }
  .plat-lightbox { padding: 2vh 2vw; }
}

/* ── PRO-оффер: кольцо по шагам ───────────────────────────────────────────
   Шаг подсвечивается, когда его доля дошла до кольца; бейдж появляется
   при полном кольце. Оба состояния ставит js/acts/act-pro.js. */
#act-platform-2 .p2-card { transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s; cursor: pointer; }
#act-platform-2 .p2-card.step-lit {
  border-color: var(--gold, #C9A227);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.35), 0 8px 30px rgba(201, 162, 39, 0.18);
  transform: translateY(-3px);
}
#act-platform-2 .p2-card.step-lit .p2-card-num { color: var(--glow, #E6C257); }

/* ── PRO: что входит и что после 30 дней ─────────────────────────────── */
.pro-value {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px);
  max-width: 880px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  font-family: 'Montserrat', sans-serif; text-align: left;
}
.pro-col-h {
  margin: 0 0 10px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--glow, #E6C257);
}
.pro-list { margin: 0; padding: 0; list-style: none; }
.pro-list li {
  position: relative; padding: 4px 0 4px 18px;
  font-size: 13px; line-height: 1.5; color: rgba(251, 246, 239, 0.86);
}
.pro-list li::before {
  content: '✓'; position: absolute; left: 0; top: 4px;
  color: var(--gold, #C9A227); font-size: 12px;
}
.pro-list li.soon { color: rgba(251, 246, 239, 0.5); }
.pro-list li.soon::before { content: '·'; font-size: 18px; top: 0; }
.pro-after { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(251, 246, 239, 0.86); }
.pro-after-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(251, 246, 239, 0.55); }
@media (max-width: 900px) {
  .pro-value { grid-template-columns: 1fr; gap: 20px; margin-top: 4px; }
}

.pro-issue .pro-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  display: grid; place-items: center; gap: 0;
  width: 58%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink, #2B2B33);
  border: 1.5px solid var(--glow, #E6C257);
  color: var(--glow, #E6C257);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.pro-issue .pro-badge b { font-size: 12px; letter-spacing: 0.18em; font-weight: 700; }
.pro-issue .pro-badge i { font-size: 15px; font-style: normal; font-weight: 700; margin-top: 2px; }
.pro-issue.mark-complete .pro-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Пока бейджа нет — знак читается целиком; появился бейдж — знак уходит на второй план */
.pro-issue img { transition: opacity 0.4s; }
.pro-issue.mark-complete img { opacity: 0.35; }


/* ── Финал: знак-узел ────────────────────────────────────────────────────
   Стоит в средней колонке .finale-top, поверх глобуса. Золото на золоте
   глобуса терялось — под знаком тёмный диск. Нити к филиалам рисует
   act5-contact.js в .contact-threads. */
#act-contact .contact-hub {
  grid-column: 2;
  justify-self: center; align-self: center;
  --mark-size: 92px;
  margin: 0;
  pointer-events: none;
  z-index: 31;
}
#act-contact .contact-hub::before {
  content: '';
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 8, 16, 0.92) 55%, rgba(10, 8, 16, 0) 72%);
  z-index: -1;
}
#act-contact .contact-hub img { filter: drop-shadow(0 0 16px rgba(230, 194, 87, 0.7)); }
#act-contact .contact-hub .mark-cap {
  color: var(--glow, #E6C257);
  background: rgba(10, 8, 16, 0.82); padding: 4px 9px; border-radius: 2px;   /* читается на золоте глобуса */
}
#act-contact .contact-hub.hub-sending img { animation: sbf-hub-breathe 0.9s ease-in-out infinite alternate; }
@keyframes sbf-hub-breathe { from { opacity: 0.55; } to { opacity: 1; } }

.contact-threads {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 29;
  pointer-events: none;
  overflow: visible;
}
.contact-threads .thread {
  fill: none;
  stroke: var(--gold, #C9A227); stroke-width: 1;
  stroke-opacity: 0.55;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.contact-threads .thread-end {
  fill: var(--glow, #E6C257);
  opacity: 0; transition: opacity 0.4s 0.9s;
}
.contact-threads.threads-on .thread-end { opacity: 0.9; }
.contact-threads.threads-flash .thread { animation: sbf-thread-flash 1.2s ease-out; }
@keyframes sbf-thread-flash {
  0%   { stroke-opacity: 0.55; stroke-width: 1; }
  25%  { stroke-opacity: 1;    stroke-width: 2; stroke: var(--glow, #E6C257); }
  100% { stroke-opacity: 0.55; stroke-width: 1; }
}
@media (max-width: 1100px) {
  /* Планшет и телефон: знак остаётся между колонками, но меньше и без
     подписи; нити на тесной раскладке путаются с карточками — их нет */
  #act-contact .contact-hub { --mark-size: 64px; }
  #act-contact .contact-hub .mark-cap { display: none; }
  .contact-threads { display: none; }
}
@media (max-width: 767px) {
  /* Телефон: .finale-top — flex-строка с выравниванием по верху */
  #act-contact .contact-hub { align-self: flex-start; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #act-contact .contact-hub.hub-sending img { animation: none; }
}


/* ── Память рынков ───────────────────────────────────────────────────────
   Свечной поток течёт внутри силуэта знака (маска logo.svg — та самая
   заготовка #chart-stream из styles.css, только теперь с JS). Кольцо —
   таймер автоплея, его ведёт js/acts/act-market-memory.js. На десктопе
   знак стоит в пустом правом верхнем углу над текстом кейса; на мобайле
   идёт в потоке между плашкой заголовка и каруселью. */
#act-market { position: relative; }
/* Карусель была ровно 100vh с графиком в 80vh: на любом окне ниже ~900px
   низ графика и панель точек уходили за край. Отдаём секции естественную
   высоту, график ограничиваем по содержимому. */
@media (min-width: 1024px) {
  #act-market .market-carousel { height: auto; min-height: 0; }
  #act-market .market-slide { position: relative; inset: auto; }
  #act-market .market-slide:not(.active) { position: absolute; inset: 0; }
  #act-market .market-slide-chart { height: min(62vh, 520px); }
  #act-market .market-nav-bar { position: relative; bottom: auto; left: auto; transform: none;
                                margin: 14px auto 0; justify-content: center; }
}
#act-market .market-memory {
  position: absolute;
  top: calc(var(--nav-h, 69px) + 30px);
  right: 110px;              /* подпись шире знака — запас, чтобы не резалась краем */
  --mark-size: 104px;
  margin: 0;
  z-index: 3;
}
#act-market .market-memory img { opacity: 0.22; filter: none; }
#act-market .market-memory .memory-stream {
  position: absolute; inset: 0;
  -webkit-mask-image: url(../assets/logo/logo.svg);
          mask-image: url(../assets/logo/logo.svg);
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
#act-market .market-memory .memory-stream canvas { width: 100%; height: 100%; display: block; }
/* Кольцо-таймер идёт без CSS-перехода: долю ставит rAF каждый кадр */
#act-market .market-memory .mark-fill { transition: none; }
#act-market .market-memory .mark-cap {
  color: var(--glow, #E6C257);
  /* Счётчик кейсов ставим над знаком: под ним на невысоком окне он падал
     на абзац описания кейса (поймано прогоном 1440×680 на EN). */
  top: auto; bottom: calc(100% + 0.34 * var(--mark-size, 104px) + 6px);
  letter-spacing: 0.2em;
}
/* Титульная плашка секции при обычной прокрутке фиксирована у низа окна и
   ложилась на график и абзац кейса. В потоке секция выше окна, и над
   каруселью есть пустая полоса — плашка идёт туда, слева, знак — справа. */
@media (min-width: 1024px) {
  /* Плашка заголовка стояла абсолютом и ложилась то на график, то на текст
     кейса. Ставим её в поток над каруселью — это обычный заголовок секции. */
  #act-market {
    display: flex; flex-direction: column;
    padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px);
  }
  #act-market .act-overlay {
    position: relative; inset: auto; opacity: 1 !important;
    text-align: left; z-index: 3; order: -1; margin-bottom: 14px;
    /* Секция — flex-колонка с центрированием: без align-self заголовок
       сжимался по содержимому и вставал по центру, а не над графиком. */
    align-self: stretch; width: 100%;
  }
  /* Знак-память стоит абсолютом в правом верхнем углу; текст заголовка
     тянулся во всю ширину и оказывался под ним. Оставляем ему полосу. */
  #act-market .act-overlay-inner {
    display: block; padding: 0; background: none; border: 0; backdrop-filter: none;
    max-width: calc(100% - 230px);
  }
  #act-market .act-overlay h3 { font-size: 22px; margin-bottom: 6px; }
  /* Панель точек карусели уезжала под общий столбик навигации справа */
  #act-market .market-nav-bar { max-width: 520px; }
}
@media (max-width: 1023px) {
  #act-market .market-memory {
    position: relative; top: auto; right: auto;
    order: -2;                 /* над плашкой заголовка (order:-1) — знак над контентом */
    --mark-size: 72px;
    margin: 0 auto 6px;
  }
  #act-market .market-memory .mark-cap { display: none; }
}

/* ── Услуги: формат, состав, шаги ────────────────────────────────────────
   Экран услуги состоял из номера, заголовка, одной строки «кому подходит»
   и абзаца — 70% площади пустовало, и ни на один практический вопрос
   (что именно, в каком виде, с чего начать) ответа не было. */
.svc-offer {
  grid-area: desc;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 44px);
  max-width: 900px; justify-self: center; width: 100%;
  margin-bottom: 14px;
  font-family: 'Montserrat', sans-serif; text-align: left;
}
.svc-col-h {
  margin: 0 0 8px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.svc-format { margin: 0; font-size: 12.5px; line-height: 1.55; color: #55555F; }
.svc-list, .svc-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.svc-list li, .svc-steps li {
  position: relative; padding: 3px 0 3px 18px;
  font-size: 12.5px; line-height: 1.5; color: #55555F;
}
.svc-list li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: 11px; }
.svc-steps li { counter-increment: st; }
.svc-steps li::before {
  content: counter(st); position: absolute; left: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--gold);
}
/* Сетка услуги: под блок оффера нужен свой ряд, иначе он делит ячейку
   с описанием и наезжает на него */
.service-corona {
  grid-template-areas:
    ". numtitle ."
    "left logo right"
    "desc desc desc"
    "text text text";
}
.service-corona .service-desc-bottom { grid-area: text; }
@media (max-width: 1023px) {
  .svc-offer { grid-template-columns: 1fr; gap: 16px; max-width: 420px; margin: 8px auto 12px; }
}

/* Кнопка «обсудить» на услугах и строка о вознаграждении партнёра */
.svc-cta {
  display: inline-block; margin-top: 12px; padding: 11px 26px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  border: 0; border-radius: 3px; cursor: pointer;
  transition: background 0.25s, transform 0.2s;
}
.svc-cta:hover { background: var(--glow, #E6C257); transform: translateY(-1px); }
.svc-fee {
  margin: 10px auto 0; max-width: 680px;
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; line-height: 1.55;
  color: var(--muted);
  border-left: 2px solid rgba(201, 162, 39, 0.35); padding-left: 10px; text-align: left;
}

/* Сетка услуги стояла `position:absolute; inset:0` и центрировалась в 100vh.
   С блоком оффера содержимое стало выше окна и полезло вверх — номер услуги
   уходил под шапку (поймано shots.py на 1280×800 и 1440×680). Отдаём
   секции естественный поток: она просто станет длиннее экрана. */
@media (min-width: 1024px) {
  .service-stop .service-corona {
    position: relative; inset: auto;
    align-content: start; row-gap: 1.6vh;
    padding-bottom: 28px;
  }
  .service-stop { display: block; }
}

/* Подпись знака услуги («Треть кольца — столько работы на нашей стороне»)
   в румынском длиннее и доставала до колонки «Формат». Ограничиваем ширину
   и добавляем зазор снизу — ряд знака и так задан сеткой. */
@media (min-width: 1024px) {
  .service-corona .sect-mark .mark-cap { max-width: 240px; }
  .service-corona .sect-mark { margin-bottom: 28px; }
}

/* ── Часы филиала ─────────────────────────────────────────────────────────
   «Позвоните нам» без местного времени — лотерея: между Лиссабоном и Дубаем
   три часа. Показываем время в офисе и открыт ли он сейчас. */
.branch-hours {
  margin: 6px 0 0; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.06em; color: rgba(251, 246, 239, 0.55);
  display: flex; align-items: center; gap: 6px;
}
.branch-hours b { font-weight: 600; color: rgba(251, 246, 239, 0.85); }
.branch-hours::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(251, 246, 239, 0.3); flex: none;
}
.branch-card.branch-open  .branch-hours::before { background: #4CAF50; box-shadow: 0 0 6px rgba(76, 175, 80, 0.7); }
.branch-card.branch-closed .branch-hours::before { background: rgba(251, 246, 239, 0.25); }

/* ── Футер ───────────────────────────────────────────────────────────────
   Раньше страница обрывалась строкой риска: ни реквизитов, ни политик. */
.site-footer {
  background: #0A0810; color: rgba(251, 246, 239, 0.7);
  padding: 44px clamp(20px, 5vw, 72px) 28px;
  font-family: 'Montserrat', sans-serif; font-size: 12.5px; line-height: 1.6;
  border-top: 1px solid rgba(201, 162, 39, 0.22);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(20px, 4vw, 64px); max-width: 1180px; margin: 0 auto 28px;
}
.footer-h {
  margin: 0 0 10px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold, #C9A227);
}
.footer-legal { margin: 0 0 4px; color: rgba(251, 246, 239, 0.66); }
.footer-legal a, .footer-links a { color: rgba(251, 246, 239, 0.82); text-decoration: none; border-bottom: 1px solid rgba(201, 162, 39, 0.3); }
.footer-legal a:hover, .footer-links a:hover { color: var(--glow, #E6C257); border-bottom-color: currentColor; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: 3px 0; }
.footer-risk {
  max-width: 1180px; margin: 0 auto 12px; padding-top: 18px;
  border-top: 1px solid rgba(251, 246, 239, 0.10);
  font-size: 11.5px; line-height: 1.55; color: rgba(251, 246, 239, 0.5);
}
.footer-copy { max-width: 1180px; margin: 0 auto; font-size: 11px; color: rgba(251, 246, 239, 0.38); }
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .site-footer { padding: 32px 20px 24px; }
}

/* ── PRO-экран: поток вместо абсолютных блоков ───────────────────────────
   Заголовок, шаги, знак, текст и подвал стояли на фиксированных vh-отметках
   (5 / 26 / 53.5 / 63). Пока между ними ничего не добавлялось, это держалось;
   блок «Что входит в PRO» встал в поток и оказался под заголовком. Ставим
   всё в колонку — экран сам считает высоту. */
@media (min-width: 1024px) {
  #act-platform-2 {
    display: flex; flex-direction: column; align-items: center;
    gap: 22px; padding-bottom: 40px;
  }
  #act-platform-2 .p2-header,
  #act-platform-2 .p2-steps,
  #act-platform-2 .p2-cta-zone,
  #act-platform-2 .p2-footer {
    position: relative; inset: auto; top: auto; bottom: auto; left: auto;
    transform: none; width: 100%; max-width: 980px;
  }
  #act-platform-2 .p2-header { max-width: 640px; }
  #act-platform-2 .p2-steps { display: flex; justify-content: center; }
  /* Знак стоял абсолютом на 53.5vh — в потоке ему нужна только своя строка */
  #act-platform-2 .sect-mark {
    position: relative; top: auto; left: auto; transform: none;
    margin: 6px auto 30px; --mark-size: 84px;
  }
  #act-platform-2 .sect-mark .mark-cap {
    top: calc(100% + 0.34 * var(--mark-size, 84px) + 10px);
    left: auto; right: auto; text-align: center; max-width: 300px;
  }
  .pro-value { margin-top: 4px; }
}