/*
   Оформление публичной части по макету «3x25 Прототип» (Claude Design, 10.08.2026).
   Здесь только токены, каркас и общие компоненты; частные блоки страниц — в конце файла.
*/

/* ── Шрифт ─────────────────────────────────────────────────────────────────
   Onest лежит локально: подключение к fonts.googleapis.com — это лишний
   домен в критическом пути и передача адресов посетителей третьей стороне.
   Два вариативных файла (ось wght 400–800) вместо десяти статических:
   прежние по-весовые файлы оказались копиями одного и того же вариативного
   шрифта, и браузер качал его десять раз (230 КБ при бюджете страницы 250).
   Кириллица отделена от латиницы по unicode-range: русский LCP-заголовок
   ждёт только 11 КБ. Фича tnum сохранена в обоих — на ней держится
   font-variant-numeric: tabular-nums во всех таблицах. */

@font-face { font-family: Onest; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url(../fonts/onest/onest-vf-cyr.woff2) format('woff2-variations');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url(../fonts/onest/onest-vf-lat.woff2) format('woff2-variations');
    unicode-range: U+0020-007E, U+00A0-00BE, U+00D7, U+00F7, U+2010-2015, U+2018-201F, U+2026, U+2030, U+2032-2033, U+20BD, U+2122, U+2190-2193, U+2212, U+2248, U+2260, U+2264-2265; }

/* ── Токены ────────────────────────────────────────────────────────────── */

:root {
    /* Текст: четыре ступени графита из макета */
    --ink: #0f1013;
    --ink-2: #3f454d;
    --ink-3: #4a5058;
    --ink-4: #5f666e;
    --ink-5: #6a7078;
    --ink-faint: #b6bcc3;

    /* Акцент — синий кабельной маркировки */
    --accent: #1f5aff;
    --accent-ink: #1f4fd8;
    --accent-deep: #2b52c4;
    --accent-press: #1743c9;

    --danger: #c11d13;
    --danger-ink: #b0190f;
    --ok: #00a884;
    --ok-ink: #00755c;

    /* Поверхности. Карточки полупрозрачные: под ними лежат цветные пятна,
       и стекло размывает именно их. */
    --canvas: #edeff2;
    --paper: #fff;
    --glass: rgba(255, 255, 255, .5);
    --glass-strong: rgba(255, 255, 255, .55);
    --glass-soft: rgba(255, 255, 255, .62);
    --glass-edge: rgba(15, 16, 19, .08);
    --glass-edge-strong: rgba(255, 255, 255, .95);
    --line: rgba(15, 16, 19, .1);
    --line-strong: rgba(15, 16, 19, .14);
    --accent-wash: rgba(31, 90, 255, .1);
    --accent-edge: rgba(31, 90, 255, .22);

    --blur: blur(26px) saturate(175%);
    --blur-light: blur(18px) saturate(160%);

    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;

    --shell: 1320px;
    --pad: 26px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* Полотно вокруг страницы. Сайт лежит на нём белой панелью — так задумано в макете,
       и именно этот контраст проявляет карточки, которые сами почти белые. */
    background: var(--canvas);
    color: var(--ink);
    padding: 32px 36px 64px;
    font: 400 16px/1.6 Onest, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Числа — главные герои сайта: колонки в таблицах обязаны совпадать. */
    font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; transition: color 120ms; }
a:hover { color: var(--accent); }

h1, h2, h3 { margin: 0; letter-spacing: -0.035em; font-weight: 800; line-height: 1.15; text-wrap: pretty; }
h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -0.05em; }
h2 { font-size: 22px; }
h3 { font-size: 19px; letter-spacing: -0.03em; }
p { margin: 0; }

