/* ============================================================
   site.css — компоненты страниц BSS (шапка, hero, блоки, футер).
   Питается токенами из main.css. Подключается и на страницах, и в uikit.html,
   чтобы кит показывал РЕАЛЬНЫЕ компоненты, а не их копии.
   ============================================================ */
/* ================= HEADER ================= */
  /* Header 1:1 из Figma (1022:4910): padding 16/118, высота 68,
     лого 57×30.56, gap лого→меню 28, gap пунктов 16, текст 14/20 Medium,
     справа: разделитель 1×20 → gap 16 → кнопки gap 4 (padding 8/28, radius 32) */
  .site-header{position:relative;z-index:40;background:#fff}
  .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;
    width:100%;padding-block:16px;min-height:68px}
  .site-header__left{display:flex;align-items:center;gap:28px;min-width:0}
  .brand{display:inline-flex;align-items:center}
  /* настоящий вектор из макета — логотип не пересобираем */
  .brand__mark{display:block;width:57px;height:30.56px}
  .nav{display:flex;align-items:center;gap:16px}
  .nav a{font-weight:500;font-size:14px;line-height:20px;color:var(--text-primary);
    display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:color .16s}
  .nav a:hover{color:var(--text-accent)}
  .nav .chev{width:12px;height:12px}
  .site-header__right{display:flex;align-items:center;gap:16px}
  /* разделитель перед «Войти»: в разметке снят 06.08, стиль оставлен на случай возврата */
  .site-header__divider{width:1px;height:20px;background:var(--stroke-primary);flex:0 0 auto}
  .site-header__btns{display:flex;align-items:center;gap:4px}
  .hbtn{display:inline-flex;align-items:center;justify-content:center;padding:8px 28px;border-radius:var(--radius-2xl);
    font-weight:500;font-size:14px;line-height:20px;white-space:nowrap;transition:background .16s,color .16s}
  .hbtn--secondary{background:var(--btn-secondary);color:var(--text-primary)}
  .hbtn--secondary:hover{background:var(--btn-secondary-hover)}
  .hbtn--primary{background:var(--btn-primary);color:#fff}
  .hbtn--primary:hover{background:var(--btn-primary-hover)}
  .burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center}
  .burger span{width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:.2s}

  /* ================= МЕГА-МЕНЮ «ПРОДУКТЫ» =================
     1:1 из Figma 1613:12975: контейнер padding 8, рельс 287 (пункт 271×44, gap 4,
     поля 24/8), панель = 2 колонки ссылок + колонка с промо, gap 8, отступ сверху 24. */
  .has-mega{position:relative}
  .nav__link.is-open{color:var(--text-accent)}
  .nav__link.is-open .chev{transform:rotate(180deg)}
  .nav .chev{transition:transform .22s}
  .mega{position:absolute;left:var(--margin);right:var(--margin);top:calc(100% - 1px);z-index:30;
    background:#fff;border-radius:var(--radius-card);padding:8px;overflow:hidden;
    box-shadow:0 34px 44px rgba(0,0,0,.15),0 -1px 8px rgba(0,0,0,.19);
    display:flex;gap:8px;align-items:stretch;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .mega.is-open{opacity:1;visibility:visible;transform:none}
  .mega__rail{width:287px;flex:0 0 auto;background:var(--bg-secondary);border-radius:var(--radius-m);
    padding:24px 8px;display:flex;flex-direction:column;gap:4px}
  .mega__cat{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:44px;
    padding:12px 16px;border-radius:var(--radius-m);font-weight:500;font-size:14px;line-height:20px;
    color:var(--text-primary);text-align:left;transition:background .16s,color .16s}
  .mega__cat:hover{background:rgba(255,255,255,.6)}
  .mega__cat.is-active{background:#fff;color:var(--text-accent)}
  /* «Заказная разработка» — не раздел, а ссылка на отдельную страницу: наведение
     не переключает панель, поэтому и подсвечивается она как ссылка (цветом текста),
     а не плашкой активной категории. Стрелка стоит вплотную к тексту и приглушена. */
  .mega__cat--link{justify-content:flex-start;color:var(--text-primary)}
  .mega__cat--link:hover{background:transparent;color:var(--text-accent)}
  .mega__cat--link .mlink__go{margin-left:0}
  .mega__cat--link .mlink__go .b{fill:var(--text-tertiary)}
  .mega__cat--link:hover .mlink__go .b{fill:var(--icon-secondary)}
  .mega__panes{flex:1;min-width:0;padding-top:24px}
  .mega__pane{display:none;gap:8px}
  .mega__pane.is-active{display:flex}
  .mega__col{flex:1 1 0;min-width:0;padding-inline:16px;display:flex;flex-direction:column}
  .mega__side{flex:1 1 0;min-width:0;padding-inline:16px;display:flex;flex-direction:column;gap:32px}

  /* ссылка меню: плашка-иконка 36 + текст 14/20, отступ 12 */
  .mlink{display:flex;align-items:center;gap:12px;min-height:36px;padding-block:8px;
    font-size:14px;line-height:20px;color:var(--text-primary);transition:color .16s}
  .mlink:hover{color:var(--text-accent)}
  .mlink__ico{width:36px;height:36px;flex:0 0 auto;border-radius:var(--radius-m);
    background:var(--bg-secondary);display:grid;place-items:center;transition:background .16s}
  .mlink:hover .mlink__ico{background:var(--tag-default)}
  .mlink__ico svg{width:20px;height:20px;stroke:var(--icon-primary);stroke-width:1.67;
    fill:none;stroke-linecap:round;stroke-linejoin:round}
  .mlink__g{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
    color:var(--text-tertiary);margin:24px 0 8px}
  .mlink__g:first-child{margin-top:0}
  .mlink--upd{margin-top:auto}
  .mlink__go{width:16px;height:16px;flex:0 0 auto;margin-left:auto}

  /* промо-карточка меню */
  /* промо-карточка: фон-градиент из макета + виджет с графиком поверх */
  .mpromo{display:block;position:relative;width:232px;max-width:100%;border-radius:var(--radius-m);
    overflow:hidden;color:#fff;padding-bottom:20px;
    background:url("../img/menu-promo.png") center/cover no-repeat,
      linear-gradient(168deg,#2a1866,#4b2ec9 55%,#8f5bff)}
  .mpromo__art{display:block;padding:16px 16px 8px}
  .mpromo__art img{width:100%;height:auto;display:block}
  .mpromo__t{display:block;padding:8px 16px 0;font-weight:500;font-size:14px;line-height:20px}
  .mpromo__c{display:block;padding:8px 16px 0;font-size:14px;line-height:20px;color:rgba(255,255,255,.8)}
  .mpromo:hover .mpromo__c{color:#fff}

  @media (max-width:1000px){ .mega{display:none} }


  /* --- мобильная адаптация меню (в макете не нарисована) ---
     Мега-меню требует ширины и наведения. В drawer «Продукты» раскрывается
     в те же категории; каждая — аккордеон с теми же ссылками и иконками. */
  .mcats{display:flex;flex-direction:column;gap:4px}
  .mcat__h{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
    padding:12px 16px;border-radius:var(--radius-m);background:var(--bg-secondary);
    font-weight:500;font-size:15px;line-height:20px;color:var(--text-primary);text-align:left}
  .mcat__h .chev{width:16px;height:16px;flex:0 0 auto;transition:transform .24s}
  /* та же ссылка в мобильном drawer */
  .mcat__h--link{justify-content:flex-start}
  .mcat__h--link .mlink__go{margin-left:0}
  .mcat__h--link .mlink__go .b{fill:var(--text-tertiary)}
  .mcat.is-open > .mcat__h{background:var(--tag-default);color:var(--text-accent)}
  .mcat.is-open > .mcat__h .chev{transform:rotate(180deg)}
  .mcat__b{display:block;max-height:0;overflow:hidden;transition:max-height .32s ease;padding-inline:8px}
  /* запас: самая длинная категория («Речевые технологии с ИИ») — 856px */
  .mcat.is-open .mcat__b{max-height:1100px}
  /* .mmenu__sub a{display:block} перебивал flex — возвращаем строку «иконка + текст» */
  .mcats .mlink{display:flex;align-items:center;gap:12px;padding-block:10px;font-size:15px;line-height:20px}
  .mcats .mlink__ico{width:36px;height:36px}
  .mpromo--m{width:100%;margin-top:12px}

  /* ================= HERO ================= */
  /* Hero — карточка с отступами 16 по бокам и скруглением 40 (Figma: x=16, w=1408) */
  .hero-wrap{padding-inline:16px}
  .hero{position:relative;width:100%;overflow:hidden;border-radius:40px;color:#fff;isolation:isolate}
  /* Фон hero — whatamesh (движок героя depot42). Библиотека читает цвета
     из этих переменных прямо с канваса. Палитра из брифа: 01063B / 070797 / A86EFF
     (+ промежуточный оттенок — движку нужны четыре точки). */
  #mesh{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
    --gradient-color-1:#01063b;
    --gradient-color-2:#070797;
    --gradient-color-3:#a86eff;
    --gradient-color-4:#4a1fd6}
  /* статичный фолбэк — виден до инициализации и при prefers-reduced-motion */
  .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(ellipse 60% 45% at 22% 26%,#4a1fd6 0%,transparent 68%),
      radial-gradient(ellipse 55% 50% at 82% 74%,#a86eff 0%,transparent 66%),
      linear-gradient(160deg,#01063b 0%,#070797 100%)}
  .hero__glow{position:absolute;left:50%;top:-14%;width:min(1280px,96%);height:74%;transform:translateX(-50%);
    background:
      radial-gradient(46% 52% at 42% 26%,rgba(255,255,255,.42),rgba(255,255,255,0) 68%),
      radial-gradient(60% 44% at 62% 12%,rgba(206,184,255,.32),rgba(255,255,255,0) 70%);
    z-index:1;pointer-events:none;filter:blur(10px)}
  .hero__inner{position:relative;z-index:2;padding-block:56px 72px}

  .hero__copy{text-align:center;max-width:820px;margin-inline:auto}
  /* эйброу = общий компонент .section-label (Figma Text/Section label), здесь только отступ */
  .hero__eyebrow{margin-bottom:12px}
  .hero__h1{font-weight:500;letter-spacing:-.03em;color:#fff;text-wrap:balance;
    text-shadow:0 2px 40px rgba(150,120,255,.45),0 0 22px rgba(255,255,255,.28)}
  /* в макете подзаголовок без прозрачности — чистый белый */
  .hero__sub{margin-top:22px;font-size:16px;line-height:24px;color:var(--text-primary-on)}
  .hero__btns{display:flex;gap:12px;justify-content:center;margin-top:32px}

  /* Весь размер круга — ОДНО число `--fw` (ширина юнита 712 из макета).
     От него же считается ширина колонок, поэтому плашка физически не может наехать
     на круг: колонке отдаётся ровно то, что осталось сбоку от обода.
     582 = 712 × .817 — размер из Figma; уже он сжимается вместе с окном. */
  .hero__stage{--fw:clamp(380px,calc(65vw - 250px),582px);
    --rim:calc(var(--fw) * .854);                 /* обод = 608 в юните 712 */
    position:relative;margin-top:48px;display:flex;justify-content:space-between;
    align-items:center;min-height:var(--rim)}
  /* обёртка колонок прозрачна для грида на десктопе */
  .pills-window,.pills-window__inner{display:contents}
  /* pill'ы 340×48 в колонке 376; снаружи 28 как в макете, внутри 8 — зазор до круга.
     max-width — тот самый предохранитель: (ширина сцены − обод) / 2 */
  .pcol{display:flex;flex-direction:column;min-width:0;padding-inline:28px 8px;
    flex:0 1 376px;max-width:calc((100% - var(--rim)) / 2);position:relative;z-index:2}
  .pcol--left{align-items:stretch;order:1;gap:24px}
  .flower{order:2}
  .pcol--right{align-items:stretch;order:3;gap:16px;padding-inline:8px 28px}

  /* стеклянная pill */
  .pill{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:48px;padding:0 8px 0 24px;border-radius:var(--radius-max);color:#fff;font-weight:500;font-size:16px;line-height:20px;
    white-space:nowrap;cursor:pointer;
    background:radial-gradient(120% 150% at 22% 50%,rgba(170,146,255,.14),rgba(211,216,255,.24));
    border:1px solid rgba(255,255,255,.20);
    -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
    box-shadow:0 20px 44px rgba(20,10,50,.26), inset 0 1px 0 rgba(255,255,255,.22);
    transform:translate(var(--tx,0),var(--ty,0)) perspective(520px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
    transition:transform .3s cubic-bezier(.18,.75,.25,1),background .3s;transform-style:preserve-3d}
  @supports (backdrop-filter:url("#glass")) or (-webkit-backdrop-filter:url("#glass")){
    .pill{-webkit-backdrop-filter:url(#glass);backdrop-filter:url(#glass)}
  }
  .pill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(120px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.4),transparent 62%)}
  .pill:hover::after{opacity:1}
  .pill__arw{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:0 0 auto;
    background:rgba(255,255,255,.16);transition:background .2s}
  .pill:hover .pill__arw{background:rgba(255,255,255,.30)}
  /* бесконечная лента плашек (собирается скриптом, живёт только на ≤712) */
  .ploop{display:none}
  .ploop__set{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
  .pill__arw svg{width:13px;height:13px}
  /* Кегль убывает вслед за колонкой, пока текст ещё помещается целиком.
     Когда перестаёт — ниже (≤1000) включается раскладка «плашки под кругом».
     Правила стоят ПОСЛЕ базового .pill: та же специфичность, решает порядок. */
  @media (min-width:1101px) and (max-width:1439px){ .pill{font-size:15px} }
  @media (min-width:1101px) and (max-width:1339px){ .pill{font-size:14px} }
  @media (min-width:1101px) and (max-width:1239px){ .pill{font-size:13px} }

  /* flower (petal-ring) — сетка макета (юнит 712) внутри контейнера ширины --fw.
     Внутренние размеры выражены в cqw: 1px макета = 100/712 = .1404cqw. Поэтому круг
     растёт ПЛАВНО от одного числа — ни transform:scale, ни ступенек по брейкпоинтам.
     Обод 608 → 85.39cqw, цветной круг 522 → 73.31cqw (как в Figma). */
  .flower{position:absolute;left:50%;top:50%;width:var(--fw);aspect-ratio:1/1;
    transform:translate(-50%,-50%);margin:0;z-index:1;container-type:inline-size}
  .flower__box{position:absolute;inset:0}
  .flower .layer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block}
  .flower .rim{position:absolute;left:50%;top:50%;width:85.39cqw;height:85.39cqw;transform:translate(-50%,-50%);border-radius:50%;
    background:rgba(4,3,24,.22)}
  .flower .rim::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;pointer-events:none;
    background:conic-gradient(from 128deg,rgba(255,255,255,.38),rgba(255,255,255,.03) 27%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.03) 78%,rgba(255,255,255,.38));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
  .flower .sphere,.flower .overlay{width:73.31cqw;height:73.45cqw}
  .flower .core{width:69.66cqw;height:69.66cqw;border-radius:50%;mix-blend-mode:screen;animation:pulse 5.5s ease-in-out infinite;
    -webkit-mask:radial-gradient(circle at 50% 50%,#000 30%,rgba(0,0,0,0) 68%);mask:radial-gradient(circle at 50% 50%,#000 30%,rgba(0,0,0,0) 68%)}
  /* Вращается ОДИН слой-обёртка — лепестки и подписи внутри него неподвижны друг
     относительно друга, поэтому синхрон гарантирован даже при позднем появлении SVG.
     В keyframes transform задан ЦЕЛИКОМ и в from, и в to: иначе браузер интерполирует
     от «текущего» значения и слой за цикл уползает на -50%/-50% с рывком в конце. */
  .flower__rot{position:absolute;left:50%;top:50%;width:100cqw;height:100cqw;
    transform:translate(-50%,-50%);transform-origin:50% 50%;
    animation:spin 110s linear infinite;will-change:transform}
  .flower__rot > *{position:absolute;left:0;top:0;width:100cqw;height:100cqw;display:block}
  .flower .labels-svg{overflow:visible;pointer-events:none}
  .flower .labels-svg text{fill:#fff;font-family:var(--font);font-size:21px;font-weight:500;text-shadow:0 1px 6px rgba(40,10,60,.35)}
  @keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.78}50%{transform:translate(-50%,-50%) scale(1.1);opacity:1}}
  @keyframes spin{
    from{transform:translate(-50%,-50%) rotate(0deg)}
    to  {transform:translate(-50%,-50%) rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){ .flower__rot{animation:none} }
  .flower .cx{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);text-align:center;pointer-events:none;
    filter:drop-shadow(0 0 3.09cqw #ee31ff) drop-shadow(0 0 6.46cqw rgba(238,49,255,.55))}
  .flower .cx b{display:block;font-weight:800;font-size:11.24cqw;line-height:.9;letter-spacing:-.07em;
    background:linear-gradient(137deg,#f7e1ff 17%,#fca6f7 65%,#ff9969 97%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .flower .cx span{display:block;margin-top:.56cqw;font-weight:700;font-size:3.51cqw;letter-spacing:-.01em;text-transform:uppercase;
    background:linear-gradient(167deg,#f7e1ff 17%,#ff8eea 97%);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* ================= ЛЕНТА ЛОГОТИПОВ =================
     Ячейка 200×93 из макета (1528:19071), логотип вписан по центру (в макете он прижат
     влево — это сборка макета, Андрей просил подбить). Лента живёт внутри .container,
     поэтому обрезается по границам контента, а не по краю экрана. Движение — в JS. */
  .logos{background:var(--bg-primary);padding-block:8px}
  .marquee{position:relative;overflow:hidden}
  .marquee__track{display:flex;align-items:center;width:max-content;will-change:transform}
  /* 216 = ячейка 200 + зазор 16 из макета. Логотипы приехали из макета уже одноцветными
     (#0f1825 зашит в сам файл), поэтому серый фильтр больше не нужен. */
  .mcell{flex:0 0 216px;height:93px;display:grid;place-items:center}
  .mcell img{display:block;opacity:.9;transition:opacity .25s}
  .mcell:hover img{opacity:1}
  /* размер ячейки НЕ уменьшаем на мобиле: логотипы должны читаться так же, как на десктопе
     (лента и так уезжает за край — это marquee, не сетка) */

  /* ================= МОБИЛЬНОЕ МЕНЮ (наше предложение — в макете не нарисовано) ================= */
  .burger{position:relative;z-index:60}
  .burger span{transform-origin:center;transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .2s}
  body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  body.menu-open{overflow:hidden}
  /* шапка (лого + бургер-крестик) остаётся видна поверх открытого меню */
  body.menu-open .site-header{z-index:60}
  body.menu-open .site-header__login,body.menu-open .site-header__right .btn--primary,
  body.menu-open .site-header__divider{opacity:0;pointer-events:none;transition:opacity .18s}
  .mmenu{position:fixed;inset:0;z-index:50;background:var(--bg-primary);display:flex;flex-direction:column;
    padding:88px var(--margin) 32px;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .26s ease,transform .26s ease,visibility .26s}
  body.menu-open .mmenu{visibility:visible;opacity:1;transform:none}
  .mmenu__list{display:flex;flex-direction:column;border-top:1px solid var(--stroke-primary)}
  .mmenu__item{border-bottom:1px solid var(--stroke-primary)}
  .mmenu__link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    padding:18px 0;font-weight:500;font-size:20px;line-height:24px;letter-spacing:-.02em;text-align:left;color:var(--text-primary)}
  .mmenu__link .chev{width:16px;height:16px;transition:transform .25s;color:var(--text-tertiary)}
  .mmenu__item.is-open .mmenu__link .chev{transform:rotate(180deg)}
  .mmenu__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.7,.3,1)}
  .mmenu__item.is-open .mmenu__sub{grid-template-rows:1fr}
  .mmenu__sub > div{overflow:hidden;min-height:0}
  .mmenu__sub a{display:block;padding:11px 0;font-size:16px;color:var(--text-secondary)}
  .mmenu__sub a:hover{color:var(--text-accent)}
  .mmenu__sub > div > *:last-child{padding-bottom:18px}
  .mmenu__actions{display:flex;flex-direction:column;gap:10px;margin-top:32px}
  .mmenu__actions .btn{width:100%;height:52px}
  @media (min-width:1001px){ .mmenu{display:none} }

  /* ================= CAPABILITIES ================= */
  .cap__head{max-width:640px;margin-bottom:48px}
  .cap__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px}
  .cap__tab{height:48px;padding:0 24px;border-radius:var(--radius-max);background:var(--tab-default);
    color:var(--text-secondary);font-weight:500;font-size:16px;transition:.18s;white-space:nowrap}
  .cap__tab:hover{background:var(--tab-hover)}
  .cap__tab.is-active{background:var(--tab-active);color:var(--text-accent)}
  /* колонки 598 + 8 + 598 = 1204, как в макете */
  .cap__body{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
  .cap__panel{display:none}
  .cap__panel.is-active{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
  @supports not (grid-template-columns:subgrid){
    .cap__panel.is-active{display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px}
  }
  .cap__scenarios{padding-right:32px}
  .cap__scenarios{display:flex;flex-direction:column;gap:32px;min-width:0}
  .scenario{display:grid;grid-template-columns:auto 1fr;gap:16px}
  .scenario + .scenario{border-top:1px solid var(--stroke-primary);padding-top:32px}
  .scenario__ico{width:28px;height:28px;color:var(--icon-primary)}
  .scenario__title{margin-bottom:10px}
  .scenario__text{color:var(--text-secondary);max-width:520px}
  .scenario__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .ptag{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 16px;border-radius:var(--radius-max);
    background:var(--tag-default);color:var(--text-primary);font-size:15px;font-weight:400;transition:.18s;cursor:pointer}
  .ptag:hover{background:var(--tag-hover)}
  .ptag__arw{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg-accent);flex:0 0 auto}
  .ptag__arw svg{width:11px;height:11px}
  .cap__illu{border-radius:var(--radius-card);overflow:hidden;aspect-ratio:1/1;background:var(--bg-secondary)}
  .cap__illu img{width:100%;height:100%;object-fit:cover}

  /* ================= CTA + ФОРМА ================= */
  .cta{background:var(--bg-primary)}
  .cta__inner{padding-block:0 96px}
  .cta__card{position:relative;display:grid;grid-template-columns:1fr 497px;gap:0;overflow:hidden;
    border-radius:var(--radius-card);background:linear-gradient(140deg,#00098a 0%,#1b0f9e 46%,#9853ff 100%);
    min-height:634px}
  /* одна лента (настройки Андрея из /hero-silk) — кончики затухают сами, маска не нужна */
  .cta__silk{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
  .cta__copy{position:relative;z-index:2;padding:44px var(--pad-card) var(--pad-card);color:#fff;align-self:start}
  .cta__copy p{margin-top:16px;font-size:16px;line-height:24px;color:rgba(255,255,255,.86)}
  .cta__form{position:relative;z-index:2;margin:8px;padding:36px var(--pad-card);background:#fff;border-radius:var(--radius-card);
    display:flex;flex-direction:column;gap:12px;align-self:stretch}
  .cta__form h3{font-weight:500;font-size:24px;line-height:28px;letter-spacing:-.03em}
  .cta__form .sub{font-size:16px;line-height:24px;color:var(--text-secondary);margin-bottom:12px}
  /* поля во всю ширину карточки — отступы слева и справа одинаковые (padding формы) */
  .cta__field{width:100%}
  .cta__form .input{width:100%}
  .cta__form .btn{height:56px;margin-top:8px}
  .cta__agree{display:flex;align-items:flex-start;gap:10px;margin-block:8px 0;font-size:14px;line-height:20px;
    color:var(--text-secondary);cursor:pointer}
  .cta__agree input{position:absolute;opacity:0;width:0;height:0}
  .cta__box{width:20px;height:20px;border-radius:6px;background:var(--input-default);flex:0 0 auto;margin-top:1px;
    display:grid;place-items:center;transition:.18s;border:1px solid transparent}
  .cta__agree input:checked + .cta__box{background:var(--bg-accent);border-color:var(--bg-accent)}
  .cta__agree input:focus-visible + .cta__box{outline:2px solid var(--stroke-accent);outline-offset:2px}
  .cta__box svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .15s}
  .cta__agree input:checked + .cta__box svg{opacity:1}
  .cta__agree a{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px}
  /* описание ошибки как в Figma: 12/16, padding 0 16 4 */
  .cta__err{display:none;font-size:12px;line-height:16px;color:var(--btn-error);padding:4px 16px 0}
  .field-err .cta__err{display:block}
  .field-err .input{background:var(--input-error);border-color:var(--btn-error)}
  .cta__ok{display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
    padding-block:48px}
  .cta__form.is-sent .cta__ok{display:flex}
  .cta__form.is-sent > *:not(.cta__ok){display:none}
  .cta__ok .ic{width:56px;height:56px;border-radius:50%;background:var(--btn-success);display:grid;place-items:center}
  .cta__ok .ic svg{width:26px;height:26px;color:#fff}
  @media (max-width:1000px){
    .cta__card{grid-template-columns:1fr;min-height:0}
    .cta__copy{padding:36px var(--pad-card) 0}
    .cta__form{margin:20px 8px 8px}
    .cta__silk{opacity:.95}
    .cta__inner{padding-block:0 64px}
  }
  @media (max-width:600px){
    .cta__copy{padding:28px var(--pad-card) 0}
    .cta__form{padding:24px var(--pad-card);margin:16px 8px 8px}
  }

  /* ================= FOOTER ================= */
  .ft{background:var(--bg-tertiary);color:#fff;overflow:clip}
  .ft__inner{padding-block:64px 0;display:flex;flex-direction:column;gap:48px}
  .ft__grid{display:grid;grid-template-columns:295px 1fr;gap:8px;align-items:start}
  .ft__brand{display:flex;flex-direction:column;gap:48px}
  .ft__logo{display:block;width:57px;height:30.56px}
  .ft__slogan{font-weight:500;font-size:24px;line-height:28px;letter-spacing:-.03em;max-width:258px}
  .ft__brandbody{display:flex;flex-direction:column;gap:48px}
  .ft__ctas{display:flex;flex-direction:column;gap:48px;align-items:flex-start}
  .ft__contacts{display:flex;flex-direction:column;gap:16px}
  .ft__contacts h4{font-weight:500;font-size:14px;line-height:20px}
  .ft__contacts p{font-size:14px;line-height:20px;color:var(--text-secondary-on)}
  .ft__dir{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .ft__col{padding-inline:24px;display:flex;flex-direction:column;gap:48px}
  .ft__col:first-child{padding-left:0}
  .ft__grp{display:flex;flex-direction:column;gap:16px}
  .ft__gtitle{font-weight:500;font-size:16px;line-height:24px;color:#fff;padding:0;
    display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left}
  .ft__gtitle--h3{font-weight:500;font-size:24px;line-height:28px;letter-spacing:-.03em}
  .ft__gtitle .sign{display:none;width:20px;height:20px;position:relative;flex:0 0 auto}
  .ft__gtitle .sign::before,.ft__gtitle .sign::after{content:"";position:absolute;left:50%;top:50%;
    background:#fff;border-radius:2px;transform:translate(-50%,-50%);transition:transform .25s,opacity .25s}
  .ft__gtitle .sign::before{width:12px;height:1.5px}
  .ft__gtitle .sign::after{width:1.5px;height:12px}
  .ft__grp.is-open .sign::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
  .ft__sub{display:grid;grid-template-rows:1fr}
  /* min-height:0 обязателен — иначе grid-элемент не сжимается до 0fr и «торчит» первая ссылка */
  .ft__sub > ul{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}
  .ft__sub a{font-size:14px;line-height:20px;color:var(--text-secondary-on);transition:color .18s}
  /* разделитель внутри списка (в макете — линия после «АУСН для клиентов банка») */
  .ft__sep{height:1px;background:var(--stroke-on);margin-block:8px;list-style:none}
  /* заголовок-рубрика без своих ссылок: не кнопка, ничего не раскрывает */
  .ft__gtitle--plain{cursor:default}
  .ft__sub a:hover{color:#fff}
  .ft__hr{height:1px;background:var(--stroke-on)}
  .ft__social{display:flex;justify-content:flex-end;gap:8px}
  .ft__social a{width:36px;height:36px;border-radius:var(--radius-max);background:rgba(255,255,255,.15);
    display:grid;place-items:center;transition:background .2s}
  .ft__social a:hover{background:rgba(255,255,255,.28)}
  /* у иконок разные пропорции (vk 17.9×11, telegram 17×14.5, max 15×15, youtube 16×11.3) —
     принудительный квадрат их растягивал; держим натуральный размер и вписываем в бокс */
  .ft__social img,.ft__social svg{width:auto;height:auto;max-width:18px;max-height:18px;object-fit:contain;display:block}
  .ft__bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding-block:26px;border-top:1px solid var(--stroke-on);margin-top:0}
  .ft__bleft{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
  .ft__bottom,.ft__bottom a{font-size:14px;line-height:20px;color:var(--text-secondary-on)}
  .ft__bottom a:hover{color:#fff}
  .ft__made{display:flex;align-items:center;gap:8px}
  .ft__made img{width:70px;height:44px;filter:brightness(0) invert(1);opacity:.85}
  @media (max-width:1000px){
    .ft__grid{grid-template-columns:1fr;gap:80px}
    .ft__slogan{max-width:none}
    .ft__ctas{flex-direction:row;gap:8px;flex-wrap:wrap}
    .ft__dir{grid-template-columns:repeat(3,1fr)}
  }
  /* мобиль: каталог — аккордеоны */
  @media (max-width:712px){
    .ft__inner{padding-block:48px 0;gap:32px}
    .ft__dir{grid-template-columns:1fr;gap:0}
    .ft__col{padding-inline:0;gap:0}
    .ft__grp{gap:0;border-bottom:1px solid var(--stroke-on)}
    .ft__gtitle{padding-block:18px;font-size:16px}
    .ft__gtitle--h3{font-size:16px;letter-spacing:0}
    .ft__gtitle .sign{display:block}
    /* collapse через max-height — надёжнее, чем 0fr (grid-элемент не всегда сжимается) */
    .ft__sub{display:block;max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.2,.7,.3,1)}
    .ft__grp.is-open .ft__sub{max-height:760px}
    .ft__sub > ul{padding-bottom:18px}
    .ft__hr{display:none}
    .ft__social{justify-content:flex-start}
    .ft__bottom{flex-direction:column;align-items:flex-start;gap:16px}
  }

  /* ================= КЕЙСЫ ================= */
  .cases{background:var(--bg-primary)}
  .cases__inner{padding-block:96px 64px}
  .cases__head{display:grid;grid-template-columns:497fr 598fr;gap:clamp(24px,4vw,109px);align-items:start}
  .cases__lead{padding-top:8px;color:var(--text-primary)}
  .cases__arrows{display:flex;justify-content:flex-end;gap:4px;margin-top:16px}
  .sarrow{width:40px;height:40px;border-radius:var(--radius-max);display:grid;place-items:center;
    background:var(--bg-accent);color:#fff;transition:.18s}
  .sarrow:hover{background:var(--btn-primary-hover)}
  .sarrow[disabled]{background:var(--btn-disabled);color:var(--icon-secondary-on);cursor:default}
  .sarrow svg{width:24px;height:24px}
  .cases__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px) / 3);gap:8px;
    margin-top:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--margin) * -1);padding-inline:var(--margin);
    /* без scroll-padding snap притягивает карточку к краю scrollport и «съедает» поле —
       первая карточка уезжала за границу контента */
    scroll-padding-inline:var(--margin)}
  .cases__track::-webkit-scrollbar{display:none}
  .case{position:relative;background:var(--bg-secondary);border-radius:var(--radius-card);padding:var(--pad-card);
    min-height:465px;display:flex;flex-direction:column;gap:32px;overflow:hidden;scroll-snap-align:start}
  .case::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(15.92deg,#f6f6f6 78%,var(--case-accent,#8d6dff) 119.73%)}
  .case > *{position:relative;z-index:1}
  .case__info{display:flex;flex-direction:column;gap:28px;flex:1}
  .case__logo{height:59px;display:flex;align-items:center}
  .case__logo img{max-height:46px;width:auto;max-width:150px;object-fit:contain}
  .case__title{font-weight:500;font-size:24px;line-height:28px;letter-spacing:-.03em;color:#0a0b16}
  .case__hr{height:1px;background:var(--stroke-primary);margin-top:auto}
  .case__metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .case__mv{font-weight:500;font-size:24px;line-height:28px;letter-spacing:-.03em;color:var(--text-primary)}
  .case__mc{font-size:14px;line-height:20px;color:#646469;margin-top:8px}
  /* кнопка в карточке кейса — БЕЛАЯ на светлой карточке (в макете #fff), не серая */
  .case__btn{background:#fff;color:var(--text-primary)}
  .case__btn:hover{background:#fff;box-shadow:0 8px 22px rgba(15,24,37,.10)}
  .cases__dots{display:flex;justify-content:center;gap:4px;margin-top:24px}
  .cases__dots .cdot{width:6px;height:6px;border-radius:100px;background:rgba(116,118,127,.49);
    transition:width .22s,background .22s;padding:0;border:0;cursor:pointer}
  .cases__dots .cdot:hover{background:rgba(35,36,62,.7)}
  .cases__dots .cdot.is-active{width:19px;background:#23243e}
  .cases__dots .cdot:focus-visible{outline:2px solid var(--stroke-accent);outline-offset:3px}
  .cases__all{display:flex;justify-content:center;margin-top:36px}
  @media (max-width:1000px){
    .cases__inner{padding-block:64px}
    .cases__head{grid-template-columns:1fr;gap:16px}
    .cases__track{grid-auto-columns:382px;margin-top:36px}
  }
  @media (max-width:712px){
    .cases__arrows{display:none}
    .cases__track{grid-auto-columns:320px}
    .case{min-height:430px}
  }
  @media (max-width:480px){ .cases__track{grid-auto-columns:min(300px,84vw)} }

  /* ================= 30 ЛЕТ / НАГРАДЫ ================= */
  .aw{position:relative;overflow:hidden;background:var(--bg-tertiary);color:#fff}
  /* анимированный «шёлк» (WebGL, движок из нашего конструктора) */
  /* без масок-фейдов: лента упирается в края блока, как просил Андрей */
  .aw__silk{position:absolute;left:0;top:0;width:100%;height:100%;display:block;
    pointer-events:none;z-index:0;opacity:1}
  .aw__inner{position:relative;z-index:2;padding-block:96px}
  .aw__head{display:grid;grid-template-columns:497fr 598fr;gap:clamp(24px,4vw,109px);align-items:start}
  .aw__lead{padding-top:8px;font-size:16px;line-height:24px;color:#fff}
  .aw__metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:64px}
  .metric{padding:4px 28px;border-right:1px solid var(--stroke-on);display:flex;flex-direction:column;gap:8px}
  .metric:first-child{padding-left:0}
  .metric:last-child{border-right:0}
  .metric__val{font-weight:500;font-size:40px;line-height:44px;letter-spacing:-.03em}
  .metric__cap{font-size:16px;line-height:24px;color:var(--text-secondary-on)}
  .aw__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:48px}
  /* первый ряд сдвинут на колонку вправо — место отдано ленте */
  .aw__cards > .awcard:first-child{grid-column-start:2}
  .awcard{background:var(--award-default);border-radius:var(--radius-card);padding:var(--pad-card);min-height:367px;
    display:flex;flex-direction:column;gap:16px;transition:background .2s}
  .awcard:hover{background:var(--award-hover)}
  .awcard__logo{height:32px;display:grid;place-items:center;margin-block:36px 20px}
  .awcard__logo img{height:32px;width:auto;object-fit:contain}
  .awcard__title{font-weight:500;font-size:16px;line-height:24px;color:#fff;margin-top:auto}
  .awcard__src{font-size:14px;line-height:20px;color:var(--text-secondary-on);margin-top:16px}
  .awcard--cta{align-items:center;justify-content:center;position:relative;overflow:hidden;gap:0}
  .awcard--cta .awcard__label{font-weight:500;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
    color:#fff;position:relative;z-index:2;margin-bottom:28px}
  .awcard--cta .awcard__btn{width:84px;height:84px;border-radius:50%;background:var(--bg-accent);
    display:grid;place-items:center;position:relative;z-index:2;transition:transform .25s,background .2s}
  .awcard--cta:hover .awcard__btn{transform:scale(1.06);background:var(--btn-primary-hover)}
  .awcard--cta .awcard__btn svg{width:28px;height:28px;color:#fff}
  /* Круги на воде: в покое стоят как в макете, при наведении расходятся волнами.
     Каждое кольцо — свой круг с задержкой, поэтому волна идёт непрерывно. */
  .awcard--cta .ring{position:absolute;left:50%;top:58%;width:174px;height:174px;border-radius:50%;
    border:1px solid rgba(255,255,255,.16);pointer-events:none;
    transform:translate(-50%,-50%) scale(var(--s,1));opacity:var(--o,1)}
  .awcard--cta .ring--r1{--s:1}
  .awcard--cta .ring--r2{--s:1.94}
  .awcard--cta .ring--r3{--s:2.9;--o:.5}
  .awcard--cta .ring--r4{--s:3.9;--o:0}
  .awcard--cta:hover .ring,.awcard--cta:focus-visible .ring{animation:ripple 2.8s linear infinite}
  .awcard--cta:hover .ring--r2{animation-delay:-.7s}
  .awcard--cta:hover .ring--r3{animation-delay:-1.4s}
  .awcard--cta:hover .ring--r4{animation-delay:-2.1s}
  @keyframes ripple{
    0%  {transform:translate(-50%,-50%) scale(.42);opacity:0}
    12% {opacity:.85}
    70% {opacity:.32}
    100%{transform:translate(-50%,-50%) scale(4.3);opacity:0}}
  @media (prefers-reduced-motion:reduce){ .awcard--cta:hover .ring{animation:none} }
  @media (max-width:1000px){
    .aw__inner{padding-block:64px}
    .aw__head{grid-template-columns:1fr;gap:16px}
    .aw__metrics{grid-template-columns:repeat(2,1fr);row-gap:28px;margin-top:48px}
    .metric:nth-child(2){border-right:0}
    .metric:nth-child(3){padding-left:0}
    /* карточки — горизонтальная карусель */
    .aw__cards{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
      margin-inline:calc(var(--margin) * -1);padding-inline:var(--margin);margin-top:40px}
    .aw__cards::-webkit-scrollbar{display:none}
    .awcard{flex:0 0 282px;scroll-snap-align:start;min-height:340px}
    .aw__cards > .awcard:first-child{grid-column-start:auto}
    .aw__silk{width:100%;opacity:.65}
  }
  @media (max-width:600px){
    .aw__metrics{grid-template-columns:1fr;row-gap:24px}
    .metric{border-right:0;padding-inline:0}
    .metric__val{font-size:30px;line-height:36px}
    .awcard{flex-basis:262px}
  }

  /* ================= НЕПРЕРЫВНЫЙ ЦИКЛ ================= */
  /* Фон 1:1 из макета: линейный градиент 144.8° со стопами из брифа.
     Проценты пересчитаны из userSpaceOnUse-координат Figma (720,166)→(1453,1205) на 1440×1113. */
  .cycle{position:relative;overflow:hidden;color:#fff;
    background:linear-gradient(144.8deg,#160040 0%,#160040 31.6%,#280960 46.9%,
      #5E21C9 66.2%,#BA4CFF 86.4%,#C2A2FF 102.4%)}
  /* mesh теми же 5 цветами = «анимированный градиент» из задания; лежит поверх базы */
  /* Фон: базовый линейный градиент 1:1 из макета задаёт КОМПОЗИЦИЮ (что где темнее),
     а сверху перетекающее поле в режиме `color` подменяет только оттенок.
     Светлота остаётся макетной, поэтому фон и «дышит цветом», и не уезжает от Figma. */
  #cycleMesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;
    opacity:.85;mix-blend-mode:color}
  /* слой Light из макета — тёплое свечение из левого нижнего угла (подобрано по пикселям макета) */
  .cycle__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(55% 75% at -5% 108%,
      rgba(242,164,134,1) 0%,rgba(238,156,130,.95) 22%,rgba(214,126,116,.70) 38%,
      rgba(190,100,116,.46) 62%,rgba(170,80,120,.14) 80%,rgba(150,60,120,0) 100%)}
  .cycle__inner{position:relative;z-index:2;padding-block:96px}
  /* колонки как в макете: лид начинается на 606 из 1204 */
  .cycle__head{display:grid;grid-template-columns:50.33% 1fr;align-items:start;margin-bottom:48px}
  .cycle__lead{padding-top:8px}
  .cycle__lead p{color:rgba(255,255,255,.76);font-size:16px;line-height:24px}
  .cycle__lead p + p{margin-top:24px}
  /* container-type даёт cqw — вся начинка круга масштабируется пропорционально макету */
  .cycle__stage{position:relative;width:min(722px,100%);margin-inline:auto;aspect-ratio:722/721;
    container-type:inline-size}
  .cycle__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
  /* плашка = градиент цвет→прозрачность, fill-opacity .14 (как в Figma); стрелка — в полный цвет */
  .cyc-petal{fill-opacity:.14}
  /* «точечки крутятся» — по заданию единственная вращающаяся часть круга */
  .cyc-dots{transform-box:view-box;transform-origin:361px 360.5px;
    animation:cycDots 150s linear infinite}
  @keyframes cycDots{to{transform:rotate(360deg)}}
  .cycle__nodes{position:absolute;inset:0;pointer-events:none;z-index:2}
  /* якорь узла = центр иконки (как в макете), подпись висит под ней */
  .cnode{position:absolute;transform:translate(-50%,-4.99cqw);
    display:flex;flex-direction:column;align-items:center;gap:1.11cqw;text-align:center}
  .cnode__ico{width:9.97cqw;height:9.97cqw;border-radius:50%;display:grid;place-items:center;
    background:rgba(255,255,255,.06);flex:none}
  .cnode__ico svg{width:5.54cqw;height:5.54cqw;display:block}
  .cnode__label{font-size:clamp(9px,2.22cqw,16px);line-height:1.5;color:#fff;white-space:nowrap}
  .cnode--wrap .cnode__label{white-space:normal;width:19.53cqw}
  /* ядро — сфера из макета (растр из Figma, нода «центр» 148×148 на 40.5%/39.9%) */
  .cycle__core{position:absolute;left:40.52%;top:39.94%;width:20.5%;aspect-ratio:1/1;z-index:1}
  .cycle__core img{width:100%;height:100%;object-fit:cover;display:block;
    animation:corePulse 7s ease-in-out infinite}
  @keyframes corePulse{0%,100%{transform:scale(.985)}50%{transform:scale(1.025)}}
  @media (prefers-reduced-motion:reduce){
    .cyc-dots,.cycle__core img{animation:none}
  }
  @media (max-width:1000px){
    .cycle__head{grid-template-columns:1fr;gap:20px;margin-bottom:40px}
    .cycle__inner{padding-block:64px 72px}
  }
  @media (max-width:600px){
    .cycle__inner{padding-block:48px 56px}
  }

  /* ================= ЦЕННОСТЬ (3 карточки) ================= */
  .value__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;margin-bottom:40px}
  .value__lead{color:var(--text-secondary);max-width:600px}
  .value__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  /* фон-градиент на ВСЮ карточку (CSS), иллюстрация — прозрачный PNG поверх */
  .vcard{position:relative;border-radius:var(--radius-card);overflow:hidden;color:#fff;min-height:516px;
    display:flex;flex-direction:column;isolation:isolate;
    background:var(--vc-bg)}
  .vcard__illu{display:block;width:100%;height:auto;flex:0 0 auto;position:relative;z-index:1}
  .vcard__body{padding:var(--pad-card);margin-top:auto;position:relative;z-index:2}
  .vcard__title{margin-bottom:12px}
  .vcard__text{color:rgba(255,255,255,.82);font-size:16px;line-height:24px}
  @media (max-width:1000px){
    .cap__body,.value__head{grid-template-columns:1fr}
    .cap__panel.is-active{grid-template-columns:1fr}
    .value__cards{grid-template-columns:1fr;gap:12px}
    .vcard{min-height:440px}
    .cap__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--margin) * -1);
      padding-inline:var(--margin)}
    .cap__tabs::-webkit-scrollbar{display:none}
  }

  /* ---- адаптив hero ---- */
  @media (max-width:1000px){
    .nav{display:none}
    .site-header__divider{display:none}
    .burger{display:flex}
  }
  /* ≤1100 — порог не «на глаз»: это ширина, ниже которой колонка рядом с кругом
     становится уже, чем «Роботизированные обзвоны» на минимальном кегле 13px.
     По правилу клиента дальше плашки уходят ПОД круг, а круг занимает всю ширину:
     чем меньше экран, тем он относительно крупнее. */
  @media (max-width:1100px){
    .hero__stage{display:grid;grid-template-columns:1fr;row-gap:28px;justify-items:center;
      min-height:0;--fw:min(calc(100% * 1.14),720px)}
    /* position:relative, а НЕ static: container-type сам по себе не делает элемент
       containing block'ом, и слои круга начинают позиционироваться от .hero__stage.
       Отрицательное поле = пустое кольцо юнита ((712−608)/2 = 7.3%): без него круг
       тащит за собой воздух со всех сторон и визуально «не дотягивается» до краёв. */
    .hero__stage .flower{position:relative;left:auto;top:auto;order:-1;transform:none;max-width:none;
      margin:calc(var(--fw) * -.073)}
    /* окно материализуется (на десктопе оно display:contents) */
    .pills-window{display:block;order:0;width:100%;position:relative}
    .pills-window__inner{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;
      will-change:transform}
    .pcol{width:100%;max-width:none;flex:none;padding-inline:0;gap:10px}
    .pill{font-size:15px;padding:0 8px 0 20px;height:48px}
  }
  /* ---- ≤712: круг во всю ширину карточки, pill'ы в «окне» с фейдом ----
     Режим A (по умолчанию): параллакс — колонки едут быстрее страницы, за один скролл
     видно все элементы; края растворяются в фейд.
     Режим B (альтернатива клиента): data-pills="scroll" — колонки скроллятся отдельно. */
  @media (max-width:712px){
    .hero{border-radius:24px}
    .hero__inner{padding-block:40px 56px}
    /* на телефоне круг распирает до краёв самой hero-карточки (+24 = поля .container--hero) */
    .hero__stage{row-gap:22px;--fw:min(calc((100% + 24px) * 1.14),720px)}
    .pills-window{height:290px;overflow:hidden;
      -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
              mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
    /* на телефоне вместо двух колонок — одна бесконечная лента */
    .pills-window__inner{display:none}
    .ploop{display:block;width:100%;max-width:420px;margin-inline:auto;will-change:transform}
    /* backdrop-filter внутри элемента с mask на iOS даёт серую плашку-подложку
       во всю зону маски. Стекло здесь всё равно почти не читается — снимаем. */
    .pill{-webkit-backdrop-filter:none;backdrop-filter:none}
    .pill{font-size:14px;padding:0 6px 0 16px;height:44px;gap:8px}
    .pill__arw{width:22px;height:22px}
    .pill__arw svg{width:10px;height:10px}
    /* режим B — отдельная прокрутка внутри окна */
    .hero__stage[data-pills="scroll"] .pills-window{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
    .hero__stage[data-pills="scroll"] .pills-window::-webkit-scrollbar{display:none}
    .hero__stage[data-pills="scroll"] .pills-window__inner{transform:none!important}
    /* лента двигается только по скроллу; при отключённой анимации она стоит,
       поэтому окно делаем прокручиваемым руками */
    @media (prefers-reduced-motion:reduce){
      .pills-window{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask:none;mask:none}
      .pills-window::-webkit-scrollbar{display:none}
    }
  }
  @media (max-width:640px){
    .pills-window{height:268px}
    .pill{font-size:15px;padding:0 8px 0 20px;height:48px}
  }
  @media (max-width:520px){
    .site-header__login{display:none}
    .site-header{height:64px}
    .site-header__right{gap:8px}
  }
  @media (max-width:380px){
    .pills-window{height:240px}
    .pill{font-size:14px;padding:0 6px 0 16px;height:44px}
  }