/* Стили главной: светлый стиль (ADR 0011, спека .scratch/rubrek-site-light/design.md).
   Белая страница, крупные экраны продукта, оранжевый #F94603 только акцентом: знак R,
   одна кнопка «подключиться» на экран и «USDT» как результат. Теней, стекла, бликов и градиентов нет. */

/* ── токены: синхронизировать с home.css/theme.css (один и тот же блок) ── */
:root{
  /* поверхности — холодные нейтральные */
  --bg:#FFFFFF;
  --surface:#F5F5F7;      /* панели, карточки на белом, полосы .bg-cream */
  --surface-2:#EDEDF0;    /* тональная кнопка, трек сегмент-контрола, hover карточек */
  --surface-3:#E2E2E6;    /* hover тональной кнопки */
  --line:#E5E5E9;         /* волосяная линия на белом */
  --line-2:#D1D1D6;       /* линия на сером, прошлые бары, трек прогресса */

  /* текст */
  --ink:#131317;          /* 18.53:1 на белом */
  --ink-2:#4F4F55;        /* лиды, абзацы — 8.13:1 */
  --ink-3:#6B6B71;        /* подписи, надзаголовки, th — 5.29:1 (4.86 на surface) */
  --ink-4:#A4A4A9;        /* только декор и disabled */

  /* акцент */
  --accent:#F94603;       /* заливки, графика, знак, текст ≥ 24 px или 19 px/700 */
  --accent-hover:#E03E03;
  --accent-press:#D63C05;
  --accent-ink:#C83600;   /* оранжевый мелкий текст, если без него никак — 5.27:1 */

  /* семантика */
  --ok:#047E39;           /* «зачислено», «отправлено» на светлом — 5.19:1 */
  --ok-night:#34C77B;     /* то же на тёмном (уведомление) — 8.47:1 */
  --err:#B13550;

  /* тёмные якоря: капсула, уведомление, футер, KPI .hl, тёмная кнопка */
  --night:#131317;
  --night-2:#26262B;      /* hover в капсуле, бургер, линии футера */
  --night-3:#2A2A30;      /* hover тёмной кнопки */
  --night-text:#C9C9CE;   /* 11.23:1 */
  --night-mute:#A4A4A9;   /* 7.47:1 */
  --night-faint:#8E8E93;  /* 5.68:1 */

  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* шкала 390 → 1440 */
  --fs-display:clamp(3rem,7.6vw,6.875rem);      /* 48 → 110 стейтменты */
  --fs-h1:clamp(2.125rem,4.1vw,3.75rem);        /* 34 → 59 герой главной */
  --fs-h1-inner:clamp(2.125rem,3.9vw,3.5rem);   /* 34 → 56 h1 внутренних */
  --fs-cta:clamp(2.25rem,4.4vw,4rem);           /* 36 → 63 финальный CTA */
  --fs-h2:clamp(2rem,3.6vw,3.25rem);            /* 32 → 52 секции главной */
  --fs-h2-inner:clamp(1.875rem,3vw,2.75rem);    /* 30 → 44 секции внутренних: ступень ниже h1 56 */
  --fs-h2-prose:clamp(1.5rem,2.1vw,1.875rem);   /* 24 → 30 h2 в статьях */
  --fs-h3:clamp(1.25rem,1.55vw,1.5rem);         /* 20 → 22 карточки */
  --fs-eyebrow:clamp(1.0625rem,1.4vw,1.25rem);  /* 17 → 20 надзаголовок */
  --fs-lead:clamp(1.0625rem,1.35vw,1.25rem);    /* 17 → 19.4 лид */

  /* радиусы — одно семейство */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-phone:46px; --r-pill:999px;

  /* сетка */
  --container:1120px;
  --gutter:clamp(20px,4vw,40px);
  --sec-y:clamp(88px,9vw,136px);

  /* движение */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms; --t-base:240ms; --t-stage:320ms; --t-reveal:560ms; --t-bars:720ms;

  /* единственная тень системы — только у выпадающего меню .drop */
  --overlay:0 16px 40px rgba(19,19,23,.10);

  /* иконки и глифы для mask/background (§3.2) */
  --glyph-usdt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round'%3E%3Cpath d='M5.5 5.2h13M12 5.2v14.3M8.3 12.9l7.4-3.1M8.3 16.9l7.4-3.1'/%3E%3C/svg%3E");
  --icon-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131317' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
  --icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");

  /* алиасы для инлайнов контента (core.mjs:40, 339, 423; blocks.mjs:148) — не удалять */
  --orange:var(--accent);
  --orange-d:var(--accent-ink);
  --muted:var(--ink-3);
  --sh-2:none;
}

