:root{--t-bg:#181818;--t-bg-rgb:24,24,24;--t-s1:#1f1f1f;--t-s1-rgb:31,31,31;--t-s2:#252525;--t-s3:#2a2a2a;--t-line:#333333;--t-line-rgb:51,51,51;
--t-ln2:#4a4a4a;--t-ctl:#626262;--t-fg:#e6e6e6;--t-fg2:#b0b0b0;--t-fg3:#8f8f8f;--t-ac:#4c9fe6;--t-ac-rgb:76,159,230;--t-ac2:#65adec;--t-acd:#388bcf;
--t-up:#56b88a;--t-up-rgb:86,184,138;--t-dn:#ec7770;--t-dn-rgb:236,119,112;--t-warn:#d8b56a;--t-warn-rgb:216,181,106;--t-ink:255,255,255;
--t-glow:.17;--t-shadow:rgba(0,0,0,.6);--t-act:#2c2c2c;--t-shade:0,0,0;color-scheme:dark}
html[data-theme=light]{--t-bg:#f6f6f4;--t-bg-rgb:246,246,244;--t-s1:#ffffff;--t-s1-rgb:255,255,255;--t-s2:#efefec;--t-s3:#e6e6e2;--t-line:#dfdfda;--t-line-rgb:223,223,218;
--t-ln2:#c6c6c0;--t-ctl:#b1b1ab;--t-fg:#18181a;--t-fg2:#45454a;--t-fg3:#6a6a70;--t-ac:#1f6fd1;--t-ac-rgb:31,111,209;--t-ac2:#2b7fe3;--t-acd:#185bb0;
--t-up:#15805a;--t-up-rgb:21,128,90;--t-dn:#c23c34;--t-dn-rgb:194,60,52;--t-warn:#8f620f;--t-warn-rgb:143,98,15;--t-ink:0,0,0;
--t-glow:.12;--t-shadow:rgba(0,0,0,.22);--t-act:#e4e4df;--t-shade:90,90,80;color-scheme:light}

/* ================= сайт: своя тёмная палитра, независимая от темы терминала ============ */
.lp{
  /* Три ступени глубины, а не один чёрный: фон — панель — приподнятое.
     Без этого карточки не читаются как объекты и всё выглядит плоским. */
  --g0:var(--t-bg); --g1:var(--t-s1); --g2:var(--t-s2); --ln:var(--t-line); --ln2:var(--t-line);
  --tx:var(--t-fg); --tx2:var(--t-fg2); --tx3:var(--t-fg3);
  /* Одна акцентная краска — бирюза. Фиолетовый и зелёный/красный несут смысл
     (ступени лесенки, прибыль, убыток) и больше нигде не появляются. */
  --ac:var(--t-ac); --ac2:var(--t-ac); --win:var(--t-up); --loss:var(--t-dn);
  --dsp:"Golos Text",system-ui,sans-serif;
  --bdy:"Golos Text",system-ui,sans-serif;
  --mn:"IBM Plex Mono",ui-monospace,monospace;
  background:var(--g0); color:var(--tx); font-family:var(--bdy);
  font-size:15px; line-height:1.6; overflow-y:auto; overflow-x:hidden;
  flex:1; min-height:0; position:relative; padding:0;
  scroll-behavior:smooth;
}
.lp *{box-sizing:border-box}

/* Стили терминала глобальные и протекают сюда: button, footer, input.
   Гасим их через :where() — он не добавляет специфичности, и правила сайта
   ниже продолжают работать как обычно. */
:where(.lp) :where(button){background:none;border:0;color:inherit;font:inherit;
  padding:0;border-radius:0;white-space:normal;cursor:pointer;text-align:inherit}
:where(.lp) :where(button):hover{background:none}
:where(.lp) :where(footer){display:block;background:none;border-top:0;padding:0}
:where(.lp) :where(input,select,textarea){font:inherit}
.lp h1,.lp h2,.lp h3{font-family:var(--dsp);font-weight:600;letter-spacing:-.02em;
  line-height:1.1;text-wrap:balance;margin:0}
.lp p{margin:0}
.lp b,.lp strong{font-weight:600}
.lp .mono{font-family:var(--mn);font-variant-numeric:tabular-nums}
.lp a{color:var(--ac);text-decoration:none}
.lp a:not([class]):hover{text-decoration:underline}
.lp :focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}

/* живой свечной фон: график едет, сделки открываются и закрываются */
/* Свечи идут под всей страницей, но приглушённо: секции лежат на полупрозрачной
   подложке, поэтому текст читается, а движение за ним видно. */
#fxWrap{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;
  pointer-events:none;overflow:hidden}
#bgfx{display:block;width:100%;height:100%}
.lp>section,.lp>footer,.lp>.rule,.lp>.heroWrap{position:relative;z-index:1}
.lp>section,.lp>footer{background:rgba(var(--t-bg-rgb),.88)}
.heroWrap{background:rgba(var(--t-bg-rgb),.20)}

.sec{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}

.eyebrow{font-family:var(--mn);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ac);display:flex;align-items:center;gap:9px;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--ac);opacity:.6}

/* ---------------- герой ---------------- */
.heroWrap{position:relative;overflow:hidden;border-bottom:1px solid var(--ln)}
/* Луч из верхнего правого угла и мягкое свечение по краю — вся глубина первого
   экрана держится на них, поэтому это градиенты по смыслу, а не для красоты. */
.heroWrap::before{content:"";position:absolute;top:-10%;right:-6%;width:62%;height:150%;
  background:conic-gradient(from 205deg at 100% 0%,
    rgba(var(--t-ac-rgb),.20) 0deg,rgba(var(--t-ac-rgb),.07) 16deg,transparent 34deg);
  filter:blur(28px);pointer-events:none;z-index:1}
.heroWrap::after{content:"";position:absolute;inset:auto 0 -40% 0;height:70%;
  background:none;
  pointer-events:none;z-index:1}
.hero{position:relative;z-index:2;padding:clamp(58px,7.5vw,104px) var(--pad) clamp(30px,3.4vw,48px);
  max-width:960px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(31px,4.5vw,58px);margin:0 auto 18px;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--ac)}
.hero .lead{font-size:clamp(15px,1.35vw,17.5px);color:var(--tx2);max-width:60ch;
  margin:0 auto 28px}
.btns{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}

/* первый экран: слева смысл, справа доказательство */
/* Обе половины героя стоят в общей сетке страницы: слева и справа отступы
   одинаковые, панель с графиком не липнет к краю окна. */
.hero2{position:relative;z-index:2;max-width:var(--w);margin:0 auto;
  padding:clamp(44px,5.2vw,78px) var(--pad) clamp(34px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(26px,3.2vw,46px);align-items:center}
.hero2 .glass{border-radius:6px}
@media(max-width:980px){
  .hero2{grid-template-columns:1fr;gap:26px}
  .hero2 .glass{border-radius:6px}
}
.hero2 h1{font-size:clamp(23px,2.75vw,43px);margin:0 0 20px;max-width:none;
  text-wrap:normal}
/* Каждая половина — одной строкой целиком; переносится только на узком экране. */
.hero2 h1 span{display:inline-block;white-space:nowrap}
@media(max-width:620px){
  .hero2 h1{font-size:clamp(25px,7vw,34px)}
  .hero2 h1 span{white-space:normal}
}
.hero2 h1 em{font-style:normal;color:var(--ac)}
.hero2 .lead{font-size:clamp(15px,1.3vw,17px);color:var(--tx2);max-width:56ch;margin:0 0 26px}
/* Числа героя: без рамки-коробки, только тонкие разделители — так они читаются
   как факты, а не как виджет. */
.hstrip{display:flex;margin:30px 0 0;border-top:1px solid var(--ln);
  border-bottom:1px solid var(--ln)}
.hstrip div{flex:1;padding:16px 20px 15px;position:relative;min-width:0}
.hstrip div+div::before{content:"";position:absolute;left:0;top:16px;bottom:16px;
  width:1px;background:var(--ln)}
.hstrip div:first-child{padding-left:0}
.hstrip .v{font-family:var(--dsp);font-weight:600;font-size:clamp(19px,1.7vw,25px);
  letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.hstrip .v.g{color:var(--win)} .hstrip .v.r{color:var(--loss)}
.hstrip .k{font-size:11.5px;color:var(--tx3);margin-top:8px;line-height:1.35}
@media(max-width:560px){
  .hstrip{flex-wrap:wrap;border:0;gap:1px;background:var(--ln);
    border:1px solid var(--ln);border-radius:6px;overflow:hidden}
  .hstrip div{flex:1 1 45%;background:var(--g1);padding:14px 16px}
  .hstrip div+div::before{display:none}
  .hstrip div:first-child{padding-left:16px}
}

/* Пункты: короткая строка целиком, без переносов посреди мысли. */
.proofs{display:flex;flex-direction:column;gap:0;margin:26px 0 0}
.pr{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--ln)}
.pr:last-child{border-bottom:0}
.pr i{font-style:normal;font-family:var(--mn);font-size:11px;color:var(--ac);
  letter-spacing:.04em}
.pr b{display:block;color:var(--tx);font-weight:600;font-size:14.5px;margin-bottom:3px}
.pr span{display:block;font-size:13.5px;color:var(--tx2);line-height:1.5}

/* тарифы */
.tars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.tars{grid-template-columns:1fr}}
.tar{border:1px solid var(--ln);border-radius:6px;background:var(--g1);padding:26px 24px 24px;
  display:flex;flex-direction:column;box-shadow:inset 0 1px 0 rgba(var(--t-ink),.045)}
.tar.top{border-color:var(--ac);box-shadow:inset 0 1px 0 rgba(var(--t-ink),.06)}
.tar .badge2{position:absolute;top:-11px;left:24px;font-family:var(--mn);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;background:var(--ac);color:var(--t-bg);
  padding:4px 10px;border-radius:999px;font-weight:600}
.tar{position:relative}
.tar h3{font-size:19px;margin-bottom:6px}
.tar .who{font-size:13px;color:var(--tx3);margin-bottom:20px;line-height:1.5;min-height:2.6em}
.tar .price{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.tar .price b{font-family:var(--dsp);font-weight:600;font-size:36px;letter-spacing:-.03em}
.tar .price span{font-size:13.5px;color:var(--tx3)}
.tar .free{font-size:13px;color:var(--ac);margin-bottom:20px}
.tar ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.tar li{display:flex;gap:10px;font-size:13.5px;color:var(--tx2);line-height:1.5}
.tar li svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:var(--ac);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tar li.no{color:var(--tx3)}
.tar li.no svg{stroke:var(--tx3)}
.tar .b1,.tar .b2{width:100%;justify-content:center}

/* ---------------- схема: что входит в расчёт и что из него выходит ---------------- */
.schema{position:relative;z-index:1;max-width:var(--w);margin:0 auto;
  padding:0 var(--pad)}
.sgrid{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,auto) minmax(0,1fr);
  gap:clamp(24px,6vw,110px);align-items:center}
.scol{display:flex;flex-direction:column;gap:9px}
.snode{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:6px;
  border:1px solid var(--ln);background:var(--g1);
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.045);position:relative;z-index:2}
.scol.out .snode{flex-direction:row-reverse;text-align:right}
.snode .sk{font-size:12.5px;color:var(--tx2);line-height:1.3;flex:1;min-width:0}
.sic{width:17px;height:17px;flex:none;fill:none;stroke:var(--tx3);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.snode:hover .sic{stroke:var(--tx2)}
.snode.hit .sic{stroke:var(--ac)}
.snode .sv{font-family:var(--mn);font-size:14px;color:var(--tx);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.snode.hit{border-color:var(--ac);box-shadow:inset 0 1px 0 rgba(var(--t-ink),.06)}
.score{position:relative;z-index:2;border:1px solid var(--ln2);border-radius:6px;
  background:linear-gradient(180deg,var(--g2),var(--g1));padding:22px 20px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.07)}
.score .ct{font-family:var(--mn);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:8px}
.score .cn{font-family:var(--dsp);font-weight:600;font-size:19px;letter-spacing:-.02em;
  line-height:1.15}
.score .cd{font-size:12px;color:var(--tx3);margin-top:8px;line-height:1.5}
.score.beat{border-color:var(--ac);box-shadow:inset 0 1px 0 rgba(var(--t-ink),.08)}
#wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,auto) minmax(0,1fr);
  gap:clamp(24px,6vw,110px);margin-bottom:16px;font-family:var(--mn);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.shead span:last-child{text-align:right}
@media(max-width:860px){.shead{display:none}}
/* ---- третья ступень: из чисел получается рабочая конфигурация ---- */
.sflow{margin-top:26px;display:flex;flex-direction:column;align-items:center}
.sarrow svg{width:20px;height:34px;fill:none;stroke:var(--ln2);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sout{margin-top:6px;width:100%;border:1px solid var(--ln2);border-radius:6px;
  background:linear-gradient(180deg,var(--g2),var(--g1));padding:24px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:26px;
  align-items:center;
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.06)}
@media(max-width:760px){.sout{grid-template-columns:1fr;gap:18px}}
.sh2{font-family:var(--dsp);font-weight:600;font-size:19px;letter-spacing:-.02em;
  margin:0 0 8px}
.sd2{font-size:13.5px;color:var(--tx2);line-height:1.65;margin:0 0 14px;max-width:62ch}
.scfg{display:flex;flex-wrap:wrap;gap:7px}
.scfg span{font-family:var(--mn);font-size:11.5px;color:var(--tx2);padding:5px 10px;
  border-radius:999px;border:1px solid var(--ln);background:var(--g0)}
.soutr{display:flex;flex-direction:column;gap:9px}
.soutr .b1,.soutr .b2{width:100%;justify-content:center}
.sfree{margin:2px 0 0;text-align:center;font-size:12.5px;color:var(--ac)}

.snotgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);margin:34px auto 0;max-width:1000px}
@media(max-width:760px){.snotgrid{grid-template-columns:1fr;gap:22px}}
.snotcol p{font-size:13.5px;color:var(--tx3);line-height:1.7;margin:0}
.snh{font-size:12px!important;font-family:var(--mn);letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 10px!important;display:flex;align-items:center;gap:8px}
.snh::before{content:"";width:16px;height:2px;border-radius:2px}
.snh.good{color:var(--win)} .snh.good::before{background:var(--win)}
.snh.bad{color:var(--loss)} .snh.bad::before{background:var(--loss)}
.score .cd b{color:var(--tx);font-family:var(--mn);font-size:14px}
@media(max-width:860px){
  .sgrid{grid-template-columns:1fr;gap:14px}
  .scol.out .snode{flex-direction:row;text-align:left}
  #wires{display:none}
  .score{order:-1}
}
.b1,.b2{font-family:var(--bdy);font-size:14.5px;font-weight:600;border-radius:6px;
  padding:14px 24px;border:1px solid transparent;cursor:pointer;transition:.16s;
  display:inline-flex;align-items:center;gap:9px;line-height:1}
.lp a.b1,.b1{background:var(--ac);color:var(--t-bg);box-shadow:none}
.b1:hover{transform:translateY(-1px);box-shadow:none}
.lp a.b2,.b2{background:transparent;color:var(--tx);border-color:var(--ln2)}
.b1:hover{background:var(--ac)}
.b2:hover{background:rgba(var(--t-ink),.04)}
.b2:hover{border-color:var(--ac);color:var(--ac)}
.hnums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:34px;
  background:var(--ln);border:1px solid var(--ln);border-radius:6px;overflow:hidden}
@media(max-width:560px){.hnums{grid-template-columns:repeat(2,1fr)}}
.hnums div{background:var(--g1);padding:14px 15px}
.hnums .v{font-family:var(--mn);font-size:20px;font-weight:500;color:var(--tx);
  font-variant-numeric:tabular-nums;line-height:1.1}
.hnums .k{font-size:11.5px;color:var(--tx3);margin-top:5px}

/* стеклянный экран с графиком */
.glass{border:1px solid var(--ln);border-radius:6px;background:var(--g1);
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.05);overflow:hidden}
.glass .bar{display:flex;align-items:center;gap:8px;padding:9px 13px;
  border-bottom:1px solid var(--ln);font-family:var(--mn);font-size:11px;color:var(--tx3)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ln2)}
.dot.live{background:var(--ac);box-shadow:none;animation:pl 2.4s infinite}
@keyframes pl{0%{box-shadow:none}70%{box-shadow:none}
  100%{box-shadow:none}}
.glass canvas{display:block;width:100%}
.glass .foot{display:flex;gap:14px;flex-wrap:wrap;padding:10px 13px;border-top:1px solid var(--ln);
  font-family:var(--mn);font-size:11px;color:var(--tx3)}
.glass .foot b{color:var(--tx2);font-weight:500}
.glass .foot b.pos{color:var(--win)}
.glass .foot b.neg{color:var(--loss)}
.glass .foot span{white-space:nowrap}

