/* ============================================================
   MarketBoost /v1 — «Сводка»: печатный операционный отчёт
   Токены зафиксированы стиль-гейтом (design/COMMIT-SHEET.md).
   ============================================================ */

:root{
  /* ——— чернила и бумага ——— */
  --ink:          #1E0F3D;
  --ink-2:        #2A1856;
  --plum:         #3C2671;
  --lav:          #C4B2F0;
  --coral:        #FF6B3D;
  --coral-ink:    #2A1206;
  --paper:        #F7F5FA;
  --paper-2:      #EFEBF6;
  --rule:         #D9D2E6;
  --rule-dark:    rgba(247,245,250,.17);
  --on-ink:       #F7F5FA;
  --on-ink-mute:  #C3B6DD;
  --on-paper:     #1E0F3D;
  --on-paper-mute:#57496F;

  /* ——— бренд-тона площадок, только волосяной линией ——— */
  --wb: #CB11AB;
  --oz: #1A6DFF;
  --ym: #C79A00;
  --mv: #E1442E;

  --container: 1280px;
  --pad: 32px;
  --head-h: 76px;

  --ease-out: cubic-bezier(.16,1,.3,1);

  /* зерно: feTurbulence отрисован один раз в data-URI, не анимируется */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  /* clip, а не hidden: hidden создаёт скролл-контейнер и ломает sticky на пике */
  overflow-x:clip;
  background:var(--paper);color:var(--on-paper);
  font-family:'Golos Text','Golos Text Fallback',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
/* отступ под якорные переходы — без JS-обработчика на кликах */
#services,#marketplaces,#process,#cases,#faq,#contact{scroll-margin-top:32px}
.mono{font-family:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--coral);color:var(--coral-ink);padding:12px 20px;font-weight:500;
}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ============ ТИПОГРАФИКА ============ */
.t-display{
  font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;
  font-size:clamp(1.7rem,3.1vw,2.6rem);
  line-height:1.08;letter-spacing:-.03em;text-wrap:balance;
}
.t-display--light{color:var(--on-ink)}
.t-lead{font-size:18px;line-height:1.6;color:var(--on-paper-mute);max-width:62ch}
.t-lead--light{color:var(--on-ink-mute)}

/* ============ ПОЯВЛЕНИЕ ============
   Без JS класса .js всё видно сразу — раскрытие только усиливает
   уже отрисованный контент, а не управляет его видимостью. */
.js .rise{opacity:0;transform:translateY(10px)}
.js .rise.is-in{
  opacity:1;transform:none;
  transition:opacity 620ms var(--ease-out) var(--d,0s),
             transform 620ms var(--ease-out) var(--d,0s);
}

/* ============ КНОПКИ ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 24px;border-radius:2px;
  font-family:'Golos Text','Golos Text Fallback',sans-serif;font-weight:500;font-size:16px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color 140ms var(--ease-out),
             border-color 140ms var(--ease-out),
             color 140ms var(--ease-out),
             transform 140ms var(--ease-out);
}
.btn--go{background:var(--coral);color:var(--coral-ink);border-color:var(--coral)}
.btn--go:hover{background:#FF7E55;transform:translateY(-2px)}
.btn--ghost{color:var(--on-ink);border-color:rgba(247,245,250,.34)}
.btn--ghost:hover{border-color:var(--on-ink);background:rgba(247,245,250,.07)}
.btn--sm{padding:11px 18px;font-size:15px}
.btn--lg{padding:17px 28px;font-size:16.5px}
.btn--block{width:100%}

/* ============================================================
   СЦЕНА 1 — ПУЛЬТ
   ============================================================ */
.stage{position:relative;background:var(--ink);color:var(--on-ink)}
.stage__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* Полиграфический растр вместо разлиновки: точечное поле читается как печать,
   а не как экранная сетка. Без mask-image и без mix-blend-mode — и то и другое
   заставляет браузер пересобирать композицию на каждом кадре скролла
   (замер до и после: 10fps → 60fps). */
.stage__fx::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(247,245,250,.075) 1px, transparent 1.7px);
  background-size:20px 20px;
}
.stage__fx::after{
  content:'';position:absolute;inset:0;
  background-image:var(--grain);opacity:.05;
}
/* Водяной знак в фоне пробовался и убран: контур логотипа во всю высоту
   лез на заголовок и читался как случайный зигзаг, а не как знак.
   Растра точками достаточно — герой держится типографикой и панелью. */