/* ── база ── */
*{box-sizing:border-box;margin:0;padding:0}
/* clip, а не hidden: с hidden у body sticky-пин героя на мобильном не работает */
/* scroll-padding: якоря и фокус с клавиатуры (в том числе Shift+Tab) не уходят под фиксированную капсулу */
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:96px}
body{overflow-x:clip;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
::selection{background:var(--ink);color:#fff}
.wrap{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
/* текст для скринридеров и теста: виден только в DOM */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* отступ якорей #how, #biz, #faq под капсулой задаёт scroll-padding у html (с scroll-margin он бы удвоился) */

/* появление при прокрутке */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
.rv.in{opacity:1;transform:none}
/* фокус с клавиатуры внутри ещё не проявленного блока: показать сразу, кольцо не ждёт анимации */
.rv:focus-within{opacity:1;transform:none;transition:none}

/* ── кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--r-pill);
  font-size:16px;font-weight:600;letter-spacing:-.005em;line-height:1;white-space:nowrap;text-decoration:none;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn-lg{height:52px;padding:0 28px;font-size:18px}
/* оранжевая: только ссылка в бота, подпись 19/700 (белый на #F94603 — 3.56:1, крупный текст) */
.btn-accent{background:var(--accent);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.01em}
.btn-accent:hover{background:var(--accent-hover)}
.btn-accent:active{background:var(--accent-press)}
.btn-tonal{background:var(--surface-2);color:var(--ink)}
.btn-tonal:hover{background:var(--surface-3)}
.steps-sec .btn-tonal{background:#fff}
.steps-sec .btn-tonal:hover{background:var(--surface-2)}

/* надзаголовок и заголовок секции */
.kick{display:block;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink-3)}
h2.big{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.03em;line-height:1.06}
h2.big em{font-style:normal;color:var(--ink-3);white-space:nowrap}
.allpay-stage>.kick,.steps-head .kick,.biz-head .kick,.faq-head .kick{margin-bottom:14px}

/* ── капсула навигации: сплошная --night, без стекла, тени и бликов ── */
.gnav{position:fixed;z-index:120;top:16px;left:50%;transform:translateX(-50%);
  width:min(var(--container),100% - 2*var(--gutter));height:60px;display:flex;align-items:center;
  padding:0 10px 0 22px;background:var(--night);border-radius:var(--r-pill);transition:background-color var(--t-base) var(--ease)}
/* над тёмным футером капсула на тон светлее, иначе её форма растворяется (тон, не стекло и не тень) */
.gnav.over-dark{background:var(--night-2)}
.gnav.over-dark .gnav-links a:hover,.gnav.over-dark .gnav-burger{background:var(--night-3)}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;font-size:17px;font-weight:700;letter-spacing:.01em;color:#fff}
.brand img{width:29px;height:26px}
.gnav-links{display:flex;gap:2px;margin-left:auto}
.gnav-links a{padding:9px 14px;border-radius:var(--r-pill);font-size:15px;font-weight:500;line-height:1.4;white-space:nowrap;color:var(--night-text);
  transition:color var(--t-fast),background-color var(--t-fast)}
.gnav-links a:hover,.gnav-links a.cur{color:#fff;background:var(--night-2)}
.gnav-cta{flex:none;margin-left:14px;height:40px;padding:0 20px;display:inline-flex;align-items:center;border-radius:var(--r-pill);
  background:#fff;color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap;transition:background-color var(--t-fast)}
.gnav-cta:hover{background:var(--surface-2)}
.gnav-burger{display:none;position:relative;width:44px;height:44px;flex:none;border-radius:50%;background:var(--night-2);margin-left:8px}
.gnav-burger span,.gnav-burger::before{content:'';position:absolute;left:14px;right:14px;height:2px;background:#fff;border-radius:2px;
  transition:top var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.gnav-burger span{top:18px}
.gnav-burger::before{top:24px}
.gnav.open .gnav-burger span{top:21px;transform:rotate(45deg)}
.gnav.open .gnav-burger::before{top:21px;transform:rotate(-45deg)}
.gnav :focus-visible,.gnav-sheet :focus-visible{outline-color:#fff}
/* шторка: плоская панель под капсулой */
.gnav-sheet{position:fixed;z-index:119;top:84px;left:50%;width:min(var(--container),100% - 2*var(--gutter));padding:8px;
  border-radius:28px;background:var(--night);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(-8px);
  transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),visibility 0s linear var(--t-base)}
.gnav-sheet.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition-delay:0s}
.gnav-sheet a{position:relative;display:flex;align-items:center;height:52px;padding:0 16px;font-size:18px;font-weight:500;color:#fff;border-radius:var(--r-md)}
/* разделитель с отступами, чтобы не загибался по скруглению ссылки */
.gnav-sheet a+a:not(.go)::before{content:'';position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--night-2)}
.gnav-sheet a:not(.go):hover{background:var(--night-2)}
.gnav-sheet .go{margin-top:8px;justify-content:center;border-radius:var(--r-pill);background:var(--accent);font-size:19px;font-weight:700;transition:background-color var(--t-fast)}
.gnav-sheet .go:hover{background:var(--accent-hover)}

/* ── герой со скроллмоушном: пин 320vh, стадии телефона по прогрессу ── */
.hero-scroll{position:relative;height:320vh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:76px;overflow:hidden}
.hero-grid{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1fr) 460px;gap:40px;align-items:center}
.hero-copy h1{font-size:var(--fs-h1);font-weight:600;line-height:1.02;letter-spacing:-.035em}
.hero-copy h1 .ln{display:block;white-space:nowrap}
.hero-copy .alt{margin-top:24px;max-width:33ch;font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2);text-wrap:balance}
.hero-ctas{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:40px;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-3)}
/* шеврон прокручивает на экран вниз (home.js) — не мёртвый контрол */
.hero-note i{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:var(--surface);cursor:pointer}
.hero-note i::after{content:'';position:absolute;left:12px;top:10px;width:7px;height:7px;border-right:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);transform:rotate(45deg)}

/* сцена: серая панель с голым экраном телефона */
.phone-zone{position:relative;height:min(692px,calc(100svh - 108px));border-radius:var(--r-xl);background:var(--surface)}
/* масштаб: минимум из шкалы по ширине (--ps-w) и по высоте окна (--ps-h); центр — абсолютный,
   иначе переполненный блок встаёт к верхнему краю на коротких окнах */
.phone{--ps-w:1;--ps-h:1;--ps:min(var(--ps-w),var(--ps-h));position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:292px;height:600px;flex:none;border-radius:var(--r-phone);background:#fff;overflow:hidden;transform:scale(var(--ps))}
.phone::before{content:'';position:absolute;z-index:3;top:12px;left:50%;width:92px;height:27px;margin-left:-46px;border-radius:var(--r-pill);background:var(--ink)}
.phone::after{content:'';position:absolute;z-index:3;bottom:9px;left:50%;width:108px;height:4px;margin-left:-54px;border-radius:4px;background:var(--ink)}
.screen{position:absolute;inset:0}
@media (max-height:789px){.phone{--ps-h:.86}.fl-green{bottom:40px}}
@media (max-height:699px){.phone{--ps-h:.74}.fl-green{bottom:20px}}
@media (max-height:599px){.phone{--ps-h:.66}}

/* стадии: выровнены сверху, нижняя треть экрана свободна под уведомление */
.stage{position:absolute;inset:0;padding:70px 22px 0;display:flex;flex-direction:column;align-items:center;text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity 200ms var(--ease),transform var(--t-stage) var(--ease-out);pointer-events:none}
.stage.on{opacity:1;transform:none;transition-duration:var(--t-stage)}
.stage .spin,.stage .okball{margin-top:44px}
.st-cap{font-size:13px;font-weight:500;line-height:1.45;color:var(--ink-3)}
.sbp-chip{margin-top:18px;height:36px;padding:0 14px 0 10px;display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);background:var(--surface);font-size:14px;font-weight:600}
.sbp-chip img{width:20px;height:20px}
.qr{margin-top:22px;width:196px;padding:6px;border-radius:22px;border:1px solid var(--line);background:#fff}
.qr img{display:block;width:100%}
.amount{margin-top:22px;font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1}
.spin{width:64px;height:64px;border-radius:50%;border:4px solid var(--surface-2);border-top-color:var(--accent);animation:rot .9s linear infinite;animation-play-state:paused}
.stage.on .spin{animation-play-state:running}
@keyframes rot{to{transform:rotate(360deg)}}
.conv{margin-top:24px;font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ink-3)}
.conv b{font-weight:600;color:var(--ink)}
.conv b:last-child{color:var(--accent)}
.conv+.st-cap{margin-top:16px;max-width:220px}
.okball{width:72px;height:72px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.okball svg{width:32px;height:32px}
.stage.on .okball{animation:pop var(--t-base) var(--ease-out) both}
@keyframes pop{from{transform:scale(.92)}to{transform:none}}
.usdt-card{margin-top:24px;align-self:stretch;padding:18px;border-radius:18px;background:var(--surface)}
.usdt-card b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.usdt-card span{display:block;margin-top:4px;font-size:14px;color:var(--ink-3)}
.stage-dots{position:absolute;bottom:34px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.stage-dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width var(--t-stage) var(--ease-out),background-color var(--t-stage)}
.stage-dots i.on{width:20px;background:var(--accent)}

/* уведомление мерчу: тёмный пуш, виден на всех стадиях (экран мерча рядом с экраном клиента) */
.fl{position:absolute;z-index:4}
.fl-bal,.fl-ride,.fl-sbp{display:none}
.fl-green{left:-72px;bottom:72px;width:212px;padding:16px 18px 18px;border-radius:22px;background:var(--night);color:#fff}
.fl-green .lbl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;line-height:1.2;color:rgba(255,255,255,.75)}
.fl-green .lbl::before{content:'';width:22px;height:22px;flex:none;background:url(/assets/brand/r-icon.svg) center/contain no-repeat}
.fl-green b{display:block;margin-top:12px;font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1;color:#fff}
.fl-green>span:last-child{margin-top:10px;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ok-night)}
.fl-green>span:last-child::before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.fl-bal span{display:block;font-size:13px;color:var(--ink-3)}
.fl-bal b{display:block;margin-top:4px;font-weight:600;letter-spacing:-.025em;line-height:1.15;white-space:nowrap}
.fl-bal b .u{display:inline;margin:0;font-size:.72em;color:var(--ink-3)}
/* «Вывести» — не ссылка: пилюля дала бы мёртвый тап */
.fl-bal em{display:none}

/* ── полоса доверия: монохромные логотипы в одну строку ── */
.trust-sec{width:min(var(--container),100% - 2*var(--gutter));margin:0 auto;padding:40px 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:40px;align-items:center}
.trust-label{font-size:14px;font-weight:500;line-height:1.4;color:var(--ink-3)}
.trust-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
.trust-item,.rail{position:relative}
.trust-item{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink-2);white-space:nowrap}
/* grayscale с выравниванием тона: светлые знаки (Сбер, Т-Банк, Wise, СБП) темнеют до уровня Мир/USDT/Revolut */
.trust-item img{height:24px;width:auto;filter:grayscale(1) brightness(.6) contrast(1.5)}
.trust-item img.wm{height:15px}
.mk{height:22px;min-width:22px;padding:0 6px;flex:none;border-radius:6px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:.02em;line-height:1}
/* ₮ нет в Geist: глиф маской, текст в DOM с font-size:0 */
.mk-usdt{width:24px;height:24px;padding:0;border-radius:50%;font-size:0}
.mk-usdt::before{content:'';width:14px;height:14px;background:#fff;-webkit-mask:var(--glyph-usdt) center/contain no-repeat;mask:var(--glyph-usdt) center/contain no-repeat}

/* ── «Все платежи — в одном месте»: кабинет ── */
.allpay{padding:var(--sec-y) 0}
.allpay-stage{text-align:center}
.allpay-stage>p{margin:20px auto 0;max-width:620px;font-size:18px;line-height:1.5;color:var(--ink-2)}
.board{margin-top:64px;padding:12px;border-radius:var(--r-xl);background:var(--surface);text-align:left}
.board-head{display:flex;align-items:center;gap:12px;padding:4px 8px 12px 4px}
.board-dots{width:32px;height:32px;flex:none;background:url(/assets/brand/r-icon.svg) center/contain no-repeat}
.board-dots i{display:none}
.board-tabs{display:flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--surface-2)}
.board-tabs span{height:34px;padding:0 16px;display:inline-flex;align-items:center;border-radius:var(--r-pill);font-size:14px;font-weight:500;color:var(--ink-3);cursor:default;user-select:none}
.board-tabs span.on{background:#fff;color:var(--ink);font-weight:600}
.board-live{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}
.board-live i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ok)}
.board-grid{display:grid;grid-template-columns:392px minmax(0,1fr);gap:12px}
.board-card{padding:28px;border-radius:var(--r-lg);background:#fff}
.bal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bal-top .lbl{font-size:15px;color:var(--ink-3)}
.bal-sum{margin-top:8px;font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1.05;white-space:nowrap}
.bal-sum .u{font-size:.62em;letter-spacing:-.01em;color:var(--ink-3)}
.bal-net{flex:none;white-space:nowrap;height:28px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-2)}
.bal-btn{margin-top:24px;height:44px;padding:0 20px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;transition:background-color var(--t-fast)}
.bal-btn:hover{background:var(--night-3)}
.board-card :focus-visible{outline-color:var(--ink)}
/* бары: прошлые дни серые, сегодня — акцент; пунктир на 50 % */
.bars{position:relative;margin-top:44px;height:132px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid var(--line)}
.bars::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line-2)}
.bars i{position:relative;flex:1;height:12%;border-radius:8px 8px 3px 3px;background:var(--line-2);transition:height var(--t-bars) var(--ease-out)}
.bars i:last-child{background:var(--accent)}
.board.rv.in .bars i{height:var(--h)}
.bars i:nth-child(2){transition-delay:40ms}.bars i:nth-child(3){transition-delay:80ms}.bars i:nth-child(4){transition-delay:120ms}
.bars i:nth-child(5){transition-delay:160ms}.bars i:nth-child(6){transition-delay:200ms}.bars i:nth-child(7){transition-delay:240ms}
.bars-cap{margin-top:12px;font-size:13px;color:var(--ink-3)}
/* лента операций */
.op-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:6px}
.op-head b{font-size:17px;font-weight:600;letter-spacing:-.01em}
/* «Выгрузить CSV» — подпись с иконкой, а не чип: пилюля в макете давала бы мёртвый тап */
.op-head span{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink-3)}
.op-head span::before{content:'';width:16px;height:16px;background:var(--ink-3);-webkit-mask:var(--icon-download) center/contain no-repeat;mask:var(--icon-download) center/contain no-repeat}
.op{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 0}
.op+.op::before{content:'';position:absolute;top:0;left:54px;right:0;height:1px;background:var(--surface-2)}
.op .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-size:13px;font-weight:600;color:var(--ink)}
.op .av.out{background:var(--ink);color:#fff;font-size:16px}
.who b,.amt b{display:block;font-size:15px;font-weight:600;line-height:1.35}
.who span{display:block;margin-top:2px;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amt{text-align:right}
.amt b{font-variant-numeric:tabular-nums;white-space:nowrap}
.amt span{margin-top:2px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ok)}
.amt span::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.amt span.wait{color:var(--ink-3)}
/* фичи */
.feat-row{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;text-align:left}
.feat .fi{position:relative;width:48px;height:48px;border-radius:14px;background:var(--surface);display:grid;place-items:center}
.feat .fi svg{width:24px;height:24px;color:var(--ink)}
.feat h4{margin-top:20px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.feat p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--ink-2)}
/* кнопки под секцией: ось как у шапки секции */
.sec-cta{margin-top:56px;display:flex;flex-wrap:wrap;gap:12px}
.allpay-stage .sec-cta{justify-content:center}

