/*
 * Главная страница — редизайн: живая сфера систем и поверх неё контейнер модулей
 * (гостю — публичные, пользователю — по ролям); гостю «Начать работу» открывает вход.
 * Токены, шапка, кнопки и док живут в site-chrome.css, который подключён на всех
 * страницах; здесь — только то, что есть на самой главной.
 */

/*
 * Сайт заворачивает страницу в .body-wrapper с overflow:hidden — это отключает
 * position:sticky. На главной меняем на overflow-x:clip: горизонтальную прокрутку
 * по-прежнему нет, а «прилипающая» сцена начинает работать.
 */
.body-wrapper--home {
    overflow: visible;
    overflow-x: clip;
}

/* ─────────────────────────── Сцена ─────────────────────────── */

/*
 * Сцена — ровно экран. Стадии «Модули» → «Вход» переключаются кнопками
 * (initStage), прокрутка сразу ведёт к блокам под сценой.
 */
.hx-scene {
    position: relative;
}

/* Авторизованному платформа не показывается: сразу модули (геометрия — в site-deep.css). */

.hx-stage {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: var(--hx-paper);
    touch-action: pan-y;
}

/* Сферу можно вращать мышью, пока открыт вход. */
.hx-stage.is-grab { cursor: grab; }
.hx-stage.is-grabbing { cursor: grabbing; user-select: none; }

.hx-stage__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hx-stage__aurora {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(38% 30% at 24% 30%, var(--hx-aurora-1), transparent 70%),
        radial-gradient(34% 28% at 78% 24%, var(--hx-aurora-2), transparent 70%),
        radial-gradient(40% 32% at 60% 80%, var(--hx-aurora-3), transparent 70%);
    animation: hx-aurora 24s ease-in-out infinite alternate;
}

@keyframes hx-aurora {
    to { transform: translate3d(2%, -2%, 0) scale(1.05); }
}

.hx-stage__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--hx-dot) 1px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 74% 66% at 50% 58%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 74% 66% at 50% 58%, #000 30%, transparent 78%);
}

.hx-stage__spot {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 58% 52% at 50% var(--hx-gy, 58.5%), rgba(255, 255, 255, .26), transparent 72%);
}

.hx-ring {
    position: absolute;
    left: 50%;
    top: var(--hx-gy, 58.5%);
    border: 1px solid var(--hx-ring);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.hx-ring--1 { width: 34vmin; height: 34vmin; animation: hx-ringp 7s ease-in-out infinite; }
.hx-ring--2 { width: 54vmin; height: 54vmin; animation: hx-ringp 7s 1.4s ease-in-out infinite; }
.hx-ring--3 { width: 78vmin; height: 78vmin; animation: hx-ringp 7s 2.8s ease-in-out infinite; }

@keyframes hx-ringp {
    0%, 100% { opacity: .4; transform: translate(-50%, -50%) scale(.985); }
    50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.015); }
}

/* Подсказка под курсором: имя системы и её владелец. */
.hx-probe {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    max-width: 280px;
    padding: 7px 11px 8px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 10px;
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--hx-sh-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hx-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 6px)) scale(.96);
    transition: opacity var(--hx-d-fast) var(--hx-e-out), transform var(--hx-d-fast) var(--hx-e-out);
}

.hx-probe small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--hx-ink-3);
}

.hx-probe.is-on {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 10px)) scale(1);
}

.hx-stage__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── стадия «Вход»: открывается по «Начать работу» ── */

.hx-hero {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 78px 32px 0;
    text-align: center;
    pointer-events: none;
    transition: transform .5s var(--hx-e-out), visibility .5s var(--hx-e-out);
}

/*
 * Прозрачность анимируем на детях, а не на обёртке: opacity < 1 (как и filter)
 * на предке создаёт новый backdrop root, и стеклянная карточка на время
 * перехода теряет размытие фона — оно включалось бы скачком в конце.
 */
.hx-hero > * {
    pointer-events: auto;
    transition: opacity .5s var(--hx-e-out);
}