table { border-collapse: collapse; }
img { max-width: 100%; }
input, button, select, textarea { font-family: inherit; font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: #d5e0ff; }

summary::-webkit-details-marker { display: none; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: static; display: inline-block; padding: 8px 12px; }

/* ── Каркас страницы ───────────────────────────────────────────────────── */

.shell {
    position: relative;
    max-width: var(--shell);
    margin: 0 auto;
    overflow: clip;
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 0 30px 90px rgba(15, 16, 19, .12);
}

/* Декоративные пятна: то, ради чего в макете стекло. Не перехватывают клики
   и не участвуют в потоке — на CLS не влияют. */
.glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.glow-1 { top: -200px; left: -140px; width: 680px; height: 680px;
    background: radial-gradient(circle, rgba(31, 90, 255, .28), rgba(31, 90, 255, 0) 70%); }
.glow-2 { top: -220px; right: -260px; width: 760px; height: 760px;
    background: radial-gradient(circle, rgba(255, 120, 60, .055), rgba(255, 120, 60, .025) 45%, rgba(255, 120, 60, 0) 74%); }
.glow-3 { top: 900px; left: 30%; width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(0, 190, 160, .18), rgba(0, 190, 160, 0) 70%); }
.glow-4 { top: 1900px; right: -120px; width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(122, 90, 255, .18), rgba(122, 90, 255, 0) 70%); }

.content { position: relative; z-index: 2; padding: 22px var(--pad) 0; }

/* ── Служебная полоса и шапка ──────────────────────────────────────────── */

.utility-bar {
    position: relative; z-index: 3;
    display: flex; align-items: center; gap: 18px;
    padding: 0 var(--pad); min-height: 36px;
    background: rgba(255, 255, 255, .5);
    backdrop-filter: var(--blur-light); -webkit-backdrop-filter: var(--blur-light);
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    font-size: 12.5px; color: var(--ink-4);
}

.utility-bar__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.utility-bar__checked { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

.site-header {
    position: relative; z-index: 3;
    display: flex; align-items: center; gap: 22px;
    padding: 0 var(--pad); min-height: 62px;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(24px) saturate(175%); -webkit-backdrop-filter: blur(24px) saturate(175%);
    border-bottom: 1px solid rgba(255, 255, 255, .75);
}

.logo { font: 800 21px Onest, sans-serif; letter-spacing: -0.05em; color: var(--ink); }
.logo span { color: var(--accent); }
.logo small { font-weight: 500; font-size: 13px; color: var(--ink-4); }

.site-nav { display: flex; gap: 4px; font-size: 14px; font-weight: 500; }
.site-nav a { padding: 7px 11px; border-radius: var(--radius-sm); white-space: nowrap; }
.site-nav a:hover { background: rgba(31, 90, 255, .07); color: var(--accent-ink); }
.site-nav a[aria-current] { background: rgba(15, 16, 19, .05); color: var(--ink); }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.search { position: relative; width: 230px; }
.search svg { position: absolute; left: 13px; top: 12px; color: var(--ink-5); }
.search input {
    width: 100%; height: 40px; padding: 0 14px 0 34px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-size: 14px; color: inherit;
}

/* ── Кнопки, пилюли, поля ──────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 42px; padding: 0 18px;
    border: 0; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff;
    font: 600 14.5px Onest, sans-serif; cursor: pointer;
    transition: background 120ms;
}
.btn:hover { background: var(--accent-press); color: #fff; }
.btn:active { transform: scale(.97); }

.btn-dark { background: var(--ink); }
.btn-dark:hover { background: var(--accent); }

.btn-ghost {
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .6);
    color: var(--ink);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: border-color 120ms;
}
.btn-ghost:hover { border-color: var(--accent); background: rgba(255, 255, 255, .6); color: var(--ink); }

.btn-sm { height: 40px; padding: 0 15px; font-size: 13.5px; }

.pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: var(--radius-sm);
    background: var(--glass-soft); border: 1px solid var(--glass-edge-strong);
    font-size: 12.5px; font-weight: 500; color: var(--ink-3);
}
.pill-dark { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.pill-dark span { font-weight: 500; color: #9aa1a9; }
.pill span { font-weight: 500; color: var(--ink-4); }

/* ── Формы страниц: поиск и 404 ────────────────────────────────────────────
   Текстовые контролы по всему сайту — с видимой рамкой --line-strong, как у
   поиска в шапке: без неё поле не отличить от декоративной карточки. */

.search-form { margin-top: 18px; display: flex; gap: 10px; max-width: 520px; }
.search-form input {
    flex: 1; min-width: 0; height: 46px; padding: 0 16px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .86);
    font-size: 15px; color: inherit;
}