/* ---------------- секции ---------------- */
.block{padding:clamp(48px,5.4vw,84px) 0}
.block h2{font-size:clamp(25px,3.4vw,40px);margin-bottom:14px}
.rise{opacity:0;transform:translateY(26px) scale(.985);filter:blur(6px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .7s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             filter .7s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.rise.in{opacity:1;transform:none;filter:none}
/* Страховка: при печати и при снимке всей страницы наблюдатель за прокруткой
   не срабатывает, и блоки остаются прозрачными. Показываем их принудительно. */
@media print{
  .rise,.hc,.ft,.st,.gc,.lk,.s4,.snode,.kvlist,.glass,.shot,.rcard{
    opacity:1!important;transform:none!important;filter:none!important}
}
.block .sub{color:var(--tx2);font-size:16px;max-width:62ch;margin-bottom:36px}
.rule{height:1px;background:var(--ln);margin:0}

/* Отклик на курсор. Без него страница ощущается картинкой, а не интерфейсом. */
.hc,.ft,.st,.gc,.lk,.s4,.snode,.hcard{
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.hc:hover,.ft:hover,.st:hover,.gc:hover,.lk:hover,.s4:hover,.snode:hover{
  border-color:var(--ln2);background:var(--g2);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.06)}
.gc:hover,.lk:hover{border-color:var(--ac)}
.s4{transition:background .18s ease}
.s4:hover{transform:none;background:var(--g2);box-shadow:none}
.s4:hover .no{color:var(--ac)}
.b1,.b2{transition:transform .16s ease,box-shadow .16s ease,background .16s ease,
  border-color .16s ease,color .16s ease}
.b2:hover{transform:translateY(-1px)}

/* итог прогона крупно */
.res6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;
  background:var(--ln);border:1px solid var(--ln);border-radius:6px;overflow:hidden}
@media(max-width:1000px){.res6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.res6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.r6{background:var(--g1);padding:20px 18px;transition:background .18s}
.r6:hover{background:var(--g2)}
.r6 .v{font-family:var(--dsp);font-weight:600;font-size:clamp(22px,2vw,30px);
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.r6 .v.g{color:var(--win)} .r6 .v.r{color:var(--loss)}
.r6 .k{font-size:12px;color:var(--tx3);margin-top:9px;line-height:1.4}

/* четыре шага */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--ln);border:1px solid var(--ln);border-radius:6px;overflow:hidden}
@media(max-width:900px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps4{grid-template-columns:1fr}}
.s4{background:var(--g1);padding:24px 22px 26px;position:relative}
.s4 .no{font-family:var(--mn);font-size:11px;color:var(--ac);letter-spacing:.12em;
  margin-bottom:16px;display:block}
.s4 h3{font-size:17px;margin-bottom:9px;line-height:1.25}
.s4 p{font-size:13.5px;color:var(--tx2);line-height:1.6}
.s4 .soon{display:inline-block;margin-top:12px;font-family:var(--mn);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);
  border:1px solid var(--ln2);border-radius:999px;padding:4px 9px}

/* честность */
.honest{background:none}
.hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.hc{border:1px solid var(--ln);border-radius:6px;padding:24px;background:var(--g1);
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.045);
  opacity:0;transform:translateY(24px) scale(.985);filter:blur(6px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .7s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             filter .7s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.hc.in{opacity:1;transform:none;filter:none}
.hc .claim{font-family:var(--mn);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:12px}
.hc .fig{font-family:var(--dsp);font-size:34px;font-weight:600;line-height:1;margin-bottom:14px}
.hc .fig.g{color:var(--win)} .hc .fig.r{color:var(--loss)}
.hc .but{font-size:14px;color:var(--tx2);line-height:1.65}
.hc .but b{color:var(--tx)}
.punch{margin-top:30px;padding:22px 24px;border-left:2px solid var(--loss);
  background:rgba(var(--t-dn-rgb),.07);border-radius:0 6px 6px 0;font-size:16.5px;max-width:70ch}

/* анатомия сделки — закреплённая секция */
.anat{position:relative}
.anat .stick{position:sticky;top:62px;min-height:calc(100svh - 62px);display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:28px;align-items:start;
  max-width:var(--w);margin:0 auto;padding:26px var(--pad) 20px}
@media(max-width:900px){.anat .stick{grid-template-columns:1fr;gap:16px;padding:24px var(--pad);
  min-height:auto;top:6px}}
.anatpad{height:340vh}
@media(max-width:900px){.anatpad{height:230vh}
  .scrollhint{display:none}}
.steplist{display:flex;flex-direction:column;gap:6px}
.stp{display:flex;gap:11px;padding:9px 12px;border-radius:6px;border:1px solid transparent;
  opacity:.1;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease,background .3s,border-color .3s}
.stp.seen{opacity:.42;transform:none}
.stp.on{opacity:1;transform:none;border-color:var(--ln2);background:var(--g2)}
.stp{position:relative;overflow:hidden}
.stp::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease}
.stp.on::after{transform:scaleX(var(--p,0))}
.stp .num{font-family:var(--mn);font-size:11px;color:var(--tx3);padding-top:3px;flex:none;width:18px}
.stp.on .num{color:var(--ac)}
.stp .t{font-weight:600;font-size:14px;margin-bottom:2px}
.stp .d{font-size:12.5px;color:var(--tx2);line-height:1.5}
.scrollhint{display:none}}
.steplist{display:flex;flex-direction:column;gap:6px}
.stp{display:flex;gap:11px;padding:9px 12px;border-radius:6px;border:1px solid transparent;
  opacity:.1;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease,background .3s,border-color .3s}
.stp.seen{opacity:.42;transform:none}
.stp.on{opacity:1;transform:none;border-color:var(--ln2);background:var(--g2)}
.stp{position:relative;overflow:hidden}
.stp::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease}
.stp.on::after{transform:scaleX(var(--p,0))}
.stp .num{font-family:var(--mn);font-size:11px;color:var(--tx3);padding-top:3px;flex:none;width:18px}
.stp.on .num{color:var(--ac)}
.stp .t{font-weight:600;font-size:14px;margin-bottom:2px}
.stp .d{font-size:12.5px;color:var(--tx2);line-height:1.5}
.livegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln);
  border:1px solid var(--ln);border-radius:6px;overflow:hidden;margin-top:12px}
.livegrid div{background:var(--g1);padding:9px 11px}
.livegrid .k{font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em}
.livegrid .v{font-family:var(--mn);font-size:14.5px;margin-top:3px;font-variant-numeric:tabular-nums}
/* Подсказка: без неё непонятно, что разбор двигается прокруткой, а не сам. */
.scrollhint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 14px;
  border-radius:999px;border:1px solid var(--ln2);background:rgba(var(--t-s1-rgb),.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:13px;color:var(--tx2);pointer-events:none;white-space:nowrap;
  box-shadow:none;
  transition:opacity .35s ease,transform .35s ease;z-index:3}
.scrollhint b{color:var(--tx);font-weight:600}
.scrollhint svg{width:16px;height:16px;stroke:var(--ac);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;animation:sdown 1.6s ease-in-out infinite}
@keyframes sdown{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.scrollhint.gone{opacity:0;transform:translateX(-50%) translateY(10px)}
@media(max-width:900px){.scrollhint{position:static;transform:none;margin:14px auto 0;
  display:flex;width:max-content}.scrollhint.gone{transform:translateY(10px)}}

.undertar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
@media(max-width:900px){.undertar{grid-template-columns:1fr}}
.payback,.undertar .info{margin:0;padding:20px 22px;border:1px solid var(--ln);
  border-left:0;border-radius:6px;background:var(--g1);font-size:13.5px;color:var(--tx2);
  line-height:1.7;max-width:none;
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.045)}
.payback b{color:var(--tx)}
.payback .ph,.undertar .info .ph{display:block;font-family:var(--mn);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:10px}
.undertar .info{display:block;border-color:rgba(var(--t-ac-rgb),.24);
  background:linear-gradient(180deg,rgba(var(--t-ac-rgb),.05),var(--g1))}
.already{margin:20px 0 0;font-size:13.5px;color:var(--tx3);text-align:center}
.already button{background:none;border:0;color:var(--ac);font-size:13.5px;cursor:pointer;
  padding:0;font-family:inherit}
.already button:hover{color:var(--ac)}


/* ---------------- дорожная карта ----------------
   Линия слева заполняется по мере прокрутки, точки зажигаются одна за другой,
   карточки выезжают. Это не украшение: путь читается как путь, а не как список. */
.road{position:relative;margin:26px auto 0;max-width:760px;
  padding-left:clamp(34px,4.4vw,54px)}
.rtrack{position:absolute;left:clamp(12px,1.7vw,21px);top:8px;bottom:8px;width:2px;
  background:var(--ln);border-radius:2px;overflow:hidden}
.rfill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--ac),var(--ac2));
  transition:height .18s linear}
.rstep{position:relative;padding:0 0 clamp(20px,2.6vw,32px)}
.rstep:last-child{padding-bottom:4px}
.road{margin-bottom:clamp(60px,7vw,110px)}
.rdot{position:absolute;left:calc(clamp(12px,1.7vw,21px) - clamp(34px,4.4vw,54px) - 6px);
  top:14px;width:14px;height:14px;border-radius:50%;background:var(--g0);
  border:2px solid var(--ln);transition:border-color .3s,background .3s,box-shadow .3s}
.rstep.on .rdot{border-color:var(--ac);background:var(--ac);
  box-shadow:none}
.rstep.hard.on .rdot{border-color:var(--loss);background:var(--loss);
  box-shadow:none}
.rstep.key.on .rdot{border-color:var(--ac2);background:var(--ac2);
  box-shadow:none}
.rcard{border:1px solid var(--ln);border-radius:6px;background:var(--g1);
  padding:15px 18px;opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1),
             border-color .3s}
.rstep.on .rcard{opacity:1;transform:none}
.rstep.on:hover .rcard{border-color:var(--ln2)}
.rstep.hard.on .rcard{border-color:rgba(var(--t-dn-rgb),.3)}
.rstep.key.on .rcard{border-color:rgba(var(--t-ac-rgb),.36)}
.rstep.now.on .rcard{border-color:rgba(var(--t-ac-rgb),.4);
  background:linear-gradient(180deg,rgba(var(--t-ac-rgb),.06),var(--g1))}
.ryr{font-family:var(--mn);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:6px}
.rstep.on .ryr{color:var(--ac)}
.rstep.hard.on .ryr{color:var(--loss)}
.rstep.key.on .ryr{color:var(--ac2)}
.rtt{font-size:16px;font-weight:600;margin-bottom:6px;line-height:1.3}
.rtx{font-size:13.5px;line-height:1.7;color:var(--tx2)}
@media (prefers-reduced-motion:reduce){
  .rcard{opacity:1;transform:none;transition:none}
  .rfill{transition:none}
}
/* Рисунки по бокам дорожной карты: проявляются вместе со своим шагом,
   стоят на заднем плане и не спорят с текстом. Линии, а не картинки: они
   весят ноль, чёткие на любом экране и живут в палитре проекта. */
.rart{position:absolute;top:50%;width:clamp(150px,15vw,230px);pointer-events:none;
  opacity:0;transform:translateY(-50%) scale(.92);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
  z-index:0}
.rstep:nth-child(odd) .rart{right:calc(100% + 34px);
  transform:translateY(-50%) translateX(26px) scale(.92)}
.rstep:nth-child(even) .rart{left:calc(100% + 34px);
  transform:translateY(-50%) translateX(-26px) scale(.92)}
.rstep.on .rart{opacity:.42;transform:translateY(-50%) translateX(0) scale(1)}
.rstep.hard.on .rart{opacity:.5}
.rstep.now.on .rart{opacity:.62}
.rart svg{display:block;width:100%;height:auto;overflow:visible}
/* Фото шага: не иллюстрация на переднем плане, а фон вдоль дороги — приглушённое,
   в рамке, с затемнением к краю, чтобы не спорило с текстом карточки. */
.rart.pic{width:clamp(190px,17vw,280px)}
.rart.pic img{display:block;width:100%;height:auto;border-radius:6px;
  border:1px solid var(--ln);box-shadow:none;
  filter:saturate(.85) contrast(.95)}
.rstep.on .rart.pic{opacity:.72}
/* На фото хочется посмотреть внимательно — при наведении оно вырастает и
   выходит вперёд, а затемняющая плёнка снимается. Растёт в сторону центра
   страницы: к краю окна расти некуда, там его обрежет. */
.rart.pic{pointer-events:auto;cursor:zoom-in;z-index:1}
.rstep:nth-child(odd) .rart.pic{transform-origin:right center}
.rstep:nth-child(even) .rart.pic{transform-origin:left center}
.rstep.on .rart.pic:hover{opacity:1;z-index:30;
  transform:translateY(-50%) translateX(0) scale(1.85)}
.rart.pic:hover::after{opacity:0}
.rart.pic::after{transition:opacity .4s}
.rstep.on .rart.pic:hover img{filter:none;border-color:var(--ac);
  box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .rstep.on .rart.pic:hover{transform:translateY(-50%) scale(1.85)}
}
.rart.pic::after{content:"";position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(90deg,rgba(var(--t-bg-rgb),.55),rgba(var(--t-bg-rgb),0) 55%)}
.rstep:nth-child(even) .rart.pic::after{
  background:linear-gradient(270deg,rgba(var(--t-bg-rgb),.55),rgba(var(--t-bg-rgb),0) 55%)}
.rart .ln{fill:none;stroke:var(--ac);stroke-width:1.5;stroke-linecap:round;
  stroke-linejoin:round}
.rart .dim{stroke:var(--ln2)}
.rart .fill{fill:var(--ac);stroke:none;opacity:.16}
.rstep.hard .rart .ln{stroke:var(--loss)}
.rstep.hard .rart .fill{fill:var(--loss)}
.rstep.key .rart .ln{stroke:var(--ac2)}
.rstep.key .rart .fill{fill:var(--ac2)}
.rcard{position:relative;z-index:1}
@media(max-width:1180px){.rart{display:none}}
@media (prefers-reduced-motion:reduce){
  .rart{transition:none}
  .rstep.on .rart{transform:translateY(-50%)}
}
/* сценарии риска и годы */
.scen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:860px){.scen{grid-template-columns:1fr}}
.sc{border:1px solid var(--ln);border-radius:6px;background:var(--g1);padding:22px;
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.045);transition:.18s}
.sc:hover{border-color:var(--ln2);transform:translateY(-2px)}
.sc.hot{border-color:rgba(var(--t-dn-rgb),.45)}
.sc h3{font-size:16px;margin-bottom:4px}
.sc .nt{font-size:12.5px;color:var(--tx3);margin-bottom:18px;min-height:2.4em;line-height:1.45}
.sc .big2{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.sc .big2 b{font-family:var(--dsp);font-weight:600;font-size:30px;letter-spacing:-.02em}
.sc .big2 span{font-family:var(--mn);font-size:13px;color:var(--tx3)}
.sc .bar2{height:7px;border-radius:999px;background:var(--g2);overflow:hidden;margin:12px 0 6px}
.sc .bar2 i{display:block;height:100%;border-radius:999px;
  transition:width .9s cubic-bezier(.2,.7,.2,1)}
.sc .lbl{display:flex;justify-content:space-between;font-family:var(--mn);font-size:11px;
  color:var(--tx3)}
.sc .lbl b{font-weight:500}
.sc .risk b{color:var(--loss)}
.sc .prof b{color:var(--win)}

.years{display:grid;grid-template-columns:1fr;gap:10px}
.yr2{display:grid;grid-template-columns:56px 1fr 92px;gap:14px;align-items:center}
.yr2 .yl{font-family:var(--mn);font-size:13px;color:var(--tx2)}
.yr2 .yb{height:26px;background:var(--g2);border-radius:6px;overflow:hidden;position:relative}
.yr2 .yb i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--win);
  opacity:.85;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.yr2 .yb u{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--loss);
  opacity:.28;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.yr2 .yv{font-family:var(--mn);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.ylegend{display:flex;gap:18px;font-size:12px;color:var(--tx3);margin-top:14px;flex-wrap:wrap}
.ylegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;
  vertical-align:-1px}

/* результат */
.res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:26px;align-items:start}
@media(max-width:860px){.res{grid-template-columns:1fr}}
.kvlist{display:flex;flex-direction:column;gap:1px;background:var(--ln);
  border:1px solid var(--ln);border-radius:6px;overflow:hidden}
.kvlist div{background:var(--g1);padding:12px 15px;display:flex;justify-content:space-between;
  gap:12px;align-items:baseline;font-size:13.5px}
.kvlist span{color:var(--tx2)}
.kvlist b{font-family:var(--mn);font-weight:500;font-variant-numeric:tabular-nums}
.kvlist b.g{color:var(--win)} .kvlist b.r{color:var(--loss)}

/* возможности */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.feat{grid-template-columns:1fr}}
.ft{border:1px solid var(--ln);border-radius:6px;padding:22px;background:var(--g1);
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.045);
  opacity:0;transform:translateY(24px) scale(.985);filter:blur(6px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .7s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             filter .7s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.ft.in{opacity:1;transform:none;filter:none}
.ft .ic{width:36px;height:36px;border-radius:6px;display:grid;place-items:center;
  background:rgba(var(--t-ac-rgb),.11);border:1px solid rgba(var(--t-ac-rgb),.26);margin-bottom:14px}
.ft h3{font-size:16px;margin-bottom:8px}
.ft p{font-size:13.5px;color:var(--tx2);line-height:1.6}

/* каталог стратегий */
.strat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.strat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.strat{grid-template-columns:1fr}}
.st{border:1px solid var(--ln);border-radius:6px;padding:20px;background:var(--g1);
  transition:border-color .2s,transform .2s}
.st:hover{transform:translateY(-2px)}
.st{
  display:flex;flex-direction:column;gap:11px;position:relative;overflow:hidden}
.st.live{border-color:rgba(var(--t-ac-rgb),.38);background:rgba(var(--t-ac-rgb),.05)}
.st .badge{align-self:flex-start;font-family:var(--mn);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;
  background:rgba(var(--t-ink),.06);color:var(--tx3);border:1px solid var(--ln2)}
.st.live .badge{background:rgba(var(--t-up-rgb),.14);color:var(--win);
  border-color:rgba(var(--t-up-rgb),.4)}
.st h3{font-size:17px;line-height:1.25}
.st p{font-size:13.5px;color:var(--tx2);line-height:1.6;flex:1}
.st .nums{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mn);font-size:11.5px;
  color:var(--tx3);padding-top:11px;border-top:1px solid var(--ln)}
.st .nums b{display:block;font-size:15px;color:var(--tx);font-weight:500;margin-top:3px}
.st button{align-self:flex-start;margin-top:2px}

/* гайды */
.crumbs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--tx3);
  margin-bottom:18px}