.head{position:relative;z-index:20;border-bottom:1px solid var(--rule-dark)}
.head__in{display:flex;align-items:center;gap:28px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--on-ink)}
.brand__txt{font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em;white-space:nowrap}
.brand__txt i{font-style:normal;color:var(--coral)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{
  color:var(--on-ink-mute);text-decoration:none;font-size:15px;font-weight:500;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color 140ms var(--ease-out),border-color 140ms var(--ease-out);
}
.nav a:hover{color:var(--on-ink);border-bottom-color:var(--coral)}
.head__cta{flex:none}
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;margin-left:auto;padding:0;
  background:none;border:1px solid var(--rule-dark);border-radius:2px;cursor:pointer;
}
.burger span{display:block;width:20px;height:1.5px;margin-inline:auto;background:var(--on-ink)}

/* единственный «кикер» на всём сайте */
.status{
  position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;
  /* longhand: shorthand padding обнулил бы padding-inline контейнера */
  padding-block:13px;border-bottom:1px solid var(--rule-dark);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-ink-mute);
}
/* моноширинный грузится только в 400 — вес не задаём, выделение держится цветом */
.status b{font-weight:400;color:var(--on-ink)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-right:8px;vertical-align:1px}

.hero{position:relative;z-index:2}
.hero__in{
  display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);
  gap:56px;align-items:center;
  /* longhand: shorthand padding обнулил бы padding-inline контейнера
     и весь текст героя уехал бы на 32px левее остальной страницы */
  padding-top:72px;min-height:calc(100svh - 420px);
}
h1{
  font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:800;
  font-size:clamp(2rem,4.6vw,3.9rem);
  line-height:1;letter-spacing:-.036em;margin-bottom:24px;
  /* без balance: переносы заданы в разметке, число строк не зависит от шрифта */
}
h1 em{font-style:normal;color:var(--coral)}
/* min-height под худший случай: резервный шрифт шире и переносится на строку больше,
   чем настоящий. Без резерва подмена шрифта меняла высоту героя на 29px и тянула
   за собой всю страницу — замер давал CLS 0.155. */
.lede{
  margin-bottom:34px;max-width:52ch;font-size:18.5px;line-height:1.6;
  min-height:6.4em;color:var(--on-ink-mute);
}
.acts{display:flex;flex-wrap:wrap;gap:13px}

/* ГРИД-БРЕЙК: плашка свисает через шов секции */
.panel{
  position:relative;z-index:3;align-self:end;margin-bottom:-215px;
  border:1px solid var(--rule-dark);background:var(--ink-2);
  box-shadow:0 20px 38px -18px rgba(10,4,26,.85);
}
.panel__top,.panel__foot{
  display:flex;justify-content:space-between;gap:14px;padding:14px 22px;
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-ink-mute);
}
.panel__top{border-bottom:1px solid var(--rule-dark)}
/* min-height под две строки: подпись занимает одну строку настоящим шрифтом
   и две резервным, без резерва подмена шрифта меняет высоту панели (CLS) */
.panel__foot{border-top:1px solid var(--rule-dark);min-height:62px;align-items:center}
/* график из первой версии сайта */
.panel__chart{height:96px;padding:16px 22px 0;border-top:1px solid rgba(247,245,250,.09)}
.panel__chart svg{width:100%;height:100%;overflow:visible}
.panel__area{fill:rgba(196,178,240,.09)}
.panel__line{
  fill:none;stroke:var(--lav);stroke-width:2.4;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
}
/* появление ростом по вертикали, а не отрисовкой штриха:
   «линия рисуется» — подпись пиковой сцены, дублировать её нельзя */