/* Контакты: формы нет намеренно (10-legal.md §10.2) — только почта и реквизиты. */
.contacts-email { margin-top: 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.requisites { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; color: var(--ink-2); }

/* ── Карточки ──────────────────────────────────────────────────────────── */

.card {
    border-radius: var(--radius);
    background: var(--glass);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-edge);
    padding: 24px 26px;
}
.card-accent { background: rgba(31, 90, 255, .09); border-color: rgba(31, 90, 255, .2); }
.card-plain { background: rgba(255, 255, 255, .66); border-color: var(--glass-edge-strong); backdrop-filter: none; -webkit-backdrop-filter: none; }

.card-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
}

.kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; color: var(--ink-4); }
.kicker-accent { color: var(--accent-deep); }
.muted { color: var(--ink-4); }
.lead { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.note { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }

/* ── Крошки ────────────────────────────────────────────────────────────── */

.breadcrumbs ol {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 0; padding: 0; list-style: none;
    font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--ink-4);
}
.breadcrumbs li + li::before { content: "›"; margin-right: 8px; color: var(--ink-faint); }
.breadcrumbs [aria-current] { color: var(--ink); }

/* ── Списки ссылок и таблицы ───────────────────────────────────────────── */

.link-rows { display: flex; flex-direction: column; }
.link-rows a {
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
    padding: 14px 0; border-top: 1px solid var(--line);
    font-size: 16px; font-weight: 600;
}
.link-rows a:last-child { border-bottom: 1px solid var(--line); }
.link-rows b { font-weight: 700; color: var(--accent-ink); }

.link-list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 500; }

.data-table { width: 100%; font-size: 15px; }
.data-table th, .data-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table thead th { font-size: 12.5px; font-weight: 600; color: var(--ink-4); letter-spacing: .04em; }
.data-table tbody tr:hover { background: rgba(31, 90, 255, .04); }
.data-table .is-current { font-weight: 700; color: var(--accent-ink); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex; align-items: center; gap: 14px; min-height: 44px;
    padding: 16px 2px; cursor: pointer; list-style: none;
    font-size: 16.5px; font-weight: 600;
}
.faq summary span { flex: none; display: flex; color: var(--accent-ink); }
.faq p { padding: 0 2px 18px 38px; font-size: 15px; line-height: 1.65; color: var(--ink-3); max-width: 80ch; }

/* ── Рекламный слот ────────────────────────────────────────────────────── */

/* Высота зарезервирована: слот не должен двигать контент, пока реклама грузится.
   А вот пустой слот — блокировщик или отсутствие кампании — дыры не оставляет (§4.7). */
.ad-slot:empty { display: none; }

.ad-slot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .42); border: 1px solid var(--glass-edge);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    font-size: 12.5px; color: var(--ink-5);
}
.ad-slot--side { height: 250px; }
.ad-slot--inline { height: 180px; }
.ad-slot__label { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; }

/* ── Подвал ────────────────────────────────────────────────────────────── */