.crumbs button{background:none;border:0;color:var(--ac);font-size:13px;cursor:pointer;padding:0}
.crumbs button:hover{color:var(--ac)}
.gh1{font-family:var(--dsp);font-weight:600;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.02em;line-height:1.12;margin:0 0 14px}
.gctl{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.gsearch{height:46px;border-radius:6px;border:1px solid var(--ln);background:var(--g1);
  color:var(--tx);padding:0 16px;font:400 15px/1 var(--bdy);max-width:420px;transition:.16s}
.gsearch::placeholder{color:var(--tx3)}
.gsearch:focus{outline:none;border-color:var(--ac);box-shadow:none}
.chips2{display:flex;gap:8px;flex-wrap:wrap}
.chips2 button{background:var(--g1);border:1px solid var(--ln);color:var(--tx2);
  font-size:13.5px;padding:8px 14px;border-radius:999px;cursor:pointer;transition:.16s;
  display:inline-flex;align-items:center;gap:7px}
.chips2 button:hover{border-color:var(--ln2);color:var(--tx)}
.chips2 button.on{background:var(--ac);border-color:var(--ac);color:var(--t-bg);font-weight:600}
.chips2 b{font-family:var(--mn);font-size:11.5px;opacity:.7;font-weight:500}
.gempty{color:var(--tx3);font-size:14px;padding:26px 0}
.gthumb{width:100%;height:auto;aspect-ratio:320/128;object-fit:cover;display:block;
  border-radius:6px;margin:-4px 0 4px;background:var(--g0)}
.gc .gfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--ln)}
.gc .rd{color:var(--ac);font-size:13.5px;font-weight:600}
.gshare{background:none;border:0;color:var(--tx3);font-size:12.5px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px}
.gshare:hover{color:var(--ac);background:rgba(var(--t-ink),.05)}
.gshare svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9}
.glist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:980px){.glist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.glist{grid-template-columns:1fr}}
.gc{white-space:normal;color:var(--tx);border:1px solid var(--ln);
  box-shadow:inset 0 1px 0 rgba(var(--t-ink),.045);border-radius:6px;padding:14px;background:var(--g1);
  display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:.2s;text-align:left}
.gc:hover{border-color:var(--ac);transform:translateY(-2px);
  background:var(--g2);text-decoration:none}
.gc .kicker{font-family:var(--mn);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ac2)}
.gc h3{font-size:17px;line-height:1.25}
.gc p{font-size:13.5px;color:var(--tx2);line-height:1.6;flex:1}
.gc .meta{font-family:var(--mn);font-size:11px;color:var(--tx3)}

/* статья */
.art{max-width:760px;margin:0 auto;padding:38px 22px 70px}
.art .back{font-family:var(--mn);font-size:12px;color:var(--tx2);background:none;border:0;
  cursor:pointer;padding:0;margin-bottom:26px}
.art .back:hover{color:var(--ac)}
.art h1{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px}
.art .meta{font-family:var(--mn);font-size:12px;color:var(--tx3);margin-bottom:30px;
  padding-bottom:22px;border-bottom:1px solid var(--ln)}
.art h2{font-size:22px;margin:38px 0 12px}
.art h3{font-size:17px;margin:28px 0 10px}
.art p{margin:0 0 15px;color:var(--t-fg)}
.art ul,.art ol{margin:0 0 18px;padding-left:22px;color:var(--t-fg)}
.art li{margin-bottom:7px}
.art code{font-family:var(--mn);font-size:.9em;background:var(--g2);padding:2px 6px;
  border-radius:4px;color:var(--ac)}
.art pre{background:var(--g2);border:1px solid var(--ln);border-radius:6px;
  padding:14px 16px;overflow-x:auto;margin:0 0 18px;font-size:12.5px;line-height:1.55}
.art pre code{background:none;padding:0;color:var(--tx2);font-size:inherit}
.art blockquote{margin:20px 0;padding:14px 18px;border-left:2px solid var(--ac2);
  background:rgba(var(--t-ac-rgb),.07);border-radius:0 6px 6px 0;color:var(--tx2)}
.art blockquote p:last-child{margin:0}
.art hr{border:0;border-top:1px solid var(--ln);margin:32px 0}
.art table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 18px}
.art th,.art td{border:1px solid var(--ln);padding:8px 11px;text-align:left}
.art th{background:var(--g2);font-weight:600;font-size:12px;color:var(--tx2)}
.art .tw{overflow-x:auto;margin-bottom:18px}
.art .cta2{margin-top:38px;padding:22px;border:1px solid var(--ln2);border-radius:6px;
  background:var(--g2)}
.art .cta2 p{margin-bottom:14px}

/* вопросы */
.faq{display:grid;gap:1px;background:var(--ln);border:1px solid var(--ln);
  border-radius:6px;overflow:hidden;max-width:900px;margin:0 auto}
/* Заголовок выравниваем по списку, иначе он висит сам по себе слева. */
#faq .sec{text-align:center}
#faq .eyebrow{justify-content:center}
#faq .sub{margin-left:auto;margin-right:auto}
#faq .qa>button{text-align:left}
#faq .ans p{text-align:left}
.qa{background:var(--g1)}
.qa>button{width:100%;display:flex;align-items:center;gap:14px;padding:18px 20px;
  text-align:left;font:600 15.5px/1.4 var(--bdy);color:var(--tx);cursor:pointer;
  background:none;border:0;transition:background .18s}
.qa>button:hover{background:var(--g2)}
.qa .plus{margin-left:auto;flex:none;width:18px;height:18px;position:relative;opacity:.6}
.qa .plus::before,.qa .plus::after{content:"";position:absolute;background:var(--ac);
  border-radius:2px;transition:transform .25s ease}
.qa .plus::before{left:0;right:0;top:8px;height:2px}
.qa .plus::after{top:0;bottom:0;left:8px;width:2px}
.qa.open .plus::after{transform:scaleY(0)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{padding:0 20px 18px;font-size:14px;color:var(--tx2);line-height:1.7;max-width:76ch}
.qa .ans p+p{padding-top:0}

/* скриншоты сделок из канала */
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2.2vw,28px);margin-top:10px;align-items:start}
@media(max-width:900px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.shots{grid-template-columns:1fr;max-width:280px}}
/* Рамка телефона: скриншот из мессенджера выглядит скриншотом, а не картинкой на фоне */
.shot{display:block;position:relative;border-radius:clamp(20px,2.4vw,30px);
  padding:clamp(6px,.8vw,10px);
  background:linear-gradient(165deg,var(--t-line),var(--t-s2) 42%,var(--t-s1));
  box-shadow:none;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
/* Появление отдаём наблюдателю, как у остальных карточек: своя анимация
   срабатывала при загрузке страницы, и к моменту прокрутки всё уже показалось. */
.shot.pop{opacity:1;transform:none;animation:none}
@keyframes shotIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.shot.pop{animation:none;opacity:1;transform:none}}
.shot:hover{transform:translateY(-6px);
  box-shadow:none}
.shot::before{content:"";position:absolute;top:clamp(11px,1.3vw,16px);left:50%;
  transform:translateX(-50%);width:34%;height:4px;border-radius:6px;
  background:rgba(var(--t-ink),.16);z-index:2}
.shot .scr{border-radius:clamp(15px,1.8vw,22px);overflow:hidden;background:var(--t-bg);
  aspect-ratio:9/17.5;display:flex;align-items:center;justify-content:center}
/* Скриншоты из мессенджера выше и уже — им своя сетка на две колонки. */
.shots.social{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;
  margin:18px auto 0;gap:clamp(14px,2vw,24px)}
@media(max-width:620px){.shots.social{grid-template-columns:1fr;max-width:330px}}
/* Без бутафорского корпуса телефона: это скриншоты переписки, а не реклама
   смартфона. Рамка, скругление и мягкое затухание книзу — обрыв выглядит
   намеренным, а чёрных полос по краям больше нет. */
.shots.social .shot{background:none;padding:0;box-shadow:none;border-radius:6px}
.shots.social .shot::before{display:none}
.shots.social .shot:hover{transform:none}
.shots.social .scr{aspect-ratio:auto;max-height:min(56vh,520px);border-radius:6px;
  border:1px solid var(--ln);position:relative;display:block;overflow:hidden;
  background:var(--t-bg);box-shadow:none}
.shots.social .scr img{width:100%;height:auto;display:block;object-fit:cover;
  object-position:top}
.shots.social .scr::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:96px;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--t-bg-rgb),0),rgba(var(--t-bg-rgb),.92))}
.scap{display:block;margin-top:10px;font:500 12.5px/1.4 var(--mn);color:var(--tx3);
  text-align:center}
/* подзаголовок внутри секции: по центру, с воздухом сверху */
.subsec{max-width:640px;margin:52px auto 0;text-align:center}
.subsec h3{font-size:clamp(19px,2vw,25px);margin:0 0 10px;letter-spacing:-.01em}
.subsub{font-size:14px;line-height:1.7;color:var(--tx2);margin:0}
.shot .scr img{width:100%;height:auto;display:block}
/* Подпись не должна липнуть к телефонам и тянуться во всю ширину экрана. */
.shotnote{margin:40px auto 0;font-size:13px;color:var(--tx2);line-height:1.7;
  max-width:70ch;padding:14px 18px;border-left:2px solid var(--ln2);
  background:var(--g1);border-radius:0 6px 6px 0}
.shotnote b{color:var(--tx)}
/* Кнопки под галереей: человек досмотрел доказательства — дальше два пути. */
.shotcta{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:22px}
@media(max-width:520px){.shotcta{flex-direction:column}.shotcta button,
  .shotcta a{width:100%;justify-content:center}}
.shotnote b{color:var(--tx2)}

/* мой опыт */
.me{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:700px){.me{grid-template-columns:1fr;gap:18px}}
.me .ava{width:150px;height:150px;border-radius:999px;border:1px solid var(--ln2);
  box-shadow:none}
.tl{display:flex;flex-direction:column;gap:0;margin-top:8px}
.tl .it{display:grid;grid-template-columns:82px 1fr;gap:16px;padding:14px 0;
  border-top:1px solid var(--ln)}
.tl .it:first-child{border-top:0}
.tl .yr{font-family:var(--mn);font-size:12.5px;color:var(--ac);padding-top:2px}
.tl .tt{font-weight:600;font-size:14.5px;margin-bottom:4px}
.tl .txt{font-size:13.5px;color:var(--tx2);line-height:1.6}
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px;margin-top:26px}
.lk{border:1px solid var(--ln);border-radius:6px;padding:14px 16px;background:var(--g1);
  display:block;color:var(--tx);transition:.2s}
.lk:hover{border-color:var(--ac);text-decoration:none;transform:translateY(-2px)}
.lk .t{font-weight:600;font-size:14px;margin-bottom:4px}
.lk .d{font-size:12.5px;color:var(--tx3)}

/* финал */
.final{border-top:1px solid var(--ln);position:relative;overflow:hidden;
  background:none,var(--g1)}
.final .sec{text-align:center;position:relative;z-index:1}
.final .mark{width:52px;height:52px;border-radius:6px;margin:0 auto 20px;display:block;
  box-shadow:none}
.final .sub{margin:0 auto 28px}
.final h2{font-size:clamp(26px,3.6vw,42px);margin-bottom:14px}

footer.lf{display:block;background:var(--g1);border-top:1px solid var(--ln);
  padding:44px 0 40px;color:var(--tx2);font-size:14px;margin-top:0}
footer.lf .cols{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,64px);margin-bottom:36px;align-items:start}
@media(max-width:820px){footer.lf .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media(max-width:460px){footer.lf .cols{grid-template-columns:1fr}}
footer.lf .fbrand{display:flex;align-items:center;gap:11px;margin-bottom:12px}
footer.lf .fbrand img{width:34px;height:34px;border-radius:6px;
  box-shadow:none}
footer.lf .fbrand span{font-family:var(--dsp);font-weight:600;font-size:16px;
  letter-spacing:-.025em;color:var(--tx)}
footer.lf .fbrand i{font-style:normal;color:var(--ac)}
footer.lf .ftag{font-size:13.5px;color:var(--tx3);line-height:1.6;max-width:34ch}
footer.lf h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx3);
  margin:0 0 13px;font-family:var(--mn);font-weight:500}
footer.lf a,footer.lf button{display:block;color:var(--tx2);margin-bottom:9px;font-size:14px;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;font-family:var(--bdy)}
footer.lf a:hover,footer.lf button:hover{color:var(--ac);text-decoration:none;
  background:none}
.disc{border-top:1px solid var(--ln);padding-top:22px;line-height:1.7;
  font-size:12.5px;color:var(--tx3);margin:0;
  column-width:46ch;column-gap:clamp(24px,4vw,64px)}

@media (prefers-reduced-motion:reduce){
  #fxWrap{display:none}
  .lp *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hc,.ft{opacity:1;transform:none}
}