.js .panel__chart{opacity:0;transform:scaleY(.72);transform-origin:bottom}
.js .panel.is-in .panel__chart{
  opacity:1;transform:none;
  transition:opacity 520ms var(--ease-out) .34s,transform 760ms var(--ease-out) .34s;
}
.bar{display:grid;grid-template-columns:128px minmax(0,1fr) 58px;align-items:center;gap:14px;padding:16px 22px}
.bar + .bar{border-top:1px solid rgba(247,245,250,.09)}
.bar__name{font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__track{height:6px;background:rgba(247,245,250,.13)}
.bar__track i{display:block;height:100%;width:var(--w);background:var(--lav)}
/* данные появляются шириной, а не сдвигом — другое выражение того же семейства */
.js .bar__track i{width:0}
.js .panel.is-in .bar__track i{width:var(--w);transition:width 900ms var(--ease-out) var(--bd,0s)}
.js .panel.is-in .bar:nth-child(1) .bar__track i{--bd:.00s}
.js .panel.is-in .bar:nth-child(2) .bar__track i{--bd:.08s}
.js .panel.is-in .bar:nth-child(3) .bar__track i{--bd:.16s}
.js .panel.is-in .bar:nth-child(4) .bar__track i{--bd:.24s}
.bar__val{font-size:14px;text-align:right}

.ticker{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px 44px;
  margin-top:64px;padding-top:16px;padding-bottom:22px;border-top:1px solid var(--rule-dark);
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-ink-mute);
}
.ticker b{color:var(--on-ink);font-weight:400}

/* ============================================================
   СЦЕНА 2 — ЛЕНТА И СИСТЕМА
   ============================================================ */
.partners{padding:150px 0 0;background:var(--paper)}
.partners__lead{font-size:14px;color:var(--on-paper-mute)}
.marquee{
  margin-top:20px;padding:22px 0;overflow:hidden;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;gap:0;white-space:nowrap;
}
.marquee__row{
  display:flex;align-items:center;gap:28px;flex:none;padding-right:28px;
  font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:clamp(1.1rem,2vw,1.6rem);
  letter-spacing:-.02em;color:var(--on-paper);
  animation:slide 42s linear infinite;
}
.marquee__row .sep{color:var(--coral);font-family:'Golos Text',sans-serif;font-size:.7em}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* открытие секции: волосяная линейка над заголовком */
.adv{padding:96px 0 104px}
.adv .t-display{padding-top:34px;border-top:1px solid var(--rule);max-width:24ch}
.adv .t-lead{margin-top:20px}
.ledger{margin-top:56px;border-top:1px solid var(--rule)}
.ledger__row{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;
  padding:30px 0;border-bottom:1px solid var(--rule);
}
.ledger__row h3{
  font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:clamp(1.15rem,1.9vw,1.5rem);
  letter-spacing:-.025em;line-height:1.14;
}
.ledger__row p{color:var(--on-paper-mute);max-width:60ch}

/* ============================================================
   СЦЕНА 3 — КАТАЛОГ РАБОТ (липкий заголовок 5/12)
   ============================================================ */
.srv{padding:104px 0;background:var(--paper-2)}
.srv__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
.srv__stick{position:sticky;top:40px}
.srv__stick .t-lead{margin-top:20px;font-size:17px}

.audit{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;
  padding:32px;background:var(--ink);color:var(--on-ink);
}
.audit h3{font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:1.5rem;letter-spacing:-.025em}
.audit p{margin:12px 0 24px;color:var(--on-ink-mute);max-width:46ch}
.audit__price{text-align:right;display:flex;flex-direction:column;gap:6px}
.audit__price span{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-ink-mute)}
.audit__price b{font-size:1.5rem;font-weight:400;color:var(--coral);white-space:nowrap}

.index{margin-top:8px}
.index__row{padding:26px 0;border-bottom:1px solid var(--rule)}
.index__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.index__row h3{
  font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:clamp(1.05rem,1.6vw,1.3rem);
  letter-spacing:-.025em;
}
.index__price{font-size:15px;white-space:nowrap;color:var(--on-paper)}
.index__row > p{margin-top:10px;color:var(--on-paper-mute);max-width:64ch}
.index__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
.index__note{font-size:13.5px;color:var(--on-paper-mute)}
.index__link{
  font-size:15px;font-weight:500;text-decoration:none;color:var(--on-paper);
  border-bottom:1px solid var(--coral);padding-bottom:2px;
  transition:color 140ms var(--ease-out);
}
.index__link:hover{color:var(--coral)}
.tag{
  font-size:12px;font-weight:500;padding:4px 10px;border-radius:2px;
  border:1px solid var(--rule);color:var(--on-paper-mute);
}
.tag--wb{border-color:color-mix(in oklab,var(--wb) 40%,var(--rule));color:var(--wb)}
.tag--oz{border-color:color-mix(in oklab,var(--oz) 40%,var(--rule));color:var(--oz)}

