/* ============================================================
   FBM CARDS v2 — foundation (ref: adasilv2.framer.website)
   Onest + Caveat · green brand · figma-canvas playfulness
   ============================================================ */
@font-face{
  font-family:'Astrolab';
  src:url('../fonts/Astrolab.ttf') format('truetype');
  font-display:swap;
}
:root{
  --bg:#fafafa; --ink:#161515; --gray:#858585; --gray-2:#b8b8ba;
  --line:#ececec; --card:#ffffff; --panel:#f1f1ef;
  --green:#1FB25A; --green-ink:#128A44; --green-soft:#e8f7ef; --green-line:#c9ecd8;
  --grad:linear-gradient(90deg,#83DA4E 0%,#41B856 50%,#54ACB8 100%);
  --r-lg:14px; --r-md:16px; --r-sm:10px;
  --sh-card:0 18px 44px -28px rgba(22,21,21,.2);
  --sh-pop:0 24px 60px -30px rgba(22,21,21,.3);
  --spring:cubic-bezier(.34,1.45,.64,1);
  --font:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hand:"Caveat",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);font-weight:400;background:var(--bg);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--green-soft);color:var(--green-ink)}

.container{max-width:1180px;margin:0 auto;padding:0 32px}
@media(max-width:767px){.container{padding:0 20px}}

h1,h2,h3{font-weight:500;letter-spacing:-.03em;line-height:1.06}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h1 .hw,h2 .hw,h3 .hw{
  font-family:var(--hand);font-weight:600;font-size:1.16em;line-height:.85;
  color:var(--green-ink);display:inline-block;transform:rotate(-2deg);padding:0 .05em;
}
h2{font-size:clamp(34px,4.6vw,54px)}
h3{font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em}

/* ---------- pills / buttons ---------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  padding:12px 20px;border-radius:10px;font-size:15px;font-weight:500;
  background:var(--card);color:var(--ink);border:.5px solid #e0e0de;
  transition:transform .45s var(--spring),background .2s ease,border-color .2s ease;
}
.pill:hover{transform:scale(1.03);background:#f7f7f5}
.pill:active{transform:scale(.98)}
.pill--dark{background:#171717;color:#fff;border-color:#171717}
.pill--dark:hover{background:#262626}
.pill--green{background:linear-gradient(180deg,#33c263,#1fa653);color:#fff;border-color:#22a656}
.pill--green:hover{background:linear-gradient(180deg,#3ecb6d,#23af5b)}
.pill--lg{padding:16px 28px;font-size:16.5px;border-radius:10px}
.pill--sm{padding:8px 14px;border-radius:10px;font-size:13.5px}

/* ---------- badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:10px;border:.5px solid #e0e0de;
  font-size:14px;font-weight:500;color:var(--gray);background:rgba(255,255,255,.6);
}

/* ---------- handwritten: ONE role only — the short witty caption under a section h2 ---------- */
.hand{
  font-family:var(--hand);font-weight:500;font-size:22px;line-height:1.15;
  color:#9a9a94;display:inline-block;transform:rotate(-2deg);
}

/* ---------- sticker (white fat outline + tilt + hover wiggle) ---------- */
.sticker{
  --rot:-6deg;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border-radius:14px;
  box-shadow:0 0 0 5px #fff,0 16px 30px -18px rgba(22,21,21,.35);
  transform:rotate(var(--rot));
  transition:transform .5s var(--spring);
}
.sticker:hover{transform:rotate(calc(var(--rot) + 5deg)) scale(1.06)}

/* ---------- figma cursor chip ---------- */
.cur-chip{
  --chip:var(--green);
  position:relative;display:inline-block;
  padding:5px 13px;border-radius:999px;border-top-left-radius:3px;
  background:var(--chip);color:#fff;font-size:13.5px;font-weight:500;line-height:1.3;
  filter:drop-shadow(0 6px 14px rgba(22,21,21,.22));
}
.cur-chip::before{
  content:"";position:absolute;top:-13px;left:-8px;width:16px;height:16px;
  background:var(--chip);
  clip-path:polygon(0 0,100% 42%,46% 54%,28% 100%);
}

/* ---------- figma selection frame around a word ---------- */
.fig-select{
  position:relative;display:inline-block;padding:.02em .12em;
  border:1.6px solid var(--green);
  background:rgba(31,178,90,.07);
}
.fig-select i,
.fig-select::before,.fig-select::after{
  content:"";position:absolute;width:8px;height:8px;background:#fff;
  border:1.6px solid var(--green);
}
.fig-select::before{top:-5px;left:-5px}
.fig-select::after{top:-5px;right:-5px}
.fig-select i{font-style:inherit;padding:0;border-width:1.6px}
.fig-select i:first-of-type{bottom:-5px;left:-5px;top:auto}
.fig-select i:last-of-type{bottom:-5px;right:-5px;top:auto}

/* ---------- cards ---------- */
.card{background:var(--card);border:.5px solid #e0e0de;border-radius:var(--r-lg)}
.card--sh{box-shadow:var(--sh-card)}

/* ---------- section head ---------- */
.sec{padding:64px 0}
.sec-head{max-width:820px;margin:0 auto 56px;text-align:center;position:relative}
.sec-head h2{margin-bottom:10px}
.sec-head .hand{margin-top:6px}
.sec-head p.sub{margin:14px auto 0;max-width:56ch;font-size:18px;color:var(--gray)}
@media(max-width:767px){.sec{padding:40px 0}.sec-head{margin-bottom:36px}}

/* ---------- CTA row ---------- */
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- reveal on scroll (spring float-in) ---------- */
[data-rev]{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .8s var(--spring)}
[data-rev="l"]{transform:translateX(-30px) rotate(-1.5deg)}
[data-rev="r"]{transform:translateX(30px) rotate(1.5deg)}
[data-rev].on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-rev]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important}
}

/* ---------- Astrolab (logo typeface) ---------- */
.astro{font-family:'Astrolab',var(--font);font-weight:400;letter-spacing:.02em}


/* ================= r32: глобальный десктоп-масштаб 0.9 =================
   Клиент: на МБП M5 (и большинстве ноутбуков) ленд при 100% выглядит крупно,
   при ручных 90% — идеально. Воспроизводим «90%» для всех: zoom на body при
   >=992px. Мобилка/планшет не трогаются. vh-величины зумом не масштабируются —
   это то же поведение, что и ручной zoom браузера, эквивалент подтверждён. */
@media (min-width:992px){
  body{zoom:.9}
}

/* ================= r33 п.4: прыжки страницы при DOM-мутациях мокапов =================
   ResizeObserver доказал: высоты блоков НЕ меняются. «Блоки отползают» — это
   браузерный scroll anchoring: движки переставляют строки (insertBefore в ленте
   дашборда и т.п.), браузер пере-привязывает якорь скролла и сдвигает страницу.
   Контент сайта статичен, все мутации — декоративные анимации, поэтому якорение
   выключаем целиком. */
html{overflow-anchor:none}

/* r42: фидбек разраба (3440x1440) — на больших экранах 0.9 делает всё мелким.
   От 1800px ширины возвращаем натуральный масштаб: места достаточно. */
@media (min-width:1800px){
  body{zoom:1}
}