/* ---- только для статических страниц ---- */
:root{ --w:1240px; --pad:clamp(16px,3.2vw,40px); }
html,body{margin:0;background:var(--t-bg)}
body.lp{display:block;overflow:visible;min-height:100vh}
.ttbar{position:sticky;top:0;z-index:60;background:rgba(var(--t-bg-rgb),.86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(var(--t-ink),.07)}
.ttwrap{max-width:none;margin:0;padding:0 4vw;height:62px;
  display:flex;align-items:center;gap:26px}
.ttbrand{display:flex;align-items:center;gap:11px;font-family:var(--dsp);font-weight:600;
  font-size:16px;letter-spacing:-.025em;color:var(--tx)!important;text-decoration:none;flex:none}
.ttbrand:hover{text-decoration:none}
.ttbrand i{font-style:normal;color:var(--ac)}
.ttbrand img{border-radius:6px;box-shadow:none}
.ttbar nav{display:flex;gap:4px;font-size:14px}
.ttbar nav a{color:var(--tx2);padding:9px 13px;border-radius:6px;white-space:nowrap}
.ttbar nav a:hover{color:var(--tx);background:rgba(var(--t-ink),.05);text-decoration:none}
/* Пункты меню подсвечиваем фоном, но не подчёркиваем. */
.ttbar nav a,.ttbar nav a:hover,.ttbar a,.ttbar a:hover{text-decoration:none}
footer.ttfoot a,footer.ttfoot a:hover{text-decoration:none}
.ttcta{margin-left:auto;background:var(--ac);color:var(--t-bg)!important;font-weight:600;
  font-size:13.5px;padding:10px 17px;border-radius:6px;text-decoration:none;flex:none;
  box-shadow:none}
.ttcta:hover{filter:brightness(1.06);text-decoration:none}
.ttcta{display:inline-flex;align-items:center;gap:8px}
.ttcta svg{width:17px;height:17px;flex:none}
@media(max-width:640px){
  /* Бренд и кнопка — первой строкой, меню прокручивается под ними: иначе
     кнопка занимала отдельную строку и шапка съедала треть экрана. */
  .ttwrap{height:auto;padding:9px 4vw;flex-wrap:wrap;gap:8px 10px}
  .ttbrand{flex:1 1 auto;min-width:0}
  .ttbrand span{font-size:15px}
  .ttcta{order:2;margin-left:auto;padding:9px 13px;font-size:12.5px}
  .ttbar nav{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none;
    gap:2px;padding-bottom:2px}
  .ttbar nav::-webkit-scrollbar{display:none}
  .ttbar nav a{padding:7px 10px;font-size:13px;white-space:nowrap}}
.block h1{font-size:clamp(27px,3.8vw,44px);margin-bottom:16px;font-family:var(--dsp);
  font-weight:600;letter-spacing:-.02em;line-height:1.12}
.lp ul,.lp ol{color:var(--t-fg);padding-left:22px;margin:0 0 18px}
.lp li{margin-bottom:7px}
.sec .b1{display:inline-block;text-decoration:none;margin:8px 0 26px}
a.gc{text-decoration:none;color:var(--tx)}
a.gc:hover{text-decoration:none}
.art .back{display:inline-block;text-decoration:none}
footer.lf{border-top:1px solid var(--ln);margin-top:40px}

/* ===== обложка v2: устройства, видео, живой фон ===== */
#ttbg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body.lp .tthero,body.lp .block,body.lp .ttnumsrow{background:transparent!important}
body.lp .ttbar{position:sticky;top:0;z-index:20;background:var(--t-bg)!important;border-bottom:1px solid var(--t-line)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.lp .ttbar nav a{color:var(--t-fg2)} .ttbar nav a:hover{color:var(--t-fg)}
body.lp .ttbrand i{color:var(--t-ac)!important}
body.lp .ttcta{margin-left:auto;display:inline-flex!important;align-items:center;gap:8px;height:40px;padding:0 16px!important;border-radius:4px!important;
  background:var(--t-s2)!important;border:1px solid var(--t-line)!important;color:var(--t-fg)!important;font-weight:500!important;font-size:14px!important;transition:border-color .15s,background .15s}
body.lp .ttcta:hover{background:var(--t-s1)!important;border-color:var(--t-ac)!important;filter:none!important}
body.lp .ttcta:active{transform:translateY(1px)}
body.lp .ttcta svg{width:16px!important;height:16px!important;order:2}
.tthero{min-height:auto!important;padding:24px 0 36px!important;border-bottom:1px solid var(--t-line);overflow:hidden}
.tthero .sec{display:grid!important;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:24px 36px;align-items:center}
.ttlead{max-width:none!important;padding:0!important;position:relative;z-index:3;min-height:0!important;transform:none!important;margin-left:0!important;display:block!important}
.ttbig{font-size:clamp(34px,4vw,56px)!important;line-height:1.05!important;letter-spacing:-.03em!important;margin:18px 0 0!important}
.ttbig span{display:block}
.ttsub{max-width:500px;font-size:17px!important;line-height:1.55!important;color:var(--t-fg2)!important;margin:20px 0 0!important}
.ttrow{margin-top:28px!important;display:flex;gap:12px;flex-wrap:wrap}
.ttrow .ttbtn{height:48px;display:inline-flex;align-items:center;padding:0 20px;border-radius:6px!important;font-size:15px;transition:transform .15s,filter .15s,border-color .15s}
.ttrow .ttbtn:hover{transform:translateY(-1px)}
.ttcond{margin:18px 0 0!important;font-size:14px!important;color:var(--t-fg2)!important;max-width:500px}
.ttrisk{margin:8px 0 0;font-size:12.5px;color:var(--t-fg3);max-width:500px}
/* сцена: шире своей колонки — уходит в правое поле страницы (до края окна), но не выше окна */
.ttdev{--bleed:calc(4vw + max(0px, (100vw - 1640px) / 2) - 16px);position:relative;justify-self:start;z-index:2;
  width:calc(100% + var(--bleed));max-width:calc((100vh - 120px) * 1.47);margin-right:calc(-1 * var(--bleed))}
.ttglow{position:absolute;inset:-14% -6% -10% -12%;pointer-events:none;z-index:0;
  background:radial-gradient(46% 44% at 50% 44%,rgba(var(--t-ac-rgb),var(--t-glow)),transparent 72%),
             radial-gradient(42% 9% at 46% 93%,var(--t-shadow),transparent 72%)}
.ttdev-tilt{position:relative;z-index:1;aspect-ratio:1000/700;transform-style:preserve-3d;will-change:transform;transform-origin:50% 60%}
.ttlap{position:absolute;left:0;top:0;width:90%;aspect-ratio:2048/1536}
.ttph{position:absolute;left:71%;top:21%;width:29%;aspect-ratio:1152/2048}
.ttlap>*,.ttph>*{position:absolute}
.ttbody{left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease;pointer-events:none;user-select:none}
.ttbody.on{opacity:1}
.ttscr{left:0;top:0;transform-origin:0 0;background:var(--t-bg);max-width:none}
/* подпись: что сейчас на видео — одна строка под устройствами, без кнопок */
.ttcap{position:relative!important;left:auto!important;bottom:auto!important;z-index:4;display:flex;align-items:baseline;justify-content:center;gap:10px;
  margin:6px 0 0!important;padding:0 4% 0 0!important;max-width:none!important;background:none!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;font-size:16px!important;line-height:1.35;color:var(--t-fg)!important;text-align:center}
.ttcap-n{font:500 13px/1 "IBM Plex Mono",monospace;color:var(--t-ac);flex:none}
.ttcap-t{min-width:0;transition:opacity .25s ease,transform .25s ease}
.ttcap.sw .ttcap-t{opacity:0;transform:translateY(8px)}
/* факты по ходу ролика — карточки у телефона */
.ttchips{position:absolute;right:0;top:3%;z-index:5;width:0;pointer-events:none}
.ttchip{position:absolute;right:0;top:0;width:max-content;max-width:min(360px,70vw);display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:10px;
  background:rgba(var(--t-s1-rgb),.97);border:1px solid rgba(var(--t-ink),.12);box-shadow:0 16px 40px rgba(var(--t-shade),.28);
  opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.9,.25,1.15)}
.ttchip.on{opacity:1;transform:none} .ttchip.off{opacity:0;transform:translateY(-12px) scale(.98)}
.ttchip span{font:500 11px/1.2 "IBM Plex Mono",monospace;color:var(--t-fg3);letter-spacing:.02em}
.ttchip b{font-size:15px;line-height:1.25;font-weight:600;color:var(--t-fg);white-space:nowrap}
.ttchip b.up{color:var(--t-up)} .ttchip b.dot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--t-up);margin-right:7px;box-shadow:0 0 0 4px rgba(var(--t-up-rgb),.2);animation:ttPulse 1.6s ease-in-out infinite}
@keyframes ttPulse{50%{box-shadow:0 0 0 7px rgba(var(--t-up-rgb),0)}}
@keyframes ttFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
html[data-theme=light] .ttchip{box-shadow:0 14px 34px rgba(var(--t-shade),.12)}
.ttanim{display:inline-flex;gap:6px;align-items:center;border:0;background:none;color:var(--t-fg3);font:inherit;font-size:13px;cursor:pointer;padding:0}
.ttanim:hover{color:var(--t-fg)}
/* появление: только CSS — если скрипт не загрузится, всё равно всё видно */
@keyframes ttUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ttLap{from{opacity:0;transform:perspective(1600px) translateY(70px) rotateX(22deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes ttPh{from{opacity:0;transform:perspective(1200px) translate(90px,40px) rotateY(-28deg)}to{opacity:1;transform:none}}
@keyframes ttFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  :root:not(.tt-noanim) .ttlead>*{animation:ttUp .8s cubic-bezier(.2,.8,.2,1) both}
  :root:not(.tt-noanim) .ttlead>:nth-child(2){animation-delay:.08s} :root:not(.tt-noanim) .ttlead>:nth-child(3){animation-delay:.16s}
  :root:not(.tt-noanim) .ttlead>:nth-child(4){animation-delay:.24s} :root:not(.tt-noanim) .ttlead>:nth-child(n+5){animation-delay:.32s}
  :root:not(.tt-noanim) .ttlap{animation:ttLap 1.3s cubic-bezier(.16,.84,.24,1) .12s both}
  :root:not(.tt-noanim) .ttph{animation:ttPh 1.2s cubic-bezier(.16,.84,.24,1) .45s both,ttFloat 6s ease-in-out 1.8s infinite}
  :root:not(.tt-noanim) .ttglow{animation:ttFade 1.6s ease .2s both}
  :root:not(.tt-noanim) .ttcap{animation:ttUp .7s cubic-bezier(.2,.8,.2,1) 1.1s both}
  .rv{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;transform:none}
  .ws-svg .ws-pr{transition:opacity .5s ease}
}
@media (max-width:980px){
  .tthero{padding:20px 0 28px!important}
  .tthero .sec{grid-template-columns:1fr;gap:22px}
  .ttdev{width:auto;max-width:none;margin:0 -2vw}
  .ttdev-tilt{aspect-ratio:1000/780}
  .ttlap{width:94%;top:2%} .ttph{left:70%;top:26%;width:30%}
  .ttcap{font-size:14px!important;padding:0!important;justify-content:flex-start!important;text-align:left!important} .ttchips{right:2%;top:0} .ttchip{padding:9px 11px} .ttchip b{font-size:13.5px}
  .ttrow{flex-direction:column} .ttrow .ttbtn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ttbody{transition:none}}
/* переключатель темы в шапке */
body.lp .ttheme{margin-left:auto;flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:6px;border:1px solid var(--t-line);background:transparent;color:var(--t-fg2);cursor:pointer;transition:color .15s,border-color .15s}
body.lp .ttheme:hover{color:var(--t-fg);border-color:var(--t-ac)}
body.lp .ttheme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
body.lp .ttheme .i-moon{display:none} html[data-theme=light] body.lp .ttheme .i-sun{display:none} html[data-theme=light] body.lp .ttheme .i-moon{display:block}
body.lp .ttheme + .ttcta{margin-left:8px!important}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
.ws-steps{padding:0!important}
/* график «стратегия против случайных входов» — цвета из темы */
.ws-svg .ws-gl{stroke:var(--t-s3)} .ws-svg .ws-g0{stroke:var(--t-ln2)} .ws-svg text{fill:var(--t-fg3)}
.ws-svg .ws-pr{stroke:var(--t-fg3)} .ws-svg .ws-ps{stroke:var(--t-ac)}
/* светлая тема: устройства и карточки отделяем мягкой тенью, а не подсветкой */
html[data-theme=light] .ttcap{box-shadow:0 12px 30px rgba(var(--t-shade),.12)}
html[data-theme=light] body.lp .ttbar{box-shadow:0 1px 0 rgba(var(--t-shade),.02)}
.ttlead::before{content:"";position:absolute;z-index:-1;inset:-80px -120px -80px -150px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--t-bg-rgb),.95),rgba(var(--t-bg-rgb),.8) 58%,rgba(var(--t-bg-rgb),0))}
@media (max-width:600px){.ttchips{display:none}}
/* /обложка v3 */
/* ===== главная v4: коротко и наглядно ===== */
.hx{position:relative;z-index:1;padding:clamp(60px,8vw,112px) 0;border-bottom:1px solid var(--t-line)}
.hx-h{font-size:clamp(28px,3.6vw,48px)!important;line-height:1.08!important;letter-spacing:-.025em!important;margin:0 0 34px!important;color:var(--t-fg)!important;text-align:center;text-wrap:balance}
.hx-k{margin:0 0 18px!important;text-align:center;font:500 13px/1.4 "IBM Plex Mono",monospace!important;color:var(--t-fg3)!important;letter-spacing:.02em}
.hx-foot{margin:24px auto 0!important;max-width:760px;text-align:center;font-size:13.5px!important;line-height:1.5;color:var(--t-fg3)!important}
/* идея → проверка → бот */
.hx-flow{display:grid;grid-template-columns:1fr 72px 1fr 72px 1fr;align-items:start;max-width:1180px;margin:0 auto}
.hx-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0}
.hx-step>b{font-size:19px;font-weight:600;color:var(--t-fg);margin-top:16px} .hx-step>span{font-size:14px;color:var(--t-fg3)}
.hx-vis{position:relative;width:100%;max-width:320px;aspect-ratio:300/170;border:1px solid var(--t-line);border-radius:14px;background:var(--t-s1);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px;box-shadow:0 18px 40px rgba(var(--t-shade),.18)}
.hx-arrow{--aw:72px;align-self:start;margin-top:84px;height:2px;position:relative;background:repeating-linear-gradient(90deg,var(--t-ln2) 0 6px,transparent 6px 12px)}
.hx-arrow::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--t-ac);animation:hxRun 2.2s linear infinite}
@keyframes hxRun{from{transform:translateX(0)}to{transform:translateX(calc(var(--aw, 72px) - 8px))}}
.hx-in{min-height:66px;padding:10px 12px;border:1px solid var(--t-ac);border-radius:8px;background:var(--t-bg);text-align:left;font-size:13.5px;line-height:1.45;color:var(--t-fg)}
.hx-car{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--t-ac);animation:hxBlink 1s steps(1) infinite}
@keyframes hxBlink{50%{opacity:0}}
.hx-send{align-self:flex-end;padding:6px 12px;border-radius:6px;background:var(--t-ac);color:var(--t-bg);font-size:12.5px;font-weight:600}
.hx-v2{padding:10px 12px 8px} .hx-v2 svg{width:100%;height:auto;overflow:visible}
.hx-grid{stroke:var(--t-s3);stroke-width:1;fill:none}
.hx-loop{fill:none;stroke:var(--t-ac);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.hx-dot{fill:var(--t-up);stroke:var(--t-s1);stroke-width:2} .hx-dot.dn{fill:var(--t-dn)}
.hx-res{position:absolute;right:14px;top:12px;font:600 14px/1 "IBM Plex Mono",monospace;font-style:normal;color:var(--t-up)}
.hx-v3{align-items:center}
.hx-sw{width:58px;height:32px;border-radius:32px;background:var(--t-ac);position:relative;display:block}
.hx-sw i{position:absolute;top:4px;left:4px;transform:translateX(26px);width:24px;height:24px;border-radius:50%;background:var(--t-fg);box-shadow:0 2px 6px rgba(var(--t-shade),.3)}
.hx-on{font-style:normal;font-size:15px;font-weight:600;color:var(--t-fg);display:flex;align-items:center;gap:8px}
.hx-on::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--t-up);box-shadow:0 0 0 4px rgba(var(--t-up-rgb),.2);animation:ttPulse 1.6s ease-in-out infinite}
.hx-log{position:relative;height:20px;width:100%;overflow:hidden;font:500 12.5px/20px "IBM Plex Mono",monospace;color:var(--t-fg3)}
.hx-log span{position:absolute;left:0;right:0;opacity:0}
.hx-log span:first-child{opacity:1}
/* крупные цифры примера и кривая */
.hx-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;max-width:1180px;margin:0 auto;background:var(--t-line);border:1px solid var(--t-line);border-radius:16px;overflow:hidden}
.hx-nums>div{background:var(--t-s1);padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.hx-nums b{font:500 clamp(30px,3.8vw,52px)/1 "IBM Plex Mono",monospace;color:var(--t-fg);letter-spacing:-.03em;white-space:nowrap}
.hx-nums b.up{color:var(--t-up)} .hx-nums b.dn{color:var(--t-dn)}
.hx-nums span{font-size:14.5px;color:var(--t-fg3)}
.hx-eq{display:block;width:100%;max-width:1180px;height:clamp(80px,10vw,140px);margin:18px auto 0;overflow:visible}
.hx-eq .hx-draw{fill:none;stroke:var(--t-ac);stroke-width:2.4;vector-effect:non-scaling-stroke}
.hx-eq .hx-area{fill:rgba(var(--t-ac-rgb),.1);stroke:none}
/* против случайных */
.hx-leg{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:-16px 0 20px!important;font-size:14px!important;color:var(--t-fg2)!important}
.hx-leg i{display:inline-block;width:22px;height:3px;border-radius:3px;margin-right:6px;vertical-align:middle}
.hx-leg .ls{background:var(--t-ac)} .hx-leg .lr{background:var(--t-fg3);opacity:.5}
.hx-chart{max-width:1000px;margin:0 auto!important;padding:18px 18px 6px;border:1px solid var(--t-line);border-radius:16px;background:var(--t-s1)}
.hx-chart .ws-svg{width:100%;height:auto;display:block}
.hx-chart .ws-ps{stroke-width:3}
.hx-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px}
.hx-chips span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--t-line);background:var(--t-s1);font-size:14px;color:var(--t-fg2)}
.hx-chips svg,.hx-links svg,.hx-steps i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx-chips svg{color:var(--t-up)}
/* готовые стратегии */
.hx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1180px;margin:0 auto}
.hx-card{display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--t-line);border-radius:16px;background:var(--t-s1);color:inherit;text-decoration:none!important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .25s}
.hx-card:hover{transform:translateY(-6px);border-color:var(--t-ac);box-shadow:0 22px 48px rgba(var(--t-shade),.25)}
.hx-tag{font:500 12px/1 "IBM Plex Mono",monospace;color:var(--t-fg3);text-transform:uppercase;letter-spacing:.08em}
.hx-vz{position:relative;height:120px;display:grid;place-items:center;margin:14px 0 10px}
.hx-sp{width:100%;height:100%} .hx-sp .hx-draw{fill:none;stroke:var(--t-up);stroke-width:2.4;vector-effect:non-scaling-stroke} .hx-sp .a{fill:rgba(var(--t-up-rgb),.12)}
.hx-big{font:500 36px/1.05 "IBM Plex Mono",monospace;color:var(--t-fg);letter-spacing:-.02em} .hx-big.up{color:var(--t-up)} .hx-big small{font-size:16px;color:var(--t-fg3);margin-left:4px;letter-spacing:0}
.hx-card>span{font-size:14px;color:var(--t-fg2)}
.hx-card>span.hx-rl{font-size:13px;color:var(--t-fg3);margin-top:auto;padding-top:6px} .hx-rl b{font-weight:600}
.hx-rl b.dn{color:var(--t-dn)}
.hx-risk{height:6px;border-radius:6px;background:var(--t-s3);overflow:hidden;margin-top:12px}
.hx-risk i{display:block;height:100%;width:calc(var(--w) * 100%);border-radius:6px;background:linear-gradient(90deg,var(--t-warn),var(--t-dn))}
.hx-ring{width:120px;height:120px;transform:rotate(-90deg)} .hx-ring circle{fill:none;stroke-width:11} .hx-ring .bg{stroke:var(--t-s3)}
.hx-ring .fg{stroke:var(--t-ac);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--f))}
.hx-rn{position:absolute;inset:0;display:grid;place-items:center;font:600 22px/1 "IBM Plex Mono",monospace;font-style:normal;color:var(--t-fg)}
.hx-path{display:flex;align-items:center;gap:8px;width:100%}
.hx-path span{padding:9px 12px;border-radius:8px;border:1px solid var(--t-line);background:var(--t-s2);font-size:14px;color:var(--t-fg);white-space:nowrap}
.hx-path span:last-child{border-color:var(--t-up);color:var(--t-up)}
.hx-path i{flex:1;height:2px;background:var(--t-line);position:relative;overflow:hidden;border-radius:2px}
.hx-path i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:var(--t-ac);animation:hxFlow 1.6s linear infinite}
@keyframes hxFlow{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
/* 6 шагов */
.hx-steps{list-style:none;margin:0 auto!important;padding:0!important;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:1180px;position:relative}
.hx-steps::before,.hx-steps::after{content:"";position:absolute;left:8.33%;top:31px;height:2px;border-radius:2px}
.hx-steps::before{right:8.33%;background:var(--t-line)} .hx-steps::after{width:83.33%;background:var(--t-ac);transform-origin:0 50%}
.hx-steps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:0!important;padding:0!important;border:0!important;min-width:0}
.hx-steps i{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--t-s1);border:2px solid var(--t-ac);color:var(--t-ac);margin-bottom:8px}
.hx-steps i svg{width:26px;height:26px}
.hx-steps b{font-size:16px;font-weight:600;color:var(--t-fg)} .hx-steps span{font-size:13.5px;color:var(--t-fg3)}
.hx-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:38px}
.hx-cta .ttbtn{height:52px;padding:0 34px;display:inline-flex;align-items:center;font-size:16px;border-radius:8px!important}
.hx-cta span{font-size:13.5px;color:var(--t-fg3)}
/* цены */
.hx-prices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1180px;margin:0 auto}
.hx-prices a{display:flex;flex-direction:column;gap:6px;padding:26px 24px;border:1px solid var(--t-line);border-radius:16px;background:var(--t-s1);color:inherit;text-decoration:none!important;transition:transform .25s,border-color .2s}
.hx-prices a:hover{transform:translateY(-4px);border-color:var(--t-ac)}
.hx-prices a.on{border-color:var(--t-ac);box-shadow:inset 0 0 0 1px var(--t-ac)}
.hx-prices b{font:500 42px/1 "IBM Plex Mono",monospace;color:var(--t-fg);letter-spacing:-.03em} .hx-prices b small{font-size:15px;color:var(--t-fg3);letter-spacing:0;margin-left:2px}
.hx-prices span{font-size:17px;font-weight:600;color:var(--t-fg);margin-top:10px} .hx-prices em{font-style:normal;font-size:13.5px;color:var(--t-fg3)}
.hx-k2{margin-top:44px!important}
.hx-all{position:relative;display:flex;align-items:center;gap:28px;max-width:1180px;margin:0 auto;padding:26px 28px;border:1px solid var(--t-ac);border-radius:16px;background:var(--t-s1);color:inherit;text-decoration:none!important;transition:transform .25s}
.hx-all:hover{transform:translateY(-3px)}
.hx-all>b{flex:none;font:500 42px/1 "IBM Plex Mono",monospace;color:var(--t-fg);letter-spacing:-.03em} .hx-all>b small{font-size:15px;color:var(--t-fg3);letter-spacing:0;margin-left:2px}
.hx-all>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hx-all>div span{font-size:17px;font-weight:600;color:var(--t-fg)} .hx-all>div small{font-size:14px;line-height:1.45;color:var(--t-fg2)}
.hx-all>i{flex:none;font-style:normal;font-weight:600;color:var(--t-ac);white-space:nowrap}
@media (max-width:760px){.hx-all{flex-direction:column;align-items:flex-start;gap:12px;padding:24px 20px}}
.hx-prices a{position:relative}
.hx-prices ul{list-style:none;margin:14px 0 0!important;padding:14px 0 0!important;border-top:1px solid var(--t-line);display:flex;flex-direction:column;gap:8px}
.hx-prices li{position:relative;margin:0!important;padding:0 0 0 22px!important;font-size:14px;line-height:1.4;color:var(--t-fg2);border:0!important}
.hx-prices li::before{content:"";position:absolute;left:2px;top:4px;width:11px;height:6px;border-left:2px solid var(--t-up);border-bottom:2px solid var(--t-up);transform:rotate(-45deg)}
.hx-badge{position:absolute;top:-11px;left:20px;padding:3px 10px;border-radius:999px;background:var(--t-ac);color:var(--t-bg);font:600 11.5px/1.4 "Golos Text",sans-serif;font-style:normal}
.hx-labp a.on{border-color:var(--t-up);box-shadow:inset 0 0 0 1px var(--t-up)} .hx-labp .hx-badge{background:var(--t-up)}
.hx-prices .hx-badge{color:var(--t-bg);font-size:11.5px}
/* подсказки на графике «против случайных» */
.hx-chart{position:relative}
.hx-chart .ws-svg{cursor:crosshair;touch-action:pan-y}
.hx-vl{stroke:var(--t-fg3);stroke-dasharray:3 4;opacity:0} .ws-svg.hov .hx-vl{opacity:.9}
.hx-hd{fill:var(--t-ac);stroke:var(--t-s1);stroke-width:2.5;opacity:0} .ws-svg.hov .hx-hd{opacity:1}
.hx-hr{fill:var(--t-fg);stroke:var(--t-s1);stroke-width:2;opacity:0} .ws-svg.hov .hx-hr.on{opacity:1}
.ws-svg.hov .ws-pr{opacity:.22!important} .ws-svg.hov .ws-pr.on{opacity:1!important;stroke:var(--t-fg);stroke-opacity:1;stroke-width:2.2}
.ws-svg.hov .ws-ps.on{stroke-width:4}
.hx-tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;min-width:200px;padding:10px 13px;border-radius:10px;background:var(--t-s1);border:1px solid var(--t-line);
  box-shadow:0 14px 34px rgba(var(--t-shade),.3);font-size:13.5px;line-height:1.5;color:var(--t-fg);opacity:0;transition:opacity .15s}