.srv__cta{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;
  margin-top:40px;padding:28px;border:1px solid var(--rule);background:var(--paper);
}
.srv__cta h3{font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.025em}
.srv__cta p{margin-top:8px;color:var(--on-paper-mute)}

/* ============================================================
   СЦЕНА 4 — ПЛОЩАДКИ И МАРШРУТ
   ============================================================ */
/* открытие секции: заголовок и лид рядом, а не друг под другом */
.mp{padding:104px 0}
.mp .t-display{max-width:22ch}
.mp .t-lead{margin-top:0}
.mp > .container{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px 64px;align-items:end}
.mp__grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.mp__card{padding:26px 24px 24px;background:var(--paper);border-top:3px solid var(--rule)}
.mp__card--wb{border-top-color:var(--wb)}
.mp__card--oz{border-top-color:var(--oz)}
.mp__card--ym{border-top-color:var(--ym)}
.mp__card--mv{border-top-color:var(--mv)}
.mp__card h3{display:flex;align-items:center;gap:10px;font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.02em}
.mp__code{font-size:12px;padding:3px 7px;background:var(--ink);color:var(--on-ink);border-radius:2px}
.mp__card dl{margin-top:20px}
.mp__card dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--rule)}
.mp__card dt{font-size:13.5px;color:var(--on-paper-mute)}
.mp__card dd{font-size:15px;white-space:nowrap}
/* поверхности приходят масштабом, не сдвигом */
.js .mp__card.rise{transform:scale(.985)}
.js .mp__card.rise.is-in{transform:none}

/* открытие секции: только заголовок, без лида */
.proc{padding:0 0 104px}
.proc__list{position:relative;margin-top:48px;padding-left:0}
.proc__item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;padding:24px 0 24px 0;border-top:1px solid var(--rule)}
.proc__item:last-child{border-bottom:1px solid var(--rule)}
.proc__num{
  font-size:13px;font-weight:500;color:var(--coral);
  padding-top:4px;width:34px;flex:none;
}
.proc__item h3{font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:clamp(1.05rem,1.6vw,1.28rem);letter-spacing:-.025em}
.proc__item p{margin-top:8px;color:var(--on-paper-mute);max-width:66ch}
/* этапы въезжают сбоку — маршрут читается как движение вправо */
.js .proc__item.rise{transform:translateX(-14px)}
.js .proc__item.rise.is-in{transform:none}

/* ============================================================
   СЦЕНА 5 — ПИК: КРИВАЯ
   ============================================================ */
/* без overflow:hidden — он создаёт скролл-контейнер и ломает position:sticky у прибора */
.peak{position:relative;background:var(--ink);color:var(--on-ink)}
/* Зерно только на экранном кадре прибора, а не на всей 600svh-секции:
   растянутый на всю высоту слой был главным источником просадки fps. */
.peak__graphic::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.05;
}
.peak__head{position:relative;z-index:2;padding-top:104px}
.peak__head .t-lead{margin-top:16px}
.peak__scroller{position:relative;z-index:2;margin-top:56px}

.peak__graphic{
  position:sticky;top:0;height:100svh;display:flex;align-items:center;
}
.peak__frame{width:100%}
.peak__chart{width:52%;margin-left:auto}
.peak__svg{width:100%;height:min(46svh,420px);overflow:visible}
.peak__rules line{stroke:rgba(247,245,250,.12);stroke-width:1}
.peak__path{
  fill:none;stroke:var(--coral);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.22;
}
.peak__dot{fill:var(--lav);opacity:.5}
.peak__dot--b{fill:var(--coral)}

.peak__axis{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;
  font-size:12px;letter-spacing:.05em;color:var(--on-ink-mute);
}
.peak__axis b{font-weight:400;color:var(--on-ink)}
.peak__axis--x{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-dark)}