.site-footer { position: relative; z-index: 2; margin-top: 36px; background: #0f1013; color: #fff; }
.site-footer a { color: #e4e6e9; }
.site-footer a:hover { color: #fff; }

.footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px;
    padding: 56px var(--pad) 38px;
}
.footer-col { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; font-size: 14.5px; }
/* Подвал тёмный: #6f767f давал контраст 4.14 при норме 4.5 для мелкого текста. */
.footer-col .kicker { color: #838a93; }
.footer-brand { font: 800 28px Onest, sans-serif; letter-spacing: -0.05em; }
.footer-brand span { color: #5b84ff; }
.footer-brand small { font-weight: 500; font-size: 14px; color: #8b929b; }
.footer-about { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: #a7adb5; max-width: 36ch; }
.footer-stats { margin-top: 20px; display: flex; gap: 7px; flex-wrap: wrap; }
.footer-stats span {
    padding: 7px 12px; border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
    font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: #c2c7cd;
}
.footer-bottom {
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding: 20px var(--pad); border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px; color: #8b929b;
}

/* ── Куки ──────────────────────────────────────────────────────────────── */

/* Авторский display:flex сильнее UA-правила для [hidden] — без этой строки
   баннер не скрывался бы после выбора. */
.cookie-notice[hidden] { display: none; }

.cookie-notice {
    position: fixed; inset: auto 0 0 0; z-index: 20;
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
    padding: 12px var(--pad);
    background: rgba(15, 16, 19, .94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: #e4e6e9; font-size: 13.5px;
}
.cookie-notice a { color: #9dc4ff; }
.cookie-notice__actions { display: flex; gap: 8px; }
.cookie-notice .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }

/* ── Главная ───────────────────────────────────────────────────────────── */

.home-hero {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 36px; align-items: center;
    padding-top: 4px;
}

.home-hero h1 { margin: 12px 0 0; max-width: 16ch; }
.home-hero .lead { margin-top: 14px; max-width: 56ch; }

.home-hero__image { position: relative; min-width: 0; }
.home-hero__image img {
    display: block; width: 100%; height: auto;
    /* Фотография вписана в белый фон умножением и растворяется к краям — приём макета. */
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 16%, #000 42%),
                        linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .35) 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 16%, #000 42%),
                linear-gradient(180deg, #000 62%, rgba(0, 0, 0, .35) 86%, transparent 100%);
    mask-composite: intersect;
}

.hero-badge {
    position: absolute; left: 0; bottom: 6px;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 13px; border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: var(--blur-light); -webkit-backdrop-filter: var(--blur-light);
    border: 1px solid var(--glass-edge-strong);
    font-size: 13px; font-weight: 600; color: var(--ink-2);
}

.dot-accent { background: var(--accent); width: 7px; height: 7px; }

.hero-search { position: relative; margin-top: 18px; max-width: 520px; z-index: 5; }
.hero-search svg { position: absolute; left: 15px; top: 18px; color: var(--ink-5); pointer-events: none; }
.hero-search input {
    width: 100%; height: 54px; padding: 0 16px 0 42px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-size: 15.5px; color: inherit;
}

/* Подсказки поиска — единственное место, где макет допускает тень: выпадающий слой. */
.suggest {
    position: absolute; left: 0; right: 0; top: 54px; z-index: 6;
    border: 1px solid rgba(15, 16, 19, .12); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--paper); overflow: hidden;
    box-shadow: 0 16px 38px -18px rgba(15, 16, 19, .42);
}
.suggest__item {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 13px 16px; border: 0; border-top: 1px solid rgba(15, 16, 19, .07);
    background: none; cursor: pointer; text-align: left; color: inherit;
    transition: background 110ms;
}
.suggest__item:first-child { border-top: 0; }
.suggest__item:hover, .suggest__item[aria-selected="true"] { background: rgba(31, 90, 255, .06); }
.suggest__tag {
    flex: none; width: 30px; height: 30px; border-radius: 7px;
    background: rgba(31, 90, 255, .1); color: var(--accent-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.suggest__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.suggest__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.suggest__hint { font-size: 13px; color: var(--ink-4); }
.suggest__empty { padding: 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink-4); }

.hero-pills { margin-top: 10px; display: flex; gap: 7px; flex-wrap: wrap; }

.section-grid {
    margin-top: 26px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}

.section-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; min-height: 190px;
    padding: 20px 22px; border-radius: 10px;
    background: var(--glass-strong);
    backdrop-filter: blur(22px) saturate(175%); -webkit-backdrop-filter: blur(22px) saturate(175%);
    /* В макете карточки проявляют цветные пятна под ними; там, где пятна нет, белая рамка
       на белой панели исчезает — поэтому контур графитовый, но почти незаметный. */
    border: 1px solid rgba(15, 16, 19, .08);
    transition: border-color 120ms;
}
.section-card:hover { border-color: rgba(31, 90, 255, .45); color: inherit; }

/* Картинка занимает правую половину карточки во всю высоту и растворяется к тексту —
   в макете именно она отделяет карточки друг от друга, а не рамка. */
.section-card__image {
    position: absolute; right: 0; top: 0; bottom: 0; width: 52%;
    background-size: cover; background-position: 60% 50%;
    mix-blend-mode: multiply; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 52%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 52%);
}

.section-card__body { position: relative; display: flex; flex-direction: column; gap: 9px; max-width: 60%; }
.section-card__title { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.section-card__intro { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.section-card__more {
    margin-top: 6px; display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--accent-ink);
}

.home-bottom {
    margin-top: 20px; padding-bottom: 8px;
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start;
}
.home-bottom .link-rows { margin-top: 14px; }
.home-principle__title { margin: 12px 0 12px; font-size: 26px; line-height: 1.08; letter-spacing: -0.04em; max-width: 14ch; }
.home-principle__btn { margin-top: 18px; }

/* ── Страница расчёта ──────────────────────────────────────────────────── */

.preview-bar {
    margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-sm);
    background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .35);
    font-size: 13.5px; font-weight: 500; color: #7a4b00;
}

.calc-head { margin-top: 12px; }
.calc-head h1 { max-width: 21ch; letter-spacing: -0.045em; }
.calc-head .lead { margin-top: 12px; max-width: 66ch; }

.calc-params { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

.calc-layout {
    margin-top: 20px; padding-bottom: 8px;
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start;
}
.calc-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.calc-aside { min-width: 0; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }

.calc-text { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 70ch; }
.calc-text:first-of-type { margin-top: 14px; }

/* Вводный абзац: тот же текст, но крупнее — он идёт первым и задаёт тон странице. */
.calc-text--lead { margin-top: 0; font-size: 16.5px; color: var(--ink); }
.calc-text--lead:first-of-type { margin-top: 0; }

/* Блок ответа — главный элемент страницы, поэтому тень заметнее прочих. */
.answer {
    background: var(--glass-strong);
    backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 44px rgba(15, 16, 19, .09);
    padding: 26px 28px;
}
.answer__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.answer__head .kicker { letter-spacing: .2em; color: var(--ink-3); }

.badge {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: var(--radius-sm);
    font-size: 12.5px; font-weight: 600;
}
.badge-ok { background: rgba(0, 168, 132, .12); border: 1px solid rgba(0, 168, 132, .24); color: var(--ok-ink); }
.badge-wait { background: rgba(15, 16, 19, .05); border: 1px solid var(--line-strong); color: var(--ink-4); }

.answer__unavailable {
    margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 62ch;
}

.answer__grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.answer__cell {
    min-width: 0; padding: 18px 20px; border-radius: 10px;
    background: rgba(255, 255, 255, .66); border: 1px solid var(--glass-edge-strong);
}
.answer__cell--accent { background: var(--accent-wash); border-color: var(--accent-edge); }
.answer__cell--accent .answer__label,
.answer__cell--accent .answer__hint { color: var(--accent-deep); }
.answer__cell--accent .answer__value { color: var(--accent-ink); }

.answer__label { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; color: var(--ink-4); }
.answer__value { margin-top: 12px; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.answer__value--sm { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
.answer__hint { margin-top: 8px; font-size: 13.5px; color: var(--ink-4); }

.answer__facts { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fact { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .9); }
.fact__label { font-size: 12.5px; color: var(--ink-4); }
.fact__value { margin-top: 5px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }

.answer__foot {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.answer__line { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.answer__note { margin-top: 12px; font-size: 13.5px; color: var(--ink-4); }

/* Калькулятор. Рамка контролов — графитовая --line-strong, как у поиска в шапке:
   белая --glass-edge-strong на белой карточке не читалась как поле ввода. */

.calc-fields { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.field__control { position: relative; display: block; min-width: 0; }
.field__control input {
    width: 100%; height: 54px; padding: 0 52px 0 15px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .86);
    font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: inherit;
}
.field__unit { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 13.5px; font-weight: 500; color: var(--ink-5); }

.seg {
    display: flex; height: 54px; padding: 5px; gap: 5px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .55);
}
.seg button {
    flex: 1; min-width: 0; white-space: nowrap;
    border: 0; border-radius: var(--radius-xs); background: transparent;
    color: var(--ink-3); font: 600 13.5px Onest, sans-serif; cursor: pointer;
}
.seg button.is-on { background: var(--ink); color: #fff; }

.calc-error {
    margin-top: 14px; padding: 13px 15px; border-radius: var(--radius-sm);
    background: rgba(225, 37, 27, .09); border: 1px solid rgba(225, 37, 27, .24);
    font-size: 14.5px; font-weight: 500; color: var(--danger-ink);
}

/* Схема линии */

.scheme {
    margin-top: 18px;
    display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
    align-items: stretch;
}
.scheme__node {
    min-width: 0; padding: 14px; border-radius: 9px;
    background: rgba(255, 255, 255, .66); border: 1px solid var(--glass-edge-strong);
}
.scheme__node--accent { background: var(--accent-wash); border-color: var(--accent-edge); }
.scheme__node--accent .scheme__label, .scheme__node--accent .scheme__hint { color: var(--accent-deep); }
.scheme__node--accent .scheme__value { color: var(--accent-ink); }
.scheme__label { font-size: 12.5px; color: var(--ink-4); }
.scheme__value { margin-top: 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.scheme__hint { margin-top: 6px; font-size: 13px; color: var(--ink-4); }
.scheme__arrow { display: flex; align-items: center; justify-content: center; color: var(--ink-faint); }

/* Цитата норматива и предупреждение */

.quote {
    margin: 20px 0 0; padding: 20px 22px; max-width: 70ch;
    border-radius: 9px; background: rgba(31, 90, 255, .08); border: 1px solid rgba(31, 90, 255, .18);
}
.quote p { font-size: 16px; line-height: 1.65; font-weight: 500; }
.quote cite {
    display: inline-block; margin-top: 12px;
    font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .12em; color: var(--accent-ink);
}

.danger-note {
    margin-top: 18px; display: flex; gap: 13px; align-items: flex-start;
    padding: 18px 20px; border-radius: 9px;
    background: rgba(225, 37, 27, .07); border: 1px solid rgba(225, 37, 27, .2);
    color: var(--danger);
}
.danger-note__title { font-size: 16px; font-weight: 700; color: #a5180f; }
.danger-note .note { margin-top: 6px; max-width: 64ch; }

/* Таблицы, источники, перелинковка */

.table-scroll { margin-top: 14px; overflow-x: auto; }
.data-table tbody tr.is-current { background: rgba(31, 90, 255, .06); }
.data-table tbody tr.is-current th { color: var(--accent-ink); }

.sources { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sources li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.sources__num { flex: none; font-weight: 700; color: var(--ink-4); }

.more-link { font-size: 14.5px; font-weight: 600; color: var(--accent-ink); }

.related { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.related__item {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px 20px; border-radius: 10px;
    background: var(--glass-strong); border: 1px solid rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    transition: border-color 120ms;
}
.related__item:hover { border-color: rgba(31, 90, 255, .4); color: inherit; }
.related__title { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.related__hint { font-size: 14px; color: var(--ink-3); line-height: 1.5; }

.toc { margin-top: 13px; font-size: 14px; }
.toc a:first-child { color: var(--accent-ink); }

.aside-answer { margin-top: 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
.aside-answer__hint { margin-top: 6px; font-size: 14px; color: var(--accent-deep); }

/* ── Опорная страница ──────────────────────────────────────────────────── */

.pillar-table-card { margin-top: 18px; }
.pillar-empty { margin-top: 12px; max-width: 70ch; }

/* Первая колонка залипает: без неё в широкой таблице непонятно, к какой мощности строка (§4.2). */
.pillar-scroll { overflow-x: auto; }
.pillar-table { min-width: 720px; }
.pillar-table__sticky {
    position: sticky; left: 0; z-index: 1;
    background: var(--paper);
    text-align: left; white-space: nowrap;
}
.pillar-table tbody .pillar-table__sticky { font-weight: 700; }
.pillar-table__section { display: block; font-weight: 600; }
.pillar-table__breaker { display: block; margin-top: 2px; font-size: 13px; color: var(--accent-ink); }

.calc-inline-answer {
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.calc-inline-answer__value { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }

/* ── Схема подключения ─────────────────────────────────────────────────── */

.scheme-svg { margin: 0; }
.scheme-svg svg { display: block; width: 100%; height: auto; }
.scheme-svg figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-4); max-width: 70ch; }

.danger-note--wide { margin-top: 18px; }

.tools { margin: 14px 0 0; padding-left: 20px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.tools li { margin-bottom: 6px; }

.steps { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step__num {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-wash); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700;
}
.step__body { display: flex; flex-direction: column; gap: 4px; }
.step__title { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.step__text { font-size: 15px; line-height: 1.6; color: var(--ink-3); max-width: 70ch; }

.scheme-calc__title { margin: 12px 0 8px; font-size: 22px; max-width: 24ch; }
.scheme-calc__btn { margin-top: 14px; }

/* ── Хаб раздела ───────────────────────────────────────────────────────── */

.hub-head {
    margin-top: 12px;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 28px; align-items: center;
}
.hub-head__intro { margin-top: 12px; max-width: 62ch; }
.hub-head__image img {
    display: block; width: 100%; height: auto;
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .32) 18%, #000 46%),
                        linear-gradient(180deg, #000 64%, rgba(0, 0, 0, .35) 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .32) 18%, #000 46%),
                linear-gradient(180deg, #000 64%, rgba(0, 0, 0, .35) 88%, transparent 100%);
    mask-composite: intersect;
}

.hub-stats { margin-top: 18px; display: flex; gap: 26px; flex-wrap: wrap; }
.hub-stats__value { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.hub-stats__label { margin-top: 4px; font-size: 13.5px; color: var(--ink-4); }

.hub-groups { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.hub-group { padding: 22px 24px; }
.hub-group__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line-strong);
}
.hub-group__head h2 { font-size: 18px; letter-spacing: -0.03em; }
.hub-group__links { margin-top: 12px; }
.hub-group__more { margin-top: 10px; font-size: 13px; }

.hub-empty { margin-top: 20px; }
.hub-empty .note { margin: 10px 0 16px; max-width: 70ch; }

.hub-bottom { margin-top: 16px; padding-bottom: 8px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hub-article__title { margin: 12px 0 0; font-size: 24px; max-width: 24ch; }
.hub-side { display: flex; flex-direction: column; gap: 16px; }
.hub-side__title { font-size: 18px; letter-spacing: -0.03em; }
.hub-side__links { margin-top: 12px; }

/* ── О проекте ─────────────────────────────────────────────────────────── */

.about-title { margin-top: 14px; max-width: 18ch; }
.about-layout { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.about-side { display: flex; flex-direction: column; gap: 14px; }
.about-text h2 { margin-top: 22px; font-size: 20px; letter-spacing: -0.03em; }
.about-text p { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 66ch; }
.about-text ol, .about-text ul { margin-top: 10px; padding-left: 20px; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 66ch; }
.about-text li { margin-bottom: 8px; }

.about-figures { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.about-figures__value { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.about-figures__label { margin-top: 3px; font-size: 13.5px; color: var(--ink-4); }

/* ── Адаптив ───────────────────────────────────────────────────────────────
   Макет нарисован для десктопа, но больше половины визитов — со смартфона:
   колонки схлопываются, поиск уходит в отдельную строку. */

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

    /* Боковая колонка уезжает вниз: на планшете важнее ширина основной колонки. */
    .calc-layout { grid-template-columns: 1fr; }
    .calc-aside { position: static; }
    .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-bottom, .about-layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    :root { --pad: 16px; }

    .utility-bar { display: none; }

    .site-header { flex-wrap: wrap; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
    .site-nav { order: 3; width: 100%; overflow-x: auto; }
    .header-tools { margin-left: auto; }
    .search { width: 170px; }
    .header-tools .btn { display: none; }

    .glow { display: none; }

    /* Стекло на слабом телефоне стоит дорого, а под ним всё равно белый фон. */
    .card, .ad-slot, .site-header, .utility-bar {
        backdrop-filter: none; -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, .92);
    }
    .card-accent { background: rgba(31, 90, 255, .07); }

    .card { padding: 18px 16px; }

    /* Фотография первого экрана на телефоне только тормозит: ответ важнее картинки. */
    .home-hero { grid-template-columns: 1fr; gap: 20px; }
    .home-hero__image { display: none; }
    /* Поле и кнопка встают друг под друга, и лупе в поле уже нет места. */
    .hero-search { flex-direction: column; }
    .hero-search svg { display: none; }
    .hero-search input { padding-left: 16px; height: 50px; }
    .hero-search .btn { width: 100%; }
    .section-grid { grid-template-columns: 1fr; }
    .section-card { min-height: 0; }
    .section-card__body { max-width: 100%; }
    .section-card__image { display: none; }

    .answer { padding: 18px 16px; }
    .answer__grid { grid-template-columns: 1fr; }
    .answer__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calc-fields { grid-template-columns: 1fr; }
    .related { grid-template-columns: 1fr; }

    /* Схема разворачивается в колонку: стрелки вправо на узком экране не читаются. */
    .scheme { grid-template-columns: 1fr; gap: 8px; }
    .scheme__arrow { transform: rotate(90deg); }

    .hub-head { grid-template-columns: 1fr; gap: 18px; }
    .hub-head__image { display: none; }
    .hub-groups { grid-template-columns: 1fr; }
    .about-figures { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ── Печать ────────────────────────────────────────────────────────────────
   Со страницы расчёта уходят в печать ответ, таблица и текст; навигация,
   реклама и калькулятор на бумаге бесполезны (04-page-templates.md §4.8). */

@media print {
    body { padding: 0; background: #fff; }

    .shell { max-width: none; border-radius: 0; box-shadow: none; }

    .utility-bar, .site-header, .site-footer, .cookie-notice,
    .ad-slot, .calc-aside, .glow, .preview-bar, .breadcrumbs,
    .hero-search, .search, .btn { display: none !important; }

    .card, .section-card, .related__item {
        border-color: rgba(15, 16, 19, .25);
        background: #fff;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }

    .calc-layout, .hub-bottom, .about-layout, .home-bottom { grid-template-columns: 1fr; }

    a[href^="/"]::after { content: " (3x25.ru" attr(href) ")"; font-size: 11px; color: #5f666e; }
}