.hx-tip.on{opacity:1} .hx-tip i{display:block;font:500 12px/1.4 "IBM Plex Mono",monospace;color:var(--t-fg3);font-style:normal;margin-bottom:4px}
.hx-tip b{font:600 14px "IBM Plex Mono",monospace} .hx-tip b.u{color:var(--t-up)} .hx-tip b.d{color:var(--t-dn)} .hx-tip span{color:var(--t-fg2)}
/* гайды — карточками */
.hx-guides .ws-g{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"t m" "b b"!important;gap:8px 12px!important;padding:18px!important;
  border:1px solid var(--t-line)!important;border-radius:14px;background:var(--t-s1);transition:border-color .2s,transform .25s}
.hx-guides .ws-g:hover{border-color:var(--t-ac);transform:translateY(-3px)}
.hx-guides .ws-g b{font-size:16px!important;line-height:1.35}
/* подложка под заголовками: фон за ними мягко гаснет */
.hx .hx-h{position:relative;z-index:0}
.hx .hx-h::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(980px,110%);height:230%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--t-bg-rgb),.92),rgba(var(--t-bg-rgb),0))}
.hx-nums>div{transition:background .2s} .hx-nums>div:hover{background:var(--t-s2)}
/* ссылки, гайды, вопросы */
.hx-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hx-links a{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:999px;border:1px solid var(--t-line);background:var(--t-s1);color:var(--t-fg);text-decoration:none!important;font-size:14.5px;transition:border-color .2s}
.hx-links a:hover{border-color:var(--t-ac)}
.hx-guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;max-width:1180px;margin:28px auto 0}
.hx-guides .ws-g{margin:0!important} .hx-guides .ws-gd{display:none}
.hx-faq{max-width:820px!important} .hx-faq .ttfaq{max-width:none}
/* появление и движение — только при включённой анимации; без скрипта всё видно сразу */
@media (prefers-reduced-motion:no-preference){
  :root.tt-js:not(.tt-noanim) .hx .sec>*{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
  :root.tt-js:not(.tt-noanim) .hx.in .sec>*{opacity:1;transform:none}
  :root.tt-js:not(.tt-noanim) .hx.in .sec>:nth-child(2){transition-delay:.12s} :root.tt-js:not(.tt-noanim) .hx.in .sec>:nth-child(3){transition-delay:.24s}
  :root.tt-js:not(.tt-noanim) .hx.in .sec>:nth-child(n+4){transition-delay:.36s}
  :root.tt-js:not(.tt-noanim) .hx-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.45,0,.2,1) .35s}
  :root.tt-js:not(.tt-noanim) .hx.in .hx-draw{stroke-dashoffset:0}
  :root.tt-js:not(.tt-noanim) .hx-area,:root.tt-js:not(.tt-noanim) .hx-sp .a{opacity:0;transition:opacity 1.2s ease 1.4s}
  :root.tt-js:not(.tt-noanim) .hx.in .hx-area,:root.tt-js:not(.tt-noanim) .hx.in .hx-sp .a{opacity:1}
  :root.tt-js:not(.tt-noanim) .hx-chart .ws-pr{opacity:0;transition:opacity .5s ease}
  :root.tt-js:not(.tt-noanim) .hx.in .hx-chart .ws-pr{opacity:1}
  :root.tt-js:not(.tt-noanim) .hx-ring .fg{stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1) .4s}
  :root.tt-js:not(.tt-noanim) .hx.in .hx-ring .fg{stroke-dashoffset:calc(1 - var(--f))}
  :root.tt-js:not(.tt-noanim) .hx-risk i{width:0;transition:width 1.6s cubic-bezier(.2,.8,.2,1) .5s}
  :root.tt-js:not(.tt-noanim) .hx.in .hx-risk i{width:calc(var(--w) * 100%)}
  :root.tt-js:not(.tt-noanim) .hx-steps::after{transform:scaleX(0);transition:transform 2.6s cubic-bezier(.4,0,.2,1) .4s}
  :root.tt-js:not(.tt-noanim) .hx.in .hx-steps::after{transform:scaleX(1)}
  :root.tt-js:not(.tt-noanim) .hx-steps i{border-color:var(--t-line);color:var(--t-fg3);transform:scale(.85);transition:border-color .4s,color .4s,transform .5s cubic-bezier(.2,.9,.25,1.3)}
  :root.tt-js:not(.tt-noanim) .hx.in .hx-steps i{border-color:var(--t-ac);color:var(--t-ac);transform:none;transition-delay:calc(.45s + var(--i) * .42s)}
  /* живая схема: линия рисуется, сделки вспыхивают, тумблер щёлкает — по кругу */
  :root:not(.tt-noanim) .hx.in .hx-loop{animation:hxDraw 5s cubic-bezier(.45,0,.2,1) infinite}
  @keyframes hxDraw{0%{stroke-dashoffset:1;opacity:1}55%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  :root:not(.tt-noanim) .hx.in .hx-dot{animation:hxDot 5s ease infinite}
  .hx-dot.d2{animation-delay:.6s!important} .hx-dot.d3{animation-delay:1.1s!important} .hx-dot.d4{animation-delay:1.6s!important}
  @keyframes hxDot{0%,18%{opacity:0;transform:scale(0)}26%{opacity:1;transform:scale(1.4)}32%,86%{opacity:1;transform:scale(1)}100%{opacity:0}}
  .hx-dot{transform-box:fill-box;transform-origin:center}
  :root:not(.tt-noanim) .hx.in .hx-res{animation:hxRes 5s ease infinite}
  @keyframes hxRes{0%,52%{opacity:0;transform:translateY(6px)}60%,88%{opacity:1;transform:none}100%{opacity:0}}
  :root:not(.tt-noanim) .hx.in .hx-sw{animation:hxSwBg 5s ease infinite} :root:not(.tt-noanim) .hx.in .hx-sw i{animation:hxSw 5s cubic-bezier(.3,.9,.3,1.2) infinite}
  @keyframes hxSw{0%,12%{transform:translateX(0)}22%,92%{transform:translateX(26px)}100%{transform:translateX(0)}}
  @keyframes hxSwBg{0%,12%{background:var(--t-ln2)}22%,92%{background:var(--t-ac)}100%{background:var(--t-ln2)}}
  :root:not(.tt-noanim) .hx.in .hx-log span{animation:hxLog 6s ease infinite}
  .hx-log span:nth-child(2){animation-delay:2s!important} .hx-log span:nth-child(3){animation-delay:4s!important}
  @keyframes hxLog{0%{opacity:0;transform:translateY(12px)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-12px)}}
  :root:not(.tt-noanim) .hx.in .hx-log span:first-child{opacity:0}
}
@media (max-width:900px){
  .hx-flow{grid-template-columns:1fr;gap:34px} .hx-arrow{display:none}
  .hx-nums{grid-template-columns:1fr 1fr} .hx-nums>div{padding:20px 18px}
  .hx-cards{grid-template-columns:1fr}
  .hx-steps{grid-template-columns:repeat(3,1fr);row-gap:26px} .hx-steps::before,.hx-steps::after{display:none}
  .hx-prices{grid-template-columns:1fr 1fr} .hx-prices a{padding:20px 18px} .hx-prices b{font-size:32px}
}
html[data-theme=light] .hx-vis,html[data-theme=light] .hx-card,html[data-theme=light] .hx-prices a,html[data-theme=light] .hx-chart{box-shadow:0 14px 34px rgba(var(--t-shade),.07)}
html[data-theme=light] .hx-sw i{background:#fff}
/* /главная v4 */
/* ===== главная: разделы под обложкой (Астра, референсы makety/site) ===== */
.ws-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--t-line);border-radius:6px;background:var(--t-s1)}
.ws-nums>div{padding:20px 24px;border-right:1px solid var(--t-line);display:flex;flex-direction:column;gap:6px}
.ws-nums>div:last-child{border-right:0}
.ws-nums b{font:500 32px/1.15 "IBM Plex Mono",monospace;color:var(--t-fg);font-variant-numeric:tabular-nums}
.ws-nums span{font-size:14px;color:var(--t-fg2)}
.ws-up{color:var(--t-up)!important} .ws-dn{color:var(--t-dn)!important}
.ws-note{margin:14px 0 0;font-size:14px;color:var(--t-fg3);max-width:860px}
.ws-lead{margin:-12px 0 32px!important;font-size:17px;line-height:1.55;color:var(--t-fg2);max-width:760px}
body.lp .block{padding:clamp(56px,7vw,96px) 0}
.ws-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ws-card{background:var(--t-s1);border:1px solid var(--t-line);border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ws-card h3{margin:0;font-size:22px;font-weight:600;color:var(--t-fg)}
.ws-card p{margin:0;font-size:15px;line-height:1.55;color:var(--t-fg2)}
.ws-card .ttbtn{margin-top:auto;align-self:flex-start;height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:4px}
.ws-ch{display:flex;gap:16px;align-items:flex-start}
.ws-ch>i,.ws-checks>div>i{flex:none;width:44px;height:44px;border:1px solid var(--t-line);border-radius:6px;display:grid;place-items:center;color:var(--t-ac);background:var(--t-bg)}
.ws-ch svg,.ws-checks svg,.ttcm i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ws-inp{border:1px solid var(--t-ctl);border-radius:4px;background:var(--t-bg);padding:14px 16px;font-size:14px;color:var(--t-fg);line-height:1.5}
.ws-rules{border:1px solid var(--t-line);border-radius:4px;background:var(--t-bg)}
.ws-rules>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 16px;border-bottom:1px solid var(--t-s3);font-size:14px}
.ws-rules>div:last-child{border-bottom:0}
.ws-rules span{color:var(--t-fg3)} .ws-rules b{font:500 13.5px/1.5 "IBM Plex Mono",monospace;color:var(--t-fg)}
.ws-fine{font-size:13px!important;color:var(--t-fg3)!important}
.ws-modes-mini{display:flex;flex-direction:column;gap:8px}
.ws-modes-mini a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--t-line);border-radius:4px;background:var(--t-bg);text-decoration:none!important;transition:border-color .12s}
.ws-modes-mini a:hover{border-color:var(--t-ac)}
.ws-modes-mini b{color:var(--t-fg);font-size:15px} .ws-modes-mini span{color:var(--t-fg2);font-size:13.5px;line-height:1.45}
.ws-shot{margin:0;border:1px solid var(--t-line);border-radius:6px;overflow:hidden;background:var(--t-s1)}
.ws-shot img{display:block;width:100%;height:auto}
.ws-meta{margin:14px 0 0;font:400 12.5px/1.6 "IBM Plex Mono",monospace;color:var(--t-fg3)}
.ws-proof{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px;align-items:start}
.ws-chart{margin:0;background:var(--t-s1);border:1px solid var(--t-line);border-radius:6px;padding:20px 20px 16px}
.ws-chh{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.ws-chh b{font-size:16px;color:var(--t-fg);font-weight:600}
.ws-chh span{font-size:13px;color:var(--t-fg2);display:flex;align-items:center;gap:8px}
.ws-ls,.ws-lr{display:inline-block;width:18px;height:2px;background:var(--t-ac)}
.ws-lr{background:var(--t-fg3);margin-left:12px}
.ws-svg{display:block;width:100%;height:auto}
.ws-chart figcaption{margin-top:10px;font-size:13.5px;color:var(--t-fg2);line-height:1.5}
.ws-checks{display:flex;flex-direction:column;gap:12px}
.ws-checks>div{display:flex;gap:16px;background:var(--t-s1);border:1px solid var(--t-line);border-radius:6px;padding:20px}
.ws-checks h3{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--t-fg)}
.ws-checks p{margin:0;font-size:14.5px;line-height:1.55;color:var(--t-fg2)}
.ws-warn{margin:20px 0 0;font-size:14px;color:var(--t-warn)}
.ws-warn a{color:var(--t-ac);margin-left:8px}
.ws-modes,.ws-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ws-plans{grid-template-columns:repeat(4,minmax(0,1fr))}
.ws-lab{font-size:12.5px!important;color:var(--t-fg3)!important;margin-top:4px!important}
.ws-vlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ws-vlist li{padding:10px 14px;background:var(--t-bg);border:1px solid var(--t-s3);border-radius:4px;color:var(--t-fg);font-size:14.5px}
.ws-x{font:500 34px/1.1 "IBM Plex Mono",monospace!important;color:var(--t-fg)!important}
.ws-fact{font-size:14px!important;color:var(--t-fg)!important}
.ws-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-flow span{padding:10px 12px;background:var(--t-bg);border:1px solid var(--t-s3);border-radius:4px;font-size:13.5px;color:var(--t-fg)}
.ws-flow i{font-style:normal;color:var(--t-fg3)}
.ws-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--t-line)}
.ws-steps li{display:grid;grid-template-columns:80px minmax(0,360px) minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--t-line);align-items:baseline}
.ws-steps b{font:500 26px/1 "IBM Plex Mono",monospace;color:var(--t-fg3)}
.ws-steps h3{margin:0;font-size:18px;font-weight:600;color:var(--t-fg)}
.ws-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--t-fg2)}
.ws-steps a{color:var(--t-ac)}
.ws-cta{margin-top:28px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.ws-cta .ttbtn{height:48px;display:inline-flex;align-items:center;padding:0 22px;border-radius:4px}
.ws-pr{font:500 34px/1.1 "IBM Plex Mono",monospace!important;color:var(--t-fg)!important}
.ws-pr small{font:400 14px "Golos Text",sans-serif;color:var(--t-fg3);margin-left:4px}
.ws-sel{border-color:var(--t-ac)!important}
.ws-labplan{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:32px;align-items:center;background:var(--t-s1);border:1px solid var(--t-line);border-radius:6px;padding:28px}
.ws-labplan h3{margin:4px 0 8px;font-size:22px;color:var(--t-fg)} .ws-labplan p{margin:0;font-size:15px;color:var(--t-fg2);line-height:1.55}
.ws-labplan table{width:100%;border-collapse:collapse;font-size:14px}
.ws-labplan td{padding:9px 10px;border-bottom:1px solid var(--t-s3);color:var(--t-fg2)}
.ws-labplan td:nth-child(2){font:500 14px "IBM Plex Mono",monospace;color:var(--t-fg);white-space:nowrap}
.ws-labplan .ttbtn{height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:4px;white-space:nowrap}
.ws-glist{display:flex;flex-direction:column;border-top:1px solid var(--t-line)}
.ws-g{display:grid;grid-template-columns:140px minmax(0,1fr) 80px;grid-template-areas:"t b m" "t d m";gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--t-line);text-decoration:none!important}
.ws-g:hover b{color:var(--t-ac)}
.ws-gt{grid-area:t;font:400 12.5px/1.6 "IBM Plex Mono",monospace;color:var(--t-fg3)}
.ws-g b{grid-area:b;font-size:17px;color:var(--t-fg);font-weight:600;transition:color .12s}
.ws-gd{grid-area:d;font-size:14.5px;color:var(--t-fg2);line-height:1.5}
.ws-gm{grid-area:m;text-align:right;font:400 12.5px/1.6 "IBM Plex Mono",monospace;color:var(--t-fg3)}
.ws-faqw{display:grid!important;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:80px;align-items:start}
.ttcm i{color:var(--t-ac)}
@media (max-width:980px){
  .ws-nums{grid-template-columns:1fr 1fr} .ws-nums>div:nth-child(2){border-right:0} .ws-nums>div:nth-child(-n+2){border-bottom:1px solid var(--t-line)}
  .ws-nums b{font-size:26px}
  .ws-two,.ws-proof,.ws-modes,.ws-plans,.ws-labplan,.ws-faqw{grid-template-columns:1fr;gap:16px}
  .ws-steps li{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"n h" "n p";gap:6px 12px}
  .ws-steps b{grid-area:n;font-size:20px} .ws-steps h3{grid-area:h} .ws-steps p{grid-area:p}
  .ws-g{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t m" "b b" "d d"}
  .ws-rules>div{grid-template-columns:110px minmax(0,1fr)}
  .ws-card{padding:20px}
}
.ttsoc .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
body.lp .ttcta .sm{display:none}
@media (max-width:760px){body.lp .ttcta .lg{display:none} body.lp .ttcta .sm{display:inline}
  body.lp .ttbar nav{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}}
/* ===== UNI: единый стиль сайта (графит + синий) ===== */
#ttfx,.ttveil,.ttscrim,.ttticker{display:none!important}
.ttbig .em,.ttbig em{color:inherit!important}
.ttshot{margin:0;position:relative;z-index:3;align-self:center;width:min(720px,52vw);border:1px solid var(--t-line);border-radius:6px;overflow:hidden;background:var(--t-s1)}
.ttshot img{display:block;width:100%;height:auto}
.ttshot figcaption{padding:10px 14px;border-top:1px solid var(--t-line);font-size:13px;color:var(--t-fg3)}
.tthero .sec{display:flex!important;align-items:center;justify-content:space-between;gap:48px}
.ttcond{margin:18px 0 0;max-width:560px;font-size:14px;line-height:1.55;color:var(--t-fg2)}
@media (max-width:860px){.tthero .sec{flex-direction:column;align-items:stretch;gap:28px}.ttshot{width:100%}}

/* ---------------- статические страницы ----------------
   Шапку описывает блок в main(). Здесь — обложка, графики, карточки.
   Палитра спокойнее: земля почти чёрная и нейтральная, акцент один и появляется
   редко, всё остальное держится на типографике и воздухе. */
:root{
  --gg0:var(--t-bg); --gg1:var(--t-s1); --gg2:var(--t-s2);
  --ll:var(--t-line); --ll2:var(--t-line);
  --w1:var(--t-fg); --w2:var(--t-fg2); --w3:var(--t-fg3);
  --acc:var(--t-ac);
}
body.lp{background:var(--gg0);color:var(--w1)}
.lp .sec{max-width:1640px;padding-left:4vw;padding-right:4vw;position:relative;z-index:2}
.block{padding:clamp(64px,8vw,124px) 0}
.lp h1,.lp h2{letter-spacing:-.025em}
.lp h2{font-size:clamp(26px,3.4vw,44px);margin:0 0 30px}

/* Нумерация секций — как на студийных сайтах: цифра, черта, тема. */
.ttkick{display:flex;align-items:center;gap:12px;font-family:var(--mn);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--w3);margin:0 0 16px}
.ttkick b{color:var(--acc);font-weight:600}
.ttkick i,.ttkick b::after{content:"";display:inline-block;width:34px;height:1px;
  background:var(--ll2);vertical-align:middle;margin-left:12px}