.hx-hero__title {
    margin: 0;
    font-size: clamp(2.1rem, 1rem + 4vw, 4rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.04;
    text-wrap: balance;
}

/* Стеклянная карточка стоит точно по центру сферы (центр отдаёт JS через --hx-gy). */
.hx-hero__card {
    position: absolute;
    left: 50%;
    top: var(--hx-gy, 58.5%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(720px, calc(100% - 64px));
    padding: 34px 44px 30px;
    border-radius: var(--hx-r-card);
    transform: translate(-50%, -50%);
}

.hx-hero__lead {
    margin: 0;
    max-width: 520px;
    font-size: 17px;
    color: var(--hx-ink-2);
}

.hx-hero__cta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* «К модулям» — в левом верхнем углу карточки, над подписью. */
.hx .hx-auth__back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin: -16px 0 -4px -12px;
    padding: 6px 12px 6px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--hx-ink-2);
    cursor: pointer;
    transition: background var(--hx-d-fast) var(--hx-e-out), color var(--hx-d-fast) var(--hx-e-out);
}

.hx .hx-auth__back:hover { background: var(--hx-card-glass); color: var(--hx-ink); }

.hx-auth__back .hx-ic { width: 16px; height: 16px; transition: transform var(--hx-d-fast) var(--hx-e-out); }

.hx-auth__back:hover .hx-ic { transform: translateX(-3px); }

/* ── стадия «Модули»: с неё сцена открывается ── */

.hx-stage__panel {
    position: absolute;
    left: 50%;
    top: 120px;
    z-index: 3;
    width: min(1400px, calc(100% - 64px));
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    scrollbar-width: none;
    border-radius: 28px;
    transform: translateX(-50%);
    transition: transform .7s var(--hx-e-out), visibility .6s var(--hx-e-out);
}

.hx-stage__panel::-webkit-scrollbar { display: none; }

/* Само стекло проявляется отдельно — см. пояснение у .hx-hero > *. */
.hx-stage__panel .hx-panel { transition: opacity .6s var(--hx-e-out); }

/*
 * Стадии переключаются кнопками. Скрытую убираем и визуально,
 * и из таб-порядка: одного opacity:0 мало — фокус уходил бы в невидимое.
 */
.hx-stage[data-stage="auth"] .hx-stage__panel,
.hx-stage[data-stage="modules"] .hx-hero {
    visibility: hidden;
    pointer-events: none;
}

.hx-stage[data-stage="auth"] .hx-stage__panel .hx-panel,
.hx-stage[data-stage="modules"] .hx-hero > * {
    opacity: 0;
}

.hx-stage[data-stage="modules"] .hx-hero {
    transform: translateY(-12px);
}

/* Пока открыт вход, контейнер модулей чуть меньше и ниже — возвращаясь, «открывается» навстречу. */
.hx-stage[data-stage="auth"] .hx-stage__panel {
    transform: translateX(-50%) translateY(28px) scale(.96);
}

/* ─────────────────────────── Контейнер модулей ─────────────────────────── */

.hx-panel {
    padding: 30px 36px 28px;
    border-radius: var(--hx-r-card);
    transition: opacity .55s var(--hx-e-out), transform .55s var(--hx-e-out);
}

/* Плитки внутри стекла — те же цветные карточки, что и везде; см. .hx-mod. */
.hx-panel .hx-req {
    background: var(--hx-sheet-2);
    border-color: var(--hx-line-2);
}


.hx-panel__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.hx-panel__title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
}

/* Сетка появляется одним плавным движением — без поочерёдной задержки. */
@keyframes hx-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.hx-mods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    animation: hx-rise .7s var(--hx-e-out) both;
}

/*
 * Плитка модуля — белая бумага с чёткой рамкой; домен показан только
 * иконкой на мягкой подложке своего цвета. Иконка слева, счётчик справа.
 */