/* ================= header ================= */
:root{
  --border-main:1px solid rgba(236,236,236,1);
  --text-subtitle:#a1a1a1;
  --background-subtle:rgba(245,245,245,1);
  --hdrh:60px; /* высота шапки; ужимается ступенями max-height (r30 п.3) */
}
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .25s ease,box-shadow .25s ease}
.hdr.scrolled{background:rgba(250,250,250,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr-in{display:flex;align-items:center;gap:36px;height:var(--hdrh,60px)}
.hdr-logo{display:inline-flex;align-items:center;flex:none}
.hdr-logo-img{width:auto;height:21px}
.hdr-nav{display:flex;gap:2px;align-items:center}
.hdr-nav a{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:9px;font-size:14px;font-weight:500;color:#4a4a4a;transition:background .2s ease,color .2s ease}
.hdr-nav a:hover{background:#eeeeec;color:var(--ink)}
.hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto}

/* language switch */
.hdr-lang{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--ink);
  border:.5px solid #e0e0de;background:#fff;
  transition:background .2s ease,transform .3s var(--spring);
}
.hdr-lang:hover{background:#f7f7f5;transform:scale(1.03)}
.hdr-lang svg{flex:none}

/* scenarios dropdown */
.hdr-navdrop{position:relative}
.hdr-navdrop-btn svg{transition:transform .3s ease;color:#8a8a8a}
.hdr-navdrop:hover .hdr-navdrop-btn{background:#eeeeec;color:var(--ink)}
.hdr-navdrop:hover .hdr-navdrop-btn svg{transform:rotate(180deg)}
.hdr-drop{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);
  display:grid;width:max-content;min-width:330px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-pop);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .35s var(--spring),visibility .22s;
  z-index:60;
}
.hdr-navdrop:hover .hdr-drop,.hdr-drop:hover{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.hdr-drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.hdr-drop-it{
  display:flex;align-items:center;gap:15px;padding:11px 13px;border-radius:11px;
  transition:background .18s ease;
}
.hdr-drop-it:hover{background:#f5f6f4}
.hdr-drop-ic{
  --cardbg:#161515;
  position:relative;flex:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:31px;border-radius:7px;background:var(--cardbg);
  border:1px solid rgba(22,21,21,.08);
  box-shadow:0 4px 10px -6px rgba(22,21,21,.35);
  transition:transform .35s var(--spring);
}
.hdr-drop-it:hover .hdr-drop-ic{transform:rotate(-4deg) scale(1.06)}
.hdr-drop-chip{
  position:absolute;top:6px;left:7px;width:9px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.5));
  opacity:.9;
}
.hdr-drop-ic svg{position:absolute;right:6px;bottom:5px}
.hdr-drop-ic--light .hdr-drop-chip{background:linear-gradient(135deg,#dcdcd9,#c9c9c5);opacity:1}
.hdr-drop-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.hdr-drop-tx b{font-size:14px;font-weight:500;color:var(--ink)}
.hdr-drop-tx i{font-style:normal;font-size:12px;color:var(--gray)}

.hdr-burger{display:none;width:40px;height:40px;border-radius:12px;position:relative}
.hdr-burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease,top .3s ease,opacity .22s ease}
.hdr-burger span:nth-child(1){top:13px}
.hdr-burger span:nth-child(2){top:19px}
.hdr-burger span:nth-child(3){top:25px}
.hdr-burger.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.hdr-burger.open span:nth-child(2){opacity:0;transform:scaleX(.4)}
.hdr-burger.open span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* mobile menu panel: fully hidden on desktop, activated only inside the narrow media query */
.hdr-mob{display:none}
body.hdr-menulock{overflow:hidden}

@media(max-width:1100px){
  .hdr-nav{display:none}
  .hdr-lang{display:none}
  .hdr-burger{display:block}
  .hdr.menu-open{background:#fafafa;box-shadow:0 1px 0 var(--line)}
  .hdr.menu-open.scrolled{background:#fafafa;backdrop-filter:none}

  /* панель — flex-колонка фиксированной высоты (top:60px + bottom:0 у fixed);
     сама панель НЕ скроллится: прокручивается только середина с пунктами,
     нижний блок кнопок всегда остаётся на месте */
  .hdr-mob{
    display:flex;flex-direction:column;gap:14px;
    position:fixed;top:var(--hdrh,60px);left:0;right:0;bottom:0;z-index:99;
    padding:14px 20px calc(20px + env(safe-area-inset-bottom,0px));
    background:#fafafa;overflow:hidden;
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
    transition:opacity .26s ease,transform .34s var(--spring),visibility .26s;
  }
  .hdr.menu-open .hdr-mob{opacity:1;visibility:visible;transform:none;pointer-events:auto}

  .hdr-mob-nav{
    display:flex;flex-direction:column;gap:2px;
    flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .hdr-mob-link{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;padding:15px 12px;border-radius:12px;text-align:left;
    font-family:inherit;font-size:21px;font-weight:500;letter-spacing:-.015em;color:var(--ink);
    background:none;border:0;cursor:pointer;
    transition:background .2s ease;
  }
  .hdr-mob-link:hover,.hdr-mob-link:active{background:#efefec}
  .hdr-mob-accbtn svg{flex:none;color:#8a8a8a;transition:transform .3s ease}
  .hdr-mob-group.open .hdr-mob-accbtn svg{transform:rotate(180deg)}

  .hdr-mob-sub{
    overflow:hidden;max-height:0;opacity:0;transform:translateY(-4px);
    transition:max-height .38s ease,opacity .26s ease,transform .3s ease;
  }
  .hdr-mob-group.open .hdr-mob-sub{max-height:360px;opacity:1;transform:none}
  .hdr-mob-subit{
    display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;
    transition:background .2s ease;
  }
  .hdr-mob-subit:hover,.hdr-mob-subit:active{background:#efefec}
  .hdr-mob-subtx{display:flex;flex-direction:column;gap:1px;min-width:0}
  .hdr-mob-subtx b{font-size:15.5px;font-weight:500;color:var(--ink)}
  .hdr-mob-subtx i{font-style:normal;font-size:12.5px;color:var(--gray)}

  .hdr-mob-foot{flex:none;margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:16px}
  .hdr-mob-row{display:flex;align-items:center;gap:10px}
  .hdr-mob-row .pill{height:47px;padding:0 16px;border-radius:10px;font-size:15px}
  /* «Войти в кабинет» занимает основную ширину ряда, EN — компактный (флаг + код) */
  .hdr-mob-row .hdr-mob-login{flex:1 1 auto;min-width:0}
  .hdr-mob-row .hdr-mob-lang{flex:0 0 auto;padding:0 13px}
  .hdr-mob-lang{gap:8px}
  .hdr-mob-lang svg{flex:none}
  /* единый ТГ-квадрат (r30): белый, волосок, радиус как у соседних кнопок;
     самолётик чёрный ~20px. r34 п.2: viewBox="4.45 5.12 15 15" центрирует глиф
     ОПТИЧЕСКИ (окно между bbox-центром 11.05 и центроидом 12.90 — нос тяжелее
     хвоста), простое bbox-центрирование выглядело смещённым вправо ~1-1.5px */
  .hdr-mob-tg{
    flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:47px;height:47px;border-radius:10px;
    background:#fff;border:.5px solid #e0e0de;
    transition:transform .35s var(--spring),background .2s ease;
  }
  .hdr-mob-tg:hover,.hdr-mob-tg:active{transform:scale(1.05);background:#f7f7f5}
  .hdr-mob-tg svg{display:block;flex:none}
  .hdr-mob-tg svg path{fill:#161515}
  .hdr-mob-cta{width:100%;height:50px;border-radius:12px;font-size:15.5px}
}
/* r35 п.2 (<=767): CTA «Получить доступ» в шапке — СРАЗУ конечный компактный
   размер (32px), одинаковый на всех мобильных ширинах. Клиент видел кнопку
   «большой при загрузке, уменьшается при скролле»: изначальный размер r34
   был задан крупнее (36px на 561-767), плюс transform-скейлы .pill
   (hover 1.03 / active .98 — на таче липнут при скролл-драге с кнопки).
   Убрано и то и другое: один размер на весь диапазон ≤767, transform
   зафиксирован. .hdr.scrolled размеры не трогает (только фон/тень) —
   проверено: при скролле кнопка не меняется. Бургер ужат до тех же 32px
   (рамка 9px, как у кнопки — единый ряд, r34). */
@media(max-width:767px){
  .hdr-right{gap:7px}
  .hdr-right .pill--sm{height:32px;padding:0 13px;border-radius:9px;font-size:13px}
  .hdr-right .pill--sm:hover,.hdr-right .pill--sm:active{transform:none}
  .hdr-burger{
    width:32px;height:32px;flex:none;border-radius:9px;
    border:1px solid #d9d9d6;background:#fff;
    transition:background .2s ease;
  }
  .hdr-burger:hover,.hdr-burger:active{background:#f7f7f5}
  /* отсчёт линий — от padding-box (рамка 1px уже вычтена): глиф 12x12, центр 14 = центр 30px */
  .hdr-burger span{left:9px;right:9px}
  .hdr-burger span:nth-child(1){top:9px}
  .hdr-burger span:nth-child(2){top:14px}
  .hdr-burger span:nth-child(3){top:19px}
  .hdr-burger.open span:nth-child(1){top:14px}
  .hdr-burger.open span:nth-child(3){top:14px}
}
@media(max-width:560px){
  .hdr-login{display:none}
  .hdr-logo-img{height:16px}
  .hdr-in{gap:8px;height:60px}
  .hdr-right{gap:6px}
}

/* ================= hero ================= */
/* вертикаль первого экрана течёт от высоты окна (r30 п.3): при vh>=1000px все
   clamp() упираются в прежние максимумы — большие экраны выглядят как раньше */
.hero{position:relative;padding:clamp(84px,10.8vh,108px) 0 0;overflow:hidden}

/* --- shimmering video backdrop (from v1) --- */
.hero-bg{
  position:absolute;top:-90px;left:0;width:100%;height:887px;z-index:0;
  pointer-events:none;overflow:hidden;
}
.hero-bg video{width:100%;height:100%;object-fit:fill}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(250,250,250,.25) 0%, rgba(250,250,250,.06) 40%, #fafafa 96%);
}

.hero-in{position:relative;z-index:2}
.hero-top{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.4vh,14px);text-align:center}
/* киккер рукописный (r30 п.10): Caveat, цвет hand-подписей #9a9a94 */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--hand);font-size:23px;font-weight:500;line-height:1.15;
  color:#9a9a94;letter-spacing:0;
}
/* лёгкий наклон переживает data-rev (.on ставит transform:none слабее этого) */
.hero-eyebrow.hand{transform:rotate(-2deg)}

.hero-title{
  /* второй clamp — потолок от высоты окна; при vh>=1000px он равен 62px и не влияет */
  font-size:min(clamp(38px,4.9vw,62px),clamp(44px,6.2vh,62px));
  font-weight:500;letter-spacing:-.035em;line-height:1.05;
}
/* --- rotator (port of v1) --- */
.rotator{
  position:relative;display:inline-flex;height:1.24em;width:100%;vertical-align:top;overflow:visible;
}
.rotator__word{
  position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);
  width:max-content;display:flex;align-items:center;
  white-space:nowrap;opacity:0;filter:blur(18px);letter-spacing:-.02em;
  background:linear-gradient(93.89deg,#83DA4E 53.61%,#21A038 74.08%,#54ACB8 96.76%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  will-change:transform,opacity,filter;backface-visibility:hidden;
}
.rotator__word.is-active{opacity:1;filter:blur(0)}

.hero .cta-row{margin-top:8px}
.hero .cta-row .pill--lg{padding:13px 24px;font-size:15.5px}
.hero-stats{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(8px,1.4vh,14px);
}
.hero-stat{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#6f6f6f}
.hero-stat-dot{width:3px;height:3px;border-radius:50%;background:#c4c4c1}

/* --- dashboard mockup 1:1 (v1 screenshot + live gradient card) --- */
.hero-bot{position:relative;z-index:2;margin-top:clamp(20px,4.4vh,44px);max-width:920px;margin-left:auto;margin-right:auto}
.hero-dash{
  display:block;width:100%;height:auto;border-radius:14px;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.35) 92%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.35) 92%,transparent 100%);
}
.hero-bot>.card-grad{
  width:27.7%;max-width:256px;aspect-ratio:312/174;border-radius:12px;
  position:absolute;top:13%;left:22.5%;
  display:flex;align-items:center;padding:13px;
}
.card-chip{max-width:34px;position:absolute;top:45%;left:80%;transform:translate(-50%,-50%);mix-blend-mode:overlay}
.card-dann{display:flex;flex-wrap:wrap;max-width:140px;gap:8px 9px;margin-bottom:14px}
.card__dann-1,.card__dann-2,.card__dann-3{
  height:18px;opacity:.2;mix-blend-mode:soft-light;border-radius:30px;
  background:linear-gradient(90deg,#383838 0%,#272727 100%);
}
.card__dann-1{width:138px}
.card__dann-2{width:50px}
.card__dann-3{width:53px}
.card-master{max-width:26px;position:absolute;bottom:10%;right:7%}

/* cursor chips near the mockup */
.hero-chip{position:absolute;z-index:3}
/* chaotic spread: three cursors, different sides and heights */
.hero-chip--lead{left:-46px;top:7%;animation:hero-drift 9s ease-in-out infinite}
.hero-chip--buyer{right:-54px;top:41%;animation:hero-drift 11s ease-in-out infinite reverse}
.hero-chip--fin{left:11%;bottom:-16px;animation:hero-drift 10s ease-in-out infinite reverse}

/* mobile dashik hidden on desktop */
.dashik{display:none}

/* ================= trust: caption + full facepile ================= */
.trust{
  max-width:920px;margin:52px auto 0;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  position:relative;z-index:3;
}
/* r32: подпись заметнее — клиент «терял» её на ноутбучных высотах */
.trust-cap{font-size:15px;font-weight:500;color:#6f6f6d;letter-spacing:.02em}
.trust-pile{display:flex;align-items:center;justify-content:center}
.trust-face{
  position:relative;width:46px;height:46px;border-radius:50%;flex:none;
  border:2.5px solid #fdfdfc;background:#fff;overflow:hidden;
  margin-left:-13px;
  transition:transform .35s var(--spring);
}
.trust-face:first-child{margin-left:0}
.trust-face img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .25s ease}
.trust-face:hover{transform:translateY(-5px) scale(1.14);z-index:30 !important}
.trust-face:hover img{filter:none}

@keyframes hero-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,10px)}}

/* ================= mobile dashik (ported 1:1 from v1) ================= */
@media(max-width:767px){
  .hero{padding-top:104px}
  .hero-bg{height:772px}
  .hero-bg video{min-height:772px}
  /* r35 п.1: флип r34 (scaleY(-1)) убран — клиент: перелив «кривой, вывернут
     в другую сторону» (зеркальный градиент читался неестественно). Кадр теперь
     ровно как на ПК: object-fit:fill на всю ширину, БЕЗ transform — то же
     направление и та же центровка градиента (семплирование кадра по сетке 6x4:
     цвет живёт в боковых колонках и НИЖНИХ УГЛАХ — sat .34-.37, центр кадра
     белый ВЕЗДЕ, в т.ч. низ-центр .01; т.е. композиция ПК — светлый центр за
     контентом + зелёные ауры по кромкам, к низу ярче). Расширять кадр нельзя:
     центральный срез бесцветен, перелив пропадает целиком. Оставлены только
     компенсации сжатия 1920->375: saturate(1.5) и ::after мягче ПК (.1/.04;
     нижний стоп #fafafa 96% сохранён — стык с фоном страницы как был). */
  .hero-bg video{filter:saturate(1.5)}
  .hero-bg::after{background:linear-gradient(to bottom, rgba(250,250,250,.1) 0%, rgba(250,250,250,.04) 45%, #fafafa 96%)}
  .hero-title{font-size:clamp(30px,8.6vw,36px)}
  .hero-eyebrow{font-size:20px}
  .hero-bot{margin-top:40px}
  .hero-dash{display:none}
  .hero-bot>.card-grad{display:none}
  .hero-chip--lead{display:none}
  .hero-chip--buyer{display:none}
  .hero-chip--fin{display:none}
  .hero .cta-row .pill--lg:not(.pill--dark){display:none}
  .hero-stat-dot{display:none}
  .trust{margin-top:28px}
  .trust-face{width:34px;height:34px;margin-left:-10px}

  .dashik{
    display:flex;flex-direction:column;width:100%;
    border:1px solid rgba(236,236,236,1);border-radius:8px;background:#fff;
  }
  .dashik-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:var(--border-main)}
  .dashik-n{display:flex;align-items:center;justify-content:center;height:32px;width:32px;border-radius:100px;background:var(--background-subtle);color:#a1a1a1;font-size:13px;flex:none}
  /* r31 п.27: ава слева, справа две строки — имя тёмным 14/500, должность серым 12 (как в ЛК) */
  .dashik-user{display:flex;align-items:center;gap:10px;min-width:0}
  .dashik-user-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
  .dashik-user-tx span{font-size:14px;font-weight:500;line-height:1.15;color:#161515}
  .dashik-user-tx p{font-size:12px;line-height:1.15;color:var(--text-subtitle)}
  /* r34 п.4: «Баланс» и сумма сближены по вертикали (был gap:6px + line-height 1.5) */
  .dashik-top-bal{display:flex;flex-direction:column;gap:2px}
  .dashik-top-bal span{font-size:12px;color:#a1a1a1;line-height:1.2}
  .dashik-top-bal p{font-size:12px;line-height:1.2}
  .dashik-m{display:flex}
  /* r35 п.3: у .dashik-c был height:100% — в flex-ряду с auto-высотой процент
     не резолвится (сброс в auto), ячейка оставалась по контенту 122px при ряде
     137px (правая колонка выше), и её border-right обрывался на уровне
     «11.67% Деклайн рейт». height убран — явная высота больше не блокирует
     align-items:stretch ряда, ячейка тянется на все 137px, и вертикальный
     волосок доходит до горизонтальной линии, где начинается «Спенд». */
  .dashik-c{padding:12px 16px;display:flex;align-items:center;justify-content:center;width:50%;border-right:var(--border-main)}
  .dashik-c .card-grad{display:block;position:relative;width:100%;height:100%;min-width:160px;max-width:180px;min-height:98px;max-height:98px;left:auto;transform:none;border-radius:7px;padding:12px}
  .dashik-c .card-chip{max-width:23px}
  .dashik-c .card__dann-1{width:92px;height:12px;border-radius:15px}
  .dashik-c .card__dann-2{width:33px;height:12px;border-radius:15px}
  .dashik-c .card__dann-3{width:35px;height:12px;border-radius:15px}
  .dashik-c .card-dann{max-width:92px;gap:8px;margin-bottom:0;margin-top:12px}
  .dashik-c .card-master{max-width:18px}
  .dashik__c-r{display:flex;flex-direction:column;width:50%}
  /* тот же паттерн height:100% заменён на flex:1 — ячейки правой колонки
     всегда делят её высоту, граница под «Операций» не повисает в воздухе */
  .dashik__c-r--op{padding:12px 16px;display:flex;flex-direction:column;gap:4px;justify-content:center;flex:1 1 auto;border-bottom:var(--border-main)}
  .dashik__c-r--op span{font-weight:500;font-size:16px}
  .dashik__c-r--op p{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-subtitle)}
  .dashik__c-r--dec{padding:12px 16px;display:flex;flex-direction:column;justify-content:center;flex:1 1 auto}
  .dashik__c-r--dec span{font-weight:500;font-size:16px}
  .dashik__c-r--dec p{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-subtitle)}
  .dashik-spend{display:flex;align-items:center;padding:12px 16px;border-top:var(--border-main);gap:4px;justify-content:space-between;padding-right:0}
  .dashik__spend-l{display:flex;flex-direction:column;gap:8px}
  .dashik__spend-l span{font-size:16px;font-weight:500}
  .dashik__spend-l p{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-subtitle)}
  .dashik-buyer{padding:16px;display:flex;border-top:var(--border-main);justify-content:space-between;border-bottom:var(--border-main)}
  .dashik__buyer-av{display:flex;align-items:center;gap:6px}
  .dashik__buyer-av img{max-width:24px}
  .dashik__buyer-av span{font-size:12px;font-weight:400}
  .dashik__buyer-ca{display:flex;align-items:center;gap:4px}
  .dashik__buyer-ca span{font-size:12px}
  .dashik__buyer-mon{display:flex;flex-direction:column;gap:8px;max-width:144px;width:100%}
  .buyer__mon-t span{font-size:10px}
  .buyer__mon-t{display:flex;align-items:center;justify-content:space-between}
  .buyer__mon-b{width:100%;height:2px;border-radius:32px;background:rgba(236,236,236,1);position:relative}
  .mon__b-line{width:31%;background:rgba(0,201,81,1);height:2px;position:absolute;left:0;top:0}
  .dashik-action{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:var(--border-main)}
  .dashik-action:last-child{border-bottom:0}
  .dashik__action-l{display:flex;align-items:center;gap:8px}
  .dashik__action-l img{max-width:24px}
  .action-col{display:flex;flex-direction:column;gap:3px}
  .action-col span{font-size:12px}
  .action-col p{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-subtitle)}
  .dashik__action-r{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
  .dashik__action-r span{font-size:12px}
  .dashik__action-r p{color:var(--text-subtitle);font-size:10px}
}
@media(min-width:768px) and (max-width:991px){
  .hero{padding-top:130px}
}


/* ================= r32b: вертикальное центрирование первого экрана =================
   Клиент: под «Нас рекомендуют» оставалась пустота — контент хиро прижат кверху.
   Делаем: хиро растягивается на весь вьюпорт (100vh/.9 — компенсация body zoom:.9)
   и контент центрируется между низом фиксированной шапки (padding-top:--hdrh)
   и нижним краем экрана — отступы сверху/снизу равны автоматически.
   Только десктоп >=992px; на невысоких окнах min-height отпускает поток. */
/* r43: центрирование хиро по вьюпорту УБРАНО (клиент: отступ от хедера не
   должен зависеть от масштаба/высоты монитора). Обычный поток: фиксированный
   отступ сверху от шапки, фиксированный снизу — на больших экранах ниже сразу
   виден следующий блок. Низкие окна (<784px) обслуживают старые ступени. */
@media (min-width:992px){
  .hero{
    box-sizing:border-box;
    min-height:0;
    display:block;
    padding:104px 0 24px;
  }
}


/* ============ feats ============ */
/* ============================================================
   s-feats — функционал: Карты / Счета / Команда
   текст фич живёт ВНУТРИ карточек: мокап сверху,
   снизу белая градиент-подложка с h3 + p
   ============================================================ */
.s-feats{padding-top:88px}
.s-feats [id]{scroll-margin-top:96px}
.s-feats .sec-head{margin-bottom:44px}

.s-feats-group{position:relative}
.s-feats-group + .s-feats-group{margin-top:128px}

/* якорь instdep */
.s-feats-jump{display:block;height:0}

/* ---------- подпись внутри карточки (градиент-подложка снизу) ---------- */
.s-feats-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:58px 26px 22px;
  background:linear-gradient(to top,#fff 55%,rgba(255,255,255,0));
}
.s-feats-cap h3{font-size:23px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.s-feats-cap p{color:var(--gray);font-size:15px;max-width:60ch}

/* ---------- раскладки ---------- */
.s-feats-row{display:grid;gap:24px;margin-top:24px}
.s-feats-row--3{grid-template-columns:repeat(3,1fr)}
.s-feats-row--2{grid-template-columns:repeat(2,1fr)}
.s-feats-duo{grid-template-columns:1.618fr 1fr;margin-top:0}

/* ---------- сцена (белая карточка, мокап + текст внутри) ---------- */
.s-feats-scene{
  position:relative;overflow:hidden;
}
.s-feats-scene--inst{height:516px}
.s-feats-scene--sm{height:356px}
.s-feats-scene--dep{height:464px}
.s-feats-scene--spend{height:524px}

/* ---------- панель-экран из кабинета ---------- */
.s-feats-panel{
  position:absolute;z-index:2;background:#fff;
  border:.5px solid #e0e0de;border-radius:14px;box-shadow:var(--sh-card);
  transition:transform .5s var(--spring);
}
.s-feats-phead{display:flex;align-items:center;gap:10px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid #f1f1ef}
.s-feats-phead b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.s-feats-phead .s-feats-cnt{margin-left:auto}
.s-feats-dots{display:inline-flex;gap:4px}
.s-feats-dots i{width:7px;height:7px;border-radius:50%;background:#e4e4e1}

.s-feats-lbl{display:block;font-size:11px;color:var(--gray);margin:10px 0 5px}
.s-feats-lbl--0{margin:0}
.s-feats-panel > .s-feats-lbl:first-child{margin-top:0}
.s-feats-cnt{font-size:10.5px;color:var(--gray);border:1px solid var(--line);border-radius:7px;padding:3px 9px;white-space:nowrap}

.s-feats-field{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border:.5px solid #e0e0de;border-radius:9px;font-size:13px;background:#fff;
}
.s-feats-field b{font-weight:600}
.s-feats-frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.s-feats-btn{
  margin-top:14px;padding:10px 12px;border-radius:10px;
  background:var(--green);color:#fff;font-size:13px;font-weight:600;
  text-align:center;letter-spacing:.01em;
}

/* строка «карта · сумма» */
.s-feats-line{display:flex;justify-content:space-between;gap:10px;padding:7.5px 0;border-top:1px solid #f1f1ef;font-size:12px;color:var(--gray)}
.s-feats-line em{font-style:normal;font-weight:500;color:var(--ink)}


/* live-бейдж */
.s-feats-live{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;background:var(--green-soft);color:var(--green-ink);font-size:10.5px;font-weight:500}
.s-feats-live i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:feats-blink 2.6s ease-in-out infinite}

/* прогресс-бар лимитов */
.s-feats-bar{height:5px;border-radius:99px;background:#efefec;overflow:hidden}
.s-feats-bar i{display:block;height:100%;border-radius:99px;background:var(--green)}
.s-feats-bar--run i{animation:feats-bar 5s ease-in-out infinite}

/* инлайн-иконки брендов (MC/Visa/FB/TikTok/G/USDT) */
.s-feats-brand{vertical-align:-.18em;flex:none}


.s-feats-brand--tx{vertical-align:-4px;margin-right:5px}


/* ============================================================
   ГРУППА 1 · сцена «мгновенный выпуск»
   ============================================================ */
.s-feats-modal{left:46px;top:calc(50% - 44px);width:332px;padding:18px 18px 20px;transform:translateY(-50%) rotate(-4deg);z-index:3}

/* r30 (п.21/клиент): hover-сдвиг модалки выпуска убран — панель статична */


/* ============================================================
   ГРУППА 1 · малые сцены
   ============================================================ */
/* общий баланс */


.s-feats-bal-top{display:flex;align-items:center;justify-content:space-between;gap:8px}


/* пикер BIN */


/* лимиты */


/* ============================================================
   компактные карточки-фичи (мокап-зона сверху, текст снизу)
   ============================================================ */
.s-feats-mini{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  height:344px;padding:0;
}
.s-feats-mini-vis{
  flex:1;min-height:0;width:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:24px 26px 96px;
}









/* ============================================================
   ГРУППА 2 · сцены «пополнение» и «счета»
   ============================================================ */


/* счета */


/* ============================================================
   ГРУППА 3 · сцена «спенд по юзерам»
   ============================================================ */






















/* ============================================================
   виньетки мини-фич — живые луп-сцены (pass/logs/access/perev)
   ============================================================ */


/* ---------- передача карт: карта едет от B11 к B7 и обратно ---------- */


/* ---------- логи: журнал с печатью новой строки ---------- */


/* ---------- доступы: тумблер сам выдаёт и забирает доступ ---------- */


/* ---------- переводы: чип $2,000 едет, балансы меняются ---------- */


/* ============================================================
   keyframes (общие)
   ============================================================ */
@keyframes feats-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes feats-bar{0%,100%{width:31%}50%{width:37%}}


@keyframes feats-newrow{0%,100%{background:rgba(31,178,90,0)}50%{background:rgba(31,178,90,.09)}}

/* ============================================================
   адаптив
   ============================================================ */
@media(max-width:1240px){
  .s-feats-modal{left:32px}
  
  
}

@media(max-width:991px){
  .s-feats{padding-top:56px}
  .s-feats-group + .s-feats-group{margin-top:88px}
  .s-feats-row{gap:18px;margin-top:18px}
  .s-feats-row--3,.s-feats-duo{grid-template-columns:1fr}
  .s-feats-duo{gap:18px}
  .s-feats-cap{padding:50px 22px 20px}

  .s-feats-scene--inst{height:484px}
  .s-feats-modal{left:24px;width:302px;z-index:3}
  
  
  
  
  
  
  
  

  .s-feats-scene--sm{height:340px}
  .s-feats-scene--dep{height:444px}
  
  
  
  

  .s-feats-scene--spend{height:auto;min-height:0;display:flex;flex-direction:column;padding:22px 18px 0}
  
  
  
  
  .s-feats-scene--spend .s-feats-cap{position:relative;bottom:auto;margin:-42px -18px 0}

  .s-feats-mini{height:330px}
  .s-feats-mini-vis{padding:20px 22px 88px}
}

@media(max-width:767px){
  .s-feats-group + .s-feats-group{margin-top:64px}
  .s-feats-row--2{grid-template-columns:1fr}
  .s-feats-row{gap:16px;margin-top:16px}
  .s-feats-cap{padding:44px 18px 18px}
  .s-feats-cap h3{font-size:21px}

  /* выпуск: модалка + веер столбиком, текст в потоке с градиент-наездом;
     r30 (п.21): hover/tap-сдвиг модалки убран */
  .s-feats-scene--inst{height:auto;padding:20px 16px 0}
  .s-feats-modal{position:relative;left:auto;top:auto;width:100%;max-width:340px;margin:0 auto;transform:rotate(-1.6deg)}
  
  
  
  
  
  
  .s-feats-scene--inst .s-feats-cap{position:relative;bottom:auto;margin:-34px -16px 0}

  .s-feats-scene--sm{height:324px}
  

  /* пополнение / счета столбиком */
  .s-feats-scene--dep{height:auto;padding:20px 16px 0}
  
  
  
  
  
  
  
  .s-feats-scene--dep .s-feats-cap{position:relative;bottom:auto;margin:-28px -16px 0}

  /* спенд: узкая таблица */
  .s-feats-scene--spend{padding:18px 14px 0}
  
  
  
  
  
  .s-feats-scene--spend .s-feats-cap{margin:-36px -14px 0}

  .s-feats-mini{height:318px}
  .s-feats-mini-vis{padding:18px 18px 82px}
  
  
  
  
  
  
  
  
  
  
  
}

/* ============ R15 mockups ============ */

/* ---- r15:balance ---- */
/* ============================================================
   s-fb — «Общий баланс» (r15): плашка счёта + привязанные карты
   сцена .s-feats-scene--sm, высота не трогаем
   ============================================================ */
.s-fb-stage{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding-top:28px;
  transform:rotate(-2deg);
  transition:transform .5s var(--spring);
}
/* r30 (п.21): hover-отклики — только на устройствах с курсором и ≥768 */
@media(hover:hover) and (min-width:768px){
  .s-feats-scene--sm:hover .s-fb-stage{transform:rotate(-.8deg)}
}

/* плашка счёта (переиспользует .s-feats-panel, но в потоке) */
.s-fb-acc{
  position:relative;z-index:2;
  width:min(82%,268px);padding:15px 17px 14px;
  border-radius:13px;
  box-shadow:0 18px 40px -18px rgba(22,21,21,.18);
}
.s-fb-acc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.s-fb-acc-ic{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;background:var(--green-soft);
}
.s-fb-sum{display:block;font-size:27px;font-weight:600;letter-spacing:-.02em;margin:5px 0 3px}
.s-fb-meta{display:block;font-size:11px;color:var(--gray)}

/* связка «скобка + подпись» */
.s-fb-link{position:relative;margin-top:-1px;line-height:0}
.s-fb-brace{display:block}
.s-fb-tag{
  position:absolute;left:50%;top:12px;transform:translateX(-50%);
  line-height:normal;white-space:nowrap;
  font-size:10.5px;font-weight:500;color:var(--gray);
  background:#fff;border:.5px solid #e0e0de;border-radius:7px;padding:3px 10px;
  box-shadow:0 8px 16px -12px rgba(22,21,21,.22);
}

/* ряд мини-карт */
.s-fb-row{display:flex;margin-top:-5px}
.s-fb-mini{
  position:relative;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:22px;border-radius:5px;
  background:#fff;border:.5px solid #e0e0de;
  box-shadow:0 6px 14px -9px rgba(22,21,21,.28);
  transition:transform .45s var(--spring);
}
.s-fb-mini + .s-fb-mini{margin-left:-5px}
.s-fb-mini svg{display:block;flex:none}

/* живость: лёгкие повороты вперемешку */
.s-fb-mini:nth-child(1){transform:rotate(-6deg) translateY(1px)}
.s-fb-mini:nth-child(2){transform:rotate(4deg) translateY(-2px)}
.s-fb-mini:nth-child(3){transform:rotate(-3deg) translateY(2px)}
.s-fb-mini:nth-child(4){transform:rotate(5deg) translateY(-1px)}
.s-fb-mini:nth-child(5){transform:rotate(-4deg) translateY(1px)}
.s-fb-mini:nth-child(6){transform:rotate(3deg) translateY(-2px)}
.s-fb-mini:nth-child(7){transform:rotate(-6deg) translateY(2px)}

/* hover: карты чуть расходятся веером (только внутренние панели, п.7 брифа);
   r30 (п.21): только hover-устройства ≥768 — на мобилке мокап статичен */
@media(hover:hover) and (min-width:768px){
  .s-feats-scene--sm:hover .s-fb-mini:nth-child(1){transform:rotate(-9deg) translate(-3px,0)}
  .s-feats-scene--sm:hover .s-fb-mini:nth-child(2){transform:rotate(6deg) translate(-2px,-3px)}
  .s-feats-scene--sm:hover .s-fb-mini:nth-child(3){transform:rotate(-5deg) translate(-1px,2px)}
  .s-feats-scene--sm:hover .s-fb-mini:nth-child(4){transform:rotate(8deg) translateY(-2px)}
  .s-feats-scene--sm:hover .s-fb-mini:nth-child(5){transform:rotate(-6deg) translate(1px,2px)}
  .s-feats-scene--sm:hover .s-fb-mini:nth-child(6){transform:rotate(5deg) translate(2px,-3px)}
  .s-feats-scene--sm:hover .s-fb-mini:nth-child(7){transform:rotate(-8deg) translate(3px,1px)}
}

@media(max-width:991px){
  .s-fb-stage{padding-top:22px}
}

@media(max-width:767px){
  .s-fb-stage{padding-top:16px}
  .s-fb-acc{width:min(84%,260px);padding:13px 15px 12px}
  .s-fb-sum{font-size:25px}
}

/* ---- r15:bins ---- */
/* ============================================================
   s-fbin — мокап «10+ бинов» (r15)
   панель выбора BIN: официальные лого MC/Visa, 4 строки
   формат «443029 · Visa · Debit · US», выбранная — Visa 44xxxx
   ============================================================ */
.s-fbin-ghost{width:62%;height:52%;left:9%;top:9%;transform:rotate(-5deg);opacity:.75;z-index:1}
.s-fbin-panel{left:50%;top:22px;width:min(88%,302px);padding:15px 15px 13px;transform:translateX(-48%) rotate(3deg);z-index:2}
.s-fbin-top{display:flex;align-items:center;justify-content:space-between;gap:8px}

.s-fbin-row{
  display:flex;align-items:center;gap:8px;margin-top:7px;
  padding:8.5px 10px;border:.5px solid #e0e0de;border-radius:10px;
  font-size:12px;color:var(--gray);white-space:nowrap;
}
.s-fbin-top + .s-fbin-row{margin-top:12px}
/* r30 (п.20): выбор бина БЕЗ зелёного — строка как все, отмечает выбор
   только чисто чёрная галочка (#161515, stroke в svg разметки);
   зелёные hover/фон/рамка/подсветка убраны */
.s-fbin-row--dim{opacity:.55}

.s-fbin-logo{flex:none;width:34px;display:inline-flex;align-items:center;justify-content:center}
.s-fbin-logo svg{display:block;flex:none}
.s-fbin-row b{font-weight:600;font-size:13px;color:var(--ink)}
.s-fbin-meta{flex:1;min-width:0;font-size:11px;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis}
.s-fbin-check{margin-left:auto;flex:none}

/* r30 (п.21): hover-сдвиги — только hover-устройства ≥768 */
@media(hover:hover) and (min-width:768px){
  .s-feats-scene--sm:hover .s-fbin-panel{transform:translateX(-48%) rotate(1.4deg)}
  .s-feats-scene--sm:hover .s-fbin-ghost{transform:rotate(-7deg) translateY(-4px)}
}

@media(max-width:991px){
  .s-fbin-panel{top:20px}
}

@media(max-width:767px){
  .s-fbin-panel{top:14px;width:min(94%,302px);padding:13px 13px 11px}
  .s-fbin-row{padding:7.5px 9px}
  .s-fbin-top + .s-fbin-row{margin-top:10px}
}

/* ---- r15:limits ---- */
/* ============================================================
   s-fl — «Лимиты»: карта с переворотом (лицо → лимиты на обороте)
   сцена: .s-feats-scene--sm (356px) — высоту не трогаем
   ============================================================ */

/* сцена: вертикальный стек «карта + подсказка», низ отдан .s-feats-cap */
.s-fl-stage{
  position:absolute;left:0;right:0;top:20px;bottom:96px;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;
}

/* 3d-контейнер: перспектива + фирменный лёгкий наклон */
.s-fl-flip{
  width:230px;height:145px;flex:none;
  perspective:900px;-webkit-perspective:900px;
  transform:rotate(-2.5deg);
  transition:transform .5s var(--spring);
}
@media(hover:hover) and (min-width:768px){
  .s-feats-scene--sm:hover .s-fl-flip{transform:rotate(-1deg)}
}

/* сама карта: rotateY пишет JS (interval-движок), тут только 3d-контекст */
.s-fl-card{
  display:block;width:100%;height:100%;position:relative;
  border-radius:14px;cursor:pointer;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
}
.s-fl-card:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* обе стороны */
.s-fl-face,.s-fl-back{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 18px 40px -18px rgba(22,21,21,.18);
}

/* ---------- лицо: фирменный зелёный градиент (r28: возврат с синего),
   r29: в правом нижнем углу — настоящий белый лого Visa (png) ---------- */
.s-fl-face{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:14px 16px 13px;
  background:linear-gradient(135deg,#83DA4E,#21A038 55%,#54ACB8);
  color:#fff;
}
.s-fl-face::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(130% 95% at 18% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 56%);
}
.s-fl-ftop{display:flex;align-items:center;justify-content:space-between;width:100%}
.s-fl-ftop .astro{font-size:13px;color:#fff}
.s-fl-ftop svg{flex:none}
.s-fl-chip{flex:none;margin-top:9px;border-radius:5.5px;box-shadow:0 1px 2px rgba(10,60,25,.25)}
.s-fl-num{display:block;margin-top:7px;font-size:14.5px;font-weight:500;letter-spacing:.14em}
.s-fl-fbot{display:flex;align-items:flex-end;justify-content:space-between;width:100%;margin-top:auto}
.s-fl-type{font-size:9.5px;font-weight:500;letter-spacing:.05em;color:rgba(255,255,255,.82)}
.s-fl-visa{display:block;flex:none;width:47px;height:15px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(10,60,25,.18))}

/* ---------- оборот: белый, магнитка + мини-панель лимитов ---------- */
.s-fl-back{
  background:#fff;border:.5px solid #e0e0de;
  transform:rotateY(180deg);
  display:flex;flex-direction:column;
}
.s-fl-mag{
  display:block;flex:none;height:21px;margin-top:13px;
  background:linear-gradient(90deg,#343431,#232322 55%,#3a3a37);
}
.s-fl-lims{display:flex;flex-direction:column;flex:1;min-height:0;padding:9px 14px 8px;text-align:left}
.s-fl-lrow{display:block;padding-top:6px}
.s-fl-lrow:first-child{padding-top:0}
.s-fl-ltop{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11px;margin-bottom:4px}
.s-fl-ltop em{font-style:normal;font-weight:500;color:var(--ink)}
.s-fl-ltop span{color:var(--gray);white-space:nowrap}
.s-fl-ltop span b{font-weight:600;color:var(--ink)}
.s-fl-bar{display:block;width:100%}
.s-fl-bar--hot i{background:#E8A23D}
.s-fl-rest{display:block;margin-top:auto;padding-top:5px;font-size:10.5px;color:var(--gray)}

/* ---------- постоянная подсказка под картой ---------- */
.s-fl-hint{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border:1px solid var(--line);border-radius:7px;background:#fff;
  font-size:12.5px;color:var(--gray);white-space:nowrap;
}
.s-fl-hint svg{flex:none;color:#fff}

/* ---------- адаптив ---------- */
@media(max-width:991px){
  /* сцена 340px — тот же стек, чуть плотнее */
  .s-fl-stage{top:16px;gap:13px}
}

@media(max-width:767px){
  /* сцена 324px — карта чуть меньше */
  .s-fl-stage{top:14px;gap:12px}
  .s-fl-flip{width:210px;height:132px}
  /* r34 (п.6): авто-переворот на мобилке ВЫКЛЮЧЕН — флип ТОЛЬКО по тапу
     (движок r34:limits в r34/featsmob.js, замена r30:limits); плашка
     «нажмите на карту — лимиты на обороте» снова видна (базовые правила
     .s-fl-hint), карта снова ловит тапы (pointer-events не глушим) */
  .s-fl-face{padding:12px 14px 11px}
  .s-fl-ftop .astro{font-size:12px}
  .s-fl-chip{width:27px;height:21px;margin-top:7px}
  .s-fl-num{font-size:13.5px;margin-top:6px}
  .s-fl-visa{width:41px;height:13px}
  .s-fl-mag{height:19px;margin-top:11px}
  .s-fl-lims{padding:8px 12px 7px}
  .s-fl-ltop{font-size:10.5px}
  .s-fl-rest{font-size:10px}
  .s-fl-hint{font-size:12px;padding:6px 11px}
}

/* ============ R16 mockups ============ */

/* ---- r16:logs ---- */
/* ============================================================
   s-flg — «Логи действий»: мини-карта + кнопки действий + журнал.
   Курсор баера (JS) жмёт кнопки под картой — статус на карте
   меняется, событие въезжает строкой в журнал.
   Живёт внутри .s-feats-mini #logs, высоту сцены не трогаем.
   ============================================================ */
.s-flg-vig{position:relative;width:100%;height:180px}

/* ---------- мини-карта ---------- */
.s-flg-card{
  position:absolute;left:2px;top:0;z-index:2;
  width:178px;padding:11px 13px;border-radius:10px;
  background:#fff;border:.5px solid #e0e0de;
  box-shadow:0 18px 40px -18px rgba(22,21,21,.18);
  transform:rotate(-3deg);
  transition:transform .5s var(--spring);
}
.s-flg-ctop{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.s-flg-ctop .astro{font-size:10px;color:#6f6f6d;letter-spacing:.04em}
.s-flg-mc{display:block;flex:none}
.s-flg-name{display:block;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px;will-change:opacity,transform}
.s-flg-cbot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.s-flg-num{font-size:12.5px;font-weight:500;letter-spacing:.08em;color:var(--ink)}

/* статус-бейдж: пастельные фоны, волосяные рамки */
.s-flg-st{
  flex:none;display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:7px;
  font-size:11px;font-weight:500;line-height:1.35;white-space:nowrap;
}
.s-flg-st--active{background:#DCF4E3;color:#2FA060}
.s-flg-st--frozen{background:#E3EFFC;color:#3B82E0}
.s-flg-st--passed{background:#EFEFED;color:#6F6F6D}
.s-flg-st--closed{background:#FBDDDD;color:#E5484D}

/* ---------- кнопки действий под картой ---------- */
.s-flg-acts{
  position:absolute;left:10px;top:102px;z-index:2;
  display:flex;gap:8px;transform:rotate(-2deg);
  transition:transform .5s var(--spring);
}
.s-flg-abtn{
  width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  border:0;box-shadow:0 10px 22px -16px rgba(22,21,21,.25);
  transition:none;will-change:transform;
}
/* яркая база как в кабинете: голубая снежинка / зелёная передача / красный крест */
.s-flg-abtn:nth-of-type(1){background:#E3EFFC;color:#3B82E0}
.s-flg-abtn:nth-of-type(2){background:#DCF4E3;color:#2FA060}
.s-flg-abtn:nth-of-type(3){background:#FBDDDD;color:#E5484D}
.s-flg-abtn svg{display:block}

/* ---------- журнал ---------- */
.s-flg-log{
  position:absolute;right:0;top:22px;z-index:1;
  width:min(calc(100% - 168px),320px);
  padding:10px 13px 11px 20px;border-radius:12px;
  background:#fdfdfc;border:.5px solid #e0e0de;
  box-shadow:0 18px 40px -18px rgba(22,21,21,.18);
  transform:rotate(1.4deg);
  transition:transform .5s var(--spring);
}
.s-flg-ltop{display:flex;align-items:center;gap:9px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #f1f1ef}
.s-flg-ltop b{font-size:11.5px;font-weight:600;color:#4a4a48;letter-spacing:.01em}

.s-flg-feed{position:relative;height:92px;overflow:hidden}
.s-flg-row{
  position:absolute;left:0;right:0;top:0;
  display:flex;align-items:center;gap:8px;height:21px;
  padding:0 6px;border-radius:6px;
  font-size:12px;color:#3c3c3e;
}
/* статичная раскладка без JS; при живом цикле transform ставится инлайном */
.s-flg-row:nth-child(1){transform:translateY(0)}
.s-flg-row:nth-child(2){transform:translateY(23px)}
.s-flg-row:nth-child(3){transform:translateY(46px)}
.s-flg-row:nth-child(4){transform:translateY(69px)}
.s-flg-row em{font-style:normal;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:#9a9aa2;flex:none}
.s-flg-row b{font-weight:400;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.s-flg-row i{margin-left:auto;flex:none;font-style:normal;font-size:10.5px;font-weight:500;color:#9a9aa2}

/* ---------- курсор баера (позиция и ник — из JS) ---------- */
.s-flg-cursor{
  position:absolute;left:0;top:0;z-index:9;opacity:0;
  pointer-events:none;will-change:transform,opacity;
}
.s-flg-arrow{display:block;filter:drop-shadow(0 3px 6px rgba(22,21,21,.3))}
.s-flg-cursor .cur-chip{position:absolute;left:13px;top:15px;white-space:nowrap;font-size:12px;padding:4px 10px;will-change:opacity}
.s-flg-cursor .cur-chip::before{display:none}

/* hover: лёгкий сдвиг внутренних панелей (карточка не приподнимается);
   r30 (п.21): только hover-устройства ≥768 */
@media(hover:hover) and (min-width:768px){
  .s-feats-mini:hover .s-flg-card{transform:rotate(-4.4deg) translate(-4px,-2px)}
  .s-feats-mini:hover .s-flg-acts{transform:rotate(-2.8deg) translate(-3px,-1px)}
  .s-feats-mini:hover .s-flg-log{transform:rotate(2.2deg) translate(3px,2px)}
}

/* ---------- адаптив ---------- */
@media(max-width:991px){
  /* карта сверху слева, кнопки под ней, журнал ниже справа */
  .s-flg-vig{height:210px;margin-top:-14px}
  .s-flg-card{left:6px;top:0;width:170px;padding:10px 12px;transform:rotate(-2.5deg)}
  .s-flg-ctop{margin-bottom:8px}
  .s-flg-name{margin-bottom:7px}
  .s-flg-acts{left:12px;top:96px;transform:rotate(-1.5deg)}
  .s-flg-log{
    right:2px;top:88px;width:min(calc(100% - 8px),330px);
    padding:10px 13px 11px;transform:rotate(1deg);
  }
  .s-flg-feed{height:69px} /* 3 видимые строки, четвёртая уезжает под срез */
}
/* r30 (п.21): планшетные hover-сдвиги — только hover-устройства */
@media(hover:hover) and (min-width:768px) and (max-width:991px){
  .s-feats-mini:hover .s-flg-card{transform:rotate(-3.6deg) translate(-3px,-2px)}
  .s-feats-mini:hover .s-flg-acts{transform:rotate(-2.2deg) translate(-2px,-1px)}
  .s-feats-mini:hover .s-flg-log{transform:rotate(1.8deg) translate(2px,2px)}
}

@media(max-width:767px){
  /* r31 (п.23): аккуратная вертикальная композиция БЕЗ наклонов:
     карта сверху слева, ПАНЕЛЬ кнопок действий СПРАВА от неё,
     журнал под ними на ВСЮ ширину. Позиции кнопок движок r29:logs
     меряет из DOM (measure() перед каждым подлётом) — курсор
     попадает по новым местам без правки JS.
     r34 (п.8): карта — ФИКСИРОВАННЫЙ БОКС (шире и чуть выше r31,
     под самый длинный контент: имя «Карта для ФБ», статус
     «заморожена»): width+height жёсткие, flex-колонка (низ прижат
     margin-top:auto), номер nowrap — раньше «•• 9134» переносился
     на 2 строки при длинном статусе и карта прыгала по высоте.
     Данные меняются — габариты статичны. Панель кнопок чуть ужата
     (30px, r31 «крупнее 27» сохранено) и подвинута (right:12) —
     на 360px карта 148 + зазор + панель 119 помещаются в блок */
  .s-flg-vig{height:218px;margin-top:0}
  .s-flg-card{
    left:0;top:0;width:148px;height:88px;padding:9px 11px 10px;
    display:flex;flex-direction:column;transform:none;
    box-shadow:0 14px 30px -20px rgba(22,21,21,.16);
  }
  .s-flg-ctop{margin-bottom:7px}
  .s-flg-name{font-size:12.5px;margin-bottom:0}
  .s-flg-cbot{margin-top:auto;gap:6px}
  .s-flg-num{font-size:11.5px;white-space:nowrap}
  .s-flg-st{font-size:10px;padding:3px 6px}
  .s-flg-acts{
    left:auto;right:12px;top:22px;gap:8px;transform:none;
    padding:6px;border-radius:12px;
    background:#fff;border:.5px solid #e0e0de;
    box-shadow:0 14px 30px -18px rgba(22,21,21,.18);
  }
  .s-flg-abtn{width:30px;height:30px;border-radius:9px}
  .s-flg-abtn svg{width:15px;height:15px}
  .s-flg-log{left:0;right:0;top:98px;width:auto;padding:9px 12px 10px;transform:none}
  .s-flg-row{font-size:11.5px}
  .s-flg-cursor .cur-chip{left:9px;top:12px;font-size:10px;padding:2.5px 7px}
}
@media(max-width:399px){
  /* узкие телефоны (360-399): фиксированный бокс карты 148px не
     трогаем — ужимается только панель кнопок (28px, как раньше было
     ≤359): зазор карта-панель ~13px на 360px вместо 4px */
  .s-flg-acts{top:23px;gap:6px;padding:6px}
  .s-flg-abtn{width:28px;height:28px}
  .s-flg-abtn svg{width:14px;height:14px}
}
@media(max-width:359px){
  /* совсем узко: бокс карты остаётся фиксированным, но уже (номер
     прячем — самый длинный контент теперь статус «заморожена»),
     панель чуть ближе к краю — карта и панель не сталкиваются
     на 320px (вижн 244: 121+4+109+10), чип в блоке */
  .s-flg-card{width:120px}
  .s-flg-num{display:none}
  .s-flg-cbot{justify-content:flex-start}
  .s-flg-acts{right:10px}
}

/* ---- r16:crea ---- */
/* ============================================================
   r16 · crea — «Создание счетов»
   список счетов без брендовых лого: нейтральные аватары-буквы
   на пастельном фоне + бейдж «карточка + число выпущенных карт»
   вместо плашек «Активен/Новый». Курсор «Владелец» жмёт
   «+ Новый счёт» — въезжает четвёртая строка (движок — crea.js,
   тут только раскладка и внешний вид)
   ============================================================ */

/* панель (геометрия — как у прежней s-feats-acc, высоту сцены не трогаем) */
.s-cr-panel{left:50%;top:calc(50% - 48px);width:min(86%,336px);padding:15px 17px;transform:translate(-50%,-50%) rotate(2.5deg)}
@media(hover:hover) and (min-width:768px){
  .s-feats-scene--dep:hover .s-cr-panel{transform:translate(-50%,-50%) rotate(1deg)}
}
.s-cr-sum{font-size:15px;font-weight:600;letter-spacing:-.01em}
.s-cr-count{font-style:normal;display:inline-block;will-change:opacity,transform}

/* строки счетов */
.s-cr-rows{margin-top:11px}
.s-cr-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #f1f1ef;font-size:12.5px}
.s-cr-row > b,.s-cr-in > b{font-weight:500;white-space:nowrap;margin-left:auto}
.s-cr-nm{color:#3f3f3d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* аватар счёта — первая буква на пастельном круге (как юзеры в спендах) */
.s-cr-ava{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;border-radius:50%;
  font-size:10.5px;font-weight:600;font-style:normal;
}
.s-cr-ava--g{background:var(--green-soft);color:var(--green-ink)}
.s-cr-ava--b{background:#edf2fd;color:#3D6FE8}
.s-cr-ava--a{background:#fdf3e2;color:#b0781c}
.s-cr-ava--n{background:#f1f1ef;color:var(--gray)}

/* бейдж «сколько карт выпущено»: иконка карточки (outline, без лого) + число */
.s-cr-cards{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:3px 8px;border:1px solid var(--line);border-radius:7px;
  background:#f7f7f5;color:#5c5c5a;font-size:10.5px;font-weight:500;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.s-cr-cards svg{display:block;flex:none;color:var(--gray)}

/* появляющаяся строка «Новый счёт»: высота/прозрачность пишутся из JS */
.s-cr-row--new{display:block;height:0;opacity:0;overflow:hidden;padding:0;will-change:height,opacity}
.s-cr-row--new .s-cr-in{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12.5px;will-change:transform}

/* кнопка «+ Новый счёт» (прожатие — движок в JS) */
.s-cr-add{
  margin-top:11px;padding:8.5px;border:1.5px dashed #d9d9d6;border-radius:10px;
  text-align:center;font-size:12px;color:var(--gray);
  transition:none;will-change:transform,filter;
}

/* курсор владельца */
.s-cr-cursor{
  position:absolute;left:0;top:0;z-index:9;opacity:0;
  pointer-events:none;will-change:transform,opacity;
}
.s-cr-arrow{display:block;filter:drop-shadow(0 3px 6px rgba(22,21,21,.3))}
.s-cr-cursor .cur-chip{position:absolute;left:14px;top:16px;white-space:nowrap}
.s-cr-cursor .cur-chip::before{display:none}

@media(max-width:991px){
  .s-cr-panel{width:min(88%,336px)}
}

@media(max-width:767px){
  /* r34 (п.9): наклон панели счетов убран — мокап стоит ровно */
  .s-cr-panel{position:relative;left:auto;top:auto;width:100%;max-width:352px;margin:0 auto;transform:none}
  /* r30 (п.21): hover/tap-сдвиг панели на мобилке убран */
  .s-cr-row,.s-cr-row--new .s-cr-in{gap:8px}
  .s-cr-cards{padding:3px 7px}
  .s-cr-cursor{display:none}
  /* r29: панель в потоке — анимация высоты строки «Новый счёт» дёргала
     сцену и двигала соседей. Фиксируем высоту сцены: слот строки всегда
     занимает своё место (!important бьёт inline-height движка r16:crea,
     движок продолжает анимировать только opacity/translateY) */
  #crea .s-cr-row--new{height:auto !important}
}

/* тотал баланс над суммой (r17) */
.s-cr-total{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.s-cr-total i{font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-2)}

/* ============ R17: спенд-аналитика · древо ролей · кастом · цветные сцены ============ */

/* ---------- графитовые акценты: один тёмный блок в каждой группе,
   всегда в правом нижнем углу группы (лимиты · переводы · кастом) ---------- */
.s-feats-scene--ink,
.s-feats-mini--ink{background:#262321;border-color:#262321}
.s-feats-scene--ink .s-feats-cap,
.s-feats-mini--ink .s-feats-cap{background:linear-gradient(to top,#262321 55%,rgba(38,35,33,0))}
.s-feats-scene--ink .s-feats-cap h3,
.s-feats-mini--ink .s-feats-cap h3{color:#fff}
.s-feats-scene--ink .s-feats-cap p,
.s-feats-mini--ink .s-feats-cap p{color:#a9a5a1}
/* лимиты: подсказка и тень оборота на тёмном */
.s-feats-scene--ink .s-fl-hint{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15);color:#cfccc8}
.s-feats-scene--ink .s-fl-back{box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
/* белые панели на графите — глубже тень */
.s-feats-mini--ink .s-feats-panel{box-shadow:0 22px 46px -20px rgba(0,0,0,.55)}
/* заметка кастома на графите */
.s-feats-mini--ink .s-ct-note{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);color:#d6f2e1}

/* ============ R18 mockups ============ */

/* ---- r18:accept ---- */
/* ---- r18:accept ---- */
/* ============================================================
   r18 · accept — «Мгновенное пополнение»: ОДИН крупный экран
   кабинета по центру сцены (~58% ширины), панель фиксированной
   высоты. Внутри панели три состояния (инструкция → проверка
   N/20 → зачислено) — их fade-ом сменяет accept.js; курсор
   Финдира жмёт «Отправлено» прямо по кнопке; секундомер-чип
   в правом верхнем углу сцены. Движение — только accept.js
   (setInterval + performance.now), transition — hover-мелочи.
   ============================================================ */
.s-dep-scene{position:relative}

/* ---------- секундомер процесса ---------- */
.s-dep-timer{
  position:absolute;right:16px;top:14px;z-index:7;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:8px;
  background:#fff;border:.5px solid #e0e0de;box-shadow:0 10px 22px -14px rgba(22,21,21,.3);
  font-size:12px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.s-dep-timer svg{color:var(--green-ink)}

/* ---------- панель: один экран, фиксированная высота ---------- */
.s-dep-panel{
  left:50%;top:22px;width:min(58%,396px);height:326px;
  padding:14px 16px 15px;
  transform:translateX(-50%) rotate(-1.2deg);
  display:flex;flex-direction:column;
  box-shadow:0 18px 40px -18px rgba(22,21,21,.18);
}
@media(hover:hover) and (min-width:992px){
  .s-dep-scene:hover .s-dep-panel{transform:translateX(-50%) rotate(-.4deg)}
}

.s-dep-head{padding-bottom:10px}
.s-dep-head b{font-size:13.5px}
.s-dep-usdt{display:inline-flex;flex:none}
.s-dep-usdt svg{display:block}

/* тело: три состояния друг над другом, fade пишет accept.js */
.s-dep-body{position:relative;flex:1;min-height:0}
.s-dep-view{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;will-change:opacity,transform;
}
.s-dep-view--pay{opacity:1;justify-content:space-between}

/* ---------- состояние 1 · инструкция ---------- */
.s-dep-inst span{display:block;font-size:11px;color:var(--gray);margin-bottom:2px}
.s-dep-inst b{
  display:block;font-size:21px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.s-dep-mid{display:flex;align-items:center;gap:12px;margin:9px 0}
.s-dep-qr{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:118px;height:118px;padding:5px;
  border:.5px solid #e0e0de;border-radius:12px;background:#fff;
}
.s-dep-qr img{display:block;width:106px;height:106px;border-radius:7px}
.s-dep-col{flex:1;min-width:0;display:flex;flex-direction:column}
.s-dep-addr{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 9px;border:.5px solid #e0e0de;border-radius:9px;background:#fbfbfa;
  margin-bottom:6px;
}
.s-dep-addr em{
  font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s-dep-copy{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border:.5px solid #e0e0de;border-radius:7px;background:#fff;
}
.s-dep-kv{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5.5px 1px;font-size:11.5px;color:var(--gray);
}
.s-dep-kv + .s-dep-kv{border-top:1px solid var(--line)}
.s-dep-kv em{font-style:normal;font-weight:600;color:var(--ink)}

.s-dep-btns{display:flex;gap:9px}
.s-dep-btn{
  display:flex;align-items:center;justify-content:center;
  padding:9px 12px;border-radius:10px;font-size:12.5px;font-weight:600;
}
.s-dep-btn--back{flex:1;background:#f4f4f2;color:var(--gray);border:.5px solid #ebebe8}
.s-dep-btn--send{
  flex:1.55;background:#161515;color:#fff;
  border:.5px solid #161515;transition:none;will-change:transform,filter;
}

/* ---------- состояние 2 · проверка ---------- */
.s-dep-view--check{align-items:center;justify-content:center;text-align:center}
.s-dep-ring{position:relative;display:inline-block;margin-bottom:10px}
.s-dep-ring svg{display:block;transform:rotate(-90deg)}
.s-dep-ring-bg{fill:none;stroke:#efefec;stroke-width:5.5}
.s-dep-ring-arc{fill:none;stroke:var(--green);stroke-width:5.5;stroke-linecap:round;stroke-dasharray:0 214}
.s-dep-cnt{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
}
.s-dep-chk-t{font-size:14px;font-weight:600;margin-bottom:3px}
.s-dep-chk-s{font-size:11.5px;color:var(--gray)}
.s-dep-tx{
  margin-top:11px;padding:4px 10px;border:.5px solid #e0e0de;border-radius:7px;background:#fbfbfa;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;color:var(--gray);letter-spacing:.03em;white-space:nowrap;
}

/* ---------- состояние 3 · зачислено ---------- */
.s-dep-view--done{align-items:center;justify-content:center;text-align:center}
.s-dep-ok{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(180deg,#33c263,#1fa653);
  box-shadow:0 12px 24px -12px rgba(18,138,68,.55);
  margin-bottom:10px;will-change:transform;
}
.s-dep-ok svg{display:block}
.s-dep-got{
  font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--green-ink);
  font-variant-numeric:tabular-nums;margin-bottom:3px;
}
.s-dep-fee{font-size:11px;color:var(--gray);margin-bottom:13px}
.s-dep-acc{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;max-width:252px;padding:8px 11px;
  border:.5px solid #e0e0de;border-radius:10px;background:#fbfbfa;
}
.s-dep-acc span{font-size:11.5px;color:var(--gray);white-space:nowrap}
.s-dep-bal{
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------- курсор Финдира ---------- */
.s-dep-cur{
  position:absolute;left:0;top:0;z-index:9;opacity:0;
  pointer-events:none;will-change:transform,opacity;
}
.s-dep-arrow{display:block;filter:drop-shadow(0 3px 6px rgba(22,21,21,.3))}
.s-dep-cur .cur-chip{position:absolute;left:13px;top:15px;font-size:11.5px;padding:4px 10px;white-space:nowrap}
.s-dep-cur .cur-chip::before{display:none}

/* ---------- адаптив ---------- */
@media(max-width:1240px){
  .s-dep-panel{width:min(62%,396px)}
  .s-dep-qr{width:108px;height:108px}
  .s-dep-qr img{width:96px;height:96px;border-radius:6px}
  .s-dep-inst b{font-size:19px}
}

/* ≤991: сцена в поток, панель на всю ширину (высота не прыгает) */
@media(max-width:991px){
  #accept .s-feats-scene--dep{height:auto;padding:20px 16px 0}
  .s-dep-panel{
    position:relative;left:auto;top:auto;
    width:100%;max-width:432px;margin:34px auto 0;
    transform:rotate(-1deg);
  }
  .s-dep-timer{right:12px;top:12px}
  #accept .s-feats-cap{position:relative;bottom:auto;margin:-18px -16px 0}
}
/* r30 (п.21): планшетный hover-сдвиг — только hover-устройства */
@media(hover:hover) and (min-width:768px) and (max-width:991px){
  .s-dep-scene:hover .s-dep-panel{transform:rotate(-.4deg)}
}

@media(max-width:767px){
  /* r35 (п.2): чип-секундомер (00:03.1) на мобе УБРАН полностью, блок
     сокращён на освободившееся место: верхний отступ панели 34px
     (место под чип из ≤991) больше не нужен — margin-top:0. Тик
     секундомера в скрытый узел глушит движок r35:accept (замена
     r29:accept, src-v2/r35/featsmob.js) */
  .s-dep-timer{display:none}
  /* r34 (п.9): наклон панели пополнения убран — мокап стоит ровно
     (планшетный rotate(-1deg) из ≤991 остаётся только на 768-991);
     движок r29:accept меряет кнопку из DOM — попадание не меняется */
  .s-dep-panel{max-width:100%;height:322px;padding:13px 14px 14px;transform:none;margin:0 auto}
  .s-dep-inst b{font-size:18px}
  .s-dep-qr{width:104px;height:104px}
  .s-dep-qr img{width:92px;height:92px}
  .s-dep-addr em{font-size:11.5px}
  .s-dep-btn{font-size:12px;padding:8.5px 11px}
  /* r30 (п.22): чип снова СПРАВА от стрелки (как на ПК) — панель во всю
     ширину, чип от центра кнопки «Отправлено» помещается целиком */
  .s-dep-cur .cur-chip{font-size:11px;padding:3.5px 9px}
}

/* ---- r25:inst ---- */
/* ============================================================
   r25 · inst — «Мгновенный выпуск»: сетка 3×4 полноценных карт
   (~208×126, r12) в стиле лёгкого металлика Apple занимает правые
   ~60% сцены ВПЛОТНУЮ к краям: верхний ряд наполовину срезан
   верхом, правая колонка — правым краем, нижний ряд — низом.
   Сцена overflow:hidden режет чисто, БЕЗ высветления: белый
   градиент подписи в этой сцене выключен (.s-fi-scene .s-feats-cap
   background:none), подпись живёт слева снизу на белом фоне сцены,
   карты в левую зону (~38%) не заходят. 4 карты — фирменный
   зелёный градиент.
   r25: движение — one-shot (курсор жмёт кнопку, карты
   раскладываются, курсор растворяется навсегда, карты висят);
   кнопка «Выпустить 16 карт» реально кликабельна (класс
   .s-fi-btn--on вешает inst.js — на reduced-motion/без JS кнопка
   остаётся статичной): по клику пружинка + смахивание + новая
   раскладка, уже без курсора. Движок — inst.js
   (setInterval+performance.now). Тут раскладка и вид.
   Модалка слева (.s-feats-modal) — из feats.css, не трогаем.
   ============================================================ */

/* r30: hover-правило модалки удалено из базового блока — нейтрализатор
   больше не нужен */

/* ---------- сетка 3×4, вплотную к верх/прав/низ краям сцены ---------- */
.s-fi-grid{
  position:absolute;top:-63px;right:-60px;z-index:4;
  display:grid;grid-template-columns:repeat(3,208px);grid-auto-rows:126px;
  gap:34px 42px;
}

/* ---------- карта: лёгкий металлик в стиле Apple (r23 п.3) ---------- */
.s-fi-card{
  position:relative;
  display:flex;flex-direction:column;
  padding:15px 16px 13px;border-radius:12px;
  background:linear-gradient(155deg,#FDFDFD 0%,#F2F2F0 45%,#E8E8E6 100%);
  border:.5px solid rgba(22,21,21,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 34px -20px rgba(22,21,21,.32);
  will-change:transform,opacity,filter;
  -webkit-user-select:none;user-select:none;
  overflow:hidden;
}
.s-fi-card img{-webkit-user-drag:none}
/* едва заметный диагональный блик металла */
.s-fi-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 60%);
}

/* верх карты: [FBM] + контактлесс-дуги */
.s-fi-ctop{display:flex;justify-content:space-between;align-items:center;gap:8px;line-height:1;color:#6f6f6d}
.s-fi-ctop .astro{font-size:13px;letter-spacing:.02em}
.s-fi-nfc{display:block;flex:none;opacity:.75}

/* чип карты */
.s-fi-chip{display:block;flex:none;margin-top:11px;border-radius:4px;box-shadow:0 1px 2px rgba(22,21,21,.16)}

/* номер карты — покрупнее */
.s-fi-cnum{margin-top:9px;font-size:17px;font-weight:500;letter-spacing:.12em;color:var(--ink)}

/* низ карты: EXP + лого MC */
.s-fi-cbot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto}
.s-fi-exp{
  font-style:normal;font-weight:500;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10px;letter-spacing:.05em;color:#8b8b89;
}
.s-fi-mc{display:block;flex:none;filter:drop-shadow(0 1px 1px rgba(22,21,21,.08))}

/* ---------- зелёные карты: фирменный градиент главного блока ---------- */
.s-fi-card--green{
  background:linear-gradient(135deg,#83DA4E,#21A038 55%,#54ACB8);
  border-color:transparent;
  box-shadow:0 16px 34px -18px rgba(18,110,60,.45);
}
.s-fi-card--green::before{
  background:radial-gradient(130% 92% at 16% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 58%);
}
.s-fi-card--green .s-fi-ctop{color:rgba(255,255,255,.92)}
.s-fi-card--green .s-fi-cnum{color:#fff}
.s-fi-card--green .s-fi-chip{box-shadow:0 1px 2px rgba(10,60,25,.28)}
.s-fi-card--green .s-fi-exp{color:rgba(255,255,255,.82)}
.s-fi-card--green .s-fi-mc{filter:drop-shadow(0 1px 2px rgba(10,60,25,.22))}

/* статичные наклончики: вид без JS / prefers-reduced-motion */
.s-fi-card:nth-child(2n){transform:rotate(1.6deg)}
.s-fi-card:nth-child(2n+1){transform:rotate(-1.8deg) translate(1px,1px)}
.s-fi-card:nth-child(3n){transform:rotate(-2.5deg) translate(-2px,1px)}
.s-fi-card:nth-child(5n+1){transform:rotate(2.3deg) translate(2px,-2px)}
.s-fi-card:nth-child(7n+3){transform:rotate(-3deg) translate(-1px,2px)}

/* ---------- подпись сцены: БЕЗ белого градиента (карты режутся краями) ----------
   r36 (п.3): новый продающий подзаголовок короче старого — при 430px
   ложился 429+180 (вторая строка обрубком); 332px по метрике Onest
   15/400 даёт две РОВНЫЕ строки (~325 и ~281px, перенос после «50 карт —»),
   правый край текста заведомо левее сетки карт (r28-запас сохранён:
   было 456px < 468px, стало ещё меньше) */
.s-fi-scene .s-feats-cap{background:none}
.s-fi-scene .s-feats-cap p{max-width:332px}

/* ---------- BIN-строка модалки ---------- */
.s-fi-bin{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}
.s-fi-bin b{font-weight:600}
.s-fi-bin-meta{font-style:normal;color:var(--gray)}

/* ---------- лёгкое зерно над зоной раскладки (opacity из JS) ---------- */
.s-fi-grain{
  position:absolute;left:0;top:0;right:0;bottom:0;z-index:5;
  opacity:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='fig'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23fig)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---------- курсор баера: one-shot, позиция/opacity пишутся из JS ---------- */
.s-fi-cursor{
  position:absolute;left:0;top:0;z-index:9;opacity:0;
  pointer-events:none;will-change:transform,opacity;
}
.s-fi-arrow{display:block;filter:drop-shadow(0 3px 6px rgba(22,21,21,.3))}
.s-fi-cursor .cur-chip{position:absolute;left:14px;top:16px;white-space:nowrap}
.s-fi-cursor .cur-chip::before{display:none}

/* ---------- кнопка «Выпустить 16 карт» ----------
   пружинку жмёт JS (inline transform/filter), поэтому transition
   строго на hover-мелочи (background/box-shadow), НЕ на transform.
   .s-fi-btn--on вешает inst.js после первой раскладки: реальная
   кликабельность + pointer + лёгкий hover. Без JS / при
   prefers-reduced-motion класса нет — кнопка статичная. */
.s-fi-btn{
  transition:none;will-change:transform,filter;
  -webkit-user-select:none;user-select:none;
}
.s-btn--dark{background:#161515;color:#fff;border:0}
.s-fi-btn--on{
  cursor:pointer;
  transition:background-color .18s ease,box-shadow .18s ease;
}
.s-fi-btn--on:hover{
  background:#2B2A28;
  box-shadow:0 12px 24px -14px rgba(22,21,21,.55);
}
.s-fi-btn--on:active{background:#0c0b0b}

/* ---------- r34 (п.5): связка «скобка + плашка» под модалкой ----------
   мобильный приём (стиль связки счёта из #balance); на ПК и планшете
   элемент не участвует в композиции — скрыт, включается только ≤767 */
.s-fi-link{display:none}

/* ---------- ≤1240: карты чуть меньше, всё так же вплотную к краям ---------- */
@media(max-width:1240px){
  .s-fi-grid{top:-59px;right:-52px;grid-template-columns:repeat(3,186px);grid-auto-rows:118px;gap:40px 28px}
  /* r28: на узком десктопе сетка карт левее — подпись сжимается,
     чтобы не заезжать под нижний ряд карт; r36 (п.3): для нового
     короткого подзаголовка 300px давал хвост-обрубок «лимитов.»
     третьей строкой — 330px кладёт текст в две ровные строки, правый
     край (~333px) по-прежнему сильно левее нижнего ряда карт (~508px
     на 1024, ~460px на 992 — замерено в браузере) */
  .s-fi-scene .s-feats-cap p{max-width:330px}
  .s-fi-card{padding:13px 14px 12px}
  .s-fi-ctop .astro{font-size:12px}
  .s-fi-nfc{width:14px;height:14px}
  .s-fi-chip{margin-top:10px;width:24px;height:17px}
  .s-fi-cnum{font-size:15.5px;margin-top:8px;letter-spacing:.1em}
  .s-fi-exp{font-size:9.5px}
  .s-fi-mc{width:26px;height:16px}
}

/* ---------- ≤991: сцена в поток — модалка сверху, сетка 3×3 под ней ---------- */
@media(max-width:991px){
  .s-fi-scene.s-feats-scene--inst{height:auto;padding:22px 16px 0}
  .s-fi-scene .s-feats-modal{
    position:relative;left:auto;top:auto;width:100%;max-width:340px;
    margin:0 auto;transform:rotate(-1.6deg);
  }
  .s-fi-grid{
    position:relative;top:auto;right:auto;left:auto;width:max-content;
    margin:22px auto 0;
    grid-template-columns:repeat(3,158px);grid-auto-rows:98px;gap:14px;
  }
  .s-fi-card{padding:11px 13px 10px}
  .s-fi-card:nth-child(n+10){display:none}
  .s-fi-ctop .astro{font-size:11px}
  .s-fi-nfc{width:13px;height:13px}
  .s-fi-chip{margin-top:8px;width:21px;height:15px}
  .s-fi-cnum{font-size:14px;margin-top:7px;letter-spacing:.09em}
  .s-fi-exp{font-size:9px}
  .s-fi-mc{width:24px;height:15px}
  .s-fi-scene .s-feats-cap{position:relative;bottom:auto;margin:16px -16px 0;padding:2px 22px 22px}
  .s-fi-grain{display:none}
  .s-fi-cursor{display:none}
}

/* ---------- ≤767 (r34 п.5, поверх r30 п.19): подпись (h3+p) ВВЕРХУ;
   ниже — модалка «Выпуск карт» РОВНО по центру (без наклона), от неё
   вниз ОБЩАЯ СКОБКА-объединение с плашкой «выпущено 16 карт» (стиль
   связки счёта из #balance: та же скобка 240×52, та же белая плашка
   по центру), а ПОД скобкой — ряд маленьких иконок-карт с лёгким
   перекрытием и фиксированными разворотами (как ряд мини-карт
   #balance). Карты НЕ двигаются и не ловят тапы; r36 (п.2): при
   появлении блока скобка и карты уже СТОЯТ (выпущены), тап по кнопке
   «Выпустить 16 карт» — ПЕРЕВЫПУСК: карты гаснут и раздаются заново
   по одной (движок r36:inst, замена r34:inst; всё — только opacity).
   Без JS / prefers-reduced-motion скобка и карты просто стоят
   (opacity:1 по умолчанию). */
@media(max-width:767px){
  .s-fi-scene.s-feats-scene--inst{
    display:flex;flex-direction:column;
    height:auto;padding:18px 16px 22px;
  }
  .s-fi-scene .s-feats-cap{
    order:-1;position:relative;left:auto;right:auto;bottom:auto;
    margin:0;padding:0 2px 2px;background:none;
  }
  .s-fi-scene .s-feats-cap p{max-width:none}
  .s-fi-scene .s-feats-modal{margin:10px auto 0;transform:none}

  /* связка: скобка + белая плашка (дубль стиля s-fb-tag — самодостаточность) */
  .s-fi-link{
    display:block;position:relative;flex:none;
    width:240px;margin:2px auto 0;line-height:0;
    will-change:opacity;
  }
  .s-fi-brace{display:block}
  .s-fi-tag{
    position:absolute;left:50%;top:12px;transform:translateX(-50%);
    line-height:normal;white-space:nowrap;
    font-size:10.5px;font-weight:500;color:var(--gray);
    background:#fff;border:.5px solid #e0e0de;border-radius:7px;padding:3px 10px;
    box-shadow:0 8px 16px -12px rgba(22,21,21,.22);
  }

  /* ряд мини-карт под скобкой (r35 п.1): размер и стиль ИДЕНТИЧНЫ
     мини-картам мокапа #balance (.s-fb-mini) — 34×22, radius 5,
     перекрытие -5px (ряд 8×34−7×5=237px ≈ скобка 240); карты лёгкие:
     белые с волосяной обводкой #e0e0de, металлик и зелёный градиент
     десктопной раскладки на мобе выключены */
  .s-fi-grid{
    position:relative;left:auto;right:auto;top:auto;
    display:flex;justify-content:center;
    width:auto;max-width:none;margin:-5px auto 0;gap:0;
  }
  .s-fi-card{
    flex:none;width:34px;height:22px;margin:0;padding:0;border-radius:5px;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;filter:none !important;
    background:#fff;border:.5px solid #e0e0de;
    box-shadow:0 6px 14px -9px rgba(22,21,21,.28);
  }
  .s-fi-card::before{display:none} /* металлик-блик белой мини-карте не нужен */
  .s-fi-card + .s-fi-card{margin-left:-5px}
  .s-fi-card:nth-child(n+9){display:none}
  /* r36 (п.2): зелёные акценты убраны — ряд ЦЕЛИКОМ белый, все карты
     одинаковые (белая заливка + волосок #e0e0de + маленький MC);
     зелёные слоты десктопной раскладки (--green) на мобе гасим явно */
  .s-fi-card--green{
    background:#fff;border-color:#e0e0de;
    box-shadow:0 6px 14px -9px rgba(22,21,21,.28);
  }
  /* фиксированные лёгкие развороты вперемешку (статика, стиль #balance);
     перекрывают базовые nth-child-наклоны десктопной раскладки */
  .s-fi-card:nth-child(1){transform:rotate(-6deg) translateY(1px)}
  .s-fi-card:nth-child(2){transform:rotate(4deg) translateY(-1px)}
  .s-fi-card:nth-child(3){transform:rotate(-3deg) translateY(1px)}
  .s-fi-card:nth-child(4){transform:rotate(5deg) translateY(-1px)}
  .s-fi-card:nth-child(5){transform:rotate(-4deg) translateY(1px)}
  .s-fi-card:nth-child(6){transform:rotate(3deg) translateY(-1px)}
  .s-fi-card:nth-child(7){transform:rotate(-5deg) translateY(1px)}
  .s-fi-card:nth-child(8){transform:rotate(4deg) translateY(-1px)}
  /* мини-вид карты-иконки: только лого платёжки по центру;
     r35 (п.1): лого MC МЕНЬШЕ — 16×10, как на мини-картах #balance */
  .s-fi-ctop,.s-fi-cnum,.s-fi-exp,.s-fi-chip{display:none}
  .s-fi-cbot{margin:0;display:flex;align-items:center;justify-content:center}
  .s-fi-mc{width:16px;height:10px}
}

/* ---- r28:perev ---- */
/* ============================================================
   r29 · perev — «Переводы между счетами» (#perev, графит),
   префикс .s-pv8- сохранён (классы движка не менялись).
   САМОДОСТАТОЧНЫЙ CSS: каждый класс мокапа описан здесь; из
   глобальных — только .card, .s-feats-panel (base),
   .s-feats-phead, .s-feats-dots, .s-feats-cap, .s-feats-mini,
   .s-feats-mini--ink, .cur-chip.
   Композиция r29: ПОЛНОСТЬЮ ТЁМНАЯ панель «Перевод между
   счетами» (фон 2E2B29, волосяная светлая рамка); шапка по
   паттерну тёмной модалки передачи .s-fp7-head — три точки
   слева, заголовок слева, разделитель rgba(255,255,255,.08);
   внутри два тайла-счёта 37332F (сумма TikTok-счёта зелёная),
   тёмная строка «Сумма · $2,000» и СВЕТЛАЯ кнопка «Перевести»
   с тёмным текстом (красивее с синим курсором Финдира);
   спиннер и галочка на кнопке — ТЁМНЫЕ. Курсор Финдира
   закреплён у кнопки ЧИСТЫМ CSS-ом (right/bottom) — движок
   r29:perev геометрию не меряет: он только прожимает кнопку,
   крутит спиннер, перетекает его в галочку и плавно тикает
   суммы. Никаких летающих чипов.
   ============================================================ */

/* графит блока и тёмная подпись (дубль ink-правил — самодостаточность) */
#perev.s-feats-mini--ink{background:#262321;border-color:#262321}
#perev .s-feats-cap{background:linear-gradient(to top,#262321 62%,rgba(38,35,33,0))}
#perev .s-feats-cap h3{color:#fff}
#perev .s-feats-cap p{color:#a9a5a1}
#perev .s-feats-mini-vis{
  flex:1;min-height:0;width:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:24px 26px 96px;
}

.s-pv8-vig{position:relative;display:flex;justify-content:center}

/* ТЁМНАЯ панель на графите (r29): фон 2E2B29, волосяная светлая
   рамка, глубокая тень тёмного блока */
#perev .s-pv8-modal{
  position:relative;z-index:7;width:100%;max-width:344px;
  padding:12px 14px 14px;border-radius:14px;
  background:#2E2B29;border:.5px solid rgba(255,255,255,.09);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7);
  transform:rotate(.8deg);
  transition:transform .5s var(--spring);
}
/* r30 (п.11): z-index 7 > градиента подписи (z6) — курсор Финдира внутри
   модалки (z9) больше НЕ накрывается полупрозрачным графитовым градиентом
   и не выглядит затемнённым; пресс затемняет только кнопку (движок). */
@media(hover:hover) and (min-width:768px){
  #perev:hover .s-pv8-modal{transform:rotate(.2deg)}
}
/* шапка по паттерну .s-fp7-head: точки слева, заголовок слева */
.s-pv8-head{padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.s-pv8-head b{
  font-size:12.5px;font-weight:600;color:#ECEAE7;line-height:1.25;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#perev .s-pv8-head .s-feats-dots i{background:rgba(255,255,255,.16)}

/* ряд счетов: тайл 37332F · стрелка · тайл 37332F */
.s-pv8-accs{display:flex;align-items:stretch;gap:8px}
.s-pv8-tile{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  padding:13px 10px 12px;border:.5px solid rgba(255,255,255,.1);border-radius:12px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.06),rgba(255,255,255,0) 62%),
    #37332F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 26px -16px rgba(0,0,0,.5);
}
.s-pv8-ava{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;margin-bottom:2px;
  font-style:normal;font-size:11px;font-weight:600;
  box-shadow:0 0 0 3px rgba(255,255,255,.04);
}
.s-pv8-ava--o{background:rgba(31,178,90,.24);color:#7ddba4}
.s-pv8-ava--t{background:rgba(91,124,153,.3);color:#a9c3dc}
.s-pv8-tile em{
  font-style:normal;font-size:11px;line-height:1.3;color:#A9A5A1;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s-pv8-sum{
  font-size:16px;line-height:1.25;font-weight:600;letter-spacing:-.01em;
  color:#F1EFEC;font-variant-numeric:tabular-nums;
}
/* сумма счёта-получателя (TikTok-проект) — зелёная */
.s-pv8-sum--in{color:#7ddba4}
.s-pv8-way{
  flex:none;align-self:center;width:22px;
  display:flex;align-items:center;justify-content:center;color:#A9A5A1;
}

/* ряд «Сумма · $2,000» (тёмная строка) + светлая кнопка «Перевести»:
   одна высота, геометрия в цикле не меняется */
.s-pv8-frow{display:flex;align-items:center;gap:8px;margin-top:10px}
.s-pv8-field{
  flex:1 1 auto;min-width:0;height:42px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 12px;border:.5px solid rgba(255,255,255,.1);border-radius:10px;background:#37332F;
}
.s-pv8-field span{font-size:11px;color:#A9A5A1}
.s-pv8-field b{font-size:13.5px;font-weight:600;color:#F1EFEC;font-variant-numeric:tabular-nums}

/* СВЕТЛАЯ кнопка «Перевести» с тёмным текстом (r29, как кнопка тёмной
   модалки передачи; движок прожимает transform-ом) */
#perev .s-pv8-btn{
  position:relative;flex:none;height:42px;min-width:122px;padding:0 18px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;text-align:center;
  background:linear-gradient(180deg,#FFFFFF,#ECEAE7);color:#161515;
  border:.5px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 26px -14px rgba(0,0,0,.7);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  will-change:transform,filter;
}
.s-pv8-btn-tx{display:inline-block;color:#161515;will-change:opacity}
/* маленький ТЁМНЫЙ спиннер по центру светлой кнопки: absolute — размеры
   кнопки не трогает; opacity/rotate пишет движок */
#perev .s-pv8-spin{
  position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;
  border:1.6px solid rgba(22,21,21,.22);border-top-color:#161515;
  opacity:0;transform:translate(-50%,-50%);
  will-change:transform,opacity;
}
/* ТЁМНАЯ галочка по центру кнопки (спиннер перетекает в неё, движок) */
#perev .s-pv8-check{
  position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;display:block;
  opacity:0;transform:scale(.5);will-change:opacity,transform;
}

/* курсор Финдира: ЗАКРЕПЛЁН у кнопки CSS-ом (не зависит от JS),
   z-index 9 — всегда выше градиента подписи */
#perev .s-pv8-cur{
  position:absolute;right:46px;bottom:14px;z-index:9;
  display:block;width:17px;height:17px;
  pointer-events:none;will-change:transform;
}
.s-pv8-arrow{display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
#perev .s-pv8-cur .cur-chip{position:absolute;left:13px;top:15px;font-size:11.5px;padding:4px 10px;white-space:nowrap}
#perev .s-pv8-cur .cur-chip::before{display:none}

@media(max-width:991px){
  #perev .s-feats-mini-vis{padding:20px 22px 88px}
  #perev .s-pv8-modal{max-width:328px}
  .s-pv8-head b{font-size:11.5px}
  .s-pv8-sum{font-size:15px}
}
@media(max-width:767px){
  /* r31 (п.25): мокап поднят ВЫШЕ — прижат к верху блока
     (justify-content:flex-start вместо центрирования), а на
     освободившемся месте панель дышит: тайлы и суммы чуть крупнее */
  #perev .s-feats-mini-vis{padding:16px 18px 82px;justify-content:flex-start}
  /* r34 (п.9): наклон модалки убран — мокап стоит ровно; курсор Финдира
     закреплён внутри модалки CSS-ом и остаётся на кнопке */
  #perev .s-pv8-modal{max-width:100%;padding:12px;transform:none}
  .s-pv8-tile{padding:12px 8px 11px}
  .s-pv8-sum{font-size:15px}
  .s-pv8-ava{width:24px;height:24px}
  .s-pv8-field{height:40px;padding:0 10px}
  #perev .s-pv8-btn{height:40px;min-width:110px;padding:0 14px}
  /* r30 (п.22): чип снова СПРАВА от стрелки (как на ПК); точка клика
     сдвинута левее по кнопке, чтобы чип целиком остался в блоке */
  #perev .s-pv8-cur{right:46px;bottom:13px}
  #perev .s-pv8-cur .cur-chip{font-size:11px;padding:3.5px 9px}
}

/* ---- r27:minis ---- */
/* ============================================================
   r27 · minis — pass (.s-fp7-) + access (.s-ac7-)
   САМОДОСТАТОЧНЫЙ CSS (правило r27): каждый класс из minis.html
   описан здесь; из глобальных используются только .card,
   .s-feats-panel (base), .s-feats-phead, .s-feats-dots,
   .s-feats-cnt, .s-feats-cap, .s-feats-mini, .s-feats-mini--ink,
   .cur-chip. Сомнительные правила продублированы со скоупом #pass /
   #access. Заменяет блоки: r25:pass (.s-fp-/.s-fpd-), r25:access
   (.s-ac-*) и r26-довесок (.s-ac5-*).
   ============================================================ */

/* ---- r27:minis · каркас (дубль базы под самодостаточность) ---- */
#pass .s-feats-mini-vis,
#access .s-feats-mini-vis{
  flex:1;min-height:0;width:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:24px 26px 96px;
}

/* ============================================================
   r27:pass — «Передача карт» (графит)
   ============================================================ */

/* графитовый блок: фон + тёмный градиент подписи (дубль ink-правил) */
#pass.s-feats-mini--ink{background:#262321;border-color:#262321}
#pass .s-feats-cap{background:linear-gradient(to top,#262321 62%,rgba(38,35,33,0))}
#pass .s-feats-cap h3{color:#fff}
#pass .s-feats-cap p{color:#a9a5a1}

.s-fp7-scene{
  display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:center;
  margin:-8px 0 -4px;
}

/* ---------- левая колонка: ТЁМНАЯ модалка «Передать карту» ---------- */
/* r30 (п.11): z-index 7 > градиента подписи (z6) — курсор Тимлида внутри
   модалки (z9) не накрывается графитовым градиентом и не темнеет;
   пресс затемняет только кнопку (движок r29/r30:pass) */
#pass .s-fp7-modal{
  position:relative;width:100%;max-width:296px;justify-self:center;z-index:7;
  padding:12px 13px;border-radius:14px;
  background:#2E2B29;border:.5px solid rgba(255,255,255,.09);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7);
  transform:rotate(-1.6deg);
  transition:transform .5s var(--spring);
}
.s-fp7-head{padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.s-fp7-head b{font-size:12.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#ECEAE7}
#pass .s-fp7-head .s-feats-dots i{background:rgba(255,255,255,.16)}

/* строка передаваемой карты: иконка-карточка (металлик) + «•• 6385, Карта
   для ФБ» одним начертанием */
.s-fp7-card{
  display:flex;align-items:center;gap:9px;min-width:0;
  padding:5px 8px;border:.5px solid rgba(255,255,255,.1);border-radius:9px;
  background:#37332F;line-height:1.2;
}
.s-fp7-cico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:20px;border-radius:4.5px;
  background:linear-gradient(155deg,#FDFDFD 0%,#F2F2F0 45%,#E8E8E6 100%);
  border:.5px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -9px rgba(0,0,0,.6);
}
.s-fp7-cico img{display:block;flex:none}
.s-fp7-cname{
  min-width:0;font-size:12px;font-weight:600;color:#ECEAE7;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.s-fp7-lbl{display:block;font-size:11px;color:#A9A5A1;margin:7px 0 4px;line-height:1.2}

/* «Кому»: Danil выбран (зелёная волосяная рамка, белое имя, галочка), Mark обычный */
.s-fp7-users{display:flex;flex-direction:column;gap:3px}
.s-fp7-user{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:4px 8px;border:.5px solid rgba(255,255,255,.1);border-radius:8px;
  font-size:12px;line-height:1.2;background:#37332F;
}
.s-fp7-user b{font-weight:500;color:#ECEAE7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-fp7-user--on{
  border-color:rgba(31,178,90,.55);
  box-shadow:0 0 0 2.5px rgba(31,178,90,.12);
}
.s-fp7-user--on b{color:#fff;font-weight:600}
.s-fp7-ok{margin-left:auto;flex:none}
.s-fp7-ava{
  font-style:normal;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  font-size:9px;font-weight:600;letter-spacing:.02em;
}
.s-fp7-ava--d{background:rgba(31,178,90,.2);color:#7ddba4}
.s-fp7-ava--m{background:rgba(85,104,201,.22);color:#96a5e6}

/* приглушённая строка про сохранность лимитов */
.s-fp7-safe{
  display:flex;align-items:center;gap:6px;margin-top:8px;
  font-size:10.5px;color:#A9A5A1;line-height:1.25;
}
.s-fp7-safe svg{flex:none}

/* кнопка «Передать» — БЕЛАЯ с чёрным текстом (движок прожимает transform-ом) */
#pass .s-fp7-btn{
  margin-top:8px;padding:7px 10px;border-radius:9px;text-align:center;
  background:linear-gradient(180deg,#FFFFFF,#F0F0EE);color:#161515;
  border:.5px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 24px -14px rgba(0,0,0,.75);
  font-size:12.5px;font-weight:600;line-height:1.25;letter-spacing:.01em;
  will-change:transform,filter;
}

/* курсор Тимлида: absolute внутри модалки (наклон наследует), z-index 9 */
.s-fp7-cur{
  position:absolute;left:0;top:0;z-index:9;opacity:0;
  pointer-events:none;will-change:transform,opacity;
}
.s-fp7-arrow{display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.s-fp7-cur .cur-chip{position:absolute;left:11px;top:13px;font-size:11.5px;padding:4px 10px;white-space:nowrap}
.s-fp7-cur .cur-chip::before{display:none}

/* ---------- правая колонка: ТЁМНАЯ нотификация (r29 — в тон модалке
   слева: фон 2E2B29, волосяная светлая рамка) + тёмный чип-лог ---------- */
.s-fp7-res{
  position:relative;display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:252px;justify-self:center;min-width:0;
}
#pass .s-fp7-note{
  position:relative;width:100%;
  padding:11px 12px 13px;border-radius:12px;
  background:#2E2B29;border:.5px solid rgba(255,255,255,.09);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.75);
  transform:rotate(2deg);
  transition:transform .5s var(--spring);
}
.s-fp7-ntop{
  display:flex;align-items:center;gap:7px;
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);
}
.s-fp7-ntop svg{flex:none}
.s-fp7-ntop b{
  font-size:11.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em;
  color:#ECEAE7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* таймлайн 3 шагов на тёмном: светлый полупрозрачный рельс, зелёная
   заливка, светлые подписи, тайминги A9A5A1 моноширинным */
.s-fp7-tl{position:relative;display:flex;flex-direction:column;gap:10px}
.s-fp7-rail{
  position:absolute;left:6.25px;top:7px;bottom:7px;width:1.5px;
  background:rgba(255,255,255,.14);border-radius:2px;
}
.s-fp7-rail i{position:absolute;left:0;top:0;width:100%;height:0;background:#1FB25A;border-radius:2px}
.s-fp7-step{position:relative;display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1.25;min-width:0}
.s-fp7-dot{
  position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;
  background:#2E2B29;border:1.5px solid rgba(255,255,255,.25);
  will-change:transform;
}
.s-fp7-dot svg{opacity:0}
.s-fp7-step b{font-weight:500;color:#A9A5A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-fp7-step em{
  margin-left:auto;flex:none;font-style:normal;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:9.5px;color:rgba(255,255,255,.35);
}
.s-fp7-step.on .s-fp7-dot{background:#1FB25A;border-color:#1FB25A}
.s-fp7-step.on .s-fp7-dot svg{opacity:1}
.s-fp7-step.on b{color:#ECEAE7}
.s-fp7-step.on em{color:#A9A5A1}

/* тёмный чип «передача заняла 3 сек» (проявляет движок);
   r29: рамка и текст ярче — контраст к графиту блока */
.s-fp7-log{
  align-self:flex-end;display:inline-flex;align-items:center;
  margin-right:2px;padding:4.5px 10px;border:.5px solid rgba(255,255,255,.18);border-radius:7px;
  background:#37332F;color:#D6D3CF;
  box-shadow:0 10px 18px -14px rgba(0,0,0,.6);
  font-size:10.5px;font-weight:500;opacity:0;
  transform:rotate(-1.5deg);white-space:nowrap;
  transition:transform .5s var(--spring);
}

/* ховер: лёгкие сдвиги панелей, карточка не приподнимается;
   r30 (п.21): только hover-устройства ≥768 */
@media(hover:hover) and (min-width:768px){
  #pass:hover .s-fp7-modal{transform:rotate(-2.4deg) translateX(-3px)}
  #pass:hover .s-fp7-note{transform:rotate(2.8deg) translateX(3px)}
  #pass:hover .s-fp7-log{transform:rotate(-2.5deg) translateX(-2px)}
}

@media(max-width:991px){
  #pass .s-feats-mini-vis,
  #access .s-feats-mini-vis{padding:20px 22px 88px}
  .s-fp7-scene{gap:12px}
  #pass .s-fp7-modal{padding:10px 11px 11px}
  .s-fp7-head{padding-bottom:6px;margin-bottom:7px}
  .s-fp7-head b{font-size:12px}
  .s-fp7-card{padding:4px 7px;gap:8px}
  .s-fp7-cname{font-size:11.5px}
  .s-fp7-user{font-size:11.5px;padding:3.5px 7px;gap:7px}
  .s-fp7-safe{font-size:10px;margin-top:7px}
  #pass .s-fp7-btn{margin-top:7px;padding:6.5px 10px;font-size:12px}
  /* r30: модалка поднята до z7 (курсор над градиентом) — правой колонке
     z8, чтобы её наезд на модалку остался поверх, как в r29 */
  .s-fp7-res{width:calc(100% + 24px);margin-left:-24px;position:relative;z-index:8}
  #pass .s-fp7-note{padding:10px 8px 12px 9px}
  .s-fp7-ntop{padding-bottom:7px;margin-bottom:9px}
  .s-fp7-ntop b{font-size:10.5px;white-space:normal;line-height:1.3}
  .s-fp7-tl{gap:9px}
  .s-fp7-step{font-size:10px;gap:6px}
  .s-fp7-dot{width:13px;height:13px}
  .s-fp7-rail{left:5.75px}
  .s-fp7-step em{display:none}
  .s-fp7-log{font-size:10px;padding:4px 9px}
}
@media(max-width:767px){
  #pass .s-feats-mini-vis,
  #access .s-feats-mini-vis{padding:18px 18px 82px}
  /* r34 (п.7): мокап налазил на заголовок «Передача карт» — блок
     расширен по высоте (height:auto), подпись переведена В ПОТОК под
     мокап (приём #custom): градиент не нужен, чистый зазор до
     заголовка 18px от низа сцены (≈15px от нижнего угла наклонённой
     модалки — в вилке 14-18px) */
  #pass.s-feats-mini{height:auto;min-height:0}
  #pass .s-feats-mini-vis{padding:18px 18px 0}
  #pass .s-feats-cap{
    position:relative;left:auto;right:auto;bottom:auto;
    padding:18px 18px 18px;background:none;
  }
  .s-fp7-scene{grid-template-columns:1.1fr 1fr;gap:10px;margin:-8px 0 0}
  #pass .s-fp7-modal{max-width:296px}
  #pass .s-fp7-modal .s-feats-dots{display:none}
  .s-fp7-card{padding:4px 6px;gap:6px}
  .s-fp7-cico{width:27px;height:18px;border-radius:4px}
  .s-fp7-cname{font-size:11px}
  /* r30 (п.22): наезд правой колонки на модалку убран — чип курсора
     СПРАВА от стрелки не ныряет под панель нотификации */
  .s-fp7-res{max-width:260px;width:100%;margin-left:0}
  #pass .s-fp7-note{padding:10px 10px 11px}
  .s-fp7-ntop{gap:6px}
  .s-fp7-ntop svg{width:13px;height:13px}
  .s-fp7-ntop b{font-size:10px}
  .s-fp7-step{font-size:10.5px;gap:6px}
  .s-fp7-dot{width:13px;height:13px}
  .s-fp7-rail{left:5.75px}
  /* r30 (п.22): чип снова СПРАВА от стрелки (как на ПК), компактнее —
     целиком в границах блока */
  .s-fp7-cur .cur-chip{font-size:11px;padding:3.5px 9px}
}

/* ============================================================
   r27:access — «Доступы к счетам» (светлый)
   ============================================================ */
.s-ac7-vig{position:relative;display:flex;justify-content:center;margin:2px 0 -4px}
#access .s-ac7-panel{
  position:relative;width:100%;max-width:336px;
  padding:9px 13px;border-radius:14px;
  background:#fff;border:.5px solid #e0e0de;
  box-shadow:0 18px 44px -28px rgba(22,21,21,.2);
  transform:rotate(-1.2deg);
  transition:transform .5s var(--spring);
}
@media(hover:hover) and (min-width:768px){
  #access:hover .s-ac7-panel{transform:rotate(-.4deg)}
}
.s-ac7-head b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#161515;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-ac7-cnt{font-variant-numeric:tabular-nums;white-space:nowrap}

.s-ac7-rows{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.s-ac7-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 11px;border:.5px solid #e0e0de;border-radius:11px;background:#fff;
}
.s-ac7-row--off{background:#fbfbfa}
.s-ac7-row--off .s-ac7-id b{color:#858585}
.s-ac7-row--off .s-ac7-ava,
.s-ac7-row--off .s-ac7-role{opacity:.6}

/* аватары — пастель БЕЗ зелёного: синий · фиолетовый · янтарный · серый */
.s-ac7-ava{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:50%;
  font-style:normal;font-size:11px;font-weight:600;
}
.s-ac7-ava--blue{background:#eef3fb;color:#3D6FE8}
.s-ac7-ava--violet{background:#f0eefa;color:#7a63c9}
.s-ac7-ava--amber{background:#fdf3e3;color:#c08427}
.s-ac7-ava--gray{background:#f1f1ef;color:#6f6f6d}

.s-ac7-id{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.s-ac7-id b{font-size:13px;font-weight:500;color:#161515;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* плашки ролей — УЖЕ (r27): padding 2px 7px, font 10px */
.s-ac7-role{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  padding:2px 7px;border-radius:6px;
  font-size:10px;font-weight:600;letter-spacing:.02em;text-align:center;
}
.s-ac7-role--fin{background:#E3EFFC;color:#3B82E0}
.s-ac7-role--buy{background:#DCF4E3;color:#2FA060}

/* кружок-галочка: вжим/пружину пишет движок r27:access */
.s-ac7-mark{
  flex:none;width:22px;height:22px;border-radius:50%;
  border:1.6px solid #d9d9d6;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  will-change:transform,background-color;
}
.s-ac7-mark--on{background:#1FB25A;border-color:#1FB25A}
.s-ac7-mark svg{display:block}

/* курсор Овнера: z-index 9, позицию пишет движок */
.s-ac7-cur{
  position:absolute;left:0;top:0;z-index:9;opacity:0;
  pointer-events:none;will-change:transform,opacity;
}
.s-ac7-arrow{display:block;filter:drop-shadow(0 3px 6px rgba(22,21,21,.3))}
.s-ac7-cur .cur-chip{position:absolute;left:12px;top:14px;font-size:11.5px;padding:4px 10px;white-space:nowrap}
.s-ac7-cur .cur-chip::before{display:none}

@media(max-width:991px){
  #access .s-ac7-panel{max-width:330px}
}
@media(max-width:767px){
  /* r35 (п.3): мокап СТРОГО 0° и ровно по центру. Раньше «криво»:
     панель width:100% + margin-right:24px переполняла флекс-центровку
     и выпирала влево (зазоры 6.5/30.5px) — асимметрия читалась как
     наклон. Теперь width:calc(100% - 14px) + margin:0 auto — зазоры
     равные, чип «Овнер» по-прежнему целиком в границах блока
     (проверено 320-767). transform:none !important — гейт от любого
     наклона, включая инлайновый (движок r31:featsmob панель не
     трогает: пишет transform только в кружки .s-ac7-mark и курсор —
     проверено, инлайн-стилей на панели/виньетке нет; r34 п.9 снял
     rotate(-1.2deg) базового правила).
     Мокап ОПУЩЕН ниже: сверху воздух 28px (был прижат кверху, 4-5px),
     низ панели плавно уходит под белый градиент подписи — до
     заголовка «Доступы к счетам» чистая гармоничная зона */
  #access .s-feats-mini-vis{justify-content:flex-start;padding:28px 18px 0}
  #access .s-ac7-vig{transform:none}
  #access .s-ac7-panel{width:calc(100% - 14px);max-width:none;margin:0 auto;padding:11px 12px;transform:none !important}
  .s-ac7-row{padding:7px 9px;gap:8px}
  .s-ac7-id b{font-size:12.5px}
  .s-ac7-role{font-size:9.5px;padding:2px 6px}
  /* r30 (п.22): чип снова СПРАВА от стрелки (как на ПК), компактный —
     целиком в границах блока */
  .s-ac7-cur .cur-chip{font-size:10.5px;padding:3px 8px}
  /* r31 (п.24): усиленное забеливание за подписью — заголовок и текст
     читаются чётко, нижние строки юзеров уходят под градиент плавно
     (длинный хвост из трёх ступеней). Клики курсора на ≤767 переведены
     на ВЕРХНИЕ строки (Mark/Danil) — движок r31:featsmob, замена
     r29:access */
  #access .s-feats-cap{
    padding-top:64px;
    background:linear-gradient(to top,
      #fff 58%,
      rgba(255,255,255,.97) 72%,
      rgba(255,255,255,.78) 85%,
      rgba(255,255,255,0));
  }
}

/* ---- r27:team ---- */
/* ---- r27:team ---- */
/* ============================================================
   r27 · team — группа 3 «Вся команда в одном кабинете»
   спенд (.s-sp4-) · роли (.s-rr4-) · кастом (.s-cb5-)

   ФИКСЫ r27 (концепция r25/r26 сохранена, только правки):
   · СПЕНД: сцена 624 → 524px (= правая колонка 300 + gap 24 + 200) —
     нижние края левого блока и «Кастомных настроек» ровно в линию.
     r33 (п.2): панель-мокап без окантовки — интерфейс прямо на
     карточке блока (full-bleed контейнер, паддинги у строк), шапки
     «Команда · спенд» и чипа «12 юзеров» больше нет; строк-баеров 11,
     хвост уходит за нижний край и режется overflow'ом (приём r19 п.3).
     Единое начертание значений таблицы (r28): роль, карты, спенд
     и деклайн — 12.5px / 500 / var(--ink); плашки статусов и шапка
     колонок не тронуты, «деклайн >20% красный» сохранён.
   · РОЛИ: подпись одной строкой → cap ~97px (28+24.4+6+22.5+16);
     виз-зона с padding-bottom 96px — тексты прав заканчиваются
     на 103px от низа, целиком НАД градиентом.
   · КАСТОМ: подпись одной строкой, cap ~97px; плашки подняты
     (cb5 padding-top 8, line-height 1.25) — низ второй строки на
     ~109px от низа, с дрейфом −3px запас ~9px. На 992–1240
     «свой SLA» скрыт, чтобы строка не резалась правым краем.

   САМОДОСТАТОЧНОСТЬ (r27): каркас ряда, сцена и все классы
   мокапов описаны здесь; извне используются только глобальные
   .card, .s-feats-panel (base), .s-feats-phead, .s-feats-dots,
   .s-feats-cnt, .s-feats-cap (base), .s-feats-mini,
   .s-feats-mini--ink (фон блока), .cur-chip.
   ============================================================ */

/* ---------- каркас ряда ---------- */
.s-feats-team{
  display:grid;grid-template-columns:7.2fr 4.8fr;gap:24px;
  align-items:stretch;margin-top:0;
}
.s-feats-team > .s-feats-item{min-width:0}
.s-feats-team-col{display:grid;grid-template-rows:300px 200px;gap:24px;min-width:0}
@media(min-width:992px){
  .s-feats-team > .s-feats-item--main{display:flex}
  /* низ сцены = низ правой колонки: 300 + 24 + 200 = 524px */
  .s-feats-team .s-sp4-scene{flex:1;width:100%;height:auto;min-height:524px}
  .s-feats-team-col .s-feats-mini{height:auto;min-height:0}
}

/* ============================================================
   1 · СПЕНД (.s-sp4-) — подпись сверху, таблица уходит за низ
   ============================================================ */

/* сцена (дубль базовых правил .s-feats-scene/--spend — r27) */
.s-sp4-scene{position:relative;overflow:hidden;height:524px}

/* подпись ВВЕРХУ сцены, без градиента — таблица начинается ниже */
#spend .s-feats-cap{
  top:0;bottom:auto;
  padding:24px 26px 0;
  background:none;
}

/* r33 (п.2): окантовки панели-мокапа больше НЕТ — интерфейс (поиск/
   фильтры/шапка/строки) живёт прямо на карточке блока: контейнер
   от края до края сцены, горизонтальные отступы несут сами строки
   (волоски-разделители full-bleed), хвост строк уходит ниже дна
   сцены и режется её overflow'ом без высветления */
.s-sp4{position:absolute;left:0;right:0;top:104px;bottom:0;z-index:2}
.s-sp4-defs{position:absolute;width:0;height:0}
.s-sp4-panel{position:relative;width:100%}

/* ---------- строка фильтров как в кабинете ---------- */
.s-sp4-filters{display:flex;align-items:center;gap:8px;margin:0 26px 12px}
.s-sp4-search{
  flex:1;min-width:0;max-width:240px;
  display:inline-flex;align-items:center;gap:7px;
  padding:6.5px 11px;border:.5px solid #e0e0de;border-radius:9px;background:#fff;
  font-size:11.5px;line-height:1.3;
}
.s-sp4-search svg{flex:none;color:var(--gray-2)}
.s-sp4-search em{
  font-style:normal;color:var(--gray-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s-sp4-chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:6.5px 11px;border:.5px solid #e0e0de;border-radius:9px;background:#fff;
  font-size:11.5px;font-weight:500;line-height:1.3;color:var(--ink);white-space:nowrap;
}
.s-sp4-chip svg{flex:none;color:var(--gray-2)}
.s-sp4-chip b{font-weight:500}
.s-sp4-chip--time{will-change:transform}

/* ---------- сетка колонок: юзер·роль·статус·карты·тренд·спенд·деклайн ----------
   r35 (п.4): приём дашборда (control.css, r30 п.7) — ВСЕ колонки по
   содержимому (фикс-треки под самое длинное значение, замерено в браузере:
   Юзер «Yaroslav»+аватар 79.2, Роль «Админ» 39.8, Статус-плашка 64,
   Карты «7388» 52, Тренд-свг 56, Спенд «$1,122,987.09» 94.8,
   Деклайн «22.63%» 47.6), а свободная ширина раздаётся РАВНОМЕРНО между
   колонками через justify-content:space-between — «дыры» Юзер↔Роль
   больше нет, отступы между ВСЕМИ столбцами одинаковые на любой ширине;
   шапка и строки используют ОДИН шаблон (.s-sp4-grid);
   column-gap:12px — минимальный зазор (как в дашборде) */
.s-sp4-grid{
  display:grid;align-items:center;column-gap:12px;
  justify-content:space-between;
  grid-template-columns:minmax(0,80px) 42px 64px 52px 56px 96px 48px;
}
.s-sp4-head{
  padding:2px 26px 7px;
  font-size:10px;color:var(--gray-2);letter-spacing:.04em;white-space:nowrap;
}
/* r30 (п.4/5): «Спенд» и «Деклайн» — по ЛЕВОМУ краю колонки, как
   остальные заголовки; значения этих колонок тоже влево (как в
   системе клиента) */
.s-sp4-c-r{text-align:left}

/* тело со строками — продолжается за нижним краем сцены;
   r33: паддинги по бокам у самих строк — волосок на всю ширину */
.s-sp4-rows{position:relative}
.s-sp4-row{padding:10.5px 26px;border-top:1px solid #f1f1ef}

/* юзер: аватар-кружок + имя */
.s-sp4-user{display:flex;align-items:center;gap:8px;min-width:0}
.s-sp4-user b{
  font-weight:500;font-size:12.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s-sp4-ava{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  font-style:normal;font-size:10px;font-weight:600;
}

/* роль — текст (Админ / Баер / Фин), r28: единое начертание значений
   таблицы — 12.5px / 500 / var(--ink) */
.s-sp4-role{
  font-size:12.5px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* статус-плашки: палитра r23 п.2, radius 6px и ЕДИНАЯ ширина (r25 п.2) */
.s-sp4-st{
  justify-self:start;display:inline-flex;align-items:center;justify-content:center;
  min-width:64px;padding:3px 8px;border-radius:6px;
  background:#DCF4E3;color:#2FA060;
  font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;text-align:center;
}
.s-sp4-st--blk{background:#FBDDDD;color:#E5484D}
.s-sp4-st--frz{background:#E3EFFC;color:#3B82E0}

/* карты: иконка stroke + число БЕЗ запятой — единое начертание 12.5/500/ink */
.s-sp4-cards{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.s-sp4-cards svg{flex:none;color:var(--gray-2)}

/* спарклайн: плавная Катмулл-Ром-безье + градиент-заливка;
   спад — тем же зелёным (не красный); d перерисовывает team.js */
.s-sp4-spark svg{display:block}
.s-sp4-line{
  stroke:#1FB25A;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  will-change:stroke-dashoffset;
}
.s-sp4-area{will-change:opacity}

/* спенд и деклайн — r30: единое начертание значений ВСЕХ колонок
   (12.5px / 500 / var(--ink), без letter-spacing), выравнивание
   ВЛЕВО вместе с заголовком колонки (как в системе клиента);
   красный деклайн ТОЛЬКО при >20% */
.s-sp4-sum{
  font-size:12.5px;font-weight:500;color:var(--ink);text-align:left;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.s-sp4-dec{
  font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink);text-align:left;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.s-sp4-dec--hot{color:#E5484D}

/* ============================================================
   2 · РОЛИ (.s-rr4-) — сетка 2×2 карточек ролей: курсор-чип роли,
   право и мини-иконка
   ============================================================ */
#roles .s-feats-mini-vis{
  flex:1;min-height:0;width:100%;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:14px 16px 96px;
}
/* подпись одной строкой: cap = 28+24.4+6+22.5+16 ≈ 97px —
   тексты прав (низ на 103px от низа) целиком над градиентом */
#roles .s-feats-cap{
  padding:28px 22px 16px;
  background:linear-gradient(to top,#fff 62%,rgba(255,255,255,0));
}

.s-rr4{
  flex:1;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;
}
.s-rr4-card{
  position:relative;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  padding:7px 10px 7px 8px;
  border:.5px solid #e0e0de;border-radius:10px;background:#fff;
  box-shadow:0 10px 22px -18px rgba(22,21,21,.16);
  will-change:background-color;
}

/* курсор-чип роли: стрелка сидит на углу чипа, как в фигме */
.s-rr4-cur{
  position:relative;flex:none;align-self:flex-start;display:inline-flex;
  padding:6px 0 0 7px;transform-origin:left top;
  will-change:transform;
}
.s-rr4-arrow{
  position:absolute;left:-1px;top:-2px;z-index:2;display:block;
  filter:drop-shadow(0 2px 4px rgba(22,21,21,.25));
}
.s-rr4-cur .cur-chip{font-size:11.5px;padding:3.5px 10px;filter:drop-shadow(0 4px 9px rgba(22,21,21,.18))}
.s-rr4-cur .cur-chip::before{display:none}

/* мини-иконка права — в углу карточки */
.s-rr4-ic{position:absolute;right:10px;top:10px;color:var(--gray-2)}
.s-rr4-ic svg{display:block}

/* право роли */
.s-rr4-perm{
  font-style:normal;color:var(--gray);font-size:11.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ============================================================
   3 · КАСТОМ (.s-cb5-) — плашки-возможности в 2 строки на графите,
   палитра тёмных панелей r19 п.2; дрейф пишет team.js
   ============================================================ */
#custom .s-feats-mini-vis{
  flex:1;min-height:0;width:100%;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:14px 16px 84px;
}
/* подпись одной строкой: cap ≈ 97px; низ второй строки плашек на
   ~109px от низа (14+8+29.4+10+29.4=90.8 от верха 200px блока) —
   обе строки целиком над градиентом даже при дрейфе ±3px */
#custom .s-feats-cap{
  padding:28px 22px 16px;
  background:linear-gradient(to top,#262321 62%,rgba(38,35,33,0));
}
#custom .s-feats-cap h3{color:#fff}
#custom .s-feats-cap p{color:#a9a5a1}

.s-cb5{
  display:flex;flex-direction:column;justify-content:flex-start;gap:10px;
  height:100%;padding:8px 4px 0;overflow:hidden;
}
.s-cb5-line{display:flex;justify-content:center;gap:7px;flex-wrap:nowrap}
.s-cb5-chip{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:7px 10px;border-radius:9px;
  background:#37332F;border:.5px solid rgba(255,255,255,.09);color:#ECEAE7;
  font-size:11.5px;font-weight:500;line-height:1.25;will-change:transform;
}
.s-cb5-chip i{display:inline-flex;flex:none;color:#7ddba4}
.s-cb5-chip em{font-style:normal}

/* ============================================================
   адаптив
   ============================================================ */
@media(min-width:992px) and (max-width:1240px){
  /* r33: контейнер остаётся full-bleed — ужимаются паддинги строк */
  .s-sp4-filters{margin-left:20px;margin-right:20px}
  .s-sp4-head{padding-left:20px;padding-right:20px}
  .s-sp4-row{padding-left:20px;padding-right:20px}
  /* узкий десктоп: колонку «Роль» прячем, сетку пересобираем в 6 колонок;
     r35 (п.4): те же фикс-треки по контенту + space-between из базового
     правила (Статус-плашка на этом брейке 78px, спарклайн 48px) */
  .s-sp4-role,.s-sp4-c-role{display:none}
  .s-sp4-grid{
    column-gap:12px;
    grid-template-columns:minmax(0,80px) 78px 52px 48px 96px 48px;
  }
  .s-sp4-search{max-width:150px}
  .s-sp4-chip{padding:5.5px 9px;font-size:11px}
  .s-sp4-spark svg{width:48px;height:16px}
  .s-sp4-st{min-width:78px;padding:3.5px 6px;font-size:10.5px}
  .s-rr4-perm{font-size:11px}
  /* узкой правой колонке 2 строки плашек не влезают с «своим SLA» —
     прячем его, обе строки остаются целиком видимыми */
  .s-cb5-chip--5{display:none}
}

@media(max-width:991px){
  /* ряд «команда» в одну колонку */
  .s-feats-team{grid-template-columns:1fr;gap:18px}
  .s-feats-team-col{grid-template-rows:none;grid-template-columns:1fr;gap:18px}

  /* сцена спенда в поток: подпись первой, под ней таблица.
     r33 (моба): высота блока СОКРАЩЕНА — контейнер фикс-высоты с
     собственным клипом, видно меньше строк (нижняя режется срезом);
     отрицательные боковые margin растягивают таблицу до краёв
     карточки сквозь паддинг сцены (волоски full-bleed) */
  .s-sp4-scene{height:auto;min-height:0;display:flex;flex-direction:column;padding:22px 18px 0}
  #spend .s-feats-cap{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    margin:0;padding:0 4px 4px;background:none;
  }
  .s-sp4{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    height:310px;margin:10px -18px 0;overflow:hidden;
  }
  .s-sp4-panel{max-width:none;margin:0}
  .s-sp4-filters{margin:0 18px 12px}
  .s-sp4-head{padding-left:18px;padding-right:18px}
  .s-sp4-row{padding-left:18px;padding-right:18px}
}

@media(max-width:767px){
  .s-sp4-scene{padding:18px 14px 0}
  /* r33: блок ещё короче — видно ~5 строк, нижняя режется срезом */
  .s-sp4{height:278px;margin:8px -14px 0}
  #spend .s-feats-cap{padding:0 2px 4px}
  .s-sp4-filters{gap:6px;margin:0 14px 10px}
  .s-sp4-head{padding-left:14px;padding-right:14px}
  .s-sp4-chip--st,.s-sp4-chip--role{display:none}

  /* r31 (п.26): роль и спарклайн скрыты; колонки — ФИКСИРОВАННЫЕ
     треки, одинаковые у шапки и у каждой строки (max-content в разных
     грид-контейнерах решался по-своему и столбцы «плыли»).
     r35 (п.4): колонка «Юзер» тоже по контенту (76px — аватар 20 +
     зазор 8 + «Yaroslav» 12px/500), свободная ширина — равномерно в
     зазоры через space-between (базовое правило): отступы между ВСЕМИ
     столбцами равны, каждый заголовок по ЛЕВОМУ краю своего столбца.
     Ширины под самый длинный контент: Статус «Активен», Карты «7388»,
     Спенд «$1,122,987.09», Деклайн «22.63%» (44px — шире каптиона
     «Деклайн» 43.6) */
  .s-sp4-grid{
    column-gap:12px;
    grid-template-columns:minmax(0,76px) 54px 48px 88px 44px;
  }
  .s-sp4-role,.s-sp4-c-role,.s-sp4-spark,.s-sp4-c-spark{display:none}
  .s-sp4-row{padding:9px 14px}
  .s-sp4-user b{font-size:12px}
  .s-sp4-ava{width:20px;height:20px;font-size:9px}
  /* r29 (п.13): статус-плашки уже — без единой min-width */
  .s-sp4-st{min-width:0;padding:2.5px 6px;font-size:10px}
  /* r28: значения строк и на мобилке единым начертанием */
  .s-sp4-cards,.s-sp4-sum,.s-sp4-dec{font-size:11.5px}

  .s-rr4{gap:7px}
  .s-rr4-card{padding:8px 9px}
  /* r30 (п.22): чип роли снова СПРАВА от стрелки (паттерн ПК),
     компактнее — целиком внутри своей карточки */
  .s-rr4-cur .cur-chip{font-size:11px;padding:3px 9px}
  /* r29 (п.14): подписи прав чуть крупнее (только ≤767) */
  .s-rr4-perm{font-size:12px}

  /* r29 (п.15): кастом компактнее — блок по контенту, подпись в потоке
     сразу под плашками, без пустого пространства; «свой SLA» скрыт */
  #custom.s-feats-mini{height:auto;min-height:0}
  #custom .s-feats-mini-vis{padding:16px 16px 0}
  #custom .s-cb5{height:auto;padding:4px 2px 6px;gap:8px}
  /* r30 (п.21): дрейф чипов кастома на мобилке выключен — !important
     гасит inline-transform interval-движка (приём r29: #crea height) */
  #custom .s-cb5-chip{transform:none !important}
  #custom .s-feats-cap{position:relative;left:auto;right:auto;bottom:auto;padding:14px 18px 18px;background:none}
  .s-cb5-chip--5{display:none}
  .s-cb5-line{flex-wrap:wrap}
  .s-cb5-chip{font-size:11px;padding:7px 10px}
}

@media(max-width:480px){
  /* совсем узко: прячем и «Карты»; r31 (п.26) + r35 (п.4): те же
     ФИКСИРОВАННЫЕ треки по контенту у шапки и строк + space-between
     (базовое правило) — отступы между ВСЕМИ столбцами равны; суммы
     чуть мельче (11px); на 320 юзер-колонка мягко ужимается (minmax) */
  .s-sp4-cards,.s-sp4-c-cards{display:none}
  .s-sp4-grid{grid-template-columns:minmax(0,76px) 54px 84px 44px;column-gap:12px}
  .s-sp4-sum,.s-sp4-dec{font-size:11px}
  .s-sp4-st{min-width:0;padding:2.5px 5px;font-size:9.5px}
  .s-rr4-perm{font-size:11.5px}
}

/* ============ control ============ */
/* ============================================================
   FBM CARDS v2 — s-control «Полный контроль всех расходов» (r28)
   бенто: Дашборд «Операции» (большая) + Telegram-бот (в айфоне)
          / API (графит #262321) / Отчёты (плитки форматов).
   r28: колонка «Карта» шире (••4176 не режется), зазоры таблицы
   выровнены — узкие колонки по содержимому, мерчант 1fr, единый
   gap (отдельная подгонка на 992–1150); лента транзакций строго
   статична по высоте: у тела таблицы фиксированная высота ровно
   в 6 строк + overflow hidden, седьмая строка живёт под клипом и
   въезжает сверху, нижняя уходит под клип; лого мерчантов —
   настоящие знаки (f, нота TikTok, G, Uber, Netflix, Anthropic);
   отчёты — БЕЗ модалки: три крупные плитки форматов + справа
   столбик «таймзона + чёрная кнопка».
   r35: на мобе строки ленты — единый кегль 13px (500 ink / 400 gray),
   вторая строка «[плашка MC] ••номер, имя карты», справа сумма и юзер
   серым (как в реальном ЛК); лого MC уменьшен (плашка 20×13, лого 11px);
   строка отчётов «таймзона · июль · Выгрузить» — grid 3 равных колонки.
   r39: имя карты видно и на ПК — в колонке «Карта» после номера через
   запятую («••4176, Карта ФБ»); колонка «Карта» пересчитана по самому
   длинному контенту пула («••9134, Карта для ТТ»), равные зазоры между
   всеми колонками сохранены прежним механизмом: фикс-ширины по контенту
   + justify-content:space-between (см. r30 п.7 ниже).
   r40: гео-подписи мерчантов убраны (только название, по вертикали по
   центру ячейки); трек «Мерчант» пересчитан по самому длинному имени
   («FACEBK *B7H4LN» 105.1px + иконка 26 + gap 9 = 140.1 → 142px, запас
   2px как у r39-колонки «Карта») на ВСЕХ десктоп-ширинах — на ≤1150
   имя не ужать, прежние 132px резали бы его многоточием; кружки юзеров
   и мерчантов больше не бреются клипом ячейки (см. комментарии у
   .s-control-td-m / .s-control-td-u).
   CSS самодостаточен: все классы мокапов описаны здесь; извне —
   только глобальная утилита .card.
   ============================================================ */
.s-control{--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace}
.s-control [id]{scroll-margin-top:96px}
.ta-r{text-align:right}

/* ---------------- бенто-грид ---------------- */
.s-control-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px}
.s-control-item{display:flex;flex-direction:column;min-width:0}
.s-control-item--dash{grid-column:span 4}
.s-control-item--tg{grid-column:span 2}
.s-control-item--api{grid-column:span 3}
.s-control-item--rep{grid-column:span 3}

/* ---------------- подпись ВНУТРИ карточки (паттерн секции) ----------------
   большие сцены: r25 п.3 — градиент плотный (62%) и высокий (76px);
   малые сцены (api/rep, 236px) — градиент ниже, чтобы контент
   помещался: у API код уходит под градиент, у отчётов композиция
   целиком НАД подписью */
.s-control-txt{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:76px 26px 22px;
  background:linear-gradient(to top,#fff 62%,rgba(255,255,255,0));
  border-radius:0 0 var(--r-lg) var(--r-lg);
  pointer-events:none;
}
.s-control-txt h3{font-size:23px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.s-control-txt p{font-size:15px;line-height:1.5;color:var(--gray);max-width:54ch}
/* у широкого дашборда подпись длиннее — пусть ложится в две строки */
.s-control-scene--dash .s-control-txt p{max-width:none}

/* тёмная подпись на графитовом API-блоке */
.s-control-scene--ink .s-control-txt{background:linear-gradient(to top,#262321 62%,rgba(38,35,33,0))}
.s-control-scene--ink .s-control-txt h3{color:#fff}
.s-control-scene--ink .s-control-txt p{color:#a9a5a1}

/* малые сцены: подпись компактнее (после ink-правила — перекрывает) */
.s-control-scene--api .s-control-txt{padding:40px 26px 20px}
.s-control-scene--rep .s-control-txt{
  padding:22px 26px 20px;
  background:linear-gradient(to top,#fff 55%,rgba(255,255,255,0));
}

/* ---------------- сцена-канвас ---------------- */
.s-control-scene{position:relative;flex:1;overflow:hidden}
/* r29: жёсткие высоты — ни одна фаза анимаций не может менять высоту сцены */
.s-control-scene--dash{height:520px;flex:0 0 520px}
.s-control-scene--tg{height:520px;flex:0 0 520px}
.s-control-scene--api{height:236px;flex:0 0 236px}
.s-control-scene--rep{height:236px;flex:0 0 236px}
.s-control-scene--ink{background:#262321;border-color:#262321}

/* ============================================================
   1) ДАШБОРД «Операции» — r33 (п.3): окантовка/фон белой панели
      убраны, статы и лента живут ПРЯМО на карточке блока: контейнер
      растянут на всю сцену (0/0/0/0), нижние строки уходят под
      градиент подписи (z-index 6 > 1)
   ============================================================ */
.s-control-dash{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;
  display:flex;flex-direction:column;overflow:hidden;padding:0;
}

/* статс-строка: «Операций» уже, «Спенд» шире — спарклайн на всю ячейку */
.s-control-stats{
  display:grid;grid-template-columns:.72fr 1.6fr .9fr 1.15fr;
  border-bottom:1px solid #ececec;flex:none;
}
.s-control-stat{padding:15px 18px 13px;border-left:1px solid #f1f1ef;min-width:0}
.s-control-stat:first-child{border-left:0}
/* r30 п.4: line-height/высота статов ЗАФИКСИРОВАНЫ в px — тик числа, tabular-
   nums и поздняя загрузка шрифта (FOUT) не могут изменить высоту строки статов,
   а значит и intrinsic-высоту панели дашборда. */
.s-control-stat small{display:block;font-size:11px;line-height:14px;height:14px;color:var(--gray);margin-bottom:5px;letter-spacing:.01em}
.s-control-stat b{display:flex;align-items:center;gap:8px;height:22px;line-height:22px;font-size:18px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:0}
.s-control-frac{flex:none;font-style:normal;font-size:10px;font-weight:600;color:var(--gray);background:var(--panel);padding:3px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.s-control-num{font-variant-numeric:tabular-nums}
.s-control-stat--ops{padding-right:10px}
/* спарклайн тянется вправо на всю свободную ширину ячейки «Спенд» */
.s-control-stat--spend{padding-right:12px}
.s-control-spark{flex:1 1 100px;min-width:60px;max-width:130px;height:18px}

/* таблица транзакций: Дата · Мерчант · Статус · Карта · Юзер · Сумма.
   r30 п.7: ВСЕ колонки — по содержимому (max-content-подобные фикс-ширины,
   мерчант БОЛЬШЕ не 1fr, поэтому нет «дыры» после него), а свободная ширина
   раздаётся РАВНОМЕРНО между всеми колонками через justify-content:space-between
   — зазоры одинаковые на любой ширине; шапка (.s-control-th наследует шаблон)
   и строки используют ОДИН и тот же трек-шаблон, поэтому колонки совпадают
   по вертикали; column-gap:12px — минимальный зазор.
   r39: «Карта» = плашка 30 + gap 8 + «••9134, Карта для ТТ» — самый длинный
   контент пула, трек пересчитан под него (было 86px, только номер);
   свободная ширина по-прежнему раздаётся space-between поровну.
   r40: «Мерчант» без гео-строки = иконка 26 + gap 9 + «FACEBK *B7H4LN»
   (105.1px @12.5/500) = 140.1 → трек 142px (был 140 — самое длинное имя
   уже цеплялось за кромку). */
.s-control-tbl{flex:1;display:flex;flex-direction:column;min-height:0}
.s-control-tr{
  display:grid;
  grid-template-columns:44px 142px 72px 170px 80px 68px;
  justify-content:space-between;
  align-items:center;column-gap:12px;
  padding:0 18px;height:52px;border-bottom:1px solid #f4f4f2;
}
/* заголовки столбцов: С Заглавной, дальше строчными — БЕЗ капса */
.s-control-th{
  height:36px;flex:none;
  font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--gray);
  border-bottom:1px solid #ececec;
}
/* тело ленты: ФИКСИРОВАННАЯ высота — сцена статична; r33: дашборд
   растянут на всю сцену, видно 8 строк (520 − статы 70 − шапка 36 =
   414, последние 2px восьмой строки клипятся сценой), остальные
   строки пула всегда под клипом; при въезде новой строки сверху
   нижняя уходит под клип, высота контейнера не меняется ни в одной фазе */
.s-control-tbody{height:416px;flex:none;overflow:hidden}
.s-control-tr>span{min-width:0;font-size:12.5px;overflow:hidden}

/* один кегль/вес для основного текста (12.5/500 ink),
   вторичный — один серый (10.5 var(--gray)) */
.s-control-td-d{display:flex;flex-direction:column;line-height:1.25;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.s-control-td-d i{font-style:normal;font-size:10.5px;font-weight:400;color:var(--gray)}

/* мерчант: круглая иконка сервиса (настоящий знак) + название.
   r40 (п.1): гео-подписи убраны — .s-control-mtxt однострочный, центр по
   вертикали даёт align-items:center самой ячейки. Без гео контент ячейки
   стал ровно 26px (иконка) — ТОЧНО в высоту клипа overflow:hidden ячейки
   (.s-control-tr>span), а при body{zoom:.9} (r32, ≥992) край круга падает
   на дробный девайс-пиксель и клип бреет его сверху/снизу; padding 2px 0
   даёт кругу воздух внутри клипа (строка 52px, центрирование не съезжает) */
.s-control-td-m{display:flex;align-items:center;gap:9px;min-width:0;padding:2px 0}
.s-control-mico{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel);overflow:hidden;
}
/* r33 (п.3): ФБ — классическая иконка: синий круг #1877F2, белая f */
.s-control-mico.is-fb{background:#1877F2}
/* белый круг с волоском: цветная G, чёрный знак Anthropic */
.s-control-mico.is-gg,.s-control-mico.is-an{background:#fff;border:.5px solid #e0e0de}
/* чёрный круг: нота TikTok, белый Uber, красная N Netflix */
.s-control-mico.is-tt,.s-control-mico.is-ub,.s-control-mico.is-nf{background:#161515}
.s-control-mico svg{display:block}
.s-control-mtxt{display:block;line-height:1.25;font-weight:500;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* статусы — палитра r23, скругление 6px, одной ширины, min-width 64px */
.s-control-bdg{
  display:inline-block;min-width:64px;text-align:center;
  font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;
}
.s-control-bdg.is-ok{background:#DCF4E3;color:#2FA060}
.s-control-bdg.is-ref{background:#F7DEF2;color:#C654B8}

/* карта: мини-плашка с лого MC + последние цифры + короткое ИМЯ карты.
   r39 (п.1): имя (.s-control-cnm) видно и на ПК — после номера через
   запятую, как в TG-бабблах («••4176, Карта ФБ»); запятая — ::after у
   номера (правило общее с мобом), зазор после неё поджат отрицательным
   margin (единый flex-gap 8px делил бы плашку/номер и номер/имя одинаково,
   а после запятой нужен обычный пробел ~5px); имя тем же кеглем 12.5/500
   ink, при нехватке места режется многоточием (min-width:0 + ellipsis) */
.s-control-td-c{display:flex;align-items:center;gap:8px;white-space:nowrap}
.s-control-mini{
  flex:none;width:30px;height:20px;border-radius:5px;background:#fff;
  border:.5px solid #e0e0de;display:inline-flex;align-items:center;justify-content:center;
}
.s-control-mini img{display:block}
.s-control-td-c i{font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.s-control-td-c i::after{content:","}
.s-control-cnm{
  display:block;min-width:0;margin-left:-3px;
  font-size:12.5px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* юзер: аватар-буква + имя.
   r40 (п.2): кружок 22px был РОВНО высотой ячейки (текст 12.5×1.5=18.75 ниже),
   а клип overflow:hidden ячейки при body{zoom:.9} бреет его край на дробном
   девайс-пикселе — padding 2px 0 отводит клип от круга (см. .s-control-td-m) */
.s-control-td-u{display:flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);white-space:nowrap;padding:2px 0}
.s-control-td-u em{flex:none;font-style:normal;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;background:var(--a,#161515)}

/* сумма — тот же кегль/вес, что и основной текст */
.s-control-td-s{font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.s-control-td-s.is-out{color:var(--ink)}
.s-control-td-s.is-in{color:var(--green-ink)}

/* въезжающая транза (движение — margin-top/opacity из JS-тиков) */
.s-control-tr[data-row]{will-change:margin-top,opacity}

/* ============================================================
   2) TELEGRAM-БОТ — корпус 300px, рамка 6px, телефон уходит
      низом под подпись (низ на ~72px ниже кромки сцены)
   ============================================================ */
.s-control-phone{
  position:absolute;left:50%;top:24px;transform:translateX(-50%);
  width:300px;height:568px;z-index:1;
  background:#141312;border-radius:46px;padding:6px;
  box-shadow:0 34px 64px -28px rgba(22,21,21,.5),0 0 0 .5px rgba(22,21,21,.14);
}
.s-control-island{
  position:absolute;left:50%;top:15px;transform:translateX(-50%);
  width:76px;height:21px;border-radius:999px;background:#0b0a0a;z-index:3;
}
.s-control-phone-scr{
  position:relative;height:100%;background:#fff;border-radius:40px;overflow:hidden;
  display:flex;flex-direction:column;
}

/* статусбар: одна ось с Island, время слева, сигнал/wifi/батарея справа */
.s-control-statusbar{
  display:flex;align-items:center;justify-content:space-between;
  height:30px;margin:10px 25px 0;padding:0;flex:none;
}
.s-control-time{font-size:13.5px;font-weight:600;line-height:1;color:#161515;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.s-control-sysico{display:inline-flex;align-items:center;gap:5px}
.s-control-sysico svg{display:block;flex:none}
.s-control-batt{position:relative;flex:none;width:22px;height:11px;margin-right:3px;border:1px solid rgba(22,21,21,.5);border-radius:3.5px;display:inline-block}
.s-control-batt::after{content:"";position:absolute;right:-3.5px;top:3px;width:2px;height:5px;border-radius:0 2px 2px 0;background:rgba(22,21,21,.5)}
.s-control-batt i{position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:72%;border-radius:2px;background:#161515}

/* шапка чата */
.s-control-chat-head{
  display:flex;align-items:center;gap:10px;
  padding:7px 14px 9px 12px;border-bottom:.5px solid #ececec;flex:none;
}
.s-control-chat-back{flex:none}
.s-control-chat-ava{
  width:36px;height:36px;border-radius:50%;flex:none;
  border:.5px solid #e0e0de;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}
.s-control-chat-ava img{display:block;width:22px;height:22px;object-fit:contain}
.s-control-chat-name{display:flex;flex-direction:column;gap:1px;font-size:14px;font-weight:600;line-height:1.2;color:#161515;min-width:0}
.s-control-chat-name small{font-size:11px;font-weight:400;color:#8a8a88}
.s-control-chat-more{margin-left:auto;flex:none}

/* тело чата */
.s-control-chat-body{
  flex:1;padding:10px 14px 18px;background:#f2f3f7;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;overflow:hidden;
}
.s-control-day{align-self:center;font-size:10px;color:#8a8a88;background:rgba(22,21,21,.05);padding:3px 11px;border-radius:999px;margin-bottom:1px}

/* бабблы — стиль образца клиента (r27): шапка «иконка + тип:»,
   цитата-блок мерчанта с красной полоской и серыми кавычками,
   строки «ключ: значение», внизу баланс + время */
.s-control-bub{
  position:relative;width:238px;max-width:92%;
  background:#fff;border-radius:15px 15px 15px 5px;
  padding:9px 11px 7px;
  border:.5px solid #e9e9e6;box-shadow:0 1px 3px rgba(22,21,21,.06);
}
.s-control-bub-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#161515;line-height:1.3}
.s-control-bub-h svg{flex:none}
.s-control-quote{
  display:flex;align-items:center;gap:8px;min-width:0;
  margin:6px 0 5px;padding:5px 8px 5px 9px;
  background:rgba(229,72,77,.06);border-left:2.5px solid #E5484D;
  border-radius:2px 7px 7px 2px;
}
.s-control-quote.is-green{background:rgba(31,178,90,.07);border-left-color:#1FB25A}
.s-control-quote-tx{flex:1;font-size:11px;font-weight:500;color:#161515;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-control-quote-q{flex:none}
.s-control-kv{font-size:11.5px;line-height:1.55;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-control-kv b{font-weight:600;color:#161515;font-variant-numeric:tabular-nums}
.s-control-kv b.is-out{color:#161515}
.s-control-kv b.is-in{color:var(--green-ink)}
.s-control-bub-ft{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:6px;padding-top:5px;border-top:1px solid #f2f2f0;
  font-size:11px;color:var(--gray);white-space:nowrap;
}
.s-control-bub-bal{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.s-control-bub-bal svg{flex:none}
.s-control-bub-bal b{font-weight:600;color:#161515;font-variant-numeric:tabular-nums}
.s-control-bub-ft time{flex:none;font-size:9.5px;color:var(--gray-2);font-variant-numeric:tabular-nums}

/* r30 п.6: код 3DS — как inline-code в Telegram: мелкий моноширинный на
   светло-серой «копируемой» плашке (радиус 6px, паддинг 3px 8px, #f1f1ef,
   tabular-nums), рядом мелкая иконка копирования. Цитата-мерчант из этого
   сообщения убрана (в «Новая операция» остаётся). */
.s-control-3ds{display:flex;align-items:center;margin:5px 0 4px}
.s-control-3ds-code{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  color:#161515;font-variant-numeric:tabular-nums;
  background:#f1f1ef;border-radius:6px;padding:3px 8px;line-height:1.25;
}
.s-control-3ds-copy{flex:none;opacity:.85}

/* забеливание внизу телефона */
.s-control-phone-fade{
  position:absolute;left:10px;right:10px;bottom:10px;height:190px;z-index:4;
  border-radius:0 0 32px 32px;pointer-events:none;
  background:linear-gradient(to top,#fff 34%,rgba(255,255,255,0));
}

/* ============================================================
   3) API — шапка своей строкой, код начинается ПОД ней,
      12px/1.55, хвост уходит под тёмный градиент подписи
   ============================================================ */
.s-control-api-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px 0;position:relative;z-index:2;
}
.s-control-api-head b{font-size:16px;font-weight:600;color:#ECEAE7;letter-spacing:-.01em;white-space:nowrap}
.s-control-api-lang{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:12.5px;font-weight:500;color:#A9A5A1;
}
.s-control-code{
  position:absolute;left:24px;right:20px;top:52px;bottom:-20px;z-index:1;margin:0;
  font-family:var(--mono);font-size:12px;line-height:1.55;
  color:#8f8b86;white-space:normal;overflow:hidden;
}
.s-control-code .ln{display:block;white-space:pre}
.s-control-code .m{font-weight:600;color:#F97583}
.s-control-code .g{color:#79B8FF}
.s-control-code .k{color:#ECEAE7}
.s-control-code .u{color:#B392F0}
.s-control-caret{
  display:inline-block;width:7px;height:14px;margin-left:3px;vertical-align:-2px;
  background:#7ddba4;
}

/* ============================================================
   4) ОТЧЁТЫ — без модалки: три крупные плитки форматов (Excel /
      Google Sheets / CSV, настоящие лого) на белом фоне сцены,
      справа столбик: строка таймзоны + чёрная кнопка «Выгрузить».
      Волосяные рамки, радиусы панелей 10–12px.
   ============================================================ */
.s-control-rep{
  position:absolute;left:22px;right:22px;top:20px;z-index:1;
  display:flex;align-items:stretch;gap:12px;
}
.s-control-rep-fmts{flex:1;display:flex;gap:10px;min-width:0}
.s-control-rep-fmt{
  flex:1;min-width:0;height:96px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:#fff;border:.5px solid #e0e0de;border-radius:12px;
  box-shadow:0 12px 26px -20px rgba(22,21,21,.2);
}
.s-control-rep-fico{height:36px;display:flex;align-items:center;justify-content:center}
.s-control-rep-fico img,.s-control-rep-fico svg{display:block;flex:none}
.s-control-rep-fmt em{
  font-style:normal;font-size:12px;font-weight:600;color:var(--ink);line-height:1;
  max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* r30 п.9: мокап отчётов полностью статичен — зелёного выделения плиток нет
   (класс is-on и его ротация удалены из HTML и JS). */
.s-control-rep-side{flex:none;width:150px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.s-control-rep-tz{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;
  background:var(--panel);border-radius:8px;padding:8px 10px;
}
.s-control-rep-tz svg{flex:none;color:var(--gray)}
/* r31 п.31: кнопка периода «июль» — живёт только на мобе (≤767), где между
   таймзоной и «Выгрузить» была пустота; на ПК столбик без неё — скрыта */
.s-control-rep-per{display:none}
.s-control-rep-btn{
  display:block;text-align:center;padding:9px 12px;border-radius:9px;
  background:#161515;color:#fff;font-size:12px;font-weight:600;white-space:nowrap;
}

/* r30 п.4: панели мокапов статичны — БЕЗ hover-трансформов и transition
   на .s-control-dash / .s-control-phone / .s-control-rep (клиент репортит
   «движущиеся» мокапы). Курсоры/клики в этой секции не двигают панели. */

/* ---------------- адаптив ---------------- */
/* узкий десктоп (992–1150): дашборд уже — узкие колонки и gap чуть
   компактнее, чтобы мерчант не резался; плитки отчётов компактнее */
@media(max-width:1150px){
  /* r39: «Карта» с именем — трек шире (было 82px); r40: «Мерчант» 142px
     как в базе (без гео имя не ужать — 132px резали бы «FACEBK *B7H4LN»),
     «Юзер» 80px как в базе (76px на волосок резали «Yaroslav»: 22+6+49.2
     = 77.2px); бюджет: 40+142+68+170+80+66 + 5×10 gap = 616 < ширины строки */
  .s-control-tr{grid-template-columns:40px 142px 68px 170px 80px 66px;column-gap:10px;padding:0 14px}
  .s-control-stat{padding:14px 12px 12px}
  .s-control-stat b{font-size:16px;gap:6px}
  .s-control-frac{padding:3px 6px}
  .s-control-rep-side{width:140px}
  .s-control-rep-tz{font-size:11px;padding:7px 8px}
  .s-control-rep-fmt em{font-size:11px}
}
@media(max-width:991px){
  .s-control-grid{grid-template-columns:1fr;gap:24px}
  .s-control-item--dash,.s-control-item--tg,.s-control-item--api,.s-control-item--rep{grid-column:auto}
  .s-control-scene--dash{height:540px;flex:0 0 540px}
  .s-control-scene--tg{height:540px;flex:0 0 540px}
  .s-control-scene--api{height:236px;flex:0 0 236px}
  .s-control-scene--rep{height:236px;flex:0 0 236px}
  /* карточка снова во всю ширину — тот же принцип равных зазоров
     (фикс-колонки + space-between наследуется из базового правила);
     r39: шаблон = базовый; r40: «Мерчант» 142px, как в базе */
  .s-control-tr{grid-template-columns:44px 142px 72px 170px 80px 68px;column-gap:12px;padding:0 18px}
  .s-control-stat{padding:15px 18px 13px}
  .s-control-stat b{font-size:18px;gap:8px}
  .s-control-frac{padding:3px 8px}
  .s-control-rep{max-width:620px;margin:0 auto}
  .s-control-rep-side{width:150px}
  .s-control-rep-tz{font-size:12px;padding:8px 10px}
  .s-control-rep-fmt em{font-size:12px}
}
@media(max-width:767px){
  .s-control-grid{gap:20px}
  .s-control-txt{padding:64px 18px 18px}
  .s-control-txt h3{font-size:21px}
  .s-control-txt p{font-size:14px}
  .s-control-scene--api .s-control-txt{padding:36px 18px 16px}
  .s-control-scene--rep .s-control-txt{padding:20px 18px 16px}
  /* r31 п.29: забеливание за заголовком «Дашборд» плотнее и выше — сплошной
     белый под текстом подписи, ступень .9 заметно выше, хвост длиннее:
     заголовок и подпись читаются идеально, лента гаснет раньше */
  .s-control-scene--dash .s-control-txt{
    padding-top:96px;
    background:linear-gradient(to top,#fff 58%,rgba(255,255,255,.9) 74%,rgba(255,255,255,0));
  }

  /* r35: строки транзакций на мобе — жирнее и ОДНИМ начертанием, состав как
     в реальном ЛК клиента: слева иконка 24px + колонка «мерчант / [плашка MC]
     ••номер, имя карты», СПРАВА — «сумма / юзер серым». Единый кегль 13px:
     основное (мерчант, сумма) 500 ink; r36 (п.1): вторичное (номер+имя карты,
     юзер) НА ОДНО НАЧЕРТАНИЕ ЖИРНЕЕ — 500 (было 400: слишком тонко), серый
     var(--gray) тем же кеглем. Дата/время на мобе скрыты (display:none;
     движок r33:spenddash продолжает штамповать их в .s-control-td-d — на ПК
     дата видна, на мобе штамп уходит в скрытый узел, layout не трогает).
     Лого MC — мини-плашка как на ПК/в хиро: 20×13 с маленьким лого 11px
     ВНУТРИ (раньше лого 18×11 заливало плашку целиком и выглядело огромным). */
  .s-control-scene--dash{height:500px;flex:0 0 500px}
  /* r33: и на мобе дашборд без окантовки — на всю сцену */
  .s-control-dash{left:0;right:0;top:0}
  .s-control-stats{grid-template-columns:.85fr 1.15fr}
  .s-control-stat{padding:11px 14px 10px}
  .s-control-stat:nth-child(3),.s-control-stat:nth-child(4){border-top:1px solid #f1f1ef}
  .s-control-stat:nth-child(3){border-left:0}
  .s-control-stat b{font-size:16px;gap:6px}
  .s-control-spark{flex:1 1 60px;min-width:44px;max-width:96px;height:16px}
  .s-control-th{display:none}
  .s-control-tr{
    grid-template-columns:24px minmax(0,1fr) max-content;
    grid-template-areas:"ico m amt" "ico c u";
    justify-content:normal;justify-items:start;
    align-content:center;align-items:center;
    column-gap:8px;row-gap:3px;
    padding:0 16px;height:54px;border-bottom:1px solid #ececec;
  }
  .s-control-tbody{height:378px}  /* r33: 7 строк по 54px (низ под градиентом подписи), остальные под клипом */
  .s-control-tr > span:nth-child(3){display:none}
  .s-control-td-d{display:none}
  .s-control-td-m{display:contents}
  .s-control-mico{grid-area:ico;width:24px;height:24px}
  .s-control-mico svg{width:14px;height:14px}
  .s-control-mico.is-fb svg{width:24px;height:24px}
  /* r40: правило .s-control-mtxt i{display:none} удалено — гео-подписей
     больше нет в разметке (см. базовый .s-control-mtxt) */
  .s-control-mtxt{grid-area:m;display:block;font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .s-control-td-c{grid-area:c;gap:4px;min-width:0;max-width:100%;overflow:hidden}
  .s-control-mini{width:20px;height:13px;border-radius:3.5px}
  .s-control-mini img{width:11px;height:auto}
  /* запятая после номера теперь в базовом правиле (r39), тут не дублируем;
     margin-left:0 — сброс десктопного поджатия (на мобе gap уже 4px) */
  .s-control-td-c i{font-size:13px;font-weight:500;line-height:1.4;color:var(--gray)}
  .s-control-cnm{display:block;min-width:0;margin-left:0;font-size:13px;font-weight:500;line-height:1.4;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* r40: сброс десктопного padding 2px 0 (защита кружка от клипа) — на мобе
     аватар скрыт, зум не действует, а паддинг раздвигал бы вторую строку */
  .s-control-td-u{grid-area:u;display:block;justify-self:end;padding:0;font-size:13px;font-weight:500;line-height:1.4;color:var(--gray);white-space:nowrap}
  .s-control-td-u em{display:none}
  .s-control-td-s{grid-area:amt;justify-self:end;font-size:13px;font-weight:500;line-height:1.4}

  /* tg: телефон чуть уже */
  .s-control-scene--tg{height:520px;flex:0 0 520px}
  .s-control-phone{width:280px;height:548px;top:20px}
  .s-control-statusbar{margin:10px 22px 0}
  .s-control-bub{width:226px}

  /* api: чуть выше сцена — подпись на узком экране в две строки */
  .s-control-scene--api{height:252px;flex:0 0 252px}
  .s-control-api-head{padding:14px 18px 0}
  .s-control-api-head b{font-size:15px}
  .s-control-code{left:18px;right:12px;top:48px;font-size:11.5px;line-height:1.55}

  /* отчёты: плитки рядом, таймзона и кнопка одной строкой ниже */
  .s-control-scene--rep{min-height:280px}
  .s-control-rep{left:18px;right:18px;top:18px;flex-direction:column;gap:10px}
  .s-control-rep-fmt{height:88px;gap:7px}
  /* r31 п.31: между таймзоной и «Выгрузить» — кнопка периода «июль»,
     стиль 1в1 с чипом таймзоны (var(--panel), радиус 8, 12/600, шеврон) */
  .s-control-rep-per{
    display:flex;gap:6px;
    font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;
    background:var(--panel);border-radius:8px;
  }
  .s-control-rep-per svg{flex:none;color:var(--gray)}
  /* r35: «UTC+3 · Москва», «июль» и «Выгрузить» — одна РОВНАЯ строка:
     grid из трёх равных колонок (1fr 1fr 1fr), зазоры 8px; у всех трёх
     плашек одна высота 34px (вертикальный паддинг убран, центрирование
     флексом) — ширины и высоты совпадают, стык аккуратный. Радиус кнопки
     на мобе = 8px, как у чипов, чтобы строка читалась единой. */
  .s-control-rep-side{width:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .s-control-rep-tz,.s-control-rep-per,.s-control-rep-btn{
    height:34px;padding:0 8px;min-width:0;
    display:flex;align-items:center;justify-content:center;
  }
  .s-control-rep-btn{border-radius:8px}
}
/* r31 п.31: узкие экраны — Astrolab широкий, три чипа с полным «UTC+3 · Москва»
   в одну строку не помещаются: до 479px город скрыт (остаётся «UTC+3»),
   до 359px чипы дополнительно ужимаются — строка не переполняется даже на 320 */
@media(max-width:479px){
  .s-control-rep-tzct{display:none}
}
@media(max-width:359px){
  /* r35: зазоры держим 8px и на 320 — ужимаются только кегль и паддинги,
     высота 34px и равные ширины колонок сохраняются */
  .s-control-rep-tz,.s-control-rep-per{font-size:11px;padding:0 6px;gap:4px}
  .s-control-rep-btn{font-size:11px;padding:0 6px}
}
@media(prefers-reduced-motion:reduce){
  .s-control-caret{opacity:1 !important;background:#7ddba4 !important}
}

/* ============ review ============ */
/* ============================================================
   s-review — обзор платформы: видео слева + перки справа
   r23: без мини-CTA, чип поверх превью, иконки без подложек,
   карточка ужата по высоте под видео (перки крупнее, с волосками)
   ============================================================ */
.s-review{position:relative;scroll-margin-top:90px;padding-bottom:88px}
.s-review .sec-head{margin-bottom:44px}

/* ---------- card: видео / перки ---------- */
/* r31 п.30: без тени на всех вьюпортах (в разметке висит .card--sh —
   перекрываем здесь, волосяная рамка от .card остаётся) */
.s-review-card{
  position:relative;display:flex;align-items:stretch;
  padding:0;overflow:hidden;
  box-shadow:none;
}

/* ---------- видео (56%) ---------- */
.s-review-media{position:relative;flex:0 0 56%;min-width:0;display:flex;border-radius:14px 0 0 14px;overflow:hidden}
.s-review-iframe{
  display:block;width:100%;align-self:stretch;height:100%;
  aspect-ratio:16/9;border:0;background:#101010;
}

/* ---------- чип «видео · 8 мин» — оверлей поверх превью ---------- */
.s-review-tag{
  position:absolute;z-index:2;top:12px;left:12px;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:10px;
  background:#fff;border:.5px solid #e0e0de;
  font-size:12.5px;font-weight:500;color:var(--ink);line-height:1;white-space:nowrap;
}
.s-review-tag svg{flex:none}

/* ---------- перки: голые иконки, волосяные разделители ---------- */
.s-review-perks{
  display:flex;flex-direction:column;justify-content:center;
  flex:1 1 auto;min-width:0;padding:10px 40px;
}
.s-review-perks ul{display:flex;flex-direction:column;width:100%}
.s-review-perks li{display:flex;align-items:flex-start;gap:15px;padding:17px 2px}
.s-review-perks li+li{border-top:1px solid var(--line)}
.s-review-ic{flex:none;width:21px;height:21px;margin-top:2px}
.s-review-perks li>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.s-review-perks b{font-size:16.5px;font-weight:500;color:var(--ink);line-height:1.3}
.s-review-perks i{font-style:normal;font-size:14px;color:var(--gray);line-height:1.4}

/* ---------- рукописная подпись про овнера + живая стрелка-загогулина к видео ---------- */
.s-review .container{position:relative}
.s-review-mark{
  position:absolute;left:70px;bottom:-58px;z-index:3;
  font-size:21px;line-height:1.16;text-align:right;
  color:#7c7a75;
  transform:rotate(-2.5deg);
  pointer-events:none;user-select:none;
}
.s-review-mark-arr{
  position:absolute;right:-76px;bottom:12px;
  width:64px;height:52px;
  transform:rotate(2deg);
}

/* ---------- adaptive ---------- */
@media(max-width:991px){
  /* r34 п.11: базовый padding-bottom:88px нужен только под рукописную
     подпись, висящую ниже карточки; здесь она скрыта — возвращаем секции
     стандартный отступ .sec (64px), чтобы зазор был как у остальных */
  .s-review{padding-bottom:64px}
  .s-review-card{flex-direction:column}
  .s-review-media{flex:none;width:100%}
  .s-review-perks{padding:8px 16px}
  .s-review-perks li{padding:15px 2px}
  .s-review-mark{display:none}
}
@media(max-width:767px){
  /* r34 п.11: на мобе все .sec идут с padding 40px — секция обзора не исключение
     (раньше её 88px из базы перебивали мобильное правило shared.css) */
  .s-review{padding-bottom:40px}
  .s-review .sec-head{margin-bottom:30px}
  .s-review-card{padding:8px;border-radius:14px}
  .s-review-iframe{border-radius:12px}
  .s-review-tag{top:10px;left:10px;padding:6px 10px;font-size:12px}
  .s-review-perks{padding:6px 10px}
  .s-review-perks li{gap:13px;padding:14px 2px}
  .s-review-ic{width:19px;height:19px}
  .s-review-perks b{font-size:15.5px}
  .s-review-perks i{font-size:13px}
}

/* ============ testim ============ */
.s-testim{position:relative}

/* auto-drift carousel of BALANCED columns (no dead space) */
.s-testim-marq{
  overflow-x:auto;overflow-y:hidden;position:relative;
  max-width:1180px;margin:0 auto;padding:4px 32px;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 3%,#000 7%,#000 93%,rgba(0,0,0,.5) 97%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 3%,#000 7%,#000 93%,rgba(0,0,0,.5) 97%,transparent 100%);
}
.s-testim-marq::-webkit-scrollbar{display:none}
.s-testim-marq.dragging{cursor:grabbing}
.s-testim-track{
  display:flex;align-items:stretch;gap:16px;width:max-content;
}
.s-testim-col{display:flex;flex-direction:column;gap:16px;width:390px;flex:none}
.s-testim-col>.s-testim-card{flex:1 1 auto}

.s-testim-card{
  display:flex;flex-direction:column;
  background:var(--card);border:.5px solid #e0e0de;border-radius:14px;
  padding:20px 20px 0;overflow:hidden;
  transition:border-color .25s ease;
}
.s-testim-card:hover{border-color:#ececec}
.s-testim-q{width:20px;height:16px;margin-bottom:12px;flex:none}
.s-testim-card p{font-size:14.5px;line-height:1.55;color:#3c3c3e;flex:1 1 auto}
.s-testim-card footer{
  display:flex;align-items:center;gap:11px;flex:none;
  margin:16px -20px 0;padding:12px 20px;
  background:var(--card);border-top:.5px solid #e0e0de;
}
.s-testim-card footer img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.s-testim-card footer span{display:flex;flex-direction:column;gap:1px;min-width:0}
.s-testim-card footer b{font-size:14px;font-weight:500;color:var(--ink)}
.s-testim-card footer b a:hover{color:var(--green-ink)}
.s-testim-card footer i{font-style:normal;font-size:12.5px;color:var(--gray)}

/* mini dashboard screenshot («Операции») at the bottom of long reviews */
.s-testim-stat{margin-top:16px;flex:none}
.s-testim-stat-cap{display:block;font-size:11px;line-height:1.3;color:var(--gray-2);margin-bottom:6px}
.s-testim-stat-panel{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;background:#fff;border:.5px solid #e0e0de;border-radius:10px;
}
.s-testim-m{display:flex;flex-direction:column;gap:2px;min-width:0}
.s-testim-m i{font-style:normal;font-size:10.5px;line-height:1.3;color:var(--gray);white-space:nowrap}
.s-testim-m b{font-size:15px;line-height:1.25;font-weight:500;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.s-testim-m--sp{flex-direction:row;align-items:flex-end;gap:7px}
.s-testim-m--sp>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.s-testim-m--sp svg{flex:none;margin-bottom:3px}
.s-testim-m--sp polyline{fill:none;stroke:var(--gray-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.s-testim-stat-panel--dark{background:#161515;border-color:#262525}
.s-testim-stat-panel--dark .s-testim-m i{color:#8b8a88}
.s-testim-stat-panel--dark .s-testim-m b{color:#fff}
.s-testim-stat-panel--dark .s-testim-m--sp polyline{stroke:#5d5c5b}

.s-testim-more{margin:24px auto 0;text-align:center;font-size:16px;color:var(--gray)}
.s-testim-more b{font-weight:600;color:var(--ink)}
.s-testim-more svg{vertical-align:-3px;margin-right:5px}

@media(max-width:991px){
  .s-testim-col{width:340px}
  .s-testim-stat-panel{
    display:grid;grid-template-columns:auto auto;
    justify-content:space-between;row-gap:10px;
  }
}
@media(max-width:767px){
  .s-testim-col{width:300px}
  .s-testim-card p{font-size:14px}
  .s-testim-m b{font-size:14px}
}

/* real cabinet screenshots inside long reviews */
.s-testim-shot{margin-top:auto;padding-top:14px}
.s-testim-stat-cap{display:block;font-size:11px;color:#9a9aa2;margin-bottom:7px}
.s-testim-shot img{
  width:100%;height:auto;border-radius:10px;border:.5px solid #e0e0de;
}
/* alternate: screenshot on top for the middle long card */
.s-testim-col:nth-child(3) .s-testim-card,
.s-testim-col:nth-child(10) .s-testim-card{flex-direction:column}
.s-testim-col:nth-child(3) .s-testim-q,
.s-testim-col:nth-child(10) .s-testim-q{order:-2}
.s-testim-col:nth-child(3) .s-testim-shot,
.s-testim-col:nth-child(10) .s-testim-shot{order:-1;margin-top:0;margin-bottom:14px;padding-top:0}

.s-testim-shot img{cursor:zoom-in;transition:opacity .2s ease}
.s-testim-shot img:hover{opacity:.92}

.s-testim-yt{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  padding:9px 16px;border-radius:10px;background:#161515;color:#fff;
  font-size:13.5px;font-weight:500;width:max-content;
  transition:transform .35s var(--spring),background .2s ease;
}
.s-testim-yt:hover{transform:scale(1.04);background:#2a2a2a}
.s-testim-yt svg{flex:none}

/* lightbox */
.shot-lightbox{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(12,12,12,.82);backdrop-filter:blur(6px);cursor:zoom-out;padding:4vw;
}
.shot-lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}

/* кнопка-ссылка на телеграм-пост в отзыве */
.s-testim-tgb{
  display:inline-flex;align-items:center;gap:9px;margin-top:9px;
  padding:6.5px 12px;border-radius:9px;width:max-content;
  background:#161515;color:#fff;font-size:13px;font-weight:500;
  transition:transform .35s var(--spring),background .2s ease;
}
.s-testim-tgb:hover{transform:scale(1.04);background:#2a2a2a}
.s-testim-tgb svg{flex:none}

/* ============ condit ============ */
/* ============================================================
   s-condit — «Прозрачные тарифы под любой объём»
   12 колонок: Start/Basic/Advanced (3×4) → Pro-баннер (8) +
   столбец Enterprise/Elite (4) → чёрный Private (12) → факты
   ============================================================ */

.s-condit-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:18px;
}

/* ---------- белые карточки тарифов ---------- */
.s-condit-item{
  grid-column:span 4;
  display:flex;flex-direction:column;
  padding:24px 26px 22px;
  transition:transform .45s var(--spring),border-color .25s ease;
}
.s-condit-item:hover{transform:scale(1.02);border-color:var(--green)}

.s-condit-item-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px 12px;flex-wrap:wrap;
}
.s-condit-item-name{font-size:17px;font-weight:500;letter-spacing:-.01em}
.s-condit-item-vol{font-size:14px;color:var(--gray);white-space:nowrap}

.s-condit-item-fee{display:flex;align-items:baseline;gap:9px;margin-top:20px}
.s-condit-item-fee b{
  font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1;
  transition:color .25s ease;
}
.s-condit-item:hover .s-condit-item-fee b{color:var(--green-ink)}
.s-condit-item-fee span{font-size:12.5px;color:var(--gray-2)}

/* чип про карты: серый ($2/шт) или зелёный (бесплатно) */
.s-condit-item-chip{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-top:20px;padding:7px 13px;border-radius:8px;
  background:#f4f4f2;border:1px solid #ebebe8;
  font-size:13px;font-weight:500;color:var(--gray);
  transition:transform .45s var(--spring);
}
.s-condit-item-chip svg{flex:none;color:var(--gray-2)}
.s-condit-item-chip--free{
  background:var(--green-soft);border-color:var(--green-line);color:var(--green-ink);
}
.s-condit-item-chip--free svg{color:var(--green)}
.s-condit-item:hover .s-condit-item-chip{transform:rotate(-1.5deg) scale(1.04)}

/* ---------- столбец Enterprise / Elite (заполняет высоту Pro) ---------- */
.s-condit-stack{
  grid-column:span 4;
  display:grid;grid-template-rows:1fr 1fr;gap:18px;
}
.s-condit-item--mini{
  grid-column:auto;
  justify-content:space-between;
  padding:20px 24px;
}
.s-condit-mini-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px 14px;flex-wrap:wrap;margin-top:14px;
}
.s-condit-item--mini .s-condit-item-fee{margin-top:0}
.s-condit-item--mini .s-condit-item-chip{margin-top:0;align-self:center}

/* ============================================================
   Pro — зелёный баннер: слева имя+прайс, справа 2x2 стекло
   ============================================================ */
.s-condit-pro{
  grid-column:span 8;
  position:relative;z-index:2;
  border-radius:var(--r-lg);color:#fff;
  background:linear-gradient(135deg,#2fbe68 0%,#17a352 48%,#0e7a3c 100%);
  box-shadow:var(--sh-card);
  padding:clamp(26px,3vw,38px) clamp(24px,3vw,40px);
  display:grid;grid-template-columns:minmax(210px,.9fr) 1.2fr;
  align-items:center;gap:24px clamp(24px,3vw,44px);
}
/* фоновый слой сам режет свечение и «%», а тултип может выходить за баннер */
.s-condit-pro-bg{
  content:"";position:absolute;inset:0;z-index:0;overflow:hidden;
  border-radius:inherit;pointer-events:none;
}
/* только мягкое свечение — без молний и ватермарок */
.s-condit-pro-bg::after{
  content:"";position:absolute;
  top:-180px;right:-140px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.2) 0%, transparent 65%);
  filter:blur(40px);
}
/* огромный «%» за стеклянными панелями — заполняет правую часть фона,
   аккуратно режется верхним/нижним и правым краями баннера */
.s-condit-pro-pct{
  position:absolute;user-select:none;
  right:-84px;top:50%;
  transform:translateY(-50%) rotate(12deg);
  font-size:540px;font-weight:600;line-height:1;
  color:#fff;opacity:.09;
}

.s-condit-pro-info{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.s-condit-pro-name{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.s-condit-pro-name h3{
  font-size:clamp(28px,3vw,36px);font-weight:500;
  letter-spacing:-.025em;line-height:1;color:#fff;
}
.s-condit-pro-badge{
  display:inline-flex;align-items:center;flex:none;
  padding:7px 15px;border-radius:999px;
  background:#fff;color:var(--green-ink);
  font-size:13.5px;font-weight:600;line-height:1.2;
  transition:transform .45s var(--spring);
}
.s-condit-pro:hover .s-condit-pro-badge{transform:rotate(-3deg) scale(1.05)}
.s-condit-pro-vol{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.72)}

.s-condit-pro-fee{
  display:flex;align-items:baseline;gap:12px;margin-top:14px;
}
.s-condit-pro-fee b{
  font-size:56px;font-weight:500;letter-spacing:-.04em;line-height:1;
}
.s-condit-pro-fee span{font-size:14px;font-weight:500;color:rgba(255,255,255,.75)}

/* стеклянные мини-панели: 2 обычные + широкая акцентная про миграцию */
.s-condit-pro-glass{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.s-condit-pro-cell{
  display:flex;flex-direction:column;gap:10px;
  min-height:96px;padding:15px 17px;border-radius:14px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .25s ease;
}
.s-condit-pro:hover .s-condit-pro-cell{background:rgba(255,255,255,.16)}
.s-condit-pro-lbl{font-size:12.5px;font-weight:500;line-height:1.3;color:rgba(255,255,255,.72)}
.s-condit-pro-val{
  margin-top:auto;
  font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.25;
}
/* акцентная широкая панель — переезд с другой платёжки */
.s-condit-pro-cell--wide{
  grid-column:1/-1;min-height:0;gap:8px;
  background:rgba(255,255,255,.94);border-color:#fff;
}
.s-condit-pro:hover .s-condit-pro-cell--wide{background:#fff}
.s-condit-pro-cell--wide .s-condit-pro-lbl{color:var(--green-ink);font-weight:600}
.s-condit-pro-cell--wide .s-condit-pro-val{color:var(--ink)}

/* ---------- «i» с подсказкой, как проходит миграция ---------- */
.s-condit-info{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-left:2px;vertical-align:middle;margin-top:-2px;
  color:var(--green-ink);cursor:pointer;
}
.s-condit-tip{
  position:absolute;left:-16px;bottom:calc(100% + 12px);z-index:60;
  display:none;width:330px;padding:16px 18px;border-radius:14px;
  background:#161515;color:#fff;text-align:left;cursor:default;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.5);
}
.s-condit-tip::after{
  content:"";position:absolute;left:19px;top:100%;
  border:7px solid transparent;border-top-color:#161515;
}
.s-condit-tip b{display:block;font-size:13.5px;font-weight:600;color:#fff;margin-bottom:9px}
.s-condit-tip ol{display:flex;flex-direction:column;gap:7px;margin:0;padding:0 0 0 17px;list-style:decimal}
.s-condit-tip li{font-size:12.5px;font-weight:400;line-height:1.45;color:rgba(255,255,255,.85)}
.s-condit-tip i{display:block;margin-top:11px;font-style:normal;font-size:12px;font-weight:500;color:#7ddba4}
.s-condit-info:hover .s-condit-tip,
.s-condit-info:focus .s-condit-tip,
.s-condit-info.open .s-condit-tip{display:block}

/* ============================================================
   Private — чёрный баннер на всю ширину, надпись Astrolab фоном
   ============================================================ */
.s-condit-priv{
  grid-column:1/-1;
  position:relative;z-index:1;overflow:hidden;
  border-radius:var(--r-lg);color:#fff;background:#161515;
  box-shadow:var(--sh-card);
  padding:clamp(26px,3.4vw,42px) clamp(24px,3.6vw,46px);
  display:grid;grid-template-columns:minmax(230px,.8fr) 1.4fr;
  align-items:center;gap:26px clamp(26px,4vw,60px);
}
.s-condit-priv::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-180px;right:-140px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(31,178,90,.2) 0%, transparent 65%);
  filter:blur(40px);
}
/* фоновая надпись Private (Astrolab) — крупно, прижата к низу баннера */
.s-condit-priv-word{
  position:absolute;right:16px;bottom:-8px;
  font-size:clamp(96px,13vw,158px);line-height:.85;color:rgba(255,255,255,.05);
  pointer-events:none;user-select:none;white-space:nowrap;
}

.s-condit-priv-info{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.s-condit-priv-name{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.s-condit-priv-name h3{
  font-size:clamp(28px,3vw,36px);font-weight:500;
  letter-spacing:-.025em;line-height:1;color:#fff;
}
.s-condit-priv-badge{
  display:inline-flex;align-items:center;flex:none;
  padding:7px 15px;border-radius:999px;
  background:var(--green);color:#fff;
  font-size:13.5px;font-weight:600;line-height:1.2;
  transition:transform .45s var(--spring);
}
.s-condit-priv:hover .s-condit-priv-badge{transform:rotate(-3deg) scale(1.05)}
.s-condit-priv-vol{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.7)}
.s-condit-priv-btn{margin-top:10px}

.s-condit-priv-list{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:14px;padding:4px 0;
}
.s-condit-priv-list li{
  display:flex;align-items:center;gap:12px;
  font-size:16px;font-weight:500;line-height:1.35;
  color:rgba(255,255,255,.92);
}
.s-condit-priv-check{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:rgba(31,178,90,.18);border:1px solid rgba(31,178,90,.45);
  color:var(--green);
}

/* ---------- факты под Private: чёрные тематические иконки + текст ---------- */
.s-condit-facts{
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:16px 44px;
  margin-top:28px;
}
.s-condit-fact{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;color:#3c3c3e;
}
.s-condit-fact svg{flex:none}

/* ---------- adaptive ---------- */
@media(max-width:991px){
  .s-condit-grid{gap:14px}
  .s-condit-item{grid-column:span 6;padding:22px 22px 20px}
  .s-condit-item:nth-child(3){grid-column:1/-1}
  .s-condit-pro{grid-column:1/-1}
  .s-condit-stack{
    grid-column:1/-1;
    grid-template-rows:none;grid-template-columns:1fr 1fr;gap:14px;
  }
  .s-condit-item--mini{grid-column:auto;padding:20px 22px}
  .s-condit-pro-fee b{font-size:50px}
  .s-condit-pro-pct{font-size:460px;right:-70px}
  .s-condit-priv{grid-template-columns:1fr;gap:22px}
  .s-condit-priv-word{font-size:112px;right:10px}
  .s-condit-pro-bg::after,
  .s-condit-priv::after{top:-150px;right:-120px;width:440px;height:440px}
}
@media(max-width:767px){
  .s-condit-grid{gap:12px}
  /* r36 п.1: Start+Basic — парой в одну строку (2 столбца), Advanced на всю
     ширину; контент ужат под полширины: имя над объёмом, кегли меньше */
  .s-condit-item{grid-column:span 6;padding:16px 14px 15px}
  .s-condit-item:nth-child(3){grid-column:1/-1;padding:18px 16px 16px}
  .s-condit-item-head{flex-direction:column;align-items:flex-start;gap:3px}
  .s-condit-item:nth-child(3) .s-condit-item-head{flex-direction:row;align-items:baseline}
  .s-condit-item-name{font-size:15px}
  .s-condit-item-vol{font-size:12px}
  /* в полуширинных карточках подпись фи — ПОД цифрой (иначе «4.5% за
     пополнение» переносится, а «4%» нет — карточки пляшут по высоте) */
  .s-condit-item-fee{margin-top:12px;flex-direction:column;align-items:flex-start;gap:3px}
  .s-condit-item:nth-child(3) .s-condit-item-fee{flex-direction:row;align-items:baseline;gap:9px}
  .s-condit-item-fee b{font-size:22px}
  .s-condit-item-fee span{font-size:11.5px}
  .s-condit-item-chip{margin-top:12px;padding:6px 9px;gap:5px;font-size:11px;border-radius:7px}
  /* r36 п.1: Enterprise+Elite — тоже парой; фи и чип столбиком, чтобы влезли */
  .s-condit-stack{grid-template-columns:1fr 1fr;gap:12px}
  /* минис живут в СВОЕЙ сетке стека: span 6 от .s-condit-item им нельзя */
  .s-condit-item--mini{grid-column:auto;padding:16px 14px 15px}
  .s-condit-mini-row{flex-direction:column;align-items:flex-start;gap:9px;margin-top:11px}
  .s-condit-item--mini .s-condit-item-chip{align-self:flex-start}
  .s-condit-pro{grid-template-columns:1fr;padding:24px 20px 22px;gap:20px}
  .s-condit-pro-fee{margin-top:10px}
  .s-condit-pro-fee b{font-size:44px}
  .s-condit-pro-glass{gap:10px}
  .s-condit-pro-cell{min-height:0;padding:13px 14px}
  .s-condit-pro-val{font-size:15.5px}
  .s-condit-pro-pct{font-size:320px;right:-56px;opacity:.08}
  .s-condit-priv{padding:24px 20px 26px;gap:20px}
  .s-condit-priv-list li{font-size:15px}
  .s-condit-priv-word{font-size:78px;right:6px;opacity:.05}
  /* тултип раскрывается от всей ячейки, чтобы не вылезать за экран */
  .s-condit-pro-cell--wide{position:relative}
  .s-condit-info{position:static}
  .s-condit-tip{left:0;right:0;width:auto}
  /* r36 п.2: хвостик целит в фактический центр иконки «i» — координату
     пишет движок r36:condit-tip (src-v2/r36/testim.js) в --fbm-tipx на
     .s-condit-tip; 148px — статический фолбэк без JS (примерная позиция
     иконки после «помощь в миграции»), margin-left центрует треугольник */
  .s-condit-tip::after{left:var(--fbm-tipx,148px);margin-left:-7px}
  .s-condit-pro-bg::after,
  .s-condit-priv::after{top:-130px;right:-110px;width:360px;height:360px}
  .s-condit-facts{margin-top:22px;gap:12px 28px}
  .s-condit-fact{font-size:13.5px}
}

/* ============ faq ============ */
/* ================= s-faq · частые вопросы ================= */
.s-faq{position:relative}

/* --- full-width two-column canvas: sticky intro left, accordion right --- */
.s-faq .s-faq-grid{
  display:grid;
  grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  gap:24px 72px;
  align-items:start;
}

/* --- left column: heading + ask-card, rides along on scroll --- */
.s-faq .s-faq-left{
  position:sticky;top:96px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.s-faq .s-faq-left h2{text-align:left}
.s-faq .s-faq-hand{margin-top:14px}

/* --- «не нашли ответ?» mini-card --- */
.s-faq .s-faq-ask{
  position:relative;width:100%;max-width:420px;
  margin-top:40px;padding:26px 26px 28px;
}
.s-faq .s-faq-ask-t{
  font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2;
}
.s-faq .s-faq-ask-x{
  margin-top:6px;
  font-size:15.5px;line-height:1.5;color:var(--gray);
  white-space:nowrap;
}
.s-faq .s-faq-ask-btn{margin-top:22px}

/* --- right column: list --- */
.s-faq .s-faq-list{
  min-width:0;
  display:flex;flex-direction:column;gap:12px;
}

/* --- item --- */
.s-faq .acc-item{
  background:var(--card);border:.5px solid #e0e0de;border-radius:var(--r-lg);
  transition:border-color .25s ease,box-shadow .3s ease;
}
.s-faq .acc-item:hover{border-color:#dcdcda}
.s-faq .acc-item.open{border-color:#e2e2e0;box-shadow:var(--sh-card)}

/* --- question button --- */
.s-faq .acc-btn{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:19px 22px;text-align:left;
  font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.35;
  -webkit-tap-highlight-color:transparent; /* r31 п.36: без серой вспышки на тапе */
}
.s-faq .acc-q{flex:1}

/* --- классическая стрелочка-шеврон, разворачивается при открытии ---
   r31 п.36: поворот без спринга — овершут крутил стрелку за 180° и
   она «доворачивалась» обратно; ease-out поворачивает ровно */
.s-faq .acc-ic{
  position:relative;flex:none;width:22px;height:22px;
  transition:transform .35s cubic-bezier(.33,1,.68,1);
}
.s-faq .acc-ic::before{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border-right:1.8px solid var(--gray);border-bottom:1.8px solid var(--gray);
  border-radius:1px;
  transform:translate(-50%,-68%) rotate(45deg);
  transition:border-color .25s ease;
}
.s-faq .acc-btn:hover .acc-ic::before{border-color:var(--ink)}
.s-faq .acc-item.open .acc-ic{transform:rotate(180deg)}
.s-faq .acc-item.open .acc-ic::before{border-color:var(--green-ink)}

/* --- answer: grid-rows collapse ---
   r31 п.36: у 0fr→1fr был спринг с овершутом — трек упирался в максимум
   раньше времени (и в 0 при закрытии), отсюда прыжки. Ease-out без
   овершута раскрывает плавно. */
.s-faq .acc-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.33,1,.68,1);
}
.s-faq .acc-item.open .acc-body{grid-template-rows:1fr}
.s-faq .acc-body-in{overflow:hidden;min-height:0}
.s-faq .acc-body p{
  padding:0 56px 8px 22px;max-width:66ch;
  font-size:15.5px;line-height:1.6;color:var(--gray);
  opacity:0;transform:translateY(-4px);
  transition:opacity .28s ease,transform .32s cubic-bezier(.33,1,.68,1);
}
.s-faq .acc-body p:last-child{padding-bottom:20px}
.s-faq .acc-item.open .acc-body p{
  opacity:1;transform:none;
  transition-delay:.08s;
}

/* ================= adaptive ================= */
@media(max-width:991px){
  .s-faq .s-faq-grid{grid-template-columns:1fr;gap:36px}
  .s-faq .s-faq-left{position:relative;top:auto}
  .s-faq .s-faq-ask{margin-top:28px}
  .s-faq .acc-body p{padding-right:24px}
}
@media(max-width:767px){
  .s-faq .s-faq-grid{gap:28px}
  .s-faq .s-faq-hand{margin-top:10px}
  .s-faq .s-faq-ask{max-width:none;padding:22px 20px 24px}
  .s-faq .s-faq-ask-x{font-size:14.5px}
  .s-faq .s-faq-ask-btn{width:100%}
  .s-faq .s-faq-list{gap:10px}
  .s-faq .acc-btn{padding:16px 16px 16px 18px;gap:12px;font-size:16px}
  .s-faq .acc-ic{width:27px;height:27px}
  /* r31 п.36: шеврон был 11x9 (растянут только по ширине — «кривой»
     при повороте) + мёртвый ::after от старого плюсика. Ровный 11x11. */
  .s-faq .acc-ic::before{width:11px;height:11px}
  .s-faq .acc-body p{padding:0 18px 8px;font-size:15px}
  .s-faq .acc-body p:last-child{padding-bottom:18px}
}

@media(prefers-reduced-motion:reduce){
  .s-faq .acc-ic,
  .s-faq .acc-body,
  .s-faq .acc-body p{transition:none}
}

/* ============ seo ============ */
/* ============================================================
   s-seo — сценарии: карты для арбитража трафика
   ============================================================ */

/* ---------- шапка блока: h2 слева, hand-подпись под ним ---------- */
/* r36: подпись «каждый бин обкатан…» — ручным шрифтом ПОД заголовком
   (как .s-faq-hand под h2 в FAQ), а не прямым текстом сбоку */
.s-seo-head{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-bottom:40px;
}
.s-seo-head h2{position:relative}

.s-seo-spark{
  position:absolute;top:-16px;right:-36px;width:26px;
  animation:seo-pulse 4.5s ease-in-out infinite;
  transform-origin:center;
}

.s-seo-note{margin-top:14px}

/* ---------- сетка карточек: 4 в ряд ---------- */
.s-seo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.s-seo-card{position:relative;padding:30px 26px 32px}

/* ---------- кнопка «Перейти» в правом верхнем углу ---------- */
.s-seo-go{
  position:absolute;top:16px;right:16px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--card);border:.5px solid #e0e0de;color:var(--ink);
  transition:transform .45s var(--spring),background .2s ease,
    border-color .2s ease,color .2s ease;
}
.s-seo-go svg{display:block}
.s-seo-go:hover{
  background:var(--green);border-color:var(--green);color:#fff;
  transform:scale(1.1);
}
.s-seo-go:active{transform:scale(.96)}
.s-seo-card h3{margin-top:24px;font-size:clamp(18px,1.6vw,20px);line-height:1.25;letter-spacing:-.015em}
.s-seo-card p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--gray)}

/* лёгкий каскад появления */
.s-seo-grid .s-seo-card:nth-child(2){transition-delay:.09s}
.s-seo-grid .s-seo-card:nth-child(3){transition-delay:.18s}
.s-seo-grid .s-seo-card:nth-child(4){transition-delay:.27s}

/* ---------- мини банк-карточка (как в хедер-дропдауне) ---------- */
.s-seo-ic{
  --cardbg:#161515;
  --rot:-4deg;
  position:relative;display:block;flex:none;
  width:54px;height:36px;border-radius:8px;
  background:var(--cardbg);
  border:1px solid rgba(22,21,21,.08);
  box-shadow:0 12px 24px -12px rgba(22,21,21,.45);
  transform:rotate(var(--rot));
  margin:4px 0 0 2px;
}
.s-seo-ic--fb{--cardbg:#0866FF}
.s-seo-ic--tt{--cardbg:#010101}
.s-seo-ic--g{--cardbg:linear-gradient(135deg,#fff,#f1f3f6);border-color:#e0e0de}
.s-seo-ic--ecom{--cardbg:#26A17B}

/* чип */
.s-seo-chip{
  position:absolute;top:7px;left:8px;width:11px;height:8px;border-radius:2.5px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.5));
}
.s-seo-ic--g .s-seo-chip{background:linear-gradient(135deg,#e7e9ec,#d5d8dc)}

/* лого бренда справа-снизу */
.s-seo-ic svg{position:absolute;right:7px;bottom:6px}

/* ховер карточки: банк-карточка виггл, сама карточка на месте */
.s-seo-card:hover .s-seo-ic{
  animation:seo-wiggle .6s var(--spring) forwards;
}

/* ---------- keyframes ---------- */
@keyframes seo-wiggle{
  0%{transform:rotate(var(--rot)) scale(1)}
  32%{transform:rotate(calc(var(--rot) + 10deg)) scale(1.09)}
  64%{transform:rotate(calc(var(--rot) - 5deg)) scale(1.04)}
  100%{transform:rotate(calc(var(--rot) + 4deg)) scale(1.06)}
}
@keyframes seo-pulse{
  0%,100%{transform:scale(1) rotate(0deg);opacity:1}
  50%{transform:scale(.8) rotate(22deg);opacity:.5}
}

/* ============================================================
   адаптив
   ============================================================ */
@media(max-width:991px){
  .s-seo-head{margin-bottom:28px}
  .s-seo-note{margin-top:12px}
  .s-seo-spark{right:-32px;width:22px}

  /* 2x2 */
  .s-seo-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .s-seo-card{padding:26px 24px 28px}
  .s-seo-card h3{margin-top:20px}
}

@media(max-width:767px){
  .s-seo-head{margin-bottom:22px}
  .s-seo-note{margin-top:10px;font-size:20px}
  .s-seo-spark{display:none}

  /* r31 п.33: 2 в ряд — банк-карточка сверху, текст ужат */
  .s-seo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .s-seo-card{padding:16px 14px 18px}
  .s-seo-ic{width:46px;height:31px;margin:2px 0 0 2px}
  .s-seo-ic svg{right:6px;bottom:5px}
  .s-seo-chip{top:6px;left:7px;width:10px;height:7px}
  .s-seo-go{top:12px;right:12px;width:30px;height:30px}
  /* r34 п.13: после переклада 2-в-ряд заголовки стали мелкими (15px) —
     поднимаем до 18px (+3): на 390px «Карты для / Facebook Ads» уверенно
     держится в 2 строки (внутренняя ширина карточки ~142px) */
  .s-seo-card h3{margin-top:14px;font-size:18px;padding-right:0}
  .s-seo-card p{margin-top:6px;font-size:12.5px;line-height:1.45}
}

/* на самом узком описания прячем — остаются иконка + заголовок-ссылка */
@media(max-width:359px){
  .s-seo-card p{display:none}
  /* r34 п.13: на 320px внутренняя ширина карточки ~107px — 18px «Facebook Ads»
     впритык; чуть ужимаем, чтобы вторая строка не переносилась на третью */
  .s-seo-card h3{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  .s-seo-spark{animation:none}
  .s-seo-card:hover .s-seo-ic{animation:none}
}

/* whole card is clickable: невидимая ссылка-обложка поверх всей карточки */
.s-seo-cover{position:absolute;inset:0;z-index:5;border-radius:inherit;cursor:pointer}

.s-seo-card{transition:border-color .25s ease}
.s-seo-card:hover{border-color:#bfe3cd}
.s-seo-card:hover .s-seo-go{background:#1FB25A;border-color:#1FB25A;transform:scale(1.1)}
.s-seo-card:hover .s-seo-go svg path{stroke:#fff}

/* ============ services ============ */
/* ============================================================
   s-services — оплата зарубежных сервисов
   Категории слева (на мобилке — чипы сверху), плитки лого справа.
   Самодостаточный CSS: все классы секции описаны здесь,
   из глобальных используются только .sec .container .sec-head .hand .grad
   ============================================================ */

/* ---------- панель-полотно: чистый белый холст, плитки держат волосяные рамки и лёгкую тень ----------
   r36: секция на ПК была слишком высокой — панель ужата: паддинг 22→16,
   колонка категорий 236→206, плитки 4→6 в ряд, категории компактнее */
.s-services-panel{
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  gap:20px;
  background:#fff;
  border:.5px solid #e0e0de;
  border-radius:var(--r-lg,14px);
  padding:16px;
}

/* ---------- левая колонка: вертикальный список категорий ---------- */
.s-services-nav{
  display:flex;flex-direction:column;gap:1px;
  align-self:start;
  position:sticky;top:90px;
}
.s-services-cat{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;
  padding:6.5px 12px;
  border:.5px solid transparent;border-radius:9px;
  font-size:14px;font-weight:500;line-height:1.3;
  color:#77776f;text-align:left;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.s-services-cat:hover{color:#161515}
.s-services-cat em{
  flex:none;
  font-style:normal;font-size:12.5px;font-weight:500;
  color:#b8b8ba;
  transition:color .2s ease;
}
.s-services-cat.is-active{
  background:#fff;border-color:#e0e0de;
  color:#161515;font-weight:600;
  box-shadow:0 8px 18px -14px rgba(22,21,21,.25);
  cursor:default;
}
.s-services-cat.is-active em{color:#128A44}

/* подпись под списком категорий */
.s-services-total{
  margin-top:12px;padding:0 10px;
  font-size:12px;line-height:1.45;color:#b8b8ba;
}

/* ---------- правая колонка: сетки-вкладки ----------
   r36: 6 плиток в ряд вместо 4 — самая большая категория (30 позиций)
   укладывается в 5 рядов вместо 8, блок заметно ниже */
.s-services-panes{min-width:0}
.s-services-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  align-content:start;
}
.s-services-grid[hidden]{display:none}

/* ---------- плитка сервиса: белая карточка, лого сверху, имя снизу ---------- */
.s-services-tile{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;
  border:.5px solid #e0e0de;border-radius:10px;
  padding:2px 8px 9px;
  box-shadow:0 1px 3px rgba(22,21,21,.05);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.s-services-tile:hover{
  border-color:#cfcfcc;
  box-shadow:0 10px 22px -16px rgba(22,21,21,.28);
}
.s-services-tile img,
.s-services-tile svg{
  display:block;width:100%;height:auto;
  aspect-ratio:240/117;object-fit:contain;
  transform:none;
  transition:transform .45s var(--spring,cubic-bezier(.34,1.45,.64,1));
}
.s-services-tile:hover img,
.s-services-tile:hover svg{transform:scale(1.05)}

/* плитка-«знак»: у новых сервисов квадратный знак ~40-44px по центру той же
   логo-зоны (паддинги в % от ширины, чтобы ряды со старыми плитками совпадали) */
.s-services-tile--mark img,
.s-services-tile--mark svg{
  padding:12% 0;
  box-sizing:border-box;
}
.s-services-name{
  margin-top:-6px;max-width:100%;
  font-size:11.5px;font-weight:500;line-height:1.3;
  color:#6d6d6b;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .2s ease;
}
.s-services-tile:hover .s-services-name{color:#161515}

/* ---------- кнопка «Показать ещё» (только моб, r31 п.32) ----------
   На ≤767 сетка ужимается до первых 16 плиток (класс is-clipped вешает
   движок r31:services-more); кнопка раскрывает остаток. На ПК скрыта. */
.s-services-more{display:none}
.s-services-more[hidden]{display:none}

/* ============================================================
   адаптив
   ============================================================ */
@media(max-width:991px){
  .s-services-panel{
    grid-template-columns:1fr;
    gap:12px;
    padding:16px;
  }

  /* категории — горизонтальная лента чипов над сеткой */
  .s-services-nav{
    position:static;
    flex-direction:row;gap:8px;
    margin:-16px -16px 0;
    padding:16px 16px 10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .s-services-nav::-webkit-scrollbar{display:none}
  .s-services-cat{
    flex:none;width:auto;
    padding:8px 13px;
    background:#fff;border-color:#e0e0de;border-radius:999px;
    font-size:13px;
    white-space:nowrap;
  }
  .s-services-cat em{font-size:11px}
  .s-services-cat.is-active{
    background:#161515;border-color:#161515;color:#fff;
    box-shadow:none;
  }
  .s-services-cat.is-active em{color:rgba(255,255,255,.55)}
  .s-services-total{display:none}

  .s-services-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}

@media(max-width:767px){
  .s-services-panel{padding:14px}
  .s-services-nav{margin:-14px -14px 0;padding:14px 14px 10px}
  .s-services-cat{padding:7px 12px;font-size:12.5px}

  /* r31 п.32: плитки мельче, 4 в ряд — блок в разы ниже */
  .s-services-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .s-services-tile{padding:2px 5px 7px;border-radius:8px;box-shadow:none}
  .s-services-name{
    max-width:100%;
    font-size:10px;margin-top:-4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* клип: в ужатой категории видны первые 16 плиток (4 ряда) */
  .s-services-grid.is-clipped>.s-services-tile:nth-child(n+17){display:none}

  .s-services-more{
    display:block;width:100%;margin-top:10px;
    padding:9px 14px;
    background:#fff;border:.5px solid #e0e0de;border-radius:9px;
    font-size:13px;font-weight:500;line-height:1.3;color:#161515;
    text-align:center;
  }
  .s-services-more[hidden]{display:none}
}

@media(prefers-reduced-motion:reduce){
  .s-services-tile img,
  .s-services-tile svg{transition:none}
  .s-services-tile:hover img,
  .s-services-tile:hover svg{transform:none}
}
/* r42: большие экраны (фидбек разраба, 3440x1440) — плитки сервисов крупнее:
   5 колонок вместо 6 и просторнее сетка, названия чуть больше */
@media (min-width:1600px){
  .s-services-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .s-services-name{font-size:13px}
  .s-services-panel{grid-template-columns:280px minmax(0,1fr)}
  .s-services-cat{font-size:15px;padding:8px 14px}
  .s-services-cat em{font-size:13px}
}

/* ============ usecases ============ */
/* ============================================================
   s-usecases — сценарии использования (п.5, r33)
   светлая версия в общем стиле сайта: секция живёт на фоне
   страницы (#fafafa), без тёмного полотна. Каркас прежний:
   слева sticky-шапка, справа вертикальная колонка из 4 пунктов
   с волосяными разделителями. Иконки сценариев (r36) — голый
   штрих #161515 без подложек; чипы — светлые плашки с волосяной
   рамкой и круглыми мини-лого сервисов слева. CTA-кард (r36) —
   в левой sticky-колонке под подзаголовком, как ask-кард в FAQ.
   Движков нет, анимация — только общий data-rev.
   ============================================================ */

.s-usecases{scroll-margin-top:90px}
.s-usecases.sec{padding:72px 0}

/* ---------- каркас: шапка слева, пункты справа ---------- */
.s-usecases-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  column-gap:64px;align-items:start;
}

/* ---------- шапка: липнет при скролле колонки пунктов ---------- */
.s-usecases-head{position:sticky;top:100px}
/* r35: размер h2 не переопределяем — тот же clamp(34px,4.6vw,54px),
   что у h2 остальных секций (shared.css); цвет #161515 = var(--ink) */
.s-usecases-head h2{color:#161515}
/* r35: подзаголовок — ручным шрифтом (.hand в разметке), как у других
   секций; здесь только отступ и ширина строки для переноса.
   r36: текст заменён на SEO-осмысленный и стал длиннее — строка шире.
   r39: span обёрнут в блок .s-usecases-subw (data-rev переехал на него,
   чтобы [data-rev].on{transform:none} не съедал rotate(-2deg) у .hand);
   на раскладку ≥768 обёртка не влияет — обычный блок без стилей */
.s-usecases-sub{margin-top:16px;max-width:36ch;line-height:1.2}

/* r39: короткие мобильные варианты текстов CTA (показ через media ниже) */
.s-usecases-cta-short{display:none}

/* ---------- пункт: иконка слева, контент справа ---------- */
.s-usecases-item{display:flex;align-items:flex-start;gap:18px;padding:28px 0}
.s-usecases-item:first-child{padding-top:4px}
.s-usecases-item:last-child{padding-bottom:0}
.s-usecases-item + .s-usecases-item{border-top:.5px solid #e0e0de}

/* r36: иконка сценария — голый штрих #161515 на фоне страницы,
   без квадратной подложки (плашка с волоском убрана по фидбеку);
   фикс-бокс 26px держит выравнивание текста по всем пунктам */
.s-usecases-ic{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-top:0;
}
.s-usecases-ic svg{display:block;width:24px;height:24px}

.s-usecases-body{min-width:0}
.s-usecases-item h3{
  font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.015em;
  color:#161515;
}
.s-usecases-item p{margin-top:8px;font-size:15px;line-height:1.55;color:#858585}

/* ---------- чипы: светлые плашки с волосяной рамкой ---------- */
.s-usecases-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.s-usecases-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px;border-radius:999px;
  background:#fff;border:.5px solid #e0e0de;
  font-size:12.5px;font-weight:500;line-height:1.35;color:#6d6d6b;
  white-space:nowrap;
}

/* круглый мини-лого слева от текста чипа: белый кругляш с волоском,
   внутри реальный знак (inline-SVG или img из img/logos/services);
   отрицательный margin ужимает левый паддинг чипа до 5px */
.s-usecases-logo{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:-6px;
  border-radius:50%;overflow:hidden;
  background:#fff;border:.5px solid #e0e0de;
}
.s-usecases-logo svg,
.s-usecases-logo img{display:block;flex:none}
/* полнокруглые фирменные знаки (Facebook, TikTok, Telegram) —
   сам знак и есть круг, волосок не нужен */
.s-usecases-logo--fill{border:0}

/* лёгкий каскад появления: у пунктов транзиционируются только
   reveal-свойства data-rev, поэтому общая задержка безопасна */
.s-usecases-list .s-usecases-item:nth-child(2){transition-delay:.06s}
.s-usecases-list .s-usecases-item:nth-child(3){transition-delay:.12s}
.s-usecases-list .s-usecases-item:nth-child(4){transition-delay:.18s}

/* ---------- r36: CTA-кард переехал в левую sticky-колонку под
   подзаголовок (1в1 раскладка «Остались вопросы?» в FAQ): заголовок +
   мягкая подпись + кнопка «Связаться» ----------
   r38 п.2: заголовок и подпись ложатся В ОДНУ строку каждый (было 4
   строки): кап 420px снят — кард занимает всю левую колонку сетки
   (~489px при контейнере 1180), кегль заголовка 19->17px, подписи
   15->14px, боковые паддинги 26->24px. Запас проверен на узком
   десктопе: при 992px вьюпорта колонка с учётом body zoom .9 даёт
   ~405px контента — обе строки помещаются без переноса */
.s-usecases-cta{
  display:flex;flex-direction:column;align-items:flex-start;
  width:100%;
  margin-top:38px;padding:22px 24px 24px;
}
.s-usecases-cta-t{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.s-usecases-cta-x{margin-top:6px;font-size:14px;line-height:1.5;color:#858585}
.s-usecases-cta-btn{margin-top:18px}

/* ============================================================
   адаптив
   ============================================================ */
@media(max-width:991px){
  .s-usecases-wrap{grid-template-columns:1fr}
  .s-usecases-head{position:static;margin-bottom:34px}
  /* r35: размер h2 = дефолтный clamp из shared.css, как у других секций */
}

@media(max-width:767px){
  .s-usecases.sec{padding:48px 0}

  /* r39 п.2: на мобе CTA-кард встаёт ПОСЛЕ всех пунктов сценариев
     (после «Хостинг и инфраструктура»). HTML не дублируем: шапка
     раскрывается (display:contents), wrap становится flex-колонкой,
     порядок задаёт order: h2 -> подзаголовок -> список -> CTA.
     На ≥768 всё как раньше — CTA в левой (sticky) колонке. */
  .s-usecases-wrap{display:flex;flex-direction:column}
  .s-usecases-head{display:contents}
  .s-usecases-head h2{order:1}
  .s-usecases-subw{order:2}
  .s-usecases-list{order:3;margin-top:24px}
  .s-usecases-cta{order:4}

  .s-usecases-sub{margin-top:12px;font-size:20px;max-width:30ch}
  .s-usecases-item{gap:12px;padding:22px 0}
  /* r36: голая иконка-штрих и на мобе — чуть меньше, без подложки */
  .s-usecases-ic{width:22px;height:22px}
  .s-usecases-ic svg{width:20px;height:20px}
  .s-usecases-chip{font-size:12px}
  .s-usecases-list .s-usecases-item:nth-child(n){transition-delay:0s}

  /* CTA: во всю ширину, кнопка растягивается (как ask-кард FAQ).
     r39 п.1: тексты — короткие мобильные варианты («Нужен нестандартный
     сценарий?» / «Напишите — придумаем решение.»), кегль заголовка
     17->16px: на 360px обе строки лежат в ОДНУ строку без переноса */
  .s-usecases-cta{max-width:none;margin-top:28px;padding:20px 18px 22px;align-items:stretch}
  .s-usecases-cta-t{font-size:16px}
  .s-usecases-cta-full{display:none}
  .s-usecases-cta-short{display:inline}
  .s-usecases-cta-btn{margin-top:16px;width:100%}
}

/* ============ solution ============ */
.s-solution{scroll-margin-top:90px}
.s-solution-card{
  position:relative;overflow:hidden;
  background:#101110;border-radius:14px;
  padding:30px 48px 28px;
  text-align:center;
}

/* r40 п.2: переливание фона убрано ПОЛНОСТЬЮ (слоёв iris и движка фона
   больше нет) — фон статичный. Три градиентных засвета:
   --gl — тёплый лаймовый glow у ЛЕВОГО края (смещён к низу, где левый
          кластер карт), --gr — бирюзовый у ПРАВОГО (смещён к верху, к
          правому кластеру) — фирменная гамма лого; --gc — очень
          деликатный широкий размытый засвет по ЦЕНТРУ за текстом и
          кнопками. Сильный blur (70px) поверх radial-gradient + blend
   screen на графите #101110 — света мягкие, непрозрачности низкие,
   текст читается. Всё статично: reduced-motion фону не нужен */
.s-solution-glow{position:absolute;pointer-events:none;mix-blend-mode:screen;filter:blur(70px)}
.s-solution-glow--gl{
  left:-180px;bottom:-140px;width:540px;height:440px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(198,238,132,.34),rgba(183,243,151,.13) 55%,rgba(183,243,151,0) 100%);
}
.s-solution-glow--gr{
  right:-190px;top:-110px;width:580px;height:470px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(109,208,222,.36),rgba(84,172,184,.13) 55%,rgba(84,172,184,0) 100%);
}
.s-solution-glow--gc{
  left:50%;top:50%;width:780px;height:430px;margin:-215px 0 0 -390px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(220,246,210,.14),rgba(220,246,210,0) 100%);
}

.s-solution-bg{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  border-radius:inherit;pointer-events:none;
}

/* ---------- карты-мокапы ----------
   стиль карт из мокапов сайта: [FBM] + контактлесс, чип, номер ••, EXP + лого.
   Обёртка .s-solution-vcw держит позицию и статичный наклон (вид reduced-motion),
   внутреннюю .s-solution-vc двигает движок r40:solution (дыхание + параллакс).
   Размеры внутри карты — в em: масштаб карты задаёт font-size обёртки */
.s-solution-vcw{position:absolute;pointer-events:none}
.s-solution-vcw--rb{width:238px;height:150px;right:-24px;top:-58px;z-index:3;font-size:14.5px;transform:rotate(11deg)}
.s-solution-vcw--r{width:300px;height:189px;right:-64px;top:50%;margin-top:-84px;z-index:4;font-size:18px;transform:rotate(-9deg)}
/* r40 п.1: левый кластер ОПУЩЕН ВНИЗ, оба якоря — bottom (композиция не
   зависит от высоты баннера): графитовая --l в левом НИЖНЕМ углу,
   зелёная --lt НАД ней; соприкасаются — по неповёрнутым прямоугольникам
   низ зелёной и верх графитовой пересекаются на 35px по вертикали при
   полном горизонтальном перекрытии, графитовая лежит ПОВЕРХ нижней
   кромки зелёной (z 3 > 2 — зеркально правому кластеру, где зелёная r
   поверх графитовой rb). Зелёная больше не прячется наполовину: скрыто
   ~30% по горизонтали (96 из 320) — видно ~70% карты, по вертикали в
   баннер входит целиком. До центрованного текста не достаёт: правый
   край bbox зелёной ~235 CSS px + ход движка ~12px = ~247, ближайшие
   глифы (первая строка подзаголовка) правее ~285; у графитовой bbox
   ~182 + ход ~18 = ~200 против глифов строки статов правее ~330 */
.s-solution-vcw--l{width:234px;height:147px;left:-64px;bottom:-52px;z-index:3;font-size:14.5px;transform:rotate(-11deg)}
.s-solution-vcw--lt{width:320px;height:201px;left:-96px;bottom:60px;z-index:2;font-size:19.5px;transform:rotate(7deg)}
/* зелёная для мобилки — на ПК/планшете скрыта, показ в @media ≤767 */
.s-solution-vcw--m{display:none}

.s-solution-vc{
  position:relative;display:flex;flex-direction:column;
  width:100%;height:100%;overflow:hidden;
  border-radius:.85em;padding:1.05em 1.25em .95em;
  text-align:left; /* r36 п.1: центрование текста баннера в карту не течёт — номер строго слева */
  will-change:transform;
  -webkit-user-select:none;user-select:none;
}
.s-solution-vc img{-webkit-user-drag:none}

/* r36 п.2: зелёная фирменная — градиент ТОЧНО как в логотипе:
   135deg #83DA4E -> #21A038 55% -> #54ACB8, равномерно от угла до угла,
   без пережжённых зон — белый радиальный блик убран, верхний волосок тише */
.s-solution-vc--green{
  background:linear-gradient(135deg,#83DA4E 0%,#21A038 55%,#54ACB8 100%);
  box-shadow:
    0 30px 60px -26px rgba(0,0,0,.6),
    0 16px 40px -16px rgba(33,160,56,.5),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 .5px rgba(255,255,255,.14);
}
.s-solution-vc--green .s-solution-vc-top{color:rgba(255,255,255,.95)}
.s-solution-vc--green .s-solution-vc-num{color:#fff}
.s-solution-vc--green .s-solution-vc-exp{color:rgba(255,255,255,.85)}
.s-solution-vc--green .s-solution-vc-chip{box-shadow:0 1px 2px rgba(10,60,25,.3)}
.s-solution-vc--green .s-solution-vc-mc{filter:drop-shadow(0 1px 2px rgba(10,60,25,.24))}

/* тёмно-графитовая: палитра тёмных мокапов + зелёный свет сияния на металле */
.s-solution-vc--dark{
  background:linear-gradient(150deg,#413C37 0%,#2E2B29 48%,#242220 100%);
  box-shadow:
    0 26px 54px -24px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 0 .5px rgba(255,255,255,.1);
}
.s-solution-vc--dark::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 100% at 88% -12%,rgba(131,218,78,.18),rgba(84,172,184,.06) 46%,rgba(131,218,78,0) 64%);
}
.s-solution-vc--dark .s-solution-vc-top{color:rgba(236,234,231,.85)}
.s-solution-vc--dark .s-solution-vc-num{color:#ECEAE7}
.s-solution-vc--dark .s-solution-vc-exp{color:#A9A5A1}
.s-solution-vc--dark .s-solution-vc-chip{box-shadow:0 1px 2px rgba(0,0,0,.4)}
.s-solution-vc--dark .s-solution-vc-mc{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}

/* верх карты: [FBM] + контактлесс-дуги */
.s-solution-vc-top{display:flex;justify-content:space-between;align-items:center;gap:.5em;line-height:1}
.s-solution-vc-top .astro{font-size:1em;letter-spacing:.02em}
.s-solution-vc-nfc{display:block;flex:none;width:1.15em;height:1.15em;opacity:.75}
/* r40 п.1: у зелёной левой контактлесс-дуги в правом верхнем углу
   укрупнены и ярче — левая треть карты за краем баннера, а видимый
   правый верхний угол с дугами однозначно читает объект картой */
.s-solution-vcw--lt .s-solution-vc-nfc{width:1.5em;height:1.5em;opacity:.92}

/* чип, номер, низ: EXP + лого платёжки.
   r36 п.1: номер на ЕДИНОЙ позиции на всех картах — слева (по паддингу,
   как на карточках мокапа выпуска) и в нижней трети: margin-top:auto
   прижимает номер к нижнему блоку, зазор до EXP-строки фиксированный —
   позиция не зависит от размера карты (якорь от нижнего края в em) */
.s-solution-vc-chip{display:block;flex:none;margin-top:.8em;width:2em;height:auto;border-radius:.22em}
.s-solution-vc-num{margin-top:auto;font-size:1.3em;font-weight:500;letter-spacing:.12em;line-height:1}
.s-solution-vc-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:.5em;margin-top:.55em}
.s-solution-vc-exp{
  font-style:normal;font-weight:500;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.78em;letter-spacing:.05em;
}
.s-solution-vc-mc{display:block;flex:none;width:2.25em;height:auto}
/* r36 п.3: белый VISA-вордмарк на левой-верхней (пропорции 680х220);
   r37: на зелёной тень логотипа зелёно-тёмная, как у MC на зелёной */
.s-solution-vc-visa{display:block;flex:none;width:2.9em;height:auto;opacity:.94;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.s-solution-vc--green .s-solution-vc-visa{filter:drop-shadow(0 1px 2px rgba(10,60,25,.24))}

/* переливающийся блик: широкая косая полоса света, ездит движком r40:solution;
   без движка (reduced-motion) — статичный глянец по центру */
.s-solution-vc-shine{
  position:absolute;top:-25%;bottom:-25%;left:-30%;right:-30%;
  pointer-events:none;will-change:transform;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.15) 50%,rgba(255,255,255,0) 60%);
}
.s-solution-vc--dark .s-solution-vc-shine{
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(222,255,205,.1) 50%,rgba(255,255,255,0) 60%);
}

/* body */
.s-solution-body{position:relative;z-index:2;max-width:660px;margin:0 auto}
.s-solution-body h2{color:#fff;font-size:clamp(30px,3.8vw,42px)}
.s-solution-sub{margin:8px auto 0;max-width:54ch;font-size:16px;line-height:1.5;color:rgba(255,255,255,.62)}
.s-solution-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
/* «Получить доступ» — градиент логотипа вместо плоского зелёного
   (перебивает shared .pill--green только внутри CTA-баннера), ховер чуть ярче */
.s-solution-cta .pill--green{
  background:linear-gradient(135deg,#83DA4E,#21A038 55%,#54ACB8);
  border-color:rgba(255,255,255,.28);color:#fff;
}
.s-solution-cta .pill--green:hover{
  background:linear-gradient(135deg,#8FE15D,#26AD43 55%,#60B8C3);
  border-color:rgba(255,255,255,.4);
}
/* r36 п.6: «Обсудить условия» — liquid glass на тёмном: полупрозрачное
   белое стекло, blur+saturate подложки, тонкая светлая рамка, волосок-блик
   и мягкое белое свечение изнутри сверху */
.s-solution-ghost{
  background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  color:#fff;border-color:rgba(255,255,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 14px 28px -18px rgba(255,255,255,.32),
    0 10px 30px -18px rgba(0,0,0,.6);
}
.s-solution-ghost:hover{
  background:rgba(255,255,255,.19);
  border-color:rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 14px 28px -18px rgba(255,255,255,.4),
    0 12px 34px -18px rgba(0,0,0,.62);
}
.s-solution-stats{
  display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;
  margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.55);
}
.s-solution-stats i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}

@media(prefers-reduced-motion:reduce){
  .s-solution-vc,.s-solution-vc-shine{will-change:auto}
}

/* 768–991 (без zoom): зелёная — кластером в правый ВЕРХНИЙ угол (не лезет под
   центрированный текст), тыльная и левая-верхняя скрыты — на планшете запаса
   до центрованного текста нет; графитовая слева внизу дальше за краем.
   Засветы фона у краёв сужаются — баннер уже, света в px */
@media(max-width:991px){
  .s-solution-card{padding:28px 34px 26px}
  .s-solution-vcw--rb{display:none}
  .s-solution-vcw--lt{display:none}
  .s-solution-vcw--r{width:252px;height:158px;right:-96px;top:-90px;margin-top:0;font-size:15px;transform:rotate(-10deg)}
  .s-solution-vcw--l{width:190px;height:120px;left:-72px;bottom:-40px;font-size:12px}
  .s-solution-glow--gl{left:-220px;bottom:-160px;width:460px;height:380px}
  .s-solution-glow--gr{right:-230px;top:-170px;width:490px;height:400px}
}

/* r36 п.7 (≤767): карта сверху-справа УБРАНА (и --r, и --l скрыты) —
   верх баннера чистый; в нижней полосе (под строкой статов, паддинг-низ
   126px) — трио маленьких карт в разных положениях/наклонах, частично
   за краями: зелёная m слева (rotate -9) и графитовая rb справа (rotate 9)
   выпячиваются выше — их номера видны целиком; графитовая lt с VISA по
   центру глубже за нижним краем (rotate 4, поверх соседей), её номер за
   краем. До строки статов от верхних кромок трио ~18-20px.
   Засветы фона мельче и мягче (узкий баннер), blur снижен */
@media(max-width:767px){
  .s-solution-card{padding:32px 20px 126px;border-radius:14px}
  .s-solution-sub{font-size:15px}

  .s-solution-glow{filter:blur(46px)}
  .s-solution-glow--gl{left:-150px;bottom:-110px;width:340px;height:300px}
  .s-solution-glow--gr{right:-150px;top:-120px;width:360px;height:310px}
  .s-solution-glow--gc{width:420px;height:360px;margin:-180px 0 0 -210px}

  .s-solution-vcw--r{display:none}
  .s-solution-vcw--l{display:none}

  .s-solution-vcw--m{
    display:block;left:-14px;bottom:-24px;z-index:2;
    width:168px;height:106px;font-size:10px;transform:rotate(-9deg);
  }
  /* центр трио — ЗА боковыми картами (z1): не закрывает их номера;
     базовый якорь --lt теперь тоже bottom — переопределяется только он */
  .s-solution-vcw--lt{
    display:block;left:50%;bottom:-58px;z-index:1;
    width:156px;height:98px;margin-left:-78px;font-size:9.5px;transform:rotate(4deg);
  }
  /* укрупнение контактлесс-дуг зелёной — только ПК-раскладка: в нижнем
     трио карта перекрашена в графит и дуги возвращаются к базовым */
  .s-solution-vcw--lt .s-solution-vc-nfc{width:1.15em;height:1.15em;opacity:.75}
  .s-solution-vcw--rb{
    display:block;top:auto;right:-36px;bottom:-26px;z-index:2;
    width:154px;height:97px;font-size:9.5px;transform:rotate(9deg);
  }
  .s-solution-vcw--rb .s-solution-vc--dark{
    box-shadow:
      0 16px 34px -16px rgba(0,0,0,.7),
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 0 0 .5px rgba(255,255,255,.12);
  }

  /* r37 п.2: на ПК lt зелёная, но мобильное трио сохраняем как в r36
     (зелёная слева, графитовая VISA по центру, графитовая справа) —
     перекраска --green обратно в тёмный металл, палитра и свет = --dark,
     тень — лёгкий мобильный вариант (как у rb выше) */
  .s-solution-vcw--lt .s-solution-vc--green{
    background:linear-gradient(150deg,#413C37 0%,#2E2B29 48%,#242220 100%);
    box-shadow:
      0 16px 34px -16px rgba(0,0,0,.7),
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 0 0 .5px rgba(255,255,255,.12);
  }
  .s-solution-vcw--lt .s-solution-vc--green::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(120% 100% at 88% -12%,rgba(131,218,78,.18),rgba(84,172,184,.06) 46%,rgba(131,218,78,0) 64%);
  }
  .s-solution-vcw--lt .s-solution-vc--green .s-solution-vc-top{color:rgba(236,234,231,.85)}
  .s-solution-vcw--lt .s-solution-vc--green .s-solution-vc-num{color:#ECEAE7}
  .s-solution-vcw--lt .s-solution-vc--green .s-solution-vc-exp{color:#A9A5A1}
  .s-solution-vcw--lt .s-solution-vc--green .s-solution-vc-chip{box-shadow:0 1px 2px rgba(0,0,0,.4)}
  .s-solution-vcw--lt .s-solution-vc--green .s-solution-vc-visa{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
  .s-solution-vcw--lt .s-solution-vc--green .s-solution-vc-shine{
    background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(222,255,205,.1) 50%,rgba(255,255,255,0) 60%);
  }
}

/* ============ footer ============ */
/* ================= s-footer · тихий плотный футер (ref: apple.com) =================
   r33 п.7: без «бесконечных линий» — все сквозные border-top у блоков убраны,
   ритм держат чистые отступы; единственный волосок остался над копирайтом. */
.s-footer{
  background:#fff;
  margin-top:48px;
  overflow:hidden;
}

/* ---------- верх: слева лого+слоган, справа кнопки ---------- */
.s-footer .s-footer-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px 32px;flex-wrap:wrap;
  padding:44px 0 36px;
}
.s-footer .s-footer-brand{display:flex;flex-direction:column;align-items:flex-start}
.s-footer .s-footer-logo{display:inline-block}
.s-footer .s-footer-logo img{width:172px;height:auto;display:block;opacity:.92;transition:opacity .2s ease}
.s-footer .s-footer-logo:hover img{opacity:1}
.s-footer .s-footer-slogan{display:block;margin:12px 0 0;font-size:13.5px;line-height:1.5;color:#86868b;max-width:340px}

/* кнопки справа: единый рост 36px, радиус 10px, тихие ховеры без скачков */
.s-footer .s-footer-actions{display:flex;align-items:center;gap:10px}
.s-footer .s-footer-actions .pill{
  height:36px;padding:0 16px;border-radius:10px;
  font-size:13.5px;font-weight:500;line-height:1;
  transition:background .2s ease,border-color .2s ease;
}
.s-footer .s-footer-actions .pill:hover,
.s-footer .s-footer-actions .pill:active{transform:none}
.s-footer .s-footer-actions .pill--dark:hover{background:#2a2a2a}
.s-footer .s-footer-langbtn{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 13px;border-radius:10px;white-space:nowrap;
  font-size:13.5px;font-weight:500;line-height:1;color:var(--ink);
  border:.5px solid #e0e0de;background:#fff;
  transition:background .2s ease,border-color .2s ease;
}
.s-footer .s-footer-langbtn:hover{background:#f7f7f5;border-color:#d6d6d3}
.s-footer .s-footer-langbtn svg{flex:none;border-radius:50%}
/* единая ТГ-кнопка (стандарт r30): белый квадрат как кнопка языка —
   радиус/волосок те же; r33 п.7 — квадрат чуть меньше соседних кнопок (33px),
   самолётик ~16px. r34 п.2: viewBox="4.45 5.12 15 15" центрирует глиф ОПТИЧЕСКИ —
   bbox-центр пути (11.05,12.62), центроид массы 12.90 правее (нос-треугольник
   тяжелее хвоста), центр окна взят между ними (11.95) — иначе самолёт «уезжает»
   вправо примерно на 1px */
.s-footer .s-footer-tg{
  display:inline-flex;align-items:center;justify-content:center;
  width:33px;height:33px;flex:none;border-radius:10px;
  background:#fff;border:.5px solid #e0e0de;
  transition:background .2s ease,border-color .2s ease;
}
.s-footer .s-footer-tg:hover{background:#f7f7f5;border-color:#d6d6d3}
.s-footer .s-footer-tg svg{display:block;width:16px;height:16px}
.s-footer .s-footer-tg svg path{fill:#161515}

/* ---------- 6 колонок ---------- */
.s-footer .s-footer-cols{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:28px 20px;
  padding:4px 0 44px;
}
.s-footer .s-footer-col > b{
  display:block;margin-bottom:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:#86868b;
}
.s-footer .s-footer-col li a{
  display:inline-block;padding:4px 0;
  font-size:13px;line-height:1.45;color:#515154;
  transition:color .18s ease;
}
.s-footer .s-footer-col li a:hover{color:#161515}

/* ---------- комплаенс: KYC + безопасность средств ---------- */
.s-footer .s-footer-compl{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:0 0 32px;
}
.s-footer .s-footer-compl-card{
  display:flex;align-items:flex-start;gap:14px;
  padding:20px;border-radius:14px;
  background:#fff;border:.5px solid #e0e0de;
}
.s-footer .s-footer-compl-ic{
  flex:none;display:inline-flex;
  margin-top:-1px;color:#161515;
}
.s-footer .s-footer-compl-ic svg{width:22px;height:22px;display:block}
.s-footer .s-footer-compl-tx b{display:block;font-size:14px;font-weight:600;line-height:1.35;color:#161515;margin-bottom:6px}
.s-footer .s-footer-compl-tx p{font-size:12.5px;line-height:1.6;color:#6f6f6f}

/* ---------- строка: адрес + trustscore ---------- */
.s-footer .s-footer-addr{
  padding:0 0 10px;
}
.s-footer .s-footer-addr p{font-size:12px;line-height:1.6;color:#86868b}

/* ---------- дисклеймеры ---------- */
.s-footer .s-footer-note{
  display:flex;flex-direction:column;gap:8px;
  padding:0 0 24px;
}
.s-footer .s-footer-note p{font-size:11.5px;line-height:1.65;color:#a1a1a6}

/* ---------- низ: копирайт · правовые (единственный волосок футера) ---------- */
.s-footer .s-footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px 24px;flex-wrap:wrap;
  padding:22px 0 30px;border-top:.5px solid #e0e0de;
}
.s-footer .s-footer-bottom > p{font-size:12px;line-height:1.5;color:#86868b}
.s-footer .s-footer-legal{display:flex;align-items:center;font-size:12px;line-height:1.5}
.s-footer .s-footer-legal a{color:#515154;transition:color .18s ease}
.s-footer .s-footer-legal a:hover{color:#161515}
.s-footer .s-footer-legal a + a{
  margin-left:12px;padding-left:12px;
  border-left:1px solid #d6d6d3;
}

/* ---------- адаптив ---------- */
@media(max-width:991px){
  .s-footer{margin-top:36px}
  .s-footer .s-footer-head{padding:40px 0 32px}
  .s-footer .s-footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px;padding:4px 0 40px}
}
@media(max-width:767px){
  .s-footer{margin-top:28px}
  .s-footer .s-footer-head{flex-direction:column;align-items:flex-start;gap:22px;padding:36px 0 26px}
  /* п.16: на мобиле шапка футера без кнопок — EN, Войти, Получить доступ и ТГ-иконка скрыты */
  .s-footer .s-footer-actions{display:none}
  .s-footer .s-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;padding:2px 0 36px}
  .s-footer .s-footer-compl{grid-template-columns:1fr;gap:12px;padding:0 0 28px}
  .s-footer .s-footer-compl-card{padding:16px 18px}
  .s-footer .s-footer-addr{padding:0 0 8px}
  .s-footer .s-footer-note{padding:0 0 20px}
  .s-footer .s-footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 0 28px}
}

/* ---------- carousel dots (global) ---------- */
.car-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.car-dot{width:9px;height:9px;border-radius:50%;background:#d9d9d6;transition:background .2s ease,transform .3s var(--spring)}
.car-dot.on{background:var(--ink);transform:scale(1.25)}
[data-carousel]{cursor:grab}
[data-carousel].dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}