:root{
--bg:#000000;
--ink:#f4f4f4;
--muted:#9a9a9a;
/* Правка 22 сентября 2026: тёмные карточки переведены на тон нижних плит
оркестрации и сверки по выбору владельца, чтобы тёмные блоки всего сайта
звучали одним цветом. Светлее пробовали (#1f2229 со страницы антифрода),
владелец выбрал этот. Прежний тон сайта был #212121. */
--card:#15171c;
--card2:#2b2b2b;
--line:rgba(255,255,255,.10);
--lime:#f16428;
--lime-ink:#ffffff;
--amber:#ffc531;
/* Фиолетовый пришёл на замену розовому во всех акцентах
(решение Дмитрия 7 сентября 2026). Розовый остался только
точкой в логотипе. */
--violet:#8b5cf6;
--blue:#12a5ff;
--white:#ffffff;
--r:26px;
--r-sm:18px;
--wrap:1240px;
--drop-shift:146px;
/* Курсор мозаики «Почему бизнес выбирает Paymatic» — свой значок «развернуть»:
две системные стрелки macOS в НАТУРАЛЬНУЮ величину, разведённые по главной
диагонали остриями наружу. Первая — ровно системный курсор в его обычной
ориентации, острием в левый верхний угол, стоит в левой верхней части поля.
Вторая — она же, повёрнутая на 180 градусов, острием в правый нижний угол,
стоит в правой нижней части. Обе стрелки ЦЕЛЫЕ: ни одного среза, хвост и
развилка на месте (обрубленный силуэт с ровной полосой между стрелками
Дмитрий забраковал 6 сентября 2026, требование ровной полосы снято).
Больше в значке ничего нет: ни третьей и четвёртой стрелок, ни точки, ни
палочек-стержней в середине (со стержнями значок читался бы как
«перетащить окно», а не «развернуть»). Картинка векторная и встроена прямо
сюда (data-URI со SVG) — внешних файлов нет, страница остаётся
самодостаточной, на плотных экранах не мылится.
Форма и размер сняты с настоящего курсора, а не нарисованы на глаз:
системный ресурс стрелки выгружен в десятикратном увеличении (280×400
точек), контур обведён и упрощён до пятнадцати углов. Масштаб ровно 1:1 —
тело 8,3 в ширину и 14,8 в высоту, кайма 1,0, как у системной стрелки;
замер по растру значка даёт ровно 8,3 × 14,8 у каждой из двух стрелок.
Геометрия. Поле 32×32: двум целым стрелкам с просветом поле 28×28 мало,
а 32 браузеры берут надёжно (объявленный потолок 128, но выше 64 начинаются
осечки). Расстановка симметричная — вторая стрелка это первая, повёрнутая
на 180 градусов вокруг центра поля, поэтому краска стоит ровно по центру.
Краска занимает 31,0 × 31,0, до края поля от неё 0,5 со всех сторон.
Просвет между стрелками 13,0 (замер по растру; расчёт по контурам 13,14) —
чуть меньше длины самой стрелки 14,8, поэтому они читаются как две
отдельные расходящиеся стрелки, а не как одна фигура.
Точка попадания — геометрический центр поля, 16 16; она приходится на
просвет между стрелками, до ближайшей краски от неё 6,7.
Два слоя одного и того же контура: сначала белый слой с обводкой шириной 2
(наружу уходит половина, то есть кайма 1), сверху чёрная заливка, которая
закрывает внутреннюю половину обводки. На тёмном фоне работает кайма, на
светлом — тело, поэтому значок виден на всех шести фонах секции (решение
Дмитрия от 6 сентября 2026 взамен волосяного контура толщиной 1, который
терялся на белой раскрытой плитке и на лаймовой — перепад яркости там был
всего 20 и 33 из 255). Соединение линий — miter: у эталона углы каймы
такие же острые.
Первая переменная — 32×32 логических точки, вторая — та же картинка вдвое
крупнее (64×64) для объявления как 2x. */
--cur-expand:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%23ffffff' stroke='%23ffffff' stroke-width='2' stroke-linejoin='miter'%3E%3Cpath d='M6.58 2.6L6.88 2.6L14.68 10.5L13.48 11.7L11.58 11.7L12.14 13.04L10.5 14.68L9.58 12.5L7.48 14.3L6.88 14.2L6.58 13.8Z'/%3E%3Cpath d='M21.42 25.4L21.12 25.4L13.32 17.5L14.52 16.3L16.42 16.3L15.86 14.96L17.5 13.32L18.42 15.5L20.52 13.7L21.12 13.8L21.42 14.2Z'/%3E%3C/g%3E%3Cg fill='%23000000'%3E%3Cpath d='M6.58 2.6L6.88 2.6L14.68 10.5L13.48 11.7L11.58 11.7L12.14 13.04L10.5 14.68L9.58 12.5L7.48 14.3L6.88 14.2L6.58 13.8Z'/%3E%3Cpath d='M21.42 25.4L21.12 25.4L13.32 17.5L14.52 16.3L16.42 16.3L15.86 14.96L17.5 13.32L18.42 15.5L20.52 13.7L21.12 13.8L21.42 14.2Z'/%3E%3C/g%3E%3C/svg%3E");
--cur-expand-2x:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 28 28'%3E%3Cg fill='%23ffffff' stroke='%23ffffff' stroke-width='2' stroke-linejoin='miter'%3E%3Cpath d='M6.58 2.6L6.88 2.6L14.68 10.5L13.48 11.7L11.58 11.7L12.14 13.04L10.5 14.68L9.58 12.5L7.48 14.3L6.88 14.2L6.58 13.8Z'/%3E%3Cpath d='M21.42 25.4L21.12 25.4L13.32 17.5L14.52 16.3L16.42 16.3L15.86 14.96L17.5 13.32L18.42 15.5L20.52 13.7L21.12 13.8L21.42 14.2Z'/%3E%3C/g%3E%3Cg fill='%23000000'%3E%3Cpath d='M6.58 2.6L6.88 2.6L14.68 10.5L13.48 11.7L11.58 11.7L12.14 13.04L10.5 14.68L9.58 12.5L7.48 14.3L6.88 14.2L6.58 13.8Z'/%3E%3Cpath d='M21.42 25.4L21.12 25.4L13.32 17.5L14.52 16.3L16.42 16.3L15.86 14.96L17.5 13.32L18.42 15.5L20.52 13.7L21.12 13.8L21.42 14.2Z'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
/* Корень красим чёрным явно: Safari 26 тонирует верхнюю панель окна
цветом липкой шапки, а когда у неё фон прозрачный — цветом корня.
Прозрачный корень он подменяет светлым, и над сайтом висела серая
полоса (замечание Дмитрия 14 сентября 2026). */
html{-webkit-text-size-adjust:100%;background-color:#000}
/* ЗАГЛУШКА ПОД ПАНЕЛЬЮ БРАУЗЕРА.
Safari 26 пускает страницу под свою стеклянную панель, и сквозь неё
просвечивает содержимое: у Дмитрия 14 сентября 2026 сквозь панель читался
заголовок страницы. Закрыть эту зону может только сам сайт. Полоса стоит
прикреплённой у верха окна, высотой ровно в безопасный отступ сверху,
который браузер и сообщает. В обычном окне отступ нулевой, полосы нет
вовсе, поэтому правило безопасно для всех прочих браузеров. */
body::before{content:'';position:fixed;top:0;left:0;right:0;
height:env(safe-area-inset-top,0px);
background:#000;z-index:70;pointer-events:none}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.container{max-width:var(--wrap);margin:0 auto;padding:0 20px}
/* Display type — chunky uppercase, t2 style */
.disp{
font-family:'Montserrat',sans-serif;font-weight:900;
text-transform:uppercase;line-height:.94;letter-spacing:-.01em;
margin:0;
}
.h2{
font-family:'Montserrat',sans-serif;font-weight:800;
text-transform:uppercase;line-height:1;letter-spacing:-.01em;
font-size:clamp(28px,4.4vw,52px);margin:0;
}
.h3{
font-family:'Montserrat',sans-serif;font-weight:800;
text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;
font-size:clamp(19px,2vw,26px);margin:0;
}
.lead{font-size:clamp(16px,1.4vw,19px);color:var(--muted);margin:0}
.prose{color:var(--muted);margin:0}
/* Badge / kicker pill */
.badge{
display:inline-flex;align-items:center;gap:8px;
font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:12px;letter-spacing:.04em;
padding:8px 14px;border-radius:999px;background:var(--lime);color:var(--lime-ink);
}
.badge.violet{background:var(--violet);color:#fff}
.badge.blue{background:var(--blue);color:#fff}
.badge.ghost{background:rgba(255,255,255,.08);color:var(--ink)}
/* Buttons */
.btn{
display:inline-flex;align-items:center;gap:10px;
font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:13px;letter-spacing:.03em;
padding:15px 26px;border-radius:999px;border:0;cursor:pointer;
/* Кнопка не двигается под курсором: владелец 26 сентября 2026 потребовал
статичных кнопок на всех страницах. Отклик допускается только цветом. */
transition:background .18s ease, color .18s ease;
white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-white{background:#fff;color:#141414}
.btn-dark{background:#1c1c1c;color:#fff}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff}
/* Единый отклик на наведение: только цвет, без движения (26 сентября 2026).
Светлые кнопки темнеют, тёмная светлеет: затемнение на почти чёрном
фоне глазом не ловится. Шаг взят заметный, 20 и больше единиц из 255,
мелкий шаг на экране не виден вовсе. */
.btn-lime:hover{background:#d45823}
.btn-white:hover{background:#e8e8ea}
.btn-dark:hover{background:#303030}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-sm{padding:11px 18px;font-size:12px}
/* Header */
.topbar{border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.topbar .container{display:flex;align-items:center;gap:8px;height:38px}
.topbar svg{width:14px;height:14px;color:var(--lime)}
/* Header — светлая плавающая плашка-капсула (pill), липкая при прокрутке */
/* Липкость возвращена по просьбе Дмитрия 14 сентября 2026 (снималась
8 сентября). Шапка едет за прокруткой и остаётся наверху.
У самого верха страницы она по-прежнему прозрачная, чтобы планета
на главной заходила под неё, как и задумано. Тёмная подложка с
размытием появляется только когда страница уехала вниз, иначе светлые
надписи меню теряются на белом полотне. */
/* ВАЖНО: по умолчанию шапка ОБЫЧНАЯ, не липкая. Причина не только в том,
что прилипания быть не должно. Safari 26 красит верх своего окна цветом
ближайшего липкого или прикреплённого элемента у края, и липкая шапка с
прозрачным фоном давала ему пустоту, из-за чего над сайтом висела серая
стеклянная полоса (замечание Дмитрия 14 сентября 2026). Пока липких
элементов у верха нет, Safari берёт цвет подложки страницы, а она чёрная.
Прикреплённой шапка становится только на время показа, и тогда у неё уже
сплошной чёрный фон, который Safari и подхватывает. */
header.site{position:relative;top:0;z-index:60;padding:8px 0;pointer-events:none;
/* У самого верха подложки нет вовсе: первый экран на всех десяти боевых
страницах чёрный, замер это подтвердил, поэтому светлые надписи меню
читаются и без неё, а планета на главной заходит под шапку целиком.
Полупрозрачная с размытием забракована раньше — сквозь мутный просвет
читалось белое полотно. */
background:transparent;
transition:box-shadow .18s ease,background-color .18s ease}
/* Показ после движения вверх: шапка прикрепляется к верху окна и красится
чёрным. Сюда же смотрит Safari, когда красит верх своего окна. */
header.site.is-pin{position:sticky;background:#000}
/* Едем вниз — шапка уходит вверх ровно на столько, на сколько уехала
страница, то есть ведёт себя как обычный НЕ липкий блок: прилипания
не видно вовсе. Едем вверх — приезжает обратно. Сдвигом правит скрипт,
поэтому здесь перехода нет: вниз он должен быть мгновенным, иначе
шапка отстаёт от страницы и это читается как прилипание.
РАЗМЕР ШАПКИ НЕ МЕНЯЕТСЯ НИКОГДА (просьба Дмитрия 14 сентября 2026):
сжатие до 44 точек сделано и отменено, не возвращать. */
/* Уехали вниз: появляется только сплошная чёрная подложка, иначе светлые
надписи теряются на белом полотне. Больше ничего. */
header.site.is-stuck{background:#000;
box-shadow:0 10px 28px rgba(0,0,0,.35)}
.navbar{transition:height .18s ease}
.brand-logo{transition:height .18s ease}
.navwrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
/* Плашка под меню убрана по просьбе Дмитрия 8 сентября 2026: ни фона, ни рамки,
ни тени, меню лежит прямо на фоне страницы. Прежний вид (тёмная пилюля с
рамкой и тенью) — в index-before-nav-off.html. */
.navbar{
pointer-events:auto;
display:flex;align-items:center;gap:22px;height:52px;
padding:0;
background:transparent;color:#f4f4f4;
border:0;border-radius:0;box-shadow:none;
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-weight:900;font-size:20px;letter-spacing:-.02em;color:#f4f4f4}
.brand .m{width:34px;height:34px;border-radius:10px;background:var(--lime);display:grid;place-items:center;color:var(--lime-ink);font-family:'Montserrat',sans-serif;font-weight:900;font-size:18px}
.brand .m svg{width:20px;height:20px}
.brand-name{line-height:1}
/* Высота логотипа в шапке задана Дмитрием 8 сентября 2026. */
.brand-logo{height:24px;width:auto;display:block}
.brand-logo.foot{height:47px}
.brand-text{font-family:'Montserrat',sans-serif;font-weight:900;font-size:29px;letter-spacing:-.03em;line-height:1;color:#fff}
.brand-text .dot{color:#e8398d}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links a{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:15px;color:rgba(255,255,255,.82);padding:8px 13px;border-radius:999px;transition:background .15s,color .15s}
.nav-links a:hover{background:rgba(255,255,255,.09);color:#fff}
.nav-links a .caret{width:13px;height:13px;opacity:.6;transition:transform .18s ease}
/* Пока курсор в выпадающем списке, сам пункт «Продукты» остаётся подсвеченным:
иначе подложка гасла на переходе к списку (просьба Дмитрия 8 сентября 2026). */
.nav-links .has-drop:hover > a,.nav-links .has-drop:focus-within > a{
background:rgba(255,255,255,.09);color:#fff}
.has-drop:hover a .caret{transform:rotate(180deg)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.navbar .btn-lime{box-shadow:none}
/* Кнопка в шапке белая: на тёмной полосе она заметнее акцентной и не спорит
с логотипом (просьба Дмитрия 8 сентября 2026). */
.navbar .nav-right .btn-lime{background:#fff;color:#141414}
/* Вход в кабинет в шапке сделан обычной ссылкой, а не кнопкой (просьба Дмитрия
9 сентября 2026): это возврат для своих, он не должен спорить с призывом. */
.nav-login{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;
color:rgba(255,255,255,.72);padding:8px 2px;transition:color .15s}
.nav-login:hover{color:#fff}
.nav-login svg{width:16px;height:16px;opacity:.7}
.icon-btn{width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#f4f4f4;border:0;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.16)}
.icon-btn svg{width:20px;height:20px}
.burger{display:none}
/* Выпадающий список у пункта «Продукты» (по наведению / фокусу) */
.has-drop{position:relative}
/* Мостик через просвет между пунктом и списком: без него курсор на полпути
выходил из зоны наведения и список мигал (просьба Дмитрия 8 сентября 2026).
Плюс список гаснет с небольшой задержкой, чтобы не пропадал от дрожания руки. */
.has-drop::after{content:"";position:absolute;left:0;top:100%;width:100%;height:16px}
/* Список выровнен по левому краю контентной части, а не по пункту «Продукты»
(просьба Дмитрия 9 сентября 2026). Сдвиг равен расстоянию от начала
контентной колонки до пункта меню, то есть ширине логотипа с отступами.
Меняется высота логотипа или отступы шапки, значение надо пересчитать. */
.drop{
position:absolute;top:calc(100% + 10px);left:calc(-1 * var(--drop-shift));
/* Две колонки: четыре пункта в первой, три во второй — список стал ниже и
шире (просьба Дмитрия 8 сентября 2026). */
display:grid;grid-template-columns:repeat(2,430px);
align-items:start;column-gap:14px;
background:#fff;color:#141414;border:0;border-radius:22px;padding:22px 24px 28px;
box-shadow:0 22px 50px rgba(0,0,0,.55);
opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity .16s ease .18s,transform .16s ease .18s,visibility .16s .18s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
/* Курсор ушёл на соседний пункт меню, значит прежний список гаснет сразу:
иначе два списка какое-то время висят одновременно (правка 9 сентября 2026).
Задержка сохраняется только когда курсор уходит с меню совсем. */
.nav-links:hover .has-drop:not(:hover) > .drop{transition-delay:0s;transition-duration:.09s}
/* Узкие окна: колонки сужаются, чтобы список не вылезал за край экрана. */
/* Узкие окна: колонки сужаются, длинные названия переносятся на вторую
строку, иначе «Эквайринг для киосков самообслуживания» вылезал за край. */
@media(max-width:1240px){.drop{grid-template-columns:repeat(2,300px)}
.drop .dt{white-space:normal}}
/* Второй выпадающий список, у пункта «Подключение»: одна колонка, четыре
пункта без пояснений, выровнен по своему пункту меню (9 сентября 2026). */
.drop.drop-sm{grid-template-columns:340px;grid-template-rows:none;grid-auto-flow:row;
left:0;padding:14px;border-radius:18px;row-gap:2px}
.drop.drop-sm .dt{white-space:nowrap}
@media(max-width:1240px){.drop.drop-sm{grid-template-columns:300px}}
/* Значки в выпадающем списке добавлены 8 сентября 2026 по просьбе Дмитрия:
тонкая линия, цвет наследуется от строки, ширина фиксированная — подписи
стоят в одну колонку. */
.drop a{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:15px;
color:#3a3a3a;transition:background .14s ease}
.drop a:hover{background:#f5f5f5}
/* Клетки заданы поимённо: плашка внизу второй колонки стоит ниже пунктов,
и автоматическая раскладка больше не тасует список. */
/* Колонки выпадающего списка: слева продукты, справа решения
(просьба Дмитрия 13 сентября 2026). Каждая колонка это свой столбец,
поэтому пункты больше не расставляются по клеткам поимённо: порядок
задаёт разметка, и новый пункт достаточно дописать в нужную колонку. */
.drop .dcol{display:flex;flex-direction:column;row-gap:3px;min-height:100%}
.drop .dhd{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;
letter-spacing:.12em;text-transform:uppercase;color:#8a8a8a;
padding:2px 15px 10px;margin:0}
.drop .di{width:40px;height:40px;border-radius:12px;background:#f0f0f0;display:grid;place-items:center;flex:none;
transition:background .14s ease}
.drop a:hover .di{background:#e6e6e6}
.drop .di svg{width:20px;height:20px;color:#141414;opacity:.85}
.drop .dtx{display:flex;flex-direction:column;min-width:0}
.drop .dt{font-weight:700;font-size:15px;line-height:1.25;color:#141414;white-space:nowrap}
.drop .dd{font-weight:500;font-size:13px;line-height:1.35;color:#6f6f6f;margin-top:2px}
/* Восьмая клетка: кнопка обратной связи вместо прежней ссылки «Все продукты»
(просьба Дмитрия 9 сентября 2026). Куда ведёт, решим позже. */
/* Плашка отодвинута в отдельный ряд под списком, чтобы читалась не как
восьмой пункт меню, а как отдельное предложение (9 сентября 2026). */
.drop .dcta{margin-top:auto;
display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
margin:26px 0 0;padding:20px;border-radius:18px;background:#f2f2f2;
transition:background .14s ease}
.drop .dcta-tx{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
/* Конверт нарисован в стиле значков меню, тонкой тёмной линией, но без
серой подложки: её роль играет сама плашка. Толщина линии и знака
пересчитаны под размер, чтобы на экране совпасть со значками слева. */
.drop .dcta-mail{width:96px;height:96px;flex:none;margin-right:8px;color:#141414;opacity:.85}
.drop .dcta:hover{background:#ececec}
.drop .dcta-q{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;letter-spacing:.01em;
text-transform:uppercase;line-height:1.25;color:#141414}
.drop .dcta-b{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border-radius:11px;
background:#141414;color:#fff;font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;
letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
transition:background .14s ease}
.drop .dcta-b svg{width:12px;height:12px}
.drop .dcta:hover .dcta-b{background:#2e2e2e}
/* Узкие окна: колонка сужается, вопрос и кнопка встают друг под другом. */
@media(max-width:1240px){
.drop .dcta{padding:18px 16px;gap:13px}
.drop .dcta-q{font-size:14px}}
/* Якоря не прячутся под липкую плашку при переходе по ссылкам */
section[id]{scroll-margin-top:96px}
/* Mobile menu */
.mmenu{display:none;position:fixed;inset:70px 0 0;z-index:49;background:var(--bg);padding:24px 20px;flex-direction:column;gap:6px}
.mmenu.open{display:flex}
.mmenu a{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.mmenu .btn{margin-top:20px;justify-content:center}
@media(max-width:560px){ .nav-right .btn-lime,.nav-right .nav-login{display:none} }
/* Section spacing — единый вертикальный ритм */
section{padding:34px 0}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.sec-head .h2{max-width:16ch}
.sec-head .lead{max-width:60ch}
/* Заголовок секции с кнопкой в строке заголовка: плашка-бейдж и заголовок слева,
кнопка справа по нижнему краю. На узких экранах кнопка переносится под
заголовок (flex-wrap), поэтому ничего не сжимается и не обрезается. */
.sec-head.with-btn{flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px 28px}
.sec-head.with-btn .h2{max-width:24ch}
/* Bento grid base */
.bento{display:grid;gap:14px}
.tile{
background:var(--card);border-radius:var(--r);padding:26px;
position:relative;overflow:hidden;
border:1px solid var(--line);
transition:transform .2s ease;
}
.tile:hover{transform:translateY(-4px)}
/* Карточки «кому подходит» не ссылки, но при наведении дышат так же, как
плитки способов оплаты (просьба Дмитрия 7 сентября 2026). Курсор при этом
остаётся обычной стрелкой, чтобы карточка не читалась как нажимаемая. */
/* Отраслевые карточки неподвижны: подъём и тень при наведении сняты
(просьба Дмитрия 8 сентября 2026), прежнее поведение было «дышат». */
.who-grid .tile{transition:none}
.who-grid .tile:hover{transform:none;box-shadow:none}
/* Курсор над карточками обычный: они не ссылки и текст в них не выделяют. */
.who-grid .tile,.who-grid .tile *{cursor:default}
.tile .h3{margin-bottom:10px}
.tile.dark{background:var(--card)}
/* Отраслевые карточки и мозаика идут без обводки: тёмные плитки и так отделены
от фона, рамка дробила ряд (просьба Дмитрия 8 сентября 2026). */
.who-grid .tile,.tile.adv-cell{border-color:transparent}
.tile.white{background:#fff;color:#141414;border-color:transparent}
.tile.white .prose,.tile.white .lead{color:#5a5a5a}
/* Оранжевая плитка: заливка с переходом сверху вниз, тот же, что у оранжевых
карточек мультиэквайринга. Решение владельца 12 сентября 2026 на все
оранжевые карточки сайта. */
.tile.lime{background:linear-gradient(180deg,#f7743a 0%,#f16428 100%);
color:var(--lime-ink);border-color:transparent}
.tile.lime .prose{color:rgba(255,255,255,.92)}
.tile.blue{background:var(--blue);color:#fff;border-color:transparent}
.tile.blue .prose{color:rgba(255,255,255,.9)}
/* Жёлтая карточка добавлена 7 сентября 2026 по просьбе Дмитрия, текст на ней
тёмный, как на лаймовой. Фиолетовая пришла на замену розовой в карточках
сегментов тем же днём. */
.tile.violet{background:var(--violet);color:#fff;border-color:transparent}
.tile.violet .prose{color:rgba(255,255,255,.9)}
.tile.amber{background:var(--amber);color:#141414;border-color:transparent}
.tile.amber .prose{color:#4a3608}
.tile .corner-arr{position:absolute;right:22px;bottom:22px;width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,.14);display:grid;place-items:center;transition:transform .2s ease,background .2s ease}
.tile.white .corner-arr{background:#f0f0f0}
.tile.dark .corner-arr{background:rgba(255,255,255,.10)}
.tile:hover .corner-arr{transform:translate(3px,-3px)}
.tile .corner-arr svg{width:20px;height:20px}
/* ===== HERO ===== */
.hero{padding-top:14px}
/* Все слайды лежат в ОДНОЙ ячейке грида (grid-area:1/1) и наложены друг на друга.
Высота блока = высота самого высокого слайда и НЕ меняется при смене слайда:
переключение — чистый кросс-фейд по прозрачности, рамка/размер статичны. */
.hero-slides{position:relative;border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1fr}
.hero-slide{
grid-area:1/1;position:relative;padding:clamp(24px,2.6vw,36px);
display:flex;flex-direction:column;justify-content:center;gap:14px;
opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.hero-slide.on{opacity:1;pointer-events:auto}
/* Градиент и схема с первого слайда убраны по просьбе Дмитрия 7 сентября 2026,
остался ровный светлый фон. */
.hero-1{background:#fff;color:#141414}
.hero-2{background:linear-gradient(120deg,#141414 0%, #1d1d1d 60%, #23301a 100%);color:#fff}
.hero-inner{max-width:820px;position:relative;z-index:2}
.hero-1 .disp{font-size:clamp(32px,4.4vw,58px)}
.hero-2 .disp{font-size:clamp(30px,4vw,54px)}
.hero-lead{font-size:clamp(15px,1.5vw,19px);max-width:60ch;line-height:1.45}
.hero-1 .hero-lead{color:#2a2a2a}
.hero-2 .hero-lead{color:#c9c9c9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero-graphic{position:absolute;right:-20px;top:0;bottom:0;width:46%;z-index:1;opacity:.95;pointer-events:none}
/* Место шара на первом слайде. Шар прижат к правому краю, центр по высоте,
часть его уходит за край и срезается скруглением слайда. Слой ниже текста,
мышь его не замечает. Размер задан здесь, сам шар своих размеров не знает.
Добавлено 13 сентября 2026. */
/* Первый экран главной переехал на собственное оформление (файл hero-v2.css)
13 сентября 2026, здесь остались только общие правила слайдов. Прежние
правила места шара, высоты баннера и суженной колонки удалены вместе с
белой карточкой, их держит копия paymatic-before-globe.css. */
.hero-graphic svg{position:absolute;right:0;top:50%;transform:translateY(-50%);width:100%;height:auto}
/* Стрелки перелистывания убраны (решение Дмитрия 7 сентября 2026): слайды
переключают сами точки, они стоят по центру внизу и нажимаются. */
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;
display:flex;gap:10px;z-index:5}
.hero-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;
cursor:pointer;background:rgba(20,20,20,.28);transition:width .2s, background .2s}
.hero-dots button.on{background:#141414;width:28px}
.hero-dots button:hover{background:rgba(20,20,20,.5)}
.hero-2 .hero-dots button{background:rgba(255,255,255,.3)}
.hero-2 .hero-dots button.on{background:#fff}
.hero-2 .hero-dots button:hover{background:rgba(255,255,255,.6)}
/* Products bento — мозаика по ТОЙ ЖЕ карте размеров, что и секция преимуществ:
4 колонки × 3 ряда, семь плиток, все 12 клеток заняты ровно одной плиткой.
Одна высокая 1×2, четыре широких 2×1, два квадрата 1×1 — карта снята с
.adv-grid (там она задана классами sh-tall / sh-wide и продублирована в
скрипте как раскладка покоя REST).
Места заданы ЯВНО (grid-area), а не потоком: тогда порядок в разметке равен
порядку чтения (сверху вниз, слева направо), а значит и порядку в выпадающем
меню и в подвале — их не приходится держать в голове отдельно.
Раскрытия по клику здесь НЕТ и быть не должно: плитка продукта — ссылка на
страницу продукта. Эффект живёт только в секции преимуществ.
Ряды не фиксированы в 200px, как у преимуществ, а растут под текст
(minmax(200px,auto)): у преимуществ в покое виден только заголовок, а здесь
плитка сразу показывает описание, и жёсткая высота его бы обрезала. */
.prod-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
grid-template-rows:repeat(3,minmax(200px,auto));
}
.prod-grid > .pl-1{grid-area:1/1/3/2} /* высокая 1×2 — столбец 1, ряды 1–2 */
.prod-grid > .pl-2{grid-area:1/2/2/4} /* широкая 2×1 — ряд 1, столбцы 2–3 */
.prod-grid > .pl-3{grid-area:1/4/2/5} /* квадрат 1×1 — ряд 1, столбец 4 */
.prod-grid > .pl-4{grid-area:2/2/3/4} /* широкая 2×1 — ряд 2, столбцы 2–3 */
.prod-grid > .pl-5{grid-area:2/4/3/5} /* квадрат 1×1 — ряд 2, столбец 4 */
.prod-grid > .pl-6{grid-area:3/1/4/3} /* широкая 2×1 — ряд 3, столбцы 1–2 */
.prod-grid > .pl-7{grid-area:3/3/4/5} /* широкая 2×1 — ряд 3, столбцы 3–4 */
/* Поле снизу — место под уголок-стрелку (кружок 40px + отступ 22px от края),
чтобы текст на неё не наезжал ни в одной плитке. Содержимое посажено по
центру по высоте: клетка мозаики выше своего текста, при верхней посадке низ
смотрелся бы пустым. Уголок-стрелка при этом не двигается — она
позиционирована абсолютно.
Селекторы начинаются с .prod-grid не для красоты: общие правила .tile .ficon
и .tile .ficon svg объявлены ниже в файле и при равной силе перебили бы
размеры иконки. */
.prod-grid .tile{padding:24px 24px 78px;display:flex;flex-direction:column;justify-content:center}
/* Высокая плитка (1×2). Её вес в мозаике держат площадь, крупная иконка и
крупный текст описания, а НЕ кегль заголовка: плитка шириной в одну колонку,
и заголовок здесь самый мелкий в мозаике.
Потолок 20px — замер, не глазомер. Слово «МУЛЬТИЭКВАЙРИНГ» занимает 11,3
кегля в ширину (замер по растру: при 24px — 271px). Поле текста в колонке
289px равно 241px, значит кегль не больше 21px; берём 20px с запасом 15px.
Ползунок 1,6vw держит то же условие на всех ширинах вплоть до порога
мозаики: при 1150px поле 219px, кегль 18,4px, слову нужно 208px. */
.prod-grid .pc-tall{padding:24px 24px 78px}
.prod-grid .pc-tall .h3{font-size:clamp(17px,1.6vw,20px);margin-bottom:12px}
.prod-grid .pc-tall .prose{font-size:clamp(15px,1.3vw,17px);line-height:1.5}
.prod-grid .pc-tall .ficon{width:54px;height:54px;border-radius:15px;margin-bottom:20px}
.prod-grid .pc-tall .ficon svg{width:28px;height:28px}
/* Широкая плитка (2×1): иконка отдельным столбцом слева, заголовок и текст
справа. Стопкой «иконка над заголовком» ряд набирал бы высоту втрое быстрее,
чем ему нужно по тексту, и мозаика вытягивалась бы по вертикали. */
.prod-grid .pc-wide{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-content:center}
.prod-grid .pc-wide .ficon{grid-row:1/3;margin-bottom:0}
.prod-grid .pc-wide .h3{grid-column:2;font-size:clamp(18px,1.85vw,24px);margin-bottom:10px}
.prod-grid .pc-wide .prose{grid-column:2;font-size:15px;line-height:1.5}
/* Квадрат (1×1): клетка 289×200, стопка «иконка + заголовок + описание» в неё
не встаёт — замер даёт 314px, то есть ряд раздулся бы в полтора раза и
квадрат перестал бы быть квадратом. Поэтому в квадрате показываем иконку и
заголовок, описание скрыто. Из РАЗМЕТКИ текст не убран: на узких экранах,
где плитка растягивается по ширине, он показывается целиком (правила ниже,
в @media 1000). */
Заголовок в квадрате крупнее, чем в высокой плитке: описания рядом нет, и при
мелком кегле клетка смотрелась полупустой. Потолок 24px — замер: самое
длинное слово здесь «ОБЛАЧНЫМИ» (9 знаков, 6,8 кегля) занимает 163px при
поле текста 241px. */
.prod-grid .pc-sq .h3{font-size:clamp(19px,1.9vw,24px)}
.prod-grid .pc-sq .ficon{margin-bottom:16px}
.prod-grid .pc-sq .prose{display:none}
.prod-mock{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.pmrow{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.16);border-radius:12px;padding:10px 12px;font-size:13px}
.tile.white .pmrow{background:#f3f3f3}
.pmrow .pi{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.tile.white .pmrow .pi{background:#e6e6e6}
.pmrow .pt{font-weight:600;color:inherit}
.pmrow .ptag{margin-left:auto;font-size:11px;font-weight:800;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.16)}
.pmrow.ok .ptag{background:var(--lime);color:var(--lime-ink)}
.pmrow.warn .ptag{background:var(--violet);color:#fff}
.tile.white .pmrow .ptag{background:#e0e0e0;color:#333}
/* Whatis — wide dark statement */
/* Коробка снята по просьбе Дмитрия 7 сентября 2026: фраза о компании стоит
прямо на странице, без фона, рамки и внутренних полей. Оформлена как цитата
лаймовой чертой слева, кавычек нет намеренно (компания цитировала бы сама
себя). Имя компании столбиком пробовали тем же днём и убрали, оставлена
только черта. */
.whatis{background:none;border:0;border-radius:0;display:block;
border-left:4px solid var(--lime);padding:6px 0 6px clamp(20px,2.4vw,34px)}
.whatis .h2{font-size:clamp(26px,3.2vw,42px);margin:0}
/* How it works steps */
.steps{grid-template-columns:repeat(3,1fr)}
.step{background:var(--card);border-radius:var(--r);padding:30px;border:1px solid var(--line)}
.step .num{font-family:'Montserrat',sans-serif;font-weight:900;font-size:56px;line-height:1;color:var(--lime);margin-bottom:16px}
.step:nth-child(2) .num{color:var(--violet)}
.step:nth-child(3) .num{color:var(--blue)}
.step h3{margin:0 0 10px}
/* Advantages — СТАТИЧНАЯ бенто-мозаика. Плитки стоят на местах. Наведение:
наведённая плитка ВЫРАСТАЕТ до ~2×2 (реальный размер бокса, не scale) и
наезжает ПОВЕРХ соседей; широкие/высокие соседи, которых она перекрывает,
ужимаются РОВНО до одной ячейки (1×1) на своём месте; соседи-квадраты 1×1
остаются 1×1. Дорожки грида фиксированы (строки 200px,
колонки 1fr) → размер плитки не влияет на раскладку, разъезда нет, высота
блока постоянна. Логика — в скрипте внизу. */
.adv-grid{
display:grid;
/* minmax(0,1fr): минимум колонки = 0, а НЕ auto. Поэтому увеличенный размер
любой плитки (оверлей 2×2) НЕ раздувает свою колонку и не крадёт ширину у
соседних — 4 колонки всегда равны (~290px), раскладка не «плывёт». */
grid-template-columns:repeat(4,minmax(0,1fr));
grid-template-rows:repeat(3,200px);gap:14px;grid-auto-flow:row dense;align-items:stretch;
}
.adv-cell{position:relative;overflow:hidden;
transition:width .2s cubic-bezier(.16,.84,.28,1), height .2s cubic-bezier(.16,.84,.28,1),
box-shadow .2s ease, border-radius .18s ease;}
/* Формы мозаики: высокие (1×2), широкие (2×1), обычные (1×1) — фиксированы */
.adv-cell.sh-tall{grid-row:span 2}
.adv-cell.sh-wide{grid-column:span 2}
/* Растущая плитка: раскрывается до ~2×2 своими РЕАЛЬНЫМИ размерами (без scale —
контент не искажается), наезжает поверх соседей. При раскрытии ФОН всегда
белый, текст тёмный, описание крупное — блок выглядит заполненным. */
.adv-cell.is-focus{
overflow:visible;z-index:5;box-shadow:0 26px 60px rgba(0,0,0,.5);
background:#fff!important;color:#141414!important;border-color:transparent!important;
}
/* Задетая соседка: ЛЮБАЯ плитка, которую растущий блок перекрывает хоть частично,
становится аккуратным квадратом 290×200 и остаётся ПОЛНОСТЬЮ видимой — квадрат
ставится в незакрытую ячейку соседа, а если весь сосед под блоком, показывается
ПОВЕРХ блока (z-index задаёт скрипт: 1 — видимая ячейка, 6 — поверх). Раскладка
сетки не меняется (колонки minmax(0,1fr)), все незадетые плитки — как в покое. */
.adv-cell.is-shrunk{z-index:1}
/* Заголовок в сжатом квадрате: уменьшенный шрифт, чтобы длинный текст ПОЛНОСТЬЮ
помещался в 290×200 и по ширине, и по высоте — перенос по словам, без обрезки. */
.tile.adv-cell.is-shrunk .f-t{
inset:20px;align-items:flex-start;opacity:1;
font-size:clamp(20px,2.2vw,30px);line-height:1.06;letter-spacing:-.015em;
overflow-wrap:anywhere;
}
/* Плитки стоят на местах: отключаем общий подъём .tile:hover для мозаики. */
.tile.adv-cell:hover{transform:none}
/* Свой курсор на плитках мозаики — значок «развернуть» (две ЦЕЛЫЕ системные
стрелки macOS в натуральную величину, разведённые по диагонали остриями
наружу, между ними просвет 13 точек).
Раскрытие идёт по клику, но палец сюда не ставим: значок стрелок прямо говорит
«нажмёшь — развернётся». Точка попадания — геометрический центр поля (16 16),
она приходится на просвет между стрелками, то есть на пустоту.
Ставится только на плитки мозаики и всё, что внутри них (заголовок, иконка,
описание), чтобы курсор не менялся ни в покое, ни на раскрытой плитке.
Запасной вариант в конце каждой строки — обычный указатель default, а не палец.
Правило живёт в @media шире 1000px: на узких экранах раскрытие выключено
(тот же порог, что у скрипта: min-width 1001px), там курсор обычный. */
@media(min-width:1001px){
.adv-grid .adv-cell,
.adv-grid .adv-cell *{
cursor:var(--cur-expand) 14 14, default;
/* Строки ниже — для экранов с высокой плотностью точек: браузер берёт
картинку 64×64, растрирует её в 64 физические точки и показывает как
32 логических. Браузер, который image-set не понимает, просто оставит
строку выше — значок всё равно будет. */
cursor:-webkit-image-set(var(--cur-expand) 1x, var(--cur-expand-2x) 2x) 14 14, default;
cursor:image-set(var(--cur-expand) 1x, var(--cur-expand-2x) 2x) 14 14, default;
}
}
/* ── Мозаика продуктов (статичная, без раскрытия) ─────────────────────────
Сетка 4×3, семь плиток: w2 — на два столбца, w4 — на всю ширину, без
класса — квадрат. Ряды растут под текст: описания у продуктов разной
длины, жёсткая высота их бы срезала. Заголовок сверху, описание внизу
(margin-top:auto) — как в образце t2. */
/* Сетка на 24 колонки, а не на 4: так ширины плиток можно задавать
не только четвертями. Оба ряда 12 + 6 + 6 и 6 + 6 + 12 — плитки
верхнего ряда того же размера, что нижнего (Дмитрий откатил
нестандартные ширины 6 сентября 2026), блок про игры на все 24. */
.pmos{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:20px}
.pmos .pcell{grid-column:span 6}
.pmos .pcell{min-height:0}
.pmos .pcell.w2{grid-column:span 12}
/* Верхний ряд закреплён по высоте (просьба Дмитрия 7 сентября 2026): что бы
ни написали в плитках, размер остаётся прежним, текст на высоту не влияет.
На узких экранах, где плитки идут в одну колонку, высота снова по тексту.
Правка 25 сентября 2026: нижний ряд выровнен по верхнему — та же высота,
что у мультиэквайринга. Блок во всю ширину между ними не трогаем, его
высоту держит картинка. */
@media(min-width:701px){
.pmos .pcell:nth-child(-n+3),
.pmos .pcell:nth-child(n+5){height:310px}
}
/* Блок во всю ширину: высоту задаёт ТЕКСТ, а не фотография. Снимок вынут из
потока и растянут по высоте блока (иначе картинка 3:4 диктовала бы 400
точек и блок нельзя было бы опустить). */
.pmos .pcell.w4{grid-column:span 24;min-height:0}
.pmos .pcell.w4 .pface{position:relative}
/* Блок во всю ширину: заголовок крупный — места хватает (просьба Дмитрия
6 сентября 2026). Кегль растёт с шириной окна, но не выше 52 точек. */
.pmos .pcell.w4 .pc-title{font-size:clamp(20px,2vw,31px);line-height:1.06}
/* Блок во всю ширину: содержимое по центру по вертикали, отступы как у
остальных плиток. В покое он НЕ увеличен — увеличение это эффект
наведения (уточнение Дмитрия 6 сентября 2026). */
.pmos .pcell.w4 .pface{padding:0 46% 0 6%;justify-content:center}
/* Блок трансграничных переводов стоит на сайте с 7 сентября 2026 и не
меняется. Правила ниже раньше висели на всех неперевёрнутых плитках, а
неперевёрнутой была только эта да блок про игры. 25 сентября переворот
сняли со всей мозаики, поэтому правила сужены ровно до этой плитки:
её вид и отклик остались прежними до точки. */
.pmos .pcell.w4[data-color].no-flip .pside{background:#2f2f2f;color:var(--ink);
border-color:var(--lime);box-shadow:0 0 24px rgba(241,100,40,.14);
transition:box-shadow .35s ease, transform .35s cubic-bezier(.2,.7,.3,1)}
.pmos .pcell.w4[data-color].no-flip .pside .prose{color:var(--muted)}
@media(hover:hover) and (pointer:fine){
/* Правка 25 сентября 2026: рост поднят с 2,5 до 4 процентов по просьбе
владельца, одинаково по всей мозаике. */
.pmos .pcell.w4.no-flip:hover .pside,.pmos .pcell.w4.no-flip:focus-visible .pside{
box-shadow:0 0 0 1px var(--lime), 0 0 60px rgba(241,100,40,.30), 0 18px 40px rgba(0,0,0,.45);
transform:scale(1.04)}
}
/* Остальные плитки мозаики: переворот снят 25 сентября 2026, поведение
задано такое же, как у плитки трансграничных переводов. Своего фона и
рамки им не задаём — каждая остаётся того цвета, что был на лице. */
/* Яркость и рост идут вместе и плавно, одинаково по всей мозаике. */
.pmos .pcell[data-color].no-flip:not(.w4) .pside{
transition:filter .26s ease, transform .26s ease}
@media(hover:hover) and (pointer:fine){
/* Отклик тот же, что у трансграничных: плитка меняет яркость и слегка
увеличивается, пока курсор на ней. При уходе так же возвращается. */
.pmos .pcell.no-flip:not(.w4):hover .pside,
.pmos .pcell.no-flip:not(.w4):focus-visible .pside{
filter:brightness(1.42);transform:scale(1.04)}
/* Белые плитки идут в обратную сторону: белое осветлять некуда, поэтому
под курсором они притемняются. Решение владельца 25 сентября 2026.
Рост и скорость те же, что у остальных. */
.pmos .pcell.no-flip:not(.w4)[data-color="white"]:hover .pside,
.pmos .pcell.no-flip:not(.w4)[data-color="white"]:focus-visible .pside{
filter:brightness(.94)}
}
/* У кого в системе включено «меньше движения» — без перехода и без роста. */
@media(prefers-reduced-motion:reduce){
.pmos .pcell[data-color].no-flip:not(.w4) .pside{transition:none}
.pmos .pcell.no-flip:not(.w4):hover .pside,
.pmos .pcell.no-flip:not(.w4):focus-visible .pside{transform:none}
}
/* Блок трансграничных переводов: картинка с глобусом и валютами (файл дал
Дмитрий 7 сентября 2026). Рамка и свечение нарисованы прямо в картинке,
поэтому свои снимаем; пропорции блока держим по картинке, чтобы глобус
не резался, текст ложится в её пустую левую половину. */
/* Правка 22 сентября 2026: картинка заменена на новую (файл дал владелец),
чёрные поля вокруг рамки у неё обрезаны, поэтому пропорции блока заданы по
обрезанному размеру 2160 на 442. Под картинку подложен общий тёмный тон
блоков сайта. */
/* Правка 25 сентября 2026: картинка заменена на новую (файл дал владелец).
Она заметно выше прежней, поэтому при заполнении во всю ширину глобус и
знаки валют резались сверху и снизу. Теперь снимок вписан по высоте и
прижат к правому краю, а слева стоит ровный фон, взятый замером по левой
части самой картинки (#171d23) — стыка не видно. Пропорция блока не
менялась, мозаика осталась прежней. */
.pmos .pcell.w4[data-color].no-flip .pside{
background:#1c222b;
border-color:transparent;box-shadow:none;aspect-ratio:2160/442;
position:relative;isolation:isolate}
/* Картинка лежит отдельным слоем: вписана по высоте и прижата к правому краю,
а её левый край растушёван в прозрачность, поэтому дымные волны уходят в фон
плитки без видимого стыка. Заливкой одним тоном стык не убирался: слева
картинка неровная, сверху светлее, снизу темнее. */
.pmos .pcell.w4[data-color].no-flip .pside::after{
content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
background:url("world-globe.webp") right center/auto 100% no-repeat;
/* Правка 25 сентября 2026: синева у картинок была холоднее первого экрана,
поэтому насыщенность снижена на 40 процентов — оттенок ушёл в графит.
Яркость не менялась: владелец просил не затемнять. */
filter:saturate(.6);
-webkit-mask-image:linear-gradient(to right,transparent 40%,#000 64%);
mask-image:linear-gradient(to right,transparent 40%,#000 64%)}
.pmos .pcell.w4[data-color].no-flip .pside>*{position:relative;z-index:2}
/* Правка 22 сентября 2026: ни дыхания, ни моргания. При наведении блок
зажигается: яркость плавно поднимается и держится, пока курсор на нём,
а при уходе так же плавно гаснет. */
/* Правка 25 сентября 2026: рост сделан плавным по просьбе владельца —
раньше размер менялся скачком, теперь идёт вместе со свечением. */
.pmos .pcell.w4[data-color].no-flip .pside{
transition:filter .26s ease, transform .26s ease}
@media(hover:hover) and (pointer:fine){
.pmos .pcell.w4.no-flip:hover .pside,.pmos .pcell.w4.no-flip:focus-visible .pside{
box-shadow:none;animation:none;filter:brightness(1.42)}
}
/* у кого в системе включено «меньше движения», блок зажигается без перехода */
@media(prefers-reduced-motion:reduce){
.pmos .pcell.w4[data-color].no-flip .pside{transition:none}
.pmos .pcell.w4.no-flip:hover .pside,.pmos .pcell.w4.no-flip:focus-visible .pside{
animation:none;transform:none}
}
/* Вспомогательная строка под заголовком на этом блоке белая: на тёмной
картинке серый текст читался хуже заголовка (просьба владельца). */
.pmos .pcell.w4[data-color].no-flip .pc-text{color:#ffffff}
/* Узкие экраны: картинка отключается — глобус там мельчает, а текст в
половину ширины не помещается. Возвращаем прежний тёмный фон с рамкой. */
@media(max-width:900px){
.pmos .pcell.w4[data-color].no-flip .pside{
background:#2f2f2f;border-color:var(--lime);aspect-ratio:auto;
box-shadow:0 0 24px rgba(241,100,40,.14)}
/* Картинка с 25 сентября 2026 лежит отдельным слоем, поэтому здесь её надо
гасить отдельно: снятия фона у плитки уже недостаточно. */
.pmos .pcell.w4[data-color].no-flip .pside::after{display:none}
.pmos .pcell.w4 .pface{padding:30px}
}
.pmos .pc-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
/* Иконка и заголовок — в одну строку (просьба Дмитрия 6 сентября 2026).
Высота плитки идёт строго по содержимому: никаких min-height и никакого
прижатия описания к низу — блоки самые низкие, какие позволяет текст.
Кегль при этом не уменьшался. */
.pmos .pc-head{display:flex;align-items:center}
/* ── Переворот КАРТОЧКИ при наведении ────────────────────────────────────
Вращается сама плитка — с фоном, скруглением и рамкой, а не текст внутри
неподвижной плитки (первый заход был именно такой и Дмитрий его забраковал
6 сентября 2026). Поэтому обёртка .pcell прозрачная и без отступов, а фон
несут обе стороны .pside.
Стороны лежат в одной клетке сетки, значит высота карточки = высота более
длинной из них: ничего не режется. На устройствах без мыши переворот
выключен и сразу показано полное описание — пальцем навести нельзя. */
.pmos .pcell{background:none;border:0;padding:0;perspective:1400px;transition:none}
.pmos .pcell:hover{transform:none}
.pmos .pflip{display:grid;transform-style:preserve-3d;height:100%;
transition:transform .7s cubic-bezier(.2,.7,.3,1);transition-delay:0s}
.pmos .pside{grid-area:1/1;display:flex;flex-direction:column;
background:var(--card);border:1px solid transparent;border-radius:var(--r);
padding:26px;overflow:hidden;
-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pmos .pcell[data-color="white"] .pside{background:#fff;color:#141414;border-color:transparent}
.pmos .pcell[data-color="white"] .pside .prose{color:#5a5a5a}
/* Правка 25 сентября 2026: синяя картинка заменена на тёмную, в одной манере
с оркестрацией и трансграничными. Фон плитки взят по тону новой картинки. */
.pmos .pcell[data-color="blue"] .pside{background:#161f26;color:#fff;border-color:transparent}
/* Белый текст на ярком синем выглядит тоньше тёмного на белом, поэтому в синей
плитке абзац на две точки крупнее и без прозрачности (правка 7 сентября 2026). */
.pmos .pcell[data-color="blue"] .pside .prose{color:#d6d6d6}
/* Лицо синей плитки — картинка с терминалом и банками (файл дал Дмитрий
7 сентября 2026). Снимок прижат к правому краю: там логотипы, слева
терминал уходит под текст. Чтобы текст читался, поверх лежит косой
градиент — слева плотный, к правому краю сходит на нет. */
.pmos .pcell[data-color="blue"] .pface{
background:#161f26;
position:relative;isolation:isolate;justify-content:flex-start}
/* Картинка лежит отдельным слоем, вылезающим на точку за края: при дробном
масштабе экрана у фона оставался светлый волосок по периметру, который
читался как рамка (жалоба Дмитрия 7 сентября 2026). */
.pmos .pcell[data-color="blue"] .pface::after{content:"";position:absolute;inset:-2px;z-index:0;
/* Картинка приспущена к низу: при заполнении во всю высоту заголовок
наезжал на телефон. Размер не менялся, сдвиг чистый — сверху остаётся
полоса фона плитки, а он подобран по тону самой картинки, поэтому стыка
не видно (правка 25 сентября 2026). */
/* Правка 25 сентября 2026: плитка стала цифровой витриной, картинка с
карточкой и банками заменена на окно магазина с цифровыми товарами
(файл дал владелец). Приглушение мягче, чем у трансграничных: на картинке
есть оранжевая кнопка, сильное гасило её до терракота. */
background:url("storefront-tile.webp") right bottom/auto 100% no-repeat;
filter:saturate(.78)}
/* Прозрачная рамка в одну точку обрезала слой с картинкой: по периметру
оставалась полоска фона, читавшаяся как рамка (жалоба 7 сентября 2026). */
.pmos .pcell[data-color="blue"] .pface{border-width:0}
/* Заголовок стоит в левом нижнем углу (просьба Дмитрия 7 сентября 2026),
поэтому и затемнение идёт снизу вверх, а не слева направо. Пробовали
поднять его наверх тем же днём и вернули обратно: сверху картинка плотная,
заголовок спорит с логотипами, внизу угол пустой. */
.pmos .pcell[data-color="blue"] .pface>*{position:relative;z-index:2;max-width:56%}
@media(max-width:700px){
/* В одну колонку плитка узкая: текст занимает всю ширину, а картинку
притапливаем сильнее, чтобы буквы не спорили с логотипами. */
.pmos .pcell[data-color="blue"] .pface>*{max-width:100%}
/* Кадр чуть отведён от правого края: при жёстком прижиме корзина слева
срезалась пополам (правка 25 сентября 2026). */
.pmos .pcell[data-color="blue"] .pface::after{background-position:88% bottom}
}
/* Лицо плитки оркестрации — картинка с узлом и линиями платежей (файл дал
владелец 25 сентября 2026, пятая редакция). Фон почти чёрный, текст белый.
Вуали нет: владелец запретил размывать картинку. */
.pmos .pcell[data-color="sand"] .pside{background:#1d242a;color:#fff;border-color:transparent}
.pmos .pcell[data-color="sand"] .pside .prose{color:#d6d6d6}
/* Заголовок и подпись стоят вместе в левом ВЕРХНЕМ углу (образец владельца
25 сентября 2026), а не разнесены по высоте, как на соседних плитках:
узел на картинке занимает середину и низ, текст ушёл бы на него. */
.pmos .pcell[data-color="sand"] .pface{
background:#1d242a;
position:relative;isolation:isolate;justify-content:flex-start;border-width:0}
/* Слой с картинкой вылезает на две точки за края: при дробном масштабе экрана
по периметру оставался светлый волосок, читавшийся как рамка. */
.pmos .pcell[data-color="sand"] .pface::after{content:"";position:absolute;inset:-2px;z-index:0;
/* Кадр чуть смещён: конструкция уходит правее и ниже (просьба владельца
25 сентября 2026). Небольшое укрупнение нужно, чтобы появился запас по
высоте — при простом заполнении сдвигать по вертикали некуда. */
/* Правка 25 сентября 2026: картинка заменена на новую (файл дал владелец) —
широкая полоса в одной манере с трансграничными. Она шире плитки, поэтому
стоит по высоте без укрупнения, а по горизонтали кадр сдвинут правее:
узел уходит от текста в левом верхнем углу. */
background:url("orchestration-tile.webp") 90% center/auto 120% no-repeat;
/* Здесь приглушение мягче, чем у соседей: сильное гасило и оранжевые ленты,
а это фирменный цвет. */
filter:saturate(.78)}
/* Вуаль лёгкая и только по левому краю: фон картинки и так светлый, тёмный
текст на нём читается. Плотная вуаль забеливала ленты и узел. */
.pmos .pcell[data-color="sand"] .pface>*{position:relative;z-index:2;max-width:44%}
@media(max-width:700px){
/* В одну колонку плитка узкая: текст занимает всю ширину, а картинку
притапливаем сильнее, чтобы буквы не спорили с лентами. */
.pmos .pcell[data-color="sand"] .pface>*{max-width:100%}
/* Подпись здесь идёт во всю ширину и садится ниже, поэтому картинка занимает
только низ плитки: сверху чистое поле под текст, снизу лента с узлом
целиком. Укрупнением кадра это не решалось — ленты всё равно задевали
вторую строку подписи. */
.pmos .pcell[data-color="sand"] .pface::after{
inset:auto -2px -2px -2px;height:56%;
background-size:cover;background-position:center}
}
/* Плитка киосков тёмная с лица и белая с оборота (просьба Дмитрия
7 сентября 2026). */
.pmos .pcell[data-color="dark"] .pface{background:var(--card);color:var(--ink)}
.pmos .pcell[data-color="dark"] .pface .prose{color:var(--muted)}
@media(hover:hover) and (pointer:fine){
/* Пауза перед переворотом (просьба Дмитрия 13 сентября 2026): карточка
ждёт, пока курсор действительно остановится на ней, и только потом
поворачивается. Иначе при проходе мышью через мозаику плитки хлопали
одна за другой. Пауза стоит ТОЛЬКО на наведении: когда курсор ушёл,
карточка возвращается сразу, без задержки. */
/* Блок во всю ширину не крутится (решение Дмитрия 6 сентября 2026):
там сразу полное описание. */
.pmos .pcell.no-flip:hover .pflip,.pmos .pcell.no-flip:focus-visible .pflip{transform:none}
}
/* Правка 25 сентября 2026: переворот снят по решению владельца, обратной
стороны у плиток больше нет. Прежде здесь пряталось лицо и показывался
оборот; теперь лицо единственное и прятать его нельзя. */
@media(hover:none),(pointer:coarse){
.pmos .pflip{transform:none!important}
}
/* Заголовки карточек — тем же шрифтом, что крупные заголовки сайта
(Montserrat 800), заглавными буквами. Просьба Дмитрия 6 сентября 2026. */
.pmos .pc-title{margin:0;font-family:'Montserrat',sans-serif;font-weight:900;
text-transform:uppercase;font-size:clamp(21px,1.68vw,29px);line-height:1.08;letter-spacing:-.01em}
.pmos .pc-title .nb{white-space:nowrap}
.pmos .pc-text{margin:14px 0 0}
/* Описание прижато к низу плитки (просьба Дмитрия 6 сентября 2026):
заголовок остаётся сверху, абзац уходит вниз, воздух собирается
между ними. Высота плитки от этого не растёт — ряд уже задан самой
высокой плиткой. Блок во всю ширину не трогаем: там текст рядом с
фотографией и прижимать его некуда. */
/* Обычным плиткам задана минимальная высота и отступы побольше, чтобы
заголовок отделялся от абзаца и текст дышал (просьба Дмитрия
6 сентября 2026). Описание при этом остаётся прижатым к низу, поэтому
лишняя высота уходит в просвет между заголовком и текстом. */
.pmos .pcell:not(.w4) .pside{min-height:230px;padding:30px}
.pmos .pcell:not(.w4) .pface .pc-text{margin-top:auto}
/* Плитка оркестрации — исключение: подпись идёт сразу под заголовком, а не
прижата к низу (образец владельца 25 сентября 2026). Правило стоит после
общего, иначе общее побеждает по порядку. */
.pmos .pcell[data-color="sand"] .pface .pc-text{margin-top:10px}
.pmos .pcell:not(.w4) .pc-text{padding-top:18px}
/* На обороте заголовка нет (просьба Дмитрия 6 сентября 2026) — но только там,
где есть мышь. На телефоне лицевая сторона скрыта совсем, и без этого
заголовка карточка осталась бы безымянной, поэтому там он показывается. */
/* Фотография в блоке во всю ширину: справа, во всю высоту плитки, до края. */
.pmos .pc-photo{position:absolute;top:0;right:0;bottom:0;width:330px;margin:0;overflow:hidden;border-radius:0 var(--r) var(--r) 0}
.pmos .pc-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1150px){
.pmos{grid-template-columns:repeat(2,minmax(0,1fr))}
.pmos .pcell{grid-column:span 1}
.pmos .pcell.w2,.pmos .pcell.w4{grid-column:span 2}
.pmos .pcell.w4{flex-direction:row}
.pmos .pc-photo{width:240px}
}
@media(max-width:700px){
.pmos{grid-template-columns:1fr}
.pmos .pcell,.pmos .pcell.w2,.pmos .pcell.w4{grid-column:span 1}
.pmos .pc-photo{position:static;width:auto;height:240px;margin:18px -26px -26px;border-radius:0}
}
/* Заголовок (покой): крупный капс целиком. При фокусе — исчезает. */
.tile.adv-cell .f-t{
position:absolute;inset:26px;margin:0;display:flex;align-items:center;
font-size:clamp(20px,2.2vw,30px);line-height:1.06;letter-spacing:-.015em;
opacity:1;transition:opacity .22s ease;
}
.tile.adv-cell.is-focus .f-t{opacity:0;transition:opacity .16s ease}
/* ВЕРСИЯ В: у любой ненаведённой плитки в раскрытом состоянии (она сдвинулась
или сменила пропорции) уменьшаем заголовок и переносим по словам, чтобы он
ПОЛНОСТЬЮ помещался даже в клетке 1×1 — ни один символ не режется. */
.tile.adv-cell.repacked .f-t{
inset:18px;align-items:flex-start;
font-size:clamp(20px,2.2vw,30px);line-height:1.06;letter-spacing:-.015em;
overflow-wrap:anywhere;
}
/* Описание: скрыто в покое; при фокусе появляется в самой плитке (с лёгкой задержкой). */
.adv-cell .adv-body{
position:absolute;inset:22px;display:flex;flex-direction:column;justify-content:center;
opacity:0;pointer-events:none;transition:opacity .18s ease;
}
/* Раскрытый блок: иконка сверху, описание крупным НЕ жирным шрифтом, тёмным на
белом, по левому краю, с воздухом — блок заполнен и комфортен для чтения. */
.adv-cell.is-focus .adv-body{
inset:36px;justify-content:flex-start;align-items:flex-start;
opacity:1;pointer-events:auto;transition:opacity .28s ease .16s;
}
.adv-cell .adv-body .ficon{margin-bottom:12px}
.adv-cell.is-focus .adv-body .ficon{
background:#f1f1f1;width:54px;height:54px;margin-bottom:22px;
}
.adv-cell.is-focus .adv-body .ficon svg{width:28px;height:28px;color:#141414}
.adv-cell .adv-body .prose{font-size:16px;line-height:1.5;max-width:46ch}
/* Крупное описание в раскрытом блоке (близко к заголовку, но обычного начертания). */
.adv-cell.is-focus .adv-body .prose{
font-size:clamp(20px,1.85vw,27px);line-height:1.4;font-weight:400;
color:#2b2b2b;max-width:none;text-align:left;
}
/* Кому подходит (5 плиток) — 6 колонок: 4+2 / 2+2+2 */
.who-grid{grid-template-columns:repeat(6,1fr)}
.who-grid > .tile{grid-column:span 2}
.who-lead{grid-column:span 4}
.tile .ficon{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.10);display:grid;place-items:center;margin-bottom:18px}
.tile.white .ficon{background:#f0f0f0}
.tile.lime .ficon,.tile.violet .ficon,.tile.blue .ficon{background:rgba(0,0,0,.14)}
.tile .ficon svg{width:24px;height:24px}
.tile .f-t{display:block;font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:16px;line-height:1.12;letter-spacing:-.01em;margin-bottom:10px}
/* Payment methods — заголовок слева, значки справа (правка 7 сентября 2026) */
.pm-split{display:grid;grid-template-columns:minmax(280px,34%) 1fr;
gap:clamp(24px,3vw,48px);align-items:start}
.pm-head .h2{margin:0}
/* Плитки способов оплаты уменьшены 27 сентября 2026 по просьбе владельца:
заголовок слева стал коротким, крупные плитки перевешивали. */
.pm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,168px));gap:12px;
justify-content:end}
.chip{
display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
height:76px;padding:0 14px;border-radius:18px;
background:#fff;color:#141414;border:2px solid transparent;
font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;letter-spacing:.01em;
}
/* Плитки стоят неподвижно (27 сентября 2026): подъём под курсором и тень сняты,
как и на всех кнопках сайта. Плитки ничего не открывают, движение обманывало. */
.chip .g{width:22px;height:22px;color:currentColor}
/* Значки разной пропорции: узкие упираются в высоту, широкие в ширину,
поэтому на плитке они смотрятся одного веса. */
.chip .pm-logo{height:auto;width:auto;max-height:30px;max-width:80%;
object-fit:contain;display:block}
/* Значки приведены к одному ОПТИЧЕСКОМУ весу (27 сентября 2026). Пустые поля
вокруг рисунков вырезаны в самих файлах, а высота задана каждому своя: у
широких знаков она меньше, у почти квадратных больше, чтобы площадь пятна
была одинаковой. Замер площадей делается по странице. */
.chip img[src$="mir.svg"]{max-height:22px}
.chip img[src$="visa.svg"]{max-height:24px}
.chip img[src$="googlepay.svg"]{max-height:26px}
.chip img[src$="sbp.svg"]{max-height:30px}
.chip img[src$="mastercard.svg"]{max-height:33px}
.chip img[src$="applepay.svg"]{max-height:33px}
/* Плашка «Все способы оплаты» стоит последней ячейкой в той же сетке */
.chip.more{background:var(--card);color:var(--ink);
flex-direction:column;gap:2px;text-align:center}
.chip.more .more-num{font-size:27px;line-height:1;letter-spacing:-.02em}
.chip.more .more-cap{font-size:11px;line-height:1.2;text-transform:uppercase;
letter-spacing:.02em}
@media(max-width:1000px){
.pm-split{grid-template-columns:1fr}
}
@media(max-width:820px){
.pm-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
.pm-grid{grid-template-columns:repeat(2,1fr)}
.chip{height:82px}
}
/* Коннекторы — сетка категорий подключений (7 сентября 2026) */
.conn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.conn-cell{display:flex;align-items:center;min-height:104px;padding:0 26px;
border-radius:22px;background:var(--card);color:var(--ink);
font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:clamp(17px,1.5vw,22px);line-height:1.1;letter-spacing:-.01em}
@media(max-width:900px){.conn-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.conn-grid{grid-template-columns:1fr}
.conn-cell{min-height:82px;padding:0 20px}}
/* Banks — «созвездие» с центральной карточкой Paymatic */
.bank-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,96px);gap:0;
position:relative;background:transparent;
background-image:
linear-gradient(90deg, transparent 0 calc(20% - .5px), var(--line) calc(20% - .5px) calc(20% + .5px), transparent calc(20% + .5px) calc(40% - .5px), var(--line) calc(40% - .5px) calc(40% + .5px), transparent calc(40% + .5px) calc(60% - .5px), var(--line) calc(60% - .5px) calc(60% + .5px), transparent calc(60% + .5px) calc(80% - .5px), var(--line) calc(80% - .5px) calc(80% + .5px), transparent calc(80% + .5px) 100%),
linear-gradient(180deg, transparent 0 calc(16.6667% - .5px), var(--line) calc(16.6667% - .5px) calc(16.6667% + .5px), transparent calc(16.6667% + .5px) calc(33.3333% - .5px), var(--line) calc(33.3333% - .5px) calc(33.3333% + .5px), transparent calc(33.3333% + .5px) calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px) calc(66.6667% - .5px), var(--line) calc(66.6667% - .5px) calc(66.6667% + .5px), transparent calc(66.6667% + .5px) calc(83.3333% - .5px), var(--line) calc(83.3333% - .5px) calc(83.3333% + .5px), transparent calc(83.3333% + .5px) 100%);
background-repeat:no-repeat;background-size:100% 100%}
.bank{background:transparent;
display:grid;place-items:center;padding:16px;transition:background .18s ease}
.bank:hover{background:rgba(255,255,255,.045)}
.bank svg{max-height:26px;max-width:100%;width:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.5;transition:opacity .18s ease}
.bank:hover svg{opacity:.92}
/* Подписи категорий крупнее и ярче прежних банковских (7 сентября 2026). */
.bank .bname{font-family:'Montserrat',sans-serif;font-weight:800;color:rgba(255,255,255,.72);font-size:clamp(15px,1.35vw,19px);line-height:1.15;text-align:center;transition:color .18s ease}
.bank:hover .bname{color:rgba(255,255,255,.92)}
/* Центр — тёмная карточка с белым лого и лаймовым акцентом (фокус созвездия) */
/* Столбец вместо сетки: при растянутых рядах знак и подпись расходились по
вертикали и карточка выглядела рыхлой (правка 9 сентября 2026). */
.bank-center{grid-column:2/5;grid-row:3/5;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;
margin:22px 12px;padding:14px 28px;background:#000;border:2px solid var(--lime);border-radius:var(--r-sm);
box-shadow:0 0 0 6px rgba(241,100,40,.10),0 18px 44px rgba(0,0,0,.55)}
.bank-center img{height:54px;width:auto;display:block}
/* Слово «Коннекторы» 9 сентября 2026 вынесено из центральной карточки сюда,
тихой строкой над сеткой: под знаком оно читалось как приписка к логотипу,
а не как название секции. Большого заголовка по-прежнему нет. */
.conn-kicker{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;
letter-spacing:.14em;line-height:1;text-transform:uppercase;
color:rgba(255,255,255,.5);margin-bottom:18px}
/* Final CTA */
.cta{background:#fff;color:#141414;border-radius:var(--r);padding:clamp(34px,5vw,64px);display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;position:relative;overflow:hidden}
.cta .h2{font-size:clamp(28px,4vw,52px)}
.cta .lead{color:#5a5a5a}
.cta-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta-actions .btn{width:100%;justify-content:center}
.cta .blob{position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:999px;background:rgba(0,0,0,.06)}
/* Footer */
footer.site{margin-top:26px}
.foot-card{background:var(--card);border-radius:var(--r);padding:clamp(32px,4vw,56px)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-brand p{color:var(--muted);font-size:15px;max-width:34ch;margin:16px 0 0}
.foot-col h4{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.04em;margin:0 0 14px;color:var(--muted)}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:15px;color:var(--ink);opacity:.82}
.foot-col a:hover{opacity:1}
.foot-contacts{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.foot-contacts .big{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px}
.foot-contacts .sm{font-size:13px;color:var(--muted)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;font-size:13px;color:var(--muted)}
.foot-bottom .links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
/* Значки сообществ в нижней строке подвала (26 сентября 2026). Оформление
взято у значков пунктов меню: тот же квадрат со скруглением и тот же
приглушённый тон, поэтому строка не спорит с колонками выше. */
.fb-soc{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:11px;background:rgba(255,255,255,.06);color:var(--ink);
transition:background .18s ease}
.fb-soc:hover{background:rgba(255,255,255,.14)}
.fb-soc svg{width:18px;height:18px;display:block}
/* Плашка соответствия стандарту защиты карточных данных (26 сентября 2026).
Не чужой логотип, а набранная надпись в манере сайта: значок правообладателя
ставить нельзя, пока нет самого сертификата и его файла. */
/* Знак соответствия стандарту защиты карточных данных. Лежит на светлой
плашке: знак правообладателя цветной и на чёрном фоне тонет, а перекрашивать
чужой знак нельзя. Плашка светлая ровно под знаком, вокруг воздух. */
/* Значки сообществ переехали из нижней строки в колонку «Компания», под
правовые ссылки (решение владельца 27 сентября 2026). Тот же квадрат,
что и раньше, отступ сверху равен шагу между пунктами колонки. */
.pf-soc{display:flex;gap:10px;margin-top:18px;padding-left:8px}
.fb-pci{display:inline-flex;align-items:center;justify-content:center}
.fb-pci img{height:40px;width:auto;display:block}
/* Правовые ссылки в нижней строке подвала (5 октября 2026, решение владельца).
Прежде здесь стоял знак соответствия, а соглашение с политикой лежали в
колонке «Компания» наравне с разделами сайта. Владелец перенёс их сюда и
попросил сделать тон глуше, чтобы они читались как служебная строка, а не
как ещё один пункт меню подвала. Тон взят на две ступени темнее обычного
приглушённого: он же стоит у строки с годом слева, и строка выходит ровной. */
.fb-legal-link{color:#6f6f6f;text-decoration:none;transition:color .16s ease}
.fb-legal-link:hover{color:var(--ink)}
.foot-disc{margin-top:20px;font-size:12px;line-height:1.6;color:#6f6f6f}
/* Cookie note */
/* Плашка про файлы куки собрана в пилюлю по центру снизу (просьба Дмитрия
9 сентября 2026): всё в одну строку, ширина по содержимому. */
.cookie{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
background:#fff;color:#141414;border-radius:999px;padding:9px 9px 9px 22px;
box-shadow:0 16px 44px rgba(0,0,0,.4);font-size:13px;max-width:calc(100% - 32px)}
.cookie.hide{display:none}
.cookie-in{display:flex;align-items:center;gap:18px}
.cookie a{color:var(--blue);text-decoration:underline}
.cookie .btn{flex:none;margin:0;padding:10px 20px;font-size:11px}
@media(max-width:700px){
.cookie{border-radius:24px;padding:14px 14px 14px 18px;font-size:12px}
.cookie-in{gap:14px}}
/* Reveal (с фолбэком: без скрипта всё видно) */
[data-rev]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
[data-rev].in{opacity:1;transform:none}
.no-js [data-rev]{opacity:1;transform:none}
/* Порог мозаики продуктов — 1150px, а не 1000px, как у остальных сеток.
Причина замерена: колонка мозаики это (ширина окна − 82)/4, поле текста в
ней на 48px меньше, а слову «МУЛЬТИЭКВАЙРИНГ» нужно 11,3 кегля. При 1150px
поле 219px и заголовок ещё держится (18,4px), при 1024px поле всего 183px и
заголовку пришлось бы опуститься до 16px — мельче основного текста соседей.
Ниже порога мозаика складывается в ДВЕ колонки: два квадрата встают рядом
друг с другом, остальные пять плиток — полосами на всю ширину. Клетки
заполнены целиком, порядок собирает поток с плотной упаковкой (dense): без
dense квадрат в столбце 1 остался бы с пустой клеткой справа, потому что
следующая за ним плитка широкая и в одну клетку не влезает.
Высокая плитка тут перестаёт быть высокой (span 2 по столбцам, высота по
тексту). Если оставить ей 1×2, её высоту задавали бы два соседних квадрата,
а собственного текста у неё на такую высоту нет — получалась бы почти пустая
тёмная простыня в пол-экрана. Заодно она берёт раскладку широкой плитки:
иконка столбцом слева, заголовок и текст справа.
Описание в квадратах возвращается: плитка здесь вдвое шире, место есть. */
@media(max-width:1149px){
.prod-grid{
grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;
grid-auto-rows:minmax(200px,auto);grid-auto-flow:row dense;
}
.prod-grid > .tile{grid-area:auto}
.prod-grid > .pc-tall,.prod-grid > .pc-wide{grid-column:span 2}
.prod-grid > .pc-sq{grid-column:span 1}
.prod-grid .pc-tall{
display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-content:center;
}
.prod-grid .pc-tall .ficon{grid-row:1/3;margin-bottom:0}
.prod-grid .pc-tall .h3{grid-column:2;font-size:clamp(18px,1.85vw,24px)}
.prod-grid .pc-tall .prose{grid-column:2;font-size:15px}
.prod-grid .pc-sq .prose{display:block;font-size:15px;line-height:1.5}
}
@media(max-width:1000px){
.who-grid{grid-template-columns:repeat(2,1fr)}
.who-grid > .tile{grid-column:span 1 !important}
.who-lead{grid-column:span 2 !important}
.bank-grid{grid-template-rows:repeat(6,86px)}
.cta{grid-template-columns:1fr}
.foot-top{grid-template-columns:1fr 1fr}
/* Планшет и уже: эффект выключен. Один столбец, статично:
заголовок обычного размера И текст показаны сразу, без расхлопа и переезда. */
.adv-grid{grid-template-columns:1fr;grid-template-rows:auto;grid-auto-rows:auto;grid-auto-flow:row}
.adv-cell,.adv-cell.sh-tall,.adv-cell.sh-wide,.adv-cell.is-focus,.adv-cell.is-shrunk{
grid-column:auto;grid-row:auto;transition:none!important;z-index:auto;box-shadow:none!important;
opacity:1!important;width:auto!important;height:auto!important;overflow:visible!important;
justify-self:auto!important;align-self:auto!important;border-radius:var(--r)!important}
.tile.adv-cell .f-t,.tile.adv-cell.is-focus .f-t,.tile.adv-cell.is-shrunk .f-t{
position:static;inset:auto;display:block;font-size:18px;line-height:1.15;
letter-spacing:-.01em;margin-bottom:12px;opacity:1!important}
.adv-cell .adv-body,.adv-cell.is-focus .adv-body,.adv-cell.is-shrunk .adv-body{
position:static;inset:auto;opacity:1!important;pointer-events:auto}
.adv-cell:not(.sh-tall):not(.sh-wide) .adv-body .ficon{display:block}
}
@media(max-width:820px){
.nav-links,.topbar{display:none}
.burger{display:grid}
.nav-right .icon-btn.search{display:none}
.hero-graphic{display:none}
.hero-1 .hero-inner,.hero-2 .hero-inner{max-width:100%}
}
@media(max-width:640px){
.steps{grid-template-columns:1fr}
.who-grid{grid-template-columns:1fr}
.who-grid > .tile,.who-lead{grid-column:span 1 !important}
/* Телефон: мозаика продуктов встаёт в один столбец, высота каждой плитки — по
её тексту. Высокая плитка перестаёт быть высокой (иначе на телефоне она
растянулась бы на пол-экрана пустотой), широкая — широкой. */
.prod-grid{grid-template-columns:1fr;grid-auto-rows:auto;grid-auto-flow:row}
.prod-grid > .tile{grid-area:auto;grid-column:auto;grid-row:auto}
/* Телефон: у высокой плитки поля как у остальных — на узком экране широкие
поля съедали строку заголовка, и длинное слово упиралось в край. */
.prod-grid .pc-tall{padding:24px 24px 78px}
/* Телефон: у широкой и высокой плитки иконка возвращается НАД заголовком —
столбцом слева она отнимала бы у текста 74px из трёхсот. */
.prod-grid .pc-wide,.prod-grid .pc-tall{display:flex;flex-direction:column;justify-content:center}
.prod-grid .pc-wide .ficon,.prod-grid .pc-tall .ficon{margin-bottom:18px}
/* Заголовок на самых узких экранах: слово «САМООБСЛУЖИВАНИЯ» при 22px
занимает 232px, а поле текста на экране 320px всего 232px — впритык, любая
доля пиксела режет слово. Условие «влезает» это 10,6 × кегль ≤ ширина окна
− 88; 5,4vw держит его с запасом на всех ширинах до 390px, дальше работает
потолок 21px. */
.prod-grid .pc-tall .h3,.prod-grid .pc-wide .h3,.prod-grid .pc-sq .h3{font-size:clamp(17px,5.4vw,21px)}
/* Телефон: описание показываем во всех плитках, включая бывшие квадраты. */
.prod-grid .pc-sq .prose{display:block;font-size:15px;line-height:1.5}
.bank-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:84px;background-image:none}
.bank-grid .bank{grid-column:auto!important;grid-row:auto!important;border:1px solid var(--line)}
.bank .bname{font-size:13px}
.bank-center{grid-column:1/-1!important;grid-row:auto!important;margin:0 0 10px;order:-1;border-radius:var(--r-sm)}
.foot-top{grid-template-columns:1fr}
.hero-slide{padding:26px 22px 70px}
}
/* ============================================================
Внутренние страницы (9 сентября 2026)
Чёрный фон страницы, по центру белый блок с текстом.
Раскладка Дмитрия: описание услуги это просто текст.
============================================================ */
.doc-wrap{padding:22px 0 44px}
.doc{max-width:none;margin:0 auto;background:#fff;color:#141414;
border-radius:var(--r);padding:clamp(28px,4.6vw,68px)}
.doc .crumbs{font-size:13px;color:#8a8a8a;margin:0 0 20px}
/* Крошки не подчёркиваются: общее правило страниц-документов подчёркивает
любую ссылку, и «Главная» приезжала с чертой (правка 14 сентября 2026). */
.doc .crumbs a{color:#8a8a8a;text-decoration:none;transition:color .14s ease}
.doc .crumbs a:hover{color:#141414}
.doc .crumbs .sep{margin:0 8px;opacity:.6}
.doc h1{font-family:'Montserrat',sans-serif;font-weight:900;text-transform:uppercase;
font-size:clamp(28px,3.8vw,48px);line-height:1;letter-spacing:-.01em;margin:0 0 18px}
.doc .doc-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:#4a4a4a;margin:0 0 8px}
.doc h2{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:clamp(18px,2vw,25px);line-height:1.05;letter-spacing:-.01em;margin:36px 0 14px}
.doc p{margin:0 0 14px;color:#3a3a3a;font-size:16.5px;line-height:1.62}
.doc ul{margin:0 0 16px;padding-left:20px;color:#3a3a3a;font-size:16.5px;line-height:1.62}
.doc li{margin-bottom:8px}
.doc li::marker{color:#c7c7c7}
.doc strong{color:#141414;font-weight:700}
.doc a{color:#141414;text-decoration:underline;text-underline-offset:3px}
/* кнопка внутри белого блока это тоже ссылка, подчёркивание ей не нужно */
.doc a.btn{text-decoration:none}
.doc .doc-foot{margin-top:38px;padding-top:24px;border-top:1px solid #ececec;
display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.doc .doc-foot .btn{background:#141414;color:#fff}
/* Единственный блок под таблицей тарифов: приглашение задать вопрос.
Лежит на своей подложке, чтобы не читался как служебная строка подвала. */
.doc .ask{margin-top:44px;padding:30px 34px;border-radius:var(--r-sm);background:#f4f4f4;
display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.doc .ask-tx{display:flex;flex-direction:column;gap:7px;min-width:0}
.doc .ask-h{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:clamp(17px,1.7vw,22px);line-height:1.1;letter-spacing:-.01em;color:#141414}
.doc .ask-d{font-size:16px;line-height:1.55;color:#5a5a5a}
.doc .ask-act{margin-left:auto;display:flex;align-items:center;gap:12px}
.doc .ask-act .btn{background:#141414;color:#fff}
@media(max-width:640px){
.doc .ask{padding:24px 20px;gap:18px}
.doc .ask-act{margin-left:0;width:100%}
.doc .ask-act .btn{width:100%;justify-content:center}}
@media(max-width:640px){
.doc{border-radius:var(--r-sm)}
.doc p,.doc ul{font-size:16px}}
/* Оценка страницы: «Статья помогла разобраться?» и два пальца, справа в одну
линию с кнопкой (просьба Дмитрия 9 сентября 2026). Выбор пока запоминается
в самом браузере, отправлять его пока некуда. */
.doc-vote{margin-left:auto;display:flex;align-items:center;gap:10px}
.doc-vote .dv-q{font-size:14px;color:#7a7a7a}
.doc-vote .dv-b{width:38px;height:38px;border-radius:11px;border:1px solid #e4e4e4;background:#fff;
color:#5a5a5a;display:grid;place-items:center;cursor:pointer;padding:0;
transition:background .14s ease,color .14s ease,border-color .14s ease}
.doc-vote .dv-b svg{width:19px;height:19px}
.doc-vote .dv-b:hover{background:#f4f4f4;color:#141414;border-color:#d8d8d8}
.doc-vote .dv-b[data-vote="down"] svg{margin-top:2px}
.doc-vote .dv-b.is-picked{background:#141414;border-color:#141414;color:#fff}
.doc-vote .dv-b[disabled]{cursor:default}
.doc-vote .dv-b[disabled]:not(.is-picked){opacity:.45}
.doc-vote .dv-thanks{order:-1;font-size:14px;color:#7a7a7a}
@media(max-width:720px){
.doc-vote{margin-left:0;width:100%;flex-wrap:wrap}}
/* ============================================================
Страница тарифов (9 сентября 2026)
Плата за систему берётся вперёд за год, приём платежей процентом.
============================================================ */
.price-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:#4a4a4a;margin:0 0 34px}
.price-h{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:clamp(18px,2vw,25px);line-height:1.05;letter-spacing:-.01em;margin:44px 0 18px}
.price-h:first-of-type{margin-top:8px}
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.price-card{border:1px solid #e6e6e6;border-radius:20px;padding:26px 24px;display:flex;flex-direction:column}
.price-card.is-top{border-color:#141414}
.pr-name{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:19px;letter-spacing:.01em;color:#141414;margin:0}
.pr-sub{font-size:14px;color:#7a7a7a;margin:6px 0 0}
.pr-num{font-family:'Montserrat',sans-serif;font-weight:900;font-size:34px;line-height:1;
color:#141414;margin:20px 0 4px}
.pr-num .pr-unit{font-size:15px;font-weight:700;color:#7a7a7a;margin-left:8px}
.pr-tbd{color:#9a9a9a}
.pr-list{list-style:none;margin:20px 0 0;padding:0}
.pr-list li{position:relative;padding-left:26px;margin-bottom:10px;font-size:15.5px;line-height:1.5;color:#3a3a3a}
.pr-list li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:6px;
border-left:1.8px solid #141414;border-bottom:1.8px solid #141414;transform:rotate(-45deg)}
.pr-foot{margin-top:auto;padding-top:22px}
.pr-foot .btn{width:100%;justify-content:center;background:#141414;color:#fff}
/* Значок пояснения и всплывающая подсказка (9 сентября 2026). Само окошко лежит
в конце страницы, а не внутри таблицы: у обёртки таблицы включена прокрутка, и
внутри неё окошко обрезалось бы по краю. Открывается наведением, а на телефоне
нажатием, потому что наведения там нет. */
.cmp .tip{margin-left:8px;width:18px;height:18px;padding:0;border:0;background:none;
color:#b4b4b4;cursor:pointer;vertical-align:-3px;display:inline-grid;place-items:center;
transition:color .14s ease}
.cmp .tip svg{width:16px;height:16px}
/* значок держим на одной строке с последним словом названия, иначе он срывается вниз
и висит один под текстом (замечание Дмитрия 10 сентября 2026) */
.cmp .nb{white-space:nowrap}
.cmp .tip:hover,.cmp .tip.is-on{color:#141414}
.cmp .tip:focus-visible{outline:2px solid #141414;outline-offset:2px;border-radius:999px}
.tip-pop{position:fixed;z-index:70;max-width:340px;background:#141414;color:#fff;
border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.5;
box-shadow:0 12px 30px rgba(0,0,0,.22);pointer-events:none;opacity:0;
transform:translateY(4px);transition:opacity .13s ease,transform .13s ease}
.tip-pop.is-on{opacity:1;transform:translateY(0)}
@media(max-width:640px){.tip-pop{max-width:calc(100vw - 32px)}}
/* Единственная строка под таблицей тарифов: сноска про кассу, наклонным шрифтом
со звёздочкой. Всё остальное под таблицей убрано 9 сентября 2026 по указанию
Дмитрия, включая блок «Приём платежей» со ставками «Уточняется». */
.doc .pr-star{margin:44px 0 0;font-style:italic;font-size:15px;line-height:1.6;color:#6f6f6f;
max-width:900px}
.pr-rows{margin-top:16px;border-top:1px solid #ececec}
.pr-row{display:flex;align-items:baseline;gap:16px;padding:14px 2px;border-bottom:1px solid #ececec}
.pr-row .pr-what{font-size:16px;color:#3a3a3a}
.pr-row .pr-val{margin-left:auto;font-family:'Montserrat',sans-serif;font-weight:800;
font-size:16px;color:#141414;white-space:nowrap}
.pr-note{font-size:14px;line-height:1.5;color:#7a7a7a;margin:16px 0 0}
@media(max-width:760px){
.price-grid{grid-template-columns:1fr}
.pr-row{flex-wrap:wrap;gap:4px}
.pr-row .pr-val{margin-left:0}}
/* Сравнение тарифов (9 сентября 2026, переделано под читаемость).
Колонки тарифов лежат на своей подложке, «Бренд» выделен рамкой,
строки разведены через одну, значения по центру колонки. */
.cmp-wrap{overflow-x:auto;margin:0 -6px;padding:0 6px 4px}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:860px}
.cmp col.c-what{width:34%}
.cmp col.c-plan{width:22%}
.cmp thead th{padding:20px 18px 22px;vertical-align:top;text-align:center;background:#f4f4f4}
.cmp thead th:first-child{background:transparent}
/* Левая ячейка шапки пустовала. Теперь это заголовок всей таблицы, выровненный по верху
вместе с названиями тарифов, а под ним общая для обоих тарифов оговорка про год. Подпись
«в год» из колонок убрана, чтобы не повторять одно и то же дважды. Прижатая к низу
строчка на уровне кнопок читалась не как заголовок, а как случайный текст. */
/* Переключатель срока (9 сентября 2026). Пилюля на два положения, шесть и двенадцать
месяцев. Цены обоих тарифов и цены добавок заданы в разметке парами, скрипт только
подставляет нужную. */
/* Переключатель срока живёт над таблицей, в одной строке с заголовком страницы: он
управляет ценами обоих тарифов, а не левым столбцом, поэтому внутри таблицы ему не место.
Форма это две вкладки без подложки, выбранная подчёркнута. Плашки-пилюли забракованы. */
/* Заголовок слева, выбор срока по центру трёх колонок тарифов. Центр считает скрипт
по самой таблице: колонки распределяются по содержимому, долями в процентах его не
поймать (просьба Дмитрия 10 сентября 2026). */
.price-top{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
gap:24px;flex-wrap:wrap;margin-bottom:6px}
.price-top h1{margin:0}
.price-top .term{position:absolute;right:auto;bottom:0;
left:var(--plans-center,100%);transform:translateX(-50%)}
/* таблица не помещается и прокручивается: возвращаем срок в поток, справа от заголовка */
.price-top.is-narrow .term{position:static;transform:none}
.term{display:inline-flex;gap:26px;padding-bottom:4px}
.term-b{border:0;background:none;cursor:pointer;padding:0 0 8px;position:relative;
font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;color:#a0a0a0;
transition:color .16s ease}
.term-b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:#141414;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.term-b:hover{color:#141414}
.term-b.is-on{color:#141414}
.term-b.is-on::after{transform:scaleX(1)}
.term-b:focus-visible{outline:2px solid #141414;outline-offset:3px}
@media(max-width:640px){.term{gap:18px}.term-b{font-size:15px}}
.cmp thead th.is-hl{background:#efefef}
.cmp thead th:nth-child(2){border-radius:18px 0 0 0}
.cmp thead th:last-child{border-radius:0 18px 0 0}
.cmp .cmp-plan{font-family:'Manrope',sans-serif;font-weight:500;text-transform:uppercase;
font-size:14px;letter-spacing:.1em;color:#7a7a7a;display:block}
.cmp .cmp-banks{display:block;font-family:'Manrope',sans-serif;font-weight:500;font-size:13px;
line-height:1.35;color:#7a7a7a;margin-top:6px;min-height:36px}
.cmp .cmp-price{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:26px;
line-height:1.1;color:#141414;margin-top:12px}
.cmp .cmp-price .u{display:block;font-size:12px;font-weight:700;color:#8a8a8a;margin-top:6px;
text-transform:uppercase;letter-spacing:.06em}
.cmp .cmp-price.pr-tbd{color:#a6a6a6;font-size:20px}
/* Кнопки тарифов не залиты чёрным: три чёрные плашки в шапке перетягивали на себя всё
внимание и забивали цены. Белая заливка с чёрной обводкой, заливка приходит по наведению. */
.cmp thead .btn{margin-top:16px;width:100%;justify-content:center;background:#fff;color:#141414;
border:1.5px solid #141414;transition:background .16s ease,color .16s ease}
.cmp thead .btn:hover{background:#141414;color:#fff}
/* Пробный период: простая строка под таблицей, без плашки и подложки */
.doc .try{margin:20px 0 0;font-size:16px;line-height:1.5;color:#141414}
.cmp tbody td{padding:15px 18px;font-size:16px;color:#141414;text-align:center;
border-bottom:1px solid #ededed;background:#fbfbfb}
.cmp tbody td.is-hl{background:#f4f4f4}
.cmp tbody td:first-child{text-align:left;color:#3f3f3f;background:transparent;
font-size:15.5px;line-height:1.45;padding-left:2px}
.cmp tbody tr:nth-child(even) td:first-child{background:transparent}
.cmp tbody tr.cmp-group td{background:transparent;border-bottom:0;padding:30px 2px 8px;
text-align:left;font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:12px;letter-spacing:.08em;color:#141414}
.cmp tbody tr.cmp-group + tr td{border-top:1px solid #ededed}
/* Подписи разделов убраны 9 сентября 2026 по предложению Дмитрия: при пятнадцати строках
группы читаются и просто по отступу, а раздел из одной строки с подписью выглядел пусто.
Пустой разделитель держит тот же отступ, что держала подпись. */
.cmp tbody tr.cmp-gap td{background:transparent;border-bottom:0;padding:0;height:26px}
.cmp tbody tr.cmp-gap + tr td{border-top:1px solid #ededed}
.cmp tbody tr.cmp-gap:first-child td{height:0}
.cmp tbody tr:last-child td:nth-child(2){border-radius:0 0 0 18px}
.cmp tbody tr:last-child td:last-child{border-radius:0 0 18px 0}
.cmp .yes{display:inline-grid;place-items:center;width:22px;height:22px;color:#141414}
.cmp .yes svg{width:18px;height:18px;stroke-width:2}
.cmp .no{display:inline-grid;place-items:center;width:22px;height:22px;
color:#c4c4c4;font-size:17px;line-height:1}
.cmp .val{font-family:'Manrope',sans-serif;font-weight:400;font-size:16px;color:#141414}
.cmp .val.pr-tbd{color:#a6a6a6;font-size:14px}
.cmp .val-note{font-size:15px;font-weight:400;color:#3f3f3f}
@media(max-width:640px){
.cmp thead th{padding:16px 12px 18px}
.cmp tbody td{padding:13px 12px;font-size:15px}}
/* Счётчики прямо в таблице сравнения (9 сентября 2026). Отдельного блока
с калькулятором больше нет: он повторял ту же таблицу второй раз. Число
в клетке показывает итоговое количество, а не количество добавок, ниже
базового значения тарифа минус не опускается. Добавки живут только в
тарифе «Про»: в «Старте» надстроек нет, иначе переход на «Про» перестаёт
быть выгодным и никто на него не переходит. Цена добавки задана в разметке
атрибутом data-unit, скрипт только складывает. */
.cmp .cnt{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.cmp .cnt-b{width:30px;height:30px;border-radius:9px;border:1px solid #dcdcdc;background:#fff;
color:#141414;font-size:17px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;
transition:background .14s ease,border-color .14s ease}
.cmp .cnt-b:hover{background:#ececec;border-color:#c8c8c8}
.cmp .cnt-b[disabled]{opacity:.35;cursor:default}
.cmp .cnt-b[disabled]:hover{background:#fff;border-color:#dcdcdc}
.cmp .cnt-n{min-width:24px;text-align:center;font-family:'Manrope',sans-serif;
font-weight:500;font-size:17px;color:#141414}
/* Липкая панель с ценами (9 сентября 2026). Нижней строки итога больше нет, вся
сумма живёт здесь: название тарифа, общая сумма и кнопка. Появляется, когда шапка
таблицы ушла за верх окна, поэтому в момент, когда видны счётчики, панель всегда
на экране. Тона колонок повторяют шапку таблицы, ширины колонок задаёт скрипт по
самой таблице. На узких окнах панель во всю ширину и без пустой левой колонки:
там таблица едет вбок и совпасть с колонками всё равно нельзя. */
/* Фон контейнера чёрный, хотя его не видно: ячейки перекрывают панель целиком,
замер красным это подтвердил. Чёрный нужен браузеру — Safari 26 красит верх
своего окна цветом ближайшего прикреплённого элемента, а прозрачный давал
серую стеклянную полосу над сайтом (замечание Дмитрия 14 сентября 2026). */
.cmp-stick{position:fixed;top:0;left:0;z-index:55;opacity:0;transform:translateY(-100%);
background:#000;
transition:opacity .16s ease,transform .16s ease;pointer-events:none;
box-shadow:0 8px 22px rgba(0,0,0,.09)}
.cmp-stick.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.cmp-stick .cs-in{display:flex;align-items:stretch}
.cmp-stick .cs-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:9px;padding:12px 18px;box-sizing:border-box;background:#f4f4f4;text-align:center}
.cmp-stick .cs-cell.is-hl{background:#e9e9e9}
.cmp-stick .cs-gap{background:#fff;flex:none}
.cmp-stick .cs-note-cell{align-items:center;justify-content:center;padding:0 18px}
.term-sm{gap:20px;padding-bottom:0}
.term-sm .term-b{font-size:14px;padding-bottom:6px}
.cmp-stick.is-narrow .cs-note-cell{display:none}
.cmp-stick .cs-tx{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.cmp-stick .cs-name{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:11px;letter-spacing:.06em;color:#8a8a8a}
.cmp-stick .cs-sum{font-family:'Montserrat',sans-serif;font-weight:900;font-size:21px;
color:#141414;margin-top:4px;white-space:nowrap}
.cmp-stick .cs-note{font-size:11px;color:#8a8a8a;margin-top:4px;line-height:1.3;white-space:nowrap}
.cmp-stick .cs-note:empty{display:none}
/* в липкой полосе кнопки того же вида, что и в шапке таблицы */
.cmp-stick .btn{background:#fff;color:#141414;border:1.5px solid #141414;white-space:nowrap;
flex:none;padding:10px 14px;font-size:12px;transition:background .16s ease,color .16s ease}
.cmp-stick .btn:hover{background:#141414;color:#fff}
.cmp-stick.is-narrow{width:100%}
.cmp-stick.is-narrow .cs-gap{display:none}
.cmp-stick.is-narrow .cs-cell{flex:1 1 50%;gap:8px;padding:10px 12px}
.cmp-stick.is-narrow .cs-sum{font-size:18px}
.cmp-stick.is-narrow .btn{width:100%;justify-content:center}
@media(max-width:640px){
.cmp .cnt{gap:7px}
.cmp .cnt-b{width:27px;height:27px}
.cmp tbody tr.cmp-total .ct-val{font-size:20px}}
/* ══════════════════════════════════════════════════════════════════════
Страница решения «Мультиэквайринг», третья сборка (10 сентября 2026).
Собрана по образцу, который дал владелец: страница финансовых сервисов
t2. Оттуда взяты приёмы, а не содержание.
Что взято у образца.
Крупная белая зона со скруглёнными углами лежит на чёрном фоне сайта.
Заголовок стоит по центру и набран ОБЫЧНЫМ регистром, не прописными:
у образца весь первый экран строчными, и именно это отличает живую
рекламную страницу от справочника.
Плитки несут короткий заголовок и предметный рисунок, а пояснений в
них либо одна строка, либо нет вовсе.
Чего здесь нет и не будет. Схем из прямоугольников, кружков и стрелок
между ними: владелец запретил их навсегда, они выдают машинную работу.
Смысл передаётся словами, раскладкой и предметными рисунками.
══════════════════════════════════════════════════════════════════════ */
/* Белая зона. Живёт прямо на чёрном фоне страницы, углы крупные. */
.mq{padding:0 0 26px}
.mq-sheet{background:#fff;color:#1f2229;border-radius:34px;
padding:clamp(30px,4vw,62px) clamp(20px,3.4vw,52px) clamp(34px,4vw,58px)}
.mq-sheet+.mq-sheet{margin-top:14px}
.mq-crumbs{font-size:13px;color:#8a8d94;margin:0 0 clamp(24px,3vw,44px)}
.mq-crumbs a{transition:color .14s ease}
.mq-crumbs a:hover{color:#1f2229}
.mq-crumbs .sep{margin:0 8px;opacity:.6}
/* Заголовок страницы. Обычный регистр, по центру, как в образце. */
.mq-title{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:none;
font-size:clamp(30px,3.6vw,50px);line-height:1.06;letter-spacing:-.015em;
text-align:center;color:#1f2229;margin:0}
.mq-say{max-width:60ch;margin:18px auto 0;text-align:center;
font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:#5a5e66}
/* Заголовок раздела внутри белой зоны. Тоже обычным регистром. */
.mq-h{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:none;
font-size:clamp(23px,2.5vw,34px);line-height:1.1;letter-spacing:-.015em;
color:#1f2229;margin:0 0 8px}
.mq-h.is-mid{text-align:center}
.mq-say.is-tight{margin-top:10px}
/* ── Плитки возможностей ────────────────────────────────────────────────
Ровно как в образце: слева короткий заголовок, справа предметный
рисунок, пояснение одной строкой под заголовком. Подложка светло-серая,
на белом листе она читается как отдельная карточка без обводки. */
.mq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;
margin-top:clamp(26px,3vw,44px)}
.mq-cell{background:#f4f5f7;border-radius:22px;padding:30px 32px;
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
min-height:196px;transition:background .18s ease}
.mq-cell:hover{background:#eeeff2}
.mq-ct{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:none;
font-size:clamp(19px,1.7vw,24px);line-height:1.16;letter-spacing:-.01em;color:#1f2229;
margin:0}
.mq-cd{margin:10px 0 0;font-size:17px;line-height:1.45;color:#5a5e66}
.mq-pic{flex:none;width:168px;height:118px;display:grid;place-items:center;color:#1f2229}
.mq-pic svg{width:100%;height:100%}
/* Оранжевый из значков четырёх плиток убран по решению владельца 11 сентября.
Значки строго чёрно-белые: плотная заливка тёмная, мягкая светло-серая,
линии тёмные. На чёрной плитке всё переворачивается. */
.mq-pic .fill{fill:#1f2229}
.mq-pic .fill-soft{fill:#eceef1}
/* Знак рубля лежит на плотной заливке, поэтому он всегда противоположного ей
цвета. Раньше цвет стоял прямо в рисунке и на чёрной плитке пропадал. */
.mq-pic .ruble{stroke:#fff}
.mq-cell.is-dark .mq-pic .fill{fill:#fff}
.mq-cell.is-dark .mq-pic .fill-soft{fill:#3a3e46}
.mq-cell.is-dark .mq-pic .ruble{stroke:#1f2229}
.mq-pic .ln{fill:none;stroke:#1f2229;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.mq-pic .ln-thin{fill:none;stroke:#9aa0aa;stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round}
/* Значки четырёх плиток первого экрана уменьшены владельцем 12 сентября 2026:
в прежнем размере они перетягивали на себя внимание с текста. Правило
целится только в плитки, значки в остальных блоках не тронуты. */
.mq-cell .mq-pic{width:126px;height:88px}
/* Плитка на всю ширину: заголовок крупнее, рисунок больше. */
.mq-cell.is-wide{grid-column:1 / -1;min-height:186px;padding:30px 34px}
.mq-cell.is-wide .mq-ct{font-size:clamp(20px,1.9vw,27px)}
.mq-cell.is-wide .mq-pic{width:142px;height:88px}
/* Тёмная плитка среди светлых: ею отмечено то, что отличает нас от рынка. */
.mq-cell.is-dark{background:#1f2229;color:#fff}
.mq-cell.is-dark:hover{background:#272b34}
.mq-cell.is-dark .mq-ct{color:#fff}
.mq-cell.is-dark .mq-cd{color:#b9bdc5}
.mq-cell.is-dark .mq-pic{color:#fff}
.mq-cell.is-dark .mq-pic .ln{stroke:#fff}
.mq-cell.is-dark .mq-pic .ln-thin{stroke:#7d838d}
.mq-cell.is-dark .mq-pic .fill-soft{fill:#5a2c14}
/* ── Две модели рынка. Раньше здесь стояли цепочки кружков со стрелками,
теперь разницу несут только слова и раскладка: два столбца списков,
наш выделен тёмной подложкой. */
.mq-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(22px,2.6vw,36px)}
.mq-col{background:#f4f5f7;border-radius:22px;padding:28px 30px}
.mq-col.is-ours{background:#1f2229;color:#fff}
.mq-cap{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(18px,1.7vw,24px);
line-height:1.1;letter-spacing:-.01em;color:#1f2229}
.mq-col.is-ours .mq-cap{color:#fff}
.mq-note{display:block;margin-top:7px;font-size:15px;color:#8a8d94}
/* Оранжевый в тёмном столбце убран по решению владельца 11 сентября 2026:
подпись и маркеры списка набраны приглушённым светлым. */
.mq-col.is-ours .mq-note{color:#9aa0aa}
.mq-list{list-style:none;padding:0;margin:20px 0 0}
.mq-list li{position:relative;padding-left:22px;margin-bottom:12px;font-size:17px;
line-height:1.45;color:#3d424b}
.mq-list li:last-child{margin-bottom:0}
.mq-list li::before{content:'';position:absolute;left:0;top:9px;width:10px;height:2px;
border-radius:2px;background:#c3c7ce}
.mq-col.is-ours .mq-list li{color:#dfe2e7}
.mq-col.is-ours .mq-list li::before{background:#6f757f}
/* ── Считалка. Владелец просил сохранить её как есть по работе, поэтому
поля и подписи прежние, изменено только оформление под образец. */
.mq-calc{margin-top:clamp(22px,2.6vw,36px);background:#f4f5f7;border-radius:22px;
padding:clamp(24px,2.8vw,36px)}
.mq-calc .cf{display:flex;flex-direction:column;gap:8px}
.mq-cin{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.mq-calc .cf-l{font-size:15px;color:#7a7e86}
.mq-calc .cf-i{font-family:'Manrope',sans-serif;font-weight:700;font-size:19px;color:#1f2229;
padding:14px 16px;border:1px solid #dfe1e5;border-radius:14px;background:#fff;width:100%;
transition:border-color .14s ease}
.mq-calc .cf-i:focus{outline:none;border-color:#1f2229}
/* Подсказка про НДС стоит внутри самого поля справа: НДС начисляется сверху,
поэтому итоговую ставку показываем рядом со значением и пересчитываем при
вводе. Полю добавлен отступ справа, чтобы длинное число не заезжало под неё. */
.mq-calc .cf-box{position:relative;display:block}
.mq-calc .cf-i.has-vat{padding-right:150px}
.mq-calc .cf-vat{position:absolute;right:16px;top:50%;transform:translateY(-50%);
font-size:14px;line-height:1;color:#8a8d94;pointer-events:none;white-space:nowrap}
.mq-cout{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
.mq-cout .co-i{padding:20px 24px;border-radius:18px;background:#fff}
/* Плитка годовой экономии: оранжевый убран владельцем 12 сентября 2026,
подложка чёрная. Карточки на странице только белые или чёрные. */
.mq-cout .co-i.is-year{background:#000}
.mq-cout .co-l{display:block;font-size:15px;color:#7a7e86;margin-bottom:8px}
.mq-cout .co-i.is-year .co-l{color:rgba(255,255,255,.85)}
.mq-cout .co-v{display:block;font-family:'Montserrat',sans-serif;font-weight:800;
font-size:clamp(27px,3vw,38px);line-height:1;letter-spacing:-.02em;color:#1f2229}
.mq-cout .co-i.is-year .co-v{color:#fff}
.mq-cnote{margin:16px 0 0;font-size:15px;line-height:1.45;color:#8a8d94}
/* ── Цена, сроки, закон. Три коротких ответа крупным словом. ─────────── */
.mq-three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
margin-top:clamp(22px,2.6vw,36px)}
.mq-card{background:#f4f5f7;border-radius:22px;padding:28px 30px}
.mq-kicker{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:#1f2229}
.mq-big{display:block;margin-top:12px;font-family:'Montserrat',sans-serif;font-weight:800;
font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.02em;color:var(--lime)}
.mq-unit{display:block;margin-top:8px;font-size:15px;line-height:1.4;color:#8a8d94}
.mq-p{margin:14px 0 0;font-size:17px;line-height:1.5;color:#5a5e66}
.mq-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;
font-size:17px;color:#1f2229;transition:gap .16s ease}
.mq-link svg{width:17px;height:17px;color:var(--lime)}
.mq-link:hover{gap:12px}
.mq-steps{list-style:none;counter-reset:mq;padding:0;margin:14px 0 0}
.mq-steps li{counter-increment:mq;position:relative;padding-left:34px;margin-bottom:14px;
font-size:17px;line-height:1.45;color:#5a5e66}
.mq-steps li:last-child{margin-bottom:0}
.mq-steps li::before{content:counter(mq);position:absolute;left:0;top:1px;width:25px;height:25px;
border-radius:999px;background:#e4e6ea;color:#1f2229;font-family:'Montserrat',sans-serif;
font-weight:800;font-size:13px;display:grid;place-items:center}
.mq-steps b{display:block;font-weight:700;font-size:18px;color:#1f2229;margin-bottom:3px}
/* ── Вопросы и ответы ────────────────────────────────────────────────── */
.mq-faq{margin-top:clamp(20px,2.4vw,32px);border-top:1px solid #e7e9ec}
.mq-q{border-bottom:1px solid #e7e9ec}
.mq-q>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
padding:18px 0;font-size:18px;line-height:1.4;color:#1f2229;transition:color .14s ease}
.mq-q>summary::-webkit-details-marker{display:none}
/* Наведение: оранжевый убран владельцем 12 сентября 2026. Отзыв на
наведение остался, но чёрно-белый: строка пригасает до серого. */
.mq-q>summary:hover{color:#5c6167}
.mq-sign{margin-left:auto;position:relative;width:15px;height:15px;flex:0 0 15px}
.mq-sign::before,.mq-sign::after{content:'';position:absolute;background:#9aa0aa;
transition:opacity .16s ease,background .14s ease}
.mq-sign::before{left:0;top:6.5px;width:15px;height:2px}
.mq-sign::after{top:0;left:6.5px;width:2px;height:15px}
.mq-q[open] .mq-sign::after{opacity:0}
.mq-q>summary:hover .mq-sign::before,.mq-q>summary:hover .mq-sign::after{background:#5c6167}
.mq-a{padding:0 44px 18px 0}
.mq-a p{margin:0;font-size:17px;line-height:1.55;color:#5a5e66}
/* ── Тёмная полоса с призывом. У образца тёмная зона идёт последней,
после белого листа, и держит на себе кнопку и справку. ───────────── */
.mq-cta{margin-top:14px;background:#1f2229;border-radius:34px;
padding:clamp(30px,3.6vw,52px) clamp(24px,3.4vw,52px);
display:flex;align-items:center;gap:26px 34px;flex-wrap:wrap}
.mq-cta-tx{flex:1 1 380px;min-width:0}
.mq-cta h2{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:none;
font-size:clamp(24px,2.6vw,36px);line-height:1.08;letter-spacing:-.015em;color:#fff;margin:0}
.mq-cta p{margin:12px 0 0;font-size:17px;line-height:1.5;color:#b9bdc5;max-width:56ch}
.mq-cta-act{display:flex;gap:12px;flex-wrap:wrap}
/* ── Узкие окна. В образце на телефоне заголовок уходит влево, плитки
встают в одну колонку, а рисунок остаётся справа внутри плитки. ──── */
@media(max-width:1000px){
.mq-three{grid-template-columns:1fr}
}
@media(max-width:860px){
.mq-grid,.mq-two{grid-template-columns:1fr}
.mq-cell.is-wide{grid-column:auto}
}
@media(max-width:680px){
.mq-sheet{border-radius:24px;padding:26px 20px 30px}
.mq-cta{border-radius:24px}
.mq-title{text-align:left;font-size:clamp(28px,7.4vw,38px)}
.mq-say{text-align:left;margin-left:0;margin-right:0}
.mq-h.is-mid{text-align:left}
.mq-cin,.mq-cout{grid-template-columns:1fr}
.mq-a{padding-right:0}
.mq-cta-act .btn{width:100%;justify-content:center}
}
@media(max-width:520px){
.mq-cell{padding:20px;min-height:0;gap:14px}
.mq-cell.is-wide{padding:20px}
.mq-pic,.mq-cell .mq-pic{width:88px;height:66px}
.mq-cell.is-wide .mq-pic{width:104px;height:78px}
.mq-col,.mq-card{padding:22px 20px}
}
/* Раздел внутри белого листа: листов мало, а разделов в них несколько. */
.mq-part{margin-top:clamp(34px,4.4vw,64px)}
/* Правила выбора банка идут теми же карточками, но по три в ряд: текста
в них одна строка, и в два столбца ряд получался бы полупустым. */
.mq-rules3{grid-template-columns:repeat(3,1fr)}
.mq-rules3 .mq-col{padding:24px 26px}
.mq-rules3 .mq-cap{font-size:clamp(17px,1.4vw,20px)}
.mq-rules3 .mq-p{margin-top:10px;font-size:17px}
@media(max-width:1000px){.mq-rules3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.mq-rules3{grid-template-columns:1fr}}
/* Жёстких переносов в заголовках плиток нет: на узком экране они дробили
фразу на обрубки, а при скрытии через стили склеивали слова. Строка
ломается сама по месту. */
@media(max-width:680px){
.mq-cell{grid-template-columns:minmax(0,1fr) auto}
}
@media(max-width:430px){
.mq-pic,.mq-cell .mq-pic{width:74px;height:58px}
.mq-cell.is-wide .mq-pic{width:88px;height:70px}
}
/* ── Что мешает работать сейчас. Четыре коротких пункта в ряд.
Устройство взято у правил выбора банка: короткая фраза заголовком и одна
строка следствия под ней, подложка светло-серая. Отличие только в числе
колонок, четыре вместо трёх. */
.mq-pain4{grid-template-columns:repeat(4,1fr)}
.mq-pain4 .mq-col{padding:24px 26px}
.mq-pain4 .mq-cap{font-size:clamp(17px,1.4vw,20px)}
.mq-pain4 .mq-p{margin-top:10px;font-size:17px}
@media(max-width:1100px){.mq-pain4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.mq-pain4{grid-template-columns:1fr}}
/* ── Одна оплата с трёх сторон. Средний столбец тёмный, потому что это
работа программы, а по языку страницы наше отмечено тёмным. Текст в
тёмном столбце светлеет, иначе серый по тёмному не читается. */
.mq-sides3{grid-template-columns:repeat(3,1fr)}
.mq-sides3 .mq-cap{font-size:clamp(17px,1.5vw,21px)}
.mq-sides3 .mq-p{margin-top:16px;font-size:17px;line-height:1.5}
.mq-col.is-ours .mq-p{color:#c4c8d0}
/* Три столбца держатся только на широком окне. Уже тысячи текст в них
рвётся на семь строк, и колонка встаёт одна. Двух колонок здесь не
бывает: карточек три, ряд получился бы полупустым. */
@media(max-width:1000px){.mq-sides3{grid-template-columns:1fr}}
/* ══════════════════════════════════════════════════════════════════════
МУЛЬТИЭКВАЙРИНГ. НИЖНИЕ РАЗДЕЛЫ
──────────────────────────────────────────────────────────────────────
Прошлый заход посадил рисунок в каждую карточку подряд, и страница
зарябила. Владелец забраковал, велел смотреть образец. У образца
рисунки стоят ровно в двух местах: ряд плиток в начале страницы, по
одному крупному рисунку на плитку, и один крупный рисунок в широкой
полосе ниже. Больше на странице рисунков нет вовсе.
Здесь сделано так же. Рисунков на странице пять: четыре в одобренных
плитках первого экрана и один в полосе про подключение. Во всех
остальных разделах рисунков нет, а глаз держат тёмные карточки,
крупные числа и оранжевая считалка.
Кегли сведены с главной: основной текст 17, заголовок карточки 24,
мелкая подпись 13. Раньше на этой странице было 14,5 и 15,5, из-за
чего страница выглядела мельче остального сайта.
Прежние классы (.mq-pain4, .mq-rules3, .mq-sides3, .mq-card, .mq-col)
не тронуты: на них держатся два варианта текста, multiacquiring-a и
multiacquiring-b, которые владелец сейчас читает.
Схем из прямоугольников, кружков и стрелок между ними нет и не будет.
══════════════════════════════════════════════════════════════════════ */
/* ── Что мешает работать сейчас ────────────────────────────────────────
Устройство секции образца «Оплата и переводы»: четыре равные плитки в
два столбца, каждая широкая и низкая (у образца 553 на 144), крупный
заголовок прижат к верху, зазор около тридцати точек. Прежний ряд из
четырёх узких колонок и широкая плитка во всю строку убраны: узкая
колонка рвала фразу на обрубки, а широкая плитка ломала ряд. */
.mq-quad{display:grid;grid-template-columns:1fr 1fr;gap:16px;
margin-top:clamp(26px,3vw,44px)}
.mq-qt{background:#f4f5f7;border-radius:22px;padding:28px 30px;min-height:158px;
display:flex;flex-direction:column;justify-content:flex-start;
transition:background .18s ease}
.mq-qt:hover{background:#eeeff2}
.mq-qt .mq-cap{font-size:clamp(19px,1.7vw,23px);line-height:1.14}
.mq-qt .mq-p{margin-top:12px;max-width:44ch}
.mq-qt.is-dark{background:#1f2229;color:#fff}
.mq-qt.is-dark:hover{background:#272b34}
.mq-qt.is-dark .mq-cap{color:#fff}
.mq-qt.is-dark .mq-p{color:#b9bdc5}
@media(max-width:860px){.mq-quad{grid-template-columns:1fr}
.mq-qt{min-height:0}}
@media(max-width:520px){.mq-qt{padding:22px 20px}}
/* ── Размеры рисунка. Остался один размер, крупный: он стоит только в
полосе про подключение. Мелкие размеры не удалены, на них держатся
одобренные плитки первого экрана в узких окнах. */
.mq-pic.is-lg{width:214px;height:150px}
.mq-pic.is-md{width:134px;height:94px}
.mq-pic.is-sm{width:118px;height:84px}
/* ── Карточка нижних разделов. Рисунка в ней теперь нет, поэтому нижнего
поля под него тоже нет: карточка ровно по тексту. Высота выравнивается
растяжкой сетки, а не запасом снизу. */
.mq-tiles{display:grid;gap:16px;margin-top:clamp(26px,3vw,44px)}
.mq-tiles.is-rules,.mq-tiles.is-sides{grid-template-columns:repeat(3,1fr)}
.mq-tile{background:#f4f5f7;border-radius:22px;padding:28px 30px;
display:flex;flex-direction:column;transition:background .18s ease}
.mq-tile:hover{background:#eeeff2}
.mq-tile .mq-p{margin-top:12px}
.mq-tile-tx{min-width:0}
.mq-tiles.is-rules .mq-cap{font-size:clamp(17px,1.4vw,20px)}
.mq-tiles.is-sides .mq-cap{font-size:clamp(19px,1.7vw,23px)}
/* Тёмная карточка среди светлых. По языку страницы тёмным отмечено то,
на чём держится смысл раздела. */
.mq-tile.is-dark,.mq-card.is-dark{background:#1f2229;color:#fff}
.mq-tile.is-dark:hover{background:#272b34}
.mq-tile.is-dark .mq-cap,.mq-card.is-dark .mq-kicker{color:#fff}
.mq-tile.is-dark .mq-p,.mq-card.is-dark .mq-p{color:#b9bdc5}
.mq-tile.is-dark .mq-note,.mq-card.is-dark .mq-unit{color:#a7acb5}
/* Рисунок на тёмной подложке. Правило оставлено для одобренной тёмной
плитки первого экрана. */
.mq-cell.is-dark .mq-pic,.mq-tile.is-dark .mq-pic,.mq-card.is-dark .mq-pic,.mq-col.is-ours .mq-pic{color:#fff}
.mq-tile.is-dark .mq-pic .ln,.mq-card.is-dark .mq-pic .ln,.mq-col.is-ours .mq-pic .ln{stroke:#fff}
.mq-tile.is-dark .mq-pic .ln-thin,.mq-card.is-dark .mq-pic .ln-thin,.mq-col.is-ours .mq-pic .ln-thin{stroke:#7d838d}
.mq-tile.is-dark .mq-pic .fill-soft,.mq-card.is-dark .mq-pic .fill-soft,.mq-col.is-ours .mq-pic .fill-soft{fill:#5a2c14}
/* Шапка колонки в разделе про две модели рынка. Рисунок оттуда убран,
осталось название и подпись под ним. */
.mq-col-head{display:block}
/* Карточки с крупным числом. Число и есть якорь, к которому цепляется
глаз, рисунок для этого не нужен. */
.mq-three.is-figures .mq-card{display:flex;flex-direction:column}
.mq-three.is-figures .mq-big{margin-top:14px}
/* ── Широкая полоса с порядком подключения. Единственное место ниже
первого экрана, где стоит рисунок, и он здесь крупный. У образца
такая же одиночная полоса с крупным рисунком закрывает страницу. */
.mq-strip{margin-top:16px;background:#f4f5f7;border-radius:22px;
padding:clamp(26px,3vw,38px) clamp(26px,3.2vw,40px);
display:flex;align-items:center;gap:24px 44px}
.mq-strip-tx{flex:1 1 auto;min-width:0}
.mq-strip>.mq-pic{flex:none}
.mq-strip .mq-steps{margin-top:20px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 36px}
.mq-strip .mq-steps li{margin-bottom:0}
.mq-strip .mq-p{margin-top:20px;font-size:15px;color:#8a8d94}
/* ── Узкие окна. Ряд по три складывается в два, потом в один. ───────── */
@media(max-width:1100px){
.mq-tiles.is-rules{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
.mq-tiles.is-sides{grid-template-columns:1fr}
.mq-strip{flex-direction:column;align-items:stretch}
.mq-strip>.mq-pic{align-self:flex-end;margin-top:8px}
}
@media(max-width:680px){
.mq-tiles.is-rules{grid-template-columns:1fr}
.mq-strip .mq-steps{grid-template-columns:1fr}
}
@media(max-width:520px){
.mq-tile{padding:22px 20px}
.mq-strip{padding:22px 20px}
.mq-pic.is-lg{width:150px;height:106px}
.mq-pic.is-md{width:96px;height:72px}
.mq-pic.is-sm{width:96px;height:72px}
}
@media(max-width:430px){
.mq-pic.is-lg{width:126px;height:90px}
.mq-pic.is-md{width:82px;height:62px}
.mq-pic.is-sm{width:82px;height:62px}
}
/* ── Совместимость с двумя вариантами текста ───────────────────────────
multiacquiring-a и multiacquiring-b, которые владелец читает, собраны
на плитках с рисунком внутри, на широкой плитке во всю строку и на
ряде «что мешает». На основной странице таких сочетаний больше нет:
рисунок внутри плитки не встречается, широкой плитки и ряда «что
мешает» тоже. Поэтому правила ниже привязаны к наличию рисунка и
основную страницу не задевают. Проверено снимками обоих вариантов. */
.mq-tiles.is-pain{grid-template-columns:repeat(3,1fr)}
.mq-tile:has(>.mq-pic){min-height:212px;padding:26px 28px}
.mq-tile>.mq-pic{margin-top:auto;align-self:flex-end;padding-top:14px}
.mq-tile.is-wide{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:center;gap:20px}
.mq-tile.is-wide .mq-tile-tx{flex:1 1 auto;min-width:0}
.mq-tile.is-wide>.mq-pic{margin-top:0;padding-top:0;align-self:center;flex:none}
.mq-tile.is-wide .mq-cap{font-size:clamp(19px,1.9vw,26px)}
.mq-tile.is-wide .mq-p{margin-top:12px;font-size:17px;max-width:62ch}
.mq-three.is-figures .mq-card:has(>.mq-pic){min-height:270px}
.mq-three.is-figures .mq-card>.mq-pic{margin-top:auto;align-self:flex-end;padding-top:16px}
.mq-col-head:has(.mq-pic){display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.mq-col-head .mq-pic{flex:none;margin-top:-6px}
@media(max-width:1100px){
.mq-tiles.is-pain{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
.mq-tiles.is-sides .mq-tile:has(>.mq-pic){min-height:0;flex-direction:row;align-items:center;gap:18px}
.mq-tiles.is-sides .mq-tile:has(>.mq-pic)>.mq-tile-tx{flex:1 1 auto;min-width:0}
.mq-tiles.is-sides .mq-tile:has(>.mq-pic)>.mq-pic{margin-top:0;padding-top:0;align-self:center;flex:none}
.mq-three.is-figures .mq-card:has(>.mq-pic){min-height:0}
}
@media(max-width:680px){
.mq-tiles.is-pain{grid-template-columns:1fr}
.mq-tile:has(>.mq-pic){min-height:0;flex-direction:row;align-items:center;gap:16px}
.mq-tile:has(>.mq-pic)>.mq-tile-tx{flex:1 1 auto;min-width:0}
.mq-tile:has(>.mq-pic)>.mq-pic{margin-top:0;padding-top:0;align-self:center;flex:none}
}
/* ── Вопросы и ответы в устройстве образца ────────────────────────────
Замерено на образце: секция делится на два столбца 60 и 40 процентов,
зазор 16, левый столбец серая плашка с полями 24, внутри неё белая
карточка с раскрытиями и чёрная кнопка под карточкой, правый столбец
картинка во всю высоту секции на светлой подложке. На узком экране
всё сходится в одну плашку, а картинка встаёт полосой под заголовком.
Рисунок предметный, схем из прямоугольников и стрелок здесь нет. */
.mq-ask{position:relative}
.mq-ask-pane{background:#f4f5f7;border-radius:28px;
padding:clamp(20px,2.2vw,28px);
display:flex;flex-direction:column;align-items:flex-start}
.mq-ask-pane>.mq-h{margin:0 0 clamp(14px,1.5vw,20px);text-align:left}
.mq-ask-card{background:#fff;border-radius:22px;
padding:clamp(18px,1.8vw,26px);width:100%}
.mq-ask-card .mq-faq{margin-top:0;border-top:0}
.mq-ask-card .mq-q:last-child{border-bottom:0}
.mq-ask-card .mq-q>summary{font-weight:700;padding:16px 0}
.mq-ask-card .mq-q:first-child>summary{padding-top:2px}
.mq-ask-btn{margin-top:clamp(18px,1.8vw,24px)}
/* Значок справа: стрелка, как в образце, вниз в закрытом пункте и вверх
в раскрытом. Разметка та же, меняется только рисовка знака. */
.mq-ask-card .mq-sign{width:16px;height:16px;flex:0 0 16px;
transition:transform .18s ease}
.mq-ask-card .mq-sign::before{left:0;top:6px;width:10px;height:2px;
border-radius:2px;transform:rotate(45deg)}
.mq-ask-card .mq-sign::after{left:6px;top:6px;width:10px;height:2px;
border-radius:2px;transform:rotate(-45deg);opacity:1}
.mq-ask-card .mq-q[open] .mq-sign{transform:rotate(180deg)}
.mq-ask-card .mq-q[open] .mq-sign::after{opacity:1}
/* Правый столбец. Подложка светлая нейтральная, рисунок держит всю высоту.
Оранжевый убран владельцем 12 сентября 2026: рисунок и подложка блока
вопросов теперь чёрно-белые, как значки четырёх плиток. */
.mq-ask-art{background:#f4f5f7;border-radius:24px;
display:grid;place-items:center;padding:clamp(16px,2vw,30px);width:100%}
.mq-ask-art svg{display:block;width:100%;height:auto;max-height:100%}
/* Подложка с настоящей картинкой вместо рисунка линией. Своих полей не
держит: снимок сам сделан на белом фоне. Вписываем целиком, ничего не
обрезаем, иначе у телефона отрежет карточки банков сбоку. */
.mq-ask-art.is-photo{padding:0;overflow:hidden}
/* min-height:0 обязателен: внутри сетки картинка иначе не даёт себя сжать
ниже собственной высоты и на телефоне вылезает за низ подложки. */
.mq-ask-art.is-photo img{display:block;width:100%;height:100%;min-height:0;
object-fit:contain}
/* Тёмный кадр заполняет подложку целиком: белые поля по краям вокруг тёмного
снимка выглядели браком. Обрезаются только поля стола, экран в середине. */
.mq-ask-art.is-cover img{object-fit:cover}
.mq-ask-art .paper{fill:#fff}
.mq-ask-art .fill{fill:#1f2229}
.mq-ask-art .fill-soft{fill:#eceef1}
.mq-ask-art .ln{fill:none;stroke:#1f2229;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.mq-ask-art .ln-thin{fill:none;stroke:#9aa0aa;stroke-width:1.3;
stroke-linecap:round;stroke-linejoin:round}
@media(min-width:861px){
.mq-ask-pane{width:60%}
.mq-ask-art{position:absolute;top:0;right:0;bottom:0;
width:calc(40% - 16px);border-radius:28px;margin:0}
/* Зеркало. Раздел «Что даёт мультиэквайринг» устроен как вопросы, но
рисунок стоит слева, а плашка справа. Решение владельца 12 сентября
2026. На узких экранах зеркалить нечего: там всё в один столбец. */
.mq-ask.is-mirror .mq-ask-pane{margin-left:auto}
.mq-ask.is-mirror .mq-ask-art{right:auto;left:0}
/* Без рисунка. Раздел вопросов растянут на всю ширину полотна решением
владельца 12 сентября 2026, делить строку больше не с чем. */
.mq-ask.is-full .mq-ask-pane{width:100%}
}
@media(max-width:860px){
.mq-ask-art{height:clamp(258px,66vw,330px);margin:0 0 16px}
.mq-ask-art svg{width:auto;height:100%;max-width:100%}
/* Настоящая картинка вертикальная: держать её в низкой полосе значит
сжать до нечитаемого. На узких экранах высоту задаёт сама картинка. */
.mq-ask-art.is-photo{height:auto}
.mq-ask-art.is-photo img{height:auto}
.mq-ask-btn{width:100%;justify-content:center}
}
@media(max-width:680px){
.mq-ask-pane{border-radius:22px;padding:16px}
.mq-ask-card{border-radius:18px;padding:16px}
.mq-ask-art{border-radius:18px}
}
/* ── Длинные тексты на странице «Мультиэквайринг» ─────────────────────
Добавлено 10 сентября 2026, когда на страницу перенесли тексты
копирайтера. Правила только новые и висят на своей метке mq-long,
которая стоит на этой странице и больше нигде: ни главная, ни тарифы,
ни отложенные версии А и Б их не видят. */
/* Заголовок первого экрана стал длинной фразой вместо одного слова.
На прежнем кегле он занимал пол-экрана, поэтому здесь мельче и в
колонке ограниченной ширины, чтобы строки не тянулись через лист. */
.mq-long .mq-title.is-long{font-size:clamp(26px,2.9vw,40px);max-width:24ch;margin:0 auto}
/* Абзац вместо строки под заголовком. По центру абзац в пять строк
читается плохо, поэтому текст выравнивается по левому краю, а сам
столбец остаётся посередине. Кегль прежний, 17 точек и выше. */
.mq-long .mq-say.is-long{text-align:left;max-width:76ch}
/* Плитка во всю ширину с одним длинным абзацем. Прежнее ограничение
строки ставилось под фразу в две строки и оставляло половину плитки
пустой. Строка длиннее, но не во весь лист. */
.mq-long .mq-tile.is-wide.is-text .mq-p{max-width:88ch}
/* Считалка. Подписи полей стали длиннее и переносятся на две строки,
из-за чего поля ввода вставали на разной высоте. Подпись прижата к
верху ячейки, поле к низу, все три поля на одной линии. */
.mq-long .mq-cin .cf{height:100%;justify-content:space-between}
/* Итоги считалки. Подпись «разница за год при вашем распределении
потока» переносится на две строки, и числа в двух ячейках вставали на
разной высоте. Подпись прижата к верху, число к низу. */
.mq-long .mq-cout .co-i{display:flex;flex-direction:column;justify-content:space-between}
/* Два столбца про модели рынка. Пояснения под названиями разной длины,
и списки под ними начинались на разной высоте. */
@media(min-width:861px){
.mq-long .mq-two .mq-col-head{min-height:96px}
}
/* ══════════════════════════════════════════════════════════════════════
РИТМ страницы «Мультиэквайринг» (10 сентября 2026).
Прошлая сборка была забракована владельцем: все разделы ниже первого
экрана шли одним и тем же блоком подряд, страница вышла монотонной.
Здесь каждый раздел устроен по-своему.
Порядок разделов правлен 11 сентября 2026: два типа поднялись сразу за
первый экран, риски встали за ними.
1. Два типа — два столбца поровну, вывод крупным текстом во всю ширину
с лаймовой чертой слева (приём взят с главной, блок о компании).
2. Риски — мозаика разновеликих плиток, две тёмные, одна стоит на два
ряда, внизу широкая тёмная плитка с предметным рисунком.
3. Что происходит при нажатии кнопки — два столбца 40 на 60, заголовок
слева, содержание справа раскрытиями, подложки нет.
4. Считалка — два столбца 40 на 60, текст слева, считалка справа.
5. Признаки — тёмная полоса во всю ширину с раскрытиями.
6. Подключение — нумерованные шаги, рисунок слева, 34 на 66.
7. Вопросы — прежнее устройство 60 на 40 с рисунком справа.
Белое полотно одно на всю содержательную часть: разделы разделяют
отступы, волосяные линии и смена подложки самого раздела, а не разрывы
белого листа. Схем из прямоугольников, кружков и стрелок здесь нет.
══════════════════════════════════════════════════════════════════════ */
/* Общий шаг между разделами внутри одного полотна. Волосяная линия стоит
только там, где соседние разделы оба на голом белом: где раздел начат
плашкой или тёмной полосой, границу держит она сама. */
.mq-sec{margin-top:clamp(44px,5.4vw,86px)}
.mq-sec.is-rule{border-top:1px solid #e7e9ec;padding-top:clamp(38px,4.4vw,66px)}
.mq-sec>.mq-h{margin:0 0 clamp(18px,2vw,28px)}
/* ── Раздел 1. Мозаика разновеликих плиток ────────────────────────────
Ширины плиток разные (7 и 5 колонок, затем 4 и 3), одна плитка занимает
два ряда по высоте, широкая тёмная замыкает мозаику снизу. */
.mq-mos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mq-mt{background:#f4f5f7;border-radius:22px;padding:28px 30px;
display:flex;flex-direction:column;transition:background .18s ease}
.mq-mt:hover{background:#eeeff2}
.mq-mt .mq-cap{font-size:clamp(19px,1.7vw,23px);line-height:1.14}
.mq-mt .mq-p{margin-top:12px}
.mq-mt.is-dark{background:#1f2229;color:#fff}
.mq-mt.is-dark:hover{background:#272b34}
.mq-mt.is-dark .mq-cap{color:#fff}
.mq-mt.is-dark .mq-p{color:#b9bdc5}
.mq-mt.is-dark .mq-pic{color:#fff}
.mq-mt.is-dark .mq-pic .ln{stroke:#fff}
.mq-mt.is-dark .mq-pic .ln-thin{stroke:#7d838d}
.mq-mt.is-dark .mq-pic .fill-soft{fill:#5a2c14}
.mq-mt.is-wide{grid-column:1/-1;flex-direction:row;align-items:center;
gap:28px;padding:30px 34px}
.mq-mt-tx{flex:1 1 auto;min-width:0}
.mq-mt.is-wide .mq-cap{font-size:clamp(20px,1.9vw,26px)}
.mq-mt.is-wide .mq-p{max-width:76ch}
.mq-mt.is-wide>.mq-pic{flex:none}
/* Ширины плиток разные и в каждом ряду меняются местами: 8 и 4 колонки в
верхнем ряду, 5 и 7 в нижнем. Ровной сетки одинаковых блоков нет.
Порядок ширин переставлен 12 сентября 2026 под новые тексты раздела
«Что даёт мультиэквайринг»: длинные абзацы стоят в широких плитках. */
@media(min-width:1001px){
.mq-mos{grid-template-columns:repeat(12,1fr)}
.mq-a1{grid-column:1/9;grid-row:1}
.mq-a2{grid-column:9/13;grid-row:1}
.mq-a3{grid-column:1/8;grid-row:2}
.mq-a4{grid-column:8/13;grid-row:2}
.mq-a5{grid-row:3}
}
@media(max-width:680px){
.mq-mos{grid-template-columns:1fr}
.mq-mt{padding:22px 20px}
.mq-mt.is-wide{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 20px}
.mq-mt.is-wide>.mq-pic{align-self:flex-end}
}
/* ── Четыре шага подключения ──────────────────────────────────────────
Решение владельца 12 сентября 2026. Четыре карточки в ряд, в каждой
крупная цифра. Черта проходит через ряд на уровне центра цифр, за
карточками спрятана и видна только в просветах, как в разделе про три
роли. Наконечников и стрелок нет. Уровень черты держится на тех же
числах, что отступ карточки сверху и половина круга цифры. */
/* Воздуха в карточках прибавлено 12 сентября 2026 по просьбе владельца:
поля шире, цифра дальше от названия, название дальше от текста. Уровень
черты считается от того же верхнего поля плюс половина круга цифры. */
.mq-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
gap:20px;margin-top:clamp(24px,2.8vw,38px)}
.mq-flow-line{position:absolute;left:0;right:0;z-index:0;height:2px;background:#e8e8e8;
top:calc(clamp(32px,3.2vw,44px) + 23px)}
/* Цифра и название стоят сверху, к низу прижат только абзац: приём взят с
карточек главной по решению владельца 12 сентября 2026. Между названием и
абзацем появляется воздух, и абзацы всех четырёх карточек стоят на одной
линии снизу. */
.mq-step{position:relative;z-index:1;background:#f4f5f7;border-radius:24px;
display:flex;flex-direction:column;
padding:clamp(32px,3.2vw,44px) clamp(26px,2.6vw,36px) clamp(34px,3.4vw,46px)}
.mq-step .mq-p{margin-top:auto}
.mq-step-n{display:grid;place-items:center;width:46px;height:46px;border-radius:999px;
background:#1f2229;color:#fff;font-family:'Montserrat',sans-serif;font-weight:900;
font-size:19px;line-height:1;margin-bottom:clamp(12px,1.2vw,16px)}
/* У первых трёх шагов круг на десятую часть меньше, чем у последнего:
решение владельца 12 сентября 2026. Уменьшение сделано сжатием, а не
меньшими размерами, чтобы центр остался на месте и черта шагов
по-прежнему проходила ровно через середину всех четырёх цифр. */
.mq-step:not(.is-orange) .mq-step-n{transform:scale(.9)}
.mq-step .mq-cap{font-size:clamp(19px,1.7vw,23px);line-height:1.14}
/* Отступ сверху у абзаца именно auto: он и отжимает текст к низу. Минимум
держит соседнее правило, чтобы в низких карточках абзац не прилипал
к названию. */
.mq-step .mq-p{margin-top:auto;padding-top:14px}
/* Последний шаг залит оранжевым по решению владельца 12 сентября 2026:
запуск это итог всей цепочки. Круг цифры на нём белый, цифра оранжевая.
Оранжевый здесь свой, приглушённый: фирменный владелец назвал ядовитым
в заливке целой карточки. На кнопках и логотипе фирменный не тронут. */
/* Третий шаг белый, как первые два, а выделен тонкой серой обводкой: из двух
предложенных владельцем способов 12 сентября 2026 выбран этот, потому что
тень плотнее на десятую часть глазом не различить. Обводка нарисована
тенью без размытия, а не рамкой, чтобы габариты карточки не изменились. */
.mq-step.is-warm{background:#fff}
/* Оттенки перехода заданы владельцем 12 сентября 2026: сверху светлее,
снизу глубже. Переход слабый, заливка читается как один цвет. */
.mq-step.is-orange{background:linear-gradient(180deg,#f7743a 0%,#f16428 100%)}
.mq-step.is-orange .mq-cap{color:#fff}
.mq-step.is-orange .mq-p{color:#fff}
.mq-step.is-orange .mq-step-n{background:#fff;color:#e2561f}
/* Карточки вытянуты по высоте: решение владельца 12 сентября 2026, ряд должен
читаться как четыре вертикальных блока, а не как квадраты. Цифра стоит
сверху, текст у низа, между ними воздух. Только на широких экранах: на
телефоне вытянутая карточка превратилась бы в пустой колодец. */
@media(min-width:1001px){
.mq-step{min-height:clamp(228px,18vw,262px)}
}
@media(max-width:1000px){
.mq-flow{grid-template-columns:repeat(2,1fr)}
.mq-flow-line{display:none}
}
@media(max-width:680px){
.mq-flow{grid-template-columns:1fr}
}
/* ── Раскрытия, общий вид ─────────────────────────────────────────────
Одна и та же механика в трёх разделах, но обрамление у каждого своё:
в разделе 2 голая колонка, в разделе 5 тёмная полоса, в вопросах внизу
белая карточка на серой плашке. Строка в группе раскрыта всегда одна:
за это отвечает метка data-acc и скрипт inner.js. */
.mq-acc{border-top:1px solid #e7e9ec}
.mq-acc>.mq-q>summary{align-items:flex-start;
font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.01em;
font-size:clamp(18px,1.5vw,21px);line-height:1.24;padding:19px 0}
.mq-acc>.mq-q>summary .mq-sign{margin-top:4px}
.mq-acc .mq-a{padding:0 44px 22px 0}
.mq-acc .mq-a p{max-width:82ch}
.mq-acc .mq-a .mq-note{margin:0 0 10px}
.mq-acc .mq-a .mq-note.is-accent{color:var(--lime)}
/* ── Раздел 2. Заголовок слева, содержание справа (40 на 60) ────────── */
.mq-split{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
gap:clamp(24px,3.4vw,64px);align-items:start}
.mq-split-head .mq-h{margin:0}
@media(max-width:900px){
.mq-split{grid-template-columns:1fr;gap:20px}
}
/* ── Раздел 3. Вывод крупным текстом во всю ширину ────────────────────
Тот же приём, что на главной у фразы о компании: лаймовая черта слева,
ни подложки, ни рамки, ни рисунка. Начертание обычное, не жирное. */
.mq-lead{margin:clamp(42px,4.6vw,72px) 0 0;
border-left:4px solid var(--lime);padding:4px 0 4px clamp(20px,2.4vw,34px);
font-size:clamp(20px,2.1vw,29px);line-height:1.3;letter-spacing:-.01em;
color:#1f2229;
/* Наклонный набор по решению владельца 11 сентября: вывод раздела читается
как реплика, а не как ещё один абзац страницы. */
font-style:italic}
/* ── Раздел 4. Текст слева, считалка справа (40 на 60) ────────────────
Поля стоят столбиком, поэтому строка про НДС целиком помещается внутри
поля по картам и не наезжает на введённое число. */
.mq-money{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);
gap:clamp(24px,3.4vw,58px);align-items:start}
/* Первоначальная раскладка, возвращена 11 сентября: один столбец, считалка под
текстом во всю ширину, три поля в ряд. Два столбца 40 на 60 отклонены. */
.mq-money.is-stack{grid-template-columns:1fr;gap:0}
.mq-money.is-stack .mq-calc{margin-top:clamp(22px,2.6vw,36px)}
.mq-money.is-stack .mq-cin{grid-template-columns:repeat(3,1fr);margin-top:22px;gap:14px}
@media(max-width:860px){
.mq-money.is-stack .mq-cin{grid-template-columns:1fr}
}
.mq-money-tx .mq-h{margin:0 0 16px}
/* Ширина абзацев раздела подобрана замером 12 сентября 2026: при ней пример
расчёта встаёт в три строки и хвост «Проверьте свои цифры в калькуляторе
ниже» целиком попадает в последнюю. Оба абзаца одной ширины, чтобы правый
край совпадал. */
.mq-money-tx .mq-say,
.mq-long .mq-money-tx .mq-say,
.mq-long .mq-money-tx .mq-say.is-long{margin-left:0;margin-right:0;max-width:84ch;text-align:left}
.mq-money .mq-calc{margin-top:0}
.mq-money .mq-cin{grid-template-columns:1fr;margin-top:0;gap:16px}
@media(max-width:1000px){
.mq-money{grid-template-columns:1fr;gap:24px}
}
/* ── Раздел 5. Тёмная полоса с раскрытиями ────────────────────────────
Единственная тёмная зона в середине страницы. Держит акцент там, где
вокруг светло, и отделяет считалку от шагов подключения. */
.mq-band{background:#1f2229;color:#fff;border-radius:28px;
padding:clamp(24px,3vw,44px) clamp(22px,3vw,46px)}
.mq-band>.mq-h{color:#fff;margin:0 0 clamp(14px,1.6vw,22px)}
.mq-band .mq-acc{border-top-color:rgba(255,255,255,.16)}
.mq-band .mq-q{border-bottom-color:rgba(255,255,255,.16)}
.mq-band .mq-q:last-child{border-bottom:0}
.mq-band .mq-q>summary{color:#fff}
.mq-band .mq-a p{color:#b9bdc5}
.mq-band .mq-sign::before,.mq-band .mq-sign::after{background:#8d939d}
@media(max-width:680px){
.mq-band{border-radius:22px;padding:20px 18px}
}
/* ── Раздел 6. Шаги подключения, рисунок слева ────────────────────────
Единственное место на странице, где рисунок стоит слева. Подложки нет
намеренно: серая плашка занята вопросами внизу, повтор был бы лишним. */
.mq-how{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
gap:clamp(26px,4vw,64px);align-items:center}
.mq-how-pic{width:100%;max-width:330px;height:auto;justify-self:center}
.mq-how-pic svg{width:100%;height:auto}
.mq-how-tx .mq-h{margin:0 0 16px}
.mq-how .mq-steps{margin-top:18px}
.mq-how .mq-steps li{margin-bottom:18px}
.mq-how .mq-steps li:last-child{margin-bottom:0}
@media(max-width:900px){
.mq-how{grid-template-columns:1fr;gap:22px}
.mq-how-pic{max-width:220px;justify-self:start}
}
/* ══════════════════════════════════════════════════════════════════════
ВИТРИНА ПЕРВОГО ЭКРАНА «Мультиэквайринг» (11 сентября 2026).
──────────────────────────────────────────────────────────────────────
Владелец укоротил абзац под заголовком, и между заголовком и плитками
осталось пустое место. Сюда встала витрина: полоса, которая
переключается кадрами.
Приём и механика взяты у слайдера главной один в один. Кадры лежат в
ОДНОЙ клетке грида друг на друге, высота полосы равна самому высокому
кадру и при переключении не меняется, кадр сменяется плавным
проявлением. Точки стоят по центру внизу, они же и переключают.
Отличий от главной два, оба по прямому указанию владельца: автопрокрутки
нет и слов внутри нет ни одного. Витрина держится на рисунке, движении
и раскладке.
Подложки чередуются светлая, тёмная, светлая — тем же приёмом, что на
главной чередуются белый и тёмный слайды.
Цвета только те, что уже есть выше: оранжевый, тёмный #1f2229, светлый
#f4f5f7, персиковый #ffd9c7, серый #9aa0aa. На тёмном кадре линии
белеют ровно теми же значениями, что и в тёмной плитке первого экрана.
Схем из прямоугольников, кружков и стрелок здесь нет: рисунки
предметные, те же, что в языке страницы.
══════════════════════════════════════════════════════════════════════ */
.mq-show{position:relative;margin-top:clamp(26px,3vw,44px);
border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1fr}
.mq-show:focus{outline:none}
.mq-show:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
/* Кадр. Все кадры в одной клетке, поэтому полоса не прыгает при смене. */
.mq-shot{--zoom:1;grid-area:1/1;position:relative;background:#f4f5f7;
padding:clamp(16px,1.8vw,26px) clamp(14px,1.8vw,26px) clamp(44px,3.6vw,56px);
opacity:0;pointer-events:none;transition:opacity .5s ease}
.mq-shot.on{opacity:1;pointer-events:auto}
.mq-shot.is-dark{background:#1f2229}
/* Рисунок слегка приподнимается, когда кадр становится текущим: движение
короткое, кадр не «выезжает», а проявляется вместе с ним. */
.mq-shot svg{display:block;width:100%;height:auto;
transform:translateY(calc(var(--lift, 0px) + 10px)) scale(calc(var(--zoom) * .985));
transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.mq-shot.on svg{transform:translateY(var(--lift, 0px)) scale(var(--zoom))}
@media(prefers-reduced-motion:reduce){
.mq-shot svg{transition:none;transform:translateY(var(--lift, 0px)) scale(var(--zoom))}
}
/* Рисовка та же, что в плитках: тёмная линия, оранжевая заливка акцентом,
персиковая заливка вполсилы, тонкая серая линия для мелочей. */
.mq-show .fill{fill:var(--lime)}
.mq-show .fill-soft{fill:#ffd9c7}
.mq-show .paper{fill:#fff}
.mq-show .ink{fill:#1f2229}
.mq-show .ln{fill:none;stroke:#1f2229;stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round}
.mq-show .ln-thin{fill:none;stroke:#9aa0aa;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.mq-show .ln-w{fill:none;stroke:#fff;stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round}
.mq-show .ln-o{fill:none;stroke:var(--lime);stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round}
/* Строчки на чеке. Свой класс, потому что бумага белая и на тёмном кадре
эти линии светлеть не должны. */
.mq-show .tx{fill:none;stroke:#9aa0aa;stroke-width:2.2;stroke-linecap:round}
/* Тёмный кадр. Значения те же, что у тёмной плитки первого экрана. */
.mq-shot.is-dark .ln{stroke:#fff}
.mq-shot.is-dark .ln-thin{stroke:#7d838d}
.mq-shot.is-dark .fill-soft{fill:#5a2c14}
/* Точки. Вид и поведение как на главной: кружок, у текущего кадра
вытянутая полоска. Точки одни на всю витрину и лежат поверх кадров,
поэтому на тёмном кадре они белеют по метке на самой витрине. */
.mq-dots{position:absolute;left:50%;transform:translateX(-50%);
bottom:clamp(16px,1.6vw,22px);display:flex;gap:10px;z-index:5}
.mq-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;
cursor:pointer;background:rgba(31,34,41,.28);
transition:width .2s, background .2s}
.mq-dots button:hover{background:rgba(31,34,41,.5)}
/* Текущая точка объявлена ПОСЛЕ наведения: иначе она под курсором бледнела
и выглядела как сбой. */
.mq-dots button.on{background:#1f2229;width:28px}
.mq-dots button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.mq-show.is-dark .mq-dots button{background:rgba(255,255,255,.3)}
.mq-show.is-dark .mq-dots button:hover{background:rgba(255,255,255,.6)}
.mq-show.is-dark .mq-dots button.on{background:#fff}
/* Узкие окна. Полоса широкая и низкая, на телефоне рисунок в ней мельчал
до нечитаемого. Поэтому там он увеличивается и краями уходит за поле
витрины: середина каждого кадра выстроена так, чтобы главный предмет
оставался внутри. */
@media(max-width:860px){
.mq-show{border-radius:20px}
.mq-shot{--zoom:1.15}
}
/* Приподнимаем рисунок, иначе на телефоне он ложится прямо на точки. */
@media(max-width:680px){
.mq-shot{--zoom:1.25;--lift:-8px;padding:14px 12px 40px}
}
@media(max-width:430px){
.mq-shot{--zoom:1.35;--lift:-10px}
}
/* ══════════════════════════════════════════════════════════════════════
ГЛАВНЫЙ ЭКРАН МУЛЬТИЭКВАЙРИНГА. ВРЕМЕННАЯ ВИТРИНА ИЗ ЧЕТЫРЁХ ВАРИАНТОВ
Владелец смотрит четыре подачи одного и того же главного экрана и
выбирает одну. После выбора три лишних варианта уходят из разметки, а
отсюда уходят их правила: они собраны в отдельные куски и помечены
номерами, чтобы удаление было простым.
Общее устройство. Варианты лежат друг на друге в одной клетке грида,
поэтому высота зоны при переключении не меняется ни на точку. Смена —
плавное проявление, автопрокрутки нет.
Цвета только те, что уже объявлены выше: оранжевый, янтарный, тёмный
#1f2229, светлый #f4f5f7, персиковый #ffd9c7, тёмно-персиковый #5a2c14,
серый текста #5a5e66 и #b9bdc5, белый.
Чего здесь нет. Значков в стиле четырёх плиток (тонкая тёмная линия
плюс оранжевая и персиковая заливка) нет ни в одном варианте: на
главном экране владелец их запретил, язык должен быть другой.
Схем из прямоугольников, кружков и стрелок нет и не будет.
══════════════════════════════════════════════════════════════════════ */
/* ── Общее для всех четырёх ──────────────────────────────────────────── */
/* Зона лежит прямо на чёрном фоне сайта, выше белого полотна. Своей подложки
у неё нет: подложку несут сами варианты, каждый свою. */
.mh{position:relative;margin:clamp(16px,2.2vw,34px) 0 clamp(20px,2.8vw,42px)}
.mh:focus{outline:none}
.mh:focus-visible{outline:2px solid var(--lime);outline-offset:8px;border-radius:10px}
/* Все варианты в одной клетке: высота зоны равна самому высокому из них
и при переключении не прыгает. */
.mh-stack{display:grid;grid-template-columns:1fr}
.mh-v{grid-area:1/1;position:relative;
display:flex;flex-direction:column;justify-content:center;
opacity:0;pointer-events:none;transition:opacity .45s ease}
.mh-v.on{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.mh-v{transition:none}}
/* Заголовок обычным регистром, как и везде на странице. Подписи под ним
нет ни в одном варианте: заголовок работает один, дальше сразу абзац. */
.mh-title{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:none;
letter-spacing:-.022em;line-height:1.02;margin:0;color:#1f2229}
/* «Мультиэквайринг» — одно длинное слово без переносов. Без этой строки оно
раздвигало колонку изнутри и вылезало за поле варианта на узких окнах. */
.mh-solid-tx,.mh-field-tx,.mh-scene-tx{min-width:0}
.mh-say{margin:0;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:#5a5e66}
/* Вывод про мультиэквайринг вынесен в отдельный абзац владельцем 12 сентября
2026: раньше он был слит с текстом выше в один кусок. */
.mh-say.is-next{margin-top:clamp(12px,1.2vw,18px)}
/* Кнопка стоит неподвижно (решение владельца 11 сентября 2026). Оранжевая
заливка под курсором снята 26 сентября: отклик у всех кнопок сайта теперь
один и тот же, светлая темнеет. */
.mh-btn{align-self:start}
/* ── Вариант 1. Крупная типографика, картинки нет ────────────────────
Работает сам набор: заголовок во всю ширину зоны, под волосяной линией
мелкий абзац в правой колонке, слева пустота. Держится на контрасте
масштабов, поэтому никаких рисунков здесь нет вовсе.
Подложки у варианта нет: буквы стоят прямо на чёрном фоне сайта. Отсюда
светлый набор и белая волосяная линия — те же значения, что у линий
в шапке и подвале. */
.mh-v.is-type{padding:clamp(4px,.8vw,14px) 0}
.mh-v.is-type .mh-title{font-size:clamp(22px,7.4vw,88px);color:var(--white)}
.mh-v.is-type .mh-say{color:var(--muted)}
/* Два столбца: рисунок слева, текст и кнопка справа. Складывать их друг под
друга пробовали 11 сентября и владелец забраковал. Столбец под текстом
сознательно уже столбца под рисунком: рисунок забирает освободившееся. */
.mh-type-low{display:grid;grid-template-columns:1fr minmax(0,40ch);
column-gap:clamp(20px,3vw,48px);
margin-top:clamp(22px,3vw,40px);padding-top:clamp(18px,2.2vw,30px);
border-top:1px solid var(--line)}
/* Абзацы собраны в один блок: их стало два, и порознь они разъезжались по
строкам сетки, растягивая правый столбец. Блок занимает место прежнего
единственного абзаца. */
.mh-type-low .mh-says{grid-column:2;align-self:end}
.mh-type-low .mh-say{grid-column:2;align-self:end}
.mh-type-low .mh-btn{grid-column:2;justify-self:start;align-self:start;
margin-top:clamp(20px,2.2vw,30px)}
/* Рисунок занимает левый столбец и растянут на обе строки, чтобы абзац и кнопка
справа остались на своих местах.
Показываем его целиком, без обрезки: по краям у него стоят карточки способов
оплаты и банков, при подрезке они теряли половину. Поэтому у окна пропорции
самого файла, а не растяжение по высоте соседа. */
.mh-type-pic{grid-column:1;grid-row:1/3;align-self:center;position:relative;
display:block;width:100%;aspect-ratio:1670/942}
.mh-type-img{display:block;width:100%;height:100%;object-fit:contain}
/* Логотип встаёт в пустое окно посреди рисунка. Доли замерены по самому файлу:
окно стоит на 61,38% ширины и 49,2% высоты, его размер 15,6 на 17,9 процента
от рисунка. Логотип занимает 11% ширины, то есть примерно две трети окна. */
.mh-type-logo{position:absolute;left:61.38%;top:49.2%;transform:translate(-50%,-50%);
width:11%;height:auto;pointer-events:none}
/* Ниже 900 точек левый столбец становится слишком узким, рисунок в нём мельчал
до нечитаемого. Поэтому столбцы складываются в один, рисунок встаёт сверху
во всю ширину, текст и кнопка под ним. */
@media(max-width:900px){
.mh-type-low{grid-template-columns:1fr}
.mh-type-pic{grid-column:1;grid-row:auto;order:-1;max-height:none;
object-position:center;margin-bottom:clamp(14px,3vw,22px)}
.mh-type-low .mh-says,.mh-type-low .mh-say,.mh-type-low .mh-btn{grid-column:1}
}
/* ── Вариант 2. Плотная тёмная заливка во всю зону, текст поверх ──────
Предметов нет совсем. Держится на поле цвета, крупном наборе по центру
и оранжевом свечении в углу: это пятно, а не рисунок. */
.mh-v.is-solid{background:#1f2229;border-radius:30px;overflow:hidden;
padding:clamp(40px,6vw,92px) clamp(22px,5vw,74px);
align-items:center;text-align:center}
.mh-glow{position:absolute;z-index:0;pointer-events:none;
right:-16%;top:-46%;width:76%;padding-top:76%;border-radius:50%;
background:radial-gradient(circle at 50% 50%,rgba(241,100,40,.6),rgba(241,100,40,0) 68%)}
.mh-solid-tx{position:relative;z-index:1;
display:flex;flex-direction:column;align-items:center;max-width:64ch}
.mh-v.is-solid .mh-title{color:#fff;font-size:clamp(30px,4.6vw,62px)}
.mh-v.is-solid .mh-say{color:#b9bdc5;max-width:58ch;margin-top:clamp(16px,1.8vw,24px)}
.mh-v.is-solid .mh-btn{align-self:center;margin-top:clamp(24px,2.6vw,36px)}
/* ── Вариант 3. Цветовое пятно, которое медленно живёт само ───────────
Абстракция без предметов: три размытых пятна тихо смещаются по правой
половине зоны, текст лежит поверх слева. Ходы длинные, по сорок и
больше секунд, чтобы движение читалось краем глаза, а не дёргало.
При запрете анимации в системе пятна замирают. */
.mh-v.is-field{background:#f4f5f7;border-radius:30px;overflow:hidden;
padding:clamp(38px,5.6vw,84px) clamp(22px,4.6vw,68px)}
.mh-field-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mh-blob{position:absolute;display:block;filter:blur(64px);
border-radius:58% 42% 37% 63% / 45% 55% 45% 55%}
.mh-blob.b1{width:46%;padding-top:46%;right:1%;top:-18%;background:var(--lime);opacity:.66;
animation:mh-drift-a 46s ease-in-out infinite}
.mh-blob.b2{width:42%;padding-top:42%;right:20%;bottom:-26%;background:#ffd9c7;opacity:.92;
animation:mh-drift-b 58s ease-in-out infinite}
.mh-blob.b3{width:26%;padding-top:26%;right:42%;top:14%;background:var(--amber);opacity:.5;
animation:mh-drift-c 68s ease-in-out infinite}
@keyframes mh-drift-a{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(-9%,12%) scale(1.14)}}
@keyframes mh-drift-b{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(11%,-10%) scale(.88)}}
@keyframes mh-drift-c{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(-14%,-8%) scale(1.22)}}
@media(prefers-reduced-motion:reduce){.mh-blob{animation:none}}
.mh-field-tx{position:relative;z-index:1;max-width:60ch}
.mh-v.is-field .mh-title{font-size:clamp(30px,4.4vw,60px)}
.mh-v.is-field .mh-say{margin-top:clamp(16px,1.8vw,24px);max-width:52ch}
.mh-v.is-field .mh-btn{margin-top:clamp(24px,2.6vw,36px)}
/* ── Вариант 4. Крупная предметная сцена силуэтом ─────────────────────
Нарисовано намеренно не так, как значки в плитках: только сплошные
заливки, ни одного контура и ни одной тонкой линии. Веер карт крупный
и краями уходит за поле зоны, поэтому читается как кадр, а не значок.
Обрезку даёт сама картинка своим режимом заполнения. */
.mh-v.is-scene{background:#ffd9c7;border-radius:30px;overflow:hidden;
display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
align-items:center;justify-content:normal}
.mh-scene-tx{position:relative;z-index:1;
padding:clamp(38px,5.2vw,78px) clamp(18px,2.6vw,40px)
clamp(38px,5.2vw,78px) clamp(22px,4.6vw,68px)}
.mh-v.is-scene .mh-title{font-size:clamp(30px,4vw,52px)}
.mh-v.is-scene .mh-say{margin-top:clamp(16px,1.8vw,24px);color:#5a2c14}
.mh-v.is-scene .mh-btn{margin-top:clamp(24px,2.6vw,36px);display:inline-flex}
.mh-scene-art{position:relative;align-self:stretch;overflow:hidden;
min-height:clamp(250px,27vw,380px)}
.mh-scene-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mh-scene-art .sil-ink{fill:#1f2229}
.mh-scene-art .sil-hot{fill:var(--lime)}
.mh-scene-art .sil-paper{fill:#fff}
.mh-scene-art .sil-deep{fill:#5a2c14}
/* ── Точки переключения. Вид и поведение те же, что у слайдера главной:
кружок, у текущего варианта вытянутая полоска. Точки стоят под зоной
на чёрном фоне сайта, поэтому они белые. */
.mh-dots{display:flex;justify-content:center;gap:10px;margin-top:clamp(18px,2vw,26px)}
.mh-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;
cursor:pointer;background:rgba(255,255,255,.28);transition:width .2s, background .2s}
.mh-dots button:hover{background:rgba(255,255,255,.6)}
.mh-dots button.on{background:#fff;width:28px}
.mh-dots button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
/* ── Граница между главным экраном и полотном держит сам фон: чёрное поле
сверху, белый лист с крупным скруглением снизу. Отдельная линия не нужна.
Крошки стали первым, что стоит на полотне, и своего нижнего отступа им
хватает: второй отступ у плиток давал двойную дыру. */
.mq-crumbs+.mq-grid{margin-top:0}
/* ── Узкие окна ──────────────────────────────────────────────────────── */
@media(max-width:860px){
.mh-v.is-scene{grid-template-columns:1fr}
.mh-scene-tx{padding:clamp(30px,5vw,48px) clamp(22px,4.6vw,44px) clamp(22px,3vw,30px)}
.mh-scene-art{min-height:clamp(210px,42vw,300px)}
}
@media(max-width:680px){
.mh-v.is-solid,.mh-v.is-field,.mh-v.is-scene{border-radius:22px}
.mh-type-low{grid-template-columns:1fr;column-gap:0}
.mh-type-low .mh-says,.mh-type-low .mh-say,.mh-type-low .mh-btn{grid-column:1}
.mh-v.is-solid{padding:clamp(32px,7vw,44px) clamp(20px,5vw,28px);text-align:left;align-items:flex-start}
.mh-solid-tx{align-items:flex-start}
.mh-v.is-solid .mh-btn{align-self:flex-start}
.mh-v.is-field{padding:clamp(32px,7vw,44px) clamp(20px,5vw,28px)}
.mh-blob{filter:blur(46px)}
.mh-dots{margin-top:18px}
}
/* Самые узкие окна. В трёх вариантах с подложкой заголовок живёт внутри поля
с отступами, поэтому там он мельче, чем в первом варианте, где стоит прямо
на белом. Иначе единственное длинное слово упирается в края поля. */
@media(max-width:520px){
.mh-v.is-solid .mh-title,
.mh-v.is-field .mh-title,
.mh-v.is-scene .mh-title{font-size:clamp(23px,6.4vw,30px)}
}
/* Самые узкие телефоны, триста двадцать точек. Там длинное слово заголовка и
надпись на кнопке перестают помещаться в поле варианта, поэтому поля полей
ужимаются, а кнопка идёт мелким кеглем. Надпись на кнопке не меняется. */
@media(max-width:430px){
.mh-v.is-solid,.mh-v.is-field{padding-left:20px;padding-right:20px}
.mh-scene-tx{padding-left:20px;padding-right:20px}
.mh-v.is-solid .mh-title,
.mh-v.is-field .mh-title,
.mh-v.is-scene .mh-title{font-size:clamp(20px,6.4vw,30px)}
}
@media(max-width:365px){
.mh-btn{padding-left:18px;padding-right:18px;font-size:12px}
}
/* Пятна третьего варианта на телефоне. Размеры у них в долях ширины, поэтому
в узком и высоком поле они сбивались в верхний угол и низ оставался пустым.
Здесь они крупнее и разведены по всей высоте. */
@media(max-width:680px){
.mh-blob.b1{width:88%;padding-top:88%;right:-20%;top:-12%}
.mh-blob.b2{width:82%;padding-top:82%;right:12%;bottom:-16%}
.mh-blob.b3{width:58%;padding-top:58%;right:34%;top:30%}
}
/* Свечение второго варианта на телефоне. В широком поле оно висит в правом
верхнем углу, в узком уходило за край целиком и заливка оставалась голой.
Здесь оно крупнее и заходит в поле. */
@media(max-width:680px){
.mh-glow{right:-34%;top:-14%;width:124%;padding-top:124%}
}
/* ═══ КАРТОЧКИ ТОЛЬКО БЕЛЫЕ И ТОЛЬКО ЧЁРНЫЕ ══════════════════════════════
Решение владельца 11 сентября 2026: промежуточных серых подложек на
странице мультиэквайринга нет. Светлая карточка чисто белая, тёмная чисто
чёрная. Чтобы белая карточка не сливалась с белым полотном, её держит
тень, снятая с образца t2: смещение вниз 4, размытие 12, цвет с прозрачностью.
Правила ограничены этой страницей меткой mq-long, остальные девять страниц
сайта их не видят. */
.mq-long .mq-cell,
.mq-long .mq-col,
.mq-long .mq-calc,
.mq-long .mq-card,
.mq-long .mq-qt,
.mq-long .mq-tile,
.mq-long .mq-strip,
.mq-long .mq-mt,
.mq-long .mq-step,
.mq-long .mq-ask-pane,
.mq-long .mq-ask-art{
background:#fff;
box-shadow:0 4px 12px rgba(31,34,41,.15);
}
.mq-long .mq-cell.is-dark,
.mq-long .mq-col.is-ours,
.mq-long .mq-card.is-dark,
.mq-long .mq-qt.is-dark,
.mq-long .mq-tile.is-dark,
.mq-long .mq-mt.is-dark,
.mq-long .mq-band{
background:#000;
box-shadow:0 4px 12px rgba(31,34,41,.15);
}
/* Наведение: раньше подложка светлела до серого, теперь вместо этого
поднимается тень. Цвет карточки при наведении не меняется. */
.mq-long .mq-cell:hover,
.mq-long .mq-mt:hover,
.mq-long .mq-step:hover,
.mq-long .mq-qt:hover,
.mq-long .mq-tile:hover{
background:#fff;
box-shadow:0 8px 20px rgba(31,34,41,.20);
}
.mq-long .mq-cell.is-dark:hover,
.mq-long .mq-mt.is-dark:hover,
.mq-long .mq-qt.is-dark:hover,
.mq-long .mq-tile.is-dark:hover{
background:#000;
box-shadow:0 8px 20px rgba(31,34,41,.20);
}
/* Белая карточка внутри белой плашки вопросов осталась бы невидимой без
собственной тени, поэтому её тень тоже поднята. */
.mq-long .mq-ask-card{box-shadow:0 4px 12px rgba(31,34,41,.15)}
/* ═══ ТРИ РОЛИ: НИТЬ НАСКВОЗЬ ═════════════════════════════════════════════
Раздел «Как работает мультиэквайринг», выбран владельцем 11 сентября 2026
и поставлен первым разделом страницы. Правила висят на метке mq-long,
остальные девять страниц сайта их не видят.
Устройство. Три карточки в ряд, средняя чёрная, крупнее соседей и поднята
над ними: светлые карточки опущены вниз. Через весь ряд на уровне названий
ролей идёт одна прямая черта. За карточками она спрятана и видна только в
просветах, поэтому читается как единая линия, продетая сквозь три роли.
Наконечников нет вовсе: по решению владельца связь держит простая черта.
Три числа держат всю геометрию и объявлены один раз на ряду:
--off насколько опущены светлые карточки (отсюда «Программа» поднята);
--g просвет между карточками;
--tl высота черты от верха ряда. Взята заведомо внутри самой низкой
карточки, чтобы черта не выскочила поверх или ниже. */
.mq-long .mq-roles{--off:clamp(34px,3.6vw,52px);--g:clamp(16px,2.2vw,32px);
--tl:clamp(92px,8.4vw,126px);
position:relative;display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.26fr) minmax(0,1fr);
gap:var(--g);align-items:start}
/* Черта спокойного серого: на белом полотне читается, но не спорит с текстом.
Оранжевой её не делаем. Оттенок задан владельцем 12 сентября 2026, один
на все соединительные линии сайта. */
.mq-long .mq-thread{position:absolute;left:0;right:0;top:var(--tl);
height:2px;background:#e8e8e8;z-index:0}
/* Карточки по новому языку страницы: светлая чисто белая и держится тенью,
тёмная чисто чёрная. Серых подложек нет. При наведении меняется только
тень, цвет карточки остаётся прежним. */
.mq-long .mq-role{position:relative;z-index:1;
background:#fff;box-shadow:0 4px 12px rgba(31,34,41,.15);
border-radius:22px;padding:26px 26px 28px;margin-top:var(--off);
transition:box-shadow .18s ease}
.mq-long .mq-role:hover{box-shadow:0 8px 20px rgba(31,34,41,.20)}
/* Два признака у карточки роли разведены. «Чёрная» отвечает только за цвет,
«главная» за то, что карточка поднята и набрана крупнее. У «Программы» стоят
оба, у владельца бизнеса только цвет. */
.mq-long .mq-role.is-dark{background:#000}
/* Оранжевая карточка: фирменный оранжевый с белым набором. Набор белый, а не
тёмный, потому что оранжевый у нас глубокий и тёмный текст на нём вязнет.
Заливка с переходом сверху вниз, тот же, что у последнего шага подключения:
решение владельца 12 сентября 2026 для всех оранжевых карточек сайта. */
.mq-long .mq-role.is-orange{background:linear-gradient(180deg,#f7743a 0%,#f16428 100%)}
.mq-long .mq-role.is-orange .mq-cap{color:#fff}
.mq-long .mq-role.is-orange .mq-note{color:rgba(255,255,255,.78)}
.mq-long .mq-role.is-orange .mq-p{color:rgba(255,255,255,.92)}
/* Приглушённый оранжевый у последнего шага подключения. Правило стоит здесь,
чтобы перебить общую покраску шагов в белое, и держит цвет при наведении.
Тень та же серая, что у трёх соседей: своя коричневая под оранжевой
заливкой не читалась, карточка выглядела без тени вовсе (замечено
владельцем 12 сентября 2026). */
.mq-long .mq-step.is-orange,
.mq-long .mq-step.is-orange:hover{background:linear-gradient(180deg,#f7743a 0%,#f16428 100%)}
/* Тень у оранжевой карточки своя, тёплая и плотнее серой: серая под оранжевой
заливкой не читалась и карточка выглядела без тени и без отзыва на курсор
(замечено владельцем 12 сентября 2026). Под курсором тень заметно выше. */
.mq-long .mq-step.is-orange{box-shadow:0 6px 18px rgba(178,58,16,.40)}
.mq-long .mq-step.is-orange:hover{box-shadow:0 14px 30px rgba(178,58,16,.52)}
/* Третий шаг: белый фон плюс тонкая серая обводка, в покое и под курсором.
Вторым слоем идёт та же тень, что у соседей, под курсором она поднимается. */
.mq-long .mq-step.is-warm{background:#fff;
box-shadow:0 0 0 1px #f1f1f1,0 4px 12px rgba(31,34,41,.15)}
.mq-long .mq-step.is-warm:hover{background:#fff;
box-shadow:0 0 0 1px #f1f1f1,0 8px 20px rgba(31,34,41,.20)}
.mq-long .mq-role.is-lead{margin-top:0;padding:34px 32px 40px}
.mq-long .mq-role .mq-cap{margin:0;font-size:clamp(19px,1.7vw,23px);line-height:1.14}
.mq-long .mq-role .mq-note{margin-top:8px;line-height:1.4;color:#7a7e86}
.mq-long .mq-role .mq-p{margin-top:12px}
.mq-long .mq-role.is-dark .mq-cap{color:#fff}
.mq-long .mq-role.is-lead .mq-cap{font-size:clamp(21px,1.9vw,26px)}
.mq-long .mq-role.is-dark .mq-note{color:#9aa0aa}
.mq-long .mq-role.is-dark .mq-p{color:#b9bdc5}
/* Узкое окно: цепь поворачивается вертикально. Черта уходит влево и
становится основанием столбика, перепад высот снимается. */
@media(max-width:1000px){
.mq-long .mq-roles{grid-template-columns:1fr;gap:12px;
padding-left:clamp(18px,4vw,28px);border-left:2px solid #9aa0aa}
.mq-long .mq-thread{display:none}
.mq-long .mq-role,.mq-long .mq-role.is-lead{margin-top:0}
.mq-long .mq-role .mq-p{max-width:72ch}
}
@media(max-width:680px){
.mq-long .mq-role{padding:22px 20px 24px}
.mq-long .mq-role.is-lead{padding:24px 20px 28px}
}
/* ═══ ДВЕ ЗОНЫ ВО ВСЮ ШИРИНУ ОКНА ════════════════════════════════════════
Решение владельца 11 сентября 2026: сверху чёрная полоса главного экрана
на всю ширину, ниже белое полотно тоже на всю ширину. Скруглений и полей
по краям у полотна больше нет, боковые чёрные поля убраны. Фон задан
внешним блокам, содержание по-прежнему держит контейнер, поэтому строки
не расползаются. Разделительные линии между разделами убраны. */
.mq-long .mq-topzone{background:var(--bg)}
.mq-long .mq-white{background:#fff;color:#1f2229}
.mq-long .mq-sheet{background:transparent;border-radius:0;
padding-left:0;padding-right:0}
.mq-long .mq-sec.is-rule{border-top:0;padding-top:clamp(38px,4.4vw,66px)}
/* ═══ ПОДВАЛ ВО ВСЮ ШИРИНУ И ЧЁРНЫЙ ══════════════════════════════════════
Решение владельца 11 сентября 2026, пока только на странице
мультиэквайринга: подвал занимает всю ширину окна, без скруглений и
боковых полей, подложка чисто чёрная вместо тёмно-серой. Метка foot-full
стоит только на этой странице, остальные девять держат прежний подвал. */
.foot-full{margin-top:0;background:#000}
.foot-full .foot-card{background:#000;border-radius:0;
padding-left:0;padding-right:0}
/* Чёрные карточки на белом полотне выглядели плоскими рядом с белыми: тень
с прозрачностью 0,15 на них почти не читалась. Даём им собственную тень,
плотнее и с большим разлётом, чтобы объём был такой же, как у белых. */
.mq-long .mq-cell.is-dark,
.mq-long .mq-col.is-ours,
.mq-long .mq-card.is-dark,
.mq-long .mq-qt.is-dark,
.mq-long .mq-tile.is-dark,
.mq-long .mq-mt.is-dark,
.mq-long .mq-role.is-dark,
.mq-long .mq-role.is-orange,
.mq-long .mq-band{box-shadow:0 10px 28px rgba(0,0,0,.34)}
.mq-long .mq-cell.is-dark:hover,
.mq-long .mq-mt.is-dark:hover,
.mq-long .mq-qt.is-dark:hover,
.mq-long .mq-tile.is-dark:hover{box-shadow:0 16px 40px rgba(0,0,0,.42)}
/* ═══ ЕДИНЫЕ РАЗМЕРЫ ЗАГОЛОВКОВ НА ВСЁМ САЙТЕ ════════════════════════════
Требование владельца 11 сентября 2026. Заголовок одного уровня имеет один
размер на любой странице, других размеров у заголовков не бывает.
Все три уровня набираются самым жирным начертанием Montserrat, прописными.
первый уровень 32..58 точек
второй уровень 26..42 точки
третий уровень 21..29 точек
Правило стоит последним в файле и перекрывает все прежние. */
/* Первый уровень */
h1,.disp,.mq-title,.mh-title,.mh-v.is-type .mh-title,.doc h1,.pr-body h1{
font-family:'Montserrat',sans-serif !important;font-weight:900 !important;
font-size:clamp(32px,4.4vw,58px) !important;line-height:.94 !important;
letter-spacing:-.01em !important;text-transform:uppercase !important}
/* Второй уровень */
h2,.h2,.sec-head .h2,.whatis .h2,.mq-h,.mq-cta h2,
.doc h2,.doc .ask-h,.pr-body h2{
font-family:'Montserrat',sans-serif !important;font-weight:900 !important;
font-size:clamp(26px,3.2vw,42px) !important;line-height:1 !important;
letter-spacing:-.01em !important;text-transform:uppercase !important}
/* Третий уровень */
h3,.h3,.pc-title,.tile h3,.step h3,.f-t,
.mq-ct,.mq-cell.is-wide .mq-ct,
.mq-cap,.mq-kicker,.mq-q>summary,.doc h3,.pr-body h3,
.mq-long .mq-mt .mq-cap,.mq-long .mq-mt.is-wide .mq-cap,
.mq-long .mq-tile.is-wide .mq-cap,.mq-long .mq-role .mq-cap,
.mq-long .mq-role.is-dark .mq-cap,
.mq-long .mq-ask-card .mq-q>summary,.mq-long .mq-acc>.mq-q>summary{
font-family:'Montserrat',sans-serif !important;font-weight:900 !important;
font-size:clamp(21px,1.68vw,29px) !important;line-height:1.08 !important;
letter-spacing:-.01em !important;text-transform:uppercase !important}
/* Строки раскрытий светлее остальных заголовков третьего уровня: решение
владельца 12 сентября 2026, жирное начертание из них убрано. Шрифт,
размер и прописные те же, меняется только насыщенность. Касается двух
групп на странице: выгоды мультиэквайринга и вопросы с ответами. */
.mq-ask-card .mq-q>summary,
.mq-long .mq-ask-card .mq-q>summary{font-weight:600 !important}
/* Слово в заголовке переносится только целиком. Перенос по слогам с чёрточкой
(«ОД-НИМ») владелец забраковал 11 сентября. Разрыв самого слова остаётся
только как аварийный, когда слово шире колонки: иначе на телефоне длинное
слово вылезало за край и давало прокрутку вбок. */
h1,h2,h3,.disp,.h2,.h3,.mq-h,.mq-ct,.mq-cap,.mq-title,.mh-title,.pc-title{
overflow-wrap:break-word;word-break:normal;hyphens:none !important}
/* ======================================================================
ПЛАВНЫЕ ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ (решение владельца 17 сентября 2026)
Было: при переходе по ссылке браузер перерисовывал страницу целиком,
отсюда белая вспышка и прыжок шапки. Владелец сказал, что выглядит плохо.
Стало: браузер снимает кадр старой страницы, кадр новой и перетекает
между ними. Шапка и подвал помечены как один и тот же элемент на всех
страницах, поэтому они остаются на месте, а меняется только содержимое.
Работает в Chrome, Edge и Safari 18 и новее. Браузеры, которые этого
не умеют, просто грузят страницу как раньше: правило для них невидимо,
сломать ничего не может.
Засада на будущее: имя перехода должно быть уникальным на странице.
Если когда-нибудь появится вторая шапка с этим же классом, браузер
молча отключит переходы на всём сайте. Проверять замером, а не на глаз.
====================================================================== */
@view-transition{navigation:auto}
/* Шапка и подвал не мигают, браузер понимает, что это тот же самый элемент */
header.site{view-transition-name:pm-header}
footer.site{view-transition-name:pm-footer}
/* ПРОЯВЛЕНИЕ СНЯТО 4 октября 2026 по решению владельца: «сайт загружается,
он тёмный, а потом светлее становится, убери этот эффект».
Было: уходящая страница растворялась, приходящая всплывала снизу из
прозрачности за полсекунды. Под обеими в этот миг виден чёрный фон, и
замер показал ровно то, что владелец видел глазом: на переходе яркость
экрана падала с 202 до 30 (почти чёрный) и потом полсекунды ползла обратно.
Стало: кадры меняются сразу, без растворения и без сдвига. Сам переход
оставлен включённым, поэтому шапка и подвал по-прежнему стоят на месте и
белой вспышки при переходе нет — ради этого он и заводился 17 сентября.
Прежние правила лежат ниже выключенными, вернуть — минутное дело. */
::view-transition-old(root),
::view-transition-new(root){animation:none}
/* выключено 4 октября 2026, см. выше
::view-transition-old(root){animation:pm-page-out .3s ease both}
::view-transition-new(root){animation:pm-page-in .5s ease .08s both}
*/
@keyframes pm-page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes pm-page-in{from{opacity:0;transform:translateY(12px)}}
/* Шапка и подвал стоят неподвижно, пока перетекает содержимое */
::view-transition-old(pm-header),::view-transition-new(pm-header),
::view-transition-old(pm-footer),::view-transition-new(pm-footer){
animation:none;mix-blend-mode:normal}
/* Если человек в настройках телефона или компьютера отключил анимации,
уважаем это и показываем страницу сразу, без движения. */
@media (prefers-reduced-motion:reduce){
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*){animation:none !important}
}
/* ======================================================================
ОТКЛИК НА НАЖАТИЕ (решение владельца 18 сентября 2026)
Полоса вверху окна, притухание нажатой ссылки и плашка на случай,
когда связь не отвечает. Появлением управляет paymatic-motion.js.
Зачем. Владелец сказал прямо: если интернета нет, а человек щёлкнул,
мы обязаны показать, что нажатие принято. Это важнее любой анимации.
====================================================================== */
.pm-bar{position:fixed;top:0;left:0;right:0;height:4px;z-index:9999;
pointer-events:none;opacity:0;transition:opacity .18s ease}
.pm-bar.is-on{opacity:1}
/* Скоростью заполнения управляет скрипт, здесь её намеренно нет.
Иначе правило из стилей перебивает разгон и торможение полосы. */
/* Полоса растёт сжатием, а не шириной: правка 4 октября 2026. Рост по
ширине заставлял браузер пересчитывать раскладку каждый кадр, и в Safari
на переходе от этого спотыкалась бегущая стена на «Цифровой витрине». */
.pm-bar i{display:block;height:100%;width:100%;
transform:scaleX(0);transform-origin:0 50%;
background:linear-gradient(90deg,#f7743a,#f16428);
box-shadow:0 0 12px rgba(241,100,40,.7)}
.pm-bar.is-done{opacity:0;transition:opacity .34s ease}
/* Нажатая ссылка притухает и держится такой, пока идёт загрузка */
.pm-nazhata{opacity:.55;transition:opacity .12s ease}
html.pm-zhdyom{cursor:progress}
html.pm-zhdyom a{cursor:progress}
/* Плашка снизу, когда связь не отвечает */
.pm-plashka{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);
z-index:9999;display:flex;align-items:center;gap:14px;
background:#141414;color:#fff;border:1px solid #2a2a2a;border-radius:14px;
padding:14px 14px 14px 18px;box-shadow:0 10px 28px rgba(0,0,0,.34);
font-family:'Manrope',sans-serif;font-size:15px;line-height:1.35;
opacity:0;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.3,1);
max-width:calc(100vw - 32px)}
.pm-plashka.is-on{opacity:1;transform:translate(-50%,0)}
.pm-plashka button{font-family:'Montserrat',sans-serif;font-weight:800;
font-size:12px;letter-spacing:.05em;text-transform:uppercase;
background:#f16428;color:#fff;border:0;border-radius:999px;
padding:10px 16px;cursor:pointer}
.pm-plashka .pm-zakryt{background:transparent;color:#8b9098;font-size:20px;
font-weight:400;letter-spacing:0;padding:4px 8px;line-height:1}
@media (max-width:520px){
.pm-plashka{left:16px;right:16px;bottom:16px;transform:translateY(16px);
max-width:none}
.pm-plashka.is-on{transform:translateY(0)}
}
/* Человек отключил анимации в настройках. Полоса остаётся, она несёт
смысл, а не украшает. Убираем только плавность появления. */
@media (prefers-reduced-motion:reduce){
.pm-bar,.pm-bar i,.pm-plashka{transition:none !important}
}
/* Правка 25 сентября 2026: переходы по плиткам возвращены по решению
владельца. Прежний запрет опирался на переворот, а переворота больше нет:
без перехода плитка была бы немым прямоугольником. */
.pmos .pcell{cursor:pointer}
/* Выпадающее меню гаснет мгновенно в момент нажатия. Раньше оно
открывалось по наведению и продолжало висеть, пока грузилась новая
страница, потому что курсор никуда не делся. Замечание владельца
18 сентября 2026. Класс ожидания ставит на страницу paymatic-motion.js. */
html.pm-zhdyom .drop{
opacity:0 !important;visibility:hidden !important;
transform:translateY(-6px) !important;transition:none !important}
html.pm-zhdyom .has-drop:hover > a{color:inherit}
html.pm-zhdyom .has-drop:hover a .caret{transform:none}
/* Меню спит, пока человек не пошевелился. Нужно сразу после перехода,
когда курсор по инерции остался над пунктом меню и тот открывается
сам собой. Класс снимает paymatic-motion.js при первом движении. */
html.pm-menyu-spit .drop{
opacity:0 !important;visibility:hidden !important;
transform:translateY(-6px) !important;transition:none !important}
html.pm-menyu-spit .has-drop:hover a .caret{transform:none}
/* ── Единое оформление блоков, 21 сентября 2026 ────────────────────────
Эталон взят со страницы мультиэквайринга по требованию владельца:
светлый блок лежит на странице с мягкой тенью, тёмный с более глубокой.
До этого на части страниц блоки шли плоскими, и сайт выглядел собранным
из разных наборов. Фоны, скругления и размеры не трогаются, добавляется
только тень. */
.cta,.doc,.ask,.d7-sheet,.d7-strip,.rc-sheet,.pface{
box-shadow:0 4px 12px rgba(31,34,41,.15)}
.tile.dark,.d7-end,.rc-end,.dva-code{
box-shadow:0 10px 28px rgba(0,0,0,.34)}
/* ФОРМА ЗАЯВКИ В МОЗАИКЕ
Правка 25 сентября 2026: центральный широкий блок мозаики стал формой
заявки (задание владельца). Геометрия блока прежняя, картинка под ним
тоже: поменялось только содержимое. */
/* Блок больше не ссылка, поэтому отклика при наведении у него нет: поля не
должны ездить и зажигаться под курсором. */
.pmos .pcell.pform,
.pmos .pcell.pform:hover .pside,
.pmos .pcell.pform:focus-within .pside{transform:none;filter:none;cursor:default}
.pmos .pcell.pform .pside{transition:none}
/* Подпись под заголовком у формы стоит вплотную к нему, а не прижата к низу,
как на плитках-ссылках: ниже идут поля. */
.pmos .pcell.w4.pform .pc-text{margin:6px 0 0;padding-top:0}
/* Строка формы повторяет баннер: переключатель, поле, кнопка со стрелкой —
всё в одну линию одной высоты. */
.pform-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:18px;max-width:600px}
/* Переключатель способа связи: два значка в общей рамке, выбранный на бледно
оранжевом поле, как на баннере. */
.pform-kind{display:flex;flex:0 0 auto;border:1px solid rgba(0,0,0,.14);
border-radius:14px;overflow:hidden;background:#fff}
.pform-k{display:grid;place-items:center;width:52px;border:0;background:transparent;
color:#a3a9b4;cursor:pointer;padding:0;transition:background .2s ease,color .2s ease}
.pform-k+.pform-k{border-left:1px solid rgba(0,0,0,.12)}
.pform-k svg{width:22px;height:22px}
.pform-k.is-on{background:rgba(241,100,40,.14);color:var(--lime)}
.pform-in{
flex:1 1 220px;min-width:0;
padding:13px 16px;border-radius:14px;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.06);
color:#fff;font:inherit;font-size:15px;line-height:1.2;
transition:border-color .2s ease, background .2s ease}
.pform-in::placeholder{color:rgba(255,255,255,.55)}
.pform-in:focus{outline:none;border-color:var(--lime);background:rgba(255,255,255,.1)}
/* Кнопка без надписи, только стрелка — как на баннере. */
.pform-btn{
flex:0 0 auto;display:grid;place-items:center;
width:104px;border:0;border-radius:14px;
background:var(--lime);color:#fff;cursor:pointer;
transition:background .2s ease}
.pform-btn svg{width:24px;height:24px}
.pform-btn:hover{background:#d45823}
@media(max-width:900px){
/* На узких экранах у блока снимается заданная пропорция: переключатель
остаётся в строке с полем, а кнопка уходит под них во всю ширину. */
.pform-row{max-width:none}
.pform-in{flex:1 1 100%}
.pform-btn{width:100%;height:48px}
}
/* ОФОРМЛЕНИЕ БЛОКА ЗАЯВКИ
Правка 25 сентября 2026: под форму дан свой баннер (файл владельца) —
светлый, со значками письма и самолётика справа. Блок из тёмного стал
светлым, поэтому здесь переопределены цвета текста и полей.
На самом баннере нарисованы поле ввода и кнопка: кадр укрупнён и прижат
вправо, чтобы они ушли за край и не спорили с настоящей формой. */
.pmos .pcell.w4.pform[data-color].no-flip .pside{background:#fdfdfd}
/* Оформление справа — снимок владельца (файл от 25 сентября 2026): карточки
со значками почты и мессенджера и оранжевые линии с шариками. Вписан по
высоте, прижат вправо, левый край растушёван в фон блока, поэтому линии
уходят в белое без стыка. Рисовать это вёрсткой пробовали, владелец
забраковал. */
.pmos .pcell.w4.pform[data-color].no-flip .pside::after{
display:block;
background:url("contact-art.webp") right center/auto 100% no-repeat;
filter:none;
-webkit-mask-image:linear-gradient(to right,transparent 34%,#000 52%);
mask-image:linear-gradient(to right,transparent 34%,#000 52%)}
.pmos .pcell.w4.pform .pc-title{color:#141414}
.pmos .pcell.w4.pform .pc-text{color:#5a5a5a}
.pmos .pcell.w4.pform .pform-in{
border-color:rgba(0,0,0,.18);background:#fff;color:#141414}
.pmos .pcell.w4.pform .pform-in::placeholder{color:#8b8b8b}
.pmos .pcell.w4.pform .pform-in:focus{border-color:var(--lime);background:#fff}
/* Блок заявки не реагирует на наведение вовсе (просьба владельца
25 сентября 2026): ни свечения, ни роста. Прежние запреты стояли слабее
общего правила широкой плитки и не срабатывали — здесь точность выше,
и правило идёт последним в файле. */
/* Блок заявки не реагирует на наведение вовсе (просьба владельца
25 сентября 2026): ни свечения, ни роста, ни поджатия. Поджатие пробовали
тем же днём и забраковали. */
.pmos .pcell.w4.pform.no-flip .pside{transition:none}
@media(hover:hover) and (pointer:fine){
.pmos .pcell.w4.pform.no-flip:hover .pside,
.pmos .pcell.w4.pform.no-flip:focus-visible .pside,
.pmos .pcell.w4.pform.no-flip:focus-within .pside{
filter:none;transform:none;box-shadow:none;animation:none}
}
@media(max-width:900px){
/* На узкой плитке снимок убирается: место занимает форма, иначе значки
наезжают на подпись. */
.pmos .pcell.w4.pform[data-color].no-flip .pside::after{display:none}
}
/* Заголовок здесь короткий, поэтому кегль общий для широких блоков. */
/* Блок заявки ниже соседних широких блоков (просьба владельца): содержимого
тут меньше — заголовок и одна строка полей. */
.pmos .pcell.w4.pform[data-color].no-flip .pside{aspect-ratio:2160/330}
@media(max-width:900px){
/* На узких экранах пропорция снимается: блок растёт по содержимому, иначе
форма не помещается и обрезается. */
.pmos .pcell.w4.pform[data-color].no-flip .pside{aspect-ratio:auto}
}
/* Правка 25 сентября 2026: оранжевый в блоке заявки остаётся только на
снимке справа. Кнопка, подсветка выбранного значка и рамка блока —
нейтральные. */
/* Кнопка и выбранный значок в тоне тёмных баннеров главной (замер с плитки
оркестрации), а не чёрные. */
/* Кнопка отправки оранжевая — тем же приглушённым тоном, что на рисунке
справа и на тёмных баннерах главной. Под курсором чуть темнеет. */
.pmos .pcell.w4.pform .pform-btn{background:#db7233;transition:background .2s ease}
@media(hover:hover) and (pointer:fine){
.pmos .pcell.w4.pform .pform-btn:hover{background:#d45823}
}
.pmos .pcell.w4.pform .pform-btn:active{background:#b75a24}
.pmos .pcell.w4.pform .pform-k.is-on{background:rgba(29,36,42,.08);color:#1d242a}
.pmos .pcell.w4.pform .pform-in:focus{border-color:#1d242a}
@media(max-width:900px){
.pmos .pcell.w4.pform[data-color].no-flip .pside{
border-color:rgba(0,0,0,.12);box-shadow:none}
}
/* Никакого отклика на наведение в блоке заявки нет: рост, поджатие и
подсветку поля владелец забраковал 25 сентября 2026. Осталась только
отметка активного поля под набор — без неё не видно, куда печатаешь. */
.pmos .pcell.w4.pform .pform-in{transition:border-color .2s ease}
/* Рамка активного поля мягкая: сплошной тёмный контур был слишком резким
на светлом блоке (правка 25 сентября 2026). */
.pmos .pcell.w4.pform .pform-in:focus{border-color:rgba(29,36,42,.34);box-shadow:none}
/* Выбранный способ связи отмечен тёмным значком на светлой подложке.
Оранжевый здесь пробовали 25 сентября 2026 и вернули обратно.
Под курсором значок темнеет, а подложка под ним чуть проступает: она
вчетверо слабее, чем у выбранного, чтобы их нельзя было спутать. */
@media(hover:hover) and (pointer:fine){
.pmos .pcell.w4.pform .pform-k:not(.is-on):hover{
background:rgba(29,36,42,.02);color:#1d242a}
}
/* ============================================================
СЕКЦИЯ «КАК ВЫСТРАИВАЕМ ПЛАТЁЖНУЮ ИНФРАСТРУКТУРУ»
Выбрана владельцем 26 сентября 2026 из четырёх раскладок.
Светлая вставка на тёмной странице: вся секция лежит на одной
белой карточке во всю ширину колонки. Приём взят у светлых плит
мозаики (.tile.white) и у светового полотна страниц-документов
(.doc): тот же белый, тот же радиус var(--r) и та же внутренняя
посадка clamp(28px,4.6vw,68px).
Внутри карточки заголовок сверху, под ним три этапа в три колонки,
разделённые тонкими вертикальными линиями нейтрального тона.
На телефоне колонки встают одна под другой, вертикальные линии
заменяются горизонтальными.
Оранжевого в секции нет вовсе: номера, линии и подложка нейтральные.
============================================================ */
.stD-card{
background:#fff;color:#141414;
border-radius:var(--r);
padding:clamp(28px,4.6vw,68px);
}
.stD-title{
font-family:'Montserrat',sans-serif;font-weight:800;
text-transform:uppercase;line-height:1;letter-spacing:-.01em;
font-size:clamp(26px,4.4vw,52px);
color:#141414;margin:0;max-width:30ch;
}
/* Три колонки с общими дорожками: номер, заголовок этапа и абзац стоят в
одних и тех же строках, поэтому строки текста у соседей идут вровень,
как бы ни переносились заголовки. */
.stD-grid{
display:grid;grid-template-columns:repeat(3,1fr);
grid-template-rows:auto auto auto;
margin-top:clamp(30px,3.6vw,52px);
}
.stD-col{
box-sizing:border-box;
padding:0 clamp(18px,2.2vw,36px);
display:grid;grid-template-rows:subgrid;grid-row:span 3;
align-content:start;
}
.stD-col:first-child{padding-left:0}
.stD-col:last-child{padding-right:0}
/* Тонкая линия между колонками. Нейтральный серый, тот же, что у рамок
на светлых полотнах сайта. */
.stD-col + .stD-col{border-left:1px solid #e4e4e4}
.stD-num{
font-family:'Montserrat',sans-serif;font-weight:900;
font-size:clamp(38px,3.6vw,54px);line-height:1;
color:#c9c9c9;
margin:0 0 clamp(14px,1.6vw,22px);
}
.stD-h{
font-family:'Montserrat',sans-serif;font-weight:800;
text-transform:uppercase;line-height:1.06;letter-spacing:-.01em;
font-size:clamp(17px,1.55vw,22px);
color:#141414;margin:0 0 12px;
}
.stD-t{
font-size:16px;line-height:1.5;color:#4a4a4a;margin:0;
}
@media(max-width:860px){
.stD-grid{grid-template-columns:1fr;grid-template-rows:none;margin-top:clamp(24px,3vw,36px)}
.stD-col{padding:0;display:block;grid-row:auto}
.stD-col + .stD-col{
border-left:0;border-top:1px solid #e4e4e4;
margin-top:26px;padding-top:26px;
}
.stD-num{font-size:40px;margin-bottom:14px}
}
@media(max-width:640px){
.stD-card{border-radius:var(--r-sm)}
.stD-t{font-size:15px}
}
/* СЕКЦИЯ WHITE LABEL под коннекторами. Раскладка выбрана владельцем
26 сентября 2026 из четырёх; рамка вокруг карточки снята по его просьбе. */
/* Картинка кабинета лежит фоном справа и вписана по высоте карточки, а не
растянута: при растяжении окно кабинета резалось. Тон подложки взят
замером с левого края самой картинки (16,23,31), поэтому стыка между
картинкой и фоном не видно. */
.wlB-card{
position:relative;
background:#10171f;
border-radius:var(--r);
padding:clamp(26px,4vw,48px);
overflow:hidden;
}
/* Картинка вынесена в отдельный слой под текстом, её края растушёваны в фон
карточки. Без растушёвки кромка кадра читалась ровной линией: тон картинки
у краёв гуляет от 13 до 23 единиц, а фон ровный, и стык было видно. */
.wlB-card::before{
content:'';position:absolute;top:0;right:0;bottom:0;width:66%;
background:url('white-label-tile.webp') right center / auto 76% no-repeat;
pointer-events:none;
}
/* Текст занимает левую половину карточки и не заходит на окно кабинета. */
.wlB-card > *{position:relative;max-width:min(52%,560px)}
/* Заголовок — обычный .h2 сайта, ограничен по ширине строки, чтобы на широком
экране не растягивался во всю карточку. */
.wlB-h{max-width:26ch;margin:0 0 clamp(22px,2.6vw,34px)}
/* Две колонки с абзацами. minmax(0,1fr) вместо 1fr: без нуля в минимуме
колонка грид не даёт тексту сжаться и вылезает за край на узком экране. */
.wlB-cols{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:clamp(14px,1.6vw,20px);
padding-top:clamp(20px,2.4vw,30px);
border-top:1px solid var(--line);
}
.wlB-cols>p{min-width:0;margin:0;overflow-wrap:break-word}
/* Первый абзац чуть крупнее и светлее второго: это вводная строка, а не
подзаголовок — своего текста у неё нет, набор тот же, Manrope. */
.wlB-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#d9d9dc}
.wlB-text{font-size:17px;line-height:1.55;color:var(--muted)}
/* Ссылка внизу слева. Набор как у ссылок и кнопок сайта: Montserrat, очень
жирный, прописными. Значок стрелки тот же, что на кнопках. Перенос
разрешён (flex-wrap) — на очень узком экране строка ляжет в две, но за
край не выйдет. */
.wlB-more{
display:inline-flex;align-items:center;flex-wrap:wrap;gap:12px;
max-width:100%;
margin-top:clamp(26px,3vw,38px);
font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:13px;letter-spacing:.03em;line-height:1.2;
color:var(--ink);
transition:color .18s ease;
}
.wlB-more-t{border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:3px;
transition:border-color .18s ease}
.wlB-more-a{
width:34px;height:34px;flex:none;border-radius:999px;
background:rgba(255,255,255,.10);
display:grid;place-items:center;
transition:background .18s ease;
}
.wlB-more-a svg{width:17px;height:17px}
/* Отклик только цветом: ни подъёма, ни роста, ни сдвига стрелки. */
.wlB-more:hover{color:#ffffff}
.wlB-more:hover .wlB-more-t{border-color:rgba(255,255,255,.62)}
.wlB-more:hover .wlB-more-a{background:rgba(255,255,255,.20)}
.wlB-more:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:4px;border-radius:6px}
/* Узкий экран: окно кабинета в ширину карточки не помещается, поэтому
картинка уезжает вниз и показывается нижней полосой, а текст получает
под собой место под неё. */
@media(max-width:1000px){
.wlB-card::before{
top:auto;left:0;width:auto;height:46vw;
background-position:right bottom;
background-size:150% auto;
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%);
mask-image:linear-gradient(to bottom, transparent 0, #000 22%);
}
.wlB-card{padding-bottom:calc(clamp(26px,4vw,48px) + 42vw)}
.wlB-card > *{max-width:100%}
}
@media(max-width:820px){
.wlB-cols{gap:16px}
.wlB-h{max-width:20ch}
}
@media(max-width:420px){
.wlB-more{font-size:12px;gap:10px}
}
@media(prefers-reduced-motion:reduce){
.wlB-more,.wlB-more-t,.wlB-more-a{transition:none}
}
/* ══════════════════════════════════════════════════════════════════
ШАБЛОН ВНУТРЕННЕЙ СТРАНИЦЫ (метки d7). Перенесён из страницы
платёжной оркестрации в общий файл 29 сентября 2026: владелец
решил привести к этому виду страницы раздела «Решения для
бизнеса». Правила те же, ни одно значение не менялось.
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════
ПЛАТЁЖНАЯ ОРКЕСТРАЦИЯ, вариант Д-7.
Обрамление страницы взято у варианта Д-2 без изменений: чёрная зона
сверху, белый лист со скруглёнными углами, тёмная плита внизу листа,
общая шапка, общий подвал, плашка про cookie.
Внутри листа устройство другое и повторяет ход страницы «Онлайн-касса»:
разделы идут не плитками, а лентой. Заголовок стоит слева отдельной
колонкой, текст справа; между разделами врезка с оранжевой чертой и
крупной наклонной строкой; два раздела раскрыты широко, с крупным
рисунком справа; поперёк листа лежит светлая полоса с кнопкой.
Рисунки нарисованы здесь же и предметные: пульт управления, панель
подключений со шнурами, щиток с двумя автоматами, сводный лист с
показателями. Значки у коротких разделов той же породы: стопка пластин,
поворотная ручка, экран, два реестра, щит, ползунок. Схем из блоков со
стрелками на странице нет — прямой запрет владельца.
Размеры заголовков не задаются: на сайте действует общее правило единых
размеров (конец paymatic.css), здесь только цвет и поля.
Оранжевый стоит только на белом листе. В чёрной зоне и на тёмной плите
все штрихи белые и серые: решение владельца 20 сентября 2026.
══════════════════════════════════════════════════════════════════════ */
.d7{
--d7-ink:#1f2229; /* основной набор на белом */
--d7-mut:#5a5e66; /* второстепенный набор на белом */
padding:0 0 26px;
hyphens:none;
}
.d7-top{background:var(--bg)}
/* ── Первый экран. Чёрный, без подложек ─────────────────────────────── */
.d7-hero{
display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,24vw,340px);
gap:clamp(30px,4vw,72px);align-items:center;
padding:clamp(24px,3.2vw,56px) 0 clamp(44px,5.6vw,92px);
}
.d7-hero-tx{min-width:0}
.d7-kick{
display:inline-flex;align-items:center;gap:12px;
margin:0 0 clamp(18px,2vw,28px);
font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:12px;letter-spacing:.12em;color:var(--muted);
}
.d7-kick::before{content:'';width:26px;height:2px;border-radius:2px;
background:rgba(255,255,255,.85)}
.d7-h1{color:#fff;margin:0}
.d7-rule{display:block;height:1px;background:rgba(255,255,255,.16);
margin:clamp(22px,2.6vw,38px) 0 clamp(20px,2.4vw,32px)}
.d7-lede{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.6;
color:var(--muted);max-width:58ch}
/* Пульт в чёрной зоне. Корпус белый, внутренности серые и тёмные,
оранжевого в рисунке нет. */
.d7-hero-art{justify-self:end;width:100%;max-width:340px;min-width:0}
.d7-hero-art svg{width:100%;height:auto;display:block}
/* ── Белый лист ─────────────────────────────────────────────────────── */
.d7-sheet{background:#fff;color:var(--d7-ink);border-radius:34px;
padding:clamp(30px,4vw,62px) clamp(20px,3.4vw,52px) clamp(30px,3.6vw,52px)}
.d7-crumbs{font-size:13px;color:#8a8d94;margin:0 0 clamp(22px,2.8vw,40px)}
.d7-crumbs a{transition:color .14s ease}
.d7-crumbs a:hover{color:var(--d7-ink)}
.d7-crumbs .sep{margin:0 8px;opacity:.6}
.d7-sheet h2,.d7-sheet h3{margin:0;color:var(--d7-ink)}
.d7-lead{margin:0;font-size:19px;line-height:1.5;color:var(--d7-ink)}
.d7-p{margin:clamp(15px,1.6vw,24px) 0 0;font-size:17px;line-height:1.5;
color:var(--d7-mut)}
/* Значок раздела. Стоит над заголовком в левой колонке. */
.d7-ic{display:block;width:clamp(46px,4.4vw,60px);
margin:0 0 clamp(14px,1.6vw,22px)}
.d7-ic svg{width:100%;height:auto;display:block}
/* ── Раздел лентой: заголовок слева, текст справа ───────────────────── */
.d7-row{
margin-top:clamp(38px,4.6vw,80px);
display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr);
gap:clamp(20px,3.4vw,64px);align-items:start;
}
.d7-row-hd{min-width:0}
.d7-row-tx{min-width:0}
/* Два коротких раздела подряд разделяет волосяная черта: без неё лента
слипается в один длинный текст. */
/* Ряды с длинным заголовком. В узкой колонке слово «инфраструктуру» шире
колонки и браузер рубит его посреди буквы, а «Единый слой для управления
платежами» рассыпается на четыре рваные строки. Размер заголовка трогать
нельзя (на сайте единые размеры), поэтому колонки здесь равные. */
.d7-row.is-long{grid-template-columns:minmax(0,9fr) minmax(0,9fr)}
.d7-row + .d7-row{
margin-top:clamp(26px,3.2vw,50px);
border-top:1px solid #e9eaee;
padding-top:clamp(26px,3.2vw,50px);
}
/* ── Врезка: поворот страницы одной строкой ─────────────────────────── */
/* Набор один в один с врезкой «Онлайн-кассы»: наклонный, оранжевая черта
слева, ширина в долях самой буквы, чтобы перенос не менялся с кеглем. */
.d7-turn{
margin:clamp(46px,5.4vw,94px) 0 0;max-width:27em;
border-left:4px solid var(--lime);
padding:4px 0 4px clamp(20px,2.4vw,34px);
font-family:'Manrope',sans-serif;font-weight:400;
font-size:clamp(20px,2.1vw,29px);line-height:1.3;letter-spacing:-.01em;
font-style:italic;color:var(--d7-ink);
}
/* ── Широкий раздел: текст слева, крупный рисунок справа ────────────── */
.d7-wide{margin-top:clamp(44px,5vw,88px)}
.d7-wide>h2,.d7-wide>h3{margin-bottom:clamp(22px,2.6vw,38px)}
.d7-wide-body{
display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);
gap:clamp(24px,4vw,64px);align-items:center;
}
.d7-wide-tx{min-width:0}
.d7-art{justify-self:center;width:100%;max-width:380px;min-width:0}
.d7-art svg{width:100%;height:auto;display:block}
/* Обводка предметов в рисунках: та же толщина, что у кассы на образце. */
.d7-ln{stroke:var(--d7-ink);stroke-width:2.2;stroke-linejoin:round}
/* ── Светлая полоса поперёк листа ───────────────────────────────────── */
.d7-strip{
margin:clamp(44px,5vw,88px) 0 0;
background:#f3f4f7;border-radius:26px;
padding:clamp(24px,2.8vw,42px) clamp(22px,3vw,44px);
display:flex;align-items:center;justify-content:space-between;
gap:clamp(20px,3vw,44px);
}
.d7-strip-tx{flex:1 1 420px;min-width:0}
.d7-strip .d7-ic{margin-bottom:clamp(12px,1.4vw,18px)}
.d7-strip .d7-p{margin-top:clamp(12px,1.4vw,18px);max-width:62ch}
.d7-cta{flex:0 0 auto;margin:0}
/* ── Тёмная плита внизу листа ───────────────────────────────────────── */
.d7-end{
margin-top:clamp(44px,5vw,88px);
display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,20vw,260px);
gap:clamp(26px,3.4vw,58px);align-items:center;
background:#15171c;border-radius:26px;
padding:clamp(28px,3.4vw,54px) clamp(22px,3vw,48px);
}
.d7-end-tx{min-width:0}
.d7-end h2{color:#fff}
.d7-end .d7-p{color:#b4b8c0;max-width:54ch;font-size:17px}
.d7-end-art{justify-self:end;width:100%;max-width:260px;min-width:0}
.d7-end-art svg{width:100%;height:auto;display:block}
/* Кнопка на тёмной плите белая: оранжевого на тёмном фоне нет. */
.d7-btn{display:inline-flex;align-items:center;gap:10px;
margin:clamp(22px,2.6vw,34px) 0 0;
padding:14px 24px;border-radius:999px;
background:#fff;color:#15171c;
font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
font-size:13px;letter-spacing:.04em;
transition:background .16s ease,transform .16s ease}
.d7-btn svg{width:18px;height:18px;flex:none}
.d7-btn:hover{background:#e8e8ea}
.d7-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* ═══ ШИРИНЫ ═══════════════════════════════════════════════════════════ */
@media (max-width:1100px){
.d7-row{grid-template-columns:minmax(0,6fr) minmax(0,11fr)}
.d7-wide-body{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.d7-turn{font-size:clamp(20px,2.6vw,27px)}
}
/* Окно уже 900. Всё распрямляется в одну колонку, рисунки уходят влево
под текст: двух колонок на такой ширине уже не получается. */
@media (max-width:900px){
.d7-hero{grid-template-columns:minmax(0,1fr);align-items:start;
gap:clamp(26px,5vw,40px)}
.d7-hero-art{justify-self:start;max-width:300px}
.d7-row,.d7-row.is-long{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vw,22px)}
.d7-wide-body{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.4vw,34px)}
.d7-art{justify-self:start;max-width:300px}
.d7-end{grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,34px)}
.d7-end-art{justify-self:start;max-width:220px}
}
/* Телефон. Скругления мельче, полоса складывается, кнопки во всю ширину. */
@media (max-width:560px){
.d7-sheet{border-radius:24px}
.d7-lead{font-size:18px}
.d7-turn{margin-top:clamp(34px,7vw,46px);padding-left:18px;
font-size:clamp(20px,5.4vw,26px)}
.d7-strip{border-radius:20px;padding:22px 20px;flex-wrap:wrap;gap:18px}
.d7-strip-tx{flex:1 1 100%}
.d7-end{border-radius:20px}
.d7-end-art{max-width:190px}
/* Надпись со стрелкой в кнопку на телефоне не влезала и стрелку срезало,
поэтому здесь кегль и поля кнопок мельче, а сами они во всю ширину. */
.d7-cta{width:100%;justify-content:center;padding:14px 18px;font-size:12px}
.d7-btn{width:100%;justify-content:center;padding:14px 18px;font-size:12px}
}
@media (max-width:520px){
/* На телефоне слово «инфраструктурой» в первом заголовке шире колонки, и
браузер рубит его посреди буквы (аварийный перенос из общего правила в
конце paymatic.css). Размер заголовка трогать нельзя: на сайте единые
размеры. Поэтому на узком экране у первого заголовка набор чуть плотнее,
на 3 сотых кегля: слово умещается в строку целиком. */
.d7-h1{letter-spacing:-.03em !important}
}
/* ══════════════════════════════════════════════════════════════════════
ЗАГОТОВКА ВМЕСТО КАРТИНКИ — ОБЩИЙ ПРИЁМ ВСЕГО САЙТА
Введено 29 сентября 2026 по решению владельца. До этого приём жил
опытным образцом на четырёх местах главной (index-load-D1.html и
paymatic-load-D1.css); значения оттуда перенесены сюда без единой
правки — владелец их уже утвердил. С этого дня приём общий: любая
новая страница берёт его отсюда, своего варианта не заводит.
ЧТО ЭТО. Пока тяжёлая картинка не пришла, её место занимает плотная
подложка, по которой идёт широкая наклонная волна. Глаз понимает,
что тут будет изображение, и не читает пустой угол как поломку.
На тёмных блоках волна светлее подложки, на светлых темнее.
Картинка пришла — подложка плавно уступает ей место и снимается
с разметки совсем, плёнкой над картинкой не остаётся.
Выдержка 180 мс перед появлением заготовки живёт в скрипте: на
быстрой сети картинка успевает прийти раньше и заготовки никто не
видит, мигания нет.
ПАМЯТКА ВЁРСТКИ НОВОЙ СТРАНИЦЫ. Четыре шага, дольше не будет.
1) В конце страницы, рядом с остальными:
2) Обычные картинки (теги img) скрипт находит сам. Делать ничего
не нужно.
3) Картинка приходит фоном из оформления — разметка про неё не
знает, поэтому на элементе, где этот фон лежит, ставится пометка
с именем файла. ЭТО ЕДИНСТВЕННОЕ, ЧТО СТАВИТСЯ РУКАМИ:
Необязательная вторая пометка нужна, когда оформление показывает
картинку не на всех ширинах — иначе скрипт запросил бы файл и
там, где он не нужен:
data-kartinka-okno="(min-width:901px)"
4) Тон подложки задаётся ПЕРЕМЕННОЙ РЯДОМ С САМИМ БЛОКОМ, чтобы на
каждом месте он был свой:
.moy-blok{--sk-fon:#232b34}
Тон берётся ЗАМЕРОМ с самой картинки (средний тон или тон края),
а не на глаз, и уводится от фона блока на 6–10 единиц в сторону,
где есть запас: на тёмном блоке вверх, на светлом вниз. Рядом в
комментарии записывается, что замерено. Переменной нет — берётся
ровный тёмный тон по умолчанию.
Светлый блок переворачивает и гамму волны (см. блок заявки ниже).
ПОРОГ ПО РАЗМЕРУ. Приём только для КРУПНЫХ картинок. Меньше 150
точек по меньшей стороне скрипт не трогает вовсе: значки, логотипы,
знаки способов оплаты, знак соответствия, значки в подвале и меню
остаются без заготовки. Векторные файлы (.svg) пропускаются всегда:
они лёгкие и приходят мгновенно. Порог проверяется ДО создания
заготовки, поэтому лишних узлов не возникает. Отдельно у цифровой
витрины стена из значков игр помечена запретом data-bez-zagotovki —
там заготовок нет ни в каком виде.
БЕЗ СКРИПТОВ. Ни одного узла с меткой skel не появится: их создаёт
только скрипт. Страницы работают ровно как прежде — блоки видимы,
заготовок нет. Ни одно правило ниже ничего не прячет и ничего не
двигает само по себе.
ЗАПРЕТЫ ВЛАДЕЛЬЦА СОБЛЮДЕНЫ: картинка не размывается и не
забеливается, миниатюр нет; заготовка непрозрачная и уходит целиком;
оранжевого в ней нет ни в одном состоянии; в бережном режиме
движение выключается, остаётся ровная подложка.
══════════════════════════════════════════════════════════════════════ */
/* Общий вид заготовки. Тон по умолчанию тёмный: тёмных блоков на сайте
больше, светлая гамма задаётся блоку отдельно. */
.skel{
position:absolute;inset:0;z-index:1;
border-radius:inherit;overflow:hidden;pointer-events:none;
max-width:none;min-width:0;margin:0;padding:0;
background:var(--sk-fon,#222a33);
opacity:0;transition:opacity .26s ease;
}
/* Проявление включает скрипт отдельным классом, следующим кадром после
вставки: иначе перехода не будет и заготовка встанет рывком. */
.skel.is-on{opacity:1}
/* Заготовка под обычной картинкой (тег img). Место и скругление ей
считает скрипт замером по самой картинке и ставит прямо в узел,
поэтому растяжка на всё гнездо здесь снимается. */
.skel.skel-snimok{inset:auto}
/* Блик. Три числа, которые и делают приём заметным.
Перепад. На тёмных блоках пик — белое с прозрачностью 0,20. На
подложке #232b34 пик выходит около #4f5560: перепад примерно сорок
четыре единицы из 255. Это отчётливо видно, но белой вспышки нет:
до чистого белого далеко.
Куда идёт волна, решает блок. Цвет волны вынесен целиком в
переменные (--sk-nol, --sk-kray, --sk-blik), поэтому светлый блок
подставляет тёмные чернила и волна там идёт темнее подложки.
Значения по умолчанию белые — их берут тёмные блоки. Отношение
светлот подложки к пику держится около 1,90 и на тёмном, и на
светлом, значит приём читается одинаково сильно везде.
Скорость. Проход 1,8 с плюс короткая пауза в начале (8 процентов
цикла, около 145 мс) — иначе волна идёт сплошняком и утомляет.
Направление и края. Полоса шириной в половину блока, наклон 115
градусов, идёт вдоль длинной стороны слева направо. Края мягкие:
в переходе есть боковые опоры на четверть силы пика (--sk-kray),
поэтому профиль у хвостов пологий, резкой линии не возникает. Слой
выпущен на четверть высоты вверх и вниз, чтобы наклон не обрезался
у кромок.
Движение — переносом слоя, а не пересчётом фона: дешевле для
отрисовки и не дёргает соседние блоки. */
.skel::after{
content:"";position:absolute;top:-25%;bottom:-25%;left:-50%;width:50%;
background:linear-gradient(115deg,
var(--sk-nol,rgba(255,255,255,0)) 0%,
var(--sk-kray,rgba(255,255,255,.05)) 22%,
var(--sk-blik,rgba(255,255,255,.20)) 50%,
var(--sk-kray,rgba(255,255,255,.05)) 78%,
var(--sk-nol,rgba(255,255,255,0)) 100%);
animation:skel-hod 1.8s cubic-bezier(.4,0,.6,1) infinite;
will-change:transform;
}
/* Путь. Полоса шириной в половину блока стартует целиком слева за
кромкой и уходит целиком за правую. Пройти надо ширину блока плюс
свою ширину: 150 процентов блока, а перенос считается от своей
ширины — значит 300 процентов. */
@keyframes skel-hod{
0%,8%{transform:translateX(0)}
100%{transform:translateX(300%)}
}
/* Бережный режим: перелива нет вовсе, остаётся ровная подложка.
Появление и уход тоже без перехода. */
@media(prefers-reduced-motion:reduce){
.skel{transition:none}
.skel::after{display:none}
}
/* ── ТОНА И ПОСАДКА ПО МЕСТАМ ──────────────────────────────────────────
Дальше идёт то, что относится к конкретным блокам: замеренный тон
подложки и точная посадка заготовки там, где раскладка блока её
ломает. Новое место дописывается сюда же, тем же порядком.
─────────────────────────────────────────────────────────────────── */
/* Раскладка мозаики главной. Правила блоков дают всем прямым детям
position:relative и z-index:2 (текст должен лежать над картинкой),
а заготовке это ломает посадку. Поэтому здесь селекторы длиннее тех
правил, и заготовка встаёт между картинкой (нулевой слой) и текстом
(второй). */
.pmos .pcell[data-color].no-flip .pflip .pside>.skel{
position:absolute;z-index:1;max-width:none;margin:0;padding:0;flex:none}
/* Плитка оркестрации. Замер картинки orchestration-tile.webp: средний
тон #1a242e, медиана #15212c. Фон самого блока #1d242a. Подложка
поднята на 6–9 единиц выше фона — плитка читается как заготовка под
картинку, а не как случайно пустой угол. */
.pmos .pcell[data-color="sand"] .pside{--sk-fon:#232b34}
/* Плитка цифровой витрины. Замер storefront-tile.webp: средний тон
#131e26, медиана #121d26. Фон блока #161f26. */
.pmos .pcell[data-color="blue"] .pside{--sk-fon:#1d2630}
/* У обеих картинка лежит во всю плитку с вылетом на две точки за края,
заготовка повторяет её посадку. */
.pmos .pcell[data-color="sand"].no-flip .pflip .pside>.skel,
.pmos .pcell[data-color="blue"].no-flip .pflip .pside>.skel{inset:-2px}
/* Блок заявки светлый — и здесь волна идёт ВНИЗ по светлоте, а не
вверх. Белым по белому не нарисуешь: пик светлой волны упирался в
потолок #fdfdfd, то есть совпадал с фоном самого блока, и волна
читалась не бликом, а дыркой в подложке. Поэтому гамма перевёрнута.
Замер contact-art.webp: средний тон #f7f0ec, левый край #fdfdfd.
Фон блока #fdfdfd. Подложка опущена до #ced6e1 — это перепад в 47
единиц из 255 (отношение светлот 1,43): плитка на белом видна как
плитка, сразу понятно, что тут будет картинка.
Волна — не чёрная, а разбавленный тон той же гаммы, что и сам сайт:
чернила rgb(29,36,42), это фон плитки оркестрации. На подложке пик
даёт примерно #929aa3 — чистый холодный серо-синий, грязи нет.
Сила уравнена с тёмными блоками по отношению светлот: там 1 к 1,90,
здесь 1 к 1,89. Оранжевого в заготовке нет ни в одном состоянии. */
.pmos .pcell.w4.pform[data-color].no-flip .pside{
--sk-fon:#ced6e1;
--sk-nol:rgba(29,36,42,0);
--sk-kray:rgba(29,36,42,.085);
--sk-blik:rgba(29,36,42,.34)}
/* Снимок занимает правую часть и растушёван влево тем же переходом.
Заготовка берёт ту же растушёвку, поэтому её левый край уходит в
белый фон блока без стыка и не лезет под поля формы. */
.pmos .pcell.pform.no-flip .pflip .pside>.skel{
inset:0;
-webkit-mask-image:linear-gradient(to right,transparent 34%,#000 52%);
mask-image:linear-gradient(to right,transparent 34%,#000 52%)}
@media(max-width:900px){
/* На узком экране снимок в блоке заявки скрыт совсем — заготовке
там тоже делать нечего. */
.pmos .pcell.pform.no-flip .pflip .pside>.skel{display:none}
}
/* Карточка White Label. Замер white-label-tile.webp: средний тон
#141b23, левый край #0b1017. Фон карточки #10171f. */
.wlB-card{--sk-fon:#182029}
/* Картинка стоит справа на 66 процентах ширины. Слой заготовки идёт
нулевым, а не первым: текст карточки лежит без номера слоя, и
заготовка с первым накрыла бы его. Левый край растушёван — у самой
картинки край мягкий, жёсткая вертикаль читалась бы швом. */
.wlB-card>.skel{
position:absolute;z-index:0;max-width:none;margin:0;padding:0;
top:0;right:0;bottom:0;left:auto;width:66%;border-radius:0;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%);
mask-image:linear-gradient(to right,transparent 0,#000 26%)}
@media(max-width:1000px){
/* Узкий экран: картинка уезжает вниз полосой, заготовка идёт за ней
тем же местом и той же растушёвкой. */
.wlB-card>.skel{
top:auto;left:0;right:0;width:auto;height:46vw;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);
mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
}
/* Снимок кабинета в разделе «Что даёт мультиэквайринг». Это обычная
картинка тегом img, скрипт находит её сам — руками тут только тон.
Замер benefits-dashboard.jpg: средний тон #1f2024, медиана #181b1f.
Подложка поднята на 8–11 единиц, как у остальных тёмных мест.
Рамка у гнезда скруглена и обрезает — заготовка встаёт внутрь него
и берёт скругление самой картинки замером. */
.mq-ask-art.is-photo{--sk-fon:#272a2f}