/* ---- обложка ---- */
/* Свечной фон живёт под всей страницей; сверху вуаль, чтобы текст читался. */
#ttfx{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.72;pointer-events:none}
.ttveil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--t-bg-rgb),.08) 0,rgba(var(--t-bg-rgb),.36) 45%,rgba(var(--t-bg-rgb),.66) 100%)}
.tthero,.ttnumsrow,.ttticker,.block,footer.lf{position:relative;z-index:1}
/* Обложка на всю ширину: сцена справа, текст слева поверх неё. */
.tthero{position:relative;overflow:hidden;padding:0;display:flex;align-items:center;
  min-height:calc(100vh - 64px);border-bottom:1px solid var(--ll)}
.tthero .sec{width:100%;position:static}   /* сцена позиционируется от края экрана */
.ttscrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--t-bg-rgb),.7) 0,rgba(var(--t-bg-rgb),.45) 30%,transparent 52%)}
.ttlead{position:relative;z-index:3;max-width:var(--leadw,640px);padding:40px 0 40px;
  min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;
  margin-left:calc(-1 * var(--leadshift,0px));transform:translateY(-4vh)}
.ttbig{font-size:clamp(30px,3.4vw,58px);text-shadow:none}
.ttnumsrow{border-bottom:1px solid var(--ll);padding:26px 0;background:rgba(var(--t-bg-rgb),.55)}
.ttsub{text-shadow:none}

/* ---- сцена ---- Внутри фиксированные пиксели (1180×690), снаружи масштаб от
   ширины окна; сцена прижата к правому краю и уходит за него. */
.ttstage{position:absolute;top:50%;right:2.5vw;z-index:1;width:1180px;height:690px;--k:1;
  transform-origin:100% 50%;transform:translateY(-50%) scale(var(--k));user-select:none;
  -webkit-user-select:none}
.ttsc{position:absolute;inset:0;perspective:3400px;perspective-origin:55% 45%}
.tt3d{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ttzoom{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:62% 55%;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
/* приближение растёт вправо, к краю экрана, а не влево на текст */
[data-scene="2"] .ttzoom{transform:translate(-10px,10px) scale(1.05)}

/* ноутбук: крышка и корпус — две плоскости под углом, отсюда объём */
.ttmac{position:absolute;left:150px;top:24px;width:1000px;height:560px;transform-style:preserve-3d}
.ttlid{position:absolute;left:0;top:0;width:1000px;height:560px;transform-origin:50% 100%;
  transform:rotateX(4deg);transform-style:preserve-3d;
  filter:drop-shadow(0 0 0 transparent)}
.ttlid>svg,.ttbase>svg{position:absolute;inset:0;width:100%;height:100%}
.ttlid .ttscr{position:absolute;left:66px;top:18px;width:868px;height:503px;border-radius:6px;
  overflow:hidden;background:var(--t-bg)}
.ttbase{position:absolute;left:0;top:560px;width:1000px;height:250px;transform-origin:50% 0;
  transform:rotateX(78deg);transform-style:preserve-3d}
.ttedge{display:none}
.ttshadow{position:absolute;left:-80px;right:-80px;top:-40px;bottom:-90px;transform:translateZ(-3px);
  background:none}
.ttscr img,.ttscr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:0 0;opacity:0;transition:opacity .5s,transform 1.6s ease-in-out;transform-origin:0 46%}
[data-scene="1"] .ttcabimg{opacity:1;transform:scale(1.42)}
[data-scene="4"] .ttcabimg{opacity:1;transform:scale(1.42);transform-origin:0 94%}
[data-scene="3"] .ttplanimg{opacity:1;transform:scale(1.3);transform-origin:0 30%}
[data-scene="2"] #ttvid,[data-scene="5"] #ttvid{opacity:1}

/* телефон — фотография из проекта, стоит справа перед ноутбуком */
.ttphone{position:absolute;left:790px;top:96px;width:230px;height:458px;transform-style:preserve-3d;
  transform:translateZ(150px);
  transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .6s}
.ttframe{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  filter:drop-shadow(0 0 0 transparent)}
/* в сцене бэктеста телефон ложится набок — терминал целиком, с панелями, по размеру экрана */
[data-scene="2"] .ttphone{transform:translateZ(150px)}
.ttphone{transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .6s}
.ttphone .ttscr{position:absolute;left:6.83%;top:3.15%;width:86.34%;height:93.7%;
  border-radius:6px;overflow:hidden;background:var(--t-s1);z-index:1}
.ttphone .ttscr img{object-position:0 0;transform-origin:0 28%}
[data-scene="1"] .ttcabm{opacity:1;transform:scale(1.15)}
[data-scene="3"] .ttplanm{opacity:1;transform:scale(1.08);transform-origin:0 24%}
[data-scene="4"].ttb4 .ttcabm{opacity:1;transform:scale(1.15);transform-origin:0 66%}
.ttmv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .5s;background:var(--t-bg);z-index:1}
[data-scene="2"] .ttmv{opacity:1}
/* создание ключа на бирже: экран в духе BingX, тумблеры включаются по очереди */
.ttbx{position:absolute;inset:0;padding:48px 14px 12px;background:var(--t-s1);color:var(--t-fg);
  font-size:12.5px;opacity:0;transition:opacity .45s}
[data-scene="4"] .ttbx{opacity:1}
[data-scene="4"].ttb4 .ttbx{opacity:0}
.ttbxh{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.ttbxh b{font:600 15px/1 var(--bdy);letter-spacing:-.02em}
.ttbxh span{font-size:11px;color:var(--t-fg3)}
.ttbx em{display:block;font:600 14px/1.3 var(--bdy);font-style:normal;margin-bottom:12px}
.ttbx label{display:flex;justify-content:space-between;align-items:center;gap:8px;height:34px;
  padding:0 10px;border:1px solid var(--t-line);border-radius:6px;margin-bottom:8px;font-size:11.5px;color:var(--t-fg3)}
.ttbx label i{font-style:normal;color:var(--t-fg)}
.ttbxp{display:flex;justify-content:space-between;align-items:center;height:34px;padding:0 10px;
  border:1px solid var(--t-line);border-radius:6px;margin-bottom:8px}
.ttbxp b{width:34px;height:20px;border-radius:6px;background:var(--t-line);position:relative;transition:.3s}
.ttbxp b::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:.3s}
.ttb1 .p1 b,.ttb2 .p2 b{background:var(--t-ac)}
.ttb1 .p1 b::after,.ttb2 .p2 b::after{left:17px}
.ttbx button{width:100%;height:36px;border:0;border-radius:6px;background:var(--t-ac);color:#fff;
  font:600 12.5px/1 var(--bdy);margin-top:4px;transition:.15s}
.ttb3 .ttbx button{transform:scale(.96);filter:brightness(1.2)}
.ttbxk{display:block;margin-top:10px;font-size:11px;color:var(--t-fg3);opacity:0;transition:opacity .3s}
.ttbxk b{color:var(--t-fg)}.ttbxk u{display:block;color:var(--acc);text-decoration:none;margin-top:3px}
.ttb3 .ttbxk{opacity:1}
.tttg{position:absolute;inset:0;padding:50px 12px 12px;opacity:0;transition:opacity .45s;
  font-size:12.5px;line-height:1.4;color:var(--t-fg);background:var(--t-s1)}