.peak__steps{position:relative;margin-top:calc(-100svh)}
.peak__step{min-height:100svh;display:flex;align-items:center}
.peak__card{
  width:44%;padding:30px;background:var(--paper);color:var(--on-paper);
  box-shadow:0 18px 34px -16px rgba(10,4,26,.8);
}
.peak__tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-paper-mute)}
.peak__mult{margin-top:14px;font-size:14px;color:var(--on-paper-mute)}
.peak__mult b{font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:800;font-size:2.4rem;letter-spacing:-.04em;color:var(--coral);margin-right:8px;vertical-align:-2px}
/* график внутри карточки — только для узких экранов, где пин снят */
.peak__mini{display:none}
.peak__mini line{stroke:var(--rule);stroke-width:2}
.peak__mini path{fill:none;stroke:var(--coral);stroke-width:5;stroke-linecap:round}
.peak__card h3{margin-top:10px;font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.025em;line-height:1.14}
.peak__sub{margin-top:10px;font-size:15.5px;color:var(--on-paper-mute)}
.peak__desc{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--on-paper)}
.peak__facts{margin-top:20px;border-top:1px solid var(--rule)}
.peak__facts > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
.peak__facts dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-paper-mute)}
.peak__facts dd{font-size:14.5px;text-align:right}
.peak__facts s{color:var(--on-paper-mute);text-decoration:line-through}
.peak__facts b{font-weight:400;color:var(--on-paper)}
.peak__card .btn{margin-top:22px}

/* с JS: активен один кейс. Без JS — все шесть видны списком, все кривые нарисованы. */
.js [data-peak] .peak__step{opacity:0;transition:opacity 420ms var(--ease-out)}
.js [data-peak] .peak__step.is-active{opacity:1}
.js [data-peak] .peak__card{transform:translateY(14px);transition:transform 520ms var(--ease-out)}
.js [data-peak] .peak__step.is-active .peak__card{transform:none}
.js [data-peak] .peak__path{opacity:0;transition:opacity 320ms var(--ease-out)}
.js [data-peak] .peak__path.is-drawn{
  opacity:1;stroke-dashoffset:0;
  transition:opacity 240ms var(--ease-out),stroke-dashoffset 1000ms var(--ease-out);
}

/* ============================================================
   СЦЕНА 6 — ЧТО ТЕЧЁТ
   ============================================================ */
/* открытие секции: крупный заголовок узкой мерой, лид без отбивки */
.prob{padding:104px 0}
.prob .t-display{font-size:clamp(1.9rem,3.6vw,3rem);max-width:17ch}
.prob .t-lead{margin-top:18px}
.prob__list{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 56px}
.prob__item{padding:26px 0;border-top:1px solid var(--rule)}
.prob__item h3{font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:1.12rem;letter-spacing:-.025em;line-height:1.18}
.prob__item p{margin-top:10px;color:var(--on-paper-mute)}
/* шахматное смещение: чётные приходят справа, нечётные слева */
.js .prob__item.rise:nth-child(odd){transform:translate(-12px,10px)}
.js .prob__item.rise:nth-child(even){transform:translate(12px,10px)}
.js .prob__item.rise.is-in{transform:none}

/* секция вообще без заголовка — единственная такая на странице */
.nums{background:var(--ink);color:var(--on-ink);padding:72px 0}
.nums__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px 32px}
.num b{
  display:block;font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:800;
  font-size:clamp(2.6rem,5vw,4rem);line-height:.94;letter-spacing:-.045em;
}
.num span{display:block;margin-top:8px;font-size:14px;color:var(--coral)}
.num p{margin-top:6px;font-size:14.5px;color:var(--on-ink-mute)}

/* ============================================================
   СЦЕНА 7 — ДОГОВОР
   ============================================================ */