.hx-mod {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 18px 20px;
    background: var(--hx-surface, #fff);
    border: 1px solid var(--hx-line-2);
    border-radius: var(--hx-r-tile);
    box-shadow: none;
    color: var(--hx-ink);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: transform var(--hx-d) var(--hx-e-out),
                box-shadow var(--hx-d) var(--hx-e-out),
                border-color var(--hx-d) var(--hx-e-out);
}

.hx .hx-mod,
.hx .hx-mod:hover {
    color: var(--hx-ink);
}

.hx-mod:hover {
    transform: translateY(-2px);
    border-color: var(--hx-dc, var(--hx-brand));
    box-shadow: var(--hx-sh-1);
}

.hx-mod:focus-visible {
    outline: 2px solid var(--hx-brand);
    outline-offset: 2px;
}

.hx-mod__ic {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    background: var(--hx-ds, var(--hx-brand-soft));
    background: color-mix(in srgb, var(--hx-dc, var(--hx-brand)) 12%, #fff);
    color: var(--hx-dc, var(--hx-brand));
    border-radius: var(--hx-r-ic);
}

.hx-mod__ic svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hx-mod__txt { min-width: 0; }

.hx-mod__name {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.hx-mod__sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--hx-ink-3);
}

.hx-mod__arrow {
    width: 18px;
    height: 18px;
    margin-left: auto;
    flex: none;
    color: var(--hx-ink-3);
    transition: transform var(--hx-d) var(--hx-e-out), color var(--hx-d) var(--hx-e-out);
}

.hx-mod:hover .hx-mod__arrow {
    color: var(--hx-dc, var(--hx-brand));
    transform: translateX(3px);
}

.hx-mod__count {
    margin-left: auto;
    flex: none;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--hx-ds, var(--hx-brand-soft));
    color: var(--hx-dc, var(--hx-brand));
    font-family: var(--hx-mono);
    font-size: 10.5px;
    white-space: nowrap;
}

.hx-panel__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--hx-line);
    font-size: 13px;
    color: var(--hx-ink-2);
}

/* ── «Настроить»: маленькая кнопка справа снизу; в режиме правки — подсказка и кнопки ── */
.hx-panel__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    flex: none;
    margin-top: 14px;
}
.hx-panel__bar-hint { margin-right: auto; font-size: 13px; color: var(--hx-ink-3); }
.hx-panel__bar-status { font-size: 13px; color: var(--hx-ink-3); }
.hx-panel__bar-status[data-error] { color: #dc2626; }
.hx-panel__customize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 11px;
    border: 1px solid var(--hx-line-2);
    border-radius: 999px;
    background: transparent;
    color: var(--hx-ink-3);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color var(--hx-d-fast) var(--hx-e-out), border-color var(--hx-d-fast) var(--hx-e-out), background var(--hx-d-fast) var(--hx-e-out);
}
.hx-panel__customize .hx-ic { width: 14px; height: 14px; }
.hx-panel__customize:hover { color: var(--hx-ink); border-color: var(--hx-ink-3); }
.hx-panel__customize:focus-visible { outline: 2px solid var(--hx-brand); outline-offset: 2px; }
/* Режим правки: плитки берутся «за ручку», ссылки и раскрытие не работают (initCustomize). */
.hx-panel[data-hx-edit] .hx-mod { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; border-style: dashed; }
.hx-panel[data-hx-edit] .hx-mod:hover { transform: none; box-shadow: none; }
.hx-panel[data-hx-edit] .hx-mod--placeholder { opacity: .35; }
.hx-panel[data-hx-edit] .hx-search input { opacity: .5; }
.hx-mod--ghost {
    position: fixed;
    z-index: 1000;
    margin: 0;
    pointer-events: none;
    cursor: grabbing;
    transform-origin: 50% 50%;
    border-style: solid !important;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .38), 0 8px 18px rgba(0, 0, 0, .22);
    will-change: transform;
    transition: box-shadow .34s ease;
}
/* Опускается в ячейку — тень опадает вместе с плиткой. */
.hx-mod--ghost.hx-mod--ghost-drop { box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
/* Ячейка, откуда подняли плитку: мягкое пустое место. */
.hx-panel[data-hx-edit] .hx-mod.hx-mod--placeholder { opacity: .18; box-shadow: none; transform: none; }
/* Пока тащим — у остальных плиток нет hover-подъёма, чтобы ничего не «прыгало». */
.hx-panel[data-hx-dragging] .hx-mod { transition: none; }
.hx-panel[data-hx-dragging], .hx-panel[data-hx-dragging] * { cursor: grabbing !important; }

/* ── состояние «подмодули»: контейнер подменяется ── */

.hx-panel__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 10px;
    background: var(--hx-sheet);
    border: 1px solid var(--hx-line-2);
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--hx-ink-2);
    cursor: pointer;
    transition: border-color var(--hx-d-fast) var(--hx-e-out), color var(--hx-d-fast) var(--hx-e-out);
}