[data-scene="5"] .tttg{opacity:1}
.tttgh{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:12px}
.tttgh i{width:24px;height:24px;border-radius:50%;background:var(--t-acd);display:grid;place-items:center;
  font:600 11px/1 var(--bdy);font-style:normal;color:#fff}
.tttgh b{font-weight:600}.tttgh span{color:var(--t-fg3);margin-left:auto}
.ttmsg{background:var(--t-s2);border-radius:6px 6px 6px 4px;padding:9px 11px;margin-bottom:9px;
  max-width:95%;opacity:0;transform:translateY(8px);transition:.4s}
[data-scene="5"].ttb1 .ttmsg.sig,[data-scene="5"].ttb2 .ttmsg.ok{opacity:1;transform:none}
.ttmsg small{display:block;margin-top:4px;font-size:11.5px;color:var(--t-fg2);line-height:1.4}
.ttmsg .big{display:block;font:600 24px/1.1 var(--dsp);margin:6px 0 2px;color:var(--acc)}
.ttmsg.ok{background:var(--t-line);border:1px solid rgba(var(--t-ac-rgb),.35)}

/* карточки: тёмное стекло и белый текст — читается на любом фоне */
.ttglass{position:absolute;width:256px;padding:14px 17px 13px;border-radius:6px;
  background:linear-gradient(135deg,rgba(var(--t-line-rgb),.9),rgba(var(--t-s1-rgb),.92));
  border:1px solid rgba(var(--t-ink),.3);box-shadow:inset 0 1px 0 rgba(var(--t-ink),.3);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;
  opacity:0;transform:var(--tz) translateY(20px);
  transition:opacity .5s,transform .8s cubic-bezier(.22,.61,.36,1)}
.ttglass.on{opacity:1;transform:var(--tz)}
.ttglass i{display:block;font:600 10.5px var(--mn);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);margin-bottom:6px;font-style:normal}
.ttglass b{display:block;font:600 16px/1.3 var(--bdy);color:#fff;text-shadow:none}
.ttglass span{display:block;font-size:12.5px;line-height:1.45;color:var(--t-fg);margin-top:5px}
.ttglass.pnl{width:210px}
.ttglass.pnl b{font:600 28px/1.1 var(--dsp);color:var(--acc);white-space:nowrap}
.ttg1,.ttg3,.ttg8,.ttg6{left:440px;top:-10px;--tz:translateZ(240px)}
.ttg2,.ttg9,.ttg7{--tz:translateZ(400px)}
.ttg2{left:700px;top:540px}.ttg9{left:700px;top:540px}.ttg7{left:660px;top:540px}
.ttg10{left:440px;top:-10px;--tz:translateZ(240px)}
.ttg4{left:480px;top:150px;--tz:translateZ(300px)}
.ttg5{left:540px;top:340px;--tz:translateZ(340px)}
.ttg11{left:660px;top:540px;--tz:translateZ(420px)}

.ttfloor{position:absolute;left:15%;right:0;bottom:-30px;height:170px;pointer-events:none;
  background:none;
  filter:blur(12px)}

/* этапы и подпись сцены — в тексте слева; этап можно выбрать кликом */
.ttcap{margin-top:26px;padding:12px 14px 11px;border:1px solid rgba(var(--t-ink),.14);
  border-radius:6px;background:rgba(var(--t-s1-rgb),.74);font-size:13px;color:var(--w2);max-width:620px}
.ttcap b{display:block;font-weight:500;color:var(--w1);transition:opacity .3s;min-height:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ttcap.sw b{opacity:0}
.ttsteps5{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.ttsteps5 i{display:inline-flex;align-items:center;gap:6px;font:600 10.5px var(--mn);
  letter-spacing:.06em;text-transform:uppercase;padding:5px 9px 5px 6px;border-radius:999px;
  border:1px solid var(--ll2);color:var(--w3);font-style:normal;cursor:pointer;transition:.25s}
.ttsteps5 i::before{content:attr(data-n);width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;background:var(--ll);color:var(--w2);font-size:9.5px}
.ttsteps5 i:hover{border-color:var(--w3);color:var(--w1)}
.ttcap[data-scene="1"] i[data-n="1"],.ttcap[data-scene="2"] i[data-n="2"],
.ttcap[data-scene="3"] i[data-n="3"],.ttcap[data-scene="4"] i[data-n="4"],
.ttcap[data-scene="5"] i[data-n="5"]{border-color:var(--acc);color:var(--acc);
  background:rgba(var(--t-ac-rgb),.1)}
.ttcap[data-scene="1"] i[data-n="1"]::before,.ttcap[data-scene="2"] i[data-n="2"]::before,
.ttcap[data-scene="3"] i[data-n="3"]::before,.ttcap[data-scene="4"] i[data-n="4"]::before,
.ttcap[data-scene="5"] i[data-n="5"]::before{background:var(--acc);color:var(--t-bg)}

/* узкие экраны: текст сверху, ниже один крупный телефон с прогоном внутри */
@media(max-width:860px){
  .tthero{display:block;min-height:0}
  .ttscrim{display:none}
  .ttlead{padding:52px 0 10px;max-width:100%!important;min-height:0;display:block}
  .ttbig,.ttsub{text-shadow:none}
  .ttstage{position:relative;top:auto;right:auto;transform:none;width:100%;height:auto;
    margin:0 auto 24px}
  .ttsc{position:relative;inset:auto;width:400px;height:760px;transform-origin:0 0;
    transform:scale(var(--k));perspective-origin:50% 50%}
  .ttglass{--tz:translateZ(60px)!important}
  .ttmac{display:none}
  .ttphone{left:50px;top:60px;width:300px;height:598px;transform:none}
  [data-scene="2"] .ttphone{transform:none;opacity:1}
  [data-scene="2"] .ttzoom{transform:none}
  .ttphone .ttscr{border-radius:6px}

  .tttg{padding:58px 15px 12px;font-size:14.5px}
  .ttglass{width:210px;padding:11px 13px 10px}
  .ttglass b{font-size:14px}.ttglass span{font-size:11.5px}
  .ttglass.pnl{width:160px}.ttglass.pnl b{font-size:24px}
  .ttg1,.ttg3,.ttg8,.ttg6,.ttg10{left:0;top:10px}
  .ttg2,.ttg9,.ttg7{left:180px;top:600px}
  .ttg4{left:230px;top:150px}.ttg5{left:0;top:560px}.ttg11{left:180px;top:600px}
  .ttcap{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .ttstage *{animation:none!important;transition:none!important}
}
.ttbig span{display:inline-block;opacity:0;transform:translateY(24px);
  animation:ttup .7s cubic-bezier(.22,.61,.36,1) forwards}
.ttbig span:nth-child(1){animation-delay:.05s}
.ttbig span:nth-child(2){animation-delay:.13s}
.ttbig span:nth-child(3){animation-delay:.21s}
.ttbig span:nth-child(4){animation-delay:.29s}
.ttbig .em{color:var(--acc)}
@keyframes ttup{to{opacity:1;transform:none}}
.ttsub{font-size:clamp(15px,1.3vw,17px);line-height:1.7;color:var(--w2);max-width:60ch;
  margin:0 0 28px}
.ttrow{display:flex;gap:11px;flex-wrap:wrap}
.ttbtn{display:inline-flex;align-items:center;height:50px;padding:0 24px;border-radius:6px;
  font:600 15px/1 var(--bdy);text-decoration:none;border:1px solid var(--ll2);
  color:var(--w1);transition:.18s}
.ttbtn:hover{border-color:var(--acc);color:var(--w1);text-decoration:none;
  background:var(--gg2);transform:translateY(-2px)}
.ttbtn.pri{background:var(--acc);border-color:var(--acc);color:var(--t-s1)}
.ttbtn.pri:hover{filter:brightness(1.06);color:var(--t-s1)}

.ttnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;margin:clamp(40px,5vw,72px) 0 clamp(30px,4vw,56px);
  border-top:1px solid var(--ll);padding-top:26px}
.ttnums div{display:flex;flex-direction:column;gap:7px}
.ttnums b{font:600 clamp(26px,3vw,38px)/1 var(--dsp);color:var(--w1);
  font-variant-numeric:tabular-nums}
.ttnums span{font-size:12.5px;color:var(--w3)}

/* Бегущая строка — наша замена ленте логотипов: настоящие исходы сделок. */
.ttticker{position:relative;z-index:2;border-top:1px solid var(--ll);overflow:hidden;
  background:rgba(var(--t-s1-rgb),.6)}
.ttrun{display:flex;gap:34px;padding:13px 0;white-space:nowrap;width:max-content;
  animation:ttrun 46s linear infinite;font:500 12.5px/1 var(--mn)}
.ttrun span{color:var(--w3)}
.ttrun .up{color:var(--acc)}
.ttrun .dn{color:var(--t-dn)}
@keyframes ttrun{to{transform:translateX(-50%)}}
.ttticker:hover .ttrun{animation-play-state:paused}

/* ---- графики ---- */
.ttfig{margin:0;padding:0}
.ttchart{display:block;width:100%;height:auto;border:1px solid var(--ll);border-radius:6px;
  background:linear-gradient(180deg,var(--gg1),var(--gg0));padding:8px}
.ttfig figcaption{margin-top:14px;font-size:12.5px;line-height:1.65;color:var(--w3);
  max-width:78ch}
.eqline{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.8s cubic-bezier(.3,.7,.3,1)}
.reveal.in .eqline{stroke-dashoffset:0}
.cnd{opacity:0;transform:translateY(6px);transform-origin:center}
.reveal.in .cnd{animation:cndIn .5s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes cndIn{to{opacity:1;transform:none}}

.ttyears{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  margin-top:22px}
.ttyear{border:1px solid var(--ll);border-radius:6px;background:var(--gg1);padding:18px 20px;
  display:flex;flex-direction:column;gap:5px;transition:.18s}
.ttyear:hover{border-color:var(--ll2);transform:translateY(-3px)}
.ttyear b{font:600 15px/1 var(--mn);color:var(--w3)}
.ttyear span{font:600 clamp(20px,2.2vw,27px)/1 var(--dsp)}
.ttyear .up{color:var(--acc)} .ttyear .dn{color:var(--t-dn)}
.ttyear i{font-style:normal;font-size:12px;color:var(--w3)}

.ttcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;
  margin-top:clamp(28px,3.4vw,46px)}
.ttcard{border:1px solid var(--ll);border-radius:6px;background:var(--gg1);
  padding:24px 26px;transition:.2s}
.ttcards .ttcard:hover{border-color:var(--ll2);transform:translateY(-3px)}
.ttcard h3{font-size:16.5px;margin:0 0 10px;color:var(--w1)}
.ttcard p{font-size:13.5px;line-height:1.7;color:var(--w2);margin:0}
.ttwide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;padding:clamp(26px,3.4vw,42px)}
@media(max-width:860px){.ttwide{grid-template-columns:1fr}}
.ttwide h2{margin:0 0 12px}
section[id]{scroll-margin-top:78px}

/* Шаги. Нумерация здесь не украшение: порядок обязателен — без счёта по нашей
   ссылке не включится ни бесплатная неделя, ни тариф. */
.ttsteps{counter-reset:st;display:grid;gap:1px;background:var(--ll);
  border:1px solid var(--ll);border-radius:6px;overflow:hidden;margin-top:26px}
.ttstep{counter-increment:st;background:var(--gg1);padding:20px 24px;
  display:grid;grid-template-columns:38px 1fr;gap:6px 18px;align-items:baseline}
.ttstep::before{content:counter(st,decimal-leading-zero);font:600 13px/1 var(--mn);
  color:var(--acc);grid-row:span 2}
.ttstep b{font-size:15.5px;color:var(--w1)}
.ttstep span{font-size:13.5px;line-height:1.7;color:var(--w2);grid-column:2}

/* Тарифы. Бесплатная неделя стоит первой и выделена: это единственный вход
   без денег, и условие у неё одно — счёт по нашей ссылке. */
.ttplans{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:14px;margin-top:26px}
.ttplan{border:1px solid var(--ll);border-radius:6px;background:var(--gg1);
  padding:22px 22px 20px;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s}
.ttplan:hover{border-color:var(--ll2);transform:translateY(-3px)}
.ttplan.free{border-color:rgba(var(--t-ac-rgb),.42);background:linear-gradient(180deg,
  rgba(var(--t-ac-rgb),.07),transparent 60%)}
.ttplan h3{margin:0;font-size:14px;color:var(--w3);font-weight:500}
.ttplan .p{font:600 clamp(28px,3.1vw,36px)/1 var(--dsp);color:var(--w1);margin:10px 0 2px}
.ttplan .p i{font:500 13px/1 var(--bdy);font-style:normal;color:var(--w3)}
.ttplan p{margin:10px 0 0;font-size:13px;line-height:1.7;color:var(--w2)}
.ttplan ul{list-style:none;margin:14px 0 0;padding:0;font-size:13px;color:var(--w2)}
.ttplan li{padding-left:18px;position:relative;margin-bottom:7px;line-height:1.6}
.ttplan li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--acc);opacity:.7}
/* Порядок как на сильных прайсах: имя, цена, кнопка — и только потом список.
   Кнопка не должна быть на дне карточки: решение принимают у цены. */
.ttplan{display:flex;flex-direction:column}
.ttplan h3{order:0}
.ttplan .p{order:1}
.ttplan>p{order:2}
.ttplan .go{order:3;margin-top:16px;padding-top:0}
.ttplan ul{order:4;margin-top:18px;margin-bottom:auto;padding-top:16px;
  border-top:1px solid var(--ll)}
.ttplan .cond{order:5}
/* Кнопки во всех карточках на одной линии: описание держит одинаковую высоту. */
.ttplan>p{min-height:66px;margin-top:12px}
.ttplan h3{min-height:22px;display:flex;align-items:center}
.ttplan ul{min-height:132px}
.ttplan .cond{min-height:34px;margin-top:14px}
.ttplan{position:relative;overflow:visible}
.ttplan .tag{position:absolute;top:20px;right:18px;font:600 9.5px var(--mn);letter-spacing:.05em;
  text-transform:uppercase;font-style:normal;padding:4px 8px;border-radius:6px;background:none;
  border:1px solid var(--ll2);color:var(--w3);max-width:44%;text-align:center;line-height:1.3}
.ttplan h3{padding-right:46%;font-size:15px;color:var(--w1);font-weight:600}
.ttplan.free .tag{background:rgba(var(--t-ac-rgb),.14);border-color:rgba(var(--t-ac-rgb),.45);color:var(--acc)}
.ttplan.hot{border-color:rgba(var(--t-ac-rgb),.55);box-shadow:none}
.ttplan.hot .tag{background:var(--acc);border-color:var(--acc);color:var(--t-bg)}
.ttplan.pro .tag{background:linear-gradient(90deg,var(--t-warn),var(--t-warn));border-color:var(--t-warn);color:var(--t-s1)}
.ttplan li.no{color:var(--t-dn)}
.ttplan li.no::before{background:none;width:auto;height:auto;top:0;content:"✕";color:var(--t-dn);font-weight:600;opacity:1;font-size:11px}
.ttplan .cond{display:block;margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--w3)}
.ttpay{margin:22px 0 0;font-size:13px;color:var(--w3)}
.ttplan .ttbtn{width:100%;justify-content:center;height:46px;font-size:14.5px;
  background:var(--gg2)}
.ttplan .ttbtn.pri{background:var(--acc)}

/* Вопросы на <details>: раскрываются без единой строки скрипта. */
.ttfaq{display:grid;gap:1px;background:var(--ll);border:1px solid var(--ll);
  border-radius:6px;overflow:hidden;margin-top:26px}
.ttfaq details{background:var(--gg1)}
.ttfaq summary{padding:18px 22px;cursor:pointer;font-size:15px;color:var(--w1);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.ttfaq summary::-webkit-details-marker{display:none}
.ttfaq summary::after{content:"+";font:400 20px/1 var(--mn);color:var(--acc);flex:none}
.ttfaq details[open] summary::after{content:"–"}
.ttfaq summary:hover{color:var(--acc)}
.ttfaq .a{padding:0 22px 20px;font-size:13.5px;line-height:1.75;color:var(--w2);
  max-width:74ch}
.ttfaq .a p{margin:0 0 10px}
.ttfaq .a p:last-child{margin:0}

.ttlist{list-style:none;margin:0;padding:0}
.ttlist li{display:flex;gap:14px;align-items:baseline;padding:14px 0;
  border-bottom:1px solid var(--ll);font-size:13.5px;color:var(--w2)}
.ttlist li:last-child{border-bottom:0}
.ttlist b{font:600 15px/1 var(--mn);color:var(--acc);flex:none;min-width:54px}

/* Появление блоков по прокрутке — один приём на всю страницу. */
.reveal{opacity:0;transform:translateY(48px) scale(.9);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
/* текст внутри блока — построчно, следом за блоком */
.ttft>*{opacity:0;transform:translateY(18px)}
.ttft.in>*{animation:ttrise .7s cubic-bezier(.22,.61,.36,1) both}
.ttft.in>*:nth-child(2){animation-delay:.12s}.ttft.in>*:nth-child(3){animation-delay:.22s}
.ttft.in>*:nth-child(4){animation-delay:.32s}.ttft.in>*:nth-child(5){animation-delay:.42s}
.ttft.in>*:nth-child(6){animation-delay:.52s}
@keyframes ttrise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  /* текст шагов тоже: без анимации он навсегда оставался прозрачным */
  .reveal,.ttbig span,.ttft>*{opacity:1!important;transform:none!important;animation:none!important}
  .eqline{stroke-dashoffset:0;transition:none}
  .ttrun{animation:none}
}
@media print{.reveal{opacity:1!important;transform:none!important}}

/* ---- воронка при прокрутке: визуал с одной стороны, текст с другой ---- */
.ttfun{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;
  padding:52px 0}
.ttfun+.ttfun{border-top:1px solid var(--ll)}
.ttfun.flip .ttfv{order:2}
.ttfv{position:relative;min-height:440px;display:grid;place-items:center;align-content:center}
.ttfv>*{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.ttfv:hover>.ttmini,.ttfv:hover>.ttfig,.ttfv:hover>.ttpanel{transform:translateY(-6px)}
.ttft .ttkick{margin-bottom:12px}
.ttft h3{font-size:clamp(22px,2.4vw,30px);margin:0 0 14px;letter-spacing:-.02em;text-wrap:balance}
.ttft p{font-size:15px;line-height:1.7;color:var(--w2);margin:0 0 14px;max-width:52ch}
.ttft ul{list-style:none;margin:0 0 16px;padding:0}
.ttft li{padding-left:18px;position:relative;margin-bottom:7px;font-size:14px;color:var(--w2)}
.ttft li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--acc);opacity:.75}
.ttmore{display:inline-flex;align-items:center;gap:6px;color:var(--acc);font-weight:600;font-size:14px}
.ttmore:hover{text-decoration:none;gap:10px}
.ttmini{position:relative;width:250px;margin:0 auto}
.ttmini .frame{position:relative;width:100%;height:auto;display:block;z-index:2;pointer-events:none;
  filter:drop-shadow(0 0 0 transparent)}
.ttmini .scr{position:absolute;left:6.83%;top:3.15%;width:86.34%;height:93.7%;border-radius:6px;
  overflow:hidden;background:var(--t-s1);z-index:1}
.ttmini .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 6%;
  transform:scale(1.12);transform-origin:0 20%}