.faq{padding:104px 0;background:var(--paper-2)}
.faq__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
.faq__stick{position:sticky;top:40px}
.faq__stick .t-lead{margin-top:18px;font-size:17px}
.faq__list{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__item summary{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:clamp(1rem,1.5vw,1.15rem);
  letter-spacing:-.02em;line-height:1.25;
  transition:color 140ms var(--ease-out);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:'';flex:none;width:12px;height:12px;
  border-right:1.5px solid var(--coral);border-bottom:1.5px solid var(--coral);
  transform:rotate(45deg);transition:transform 200ms var(--ease-out);
}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item summary:hover{color:var(--coral)}
.faq__item > p{padding:0 0 22px;color:var(--on-paper-mute);max-width:70ch}

.contact{background:var(--ink);color:var(--on-ink);padding:104px 0}
.contact__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:64px;align-items:start}
.contact .t-display{max-width:20ch}
.contact .t-lead{margin-top:18px}
.contact__points{margin-top:32px;display:grid;gap:14px}
.contact__points li{display:flex;align-items:center;gap:12px;font-size:16px}
.contact__points span{
  flex:none;width:18px;height:18px;border:1px solid var(--coral);border-radius:50%;
  position:relative;
}
.contact__points span::after{
  content:'';position:absolute;inset:4px;background:var(--coral);border-radius:50%;
}
.contact__form{border:1px solid var(--rule-dark);background:var(--ink-2);padding:28px}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:7px;font-size:13.5px;color:var(--on-ink-mute)}
.field input,.field textarea{
  width:100%;padding:13px 14px;border-radius:2px;
  border:1px solid var(--rule-dark);background:rgba(10,4,26,.35);
  color:var(--on-ink);font-family:inherit;font-size:16px;
  transition:border-color 140ms var(--ease-out),background-color 140ms var(--ease-out);
}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:#9E90BD}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--coral);background:rgba(10,4,26,.55)}
.hp{position:absolute;left:-9999px}
.check{display:flex;align-items:flex-start;gap:10px;margin:6px 0 20px;font-size:14px;color:var(--on-ink-mute)}
.check input{flex:none;margin-top:3px;accent-color:var(--coral);width:16px;height:16px}
.check a{color:var(--on-ink);text-decoration:underline}
.form__note{margin-top:14px;font-size:13px;color:var(--on-ink-mute);text-align:center}
.form__status{margin-top:10px;font-size:14px;text-align:center}
.form__status.is-ok{color:#8BE8A8}
.form__status.is-err{color:#FF9A7A}

.foot{background:var(--ink);color:var(--on-ink);border-top:1px solid var(--rule-dark);padding:64px 0 0}
.foot__in{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:40px 32px}
.foot__brand p{margin-top:16px;font-size:14.5px;color:var(--on-ink-mute);max-width:38ch}
.foot__col h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:14px;font-weight:500}
.foot__col a{display:block;padding:5px 0;font-size:14.5px;color:var(--on-ink-mute);text-decoration:none;transition:color 140ms var(--ease-out)}
.foot__col a:hover{color:var(--on-ink)}
.foot__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:56px;padding-top:22px;padding-bottom:26px;border-top:1px solid var(--rule-dark);
  font-size:13.5px;color:var(--on-ink-mute);
}
.foot__bottom a{text-decoration:underline}

/* ============ ПЛАВАЮЩЕЕ И МОДАЛЬНОЕ ============ */
.float-cta{
  position:fixed;right:20px;bottom:20px;z-index:40;
  display:none;align-items:center;gap:9px;
  padding:13px 18px;border-radius:2px;
  background:var(--coral);color:var(--coral-ink);text-decoration:none;
  font-weight:500;font-size:15px;box-shadow:0 16px 34px -14px rgba(10,4,26,.6);
}
.float-cta.is-shown{display:flex}
/* пока висит cookie-баннер, плавающая кнопка не спорит с ним за угол */
body:has(.cookie:not([hidden])) .float-cta{display:none}

.mobile-menu{
  position:fixed;inset:var(--head-h) 0 0;z-index:30;
  background:var(--ink);padding:28px var(--pad) 40px;
  display:flex;flex-direction:column;gap:8px;overflow-y:auto;
}
/* обязательно: класс с display:flex иначе перебивает браузерный [hidden] */
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu a:not(.btn){
  padding:16px 0;border-bottom:1px solid var(--rule-dark);
  color:var(--on-ink);text-decoration:none;
  font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:1.15rem;letter-spacing:-.02em;
}
.mobile-menu .btn{margin-top:24px}