.hx .hx-panel__back:hover,
.hx .hx-panel__back:active {
    background: var(--hx-sheet);
    border-color: var(--hx-brand);
    color: var(--hx-brand);
}

.hx-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--hx-ink-3);
}

.hx-crumbs b {
    font-weight: 600;
    color: var(--hx-ink);
}

.hx-dchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--hx-ds, var(--hx-brand-soft));
    color: var(--hx-dc, var(--hx-brand));
    font-family: var(--hx-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hx-dchip i {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--hx-dc, var(--hx-brand));
}

/* ── строка «доступно по запросу роли» ── */

.hx-req {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 18px;
    background: var(--hx-sheet-2);
    border: 1px dashed var(--hx-line-2);
    border-radius: var(--hx-r-tile);
}

.hx-req__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hx-req__chips span {
    padding: 4px 10px;
    border: 1px solid var(--hx-line-2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hx-ink-3);
}

/* ─────────────────────────── Появление секций ─────────────────────────── */

[data-hx-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--hx-e-out), transform .6s var(--hx-e-out);
    transition-delay: calc(var(--ri, 0) * 80ms);
}

[data-hx-reveal].is-in {
    opacity: 1;
    transform: none;
}

.hx-sechead {
    max-width: 680px;
    margin: 0 auto 48px;
    text-align: center;
}

.hx-sechead h2 {
    margin: 16px 0 0;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--hx-ink);
}

.hx-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--hx-line);
    border-radius: 999px;
    background: var(--hx-sheet);
    box-shadow: var(--hx-sh-1);
    font-size: 13px;
    font-weight: 600;
    color: var(--hx-brand);
}

/* ─────────────────────────── Реестр объектов информатизации: тёмная полоса, таблица сравнения ─────────────────────────── */