.ttmini .scr.chat{padding:52px 12px 12px;font-size:12.5px;line-height:1.4;color:var(--t-fg)}
/* чат: сообщения приходят по очереди, потом заново */
.ttmini .ttmsg{opacity:0;transform:translateY(8px)}
.reveal.in .ttmini .ttmsg.sig{animation:msgLoop 8s infinite}
.reveal.in .ttmini .ttmsg.ok{animation:msgLoop 8s infinite;animation-delay:1.8s}
@keyframes msgLoop{0%{opacity:0;transform:translateY(8px)}6%{opacity:1;transform:none}80%{opacity:1;transform:none}88%{opacity:0}100%{opacity:0}}
/* телефон шага 1: вводится UID, нажимается «Проверить», приходит подтверждение */
.ttmini .scr.acc{padding:54px 14px 12px;font-size:12px;line-height:1.45;color:var(--t-fg);background:var(--t-s1)}
.ttmini .scr.acc h4{margin:0 0 6px;font:600 16px/1.2 var(--bdy)}
.ttmini .scr.acc p{margin:0 0 12px;color:var(--t-fg2);font-size:11.5px}
.ttmini .scr.acc .fld{height:36px;border:1px solid var(--t-line);border-radius:6px;padding:0 10px;
  display:flex;align-items:center;font:500 13px var(--mn);color:#fff;margin-bottom:8px}
.ttmini .scr.acc .type{display:inline-block;overflow:hidden;white-space:nowrap;width:0}
.ttmini .scr.acc em{font-style:normal;color:var(--acc);animation:blink 1s steps(1) infinite}
.ttmini .scr.acc button{width:100%;height:34px;border:1px solid var(--t-line);border-radius:6px;background:var(--t-s2);
  color:#fff;font:600 12.5px var(--bdy)}
.ttmini .scr.acc .okb{margin-top:10px;padding:9px 10px;border-radius:6px;border:1px solid rgba(var(--t-ac-rgb),.4);
  background:rgba(var(--t-line-rgb),.9);color:var(--t-up);font-size:11.5px;opacity:0}
.ttmini .scr.acc a{display:inline-block;margin-top:12px;color:var(--acc);font-size:12px;font-weight:600}
.reveal.in .scr.acc .type{animation:uidType 8s steps(10) infinite}
.reveal.in .scr.acc button{animation:uidBtn 8s infinite}
.reveal.in .scr.acc .okb{animation:uidOk 8s infinite}
@keyframes blink{50%{opacity:0}}
@keyframes uidType{0%,8%{width:0}26%,90%{width:10ch}100%{width:0}}
@keyframes uidBtn{
  0%,32%{background:var(--t-s2);color:#fff;transform:none}
  36%{background:var(--t-ac);color:var(--t-bg);transform:scale(.97)}
  40%,100%{background:var(--t-s2);color:#fff;transform:none}}
@keyframes uidOk{0%,40%{opacity:0;transform:translateY(6px)}46%,88%{opacity:1;transform:none}94%,100%{opacity:0}}
/* права ключа: столбиком справа от экрана, появляются сверху вниз, повтор */
.ttfv.keys{grid-template-columns:minmax(0,1fr) auto;gap:18px;place-items:center;align-items:center}
.ttperm{position:static;display:flex;flex-direction:column;gap:8px;z-index:3}
.ttperm span{opacity:0;transform:translateY(-12px)}
.reveal.in .ttperm span{animation:permIn 8s cubic-bezier(.22,.61,.36,1) infinite}
.reveal.in .ttperm span:nth-child(2){animation-delay:.5s}
.reveal.in .ttperm span:nth-child(3){animation-delay:1s}
.reveal.in .ttperm span:nth-child(4){animation-delay:1.8s}
@keyframes permIn{0%{opacity:0;transform:translateY(-12px)}8%{opacity:1;transform:none}80%{opacity:1;transform:none}88%{opacity:0}100%{opacity:0}}
.ttperm .key{color:var(--w1);border-color:var(--ll2);text-transform:none;letter-spacing:0;font:600 11.5px var(--mn)}
.ttpanel{margin-right:0}
.ttfg1{position:absolute;right:-10px;bottom:60px;--tz:translateZ(0);width:220px;z-index:4;opacity:0}
.reveal.in .ttfg1{animation:uidOk 8s infinite}
.ttpanel{width:100%;aspect-ratio:16/9;border-radius:6px;border:1px solid var(--ll);overflow:hidden;
  background:var(--t-bg);box-shadow:none}
.ttpanel img{width:100%;height:100%;object-fit:cover;object-position:0 100%;transform:scale(1.35);
  transform-origin:0 96%;display:block}

.ttperm span{padding:8px 12px;border-radius:999px;font:600 11px var(--mn);letter-spacing:.06em;
  text-transform:uppercase;border:1px solid var(--ll2);background:rgba(var(--t-s1-rgb),.96);color:var(--w2);
  white-space:nowrap}
.ttperm .ok{color:var(--acc);border-color:rgba(var(--t-ac-rgb),.5)}
.ttperm .ok::before{content:"✓ "}
.ttperm .no{color:var(--t-dn);border-color:rgba(var(--t-dn-rgb),.5);text-decoration:line-through}
.ttyears.mini{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:0 0 16px}
.ttyears.mini .ttyear{padding:10px 12px}
.ttyears.mini .ttyear span{font-size:18px}
.ttyears.mini .ttyear i{display:none}
/* появление со своей стороны */
.reveal.rv-l{transform:translate(-40px,40px) scale(.9)}
.reveal.rv-r{transform:translate(40px,40px) scale(.9)}
.reveal.in{transform:none}
@media(max-width:860px){
  .ttfun,.ttfun.flip{grid-template-columns:1fr;gap:26px;padding:36px 0}
  .ttfun.flip .ttfv{order:0}
  .ttfv{min-height:0}
  .reveal.rv-l,.reveal.rv-r{transform:translateY(24px)}
  .reveal.rv-l.in,.reveal.rv-r.in{transform:none}
  .ttfg1{right:0;bottom:10px}
  .ttfv.keys{grid-template-columns:1fr}
  .ttperm{flex-direction:row;flex-wrap:wrap;margin-top:4px}}

/* графики: непрозрачная панель — шторка кривой того же цвета */
.ttchart{background:var(--t-s1)}
.ttchart text{font:17px var(--mn);fill:var(--t-fg3)}
.ttchart.ex text{font:12px var(--mn)}
.ttfig+.ttfig{margin-top:14px}
/* кривая капитала: шторка уезжает вправо, кривая рисуется с нуля; повтор */
.eqcover{transform:translateX(0)}
.eqedge{opacity:0}
.reveal.in .eqcover{animation:eqwipe 12s cubic-bezier(.45,0,.2,1) infinite}

.reveal.in .eqend,.reveal.in .eqdd{animation:eqlab 12s infinite}
@keyframes eqwipe{
  0%{transform:translateX(0)}            /* закрыто */
  38%{transform:translateX(102%)}        /* открыли слева направо */
  86%{transform:translateX(102%)}        /* держим готовый график */
  86.1%{transform:translateX(-102%)}     /* прыжок за левый край, не видно */
  100%{transform:translateX(0)}}         /* закрываем тем же ходом */
@keyframes eqedge{0%{opacity:1;transform:translateX(0)}42%{opacity:1;transform:translateX(1024px)}
  46%{opacity:0}100%{opacity:0}}
@keyframes eqlab{0%,36%{opacity:0}44%,84%{opacity:1}88%,100%{opacity:0}}
/* кольцо: сегменты прорисовываются по очереди и повторяются; наведение подсвечивает */
.ttdrow{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:center;margin-top:14px}
.ttfig.donut{position:relative;background:var(--t-s1);border:1px solid var(--ll);border-radius:6px;padding:12px}
.ttdonut{display:block;width:100%;height:auto;border:0;background:none}
.dseg{stroke-dashoffset:calc(var(--len) * 1px * -1 + var(--off) * 1px);opacity:.35;transition:opacity .25s,stroke-width .25s;cursor:pointer}
.reveal.in .dseg{animation:dsegIn 9s cubic-bezier(.22,.61,.36,1) infinite;animation-delay:calc(var(--i)*.45s)}
@keyframes dsegIn{0%{stroke-dashoffset:calc(var(--off) * 1px + var(--len) * 1px);opacity:.35}
  12%{stroke-dashoffset:calc(var(--off) * 1px);opacity:1}82%{stroke-dashoffset:calc(var(--off) * 1px);opacity:1}
  90%,100%{stroke-dashoffset:calc(var(--off) * 1px + var(--len) * 1px);opacity:.35}}
.dseg.hot{stroke-width:38;opacity:1!important;filter:brightness(1.25)}
.ttdonut .dc1{font:600 26px var(--dsp);fill:var(--t-fg)}
.ttdonut .dc2{font:11px var(--mn);fill:var(--t-fg3)}
.ttdleg b{display:block;font:600 15px var(--bdy);color:var(--w1);margin-bottom:6px}
.ttdleg p{margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--w3)}
.ttdleg ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13px;color:var(--w2)}
.ttdleg li{display:flex;align-items:center;gap:8px}
.ttdleg li i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.ttdleg li b{color:var(--w1);margin-left:auto}
@media(max-width:860px){.ttdrow{grid-template-columns:1fr}}
.tthtip{position:absolute;z-index:5;pointer-events:none;padding:8px 11px;border-radius:6px;
  background:rgba(var(--t-s1-rgb),.96);border:1px solid var(--ll2);font-size:12px;line-height:1.5;color:var(--w2);
  white-space:nowrap;box-shadow:none}
.tthtip b{display:block;color:var(--w1);font-size:13px}
.tthtip[hidden]{display:none}
/* сделка: свечи по одной, потом зона и сигнал; повтор */
.reveal.in .cnd{animation:cndLoop 9s cubic-bezier(.22,.61,.36,1) infinite!important;
  animation-delay:calc(var(--i,0)*.028s)!important}
.tzone,.tsig{opacity:0}
.reveal.in .tzone,.reveal.in .tsig{animation:tmark 9s infinite}
@keyframes cndLoop{0%{opacity:0;transform:translateY(6px)}5%{opacity:1;transform:none}86%{opacity:1}92%{opacity:0}100%{opacity:0}}
@keyframes tmark{0%,48%{opacity:0}54%,86%{opacity:1}92%,100%{opacity:0}}
/* шаг 05: телефон слева, биржа справа — история одной сделки, по кругу */
.ttfun.story{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.ttfv.story{grid-template-columns:230px minmax(0,1fr);gap:22px;place-items:center;align-items:center}
.ttfv.story .ttmini{width:230px}
.ttex{position:relative;width:100%;border:1px solid var(--ll2);border-radius:6px;background:var(--t-s1);
  box-shadow:none;overflow:visible;font-size:12px;color:var(--t-fg)}
.ttexh{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--ll)}
.ttexh b{font:600 14px/1 var(--bdy)}.ttexh span{color:var(--w3);font-size:11px}
.ttexh .px{margin-left:auto;font:600 13px var(--mn);font-style:normal;color:var(--acc)}
.ttexc{position:relative;padding:8px 10px 0}
.ttchart.ex{border:0;border-radius:6px;background:var(--t-s1)}
.ttexlv{position:absolute;right:18px;top:16px;display:flex;flex-direction:column;gap:5px;align-items:flex-end;font:600 10.5px var(--mn)}
.ttexlv span{padding:3px 7px;border-radius:5px;background:rgba(var(--t-s1-rgb),.92);border:1px solid var(--ll2);opacity:0}
.ttexlv .e{color:var(--acc)}.ttexlv .l1{color:var(--t-fg)}.ttexlv .tp{color:var(--t-warn)}
.ttexo{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;padding:12px 14px 14px;align-items:end}
.ttexo .row{display:flex;flex-direction:column;gap:3px}
.ttexo .row span{font-size:10.5px;color:var(--w3)}
.ttexo .row b{font:600 13px var(--mn);color:#fff}
.ttexo button{height:34px;padding:0 14px;border:0;border-radius:6px;background:var(--t-up);color:#fff;
  font:600 12.5px var(--bdy);transition:.15s}
.ttexok{grid-column:1/-1;padding:9px 12px;border-radius:6px;border:1px solid rgba(var(--t-ac-rgb),.4);
  background:rgba(var(--t-line-rgb),.9);opacity:0;font-size:12px}
.ttexok b{color:var(--acc)}
.ttarr{position:absolute;padding:5px 9px;border-radius:999px;background:var(--acc);color:var(--t-bg);
  font:600 10.5px var(--mn);opacity:0;white-space:nowrap;box-shadow:none}
.ttarr.a1{left:14px;top:-14px}.ttarr.a2{right:14px;bottom:-14px}.ttarr.a3{right:14px;top:-14px}.ttarr.a4{left:14px;bottom:-14px}
/* сценарий 14 с: сигнал → заявка → тейк → отчёт */
.ttfv.story.reveal.in .ttmini .ttmsg.sig{animation:st5sig 16s infinite}
.ttfv.story.reveal.in .ttmini .ttmsg.ok{animation:st5msg 16s infinite;animation-delay:11.2s}
/* свечи: до входа сразу, после входа — по одной к тейку */
.ttchart.ex .sm{opacity:0}
/* Одна шторка на весь график: 90 независимых анимаций не совпадали фазами,
   и на новом круге свежие свечи ложились поверх старых. */
.stcover{transform:translateX(0)}
.ttfv.story.reveal.in .stcover{animation:st5wipe 16s cubic-bezier(.45,0,.2,1) infinite}
@keyframes st5wipe{
  0%{transform:translateX(0)}
  8%{transform:translateX(0)}
  40%{transform:translateX(102%)}
  92%{transform:translateX(102%)}
  92.1%{transform:translateX(-102%)}
  100%{transform:translateX(0)}}
.ttfv.story.reveal.in .sm1{animation:st5m 16s infinite;animation-delay:3.4s}
.ttfv.story.reveal.in .sm2{animation:st5m 16s infinite;animation-delay:3.8s}
.ttfv.story.reveal.in .sm3{animation:st5m 16s infinite;animation-delay:4s}
.ttfv.story.reveal.in .sm4{animation:st5m 16s infinite;animation-delay:10.2s}
@keyframes st5m{0%{opacity:0}3%{opacity:1}86%{opacity:1}90%,100%{opacity:0}}
@keyframes st5sig{0%{opacity:0;transform:translateY(8px)}4%{opacity:1;transform:none}90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes st5msg{0%{opacity:0;transform:translateY(8px)}3%{opacity:1;transform:none}24%{opacity:1;transform:none}28%,100%{opacity:0}}
.ttfv.story.reveal.in .ttarr.a1{animation:st5tag 16s infinite;animation-delay:1.4s}
.ttfv.story.reveal.in .ttarr.a2{animation:st5tag 16s infinite;animation-delay:2.8s}
.ttfv.story.reveal.in .ttarr.a3{animation:st5tag 16s infinite;animation-delay:10.2s}
.ttfv.story.reveal.in .ttarr.a4{animation:st5tag 16s infinite;animation-delay:11.4s}
@keyframes st5tag{0%{opacity:0;transform:translateY(-6px)}3%{opacity:1;transform:none}14%{opacity:1}18%,100%{opacity:0}}
.ttfv.story.reveal.in .ttexo .type2{animation:st5px 16s infinite}
@keyframes st5px{0%,12%{color:#fff}14%,100%{color:var(--acc)}}
.ttfv.story.reveal.in .ttexo button{animation:st5btn 16s infinite}
@keyframes st5btn{0%,19%{transform:none;filter:none}21%{transform:scale(.95);filter:brightness(1.3)}23%,100%{transform:none;filter:none}}

@keyframes st5lv{0%{opacity:0;transform:translateX(-6px)}3%{opacity:1;transform:none}56%{opacity:1}60%,100%{opacity:0}}
.ttfv.story.reveal.in .ttexok{animation:st5ok 16s infinite;animation-delay:10.6s}
@keyframes st5ok{0%{opacity:0;transform:translateY(6px)}3%{opacity:1;transform:none}26%{opacity:1}30%,100%{opacity:0}}
.ttfv.story .ttmsg time{display:block;text-align:right;font-size:10px;color:var(--t-fg3);margin-top:3px}
@media(max-width:860px){.ttfun.story{grid-template-columns:1fr}.ttfv.story{grid-template-columns:1fr;gap:18px}
  .ttfv.story .ttmini{width:220px}.ttarr.a1,.ttarr.a4{left:6px}}
/* Цифры — одна панель с внутренними разделителями, а не россыпь коробок. */
.ttboard{border:1px solid var(--ll);border-radius:6px;background:rgba(var(--t-s1-rgb),.9);
  overflow:hidden;margin:0 0 20px}
.ttboard .row{display:grid}
.ttboard .row.years{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  border-bottom:1px solid var(--ll)}
.ttboard .row.facts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.ttboard .row>div{padding:13px 16px;border-right:1px solid var(--ll);background:none}
.ttboard .row>div:last-child{border-right:0}
.ttboard .row.years>div{border-radius:0;transform:none}
.ttboard .row.years>div:hover{transform:none;border-color:var(--ll)}
.ttboard b{display:block;font:600 18px/1.15 var(--dsp);color:var(--w1)}
.ttboard span{font-size:11.5px;color:var(--w3)}
.ttboard .row.facts b{color:var(--w1)}
@media(max-width:520px){.ttboard .row>div{border-bottom:1px solid var(--ll)}}
.ttyear,.ttcard,.ttstep,.ttplan,.ttfaq details{background:rgba(var(--t-s1-rgb),.9)}

/* гайды: первая статья крупно, остальные сеткой — без одинокой карточки в ряду */
.glist{grid-template-columns:repeat(3,minmax(0,1fr))}
.glist>a:first-child{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  grid-template-rows:auto auto 1fr auto;gap:6px 24px;align-items:start}
.glist>a:first-child .gthumb{grid-row:1/5;width:100%;height:auto;align-self:center;
  border-radius:6px;margin:0}
.glist>a:first-child h3{font-size:22px}
.glist>a:first-child p{font-size:14.5px}
@media(max-width:860px){.glist{grid-template-columns:1fr 1fr}.glist>a:first-child{grid-column:span 2}}
@media(max-width:560px){.glist{grid-template-columns:1fr}
  .glist>a:first-child{grid-column:auto;display:flex;flex-direction:column}}

/* вопросы — слева, как остальные разделы */
#faq .sec{text-align:left}
/* подвал: бренд и ссылки на сообщество, три колонки, дисклеймер внизу */
footer.ttfoot{background:rgba(var(--t-bg-rgb),.92);border-top:1px solid var(--ll);margin-top:0;padding:56px 0 30px}
.ttfcols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:36px;margin-bottom:34px}
.ttfbrand p{margin:14px 0 18px;font-size:13.5px;line-height:1.65;color:var(--w2);max-width:38ch}
.ttsoc{display:flex;flex-direction:column;gap:6px}
.ttsoc a{display:inline-flex!important;align-items:center;gap:10px;margin:0!important;padding:8px 12px;
  border-radius:6px;border:1px solid var(--ll);background:rgba(var(--t-s1-rgb),.8);color:var(--w1)!important;
  font-size:13.5px;width:max-content;transition:.18s}
.ttsoc a:hover{border-color:var(--acc);transform:translateY(-1px);text-decoration:none}
.ttsoc .ic{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;background:var(--gg2);font-size:14px}
.ttfcol h4{margin:0 0 12px;font:600 11.5px var(--mn);letter-spacing:.1em;text-transform:uppercase;color:var(--w3)}
.ttfcol a{display:block;margin:0 0 9px!important;color:var(--w2)!important;font-size:14px}
.ttfcol a:hover{color:var(--acc)!important;text-decoration:none}
footer.ttfoot .disc{font-size:12px;line-height:1.6;color:var(--w3);max-width:none;columns:2;column-gap:36px}
.ttcopy{margin:18px 0 0;font-size:12px;color:var(--w3)}
@media(max-width:860px){.ttfcols{grid-template-columns:1fr 1fr;gap:26px}footer.ttfoot .disc{columns:1}}
@media(max-width:520px){.ttfcols{grid-template-columns:1fr}}

/* ---- без иксов ---- */
.ttnumnote{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--w3);max-width:80ch}
.ttnumnote a{color:var(--acc)}

.ttmyths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:14px;margin-top:8px}
.ttmyth{background:var(--gg1);border:1px solid var(--ll);border-radius:6px;padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:10px}
.ttmyth h3{margin:0;font:600 18px/1.25 var(--dsp);color:var(--w1)}
.ttmyth .ttpr{margin:0;font:500 14px/1.4 var(--mn);color:var(--t-dn);text-decoration:line-through;
  text-decoration-color:rgba(var(--t-dn-rgb),.55)}
.ttmyth .ttfx{margin:0;font-size:14.5px;line-height:1.65;color:var(--w2)}
.ttworks,.tthonest{margin-top:22px;border:1px solid var(--ll);border-radius:6px;padding:24px;
  background:linear-gradient(180deg,rgba(var(--t-ac-rgb),.06),rgba(var(--t-ac-rgb),0) 70%),var(--gg1)}
.ttwh{margin:0 0 14px;font:600 12px/1 var(--mn);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.ttwgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px}
.ttwk{display:flex;flex-direction:column;gap:6px}
.ttwk b{font:600 16px/1.3 var(--dsp);color:var(--w1)}
.ttwk span{font-size:14px;line-height:1.6;color:var(--w2)}
.tthonest p{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--w2);max-width:78ch}
.tthonest p b{color:var(--w1)}
.tthonest p.warn{color:var(--t-dn);font-size:14px}
.tthonest .ttrow{margin-top:6px}
/* ---- на связи ---- */
.ttcomm{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.ttcm{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--ll);border-radius:6px;
  background:var(--gg1);color:var(--w1)!important;text-decoration:none!important;
  transition:border-color .2s,transform .2s}
.ttcm:hover{border-color:var(--acc);transform:translateY(-2px)}
.ttcm i{font-style:normal;width:42px;height:42px;border-radius:6px;display:grid;place-items:center;
  background:var(--gg2);font-size:20px}
.ttcm i.yt{background:var(--t-dn);color:#fff;font-size:16px}
.ttcm b{font:600 16px/1.3 var(--dsp)}
.ttcm span{font-size:14px;line-height:1.55;color:var(--w2)}
.ttft .ttmore+.ttmore{margin-left:18px}
@media(max-width:640px){
  .ttmyth{padding:18px}
  .ttworks,.tthonest{padding:18px}
  .tthonest .ttrow{flex-direction:column;align-items:stretch}
  .tthonest .ttrow .ttbtn{justify-content:center}
  .ttft .ttmore{display:block}
  .ttft .ttmore+.ttmore{margin:10px 0 0}
}
@media (prefers-reduced-motion:reduce){.ttcm{transition:none}.ttcm:hover{transform:none}}