.modal{
  border:none;padding:0;max-width:min(760px,92vw);max-height:88vh;
  background:var(--paper);color:var(--on-paper);
}
.modal::backdrop{background:rgba(15,7,30,.72)}
.modal__card{display:flex;flex-direction:column;max-height:88vh}
.modal__head{position:relative;padding:26px 28px 20px;border-bottom:1px solid var(--rule)}
.modal__eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-paper-mute)}
.modal__title{margin-top:8px;font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:-.025em;max-width:26ch}
.modal__close{
  position:absolute;top:20px;right:20px;width:38px;height:38px;
  display:grid;place-items:center;background:none;border:1px solid var(--rule);
  border-radius:2px;cursor:pointer;color:var(--on-paper);
}
.modal__body{padding:24px 28px;overflow-y:auto}
.modal__body h3{margin-top:24px;font-family:'Unbounded','Unbounded Fallback',sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:-.02em}
.modal__body p{margin-top:10px;font-size:15.5px;color:var(--on-paper-mute)}
.modal__lead{font-size:16px !important;color:var(--on-paper) !important}
.modal__body ul{margin-top:10px;padding-left:20px;list-style:disc}
.modal__body li{font-size:15.5px;color:var(--on-paper-mute);padding:3px 0}
.modal__body a{color:var(--on-paper)}
.modal__date{margin-top:26px;font-size:12px;color:var(--on-paper-mute)}
.modal__foot{padding:18px 28px;border-top:1px solid var(--rule);display:flex;justify-content:flex-end}

.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:45}
.cookie__in{
  max-width:var(--container);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;background:var(--ink);color:var(--on-ink);
  border:1px solid var(--rule-dark);box-shadow:0 24px 60px -24px rgba(10,4,26,.7);
}
.cookie p{font-size:14px;color:var(--on-ink-mute);max-width:78ch}
.cookie b{color:var(--on-ink);font-weight:500}
.cookie a{color:var(--on-ink)}
.cookie__btn{
  flex:none;padding:12px 22px;border:none;border-radius:2px;cursor:pointer;
  background:var(--coral);color:var(--coral-ink);font-family:inherit;font-weight:500;font-size:15px;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1080px){
  .mp > .container{grid-template-columns:minmax(0,1fr)}
  .mp .t-lead{margin-top:16px}
  .contact__in{grid-template-columns:minmax(0,1fr)}
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:980px){
  :root{--pad:20px}
  .nav,.head__cta{display:none}
  .burger{display:flex}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:52px;min-height:0}
  /* 7vw и низкий минимум clamp: строка «Выводим бренды» должна влезать целиком
     именно шрифтом Unbounded — он шире резервного. Иначе заголовок уходит
     на 4 строки вместо 3, и подмена шрифта дёргает всю страницу.
     Проверено на 320/390/480/768/1440. */
  h1{font-size:clamp(1.35rem,7vw,3rem);overflow-wrap:break-word}
  .panel{align-self:auto;margin-bottom:0}
  /* кнопки строго в столбец: при переносе по ширине их число строк зависело
     от того, какой шрифт загрузился, и герой прыгал на 26px.
     Заодно тапать по кнопке во всю ширину удобнее. */
  .acts{flex-direction:column;align-items:stretch}
  .acts .btn{width:100%}
  /* строго в столбец: при переносе по ширине число строк зависело от того,
     какой шрифт успел загрузиться, и тикер прыгал на 25px */
  .ticker{margin-top:48px;flex-direction:column;gap:7px}
  .status{flex-direction:column;gap:6px}
  .status__right{display:none}
  .partners{padding-top:72px}
  .srv__in,.faq__in{grid-template-columns:minmax(0,1fr);gap:36px}
  .srv__stick,.faq__stick{position:static}
  .audit{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
  .audit__price{text-align:left;align-items:flex-start}
  .ledger__row{grid-template-columns:minmax(0,1fr);gap:10px}
  .float-cta.is-shown{display:none}

  /* пик на узком экране: пин снят, у каждого кейса свой график в карточке.
     Так карточка не воюет с липким прибором за место и не обрезается. */
  .peak__graphic{display:none}
  .peak__steps{margin-top:0}
  .peak__step{min-height:0;align-items:stretch;padding:0 var(--pad) 24px}
  .peak__card{width:100%;padding:24px}
  .peak__mult{margin-top:12px}
  .peak__mult b{font-size:2rem}
  .peak__mini{display:block;width:100%;height:104px;margin-top:18px}
  .js [data-peak] .peak__step,
  .js [data-peak] .peak__step.is-active{opacity:1}
  .js [data-peak] .peak__card,
  .js [data-peak] .peak__step.is-active .peak__card{transform:none}
}