/* Полоса реестра белая, контейнер таблицы — тёмно-синий #1E436E, как карточка в «Технологиях». */
.hx-reg { position: relative; padding: 72px 0 80px; background: #fff; color: #143254; }
.hx-reg .hx-sechead h2 { color: #143254; letter-spacing: -.015em; }
/* Метка над заголовком — надпись, не кнопка: без рамки и заливки. */
.hx-reg .hx-pill, .hx-tech .hx-pill { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hx-reg .hx-sechead .hx-pill { color: rgba(20, 50, 84, .78); }

/*
 * Стеклянная плита с сеткой 4 колонок: подписи 1.25fr, ЦГО и МИО по 1fr, «Всего» —
 * фиксированная ширина. Белая карточка колонки «Всего» лежит за сеткой абсолютно и
 * выступает на 12px сверху, снизу и справа — одинаково, это приём, а не огрех.
 * Ширина карточки и колонки — один токен --hx-cmp-sum, поэтому они всегда совпадают.
 */
.hx-cmp {
    --hx-cmp-sum: 168px;
    --hx-cmp-out: 12px;
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 6px 0 6px 28px;
    background: #1E436E;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    /* Слоистая тень — объём на белом листе: контактная, средняя и дальняя. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 2px 4px rgba(20, 50, 84, .2),
        0 18px 36px -14px rgba(20, 50, 84, .45),
        0 48px 90px -30px rgba(20, 50, 84, .6);
    color: #fff;
}
.hx-cmp--empty { padding: 28px 32px; text-align: center; }
.hx-cmp__empty { margin: 0; font-size: 16px; color: rgba(255, 255, 255, .8); }
.hx-cmp__sum {
    position: absolute;
    top: calc(-1 * var(--hx-cmp-out));
    bottom: calc(-1 * var(--hx-cmp-out));
    right: calc(-1 * var(--hx-cmp-out));
    width: calc(var(--hx-cmp-sum) + var(--hx-cmp-out));
    background: #fff;
    border: 1px solid rgba(20, 50, 84, .1);
    border-radius: 18px;
    /* Выступающая на белый лист карточка: тонкая рамка и тени, чтобы край читался. */
    box-shadow:
        0 1px 2px rgba(20, 50, 84, .12),
        0 8px 18px -6px rgba(20, 50, 84, .3),
        0 28px 56px -20px rgba(20, 50, 84, .55);
}
.hx-cmp__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) var(--hx-cmp-sum); }
.hx-cmp__row { display: contents; }
.hx-cmp__cell { display: flex; align-items: center; justify-content: center; padding: 16px 12px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.hx-cmp__head .hx-cmp__cell { align-items: flex-start; padding: 14px 12px 12px; border-top: 0; }
.hx-cmp__cell--label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; padding-left: 0; padding-right: 16px; font-size: 19px; font-weight: 600; }
.hx-cmp__name { display: block; line-height: 1.25; }
/* Подстроки классов: тоньше разделители, «1 класс» обычным, описание приглушённое — читаются как одна группа. */
.hx-cmp__row--sub .hx-cmp__cell { padding-top: 11px; padding-bottom: 11px; border-top-color: rgba(255, 255, 255, .05); }
.hx-cmp__row--sub .hx-cmp__cell--label { padding-left: 26px; font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, .9); }
/* Описание класса — своей строкой под «2 класс», мельче: в одну строку с названием не помещалось. */
.hx-cmp__note { display: block; font-size: 13.5px; font-weight: 400; line-height: 1.3; color: rgba(255, 255, 255, .62); }
.hx-cmp__cell--sum { color: #143254; border-top-color: rgba(20, 50, 84, .12); }
.hx-cmp__row--sub .hx-cmp__cell--sum { border-top-color: rgba(20, 50, 84, .06); }
.hx-cmp__col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hx-cmp__col b { font-size: 16px; }
.hx-cmp__col small { max-width: 128px; font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, .72); }
.hx-cmp__cell--sum .hx-cmp__col small { color: rgba(20, 50, 84, .7); }
.hx-cmp__ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 2px; border-radius: 13px; background: var(--hx-dc); color: #fff; font-size: 20px; font-style: normal; font-weight: 700; }
.hx-cmp__ico svg { width: 20px; height: 20px; }
.hx-cmp__ico--sum { background: #143254; }
/* Числа белые: цвет ЦГО/МИО остаётся только в шапке; доля стороны — в подсказке. */
.hx .hx-cmp__val { display: inline-block; font-size: 20px; font-weight: 600; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.hx .hx-cmp__cell--sum .hx-cmp__val { font-size: 24px; font-weight: 800; color: #143254; }
/* Число-ссылка: пунктир снизу подсказывает, что нажимается; при наведении светится и чуть растёт (только transform/text-shadow). */
.hx a.hx-cmp__val {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    transition: transform var(--hx-d-fast) var(--hx-e-out), text-shadow var(--hx-d-fast) var(--hx-e-out), text-decoration-color var(--hx-d-fast) var(--hx-e-out);
}
.hx a.hx-cmp__val:hover, .hx a.hx-cmp__val:focus-visible {
    color: #fff;
    text-decoration-color: #fff;
    transform: scale(1.14);
    text-shadow: 0 0 12px rgba(255, 255, 255, .85), 0 0 26px rgba(156, 195, 255, .7);
}
.hx .hx-cmp__cell--sum a.hx-cmp__val { text-decoration-color: rgba(20, 50, 84, .4); }
.hx .hx-cmp__cell--sum a.hx-cmp__val:hover, .hx .hx-cmp__cell--sum a.hx-cmp__val:focus-visible {
    color: #143254;
    text-decoration-color: #143254;
    text-shadow: 0 0 10px rgba(20, 50, 84, .35), 0 0 22px rgba(20, 50, 84, .25);
}
@media (prefers-reduced-motion: reduce) { .hx a.hx-cmp__val:hover, .hx a.hx-cmp__val:focus-visible { transform: none; } }
.hx .hx-cmp__row--sub .hx-cmp__val { font-size: 16px; font-weight: 600; }
.hx .hx-cmp__row--sub .hx-cmp__cell--sum .hx-cmp__val { font-size: 15px; font-weight: 600; }
/* Ссылка на перечень — в самой строке ИК-услуг, а не отдельной кнопкой под таблицей. */
.hx .hx-cmp__doc { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .7); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.hx .hx-cmp__doc:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
.hx-cmp__doc .hx-ic { width: 13px; height: 13px; }

@media (max-width: 860px) {
    .hx-cmp { --hx-cmp-sum: 84px; --hx-cmp-out: 8px; padding-left: 14px; border-radius: 18px; }
    .hx-cmp__cell { padding: 12px 6px; }
    .hx-cmp__cell--label { font-size: 15px; hyphens: auto; overflow-wrap: anywhere; }
    .hx-cmp__row--sub .hx-cmp__cell--label { padding-left: 10px; font-size: 14px; }
    .hx .hx-cmp__val { font-size: 16px; }
    .hx .hx-cmp__cell--sum .hx-cmp__val { font-size: 18px; }
    .hx-cmp__ico { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
    .hx-cmp__ico svg { width: 17px; height: 17px; }
    .hx-cmp__col b { font-size: 13px; }
    .hx-cmp__col small { display: none; }
}
/* На телефоне — не четыре колонки, а карточка на строку: подпись и три ячейки с подписями колонок. */
@media (max-width: 600px) {
    .hx-cmp { padding: 4px 14px; }
    .hx-cmp__sum, .hx-cmp__row.hx-cmp__head { display: none; }
    .hx-cmp__grid { display: block; }
    .hx-cmp__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
    .hx-cmp__row--sub { padding: 10px 0; border-top-color: rgba(255, 255, 255, .06); }
    .hx-cmp__cell, .hx-cmp__row--sub .hx-cmp__cell { flex-direction: column; gap: 4px; padding: 8px 6px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .06); }
    .hx-cmp__cell::before { content: attr(data-col); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
    .hx-cmp__cell--label, .hx-cmp__row--sub .hx-cmp__cell--label { grid-column: 1 / -1; align-items: flex-start; padding: 0 0 2px; border: 0; border-radius: 0; background: none; }
    .hx-cmp__cell--label::before { content: none; }
    .hx-cmp__row .hx-cmp__cell--sum, .hx-cmp__row--sub .hx-cmp__cell--sum { background: #fff; border-color: #fff; }
    .hx-cmp__cell--sum::before { color: rgba(20, 50, 84, .6); }
}

/* ─────────────────────────── Технологический стек: белая полоса, карточка #1E436E ─────────────────────────── */

/* Без линии-стыка и без своей заливки: лист и так белый, а тень плиты реестра не режется по границе. */
.hx-tech {
    position: relative;
    padding: 88px 0 88px;
    color: #143254;
    background: transparent;
}
/* Метка «Технологии» — по центру над блоком, как «Реестр»; заголовок остаётся в карточке. */
.hx-tech .hx-sechead { margin-bottom: 40px; }
.hx-tech .hx-sechead .hx-pill { color: rgba(20, 50, 84, .78); }
.hx-tech__cols {
    position: relative;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 32px;
    align-items: start;
    max-width: 1180px;
}

/* Вводная карточка (#1E436E, образец владельца) прилипает при прокрутке — так слева не остаётся пустоты. */
.hx-tech__intro {
    position: sticky;
    top: 96px;
    align-self: start;
    padding: 32px 34px;
    background: #1E436E;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    /* Объём на белом листе: контактная, средняя и дальняя тени (как у плиты реестра). */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 2px 4px rgba(20, 50, 84, .2),
        0 18px 36px -14px rgba(20, 50, 84, .45),
        0 48px 90px -30px rgba(20, 50, 84, .6);
    color: #fff;
}
.hx-tech__intro .hx-pill { color: rgba(255, 255, 255, .72); }
.hx-tech__intro h2 {
    margin: 0;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.015em;
    color: #fff;
}
.hx-tech__intro p {
    margin: 12px 0 0;
    max-width: 46ch;
    font-size: 15px;
    color: rgba(255, 255, 255, .76);
}
.hx-tech__stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hx-tstat {
    flex: 1;
    min-width: 104px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
}
.hx-tstat b { display: block; font-size: 27px; font-weight: 700; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hx-tstat span { display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .7); }

/*
 * Стойка. Заголовок слоя и карточка технологии — одна сетка 40px / текст / кольцо с общим
 * отступом слева: бейдж слоя стоит под иконкой, название слоя — над названием технологии.
 * Ритм: 8px между карточками, 12px от заголовка слоя, 32px между слоями. Цвет слоя — у
 * иконки и кольца; бейджи слоёв нейтральные.
 */
.hx-stack { display: flex; flex-direction: column; gap: 32px; }
.hx-lgroup { display: flex; flex-direction: column; gap: 12px; }
.hx-lgroup__items { display: flex; flex-direction: column; gap: 8px; }
.hx-lgroup__label, .hx-unit { display: grid; column-gap: 16px; align-items: center; padding-inline: 12px; }
.hx-lgroup__label { grid-template-columns: 40px minmax(0, 1fr); }
.hx-unit { grid-template-columns: 40px minmax(0, 1fr) auto; }
.hx-lnum {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1.5px solid #111827; /* чёрная скруглённая рамка — по просьбе владельца */
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(17, 24, 39, .18), 0 10px 18px -8px rgba(17, 24, 39, .4);
    font-size: 12.5px;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
.hx-ltxt b { display: block; font-size: 15px; font-weight: 600; color: #143254; letter-spacing: -.01em; }
.hx-ltxt small { display: block; font-size: 12.5px; color: #6B7690; }
/* Блок технологии — плотный #1E436E (как карточка-вступление), белый текст; заголовки слоёв остаются светлыми. */
.hx-unit {
    min-height: 72px;
    padding-top: 12px;
    padding-bottom: 12px;
    border: 1px solid #1E436E;
    border-radius: 18px;
    background: #1E436E;
    color: #fff;
    box-shadow: 0 10px 22px -14px rgba(20, 50, 84, .55);
    transition: background var(--hx-d-fast) var(--hx-e-out), border-color var(--hx-d-fast) var(--hx-e-out);
}
/* Наведение — только чуть светлее заливка: без масштаба и цветного свечения. */
.hx-unit:hover { background: #24507F; border-color: #2B5A8C; }
.hx-unit__ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: var(--tc);
    color: #fff;
}
.hx-unit__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hx-unit__info { min-width: 0; }
.hx-unit__info b { display: block; font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.hx-unit__info small { display: block; margin-top: 1px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.hx-unit__gauge { position: relative; width: 48px; height: 48px; flex: none; }
.hx-unit__ring { display: block; width: 48px; height: 48px; transform: rotate(-90deg); }
.hx-unit__ring circle { fill: none; stroke-width: 3.5; }
.hx-unit__ring-bg { stroke: rgba(255, 255, 255, .18); }
.hx-unit__ring-fg {
    stroke: var(--tc);
    stroke-linecap: round;
    stroke-dasharray: 119.4;
    stroke-dashoffset: 119.4;
    transition: stroke-dashoffset 1.1s var(--hx-e-out) calc(.2s + var(--ri, 0) * .08s);
}
/* Кольцо заполняется на долю систем, когда стойка попала в кадр. */
.is-in .hx-unit__ring-fg { stroke-dashoffset: calc(119.4 * (1 - var(--w, 0))); }
.hx-unit__num {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.hx-unit__num b { font-size: 14.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.hx-unit__num small { margin-top: 2px; font-size: 9.5px; color: rgba(255, 255, 255, .72); }

@media (max-width: 900px) {
    .hx-tech__cols { grid-template-columns: 1fr; gap: 32px; }
    .hx-tech__intro { position: static; padding: 26px 22px; }
    .hx-reg, .hx-tech { padding: 56px 0; }
}

/* ─────────────────────────── Внешние ресурсы ─────────────────────────── */

.hx-ext {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hx-ext a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--hx-line-2);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hx-ink-2);
    transition: border-color var(--hx-d-fast) var(--hx-e-out), color var(--hx-d-fast) var(--hx-e-out);
}

.hx-ext a:hover {
    border-color: var(--hx-brand);
    color: var(--hx-brand);
}

/* ─────────────────────────── Адаптив ─────────────────────────── */

@media (max-width: 1100px) {
    .hx-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .hx-wrap { padding: 0 16px; }

    .hx-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hx-panel { padding: 16px 14px; border-radius: 20px; }

    .hx-panel__head { flex-wrap: wrap; gap: 10px; }

    .hx-panel__title { font-size: 24px; }


    /* На узком экране сцена растёт по содержимому; скрытая стадия не занимает места. */
    .hx-stage {
        height: auto;
        padding-bottom: 24px;
    }

    .hx-stage__panel {
        position: static;
        width: auto;
        margin: 16px;
        transform: none;
    }

    .hx-stage[data-stage="auth"] .hx-stage__panel,
    .hx-stage[data-stage="modules"] .hx-hero {
        display: none;
    }

    .hx-stage__panel { max-height: none; overflow: visible; }

    /* На тач-экране наведения нет — подсказка и захват не нужны. */
    .hx-probe { display: none; }
    .hx-stage.is-grab { cursor: auto; }

    .hx-hero { position: static; padding: 40px 20px 0; }

    .hx-hero__card {
        position: static;
        width: 100%;
        max-width: 420px;
        padding: 20px 20px 18px;
        transform: none;
    }

    .hx-hero__cta { flex-direction: column; width: 100%; max-width: 300px; }

    .hx-hero__cta .hx-btn { width: 100%; }
}

@media (max-width: 520px) {
    .hx-mods { grid-template-columns: 1fr; }
}

/* ─────────────────────────── Дорожки микросхемы ─────────────────────────── */

/*
 * Печатные дорожки с бегущими искрами вокруг плотных блоков на белом листе: контейнера
 * модулей у авторизованного (вместо сферы), плиты реестра и стека технологий у гостя.
 * Рисует initTraces в home-redesign.js; микросхемы задаёт селектор в data-hx-traces.
 * Слой лежит над фоном блока-хозяина, но под всем его содержимым (z-index: -1 внутри
 * собственного контекста наложения хозяина) и не ловит мышь. Размер канваса ставит скрипт.
 */
.hx-traces {
    --hx-trace: 20, 50, 84;      /* цвет дорожек и площадок, rgb */
    --hx-trace-a: .16;           /* прозрачность дорожек */
    --hx-pad-a: .32;             /* прозрачность колец площадок и переходов */
    --hx-spark: 46, 98, 212;     /* цвет искры, rgb */
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hx-traces canvas { position: absolute; left: 0; top: 0; }

/* Хозяева слоя — свои контексты наложения, иначе z-index: -1 ушёл бы под фон страницы. */
.hx-reg, .hx-tech, .hx-scene--modules .hx-stage { isolation: isolate; }

/* На узком экране полей нет — слой не нужен. */
@media (max-width: 860px) {
    .hx-traces { display: none; }
}

/* ─────────────────────────── Доступность ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hx-mods,
    .hx-ring,
    .hx-stage__aurora {
        animation: none;
    }

    .hx *,
    .hx *::before,
    .hx *::after {
        transition-duration: 1ms !important;
    }
}