/* ── «Четыре шага до USDT»: полоса --surface, белые карточки, сегменты прогресса ── */
.steps-sec{padding:var(--sec-y) 0;background:var(--surface)}
.steps{--seg:calc((100% - 48px)/4);position:relative;margin-top:88px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.steps::before,.steps .line{content:'';position:absolute;top:-28px;left:0;right:0;height:4px;border-radius:2px;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 var(--seg),transparent 0 calc(var(--seg) + 16px));
          mask:repeating-linear-gradient(90deg,#000 0 var(--seg),transparent 0 calc(var(--seg) + 16px))}
.steps::before{background:var(--line-2)}
/* заливка открывает ровно целые сегменты: --steps-p = count/4 из home.js */
.steps .line{background:var(--accent);clip-path:inset(0 calc((1 - var(--steps-p,0))*100%) 0 0);transition:clip-path 400ms var(--ease-out)}
.step{position:relative;padding:12px 12px 30px;border-radius:var(--r-lg);background:#fff}
.step .num{position:absolute;z-index:1;top:24px;left:24px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:#fff;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-3);transition:background-color var(--t-base),color var(--t-base)}
.step.on .num{background:var(--ink);color:#fff}
.step .ico{position:relative;height:172px;border-radius:18px;background:var(--surface);display:grid;place-items:center}
.step h3{margin:24px 12px 0;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.step p{margin:10px 12px 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
/* мини-экраны шагов — фрагменты интерфейса (декор, aria-hidden) */
.mini{display:flex;align-items:center;background:#fff;border-radius:16px}
.mini-qr{position:relative;width:96px;height:96px;padding:6px;display:block}
.mini-qr img{width:100%}
.step .ico>img.sbp-badge{position:absolute;left:calc(50% + 24px);top:calc(50% + 24px);width:40px;height:40px;padding:8px;border-radius:50%;background:#fff;outline:4px solid var(--surface)}
.mini-pay,.mini-conv,.mini-out{width:184px;min-height:60px;padding:12px 14px;gap:12px}
.mini .ring{width:28px;height:28px;flex:none;border-radius:50%;border:3px solid var(--surface-2);border-top-color:var(--accent);transform:rotate(35deg)}
.mini b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25;white-space:nowrap}
.mini em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:12px;font-weight:500;line-height:1.3;color:var(--ink-3)}
.mini em.ok{color:var(--ok)}
.mini em.ok::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.mini-conv{justify-content:center;gap:8px}
.coin{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:600;font-style:normal}
.coin.rub{background:var(--ink)}
.coin.usdt{background:var(--accent)}
.coin.usdt::before{content:'';width:60%;height:60%;background:#fff;-webkit-mask:var(--glyph-usdt) center/contain no-repeat;mask:var(--glyph-usdt) center/contain no-repeat}
.mini-conv .arr{width:22px;height:12px;flex:none;background:var(--ink-4);-webkit-mask:var(--icon-arrow) center/contain no-repeat;mask:var(--icon-arrow) center/contain no-repeat}
.mini-out .up{width:28px;height:28px;flex:none;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600;font-style:normal}

/* ── стейтменты «Принимай. / Зачисляй USDT.» + «труба» ₽ → ₮ ── */
.states{position:relative;padding:var(--sec-y) 0}
.st-tube{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.st-tube path{fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.state{position:relative;z-index:1;width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.st-wrap{display:grid;width:max-content;max-width:100%;column-gap:clamp(20px,2.2vw,28px);align-items:center}
.st-coin{position:relative;width:clamp(76px,7.2vw,104px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#fff}
.st-coin span{font-size:calc(clamp(76px,7.2vw,104px)*.46);font-weight:600;line-height:1}
.coin-rub{background:var(--ink)}
.coin-usdt{background:var(--accent)}
.coin-usdt span{font-size:0;width:46%;height:46%;background:#fff;-webkit-mask:var(--glyph-usdt) center/contain no-repeat;mask:var(--glyph-usdt) center/contain no-repeat}
.state h2{font-size:var(--fs-display);font-weight:600;letter-spacing:-.05em;line-height:.92;transform-origin:left center;white-space:nowrap}
.state h2 .acc{color:var(--accent)}
.st-chip{height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);background:var(--surface);font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.st-chip img{width:22px;height:22px}
.st-chip.green{color:var(--ok)}
.st-chip.green::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.st-chip.dark{background:var(--ink);color:#fff;gap:5px}
.st-chip.dark b{color:var(--accent);font-weight:600}
/* сетка «монета · слово · чипы»: чипы не наезжают на слово ни на одной ширине */
.state-rub .st-wrap{grid-template-columns:auto auto auto;grid-template-rows:auto auto;row-gap:10px}
.state-rub .st-coin{grid-column:1;grid-row:1/3}
.state-rub h2{grid-column:2;grid-row:1/3}
.state-rub .stc-r1{grid-column:3;grid-row:1;align-self:end;justify-self:start;margin-left:8px}
.state-rub .stc-r2{grid-column:3;grid-row:2;align-self:start;justify-self:start;margin-left:8px}
.state .sub{margin-top:24px;margin-left:calc(clamp(76px,7.2vw,104px) + clamp(20px,2.2vw,28px));max-width:34ch;font-size:20px;line-height:1.45;color:var(--ink-2)}
.state-usdt{margin-top:clamp(96px,10vw,152px)}
.state-usdt .st-wrap{margin-left:clamp(96px,10vw,144px);grid-template-columns:auto 1fr auto auto;grid-template-rows:auto auto;row-gap:18px}
.state-usdt .sub{margin-left:calc(clamp(96px,10vw,144px) + clamp(76px,7.2vw,104px) + clamp(20px,2.2vw,28px))}
.state-usdt .stc-u1{grid-column:3;grid-row:1;margin-right:8px}
.state-usdt .stc-u2{grid-column:4;grid-row:1}
.state-usdt .st-coin{grid-column:1;grid-row:2}
.state-usdt h2{grid-column:2/5;grid-row:2}

/* ── бегущая строка рельс: края обрезает экран, без масок ── */
#railsband{padding:8px 0 var(--sec-y)}
.rails{position:relative;overflow:hidden}
.rails-track{display:flex;width:max-content;animation:marq 60s linear infinite}
/* пауза: наведение только там, где оно есть (на тач-экране :hover залипает после тапа), на тач — тап (home.js, .paused) */
@media (hover:hover){.rails:hover .rails-track{animation-play-state:paused}}
.rails.paused .rails-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.rails-grp{display:flex;align-items:center;gap:56px;padding-right:56px}
.rail{display:inline-flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.rail .lg{min-width:32px;height:32px;display:grid;place-items:center}
.rail .lg img{height:26px;width:auto;max-width:32px;filter:grayscale(1) brightness(.6) contrast(1.5)}
.rail .mk{height:24px;font-size:10px}
.rail .mk-usdt{width:30px;height:30px;font-size:0}
.rail .mk-usdt::before{width:17px;height:17px}
.rail .lg.wm img{height:17px;max-width:none}

/* ── ниши ── */
#biz{padding:0 0 var(--sec-y)}
.biz-grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.biz{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);color:inherit;text-decoration:none;transition:background-color var(--t-base) var(--ease)}
a.biz:hover{background:var(--surface-2)}
.biz-grid>.biz:first-child{grid-column:1/-1}
.biz .ph{position:relative;aspect-ratio:16/10;overflow:hidden}
.biz-grid>.biz:first-child .ph{aspect-ratio:21/8}
.biz .ph>img,.biz .ph>video{width:100%;height:100%;object-fit:cover}
.biz .badge{position:absolute;left:16px;bottom:16px;height:34px;padding:0 14px 0 10px;display:flex;align-items:center;gap:8px;border-radius:var(--r-pill);background:#fff;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.biz .badge img{width:18px;height:18px}
.biz .bd{position:relative;padding:28px 32px 32px}
/* стрелка-ссылка: круг справа сверху, на hover уходит на 3 px вправо */
.biz .bd::after{content:'';position:absolute;top:26px;right:28px;width:40px;height:40px;border-radius:50%;background:#fff var(--icon-arrow) center/18px no-repeat;transition:background-position var(--t-base) var(--ease-out)}
a.biz:hover .bd::after{background-position:calc(50% + 3px) 50%}
.biz h3{display:flex;align-items:flex-start;gap:12px;padding-right:56px;font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.biz h3 .ni{width:26px;height:26px;flex:none;margin-top:2px;color:var(--ink)}
.biz p{margin-top:12px;max-width:46ch;font-size:16px;line-height:1.55;color:var(--ink-2)}
.chips{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.chip{height:32px;padding:0 14px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:#fff;font-size:14px;font-weight:500;color:var(--ink-2)}

/* ── FAQ: шапка слева, список справа (4/8) ── */
#faq{padding:0 0 var(--sec-y)}
#faq .wrap.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;align-items:start}
/* «Не нашли ответ?» стоит под шапкой и не прыгает, когда раскрывают вопрос справа: с anchor-позиционированием
   привязан к низу шапки; без него — к строкам 3+ (сдвигается только от вопросов 1–2, а не 1–3) */
#faq .faq-head{grid-column:1;grid-row:1/3}
#faq .faq-cta{grid-column:1;grid-row:3/7;align-self:start;margin-top:32px;max-width:34ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
@supports (anchor-name:--a){
  @media (min-width:1000px){
    #faq .wrap.faq{position:relative}
    #faq .faq-head{anchor-name:--faq-head}
    #faq .faq-cta{position:absolute;position-anchor:--faq-head;top:calc(anchor(bottom) + 32px);left:anchor(left);width:anchor-size(width);margin-top:0}
  }
}
#faq details{grid-column:2;border-top:1px solid var(--line-2)}
#faq details:last-of-type{border-bottom:1px solid var(--line-2)}
#faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;
  font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
#faq summary::-webkit-details-marker{display:none}
/* раскрытие 240 мс там, где браузер умеет анимировать height:auto; остальные открывают сразу */
#faq details{interpolate-size:allow-keywords}
#faq details::details-content{block-size:0;overflow-y:clip;transition:block-size var(--t-base) var(--ease),content-visibility var(--t-base) allow-discrete}
#faq details[open]::details-content{block-size:auto}
#faq summary::after{content:'';flex:none;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat,var(--surface);
  transition:transform var(--t-base) var(--ease)}
#faq details[open] summary::after{transform:rotate(45deg)}
#faq .a{padding:0 72px 28px 0;font-size:16px;line-height:1.65;color:var(--ink-2)}
/* ссылки в тексте: ink с оранжевым подчёркиванием (графика), текст остаётся контрастным */
#faq .a a,#faq .faq-cta a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;transition:color var(--t-fast)}
#faq .a a:hover,#faq .faq-cta a:hover{color:var(--accent-ink)}

/* ── финальный CTA: серая панель, текст слева, QR-табличка справа ── */
.final{width:min(var(--container),100% - 2*var(--gutter));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:1fr auto auto auto 1fr;column-gap:80px;
  padding:88px;border-radius:var(--r-xl);background:var(--surface)}
/* любая парящая карточка закрывала бы QR */
.final>.fl{display:none}
.final h2{grid-column:1;grid-row:2;font-size:var(--fs-cta);font-weight:600;letter-spacing:-.04em;line-height:1}
.final>p{grid-column:1;grid-row:3;margin-top:24px;max-width:30ch;font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2)}
.final>.btn{grid-column:1;grid-row:4;justify-self:start;align-self:start;margin-top:40px}
.qr-card{grid-column:2;grid-row:1/6;align-self:center;overflow:hidden;border-radius:var(--r-lg);background:#fff}
.qr-card::before{content:'';display:block;height:64px;background:var(--accent) url(/assets/brand/r-mark-white.svg) center/38px auto no-repeat}
.qr-card .qr-img{display:block;width:calc(100% - 40px);margin:20px auto 0;border-radius:8px}
.qr-cap{padding:12px 0 18px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600}
.qr-cap img{width:20px;height:20px}

/* ── футер: --night, текст влево ── */
.ftr2{margin-top:var(--sec-y);padding:88px 0 40px;background:var(--night);color:var(--night-text);text-align:left}
.ftr2-in{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.ftr2-grid{display:grid;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));gap:40px}
.ftr2-brand .brand{color:#fff}
.ftr2-brand p{margin-top:20px;max-width:34ch;font-size:15px;line-height:1.6;color:var(--night-mute)}
.ftr2-brand p a{color:#fff;font-weight:500}
.ftr2 h5{margin-bottom:16px;font-size:14px;font-weight:600;color:#fff}
.ftr2 li+li{margin-top:10px}
.ftr2 li a{font-size:15px;color:var(--night-mute);transition:color var(--t-fast)}
.ftr2 li a:hover,.ftr2-brand p a:hover{color:#fff}
.ftr2-bot{margin-top:72px;padding-top:24px;border-top:1px solid var(--night-2);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--night-faint)}
.ftr2-disc{margin-top:20px;max-width:940px;font-size:12px;line-height:1.6;letter-spacing:.01em;color:var(--night-faint)}
.ftr2 :focus-visible{outline-color:#fff}

/* ═════════ адаптив ═════════ */
@media (max-width:1199px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 400px;gap:32px}
  .phone{--ps-w:.92}
  .fl-green{left:-40px;bottom:56px;width:208px}
  .gnav-links a{padding:9px 10px;font-size:14.5px}
  .gnav-cta{margin-left:10px;padding:0 18px}
  .trust-sec{grid-template-columns:1fr;row-gap:20px}
  .trust-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px}
}
/* уведомление на средних ширинах и коротких окнах: не задевает QR, сумму и карточку стадии 3 */
@media (min-width:981px) and (max-width:1199px) and (max-height:789px){
  .fl-green{bottom:24px}
}
@media (min-width:981px) and (max-width:1199px) and (max-height:699px){
  .fl-green{width:176px;bottom:12px;padding:12px 14px 14px;border-radius:18px}
  .fl-green .lbl{font-size:12px}
  .fl-green .lbl::before{width:18px;height:18px}
  .fl-green b{margin-top:8px;font-size:22px}
  .fl-green>span:last-child{margin-top:8px;font-size:12.5px}
}
@media (max-width:999px){
  #faq .wrap.faq{display:block}
  #faq .faq-head{margin-bottom:32px}
  #faq .faq-cta{margin-top:32px;max-width:none}
}
@media (min-width:981px){
  .gnav-sheet{display:none}
}
@media (max-width:980px){
  .gnav-links{display:none}
  .gnav-cta{margin-left:auto}
  .gnav-burger{display:block}
  /* компактная сцена: телефон слева в потоке, справа столбик «Входящий платёж» и «Баланс».
     Пин по высоте контента, а не окна: после снятия пина полоса доверия идёт сразу, без пустого хвоста */
  .hero-pin{align-items:flex-start;padding-top:104px;height:auto;padding-bottom:24px}
  /* minmax(0,…): колонка не раздувается до min-content ряда кнопок с nowrap (вылет за экран на 320–360) */
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .phone-zone{height:auto;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:10px;padding:14px;align-items:start;border-radius:var(--r-lg)}
  /* отрицательные поля сжимают место под масштаб */
  .phone{--ps-w:.72;--ps-h:1;position:relative;left:auto;top:auto;translate:none;grid-column:1;grid-row:1/4;transform-origin:0 0;margin:0 calc(292px*(var(--ps) - 1)) calc(600px*(var(--ps) - 1)) 0}
  .fl{position:static}
  .fl-green{grid-column:2;grid-row:1;width:auto;padding:14px 16px 16px;border-radius:18px}
  .fl-bal{display:block;grid-column:2;grid-row:2;padding:14px 16px 16px;border-radius:18px;background:#fff}
  .fl-bal b{font-size:24px}
  /* подписи внутри уменьшенного телефона: кегль с поправкой на масштаб (.72 → ≈12 px на экране) */
  .phone .st-cap,.phone .sbp-chip,.phone .usdt-card span{font-size:17px}
  .phone .st-cap{color:var(--ink-2)}
  .phone .conv+.st-cap{max-width:250px}
  .phone .usdt-card b{font-size:22px}
  /* «USDT» после масштаба мельче 24 px — оранжевый текст тогда только --accent-ink (5.27:1) */
  .phone .conv b:last-child{color:var(--accent-ink)}
  .board-grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .steps::before,.steps .line{display:none}
  .state-usdt .st-wrap{margin-left:clamp(72px,10vw,120px)}
  .state-usdt .sub{margin-left:calc(clamp(72px,10vw,120px) + clamp(76px,7.2vw,104px) + clamp(20px,2.2vw,28px))}
  /* QR с собственного экрана не отсканировать */
  .final{grid-template-columns:1fr;grid-template-rows:none;padding:56px 40px}
  .final h2,.final>p,.final>.btn{grid-row:auto}
  .qr-card{display:none}
  .ftr2-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  .ftr2-brand{grid-column:1/-1}
}
/* короткий ландшафт телефона: пин отключён, сцена в потоке */
@media (max-width:980px) and (max-height:560px){
  .hero-scroll{height:auto}
  .hero-pin{position:relative;height:auto;padding-bottom:40px}
  /* пина нет — нечего листать */
  .hero-note{display:none}
}
@media (max-width:640px){
  /* стейтменты в столбик: монета над словом, без «трубы» и чипов */
  .st-tube{display:none}
  .state .st-wrap{width:auto;display:block}
  .state .st-coin{width:64px;margin-bottom:20px}
  .state .st-coin span{font-size:30px}
  .coin-usdt span{width:46%;height:46%}
  .state h2{font-size:clamp(2.75rem,13vw,3.25rem);white-space:normal}
  .st-chip{display:none}
  .state .sub,.state-usdt .sub{margin-left:0;margin-top:20px;font-size:18px}
  .state-usdt{margin-top:72px}
  .state-usdt .st-wrap{margin-left:0}
  /* шаги — вертикальная рельса, все 4 видны подряд; --steps-q — заливка от узла к узлу;
     --rail-h (home.js) — от первого узла до последнего, без хвоста под узлом 4 */
  .steps{display:block;position:relative;margin-top:48px;padding-left:44px}
  .steps::before{display:block;content:'';position:absolute;left:15px;right:auto;top:30px;width:2px;height:var(--rail-h,calc(100% - 60px));-webkit-mask:none;mask:none;border-radius:1px}
  .steps .line{display:block;position:absolute;left:15px;right:auto;top:30px;width:2px;height:var(--rail-h,calc(100% - 60px));-webkit-mask:none;mask:none;border-radius:1px;clip-path:inset(0 0 calc((1 - var(--steps-q,0))*100%) 0)}
  .step{margin-top:12px;padding:10px 10px 22px}
  .steps .line+.step{margin-top:0}
  .step .num{top:16px;left:-44px;width:32px;height:32px}
  .step .ico{height:112px;border-radius:14px}
  .step h3{margin:18px 8px 0;font-size:20px}
  .step p{margin:8px 8px 0}
  .step .ico>img.sbp-badge{left:calc(50% + 18px);top:calc(50% + 14px);width:34px;height:34px;padding:7px}
  .mini-qr{width:76px;height:76px;padding:5px}
}
@media (max-width:560px){
  .gnav{top:12px;height:56px;padding:0 6px 0 16px}
  .gnav-cta{height:40px;padding:0 16px;font-size:14px}
  .gnav-sheet{top:76px}
  .brand{font-size:16px}
  .brand img{width:26px;height:23px}
  .ftr2-brand .brand img{width:29px;height:26px}
  .hero-scroll{height:260vh}
  .hero-pin{padding-top:88px}
  .hero-copy .alt{margin-top:12px;max-width:none}
  .hero-ctas{margin-top:20px;gap:8px;flex-wrap:nowrap}
  .hero-ctas .btn{height:48px;padding:0 20px}
  .hero-ctas .btn-tonal{font-size:17px}
  .hero-note{display:none}
  .hero-grid{gap:20px}
  .phone-zone{padding:12px;column-gap:10px;row-gap:8px;border-radius:22px}
  .phone{--ps-w:.58}
  /* подписи телефона при .58/.52: ≈12/11 px на экране вместо 6.8 */
  .phone .st-cap,.phone .sbp-chip,.phone .usdt-card span{font-size:21px;line-height:1.3}
  .phone .stage{padding-left:14px;padding-right:14px}
  .phone .conv+.st-cap{max-width:none}
  .phone .usdt-card{padding:16px 10px}
  .phone .usdt-card b{font-size:24px}
  .phone .usdt-card span{font-size:20px}
  .fl-green{padding:12px 10px 14px 12px;border-radius:16px}
  .fl-green .lbl{font-size:12px;gap:5px;white-space:nowrap}
  .fl-green .lbl::before{width:16px;height:16px}
  .fl-green b{margin-top:10px;font-size:21px}
  .fl-green>span:last-child{margin-top:8px;font-size:12px;gap:6px}
  .fl-bal{padding:12px 12px 14px;border-radius:16px}
  .fl-bal span{font-size:12px}
  .fl-bal b{font-size:17px}

  .trust-sec{padding:32px 0}
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

  /* все шапки слева, кнопки во всю ширину */
  .allpay-stage{text-align:left}
  .allpay-stage>p{margin-left:0;font-size:17px}
  .board{margin-top:40px;padding:8px;border-radius:24px}
  .board-head{flex-wrap:wrap;gap:10px;padding:4px 4px 10px}
  .board-live{margin-left:0;width:100%;order:3;font-size:13px}
  .board-dots{width:28px;height:28px}
  .board-tabs span{padding:0 12px;font-size:13px}
  .board-grid{gap:8px}
  .board-card{padding:22px 20px;border-radius:20px}
  .bal-sum{font-size:34px}
  .bars{margin-top:32px;height:104px;gap:8px}
  .op{gap:12px}
  .op-head b{font-size:16px}
  .who span{white-space:normal}
  .feat-row{margin-top:48px;grid-template-columns:1fr;gap:32px}
  .sec-cta{flex-direction:column;align-items:stretch;gap:12px}
  .sec-cta .btn{width:100%}

  .biz-grid{margin-top:40px;grid-template-columns:1fr;gap:12px}
  .biz-grid>.biz:first-child .ph{aspect-ratio:16/10}
  .biz .bd{padding:22px 20px 24px}
  .biz .bd::after{top:20px;right:20px;width:36px;height:36px}
  .biz h3{font-size:22px}
  .biz h3 .ni{margin-top:0}

  .rail{font-size:15px;gap:10px}
  .rails-grp{gap:40px;padding-right:40px}
  .rail .lg img{height:22px}

  #faq summary{font-size:18px;padding:20px 0}
  #faq .a{padding-right:0}

  .final{padding:40px 24px 32px;border-radius:24px}
  .final>.btn{justify-self:stretch}

  .ftr2{padding:64px 0 32px}
  .ftr2-bot{margin-top:48px}
  /* зона нажатия ссылок футера — без смены вида */
  .ftr2 li a{display:inline-block;padding:6px 0}
  .ftr2 li+li{margin-top:4px}

  html{scroll-padding-top:80px}
}
@media (max-width:400px){
  .gnav-cta{padding:0 14px}
  .gnav-burger{margin-left:6px}
  /* 32 px, а на 320–365 меньше: первая строка «Принимайте платежи» помещается в контейнер */
  .hero-copy h1{font-size:min(32px,8.75vw)}
  .hero-copy h1 .ln{white-space:normal}
  .phone{--ps-w:.52}
  .fl-green .lbl{white-space:normal}
  .hero-ctas .btn{padding:0 12px}
  .fl-bal b .u{display:block}
}
/* 320–359 (Galaxy Fold, зум 400 % на 1280): капсула, кабинет и уведомление без вылетов */
@media (max-width:359px){
  .gnav{padding-left:14px}
  .gnav .brand{gap:6px;font-size:15px}
  .gnav-cta{padding:0 12px;font-size:13px}
  .gnav-burger{margin-left:4px}
  .bal-sum{font-size:30px}
  .fl-green b{font-size:18px}
  /* «Политика конфиденциальности» шире колонки 2×2 */
  .ftr2-grid{grid-template-columns:1fr}
}
@media (max-width:350px){
  .hero-ctas{flex-wrap:wrap}
  .hero-ctas .btn{flex:1 1 100%}
}
/* 320–340: знак без слова «RUBREK» (текст остаётся в DOM), иначе капсула не вмещает «Подключиться» и бургер */
@media (max-width:340px){
  .gnav .brand{font-size:0;gap:0}
  .fl-green b{font-size:16px;white-space:nowrap}
}
/* ≤350 при невысоком окне закреплённый кадр героя выше экрана — пин отключаем, как в коротком ландшафте */
@media (max-width:350px) and (max-height:720px){
  .hero-scroll{height:auto}
  .hero-pin{position:relative;height:auto;padding-bottom:40px}
}
/* низкое окно телефона (360×640, 375×667): сцена целиком в кадре, пока герой закреплён */
@media (max-width:560px) and (max-height:680px){
  .hero-pin{padding-top:80px;padding-bottom:0}
  .hero-grid{gap:12px}
  .phone{--ps-w:.48}
}

/* ═════════ режим высокой контрастности: QR и знак ₮ не тонут в системном фоне, у пилюль есть контур ═════════ */
@media (forced-colors:active){
  .qr,.qr-card,.mini-qr{forced-color-adjust:none}
  .coin-usdt span,.coin.usdt::before,.mk-usdt::before{background:CanvasText}
  .btn,.gnav-cta,.bal-btn,.gnav-burger{border:1px solid ButtonText}
}

/* ═════════ reduced motion: переходы мгновенные, стадии всё равно переключаются ═════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
  .bars i{height:var(--h)}
  .rails-track{animation:none}
  /* спиннер — статичная дуга */
  .spin{animation:none}
}