/* Узкие экраны: на них число строк расходится сильнее всего.
   Резервируем высоту лида, шапки и подписи панели под худший случай —
   иначе подмена шрифта дёргает страницу (проверено на 320/360/390/420). */
/* только до 380px: именно там лид набирает 6 строк резервным шрифтом
   и 5 настоящим. Шире 380px резерв не нужен и давал лишний воздух. */
@media (max-width:380px){
  .lede{min-height:9.6em}
}
@media (max-width:360px){
  /* в столбец: при переносе по ширине шапка панели уходила в три строки
     резервным шрифтом и в две настоящим. В столбец их всегда две. */
  .panel__top{flex-direction:column;gap:3px;min-height:58px}
  .panel__foot{min-height:76px}
}

@media (max-width:560px){
  /* 116px, чтобы «Яндекс Маркет» влезал целиком, а не обрезался троеточием */
  .bar{grid-template-columns:116px minmax(48px,1fr) 48px;gap:9px;padding:14px 16px}
  .panel__top,.panel__foot{padding:12px 16px}
  .foot__in{grid-template-columns:minmax(0,1fr)}
  .nums{padding:56px 0}
  .cookie__in{padding:16px}
}

/* ============================================================
   БЕЗ JAVASCRIPT — та же плоская версия пика, что и при reduced-motion:
   пин снят, у каждого кейса свой график, ничего не спрятано.
   ============================================================ */
html:not(.js) .peak__graphic{display:none}
html:not(.js) .peak__steps{margin-top:0}
html:not(.js) .peak__step{min-height:0;padding:0 var(--pad) 28px;align-items:stretch}
html:not(.js) .peak__card{width:100%;max-width:680px}
html:not(.js) .peak__mini{display:block;width:100%;height:120px;margin-top:18px}

/* ============================================================
   REDUCED MOTION — не выключение, а другая версия того же фильма:
   пин снят, все шесть кривых нарисованы, все кейсы разложены списком.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .marquee__row{animation:none}
  .marquee{white-space:normal}

  .js .rise,.js .rise.is-in{opacity:1;transform:none;transition:none}
  .js .bar__track i,.js .panel.is-in .bar__track i{width:var(--w);transition:none}
  .js .panel__chart,.js .panel.is-in .panel__chart{opacity:1;transform:none;transition:none}

  /* плоская версия пика: график уходит в каждую карточку, мера чтения сохранена */
  .peak__graphic{display:none}
  .peak__steps{margin-top:0}
  .peak__step{min-height:0;padding:0 var(--pad) 28px;align-items:stretch}
  .peak__card{width:100%;max-width:680px}
  .peak__mini{display:block;width:100%;height:120px;margin-top:18px}
  .js [data-peak] .peak__step,
  .js [data-peak] .peak__step.is-active{opacity:1}
  .js [data-peak] .peak__card,
  .js [data-peak] .peak__step.is-active .peak__card{transform:none;transition:none}

  .btn,.btn--go:hover{transform:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner{
  position:fixed;
  left:20px; right:20px; bottom:20px;
  z-index:80;
  background:var(--ink);
  color:#fff;
  border-radius:16px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.35), 0 8px 20px -8px rgba(0,0,0,.25);
  padding:18px 22px;
  animation: cookieIn .35s var(--ease-out);
}
@keyframes cookieIn{
  from{ transform:translateY(20px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.cookie-banner__inner{
  display:flex; align-items:center; gap:22px;
  max-width:1200px; margin:0 auto;
}
.cookie-banner__text{
  flex:1;
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.85);
}
.cookie-banner__text b{ color:#fff; font-weight:600; }
.cookie-banner__text a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.cookie-banner__text a:hover{ color:var(--coral); }
.cookie-banner__btn{
  flex:none;
  background:var(--coral);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:12px 26px;
  font-family:'Manrope', sans-serif;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.cookie-banner__btn:hover{
  transform:translateY(-1px);
  background:#FF7E55;
}
@media (max-width: 720px){
  .cookie-banner{ left:12px; right:12px; bottom:12px; padding:14px 16px; border-radius:14px; }
  .cookie-banner__inner{ flex-direction:column; gap:12px; align-items:stretch; }
  .cookie-banner__btn{ width:100%; padding:14px; }
  .cookie-banner__text{ font-size:12px; text-align:left; }
}