body { background-color: #000; color: #fff; overflow-x: hidden; }

        /* --- Вертикальный ритм страницы ---------------------------------------
           Одна шкала на все секции, иначе отступы расходятся от блока к блоку:
             секция            py-16 md:py-24     (стык секций 128 / 192px)
             заголовок → текст 0 — описание идёт вплотную
             шапка → контент   mb-6  md:mb-8
             подблок в секции  mt-6  md:mt-8
             сетка секции      gap-6 md:gap-8
             две колонки       gap-8 md:gap-12
             поля карточки     p-8   md:p-10
             колонки футера    py-12 md:py-16                                    */
        
        /* Скрываем скроллбар для чистоты дизайна */
        ::-webkit-scrollbar { display: none; }
        html { scrollbar-width: none; }

        /* --- Привязка к скроллу -------------------------------------------------
           Шапка и лента продуктов в hero не переключаются между состояниями, а едут
           следом за фактической позицией страницы: их ведёт таймлайн прокрутки, то
           есть значения пересчитываются вместе с самим скроллом. Обработчик на
           скролле так не умеет — страница едет на композиторе, а он считает в основном
           потоке и отстаёт на кадр-другой, отчего движение выглядит дёрганым.
           Анимируются сами свойства, а не общая переменная-прогресс: интерполяция
           объявленного свойства тянет за собой пересчёт стиля всего поддерева на
           каждый кадр — в WebKit это заметно дороже, чем обычная анимация padding,
           просветов и скруглений, которую браузер ведёт по отдельному свойству.
           Базовые стили описывают конечное положение — отдельные блоки в сетке;
           кадр from задаёт начальное — ленту во всю ширину. Где таймлайнов нет,
           анимация просто не применяется и остаётся конечное положение. */
        @keyframes nav-lift { from { transform: translateY(var(--nav-drop)); } }
        @keyframes nav-bg { from { opacity: 0; } }
        /* Раскладка ряда не меняется по ходу скролла ни на пиксель: она всегда такая,
           какой блоки стоят в свёрнутом виде. Развёрнутый вид — сдвиг и растяжение той
           же раскладки, то есть transform, плюс перекрёстное затухание двух подложек по
           opacity. Ровно эти два свойства ведёт шапка, и она не лагает, а поля,
           просветы и скругления пересчитывали раскладку и заливку на каждом кадре —
           отсюда и рывки. Величины сдвига и растяжения считает скрипт при загрузке и
           смене размера окна, во время прокрутки они постоянны. */
        @keyframes rail-drop { from { transform: translateY(var(--rail-drop, 0px)); } }
        @keyframes prod-slide { from { transform: translate(var(--dx, 0px), var(--dy, 0px)); } }
        /* Подложки едут не совсем как содержимое: у крайних блоков они уходят до кромки
           окна, а подписи остаются на линии сетки сайта, поэтому к растяжению добавлен
           свой сдвиг --pdx (у средних блоков он нулевой). */
        /* Подложка у блока одна и всегда непрозрачная. Двух гасящих друг друга слоёв
           здесь быть не может: у слоя одна прозрачность на рамку и на заливку, и стоит
           увести рамку раньше времени, как вместе с ней уходит фон, а встречный слой
           к этой минуте набран лишь на треть — на середине хода фон пропадал вовсе и
           возвращался. Поэтому меняется не прозрачность, а форма: скругление,
           растяжение, цвет линий и размытие. Всё в одной анимации: когда на элементе
           висело две с одним animation-timeline, WebKit размножал список свойств иначе,
           чем Chromium, и вторая оставалась без таймлайна.
           Линии гаснут к первой трети пути — они держат сетку, пока блоки сомкнуты, и
           мешали бы уже разъехавшимся. Размытие в этот список не входит: оно постоянно
           в обоих положениях, иначе в развёрнутой ленте фон за блоками не размыт. */
        @keyframes plate-in {
            from {
                border-radius: 0;
                border-top-color: rgba(255, 255, 255, 0.07);
                border-left-color: rgba(255, 255, 255, 0.07);
                /* В развёрнутом виде фон заметно легче — тот же серый, только реже.
                   Это один цвет, а не слои: цвет браузер разбавляет плавно, а вот
                   градиент он переключает скачком на середине пути, и фон мигал. */
                background-color: rgba(86, 86, 96, 0.26);
                transform: translateX(var(--pdx, 0px)) scaleX(var(--k, 1));
            }
            30% {
                border-top-color: rgba(255, 255, 255, 0);
                border-left-color: rgba(255, 255, 255, 0);
            }
        }
        /* Подсветка при наведении едет тем же путём, что и подложки: иначе она держит
           свой размер и свои скруглённые углы и в развёрнутом виде рисуется
           скруглённым блоком внутри прямоугольника. */
        @keyframes glow-shape {
            from { border-radius: 0; transform: translateX(var(--pdx, 0px)) scaleX(var(--k, 1)); }
        }
        /* Стрелка догоняет правый край прямоугольника: содержимое остаётся шириной
           свёрнутого блока, а подложка растянута, и без этого сдвига стрелка висит
           заметно левее кромки. */
        @keyframes arrow-slide {
            from { transform: translateX(var(--adx, 0px)); }
        }
        /* В развёрнутой ленте осветление по наведению слабее: блоки там сомкнуты
           в общую полосу, и подсветка во всю силу выглядит вырванным куском. */
        @keyframes plate-hover-tone {
            from { background-color: rgba(255, 255, 255, 0.02); }
        }
        @supports (animation-timeline: scroll()) {
            /* Путь у шапки короткий — она сворачивается на первых пикселях; лента
               расходится дольше, иначе перетекание проскакивает за одно движение
               колеса. ease-in-out даёт мягкий сход с места и подход к концу. */
            #navbar > div, #navbar::before, .hero-rail,
            .hero-prod, .hero-prod::after, .hero-prod-plate, .hero-prod-plate::after,
            .hero-prod-arrow {
                animation-timing-function: ease-in-out;
                animation-fill-mode: both;
                animation-timeline: scroll(root block);
            }
            #navbar > div { animation-name: nav-lift; animation-range: 0 80px; }
            #navbar::before { animation-name: nav-bg; animation-range: 0 80px; }
            /* Отрезок пути у ряда и у всех блоков строго один. Смыкание подложек в
               ленту держится только пока соседи идут в ногу: зазор между ними равен
               просвету, умноженному на пройденную долю пути, и стоит развести отрезки
               (например, чтобы ряд складывался волной от краёв к центру), как на
               середине хода он уходит в минус и блоки налезают друг на друга. */
            .hero-rail { animation-name: rail-drop; animation-range: 0 260px; }
            .hero-prod { animation-name: prod-slide; animation-range: 0 260px; }
            .hero-prod::after { animation-name: glow-shape; animation-range: 0 260px; }
            .hero-prod-arrow { animation-name: arrow-slide; animation-range: 0 260px; }
            .hero-prod-plate::after { animation-name: plate-hover-tone; animation-range: 0 260px; }
            .hero-prod-plate { animation-name: plate-in; animation-range: 0 260px; }
        }

        /* Навигация при скролле. Шапка не переключается между состояниями по классу,
           а едет следом за фактической позицией страницы (см. привязку выше).
           Высота шапки постоянная — по свёрнутому состоянию; в развёрнутом содержимое
           опущено на --nav-drop, ровно на разницу прежних полей, так что на экране обе
           крайние позиции остались теми же. Базовое положение здесь — свёрнутое,
           развёрнутое задаёт кадр from анимации. */
        #navbar {
            --nav-drop: 1.125rem; /* 2rem − 0.875rem */
            padding-top: 0.875rem;
            padding-bottom: 0.875rem;
            background-color: transparent;
            border: none;
            box-shadow: none;
        }
        /* Чёрный фон — отдельным слоем: так его плотность меняется независимо от
           сдвига содержимого и ничего не двигает в раскладке. */
        #navbar::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: #000000;
            opacity: 1;
            pointer-events: none;
        }
        @media (max-width: 768px) {
            #navbar { --nav-drop: 0.625rem; } /* 1.5rem − 0.875rem */
        }
        /* Верхняя строка меню — самостоятельный фиксированный слой над шапкой.
           Внутри шапки она прыгала: шапка меняет высоту содержимого на скролле, и
           компенсирующее отрицательное поле дёргало полосу на каждом переключении.
           Показ строки и отступ шапки переключаются на одном пикселе (768): раньше
           строка пряталась при ≤768, а шапка опускалась при ≥768 — на 768px была дыра. */
        .nav-topbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 51;
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            height: 36px;
            padding: 0 3rem;
            background: #101012;
            color: #8a8a93;
        }
        @media (min-width: 768px) {
            .nav-topbar { display: flex; }
            #navbar { top: 36px; }
        }
        .nav-topbar-group { display: flex; align-items: center; gap: 2px; }

        /* --- Шапка: верхняя строка с иконками, меню с общим хостом мега-панелей, мобильная шторка --- */
        /* Полоса прокрутки резервируется всегда: при блокировке скролла под шторкой она
           исчезает, и fixed-шапка прыгала бы на её ширину. */
        html { scrollbar-gutter: stable; }
        html.nav-locked { overflow: hidden; }
        /* Якоря секций встают под фиксированной шапкой, а не под ней */
        section[id] { scroll-margin-top: 112px; }
        @media (max-width: 767.98px) { section[id] { scroll-margin-top: 76px; } }
        /* Правый кластер всегда в третьей колонке: когда центр скрыт (< 1024), сетка
           1fr auto 1fr иначе кладёт его во вторую, и кнопки уезжают на середину экрана. */
        .nav-right { grid-column: 3; }
        @keyframes nav-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

        /* Пункты верхней строки: иконка в акценте раздела, подпись приглушена */
        .nav-top-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 26px;
            padding: 0 8px;
            border-radius: 9999px;
            color: #8a8a93;
            font: 600 11.5px/1 'Manrope', sans-serif;
            white-space: nowrap;
            transition: color .2s ease, background-color .2s ease;
        }
        /* Наведение — только цветом, без подложки: текст и иконка светлеют на ступень
           (#8a8a93 → #c8c8cf), а не до чистого белого — строка второстепенная */
        .nav-top-link:hover, .nav-top-link:focus-visible { color: #c8c8cf; }
        .nav-top-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -2px; }
        /* Иконки верхней строки одного серого цвета, как её подписи; на наведении светлеют вместе с текстом */
        .nav-top-ico { width: 14px; height: 14px; flex-shrink: 0; display: block; color: #8a8a93; transition: color .2s ease; }
        .nav-top-link:hover .nav-top-ico, .nav-top-link:focus-visible .nav-top-ico { color: #c8c8cf; }
        .nav-top-phone { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
        .nav-top-sep { width: 1px; height: 12px; margin: 0 6px; flex-shrink: 0; background: rgba(255, 255, 255, 0.08); }
        /* Точка статуса: пульс — как радар на карте, только маленький; только transform/opacity */
        .nav-top-dot { position: relative; width: 6px; height: 6px; border-radius: 9999px; background: #10b981; box-shadow: 0 0 7px rgba(16, 185, 129, 0.8); flex-shrink: 0; }
        .nav-top-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 9999px; border: 1.5px solid rgba(16, 185, 129, 0.6); animation: nav-pulse 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
        .nav-top-chip { margin-left: 2px; padding: 1px 6px; border-radius: 9999px; background: rgba(16, 185, 129, 0.1); color: #34d399; font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; transition: color .2s ease, background-color .2s ease; }
        /* На наведении пункта плашка светлеет на ступень вместе с подписью */
        .nav-top-link:hover .nav-top-chip, .nav-top-link:focus-visible .nav-top-chip { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }

        /* Основная строка меню */
        .nav-center { position: relative; display: none; }
        .nav-menu { display: flex; align-items: center; gap: 0; height: 42px; margin: 0; padding: 0; list-style: none; }
        .nav-item { position: relative; }
        .nav-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            height: 38px;
            padding: 0 8px;
            border-radius: 9999px;
            background: transparent;
            color: #d4d4d4;
            font: 600 14px/1 'Manrope', sans-serif;
            white-space: nowrap;
            cursor: pointer;
            transition: background-color .2s ease, color .2s ease;
        }
        .nav-link-txt { line-height: 1; }
        /* Иконки пунктов одного серого цвета, как подписи; на наведении и у открытого пункта белеют вместе с текстом */
        .nav-link-ico { width: 16px; height: 16px; flex-shrink: 0; display: block; color: #8a8a93; transition: color .2s ease; }
        .nav-link-chev { width: 12px; height: 12px; margin-left: -2px; flex-shrink: 0; color: #8a8a93; transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), color .2s ease; }
        .nav-link:hover, .nav-item.is-open > .nav-link, .nav-item.is-current > .nav-link { color: #ffffff; }
        .nav-link:hover, .nav-item.is-open > .nav-link { background-color: rgba(255, 255, 255, 0.06); }
        .nav-link:hover .nav-link-ico, .nav-item.is-open .nav-link-ico, .nav-item.is-current .nav-link-ico { color: #ffffff; }
        .nav-link:hover .nav-link-chev, .nav-item.is-open .nav-link-chev { color: #ffffff; }
        .nav-item.is-open > .nav-link .nav-link-chev { transform: rotate(180deg); }
        /* Маркер текущего раздела — акцентная точка со свечением, как у активных элементов сайта */
                .nav-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }

        /* Хост мега-меню: карточка на 8px ниже шапки; верхнее поле хоста — невидимый мостик */
        /* Затемнение страницы под раскрытым мега-меню. Отдельный фиксированный слой
           между контентом и шапкой: сама шапка и верхняя строка лежат выше и не гаснут.
           Курсору слой прозрачен, иначе уход мыши с меню на страницу не закрывал бы его.
           Класс на body ставит тот же скрипт, что открывает и закрывает меню. */
        /* Слой с постоянным размытием и затемнением проявляется и гаснет только через
           прозрачность, одинаково в обе стороны и в темпе карточки меню. Курсор он
           перехватывает всё время, пока виден, в том числе во время ухода: иначе сквозь
           ещё заметное затемнение срабатывали наведения на элементы страницы. Из
           отрисовки и из hit-test слой уходит через visibility с задержкой на длину
           перехода — скрытый слой не считает фильтр под видео hero и не ловит курсор. */
        .nav-dim {
            position: fixed; inset: 0; z-index: 49;
            background: rgba(0, 0, 0, 0.55);
            -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            opacity: 0; visibility: hidden; pointer-events: auto; cursor: default;
            transition: opacity .22s ease, visibility 0s linear .22s;
        }
        body.nav-dimmed .nav-dim { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s linear 0s; }
        .nav-mega-host {
            position: absolute;
            top: 100%;
            left: 50%;
            z-index: 5;
            width: 780px;
            padding-top: 22px; /* 14px нижнего поля шапки + 8px зазора */
            transform: translateX(-50%);
            visibility: hidden;
            pointer-events: none;
            transition: visibility 0s linear .18s;
        }
        .nav-mega-host.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
        .nav-mega-card {
            position: relative;
            overflow: hidden;
            height: var(--nav-mega-h, auto);
            padding: 12px;
            border-radius: 1.5rem;
            background: #18181a;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
            opacity: 0;
            transform: translateY(6px);
            transition: opacity .18s ease, transform .18s cubic-bezier(0.16, 1, 0.3, 1), height .22s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .nav-mega-host.is-open .nav-mega-card { opacity: 1; transform: none; }
        /* Пока хост закрыт, высота ставится без перехода — иначе при открытии карточка тянулась бы от высоты прошлого меню */
        .nav-mega-host:not(.is-open) .nav-mega-card { transition: opacity .12s ease, transform .12s ease; }
        .nav-mega { position: relative; }
        .nav-mega[hidden] { display: none; }
        .nav-mega.is-active { animation: nav-mega-swap .16s cubic-bezier(0.16, 1, 0.3, 1) both; }
        @keyframes nav-mega-swap { from { opacity: 0; transform: translateY(4px); } }

        /* Сетка панели, строки, заголовки колонок, витрина, подвал */
        .nav-mega-grid { display: grid; gap: 8px; }
        .nav-mega-grid-aside  { grid-template-columns: minmax(0, 1fr) 264px; }
        .nav-mega-grid-2aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 232px; }
        .nav-mega-grid-support { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
        .nav-quick-head { padding: 4px 10px 8px; }
        .nav-quick-title { margin: 0; font: 700 14px/1.25 'Sora', 'Manrope', sans-serif; letter-spacing: -.01em; color: #ffffff; }
        .nav-quick-note { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font: 400 12px/1.3 'Manrope', sans-serif; color: #8a8a93; }
        .nav-quick-note::before { content: ''; width: 6px; height: 6px; border-radius: 9999px; background: #10b981; box-shadow: 0 0 7px rgba(16, 185, 129, 0.8); flex-shrink: 0; }
        .nav-sheet-list .nav-quick-head { padding: 14px 4px 8px; }
        .nav-mega-note.nav-mega-mono { font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; color: #a1a1aa; }
        .nav-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
        .nav-sheet-list .nav-sheet-chips { padding: 4px 4px 8px; }
        .nav-mega-grid-3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .nav-mega-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .nav-mega-head { margin: 0; padding: 8px 10px 6px; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .18em; color: #63636d; }
        .nav-mega-row + .nav-mega-head { margin-top: 8px; }
        /* Строка повторяет плитку продукта из hero: тонированная плитка, имя Sora (кириллица
           падает в Manrope), подпись, стрелка выезжает справа */
        .nav-mega-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 10px; border-radius: .9rem; min-width: 0; color: inherit; transition: background-color .2s ease; }
        .nav-mega-row:hover, .nav-mega-row:focus-visible { background-color: rgba(255, 255, 255, 0.04); }
        .nav-mega-row:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -2px; }
        .nav-mega-ico { position: relative; width: 40px; height: 40px; border-radius: .8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(var(--acc), 0.12); color: rgb(var(--acc)); transition: background .25s ease, transform .25s cubic-bezier(0.16, 1, 0.3, 1); }
        .nav-mega-ico svg { width: 20px; height: 20px; display: block; }
        .nav-mega-row:hover .nav-mega-ico { background: rgba(var(--acc), 0.2); transform: scale(1.05); }
        .nav-mega-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .nav-mega-title { font-family: 'Sora', 'Manrope', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: -.01em; color: #ffffff; }
        /* Подпись — не больше двух строк: обрезать текст многоточием нельзя, а колонки узкие */
        .nav-mega-note { font: 400 12px/1.35 'Manrope', sans-serif; color: #8a8a93; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .nav-mega-meta { margin-left: auto; flex-shrink: 0; padding: 3px 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.05); color: #63636d; font: 700 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; transition: color .2s ease, background .2s ease; }
        .nav-mega-row:hover .nav-mega-meta { color: rgb(var(--acc)); background: rgba(var(--acc), 0.12); }
        .nav-mega-arrow, .nav-mega-ext { flex-shrink: 0; display: flex; color: rgb(var(--acc)); }
        .nav-mega-arrow { margin-left: auto; opacity: 0; transition: opacity .25s ease; }
        .nav-mega-meta + .nav-mega-arrow { margin-left: 0; }
        .nav-mega-arrow svg { width: 15px; height: 15px; transform: translateX(-6px); transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1); }
        .nav-mega-row:hover .nav-mega-arrow, .nav-mega-row:focus-visible .nav-mega-arrow { opacity: 1; }
        .nav-mega-row:hover .nav-mega-arrow svg, .nav-mega-row:focus-visible .nav-mega-arrow svg { transform: none; }
        .nav-mega-ext { margin-left: auto; color: #63636d; }
        .nav-mega-ext svg { width: 12px; height: 12px; }
        .nav-mega-row.is-compact { min-height: 48px; gap: 10px; }
        .nav-mega-row.is-compact .nav-mega-ico { width: 36px; height: 36px; border-radius: .7rem; }
        .nav-mega-row.is-compact .nav-mega-ico svg { width: 18px; height: 18px; }
        .nav-mega-row.is-compact .nav-mega-title { font-size: 13.5px; }
        .nav-mega-row.is-compact .nav-mega-note { font-size: 11.5px; }
        /* «Живая» строка статуса: точка в углу плитки */
        .nav-mega-row.is-live .nav-mega-ico::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 9999px; background: #10b981; box-shadow: 0 0 7px rgba(16, 185, 129, 0.8); }
        /* Витрина: поверхность на ступень светлее панели, как карточка тарифа на подложке, с сеткой и свечением */
        .nav-mega-aside { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 18px; border-radius: 1.1rem; overflow: hidden; background: #202024; }
        .nav-mega-aside > * { position: relative; z-index: 1; }
        .nav-aside-pattern { display: none; }
        .nav-mega.is-active .nav-mega-aside { animation: nav-aside-in .45s cubic-bezier(0.16, 1, 0.3, 1) .06s both; }
        @keyframes nav-aside-in { from { opacity: 0; transform: translateY(8px); } }
        .nav-aside-kicker { margin: 0 0 6px; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .18em; color: rgb(var(--acc)); }
        .nav-aside-price { margin: 0; font: 800 28px/1 'Sora', 'Manrope', sans-serif; letter-spacing: -.03em; color: #ffffff; }
        .nav-aside-price.is-big { font-size: 34px; }
        .nav-aside-price span { font: 400 13px/1 'Manrope', sans-serif; color: #737373; margin-left: 4px; letter-spacing: 0; }
        .nav-aside-text { margin: 8px 0 14px; font: 400 12px/1.5 'Manrope', sans-serif; color: #8a8a93; }
        .nav-aside-term { display: flex; flex-direction: column; gap: 4px; align-self: stretch; margin: 0 0 14px; padding: 10px 12px; border-radius: .75rem; background: rgba(0, 0, 0, 0.5); font: 400 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #a3a3a3; }
        .nav-aside-term b { color: #34d399; font-weight: 700; }
        .nav-aside-bar { display: block; height: 3px; margin-top: 4px; border-radius: 9999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
        .nav-aside-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: #10b981; box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) .2s; }
        .nav-mega.is-active .nav-aside-bar i { width: 82%; }
        .nav-aside-cta { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: 42px; padding: 0 1.25rem; border-radius: 9999px; background: #ffffff; color: #0b0b0c; font: 700 12px/1 'Sora', 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; transition: background .25s ease, color .25s ease; }
        .nav-aside-cta svg { width: 15px; height: 15px; }
        .nav-aside-cta:hover { background: rgb(var(--acc)); color: #ffffff; }
        .nav-aside-cta:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -2px; }
        .nav-aside-meta { margin: 10px 0 0; font: 400 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #63636d; }
        .nav-aside-line { display: flex; align-items: center; align-self: stretch; gap: 8px; margin: 0; padding-top: 10px; font: 400 12px/1 'Manrope', sans-serif; color: #a1a1aa; }
        .nav-aside-cta + .nav-aside-line { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
        .nav-aside-cta { margin-bottom: 14px; }
        .nav-aside-line b { margin-left: auto; font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #34d399; }
        .nav-aside-line svg { width: 14px; height: 14px; color: #8a8a93; flex-shrink: 0; }

        /* Язык: та же логика открытия, что у мега-меню, свой список справа */
        .nav-lang { position: relative; display: none; }
        .nav-lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 11px; border-radius: 9999px; color: #ffffff; font: 600 14px/1 'Manrope', sans-serif; transition: background-color .2s ease; }
        .nav-lang-btn:hover, .nav-lang.is-open .nav-lang-btn { background-color: #262626; }
        .nav-lang.is-open .nav-link-chev { transform: rotate(180deg); color: #ffffff; }
        .nav-lang-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
        .nav-lang-txt, .nav-lang-btn .nav-link-chev { display: none; }
        /* Подпись кнопки панели не переносится: при узкой правой колонке она ломалась на две строки */
        .nav-right .panel-btn { white-space: nowrap; }
        .nav-flag { display: inline-block; width: 20px; height: 20px; border-radius: 9999px; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
        .nav-flag svg { width: 100%; height: 100%; display: block; }
        .nav-drop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; width: 168px; padding: 6px; border-radius: 1rem; background: #18181a; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s; }
        .nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* мостик */
        .nav-lang.is-open .nav-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .18s ease, transform .18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
        .nav-drop-row { position: relative; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: .65rem; color: #ffffff; font: 600 13px/1 'Manrope', sans-serif; transition: background-color .2s ease; }
        .nav-drop-row:hover, .nav-drop-row:focus-visible { background-color: rgba(255, 255, 255, 0.04); }
        .nav-drop-row:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -2px; }
        .nav-drop-row.is-current, .nav-drop-row.is-current:hover { background-color: #26262b; }
        .nav-drop-row .nav-flag { width: 18px; height: 18px; }

        /* Бургер: три полосы складываются в крест */
        .nav-burger { position: relative; display: inline-flex; width: 42px; height: 42px; border-radius: 9999px; align-items: center; justify-content: center; color: #ffffff; transition: background-color .2s ease; }
        .nav-burger:hover { background-color: #262626; }
        .nav-burger:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
        .nav-burger i { position: absolute; left: 11px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease, width .32s cubic-bezier(0.16, 1, 0.3, 1); }
        .nav-burger i:nth-child(1) { top: 14px; }
        .nav-burger i:nth-child(2) { top: 20px; width: 14px; }
        .nav-burger i:nth-child(3) { top: 26px; }
        .nav-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
        .nav-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; width: 0; }
        .nav-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

        /* Мобильная шторка (<dialog>) */
        .nav-sheet { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: radial-gradient(900px 400px at 50% 0%, rgba(59, 130, 246, 0.1), transparent 70%) #000000; color: #ffffff; opacity: 0; transform: translateY(8px); transition: opacity .26s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
        .nav-sheet.is-open { opacity: 1; transform: none; }
        .nav-sheet::backdrop { background: transparent; }
        .nav-sheet-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
        .nav-sheet-scroll::-webkit-scrollbar { display: none; }
        /* Верхняя строка шторки повторяет шапку: логотип и крестик стоят ровно там же, где логотип и бургер */
        .nav-sheet-top { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 24px; }
        .nav-sheet-close { width: 42px; height: 42px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); color: #ffffff; transition: background-color .2s ease; }
        .nav-sheet-close:hover { background: rgba(255, 255, 255, 0.12); }
        .nav-sheet-close svg { width: 18px; height: 18px; }
        .nav-sheet-close:focus-visible, .nav-sheet-head:focus-visible, .nav-sheet-link:focus-visible, .nav-sheet-row:focus-visible, .nav-chip:focus-visible, .nav-sheet-cta:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: -2px; }
        /* Список всегда чуть выше окна: только у прокручиваемого элемента overscroll-behavior реально останавливает цепочку прокрутки на iOS */
        .nav-sheet-inner { min-height: calc(100% - 69px); max-width: 608px; margin: 0 auto; padding: 0 24px calc(150px + env(safe-area-inset-bottom)); }
        /* Пункты появляются каскадом: каждому следующему блоку задержка на шаг */
        .nav-sheet.is-open .nav-sheet-inner > * { animation: nav-sheet-in .5s cubic-bezier(0.16, 1, 0.3, 1) both; }
        .nav-sheet.is-open .nav-sheet-inner > :nth-child(2) { animation-delay: .04s; }
        .nav-sheet.is-open .nav-sheet-inner > :nth-child(3) { animation-delay: .08s; }
        .nav-sheet.is-open .nav-sheet-inner > :nth-child(4) { animation-delay: .12s; }
        .nav-sheet.is-open .nav-sheet-inner > :nth-child(5) { animation-delay: .16s; }
        .nav-sheet.is-open .nav-sheet-inner > :nth-child(n+6) { animation-delay: .2s; }
        @keyframes nav-sheet-in { from { opacity: 0; transform: translateY(10px); } }
        .nav-sheet-group { border-top: 1px solid rgba(255, 255, 255, 0.08); }
        .nav-sheet-head { width: 100%; display: flex; align-items: center; gap: 12px; height: 56px; text-align: left; font: 700 17px/1 'Sora', 'Manrope', sans-serif; letter-spacing: -.01em; color: #ffffff; }
        /* Иконки пунктов шторки серые, как в шапке; у раскрытой группы белеют вместе с заголовком */
        .nav-sheet-ico { width: 18px; height: 18px; flex-shrink: 0; color: #8a8a93; transition: color .2s ease; }
        .nav-sheet-group.is-open .nav-sheet-ico { color: #ffffff; }
        .nav-sheet-chev { width: 14px; height: 14px; margin-left: auto; color: #8a8a93; transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), color .2s ease; }
        .nav-sheet-group.is-open .nav-sheet-chev { transform: rotate(180deg); color: #ffffff; }
        /* Аккордеон на grid-template-rows: высоту мерить не нужно, анимируется любое содержимое */
        .nav-sheet-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(0.16, 1, 0.3, 1); }
        .nav-sheet-group.is-open .nav-sheet-body { grid-template-rows: 1fr; }
        /* Обёртка без полей: поля списка не сжимаются в дорожке 0fr, и из-под свёрнутой группы выглядывал бы первый заголовок */
        .nav-sheet-clip { overflow: hidden; min-height: 0; }
        .nav-sheet-list { display: grid; grid-template-columns: 1fr; gap: 2px; padding-bottom: 12px; }
        .nav-sheet-list .nav-mega-head { grid-column: 1 / -1; padding-left: 4px; }
        .nav-sheet-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 4px; border-radius: .8rem; min-width: 0; transition: background-color .2s ease; }
        .nav-sheet-row:hover { background-color: rgba(255, 255, 255, 0.04); }
        .nav-sheet-row .nav-mega-ico { width: 36px; height: 36px; border-radius: .7rem; }
        .nav-sheet-row .nav-mega-ico svg { width: 18px; height: 18px; }
        .nav-sheet-link { display: flex; align-items: center; gap: 12px; height: 56px; border-top: 1px solid rgba(255, 255, 255, 0.08); font: 700 17px/1 'Sora', 'Manrope', sans-serif; letter-spacing: -.01em; color: #ffffff; }
        .nav-sheet-link > svg:first-child { width: 18px; height: 18px; flex-shrink: 0; color: #8a8a93; }
        .nav-sheet-arrow { margin-left: auto; width: 16px; height: 16px; color: #63636d; }
        .nav-sheet-more { padding: 18px 0 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
        .nav-sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
        .nav-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 9999px; background: #18181a; color: #a1a1aa; font: 600 12px/1 'Manrope', sans-serif; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
        .nav-chip svg { width: 14px; height: 14px; color: rgb(var(--acc)); }
        .nav-chip:hover { background: #262626; color: #ffffff; }
        .nav-sheet-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, #000 70%, rgba(0, 0, 0, 0)); }
        .nav-sheet-foot > * { width: 100%; max-width: 560px; }
        .nav-sheet-cta { display: flex; align-items: center; justify-content: center; gap: .75rem; height: 48px; border-radius: 9999px; background: #ffffff; color: #0b0b0c; font: 700 13px/1 'Sora', 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .06em; transition: background .25s ease, color .25s ease; }
        .nav-sheet-cta:hover { background: #3b82f6; color: #ffffff; }
        .nav-sheet-cta svg { width: 16px; height: 16px; }
        .nav-sheet-lang { display: flex; }
        .nav-sheet-lang button { flex: 1; justify-content: center; }

        /* Точки переключения: центр меню ≥1024, бургер <1024, язык ≥768, подпись языка ≥1440 */
        @media (min-width: 640px) { .nav-sheet-list { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 768px) {
            .nav-lang { display: block; }
            .nav-sheet-top { padding: 0 48px; }
            .nav-sheet-inner { max-width: 656px; padding-left: 48px; padding-right: 48px; }
        }
        @media (min-width: 1024px) { .nav-center { display: block; } .nav-burger { display: none; } .nav-sheet[open] { display: none; } }
        /* От 1280 карточке есть куда расти: две колонки «Решений» перестают переносить подписи */
        @media (min-width: 1280px) { .nav-link { padding: 0 10px; } .nav-mega-host { width: 840px; } }
        @media (min-width: 1440px) { .nav-link { padding: 0 12px; } .nav-menu { gap: 2px; } .nav-lang-txt { display: inline; } .nav-lang-btn .nav-link-chev { display: block; } }
        @media (max-width: 1279.98px) { .nav-item.is-xl, .nav-top-xl { display: none; } }
        @media (max-width: 1023.98px) { .nav-top-lg { display: none; } }

        @media (prefers-reduced-motion: reduce) {
            .nav-top-dot::after { animation: none; }
            .nav-mega-card, .nav-drop, .nav-sheet { transition: opacity .15s linear, visibility 0s linear .15s; transform: none; }
            .nav-dim { transition: opacity .15s linear, visibility 0s linear .15s; }
            .nav-mega-card { transition-property: opacity; }
            .nav-mega.is-active, .nav-mega.is-active .nav-mega-aside, .nav-sheet.is-open .nav-sheet-inner > * { animation: none; }
            .nav-aside-bar i, .nav-link-chev, .nav-sheet-chev, .nav-burger i, .nav-mega-arrow svg, .nav-mega-ico, .nav-top-ico, .nav-sheet-body { transition: none; }
        }



        /* Кнопка панели управления — цвета едут по периметру рамки */
        /* Высота фиксирована: rx/ry обводки заданы атрибутами и равны высоте/2. */
        .panel-btn {
            height: 42px;
            isolation: isolate;
            /* Фиксирован: padding задаёт толщину рамки */
            padding: 1.5px;
        }
        .panel-btn-bg {
            position: absolute;
            inset: 0;
            box-sizing: border-box;
            /* Поле нужно только маске: по нему она отбивает внутреннюю область */
            padding: 1.5px;
            /* Скругление обязательно здесь, а не только в clip-path: области, по
               которым режет маска, берут форму именно из него, иначе внутри
               вырезается прямоугольник с прямыми углами. */
            border-radius: 21px;
            filter: blur(4px);
            /* clip-path обрезает размытие по форме кнопки */
            clip-path: inset(0 round 21px);
            -webkit-clip-path: inset(0 round 21px);
            /* Середину вырезает маска, а не заливка. Раньше её закрывал чёрный слой
               под содержимым — из-за него кнопка была непрозрачной. Обводка при этом
               осталась прежней, толстой и размытой: только она даёт плотный цвет,
               тонкая линия выцветает и показывает стыки сегментов. */
            -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
            -webkit-mask-clip: content-box, border-box;
            -webkit-mask-composite: xor;
            mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
            mask-clip: content-box, border-box;
            mask-composite: exclude;
        }
        .panel-btn-ring {
            display: block;
            overflow: visible;
            /* Обводка растянута на всю кнопку, а не на область внутри поля слоя:
               поле нужно маске, а сжатая на его толщину обводка переставала совпадать
               с кольцом и рвалась по бокам. */
            width: calc(100% + 3px);
            height: calc(100% + 3px);
            margin: -1.5px;
        }
        .panel-btn-seg {
            fill: none;
            stroke-width: 12;
            /* pathLength="100" -> шаг сегмента 100/48 при любой ширине кнопки.
               Штрих 2.5 чуть длиннее шага, чтобы не было волосяных щелей.
               Смещение считается по длине дуги -> скорость постоянная. */
            stroke-dasharray: 2.5 97.5;
            stroke-dashoffset: 0;
            animation: panel-btn-orbit 4s linear infinite;
            animation-play-state: paused;
        }
        .panel-btn:hover .panel-btn-seg,
        .panel-btn:focus-visible .panel-btn-seg {
            animation-play-state: running;
        }
        
        @keyframes panel-btn-orbit {
            to { stroke-dashoffset: -100; }
        }
        
        /* Плавное появление элементов */
        .fade-in { animation: fade-in 2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes fade-in {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* Инверсия цвета при наведении на строки тарифов */
        .row-hover:hover {
            background-color: #fff;
            color: #000;
        }
        .row-hover:hover .text-neutral-500 { color: #666; }
        .row-hover:hover .action-btn { background-color: #000; color: #fff; }

        /* --- Секция #panel: картотека экранов панели и список возможностей ---------
           Все карточки колоды лежат в одной ячейке грида, место в стопке задаёт --slot
           (0 — впереди, 3 — спрятана): от него считаются сдвиг, масштаб, прозрачность
           и z-index, поэтому высота колоды равна высоте одной карточки и не зависит
           от того, какая впереди. Макеты экранов нарисованы на холсте 720×450 и
           масштабируются под ширину рамки одной переменной --pnl-k — так они выглядят
           как снимки на любой ширине, а замена на настоящий <img> не трогает раскладку. */

        /* У Sora нет кириллицы: без Manrope вторым шрифтом заголовок уходит в серифы */
        .pnl-title { font-family: 'Sora', 'Manrope', sans-serif; }
        .pnl-side { min-width: 0; }
        .pnl-list { display: flex; flex-direction: column; gap: 0; }
        .pnl-item {
            position: relative; display: flex; align-items: flex-start; gap: 0.9rem;
            width: 100%; min-height: 64px; padding: 1rem 1.4rem 1rem 1rem; border: 0;
            border-radius: 1.4rem; background: transparent; color: inherit; text-align: left; cursor: pointer;
            -webkit-appearance: none; appearance: none;
            transition: background 0.3s ease;
        }
        .pnl-item:hover { background: rgba(255, 255, 255, 0.04); }
        /* Активный пункт получает поверхность карточки и слабое свечение своего акцента слева */
        .pnl-item.is-active { background: radial-gradient(420px circle at 0% 50%, rgba(var(--acc), 0.14), transparent 70%), #18181a; }
        .pnl-item:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; }
        .pnl-item-ico {
            width: 44px; height: 44px; border-radius: 0.9rem; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(var(--acc), 0.12); color: rgb(var(--acc));
            transition: background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .pnl-item-ico svg { width: 22px; height: 22px; display: block; }
        .pnl-item:hover .pnl-item-ico, .pnl-item.is-active .pnl-item-ico { background: rgba(var(--acc), 0.2); }
        .pnl-item.is-active .pnl-item-ico { transform: scale(1.05); }
        .pnl-item-txt { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
        .pnl-item-title {
            display: block; font-family: 'Sora', 'Manrope', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.2;
            letter-spacing: -0.01em; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            transition: color 0.25s ease;
        }
        .pnl-item:hover .pnl-item-title, .pnl-item.is-active .pnl-item-title { color: #ffffff; }
        .pnl-item-note {
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
            margin-top: 3px; font-size: 12px; font-weight: 300; line-height: 1.35; color: #63636d; transition: color 0.25s ease;
        }
        .pnl-item.is-active .pnl-item-note { color: #8a8a93; }
        @media (min-width: 1280px) { .pnl-item-note { display: block; white-space: nowrap; text-overflow: ellipsis; } }
        /* Развёрнутое описание есть только у активного пункта: раскрывается дорожкой
           грида 0fr → 1fr — так высота анимируется от содержимого без замеров скриптом. */
        .pnl-item-desc {
            display: grid; grid-template-rows: 0fr; opacity: 0;
            font-size: 12.5px; font-weight: 300; line-height: 1.45; color: #a1a1aa;
            transition: grid-template-rows 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
        }
        .pnl-item-desc > span { display: block; min-height: 0; overflow: hidden; padding-top: 10px; }
        .pnl-item.is-active .pnl-item-desc { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, 0.1s; }
        .pnl-item-num {
            flex-shrink: 0; margin-left: auto; align-self: flex-start; line-height: 44px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.2); transition: color 0.25s ease;
        }
        .pnl-item.is-active .pnl-item-num { color: rgb(var(--acc)); }
        @media (max-width: 1279px) { .pnl-item-num { display: none; } }

        /* Телефон: список становится лентой пилюль и уезжает под поля страницы, чтобы у
           прокрутки не было видимого «обрыва» на краю колонки. 4px внутри — под кольцо фокуса */
        .pnl-caption { display: none; }
        @media (max-width: 767px) {
            .pnl-list {
                flex-direction: row; gap: 0.5rem; margin: 0 -1.5rem; padding: 4px 1.5rem;
                overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
                scroll-snap-type: x proximity; scroll-padding: 0 1.5rem;
            }
            .pnl-list::-webkit-scrollbar { display: none; }
            .pnl-item {
                flex: 0 0 auto; width: auto; min-height: 42px; height: 42px; padding: 0 1rem 0 0.4rem; gap: 0.55rem;
                border-radius: 9999px; background: #18181a; scroll-snap-align: center;
            }
            .pnl-item:hover, .pnl-item.is-active { background: #262626; }
            .pnl-item.is-active .pnl-item-ico { transform: none; }
            .pnl-item-ico { width: 30px; height: 30px; border-radius: 9999px; }
            .pnl-item-ico svg { width: 15px; height: 15px; }
            .pnl-item-title { font-size: 12.5px; }
            .pnl-item-note, .pnl-item-desc, .pnl-item-num { display: none; }
            /* min-height: подпись меняется, сетка под ней — нет */
            .pnl-caption { display: block; margin-top: 1rem; min-height: 4.5rem; }
        }
        .pnl-caption-title { display: block; font-family: 'Sora', 'Manrope', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: #ffffff; }
        .pnl-caption-note { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: #a3a3a3; }

        .pnl-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
        /* Кириллица в кнопке: Manrope вторым, иначе «Открыть панель» ляжет серифами */
        .pnl-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
            height: 48px; padding: 0 1.75rem; border-radius: 9999px; background: #ffffff; color: #0b0b0c;
            font-family: 'Sora', 'Manrope', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
            white-space: nowrap; transition: background 0.25s ease, color 0.25s ease;
        }
        .pnl-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
        .pnl-btn:hover { background: #3b82f6; color: #ffffff; }
        .pnl-btn.is-ghost { background: #18181a; color: #ffffff; }
        .pnl-btn.is-ghost svg { width: 15px; height: 15px; color: #8a8a93; transition: color 0.25s ease; }
        .pnl-btn.is-ghost:hover { background: #262626; }
        .pnl-btn.is-ghost:hover svg { color: #ffffff; }
        .pnl-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; }
        @media (max-width: 639px) { .pnl-btn { width: 100%; } }

        .pnl-deck { position: relative; min-width: 0; --pnl-peek: 16px; --pnl-k: 1; outline: none; }
        .pnl-deck:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 6px; border-radius: 1.75rem; }
        /* Ореол под колодой в цвете передней карточки (--acc на .pnl-deck ставит скрипт).
           Цвет переключается мгновенно — при таком размытии скачок не читается. */
        .pnl-stage {
            position: relative; display: grid; padding-top: calc(var(--pnl-peek) * 2);
            touch-action: pan-y; user-select: none; -webkit-user-select: none;
        }
        .pnl-stage::before {
            content: ''; position: absolute; inset: -12% -8% -16%; z-index: 0; pointer-events: none;
            background: radial-gradient(55% 60% at 50% 50%, rgba(var(--acc), 0.16), transparent 70%);
        }
        @media (hover: hover) and (pointer: fine) { .pnl-stage { cursor: grab; } .pnl-stage.is-dragging { cursor: grabbing; } }

        /* Карточка колоды. Единственная тень на сайте: без неё стопка не читается как стопка.
           Origin сверху — задние карточки уменьшаются к верхней кромке и выглядывают над передней.
           Прозрачность падает квадратично: слот 1 ещё хорошо виден, слот 3 уже погашен. */
        .pnl-card {
            grid-area: 1 / 1; --slot: 3;
            position: relative; z-index: calc(10 - var(--slot));
            border-radius: 1.75rem; overflow: hidden;
            background: radial-gradient(700px circle at 50% 0%, rgba(var(--acc), 0.12), transparent 70%), #18181a;
            box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
            transform-origin: 50% 0;
            transform: translateY(calc(var(--slot) * var(--pnl-peek) * -1)) scale(calc(1 - var(--slot) * 0.06));
            opacity: clamp(0, calc(1 - var(--slot) * var(--slot) * 0.1112), 1);
            pointer-events: none;
            transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, background 0.4s ease;
        }
        /* До скрипта (и без него) стопку раскладывает порядок в разметке */
        .pnl-card:nth-child(1) { --slot: 0; }
        .pnl-card:nth-child(2) { --slot: 1; }
        .pnl-card:nth-child(3) { --slot: 2; }
        /* Затемнение задних карточек: слой поверх контента, чтобы ярче была только передняя */
        .pnl-card::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #000; opacity: calc(var(--slot) * 0.18); pointer-events: none; transition: opacity 0.4s ease; }
        .pnl-card.is-front { pointer-events: auto; }
        .pnl-card.is-peek { pointer-events: auto; cursor: pointer; }
        .pnl-deck:hover .pnl-card.is-front { background: radial-gradient(700px circle at 50% 0%, rgba(var(--acc), 0.2), transparent 70%), #18181a; }
        /* Уходящая опускается вниз и чуть проворачивается; приходящая (prev) поднимается тем же путём.
           На время анимации карточка поверх всех, после снятия класса она уже стоит на своём --slot. */
        .pnl-card.is-leaving  { animation: pnl-leave 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; z-index: 20; }
        .pnl-card.is-entering { animation: pnl-enter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; z-index: 20; }
        @keyframes pnl-leave { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(56px) rotate(-4deg) scale(0.98); opacity: 0; } }
        @keyframes pnl-enter { from { transform: translateY(56px) rotate(-4deg) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
        .pnl-stage.is-dragging .pnl-card.is-front { transition: none; }

        /* Средняя колонка может ужаться до нуля — длинный адрес обрезается многоточием, а не краем карточки */
        .pnl-chrome { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(41px, 1fr) minmax(0, auto) minmax(41px, 1fr); align-items: center; height: 40px; padding: 0 1.1rem; }
        .pnl-chrome-dots { display: flex; gap: 7px; }
        .pnl-chrome-dots i { width: 9px; height: 9px; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); }
        .pnl-chrome-url {
            display: inline-flex; align-items: center; gap: 0.4rem; height: 22px; padding: 0 0.75rem; border-radius: 9999px;
            background: rgba(255, 255, 255, 0.05); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 10.5px; letter-spacing: 0.02em; color: #a1a1aa; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
        }
        .pnl-chrome-url span { color: #63636d; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .pnl-chrome-url svg { width: 10px; height: 10px; flex-shrink: 0; color: #63636d; }
        /* Окно снимка: 16:10, всегда одной высоты от ширины. Настоящий <img> ляжет поверх макета */
        .pnl-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0f0f11; }
        .pnl-img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; }
        .pnl-screen { position: absolute; top: 0; left: 0; width: 720px; height: 450px; transform-origin: 0 0; transform: scale(var(--pnl-k, 1)); }
        @media (max-width: 639px) {
            .pnl-deck { --pnl-peek: 12px; }
            .pnl-chrome { height: 34px; padding: 0 0.9rem; }
            .pnl-chrome-url { font-size: 9.5px; padding: 0 0.6rem; }
        }

        .pnl-ctl { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; min-height: 40px; }
        .pnl-ctl-btn {
            width: 40px; height: 40px; border-radius: 9999px; border: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
            background: rgba(255, 255, 255, 0.05); color: #8a8a93; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
        }
        .pnl-ctl-btn svg { width: 16px; height: 16px; display: block; }
        .pnl-ctl-btn:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
        .pnl-ctl-btn:active { background: rgba(255, 255, 255, 0.16); }
        .pnl-ctl-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 3px; }
        /* Кнопка паузы показывает действие, которое сделает: «пауза», пока крутится, «play», когда стоит */
        .pnl-ctl-btn .pnl-ico-play, .pnl-deck.is-stopped .pnl-ctl-btn .pnl-ico-pause { display: none; }
        .pnl-deck.is-stopped .pnl-ctl-btn .pnl-ico-play { display: block; }
        .pnl-ctl-count { margin-left: 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 0.08em; color: #63636d; white-space: nowrap; font-variant-numeric: tabular-nums; }
        .pnl-ctl-count b { display: inline-block; color: #ffffff; font-weight: 700; }
        .pnl-ctl-bar { width: 96px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; flex-shrink: 0; }
        .pnl-ctl-fill { display: block; height: 100%; background: rgb(var(--acc)); transform-origin: 0 50%; transform: scaleX(0); transition: background 0.3s ease, opacity 0.3s ease; }
        .pnl-deck.is-paused .pnl-ctl-fill { opacity: 0.45; }
        .pnl-ctl-name {
            margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #63636d;
        }
        @media (max-width: 639px) { .pnl-ctl-name { display: none; } .pnl-ctl { margin-top: 0.75rem; } }

        /* Без движения: стопка не показывается, любое переключение — кроссфейд одного экрана;
           автопрокрутка по умолчанию выключена (см. скрипт), кнопка play её включает */
        @media (prefers-reduced-motion: reduce) {
            .pnl-stage { padding-top: 0; }
            .pnl-card, .pnl-card::after, .pnl-item-ico { transition: opacity 0.2s linear; transform: none !important; }
            .pnl-card:not(.is-front) { opacity: 0 !important; }
            .pnl-card::after { opacity: 0 !important; }
            .pnl-card.is-leaving, .pnl-card.is-entering { animation: none; }
            .pnl-list { scroll-behavior: auto; }
        }

        /* --- Набор макета панели (.pnl-ui*): пиксели холста 720×450 ------------------
           Всё в абсолютных px нарочно: холст масштабируется целиком через --pnl-k,
           поэтому rem/em здесь только сломали бы пропорции. Это декорация (aria-hidden). */
        .pnl-ui { display: grid; grid-template-columns: 150px 1fr; width: 720px; height: 450px; background: #0f0f11; color: #a1a1aa; font-family: 'Manrope', sans-serif; font-size: 11.5px; line-height: 1.3; text-align: left; letter-spacing: 0; text-transform: none; }
        .pnl-ui-side { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; border-right: 1px solid rgba(255, 255, 255, 0.06); }
        .pnl-ui-brand { padding: 2px 8px 10px; font-family: 'Sora', 'Manrope', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: -0.02em; color: #ffffff; }
        .pnl-ui-brand b { color: #63636d; font-weight: 800; }
        .pnl-ui-proj { display: flex; justify-content: space-between; align-items: center; height: 28px; margin-bottom: 8px; padding: 0 9px; border-radius: 8px; background: #1d1d21; color: #ffffff; font-size: 11px; font-weight: 600; }
        .pnl-ui-proj svg { width: 9px; height: 9px; color: #63636d; }
        .pnl-ui-nav-i { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 7px; color: #8a8a93; font-size: 11px; font-weight: 500; }
        .pnl-ui-nav-i svg { width: 13px; height: 13px; opacity: 0.8; flex-shrink: 0; }
        .pnl-ui-nav-i.is-active { background: #1d1d21; color: #ffffff; }
        .pnl-ui-nav-i.is-active svg { color: rgb(var(--acc)); opacity: 1; }
        .pnl-ui-user { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 10.5px; color: #a1a1aa; }
        .pnl-ui-avatar { width: 20px; height: 20px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(59, 130, 246, 0.2); color: #93c5fd; font-size: 8.5px; font-weight: 700; font-style: normal; }
        .pnl-ui-avatar.is-purple { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
        .pnl-ui-avatar.is-cyan { background: rgba(6, 182, 212, 0.2); color: #67e8f9; }
        .pnl-ui-avatar.is-green { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
        .pnl-ui-avatar.is-grey { background: rgba(255, 255, 255, 0.08); color: #a1a1aa; }
        .pnl-ui-main { display: flex; flex-direction: column; min-width: 0; }
        .pnl-ui-top { height: 40px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
        .pnl-ui-crumb { font-size: 11px; color: #63636d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pnl-ui-crumb b { color: #ffffff; font-weight: 600; }
        .pnl-ui-search { margin-left: auto; width: 170px; height: 26px; padding: 0 8px; border-radius: 7px; background: #141417; border: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: 6px; color: #63636d; font-size: 10.5px; flex-shrink: 0; }
        .pnl-ui-search svg { width: 11px; height: 11px; flex-shrink: 0; }
        .pnl-ui-search kbd { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
        .pnl-ui-bell { position: relative; width: 26px; height: 26px; border-radius: 7px; background: #141417; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #a1a1aa; }
        .pnl-ui-bell svg { width: 13px; height: 13px; }
        .pnl-ui-bell::after { content: ''; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 9999px; background: #3b82f6; }
        .pnl-ui-bal { height: 26px; padding: 0 9px; border-radius: 7px; display: inline-flex; align-items: center; flex-shrink: 0; background: rgba(16, 185, 129, 0.12); color: #34d399; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
        .pnl-ui-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }

        .pnl-ui-h { display: flex; align-items: center; gap: 10px; }
        .pnl-ui-h h4 { margin: 0; font-family: 'Sora', 'Manrope', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: #ffffff; white-space: nowrap; }
        .pnl-ui-h small { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: #63636d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pnl-ui-h .pnl-ui-btn:first-of-type, .pnl-ui-h .pnl-ui-tabs:first-of-type { margin-left: auto; }
        .pnl-ui-btn { height: 26px; padding: 0 10px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; background: #1d1d21; color: #ffffff; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
        .pnl-ui-btn svg { width: 11px; height: 11px; }
        .pnl-ui-btn.is-primary { background: #3b82f6; }
        .pnl-ui-btn.is-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); color: #a1a1aa; }
        .pnl-ui-btn.is-sm { height: 20px; padding: 0 8px; font-size: 9.5px; }
        .pnl-ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
        .pnl-ui-kpi { padding: 9px 11px; border-radius: 9px; background: #141417; border: 1px solid rgba(255, 255, 255, 0.05); min-width: 0; }
        .pnl-ui-kpi-k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: #63636d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pnl-ui-kpi-v { margin-top: 3px; font-family: 'Sora', 'Manrope', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #ffffff; white-space: nowrap; }
        .pnl-ui-kpi-v.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; letter-spacing: 0; }
        .pnl-ui-kpi-v.is-green { color: #34d399; }
        .pnl-ui-kpi-d { margin-left: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 500; font-style: normal; color: #34d399; }
        .pnl-ui-kpi-d.is-warn { color: #fbbf24; }
        .pnl-ui-kpi-d.is-dim { color: #63636d; }
        .pnl-ui-kpi small { display: block; margin-top: 3px; font-size: 9.5px; color: #63636d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pnl-ui-card { padding: 10px 12px; border-radius: 10px; background: #141417; border: 1px solid rgba(255, 255, 255, 0.05); min-width: 0; }
        .pnl-ui-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 600; color: #ffffff; }
        .pnl-ui-card-h small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 400; color: #63636d; white-space: nowrap; }
        .pnl-ui-2col, .pnl-ui-3-2, .pnl-ui-2-3 { display: grid; gap: 10px; min-height: 0; align-items: start; }
        .pnl-ui-2col { grid-template-columns: 1fr 1fr; }
        .pnl-ui-3-2 { grid-template-columns: 3fr 2fr; }
        .pnl-ui-2-3 { grid-template-columns: 2fr 3fr; }
        .pnl-ui-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
        .pnl-ui-table { display: flex; flex-direction: column; border-radius: 10px; background: #141417; border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; }
        .pnl-ui-tr { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 10.5px; color: #a1a1aa; }
        .pnl-ui-tr.is-head { height: 24px; border-top: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: #63636d; }
        .pnl-ui-tr.is-sel { background: #1d1d21; }
        .pnl-ui-tr.is-dim { opacity: 0.55; }
        .pnl-ui-td { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pnl-ui-td.is-name { color: #ffffff; font-weight: 600; }
        .pnl-ui-td.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
        .pnl-ui-td.is-r { text-align: right; }
        .pnl-ui-td small { margin-left: 5px; font-size: 9.5px; color: #63636d; }
        .pnl-ui-td .pnl-ui-avatar { width: 18px; height: 18px; margin-right: 6px; vertical-align: middle; }
        .pnl-ui-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 9999px; vertical-align: middle; background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.8); }
        .pnl-ui-dot.is-off { background: #63636d; box-shadow: none; }
        .pnl-ui-dot.is-warn { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.8); }
        .pnl-ui-dot.is-blue { background: #3b82f6; box-shadow: 0 0 6px rgba(59, 130, 246, 0.8); }
        .pnl-ui-pill { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; border-radius: 9999px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; background: rgba(255, 255, 255, 0.06); color: #a1a1aa; white-space: nowrap; vertical-align: middle; }
        .pnl-ui-pill.is-green { background: rgba(16, 185, 129, 0.12); color: #34d399; }
        .pnl-ui-pill.is-blue { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }
        .pnl-ui-pill.is-purple { background: rgba(168, 85, 247, 0.14); color: #c084fc; }
        .pnl-ui-pill.is-cyan { background: rgba(6, 182, 212, 0.12); color: #22d3ee; }
        .pnl-ui-pill.is-amber { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
        .pnl-ui-pill.is-red { background: rgba(239, 68, 68, 0.12); color: #f87171; }
        .pnl-ui-toggle { position: relative; display: inline-block; width: 26px; height: 15px; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); vertical-align: middle; flex-shrink: 0; }
        .pnl-ui-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 9999px; background: #ffffff; }
        .pnl-ui-toggle.is-on { background: #3b82f6; }
        .pnl-ui-toggle.is-on::after { left: 13px; }
        .pnl-ui-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 10.5px; color: #d4d4d4; }
        .pnl-ui-row:first-of-type { border-top: 0; padding-top: 0; }
        .pnl-ui-row b { color: #ffffff; font-weight: 600; }
        .pnl-ui-row small { font-size: 9.5px; color: #63636d; margin-left: 5px; }
        .pnl-ui-row > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pnl-ui-note { margin-top: 2px; font-size: 9.5px; line-height: 1.4; color: #63636d; }
        .pnl-ui-big { font-family: 'Sora', 'Manrope', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #ffffff; white-space: nowrap; }
        .pnl-ui-spark { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 12px; margin-right: 6px; vertical-align: middle; }
        .pnl-ui-spark i { width: 3px; height: var(--w); border-radius: 1px; background: rgba(var(--acc, 59, 130, 246), 0.7); }
        .pnl-ui-bar { height: 6px; margin-top: 4px; border-radius: 9999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
        .pnl-ui-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: #3b82f6; }
        .pnl-ui-bar.is-green i { background: #10b981; }
        .pnl-ui-chart { position: relative; min-width: 0; }
        .pnl-ui-chart svg { display: block; width: 100%; height: auto; }
        .pnl-ui-axis { display: flex; justify-content: space-between; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8.5px; color: #4b4b55; }
        .pnl-ui-legend { display: flex; gap: 12px; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; color: #8a8a93; }
        .pnl-ui-legend i { display: inline-block; width: 8px; height: 2px; margin-right: 5px; vertical-align: middle; border-radius: 1px; background: currentColor; }
        .pnl-ui-legend b { color: #ffffff; font-weight: 600; }
        .pnl-ui-legend .is-cyan { color: #22d3ee; }
        .pnl-ui-legend .is-purple { color: #c084fc; }
        .pnl-ui-feed { display: flex; flex-direction: column; }
        .pnl-ui-feed-i { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 10.5px; color: #a1a1aa; white-space: nowrap; overflow: hidden; }
        .pnl-ui-feed-i:first-child { border-top: 0; padding-top: 0; }
        .pnl-ui-feed-i time { flex-shrink: 0; width: 46px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; color: #63636d; }
        .pnl-ui-feed-i b { color: #ffffff; font-weight: 600; }
        .pnl-ui-feed-i span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .pnl-ui-tl { display: flex; flex-direction: column; }
        .pnl-ui-tl-i { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 18px; font-size: 10.5px; color: #a1a1aa; white-space: nowrap; overflow: hidden; }
        .pnl-ui-tl-i b { color: #ffffff; font-weight: 600; }
        .pnl-ui-tl-i::before { content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 9999px; background: #3b82f6; }
        .pnl-ui-tl-i::after { content: ''; position: absolute; left: 3px; top: 20px; bottom: -6px; width: 1px; background: rgba(255, 255, 255, 0.08); }
        .pnl-ui-tl-i:last-child::after { display: none; }
        .pnl-ui-tl-i.is-manual::before { background: #a855f7; }
        .pnl-ui-tl-i .pnl-ui-btn { margin-left: auto; }
        .pnl-ui-code { margin: 0; padding: 10px 12px; border-radius: 10px; background: #0b0b0d; border: 1px solid rgba(255, 255, 255, 0.05); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.55; color: #a1a1aa; white-space: pre; overflow: hidden; }
        .c-k { color: #60a5fa; }
        .c-s { color: #34d399; }
        .c-c { color: #63636d; }
        .pnl-ui-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); flex-shrink: 0; }
        .pnl-ui-tabs span { height: 20px; padding: 0 8px; border-radius: 5px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; color: #8a8a93; }
        .pnl-ui-tabs span.is-active { background: #26262b; color: #ffffff; }
        .pnl-ui-msg { max-width: 250px; margin-top: 10px; padding: 8px 10px; border-radius: 12px 12px 12px 4px; background: #1d1d21; font-size: 10.5px; line-height: 1.4; color: #d4d4d4; }
        .pnl-ui-msg b { display: block; margin-bottom: 2px; color: #60a5fa; font-size: 10px; }
        .pnl-ui-msg time { display: block; margin-top: 3px; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8.5px; color: #63636d; }

        /* --- Карта сети во весь экран ------------------------------------------
           Метка города: точка и две строки справа от неё. Размер точки говорит о
           числе площадок в городе, поэтому радиус задан у каждой метки свой. */
        .map-node-pin { pointer-events: none; }
        .map-node-pin .pin-dot { fill: #ffffff; }
        .map-node-pin .pin-label {
            fill: #ffffff;
            font-family: 'Manrope', sans-serif;
            font-size: 19px;
            font-weight: 600;
        }
        .map-node-pin .pin-note {
            fill: rgba(255, 255, 255, 0.62);
            font-family: 'Manrope', sans-serif;
            font-size: 13px;
            font-weight: 400;
        }

        .pin-radar {
            transform-box: fill-box;
            transform-origin: center;
            animation: pin-radar 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
        }
        @keyframes pin-radar {
            0%   { transform: scale(0.5); opacity: 0.8; }
            70%  { transform: scale(2.8); opacity: 0; }
            100% { transform: scale(2.8); opacity: 0; }
        }

        .fiber-flow { stroke-dasharray: 6 14; animation: fiber-flow 7s linear infinite; }
        @keyframes fiber-flow { to { stroke-dashoffset: -160; } }

        /* Бесконечная бегущая строка преимуществ: симметричные маски и бесшовный цикл */
        .marquee-container {
            overflow: hidden;
            position: relative;
            width: 100%;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 80px, black calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 80px, black calc(100% - 80px), transparent 100%);
        }
        @media (max-width: 767.98px) {
            .marquee-container {
                -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
            }
        }
        .marquee-track {
            display: flex;
            width: max-content;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        }
        .marquee-track:hover .marquee-group {
            animation-play-state: paused;
        }
        .marquee-group {
            display: flex;
            flex-shrink: 0;
            will-change: transform;
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            animation: marquee-scroll 24s linear infinite;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        @keyframes marquee-scroll {
            0%   { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-100%, 0, 0); }
        }

        /* Отзывы: ленты на тех же .marquee-*, свой темп и встречное направление второго ряда */
        .rv-group { display: flex; flex-shrink: 0; gap: 16px; padding-right: 16px; animation: marquee-scroll 70s linear infinite; will-change: transform; }
        .rv-row-rev .rv-group { animation-direction: reverse; animation-duration: 80s; }
        .rv-track:hover .rv-group { animation-play-state: paused; }
        .rv-card { --acc: 59, 130, 246; position: relative; display: flex; flex-direction: column; gap: 18px; width: 320px; margin: 0; padding: 24px; border-radius: 1.5rem; background: radial-gradient(420px 220px at 0% 0%, rgba(var(--acc), 0.08), transparent 70%), #18181a; transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
        @media (min-width: 768px) { .rv-card { width: 400px; padding: 28px; gap: 20px; } .rv-group { gap: 24px; padding-right: 24px; } }
        .rv-card:hover { transform: scale(1.03); z-index: 1; }
        /* Запас по вертикали, чтобы увеличенная карточка не резалась overflow ленты */
        .rv-row { padding: 16px 0; margin: -16px 0; }
        .rv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .rv-stars { display: flex; gap: 2px; color: #fbbf24; }
        .rv-stars svg { width: 15px; height: 15px; }
        .rv-plan { padding: 3px 9px; border-radius: 9999px; background: rgba(var(--acc), 0.12); color: rgb(var(--acc)); font: 700 10.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
        .rv-text { flex: 1; margin: 0; color: #d4d4d8; font: 400 15px/1.6 'Manrope', sans-serif; }
        @media (min-width: 768px) { .rv-text { font-size: 16px; } }
        .rv-who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
        .rv-ava { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: linear-gradient(135deg, rgba(var(--acc), 0.9), rgba(var(--acc), 0.45)); color: #ffffff; font: 700 14px/1 'Sora', 'Manrope', sans-serif; }
        .rv-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .rv-meta b { color: #ffffff; font: 700 14px/1.2 'Sora', 'Manrope', sans-serif; }
        .rv-meta span { color: #8a8a93; font: 400 12.5px/1.3 'Manrope', sans-serif; }
        /* Соцсети: карточка с фирменным цветом сети в свечении, значке и стрелке */
        .soc-card { position: relative; display: flex; flex-direction: column; min-height: 260px; padding: 28px; border-radius: 1.5rem; overflow: hidden; color: inherit; background: radial-gradient(360px 240px at 100% 0%, rgba(var(--acc), 0.16), transparent 70%), #18181a; transition: background .3s ease; }
        .soc-card:hover { background: radial-gradient(360px 240px at 100% 0%, rgba(var(--acc), 0.28), transparent 70%), #18181a; }
        .soc-card:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
        .soc-ico { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; border-radius: 1rem; background: rgb(var(--acc)); color: #ffffff; box-shadow: 0 10px 30px rgba(var(--acc), 0.35); }
        .soc-ico svg { width: 28px; height: 28px; }
        .soc-name { font: 800 24px/1.1 'Sora', 'Manrope', sans-serif; letter-spacing: -.02em; color: #ffffff; }
        .soc-handle { margin-top: 6px; font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8a8a93; }
        .soc-note { margin: 16px 0 24px; font: 400 14.5px/1.55 'Manrope', sans-serif; color: #a1a1aa; }
        .soc-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 'Manrope', sans-serif; color: #ffffff; }
        .soc-cta svg { width: 16px; height: 16px; color: rgb(var(--acc)); transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
        .soc-card:hover .soc-cta svg { transform: translateX(4px); }
        @media (prefers-reduced-motion: reduce) { .soc-card, .soc-cta svg { transition: none; } }
        @media (prefers-reduced-motion: reduce) {
            .rv-group { animation: none; }
            .rv-row { overflow-x: auto; }
            .rv-group[aria-hidden="true"] { display: none; }
            .rv-card { transition: none; }
        }

        /* Поиск домена под описанием в hero. Форма-строка: знак зоны слева, поле,
           кнопка справа. Стекло здесь такое же, как у блоков продуктов ниже, только
           скругление полное — строка читается как одно поле, а не как карточка. */
        .domain-form {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            max-width: 36rem;
            padding: 0.5rem 0.5rem 0.5rem 1.4rem;
            border-radius: 9999px;
            /* Та же поверхность, что у свёрнутых блоков продуктов ниже: тот же серый
               с тем же размытием под ним. Линия по контуру — той же светлоты, что
               линии сетки у развёрнутых блоков. */
            border: 1px solid rgba(255, 255, 255, 0.07);
            /* Реже, чем у блоков продуктов: строка стоит на самом ярком месте кадра,
               и сквозь неё видно фон — держит её размытие, а не плотность. */
            background-color: rgba(78, 78, 88, 0.4);
            /* Текстовый курсор на всей строке, а не только над самим полем: поле уже
               строки, и над иконкой и внутренними полями курсор был обычный. Клик по
               строке переводит в поле — см. скрипт внизу. */
            cursor: text;
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .domain-form:hover,
        .domain-form:focus-within { background-color: rgba(92, 92, 104, 0.46); }
        /* Фокус в строке отличим от наведения синей рамкой; кольца-тени нет */
        .domain-form:focus-within { border-color: rgba(59, 130, 246, 0.6); }
        .domain-form svg {
            width: 19px;
            height: 19px;
            display: block;
            flex-shrink: 0;
            color: #8a8a93;
            transition: color 0.25s ease;
        }
        /* Наведение слегка светлит иконку, фокус красит её в синий вместе с рамкой */
        .domain-form:hover svg { color: #c4c4cc; }
        .domain-form:focus-within svg { color: #3b82f6; }
        /* Поле без своей рамки и фона: обводку и стекло держит вся строка */
        .domain-input {
            /* Базис 0 и нулевая ширина: собственная ширина <input> (~190px) иначе
               входит в минимальную ширину формы, и на телефоне колонка с ней
               становилась шире экрана — кнопку «Проверить» срезало кромкой. */
            flex: 1 1 0;
            width: 0;
            min-width: 0;
            border: 0;
            background: transparent;
            outline: none;
            color: #ffffff;
            font-family: 'Manrope', sans-serif;
            font-size: 16.5px;
            font-weight: 500;
        }
        .domain-input::placeholder { color: #8a8a93; font-weight: 400; }
        .domain-go {
            flex-shrink: 0;
            height: 50px;
            padding: 0 1.6rem;
            border-radius: 9999px;
            border: 0;
            background: #ffffff;
            color: #0b0b0c;
            font-family: 'Sora', 'Manrope', sans-serif;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            cursor: pointer;
            transition: background 0.25s ease, color 0.25s ease;
        }
        .domain-go:hover { background: #3b82f6; color: #ffffff; }
        /* Зоны под строкой: подсказка по ценам и одновременно быстрый выбор — клик
           подставляет зону в поле, см. скрипт внизу страницы. */
        .domain-zones {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 1.5rem;
            margin-top: 0.85rem;
        }
        .domain-zone {
            display: inline-flex;
            align-items: baseline;
            gap: 0.4rem;
            font-family: 'Manrope', sans-serif;
            font-size: 13px;
            font-weight: 400;
            color: #8a8a93;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        .domain-zone b {
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: -0.015em;
            color: #ffffff;
        }
        .domain-zone:hover { color: #ffffff; }

        /* Быстрый выбор продукта внизу hero — те же плашки, что у выбора типов продуктов
           в каталоге: знак 46px слева и две строки текста справа. Классы свои, чтобы
           правка каталога не задевала hero.
           Ряд живёт между двумя крайними положениями, и в каком он сейчас — решает
           фактическая позиция страницы (см. привязку к скроллу выше). Вверху страницы
           блоки сомкнуты в сплошную ленту во всю ширину окна и прижаты к нижнему краю;
           ниже они разъезжаются в отдельные скруглённые блоки внутри сетки сайта.
           Раскладка при этом всегда одна — свёрнутая; поля и просветы стоят на месте,
           а лента во всю ширину получается сдвигом и растяжением подложек. */
        .hero-select {
            position: relative;
            z-index: 1;
            padding-inline: 1.5rem;
            padding-bottom: 2rem;
        }
        @media (min-width: 768px) {
            .hero-select {
                padding-inline: 3rem;
                padding-bottom: 2.5rem;
            }
        }
        /* У ряда нет ни заливки, ни размытия — всё это живёт на подложках блоков.
           Сам ряд только опускается к нижнему краю окна в развёрнутом виде. */
        .hero-rail {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.5rem;
        }
        @media (min-width: 640px) {
            .hero-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .hero-prod:last-child { grid-column: span 2; }
        }
        /* Пять колонок только с 1280px: на 1024 блок выходил ~180px, имена резались
           многоточием, а подписи с принудительными переносами вылезали из подложки. */
        @media (min-width: 1280px) {
            .hero-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
            .hero-prod:last-child { grid-column: auto; }
        }
        /* Своей заливки у блока нет — заливку и скругление пришлось бы перекрашивать
           на каждом кадре. Всё это живёт на одной подложке .hero-prod-plate: она лежит
           под содержимым и растягивается по ширине, смыкаясь с соседними в ленту. */
        .hero-prod {
            position: relative;
            /* Свой контекст наложения: подложки уходят под содержимое отрицательным z */
            isolation: isolate;
            display: flex;
            align-items: center;
            gap: 0.9rem;
            min-width: 0;
            height: 86px;
            padding: 0 1.2rem;
            cursor: pointer;
            text-align: left;
        }
        /* Единственная подложка блока. Тёмная заливка под осветлением обязательна:
           на одном размытии блок держаться не может — там, где за ним идёт светлый
           кадр видео, серый фон пропадает вовсе.
           Линии сверху и по левой кромке в развёрнутом виде складываются с соседними
           в сетку; здесь они прозрачные, цвет им даёт кадр from. Место под них занято
           всегда, поэтому их появление ничего не двигает. */
        .hero-prod-plate {
            position: absolute;
            inset: 0;
            z-index: -2;
            /* Наведение и клик ловит именно подложка, а не сам блок: блок остаётся
               шириной свёрнутого состояния, а видно растянутую подложку — зона иначе
               обрывается там, где у блока кончается его собственная ширина. Событие
               с подложки всплывает к ссылке, поэтому клик работает по всей площади. */
            pointer-events: auto;
            /* Растяжение идёт от левого края: так соседние подложки смыкаются встык */
            transform-origin: left center;
            border-radius: 1.4rem;
            border-top: 1px solid transparent;
            border-left: 1px solid transparent;
            background-color: rgba(78, 78, 88, 0.4);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
        }
        /* Осветление по наведению — отдельным слоем поверх подложки, а не сменой её
           заливки: заливку ведёт анимация скролла, и правило по наведению её уже не
           перебьёт. Здесь разделено так: наведение отвечает за прозрачность слоя,
           а положение страницы — за его плотность, поэтому в развёрнутой ленте
           осветление слабее, чем у отдельных блоков. */
        .hero-prod-plate::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background-color: rgba(255, 255, 255, 0.05);
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .hero-prod:hover .hero-prod-plate::after { opacity: 1; }
        /* Свечение направления — большой круг чистого цвета, идущий за курсором:
           его центр берётся из --mx/--my, которые ставит скрипт по движению мыши.
           Пока курсор не заходил на блок, круг стоит по центру. */
        .hero-prod::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            /* Скругление задано явно: у самого блока его нет, форма живёт на подложке */
            border-radius: 1.4rem;
            /* Растягивается от левого края, как и подложки, — иначе расходится с ними
               краями: они уезжают вправо на всю разницу, а подсветка вдвое меньше
               в каждую сторону и не дотягивается до линии справа. */
            transform-origin: left center;
            pointer-events: none;
            opacity: 0;
            background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--acc)), transparent 70%);
            transition: opacity 0.4s ease;
        }
        .hero-prod:hover::after { opacity: 0.22; }
        /* Стрелка выезжает справа: подсказка, что вкладка ведёт на страницу продукта.
           Сдвиг по ходу скролла (--adx) висит на самой стрелке, а выезд по наведению —
           на её знаке внутри: два разных сдвига на одном элементе перебивали бы друг
           друга. Без --adx стрелка держится правого края содержимого, а тот в
           развёрнутом виде на четверть колонки левее правого края прямоугольника. */
        .hero-prod-arrow {
            /* Вне потока: невидимая стрелка иначе держала ~31px ширины блока, и имена
               продуктов резались многоточием уже на 1280px. Правый край тот же, что
               у содержимого (поле блока) — от него считает сдвиг --adx скрипт. */
            position: absolute;
            right: 1.2rem;
            top: 50%;
            margin-top: -8.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgb(var(--acc));
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        .hero-prod-arrow svg {
            width: 17px;
            height: 17px;
            display: block;
            transform: translateX(-6px);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .hero-prod:hover .hero-prod-arrow { opacity: 1; }
        .hero-prod:hover .hero-prod-arrow svg { transform: translateX(0); }

        .hero-prod-ico {
            width: 46px;
            height: 46px;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: rgba(var(--acc), 0.12);
            color: rgb(var(--acc));
            transition: background 0.25s ease;
        }
        .hero-prod:hover .hero-prod-ico { background: rgba(var(--acc), 0.2); }
        .hero-prod-ico svg { width: 23px; height: 23px; display: block; }
        .hero-prod-txt { display: block; min-width: 0; }
        .hero-prod-name {
            display: block;
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 14.5px;
            line-height: 1.15;
            color: #a1a1aa;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color 0.25s ease;
        }
        .hero-prod:hover .hero-prod-name { color: #ffffff; }
        .hero-prod-note {
            display: block;
            margin-top: 3px;
            font-size: 11.5px;
            font-weight: 300;
            line-height: 1.35;
            color: #63636d;
        }

        /* --- Ряд преимуществ под bento-блоками (#architecture) -------------------
           Сетка без подложек: ячейки лежат прямо на чёрном, между ними тонкие линии.
           Линии — это фон контейнера, проступающий в зазорах в 1px между ячейками:
           наружной рамки нет, а решётка перестраивается сама при смене числа колонок.
           Фон контейнера — радиальный градиент, поэтому линии ярче в середине ряда и
           тают к краям, как подсветка на остальных поверхностях сайта. Скругление
           контейнера режет угловые ячейки, чтобы решётка не упиралась в углы.
           Четыре колонки только с 1280px: на 1024px колонка выходит ~210px. */
        .perk-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1px;
            background: radial-gradient(70% 90% at 50% 50%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 100%);
            border-radius: 1.5rem;
            overflow: hidden;
        }
        @media (min-width: 640px) { .perk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (min-width: 1280px) { .perk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
        .perk {
            position: relative;
            isolation: isolate;
            display: flex;
            flex-direction: column;
            gap: 1.4rem;
            min-width: 0;
            padding: 1.75rem 1.6rem 1.9rem;
            background: #000000;
            overflow: hidden;
        }
        /* Свечение цветом знака под курсором — тот же приём, что у продуктов в hero:
           центр круга ставит скрипт в --mx/--my. Пока курсор не заходил, круг в центре.
           Оно под содержимым (отрицательный z в своём контексте) и только по наведению:
           восемь постоянно светящихся ячеек спорили бы с крупными карточками выше. */
        .perk::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            opacity: 0;
            background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--acc), 0.22), transparent 70%);
            transition: opacity 0.4s ease;
        }
        .perk:hover::after { opacity: 1; }
        .perk-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
        /* Знак в тонком кольце без заливки; на наведении кольцо берёт цвет знака.
           Без сдвига и без тени: движение знака и ореол спорили со свечением ячейки. */
        .perk-ico {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 46px;
            height: 46px;
            border-radius: 9999px;
            color: rgb(var(--acc));
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
            transition: box-shadow 0.3s ease;
        }
        .perk:hover .perk-ico { box-shadow: inset 0 0 0 1px rgba(var(--acc), 0.6); }
        .perk-ico svg { width: 21px; height: 21px; display: block; }
        /* Номер пункта — как индексы «01/02/03» у крупных карточек выше, только мелкий */
        .perk-num {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            color: #4b4b53;
            transition: color 0.3s ease;
        }
        .perk:hover .perk-num { color: rgb(var(--acc)); }
        .perk-txt { min-width: 0; }
        /* Заголовки кириллические, поэтому у Sora обязателен запасной Manrope:
           без него кириллица уходит в системную антикву (как в подписях метрик выше). */
        .perk-title {
            margin: 0;
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 16px;
            line-height: 1.2;
            letter-spacing: -0.01em;
            color: #ffffff;
        }
        .perk-note {
            margin: 7px 0 0;
            max-width: 26rem;
            font-size: 13px;
            font-weight: 300;
            line-height: 1.5;
            color: #8a8a93;
        }
        @media (max-width: 639.98px) {
            .perk { flex-direction: row; gap: 1rem; padding: 1.3rem 1.25rem; }
            .perk-head { width: auto; flex-direction: column; align-items: center; justify-content: flex-start; align-self: flex-start; gap: 0.6rem; }
            .perk-ico { width: 42px; height: 42px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .perk::after, .perk-ico, .perk-num { transition: none; }
        }

        /* CPU Benchmark: полосы дорастают до своей длины, когда блок попадает в экран.
           Начальное состояние включает скрипт (.bench-anim), без него полосы сразу полные */

        /* Карточка «Своя панель»: функции чипами прямо в тексте и лента экранов панели */
        .pfeat { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; padding: 2px 9px 2px 7px; border-radius: .55rem; background: rgba(6, 182, 212, 0.1); color: #67e8f9; font-weight: 500; line-height: 1.5; white-space: nowrap; vertical-align: baseline; }
        .pfeat svg { width: 14px; height: 14px; flex-shrink: 0; }
        .pgal { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(6, 182, 212, 0.5) rgba(255, 255, 255, 0.06); margin: 0; padding: 4px 0 14px; --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
        .pgal.is-fade-l { --fl: 48px; }
        .pgal.is-fade-r { --fr: 48px; }
        .pgal::-webkit-scrollbar { height: 4px; }
        .pgal::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 9999px; }
        .pgal::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.5); border-radius: 9999px; }
        .pgal-nav { position: absolute; z-index: 2; top: calc(50% - 16px); transform: translateY(-50%); width: 38px; height: 38px; background: rgba(15, 15, 17, 0.85); color: #ffffff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .2s ease, background .2s ease; }
        .pgal-nav:hover { background: rgba(38, 38, 43, 0.95); }
        .pgal-nav-prev { left: 0; }
        .pgal-nav-next { right: 0; }
        .pgal-nav:disabled { opacity: 0; pointer-events: none; }
        .pgal-item { flex: 0 0 62%; display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; }
        @media (min-width: 640px) { .pgal-item { flex-basis: 40%; } }
        .pgal-shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .9rem; background: #0f0f11; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow .2s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
        .pgal-shot .pnl-screen { pointer-events: none; }
        .pgal-item:hover .pgal-shot, .pgal-item:focus-visible .pgal-shot { transform: translateY(-2px); }
        .pgal-item:focus-visible { outline: none; }
        .pgal-item:focus-visible .pgal-shot { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
        .pgal-cap { font: 600 12px/1.2 'Manrope', sans-serif; color: #a1a1aa; transition: color .2s ease; }
        .pgal-item:hover .pgal-cap { color: #ffffff; }
        @media (prefers-reduced-motion: reduce) { .pgal-shot { transition: none; } }
        /* Разворот экрана из галереи */
        .pbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; color: #ffffff; }
        .pbox::backdrop { background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
        .pbox[open] { display: flex; align-items: center; justify-content: center; }
        .pbox-inner { width: min(1120px, 100%); display: flex; flex-direction: column; gap: 12px; }
        .pbox-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 56px; }
        .pbox-cap { font: 700 15px/1.3 'Sora', 'Manrope', sans-serif; color: #ffffff; }
        .pbox-stage { position: relative; display: flex; align-items: center; gap: 16px; }
        .pbox-shot { position: relative; flex: 1; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1rem; background: #0f0f11; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 100px rgba(0, 0, 0, 0.6); }
        .pbox-btn { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(255, 255, 255, 0.08); color: #ffffff; cursor: pointer; transition: background .2s ease, opacity .2s ease; }
        .pbox-btn:hover { background: rgba(255, 255, 255, 0.16); }
        .pbox-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
        .pbox-btn svg { width: 18px; height: 18px; }
        .pbox-nav:disabled { opacity: 0; pointer-events: none; }
        @media (max-width: 639.98px) {
            .pbox-head { padding: 0; }
            .pbox-nav { position: absolute; z-index: 2; bottom: -52px; }
            .pbox-prev { left: calc(50% - 48px); } .pbox-next { right: calc(50% - 48px); }
        }
        .bench-fill { width: var(--w); }
        .bench-anim .bench-fill { width: 0; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s); }
        .bench-anim .bench-val { opacity: 0; transition: opacity .4s ease calc(var(--d, 0s) + .6s); }
        .bench-anim.is-on .bench-fill { width: var(--w); }
        .bench-anim.is-on .bench-val { opacity: 1; }
        @media (prefers-reduced-motion: reduce) {
            .bench-anim .bench-fill, .bench-anim .bench-val { transition: none; }
        }

        /* Ряд клиентов под hero: логотипы лежат прямо на чёрном, без карточек —
           поверхности начинаются только со следующей секции. Пока это типографские
           заглушки; при замене на svg/img держать высоту 26–30px и тот же цвет. */
        .client-logo {
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 800;
            font-size: clamp(24px, 2.6vw, 34px);
            letter-spacing: -0.025em;
            color: #63636d;
            white-space: nowrap;
            transition: color 0.25s ease;
        }
        .client-logo:hover { color: #ffffff; }
        /* Счётчик едет в той же ленте, поэтому кегль тот же, а вес — текстовый */
        .client-count {
            font-size: clamp(19px, 2vw, 26px);
            font-weight: 300;
            color: #a3a3a3;
            white-space: nowrap;
        }

        /* Bento Grid Architecture Styling */
        .bento-card {
            position: relative;
            background: #18181a;
            border-radius: 1.75rem;
            transition: background 0.4s ease;
            overflow: hidden;
        }
        .bento-card-storage {
            background: radial-gradient(1100px 500px at 50% 0%, rgba(16, 185, 129, 0.12), transparent 70%), #18181a;
        }
        .bento-card-storage:hover {
            background: radial-gradient(1100px 500px at 50% 0%, rgba(16, 185, 129, 0.20), transparent 70%), #18181a;
        }
        .bento-card-network {
            background: radial-gradient(650px circle at 15% 85%, rgba(59, 130, 246, 0.12), transparent 70%), #18181a;
        }
        .bento-card-network:hover {
            background: radial-gradient(650px circle at 15% 85%, rgba(59, 130, 246, 0.20), transparent 70%), #18181a;
        }
        .bento-card-reliability {
            background: radial-gradient(650px circle at 15% 85%, rgba(6, 182, 212, 0.12), transparent 70%), #18181a;
        }
        .bento-card-reliability:hover {
            background: radial-gradient(650px circle at 15% 85%, rgba(6, 182, 212, 0.20), transparent 70%), #18181a;
        }
        /* --- Секция #deploy: каталог софта и реестр ОС ------------------------
           Тот же язык, что и у остальных секций: сплошной #18181a, крупные скругления,
           подсветка радиальным градиентом, никаких рамок. */

        /* Поиск по каталогу */
        .deploy-search-wrap { position: relative; flex: 1 1 240px; min-width: 200px; }
        .deploy-search {
            width: 100%;
            height: 42px;
            padding: 0 1.1rem 0 2.7rem;
            border: none;
            outline: none;
            border-radius: 9999px;
            background-color: #18181a;
            color: #ffffff;
            font-size: 13px;
            transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
        }
        .deploy-search::placeholder { color: #6f6f78; }
        /* Одного осветления фона (#18181a → #262626) на чёрной странице не видно —
           фокус в поле дополнительно обводится кольцом */
        .deploy-search:focus { background-color: #262626; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22); }
        .deploy-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
        .deploy-search-ico {
            position: absolute;
            left: 1.05rem;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
            height: 15px;
            color: #6f6f78;
            pointer-events: none;
        }

        /* Категории: та же пилюля, что и в блоке городов */
        .cat-pill {
            height: 42px;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0 1.1rem;
            border-radius: 9999px;
            background-color: #18181a;
            color: #a1a1aa;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 11.5px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
        }
        .cat-pill:hover { background-color: #262626; color: #ffffff; }
        .cat-pill.is-active { background-color: #262626; color: #ffffff; }
        .cat-pill-count { font-size: 9.5px; color: #5f5f68; }
        .cat-pill.is-active .cat-pill-count { color: #10b981; }

        /* Плитка каталога софта: тот же bento-язык, что у блоков Built Different.
           Цвет стека приходит из --sc и проявляется подсветкой сверху при наведении. */
        .stack-row {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1.15rem;
            width: 100%;
            min-height: 176px;
            text-align: left;
            padding: 1.4rem;
            border-radius: 1.75rem;
            background: #18181a;
            overflow: hidden;
            cursor: pointer;
        }
        .stack-row::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            background: radial-gradient(560px circle at 50% 0%, var(--sc, #10b981), transparent 68%);
            transition: opacity 0.4s ease;
        }
        .stack-row:hover::before { opacity: 0.16; }
        .stack-ico {
            position: relative;
            z-index: 1;
            width: 44px;
            height: 44px;
            border-radius: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: var(--sc, #10b981);
            background: rgba(255, 255, 255, 0.04);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
        }
        .stack-row:hover .stack-ico { background: rgba(255, 255, 255, 0.07); transform: scale(1.05); }
        .stack-main { position: relative; z-index: 1; width: 100%; min-width: 0; }
        .stack-name {
            display: block;
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 800;
            font-size: 16px;
            letter-spacing: -0.015em;
            color: #ffffff;
        }
        .stack-desc {
            display: block;
            margin-top: 0.45rem;
            font-size: 12.5px;
            font-weight: 300;
            line-height: 1.5;
            color: #a3a3a3;
        }
        .stack-meta {
            display: block;
            margin-top: 0.7rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 10.5px;
            color: #63636d;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Уголок «откроется отдельно»: намёк вместо бейджа времени */
        .stack-open {
            position: absolute;
            z-index: 1;
            top: 1.3rem;
            right: 1.3rem;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.05);
            color: #6a6a73;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .stack-open svg { width: 13px; height: 13px; }
        .stack-row:hover .stack-open {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }

        /* Кнопка «показать ещё» и пустой результат поиска */
        .more-btn {
            width: 100%;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            border-radius: 9999px;
            background-color: #18181a;
            color: #ffffff;
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 13.5px;
            cursor: pointer;
            transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .more-btn:hover { background-color: #262626; }
        .more-btn svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
        .more-btn.is-expanded svg { transform: rotate(180deg); }
        .deploy-empty {
            display: none;
            padding: 2.5rem 1.5rem;
            border-radius: 1.75rem;
            background: #18181a;
            text-align: center;
        }

        /* Всплывающее превью софта: появляется справа от плитки при наведении.
           Пока внутри заглушка-мокап интерфейса; если у плитки есть data-shot,
           вместо неё показывается настоящий скриншот. */
        .stack-pop {
            position: absolute;
            z-index: 40;
            top: 0;
            left: 0;
            width: 380px;
            padding: 0.7rem;
            border-radius: 1.6rem;
            background: #1c1c20;
            box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04);
            color: var(--sc, #10b981);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate3d(-12px, 0, 0) scale(0.96);
            transform-origin: left center;
            transition: opacity 0.2s ease,
                        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                        visibility 0s linear 0.24s;
        }
        .stack-pop.is-flipped {
            transform: translate3d(12px, 0, 0) scale(0.96);
            transform-origin: right center;
        }
        .stack-pop.is-visible {
            opacity: 1;
            visibility: visible;
            transform: translate3d(0, 0, 0) scale(1);
            /* left/top анимируются только когда попап уже виден — так он
               переезжает от плитки к плитке, а не прыгает */
            transition: opacity 0.22s ease,
                        transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                        left 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                        top 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                        visibility 0s;
        }
        /* Пересадка содержимого во время переезда */
        .stack-pop-shot,
        .stack-pop-body { transition: opacity 0.16s ease; }
        .stack-pop.is-swap .stack-pop-shot,
        .stack-pop.is-swap .stack-pop-body { opacity: 0.25; }
        @media (prefers-reduced-motion: reduce) {
            .stack-pop { transition: opacity 0.15s linear, visibility 0s linear 0.15s; transform: none; }
            .stack-pop.is-visible { transform: none; transition: opacity 0.15s linear, visibility 0s; }
        }

        .stack-pop-shot {
            position: relative;
            border-radius: 1.1rem;
            overflow: hidden;
            background: #0e0e10;
        }
        .stack-pop-bar {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0.5rem 0.75rem;
            background: #141417;
        }
        .stack-pop-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
        .stack-pop-url {
            margin-left: 0.45rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 9.5px;
            color: #5f5f68;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Заглушка интерфейса: скелетон панели и крупный логотип продукта */
        .stack-pop-canvas {
            position: relative;
            display: flex;
            gap: 0.7rem;
            height: 168px;
            padding: 0.85rem;
            background:
                radial-gradient(420px circle at 85% 110%, currentColor, transparent 70%),
                linear-gradient(180deg, #101013, #0b0b0d);
        }
        .stack-pop-canvas::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55));
        }
        .stack-pop-side { width: 30%; display: flex; flex-direction: column; gap: 0.45rem; }
        .stack-pop-main { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; }
        .stack-pop-line { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); }
        .stack-pop-line.is-accent { background: currentColor; opacity: 0.55; }
        .stack-pop-card { flex: 1; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.045); }
        .stack-pop-card.is-accent { background: currentColor; opacity: 0.18; }
        .stack-pop-logo {
            position: absolute;
            right: 1rem;
            bottom: 0.9rem;
            z-index: 1;
            width: 62px;
            height: 62px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.85;
        }
        .stack-pop-logo svg { width: 100%; height: 100%; }
        .stack-pop-note {
            position: absolute;
            left: 0.95rem;
            bottom: 0.9rem;
            z-index: 1;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 9px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #6f6f78;
        }
        .stack-pop-img { display: none; width: 100%; height: 168px; object-fit: cover; }
        .stack-pop.has-shot .stack-pop-canvas { display: none; }
        .stack-pop.has-shot .stack-pop-img { display: block; }

        .stack-pop-body { padding: 0.95rem 0.65rem 0.35rem; }
        .stack-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
        .stack-pop-title {
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 800;
            font-size: 15px;
            letter-spacing: -0.015em;
            color: #ffffff;
        }
        .stack-pop-time {
            flex-shrink: 0;
            padding: 0.15rem 0.6rem;
            border-radius: 9999px;
            background: rgba(16, 185, 129, 0.1);
            color: #34d399;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 10px;
            font-weight: 700;
        }
        .stack-pop-desc {
            margin-top: 0.55rem;
            font-size: 12.5px;
            font-weight: 300;
            line-height: 1.55;
            color: #a3a3a3;
        }
        .stack-pop-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.8rem; }
        .stack-pop-tag {
            padding: 0.2rem 0.55rem;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.05);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 9.5px;
            color: #8a8a93;
        }
        @media (max-width: 1023px) {
            .stack-pop { display: none; }
        }

        /* Реестр операционных систем: тот же bento-фон, подсветка строки на наведении */
        .os-panel {
            border-radius: 1.75rem;
            background: #18181a;
            padding: 1.6rem 1.5rem 1.5rem;
        }
        .os-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0 0.5rem 0.35rem;
        }
        .os-grp {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.35rem 0.5rem 0.5rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 9.5px;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: #7a7a85;
        }
        /* Первая группа идёт сразу за шапкой — большой верхний отступ ей не нужен */
        .os-panel-head + .os-grp { padding-top: 0.7rem; }
        .os-row {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 0.65rem 0.75rem;
            border-radius: 1rem;
            transition: background 0.2s ease;
        }
        .os-row:hover { background: rgba(255, 255, 255, 0.04); }
        .os-ico {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            display: flex;
            color: var(--os-c, #a1a1aa);
            opacity: 0.9;
        }
        .os-ico svg { width: 100%; height: 100%; }
        .os-name {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: #e8e8ea;
            white-space: nowrap;
        }
        .os-ver {
            margin-left: auto;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 10.5px;
            color: #63636d;
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* На узких экранах версии уезжают под название: иначе строка не влезает в вьюпорт */
        @media (max-width: 639.98px) {
            .os-panel { padding: 1.25rem 1.1rem; }
            /* 16px, иначе iOS Safari приближает страницу при фокусе в поле */
            .deploy-search { font-size: 16px; }
            .os-row { flex-wrap: wrap; padding: 0.6rem 0.5rem; }
            .os-name { white-space: normal; min-width: 0; }
            .os-ver {
                width: 100%;
                margin: 2px 0 0;
                padding-left: 2.85rem;
                text-align: left;
                white-space: normal;
            }
            .stack-row { min-height: 0; gap: 1rem; padding: 1.2rem; }
            .stack-name { font-size: 15px; }
            .stack-open { top: 1.1rem; right: 1.1rem; }
        }

        /* --- Секция #usecases: аккордеон сценариев и иллюстрация справа --- */
        .usecase-item { border-top: 1px solid rgba(255, 255, 255, 0.08); }
        .usecase-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
        .usecase-head {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            padding: 1.4rem 0;
            text-align: left;
            cursor: pointer;
        }
        .usecase-title {
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 18px;
            letter-spacing: -0.01em;
            color: #a1a1aa;
            transition: color 0.2s ease;
        }
        .usecase-head:hover .usecase-title,
        .usecase-item.is-open .usecase-title { color: #ffffff; }
        .usecase-sign {
            position: relative;
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            color: #6f6f78;
            transition: color 0.2s ease;
        }
        .usecase-item.is-open .usecase-sign { color: #ffffff; }
        .usecase-sign::before,
        .usecase-sign::after {
            content: '';
            position: absolute;
            background: currentColor;
            border-radius: 2px;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
        }
        .usecase-sign::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
        .usecase-sign::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
        .usecase-item.is-open .usecase-sign::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
        .usecase-body {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        }
        .usecase-item.is-open .usecase-body { max-height: 240px; opacity: 1; }
        .usecase-text {
            max-width: 34rem;
            padding-bottom: 1.4rem;
            font-size: 14px;
            font-weight: 300;
            line-height: 1.65;
            color: #a3a3a3;
        }

        .usecase-stage {
            position: relative;
            border-radius: 1.75rem;
            background: #0f0f11;
            overflow: hidden;
            aspect-ratio: 4 / 3;
        }
        .usecase-visual {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: scale(1.03);
            transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .usecase-visual.is-active { opacity: 1; transform: none; }
        .usecase-visual svg { width: 100%; height: 100%; display: block; }
        /* Уголки-скобки поверх сцены */
        .usecase-frame { position: absolute; inset: 8%; pointer-events: none; }
        .usecase-frame span {
            position: absolute;
            width: 26px;
            height: 26px;
            border: 1px solid rgba(16, 185, 129, 0.55);
        }
        .usecase-frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
        .usecase-frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
        .usecase-frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
        .usecase-frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

        /* --- Каталог услуг ------------------------------------------------------
           Композиция: ряд услуг сверху, активная услуга приклеена к панели, внутри
           панели переключатель локаций и карточки тарифов. Цвет линейки живёт
           в переменной --acc (RGB через запятую). */

        /* Ряд услуг. Активная плашка скруглена только сверху и сливается с панелью */
        .svc-rail {
            display: flex;
            gap: 0.25rem;
            overflow-x: auto;
            scrollbar-width: none;
            scroll-behavior: smooth;
        }
        .svc-rail::-webkit-scrollbar { display: none; }
        .svc-tab {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            flex: 0 0 auto;
            min-width: 236px;
            padding: 1.05rem 1.3rem;
            border-radius: 1.4rem 1.4rem 0 0;
            background: transparent;
            transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .svc-tab:hover { background: #131315; }
        .svc-tab.is-active { background: #0f0f11; }
        .svc-tab-ico {
            width: 46px;
            height: 46px;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: rgba(var(--acc), 0.12);
            color: rgb(var(--acc));
            transition: background 0.25s ease;
        }
        .svc-tab.is-active .svc-tab-ico { background: rgba(var(--acc), 0.2); }
        .svc-tab-ico svg { width: 23px; height: 23px; display: block; }
        .svc-tab-name {
            display: block;
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 14.5px;
            color: #a1a1aa;
            line-height: 1.15;
            white-space: nowrap;
            transition: color 0.25s ease;
        }
        .svc-tab.is-active .svc-tab-name, .svc-tab:hover .svc-tab-name { color: #ffffff; }
        .svc-tab-note {
            display: block;
            font-size: 11.5px;
            font-weight: 300;
            line-height: 1.35;
            color: #63636d;
            margin-top: 3px;
        }
        .svc-arrow {
            width: 34px;
            height: 34px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #8a8a93;
            background: rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .svc-arrow:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
        .svc-arrow svg { width: 15px; height: 15px; }

        /* Панель услуги */
        /* Панель тарифов идёт во всю ширину страницы: отрицательные поля равны полям
           секции (1.5rem / 3rem с md), поэтому фон упирается в кромки окна, а
           содержимое остаётся на линии сетки сайта. Скруглений у панели во всю ширину
           нет — стык с активной вкладкой сверху сохраняется. */
        .svc-panel {
            background: #0f0f11;
            margin: 0 -1.5rem;
            padding: 1.6rem 1.5rem 1.75rem;
        }
        @media (min-width: 768px) {
            .svc-panel { margin: 0 -3rem; padding-left: 3rem; padding-right: 3rem; }
        }
        /* Переключатель линейки и локаций по центру панели */
        .seg-rail {
            display: inline-flex;
            gap: 3px;
            padding: 4px;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.05);
            /* Ниже lg шесть городов в ширину не влезают: рельс прокручивается внутри
               себя, а не вылезает за кромку секции. Полоса прокрутки спрятана,
               активный город скрипт подводит к середине. */
            max-width: 100%;
            align-self: flex-start;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        .seg-rail::-webkit-scrollbar { display: none; }
        .seg-rail button {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            height: 38px;
            padding: 0 1.05rem;
            border-radius: 9999px;
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 12.5px;
            color: #a1a1aa;
            white-space: nowrap;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }
        .seg-rail button:hover { color: #ffffff; }
        .seg-rail button.is-active { background: #26262b; color: #ffffff; }
        /* Переключатель локаций липнет под шапкой, пока видна панель тарифов, и уходит
           вместе с её концом. Для sticky у #vps overflow: clip вместо hidden: hidden
           делает секцию контейнером прокрутки, и прилипание к окну не срабатывает.
           Отступ сверху — фактический низ шапки (--nav-bottom ставит скрипт; запасные
           значения — высоты шапки из scroll-padding). Обёртка во всю ширину клики
           пропускает — ловит их только сам рельс. Подложка рельса плотная, того же тона,
           что прежняя полупрозрачная на панели, чтобы карточки не просвечивали снизу. */
        #vps { overflow: clip; }
        .loc-sticky {
            position: sticky;
            top: calc(var(--nav-bottom, 106px) + 12px);
            z-index: 40;
            pointer-events: none;
        }
        @media (max-width: 767.98px) {
            .loc-sticky { top: calc(var(--nav-bottom, 70px) + 10px); }
        }
        .loc-sticky .seg-rail {
            pointer-events: auto;
            background-color: #1b1b1e;
            transition: box-shadow 0.3s ease;
        }
        .loc-sticky.is-stuck .seg-rail {
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 32px -8px rgba(0, 0, 0, 0.85);
        }
        /* У конца панели рельс не уезжает вверх вместе с ней, а растворяется:
           скрипт ставит .is-end, когда до нижней кромки панели остаётся меньше
           запаса. Кнопки на это время не ловят клики. */
        .loc-sticky .seg-rail {
            transition: box-shadow 0.3s ease, opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .loc-sticky.is-end .seg-rail {
            opacity: 0;
            transform: translateY(-8px) scale(0.97);
            pointer-events: none;
        }
        @media (prefers-reduced-motion: reduce) {
            .loc-sticky .seg-rail { transition: opacity 0.2s linear; }
            .loc-sticky.is-end .seg-rail { transform: none; }
        }
        .seg-rail .flag {
            width: 17px;
            height: 17px;
            border-radius: 9999px;
            overflow: hidden;
            flex-shrink: 0;
        }

        /* Тарифная карточка — тот же рецепт, что у карточек архитектуры: плоская
           поверхность и мягкая подсветка цветом линейки сверху, без рамок и текстур.
           Панель под карточками темнее (#0f0f11), поэтому карточка остаётся стандартной. */
        .plan-card {
            position: relative;
            display: flex;
            flex-direction: column;
            border-radius: 1.75rem;
            background: #18181a;
            overflow: hidden;
            transition: background 0.4s ease;
            padding: 0.85rem;
        }
        /* Обычные тарифы — ровный серый; цветная подсветка остаётся только у рекомендованного (.is-featured) */
        .plan-card:hover {
            background: #1c1c1f;
        }
        .plan-card-body {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 1.15rem 0.7rem 0.55rem;
        }
        /* Шапка тарифа: не плашка, а верхний ряд самой карточки — так же, как
           услуга в .svc-tab. Цвет линейки живёт в знаке и в подсветке карточки,
           отдельной поверхности и рамок нет: их на сайте нет нигде. */
        .plan-card-head {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 0.75rem 0.7rem 0;
        }
        /* Хитовый тариф: поверхность на ступень светлее и подсветка чуть сильнее */
        .plan-card.is-featured {
            background: radial-gradient(700px circle at 50% 0%, rgba(var(--acc), 0.26), transparent 70%), #1d1d21;
        }
        .plan-card.is-featured:hover {
            background: radial-gradient(700px circle at 50% 0%, rgba(var(--acc), 0.36), transparent 70%), #1d1d21;
        }

        /* Знак линейки — тот же, что у услуги в ряду: 46px, скругление 1rem,
           заливка цветом линейки с альфой 0.12, у хитового тарифа 0.2. */
        .plan-head-ico {
            width: 46px;
            height: 46px;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: rgba(var(--acc), 0.18);
            color: rgb(var(--acc));
            transition: background 0.25s ease;
        }
        .plan-card:hover .plan-head-ico,
        .plan-card.is-featured .plan-head-ico { background: rgba(var(--acc), 0.28); }
        .plan-head-ico svg { width: 23px; height: 23px; display: block; }
        .plan-head-txt { min-width: 0; flex: 1; }
        .plan-head-name {
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 800;
            font-size: 1.5rem;
            line-height: 1.15;
            letter-spacing: -0.02em;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .plan-head-tier {
            display: block;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: #63636d;
            margin-top: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* Метка хита: та же пилюля, что у времени в превью софта — цвет линейки
           на своей же заливке, без белого пятна поверх карточки. */
        .plan-head-badge {
            flex-shrink: 0;
            align-self: center;
            padding: 0.2rem 0.65rem;
            border-radius: 9999px;
            background: rgba(var(--acc), 0.2);
            color: rgb(var(--acc));
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.14em;
        }
        /* Характеристики тарифа: иконка уходит в фон ячейки крупным знаком в цвете
           линейки — она держит ритм, но не спорит с цифрой. Значение и подпись
           остаются на чистом поле, подложек и рамок нет. */
        .plan-specs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem 1rem;
            margin-top: 1.75rem;
        }
        .plan-spec {
            position: relative;
            min-width: 0;
            /* Знак слева, текст правее: чтение идёт слева направо */
            padding-left: 2.6rem;
        }
        .plan-spec-ico {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            color: rgb(var(--acc));
            opacity: 0.45;
            pointer-events: none;
            transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .plan-spec-ico svg { width: 100%; height: 100%; display: block; }
        .plan-card:hover .plan-spec-ico { opacity: 0.75; transform: translateY(-50%) scale(1.06); }
        .plan-spec-v {
            display: block;
            font-family: 'Sora', 'Manrope', sans-serif;
            font-weight: 800;
            font-size: 20px;
            letter-spacing: -0.02em;
            color: #ffffff;
            line-height: 1.05;
        }
        .plan-spec-k {
            display: block;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: #63636d;
            margin-top: 3px;
        }
        @media (prefers-reduced-motion: reduce) {
            /* Классы Tailwind (.animate-*, .scroll-smooth) лежат в его <style>, который
               CDN вставляет после нашего, — поэтому селекторы здесь на ступень весомее */
            .pin-radar, .fiber-flow, .marquee-group, .panel-btn-seg, .fade-in,
            html .animate-pulse, html .animate-ping { animation: none; }
            /* Застывшее на первом кадре кольцо радара выглядит как артефакт — его нет совсем;
               вторая, служебная копия ленты логотипов без движения читалась бы как дубль */
            .pin-radar { opacity: 0; }
            .marquee-group[aria-hidden] { display: none; }
            html.scroll-smooth { scroll-behavior: auto; }
            .usecase-visual, .usecase-body, .stack-ico, .stack-row::before, .plan-spec-ico,
            .hero-prod-arrow svg, .more-btn svg { transition: none; }
            .usecase-visual, .hero-prod-arrow svg { transform: none; }
        }

        /* --- Общие правила страницы: якоря, фокус, мелкие поправки --------------- */
        /* Шапка фиксированная (36px строка меню + 70px навигация): без этого отступа
           переход по якорю прятал заголовок секции под неё. На узких экранах строки
           меню нет — остаётся одна навигация. Значения повторяют высоты шапки. */
        html { scroll-padding-top: calc(36px + 70px); }
        @media (max-width: 767.98px) { html { scroll-padding-top: 70px; } }

        /* Клавиатурный фокус на пилюлях, плитках и ссылках секций — кольцо по форме
           элемента, а не прямоугольник браузера. Только :focus-visible: после клика
           мышью кольца нет. */
        .cat-pill:focus-visible,
        .stack-row:focus-visible,
        .more-btn:focus-visible,
        .seg-rail button:focus-visible,
        .svc-arrow:focus-visible,
        .svc-tab:focus-visible,
        .usecase-head:focus-visible,
        .domain-go:focus-visible,
        .domain-zone:focus-visible,
        .plan-card a:focus-visible,
        #locations a:focus-visible,
        #metal a:focus-visible,
        footer a:focus-visible,
        .hero-cta:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.75);
            outline-offset: 3px;
            border-radius: inherit;
        }
        .domain-zone:focus-visible { border-radius: 4px; color: #ffffff; }
        /* Блок продукта в hero: кольцо рисуется на подложке — у самого блока формы нет.
           Стрелка, имя и знак по фокусу ведут себя так же, как по наведению. */
        .hero-prod:focus-visible { outline: none; }
        .hero-prod:focus-visible .hero-prod-plate { box-shadow: 0 0 0 2px rgb(var(--acc)); }
        .hero-prod:focus-visible .hero-prod-name { color: #ffffff; }
        .hero-prod:focus-visible .hero-prod-ico { background: rgba(var(--acc), 0.2); }
        .hero-prod:focus-visible .hero-prod-arrow { opacity: 1; }
        .hero-prod:focus-visible .hero-prod-arrow svg { transform: translateX(0); }

        /* Стрелки ряда услуг: у края ряда гаснут, а когда ряд помещается целиком —
           скрипт прячет их совсем. Продолжение ряда за кромкой показывает растворение
           маской с той стороны, куда ещё можно прокрутить; те же состояния получает
           рельс локаций, когда не помещается по ширине. */
        .svc-arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
        .svc-rail.is-more, .seg-rail.is-more {
            -webkit-mask-image: linear-gradient(to right, black calc(100% - 56px), transparent);
            mask-image: linear-gradient(to right, black calc(100% - 56px), transparent);
        }
        .svc-rail.is-scrolled, .seg-rail.is-scrolled {
            -webkit-mask-image: linear-gradient(to right, transparent, black 56px);
            mask-image: linear-gradient(to right, transparent, black 56px);
        }
        .svc-rail.is-more.is-scrolled, .seg-rail.is-more.is-scrolled {
            -webkit-mask-image: linear-gradient(to right, transparent, black 56px, black calc(100% - 56px), transparent);
            mask-image: linear-gradient(to right, transparent, black 56px, black calc(100% - 56px), transparent);
        }

        /* Бейдж линейки у заголовка (MX/CX): цвет приходит через --acc с обёртки,
           как у .plan-head-badge в карточках */
        .plan-line-badge { background: rgba(var(--acc), 0.18); color: rgb(var(--acc)); }
        /* Ниже 1440px карточка тарифа уже 360px, и две колонки характеристик резали
           значения («2,5 Гб…»). В одну колонку значение всегда помещается целиком. */
        @media (max-width: 1439.98px) {
            .plan-specs { grid-template-columns: 1fr; gap: 1.1rem 0; }
        }

        /* На lg колонка ОС узкая, и длинная строка версий («24.04 · 22.04 · 20.04 LTS»)
           резалась многоточием — здесь она переносится на вторую строку */
        @media (min-width: 1024px) and (max-width: 1279.98px) {
            .os-ver { white-space: normal; max-width: 48%; }
        }

        /* Метки карты, чья подпись не помещается в видимую часть кадра (телефон,
           узкие окна): точка остаётся, текст прячет скрипт, иначе от подписи
           оставался обрывок вроде «мс» у кромки */
        .map-node-pin.is-clipped text { display: none; }

        /* Заголовок #clients: текст стоит обводкой и заливается по мере скролла —
           построчно, каждая строка слева направо. Скрипт собирает внутри h2 два
           одинаковых слоя в одной ячейке сетки: раскладка у них общая, поэтому
           буквы совпадают без подгонки.
           .of-base — обводка без пересечений: у плотного трекинга и переменного
           шрифта контуры букв налезают друг на друга, поэтому сначала рисуется
           обводка (paint-order), поверх — заливка цветом фона секции, и остаётся
           только внешний контур.
           .of-top — сплошной текст. Слои не перекрываются: у каждого слова --p (0…1),
           и одна и та же кромка маской открывает заливку слева и прячет обводку
           справа от неё — под залитыми буквами контура нет, поэтому нет и каймы.
           Поля 0.12em со встречным отрицательным отступом раздвигают рамку маски
           на вынос обводки, не трогая раскладку. У слов акцентной фразы свой
           оттенок (--fc) — прежний градиент от белого к серому. */
        [data-outline-fill].of-ready { display: grid; }
        /* tracking-tighter (-0.05em) у жирного Sora сводит буквы внахлёст: в сплошном
           тексте это незаметно, а у контура соседние знаки слипаются в одну фигуру
           («фр», «ст», «кт»). Для контурного заголовка трекинг чуть мягче (-0.02em). Селектор с тегом весомее класса Tailwind, чей <style> идёт
           после нашего. */
        h2[data-outline-fill] { letter-spacing: -0.02em; }
        [data-outline-fill] .of-base,
        [data-outline-fill] .of-top { grid-area: 1 / 1; }
        [data-outline-fill] .of-w {
            --p: 0;
            --e: calc(var(--p) * 100%);
            white-space: nowrap;
            padding: 0.12em;
            margin: 0 -0.12em;
        }
        [data-outline-fill] .of-base .of-w {
            color: #000000;
            /* Цвет обводки непрозрачный: полупрозрачная в местах касания букв ложилась
               дважды и давала светлые точки. #7a7a7a — тот же тон, что прежние 45%
               белого на чёрном. */
            -webkit-text-stroke: 2px #7a7a7a;
            paint-order: stroke fill;
            -webkit-mask-image: linear-gradient(to right, transparent var(--e), #000 var(--e));
            mask-image: linear-gradient(to right, transparent var(--e), #000 var(--e));
        }
        [data-outline-fill] .of-top { pointer-events: none; }
        [data-outline-fill] .of-top .of-w {
            color: var(--fc, #ffffff);
            -webkit-mask-image: linear-gradient(to right, #000 var(--e), transparent var(--e));
            mask-image: linear-gradient(to right, #000 var(--e), transparent var(--e));
        }
        @media (prefers-reduced-motion: reduce) {
            [data-outline-fill] .of-w { --p: 1 !important; }
        }