/* Общие стили сайта askue.o-dir.ru: лэндинг и страницы /uchet-arendatorov, /oborudovanie, /dokumentaciya.
   Вынесены из landing.html 23.10.2026 — правки дизайна вносить здесь, не в страницы. */
  /* Публичный лэндинг (20.10.2026). Швейцарская сетка панели: тонкие линии, 12 колонок, цифры
     моноширинным, цвета логотипа только как метки (полоса, ресурсы). Гость получает эту страницу
     на «/» (см. server.js), вошедший — кабинет. Картинки — /landing/shots/*.jpg (кадры демо-проекта). */
  :root {
    color-scheme: light;
    --bg:#ffffff; --bg-alt:#f4f5f6; --tx:#111315; --muted:#5f656b; --line:#d5d7da; --line-strong:#b9bdc2;
    --accent:#0077b3; --accent-hover:#005f8f; --on-accent:#ffffff; --focus:#00618f; --err:#c62828; --ok:#2e7d32;
    --brand-blue:#008dd2; --brand-sky:#a2d9f7; --brand-teal:#73c8d7; --brand-lime:#b0cb1f;
    --snow:#fefefe; --snow-edge:#c3c7cb;
    --res-power:#6f52b5; --res-water:#177585; --res-heat:#b4500f; --res-water-display:#0597c8;
    --shade:rgba(17,19,21,.55); --shot-filter:none; --btn-print:var(--brand-sky);
    --f-body:'Archivo',Helvetica,Arial,sans-serif;
    --f-mark:'Golos Text','Archivo',Helvetica,Arial,sans-serif;
    --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
    --wrap:1200px;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --bg:#23272c; --bg-alt:#2a2f35; --tx:#e9ecef; --muted:#9aa2aa; --line:#41474e; --line-strong:#59616a;
    --accent:#3aa9de; --accent-hover:#62bce6; --on-accent:#0d1a22; --focus:#a2d9f7; --err:#f4655a; --ok:#8bc34a;
    --snow:#e9ecef; --snow-edge:#e9ecef;
    --res-power:#a891e6; --res-water:#73c8d7; --res-heat:#eb9a5c; --res-water-display:#5ccdf2;
    --shade:rgba(0,0,0,.6); --shot-filter:brightness(.86); --btn-print:var(--brand-blue); color-scheme:dark; } }
  :root[data-theme="dark"] {
    --bg:#23272c; --bg-alt:#2a2f35; --tx:#e9ecef; --muted:#9aa2aa; --line:#41474e; --line-strong:#59616a;
    --accent:#3aa9de; --accent-hover:#62bce6; --on-accent:#0d1a22; --focus:#a2d9f7; --err:#f4655a; --ok:#8bc34a;
    --snow:#e9ecef; --snow-edge:#e9ecef;
    --res-power:#a891e6; --res-water:#73c8d7; --res-heat:#eb9a5c; --res-water-display:#5ccdf2;
    --shade:rgba(0,0,0,.6); --shot-filter:brightness(.86); --btn-print:var(--brand-blue); color-scheme:dark; }

  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:88px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
  body { margin:0; background:var(--bg); color:var(--tx); font:16px/1.6 var(--f-body); -webkit-font-smoothing:antialiased; }
  body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:50; background:var(--bg); }
  img { max-width:100%; }
  a { color:inherit; text-decoration:none; }
  h1,h2,h3 { margin:0; text-wrap:balance; }
  p { margin:0; }
  [hidden] { display:none !important; }
  .wrap { max-width:var(--wrap); margin:0 auto;
    padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px)); }
  @media (max-width:600px) { .wrap { padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); } }
  :focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }
  .label { font:600 11.5px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .num { font-family:var(--f-mono); font-variant-numeric:tabular-nums; }

  /* ── Знак «Вершина» ── */
  .mark { display:flex; align-items:center; gap:12px; }
  .mark svg { width:46px; height:auto; flex:none; }
  .mark .snow { fill:var(--snow); stroke:var(--snow-edge); stroke-width:1.2; stroke-linejoin:round; }
  .mark-text { display:flex; flex-direction:column; gap:3px; }
  .mark-kind { font:600 9.5px/1 var(--f-mono); letter-spacing:.2em; color:var(--muted); }
  .mark-name { font:800 21px/1 var(--f-mark); letter-spacing:-.01em; }

  /* ── Шапка ── */
  .nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--bg); border-bottom:1px solid var(--line); }
  .nav-row { display:flex; align-items:center; gap:32px; min-height:72px; }
  .nav-links { display:flex; gap:28px; margin-left:auto; font-size:14.5px; font-weight:500; }
  .nav-links a { color:var(--muted); padding:6px 0; border-bottom:2px solid transparent; transition:color 150ms, border-color 150ms; }
  .nav-links a:hover { color:var(--tx); border-bottom-color:var(--brand-blue); }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font:600 14.5px/1 var(--f-body);
    padding:13px 22px; border-radius:2px; border:1.5px solid var(--tx); background:transparent; color:var(--tx);
    cursor:pointer; white-space:nowrap;
    transition:background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1), box-shadow 160ms cubic-bezier(.23,1,.32,1); }
  /* Наведение: кнопка приподнимается, под ней плоский «отпечаток» фирменного голубого (без свечения и градиентов),
     нажатие — «вдавливается» обратно. Один эффект на все кнопки страницы. */
  .btn:hover { background:var(--tx); color:var(--bg); transform:translate(-3px,-3px); box-shadow:3px 3px 0 var(--btn-print); }
  .btn:active { transform:translate(0,0); box-shadow:0 0 0 var(--btn-print); transition-duration:60ms; }
  .btn:disabled, .btn:disabled:hover { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
  .btn-primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
  .btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-accent); }
  .btn svg { width:16px; height:16px; transition:transform 160ms cubic-bezier(.23,1,.32,1); }
  .btn:hover svg { transform:translateX(3px); }
  @media (prefers-reduced-motion: reduce) {
    .btn, .btn svg { transition:background 160ms ease, color 160ms ease, border-color 160ms ease; }
    .btn:hover { transform:none; box-shadow:3px 3px 0 var(--btn-print); } .btn:hover svg { transform:none; } }
  .nav .btn { padding:11px 20px; }
  .burger { display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line); background:transparent; color:var(--tx); border-radius:2px; cursor:pointer; align-items:center; justify-content:center; }
  .burger svg { width:20px; height:20px; }
  .nav-mobile { display:none; border-top:1px solid var(--line); padding-block:8px 16px; }
  .nav-mobile a { display:block; padding:13px 0; border-bottom:1px solid var(--line); font-weight:500; }
  .nav-mobile .btn { margin-top:14px; width:100%; }
  .nav-mobile.open { display:block; }
  /* Кнопка темы — в шапке рядом со «Входом» (раньше была в окне входа); та же настройка 'askue-theme', что в кабинете */
  .theme-btn { flex:none; width:44px; height:44px; margin-right:-20px; padding:0; display:inline-flex; align-items:center; justify-content:center;
    background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:2px; cursor:pointer; transition:color 150ms, border-color 150ms; }
  .theme-btn:hover { color:var(--tx); border-color:var(--accent); }
  .theme-btn svg { width:16px; height:16px; }
  @media (max-width:900px) { .nav-links, .nav-row > .btn { display:none; } .burger { display:inline-flex; margin-left:0; } .theme-btn { margin-left:auto; margin-right:-24px; } }

  /* ── Первый экран ── */
  .hero { padding-block:56px 0; }
  .hero-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end; }
  .hero-head { grid-column:1 / span 8; }
  .hero-side { grid-column:9 / span 4; display:flex; flex-direction:column; gap:24px; padding-bottom:8px; }
  .hero h1 { font:800 clamp(38px,5.6vw,76px)/1.0 var(--f-body); letter-spacing:-.035em; }
  /* Надпись над заголовком — часть H1 (SEO: «АСКУЭ» в H1), визуально та же метка, что и раньше */
  .hero h1 .h1-kicker { display:block; margin-bottom:22px; }
  /* «воды» в заголовке ярче и голубее, чем --res-water: тот рассчитан на мелкий текст (≥4.5:1),
     а на 38–76px хватает 3:1 — #0597c8 на белом ≈3.4:1. */
  .hero h1 .r-power { color:var(--res-power); } .hero h1 .r-water { color:var(--res-water-display); } .hero h1 .r-heat { color:var(--res-heat); }

  /* ── «Живые» слова заголовка: эффект только на самом слове и только при наведении ──
     электроэнергии — по буквам бежит импульс тока + две короткие вспышки-молнии у краёв;
     воды — внутри букв текут светлые струи + бегущая волна под словом;
     тепла — тёплые переливы поднимаются снизу вверх + три линии горячего воздуха над словом.
     Цвета — от токенов ресурсов (работает в обеих темах); размеры слова не меняются. */
  .hero h1 .fx { position:relative; display:inline-block; }
  .hero h1 .nobr { white-space:nowrap; }
  .hero h1 .fx::before, .hero h1 .fx::after { content:""; position:absolute; pointer-events:none; opacity:0; }
  .hero h1 .fx:hover { color:transparent; -webkit-background-clip:text; background-clip:text; }

  .hero h1 .fx-power:hover {
    background-image:linear-gradient(100deg, var(--res-power) 0 40%, color-mix(in srgb, var(--res-power) 40%, #fff) 48%,
      color-mix(in srgb, var(--res-power) 25%, #fff) 50%, color-mix(in srgb, var(--res-power) 40%, #fff) 52%, var(--res-power) 60% 100%);
    background-size:300% 100%; animation:fx-current 1.15s cubic-bezier(.5,0,.5,1) infinite; }
  .hero h1 .fx-power::before, .hero h1 .fx-power::after { background:var(--res-power);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 1 3 14h7l-1.5 9L20 9h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 1 3 14h7l-1.5 9L20 9h-7z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .hero h1 .fx-power::before { width:.4em; height:.5em; top:-.3em; right:-.16em; transform:rotate(14deg); }
  .hero h1 .fx-power::after { width:.3em; height:.38em; bottom:.02em; left:-.26em; transform:rotate(-18deg); }
  .hero h1 .fx-power:hover::before { animation:fx-spark 1.6s steps(1,end) infinite; }
  .hero h1 .fx-power:hover::after { animation:fx-spark 1.6s steps(1,end) .75s infinite; }
  @keyframes fx-current { from { background-position:100% 0; } to { background-position:0 0; } }
  @keyframes fx-spark { 0% { opacity:0; } 6% { opacity:1; } 10% { opacity:.25; } 14% { opacity:1; } 22% { opacity:0; } 100% { opacity:0; } }

  .hero h1 .fx-water:hover {
    background-image:repeating-linear-gradient(90deg, var(--res-water-display) 0 .3em, color-mix(in srgb, var(--res-water-display) 45%, #fff) .4em,
      var(--res-water-display) .5em .6em);
    background-size:1.2em 100%; animation:fx-flow .9s linear infinite; }
  .hero h1 .fx-water::after { left:.04em; right:.04em; bottom:-.06em; height:.12em; background:var(--res-water-display);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Cpath d='M0 3Q5 0 10 3T20 3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / .42em 100% repeat-x;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Cpath d='M0 3Q5 0 10 3T20 3' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / .42em 100% repeat-x;
    transition:opacity 200ms ease; }
  .hero h1 .fx-water:hover::after { opacity:.85; animation:fx-wave 1s linear infinite; }
  @keyframes fx-flow { from { background-position:0 0; } to { background-position:1.2em 0; } }
  @keyframes fx-wave { from { -webkit-mask-position:0 0; mask-position:0 0; } to { -webkit-mask-position:.42em 0; mask-position:.42em 0; } }

  .hero h1 .fx-heat:hover {
    background-image:repeating-linear-gradient(0deg, var(--res-heat) 0 .28em, color-mix(in srgb, var(--res-heat) 50%, #f6b73c) .42em,
      var(--res-heat) .56em .7em);
    background-size:100% 1.4em; animation:fx-rise 1.3s linear infinite; }
  .hero h1 .fx-heat:hover { filter:url(#fx-haze); }
  @keyframes fx-rise { from { background-position:0 0; } to { background-position:0 -1.4em; } }

  @media (prefers-reduced-motion: reduce) {
    .hero h1 .fx:hover { color:inherit; background:none; animation:none; filter:none; }
    .hero h1 .fx-power:hover { color:var(--res-power); } .hero h1 .fx-water:hover { color:var(--res-water-display); } .hero h1 .fx-heat:hover { color:var(--res-heat); }
    .hero h1 .fx:hover::before, .hero h1 .fx:hover::after { animation:none; opacity:0; } }
  .hero-lead { font-size:17px; line-height:1.6; color:var(--muted); max-width:42ch; }
  .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
  @media (max-width:900px) { .hero { padding-block:48px 0; } .hero-head, .hero-side { grid-column:1 / -1; } }

  /* Ключевые цифры — карточки: мини-схема по смыслу цифры, число основным шрифтом, подпись.
     Схемы рисуются токенами (цвета ресурсов, фирменные), работают в обеих темах. */
  .specs { margin-top:52px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
  .spec { display:flex; flex-direction:column; gap:10px; min-width:0; padding:18px 18px 20px; background:var(--bg);
    border:1px solid var(--line); border-top:2px solid var(--tx); transition:border-color 160ms ease; }
  .spec:hover { border-color:var(--line-strong); border-top-color:var(--brand-blue); }
  .spec-viz { height:30px; display:flex; align-items:center; color:var(--muted); }
  .spec-viz svg { height:30px; width:auto; max-width:100%; display:block; overflow:visible; }
  .spec b { font:800 clamp(30px,2.8vw,40px)/1 var(--f-body); letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-top:4px; }
  .spec b small { font-size:.42em; font-weight:600; color:var(--muted); margin-left:5px; letter-spacing:0; }
  .spec span { font-size:13.5px; line-height:1.45; color:var(--muted); }
  .sv-power { color:var(--res-power); } .sv-water { color:var(--res-water-display); } .sv-heat { color:var(--res-heat); }
  @media (max-width:900px) { .specs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:40px; }
    .spec { padding:16px 14px 18px; } .spec:last-child { grid-column:1 / -1; } }

  /* Кадр кабинета в «окне браузера»; --ar обрезает пустой низ кадра */
  .screen { margin:48px 0 0; border:1px solid var(--line-strong); border-bottom:none; background:var(--bg-alt); }
  .screen-bar { display:flex; align-items:center; gap:14px; padding:10px 14px; border-bottom:1px solid var(--line); }
  .dots { display:flex; gap:6px; } .dots i { width:9px; height:9px; border-radius:50%; background:var(--line-strong); display:block; }
  .url { font:500 12.5px/1 var(--f-mono); color:var(--muted); background:var(--bg); border:1px solid var(--line); padding:6px 12px; border-radius:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .screen-img { position:relative; overflow:hidden; background:#fff; aspect-ratio:var(--ar); max-width:100%; }
  .screen-img img { display:block; width:100%; height:100%; object-fit:cover; object-position:top left; filter:var(--shot-filter); }
  /* Таблица продолжается за краем кадра — мягкое затухание, чтобы обрез читался как фрагмент, а не ошибка */
  .screen-img.cut::after { content:""; position:absolute; inset:auto 0 0; height:22%; background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; }
  .section.alt .screen-img.cut::after { background:linear-gradient(to bottom, transparent, var(--bg-alt)); }
  .screen-img .hide { position:absolute; background:rgba(255,255,255,.35); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border-radius:2px; }
  .screen-cap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:12px 0; font:500 12px/1.4 var(--f-mono); color:var(--muted); }

  /* ── Секции ── */
  .section { padding-block:76px; border-top:1px solid var(--line); }
  .section.alt { background:var(--bg-alt); }
  .sec-head { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; margin-bottom:40px; }
  .sec-head .label { grid-column:1 / span 3; padding-top:10px; }
  .sec-head h2 { grid-column:4 / span 7; font:700 clamp(28px,3.4vw,44px)/1.08 var(--f-body); letter-spacing:-.025em; }
  .sec-head p { grid-column:4 / span 6; color:var(--muted); font-size:16.5px; max-width:60ch; }
  @media (max-width:900px) { .section { padding-block:52px; } .sec-head { margin-bottom:32px; gap:14px; } .sec-head > * { grid-column:1 / -1 !important; } .sec-head .label { padding-top:0; } }

  /* Ресурсы */
  .resources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1.5px solid var(--tx); }
  .resource { padding:28px 28px 32px 0; display:flex; flex-direction:column; gap:18px; min-width:0; }
  .resource + .resource { padding-left:28px; border-left:1px solid var(--line); }
  .res-tag { display:flex; align-items:center; gap:10px; font:700 13px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--c); }
  .res-tag svg { width:20px; height:20px; }
  .resource h3 { font:700 22px/1.2 var(--f-body); letter-spacing:-.01em; }
  .resource .src { font:500 13px/1.5 var(--f-mono); color:var(--muted); padding-block:12px; border-block:1px solid var(--line); }
  .resource ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:1.5; }
  .resource li { padding-left:18px; position:relative; }
  .resource li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:1.5px; background:var(--c); }
  .resource .units { margin-top:auto; padding-top:8px; font:500 13px/1 var(--f-mono); color:var(--c); }
  .r-power { --c:var(--res-power); } .r-water { --c:var(--res-water); } .r-heat { --c:var(--res-heat); }
  @media (max-width:900px) { .resources { grid-template-columns:1fr; } .resource, .resource + .resource { padding:28px 0; border-left:none; border-bottom:1px solid var(--line); } }

  /* Схема 01–04 */
  .flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; margin:0; padding:0; }
  .step { position:relative; padding:0 28px 0 0; display:flex; flex-direction:column; gap:14px; min-width:0; }
  .step-top { display:flex; align-items:center; height:44px; }
  .step-n { font:600 13px/1 var(--f-mono); width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--tx); background:var(--bg-alt); flex:none; }
  .step-line { flex:1; height:1.5px; background:var(--line-strong); position:relative; overflow:hidden; }
  .step-line::after { content:""; position:absolute; inset:0; width:30%; background:var(--brand-blue); animation:pulse 2.8s cubic-bezier(.4,0,.2,1) infinite; }
  .step:nth-child(2) .step-line::after { animation-delay:.7s; } .step:nth-child(3) .step-line::after { animation-delay:1.4s; }
  @keyframes pulse { from { transform:translateX(-100%); } to { transform:translateX(340%); } }
  .step:last-child .step-line { display:none; }
  .step h3 { font:700 19px/1.25 var(--f-body); margin-top:6px; }
  .step .what { font:500 12.5px/1.5 var(--f-mono); color:var(--muted); }
  .step p { font-size:15px; line-height:1.55; color:var(--muted); }
  @media (max-width:900px) { .flow { grid-template-columns:1fr; }
    .step { padding:0 0 28px 64px; } .step-top { position:absolute; left:0; top:0; flex-direction:column; height:100%; width:44px; }
    .step-line { width:1.5px; height:auto; flex:1; } .step-line::after { display:none; } .step h3 { margin-top:8px; } }
  @media (prefers-reduced-motion: reduce) { .step-line::after { animation:none; display:none; } }

  /* Разделы кабинета: текст слева (липкий), кадр справа */
  .feat { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; padding-block:40px; border-top:1px solid var(--line); }
  .feat:first-child { border-top:1.5px solid var(--tx); }
  .feat-text { grid-column:1 / span 4; display:flex; flex-direction:column; gap:14px; min-width:0; position:sticky; top:calc(env(safe-area-inset-top,0px) + 96px); align-self:start; }
  .feat h3 { display:flex; align-items:center; gap:12px; font:700 26px/1.15 var(--f-body); letter-spacing:-.015em; }
  .feat h3 svg { width:24px; height:24px; flex:none; color:var(--brand-blue); }
  .feat p { font-size:15.5px; line-height:1.55; color:var(--muted); }
  .feat ul { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14.5px; line-height:1.5; }
  .feat li { padding-left:18px; position:relative; }
  .feat li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:1.5px; background:var(--brand-blue); }
  .feat-shot { grid-column:5 / -1; margin:0; border-bottom:1px solid var(--line-strong); min-width:0; }
  @media (max-width:900px) { .hero-grid, .sec-head, .qa { grid-template-columns:minmax(0,1fr); } .feat { grid-template-columns:minmax(0,1fr); gap:20px; padding-block:32px; } .feat-text, .feat-shot { grid-column:1 / -1; } .feat-text { position:static; } .feat h3 { font-size:22px; } }

  /* Вкладки карточки электросчётчика (раздел «Приборы учёта»): полоса вкладок как в кабинете → кадр → описание.
     Высота кадра одна у всех вкладок — при переключении страница не прыгает. */
  .mtabs { grid-column:5 / -1; min-width:0; }
  .mtabs-bar { display:flex; gap:2px; box-shadow:inset 0 -1px 0 var(--line); margin-bottom:14px; overflow-x:auto; scrollbar-width:none; }
  .mtabs-bar::-webkit-scrollbar { display:none; }
  .mtabs-bar button { flex:none; padding:10px 14px; background:none; border:none; border-bottom:2px solid transparent;
    font:600 14.5px/1.2 var(--f-body); color:var(--muted); cursor:pointer; white-space:nowrap; transition:color 150ms, border-color 150ms; }
  .mtabs-bar button:hover { color:var(--tx); }
  .mtabs-bar button[aria-selected="true"] { color:var(--tx); border-bottom-color:var(--brand-blue); }
  .mtabs-bar button:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
  .mtabs .screen { margin:0; border-bottom:1px solid var(--line-strong); }
  .mtab-desc { margin-top:14px; font-size:15px; line-height:1.6; color:var(--muted); max-width:72ch; }
  .mtab-desc b { color:var(--tx); font-weight:700; }
  @media (max-width:900px) { .mtabs { grid-column:1 / -1; } .mtabs-bar button { padding:10px 11px; font-size:14px; } }

  /* Стоимость: цифры слева, состав абонентской платы справа */
  .price-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; border-top:1.5px solid var(--tx); padding-top:32px; }
  .price-nums { grid-column:1 / span 5; display:flex; flex-direction:column; gap:20px; align-items:flex-start; min-width:0; }
  .pn { display:flex; flex-direction:column; gap:6px; padding-bottom:18px; border-bottom:1px solid var(--line); align-self:stretch; }
  .pn b { font:800 clamp(36px,3.8vw,52px)/1 var(--f-body); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
  .pn b small { font-size:.38em; font-weight:600; color:var(--muted); margin-left:6px; letter-spacing:0; }
  .pn span { font-size:15px; color:var(--muted); }
  .price-example { font-size:15px; color:var(--muted); max-width:40ch; }
  .price-example b { color:var(--tx); font-weight:600; }
  .price-list { grid-column:7 / -1; display:flex; flex-direction:column; gap:14px; min-width:0; }
  .price-list ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15.5px; line-height:1.5; }
  .price-list li { padding-left:26px; position:relative; }
  .price-list li::before { content:""; position:absolute; left:2px; top:.38em; width:12px; height:7px; border-left:2px solid var(--brand-blue); border-bottom:2px solid var(--brand-blue); transform:rotate(-45deg); }
  .price-list .price-extra-label { margin-top:14px; }
  .price-list .price-extra li { color:var(--muted); font-size:14.5px; }
  .price-list .price-extra li::before { width:10px; height:0; border-left:none; border-bottom:1.5px solid var(--muted); transform:none; top:.75em; }
  @media (max-width:900px) { .price-grid { grid-template-columns:minmax(0,1fr); gap:36px; } .price-nums, .price-list { grid-column:1 / -1; } }

  /* Вопросы и ответы: вопрос слева, ответ справа, всё видно сразу (без раскрывашек — так же индексируется) */
  .faq { border-top:1.5px solid var(--tx); }
  .qa { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; padding-block:24px; border-bottom:1px solid var(--line); }
  .qa h3 { grid-column:1 / span 5; font:700 18px/1.35 var(--f-body); letter-spacing:-.005em; min-width:0; }
  .qa p { grid-column:6 / -1; color:var(--muted); font-size:15.5px; line-height:1.6; max-width:62ch; min-width:0; }
  @media (max-width:900px) { .qa { gap:8px; padding-block:20px; } .qa h3, .qa p { grid-column:1 / -1; } .qa h3 { font-size:17px; } }

  /* Контакты и заявка (поля как у обратной связи в login.html → POST /api/feedback) */
  .contact-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; border-top:1.5px solid var(--tx); padding-top:32px; }
  .contact-info { grid-column:1 / span 5; margin:0; display:flex; flex-direction:column; gap:24px; min-width:0; }
  .ci { display:flex; flex-direction:column; gap:8px; padding-bottom:20px; border-bottom:1px solid var(--line); }
  .ci:last-child { border-bottom:none; }
  .ci dd { margin:0; font-size:16px; }
  .ci-big { font-size:clamp(20px,2.2vw,26px) !important; font-weight:500; letter-spacing:-.01em; overflow-wrap:anywhere; }
  .ci-big a:hover { color:var(--accent); }
  .fb-form { grid-column:7 / -1; display:flex; flex-direction:column; gap:18px; min-width:0; }
  .fb-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .fb-form label { display:block; font:600 11.5px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
  .fb-form input, .fb-form textarea { width:100%; background:var(--bg); border:1px solid var(--line-strong); color:var(--tx); border-radius:2px; padding:12px 14px; font:15px/1.4 var(--f-body); }
  .fb-form textarea { min-height:132px; resize:vertical; }
  .fb-form input:focus-visible, .fb-form textarea:focus-visible { outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); }
  .fb-hint { font-size:13px; color:var(--muted); margin-top:8px; }
  .fb-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  /* Согласие на обработку ПДн (152-ФЗ): галочка не проставлена заранее, без неё форма не уходит */
  .fb-form label.fb-consent { display:flex; align-items:flex-start; gap:12px; margin:0; font:400 14px/1.5 var(--f-body); letter-spacing:0; text-transform:none; color:var(--muted); cursor:pointer; }
  .fb-consent input { width:18px; height:18px; flex:none; margin:2px 0 0; padding:0; accent-color:var(--accent); cursor:pointer; }
  .fb-consent a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
  .fb-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .fb-msg { font-size:14px; color:var(--err); }
  .fb-done { grid-column:7 / -1; display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding-top:8px; }
  .fb-done b { font:700 24px/1.2 var(--f-body); }
  .fb-done p { color:var(--muted); }
  @media (max-width:900px) { .contact-grid { grid-template-columns:minmax(0,1fr); gap:40px; } .contact-info, .fb-form, .fb-done { grid-column:1 / -1; } }
  @media (max-width:520px) { .fb-pair { grid-template-columns:1fr; } }

  /* ── Подвал ── */
  .stripe { display:grid; grid-template-columns:repeat(4,1fr); height:6px; }
  .stripe i:nth-child(1){background:var(--brand-blue)} .stripe i:nth-child(2){background:var(--brand-sky)}
  .stripe i:nth-child(3){background:var(--brand-teal)} .stripe i:nth-child(4){background:var(--brand-lime)}
  .foot { padding-block:56px 32px; background:var(--bg); }
  .foot-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; }
  .foot-brand { grid-column:1 / span 4; display:flex; flex-direction:column; gap:20px; }
  .foot-brand p { font-size:14px; color:var(--muted); max-width:34ch; }
  .foot-col { grid-column:span 2; display:flex; flex-direction:column; gap:12px; font-size:14.5px; min-width:0; }
  .foot-col.wide { grid-column:span 4; }
  .foot-col .label { margin-bottom:6px; }
  .foot-col a, .foot-col button.linklike { color:var(--muted); } .foot-col a:hover, .foot-col button.linklike:hover { color:var(--tx); text-decoration:underline; text-underline-offset:3px; }
  .foot-col .note { color:var(--muted); font-size:14px; }
  button.linklike { background:none; border:none; padding:0; font:inherit; text-align:left; cursor:pointer; }
  .req { font:500 13px/1.7 var(--f-mono); color:var(--muted); font-variant-numeric:tabular-nums; }
  .req a:hover { color:var(--tx); }
  .foot-bottom a { text-decoration:underline; text-underline-offset:3px; } .foot-bottom a:hover { color:var(--tx); }
  .foot-bottom { margin-top:48px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font:500 12.5px/1.5 var(--f-mono); color:var(--muted); }
  @media (max-width:900px) { .foot-brand, .foot-col.wide { grid-column:1 / -1; } .foot-col { grid-column:span 6; } }

  /* ── Просмотр снимка на весь экран: клик по кадру → целиком, без обрезки; ←/→ листают, Esc закрывает.
     Полноразмерные кадры (2400px) — /landing/shots/full/, грузятся только по клику. ── */
  .screen-img { cursor:zoom-in; }
  .screen-img::before { content:""; position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:2px;
    background:rgba(17,19,21,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
    opacity:0; transition:opacity 150ms; pointer-events:none; }
  .screen-img:hover::before, .screen-img:focus-visible::before { opacity:1; }
  .screen-img:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
  .lb { position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    padding:max(56px, env(safe-area-inset-top,0px)) max(64px, env(safe-area-inset-right,0px)) max(24px, env(safe-area-inset-bottom,0px)) max(64px, env(safe-area-inset-left,0px));
    background:rgba(10,12,14,.97); opacity:0; visibility:hidden; transition:opacity 180ms ease, visibility 0s linear 180ms; }
  .lb.open { opacity:1; visibility:visible; transition:opacity 180ms ease; }
  .lb img { display:block; max-width:100%; max-height:calc(100vh - 130px); width:auto; height:auto; object-fit:contain; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.12); cursor:zoom-out; }
  .lb-cap { color:#c9cfd5; font:500 13px/1.4 var(--f-mono); text-align:center; max-width:90ch; }
  .lb-btn { position:absolute; width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.22);
    border-radius:2px; background:rgba(255,255,255,.06); color:#fff; cursor:pointer; transition:background 150ms, border-color 150ms; }
  .lb-btn:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); }
  .lb-btn:focus-visible { outline:2px solid #a2d9f7; outline-offset:2px; }
  .lb-btn svg { width:18px; height:18px; }
  .lb-close { top:max(12px, env(safe-area-inset-top,0px)); right:max(12px, env(safe-area-inset-right,0px)); }
  .lb-prev { left:max(10px, env(safe-area-inset-left,0px)); top:50%; transform:translateY(-50%); }
  .lb-next { right:max(10px, env(safe-area-inset-right,0px)); top:50%; transform:translateY(-50%); }
  .lb-count { position:absolute; top:max(22px, env(safe-area-inset-top,0px)); left:max(16px, env(safe-area-inset-left,0px)); color:#9aa2aa; font:500 12.5px/1 var(--f-mono); }
  @media (max-width:700px) { .lb { padding-left:max(12px, env(safe-area-inset-left,0px)); padding-right:max(12px, env(safe-area-inset-right,0px)); padding-bottom:max(76px, env(safe-area-inset-bottom,0px)); }
    .lb-prev, .lb-next { top:auto; bottom:max(16px, env(safe-area-inset-bottom,0px)); transform:none; }
    .lb-prev { left:calc(50% - 56px); } .lb-next { right:calc(50% - 56px); } }

  /* ── Окно входа: рамка один в один как login.html (её же видно после выхода из кабинета) ── */
  .modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
    padding:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(16px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
    background:var(--shade); opacity:0; visibility:hidden; transition:opacity 180ms ease, visibility 0s linear 180ms; }
  .modal.open { opacity:1; visibility:visible; transition:opacity 180ms ease; }
  .box { position:relative; width:100%; max-width:340px; padding:30px; background:var(--bg); color:var(--tx); border:1px solid var(--line);
    font:14px/1.5 var(--f-body); font-feature-settings:"tnum" 1; transform:translateY(8px); transition:transform 220ms cubic-bezier(.23,1,.32,1); }
  .modal.open .box { transform:none; }
  .box .lbrand { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
  .box .lbrand-mark { width:min(92px, 22vw); height:auto; flex:none; display:block; }
  .box .lbrand-mark polygon { stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
  .box .lbrand-text { min-width:0; }
  .box .lbrand-kind { font:500 12px/1 var(--f-mark); color:var(--tx); margin:0 0 4px; }
  .box .lbrand-name { font:800 32px/1 var(--f-mark); letter-spacing:-.025em; margin:0; }
  .box .lbrand-bar { height:4px; margin:6px 0; box-shadow:inset 0 0 0 1px var(--line);
    background:linear-gradient(90deg, var(--brand-blue) 0 25%, var(--brand-sky) 25% 50%, var(--brand-teal) 50% 75%, var(--brand-lime) 75% 100%); }
  .box .lbrand-desc { font:600 10px/1 var(--f-mark); text-transform:uppercase; letter-spacing:.14em; color:var(--muted); white-space:nowrap; }
  .box label { display:block; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; font-weight:700; }
  .box input { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--tx); padding:11px; font:14px var(--f-body); margin-bottom:14px; }
  .box input:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
  .box .submit { width:100%; padding:12px; border:none; font:600 14px var(--f-body); color:#fff; background:#0077b3; cursor:pointer; transition:filter 150ms ease, transform 160ms cubic-bezier(.23,1,.32,1); }
  .box .submit:hover:not(:disabled) { filter:brightness(1.1); }
  .box .submit:active:not(:disabled) { transform:scale(.97); }
  .box .submit:disabled { opacity:.5; cursor:not-allowed; }
  .box .err { color:var(--err); font-size:13px; min-height:18px; margin-top:10px; text-align:left; }
  .box .fb-link { display:block; margin:2px auto 0; padding:4px 6px; background:none; border:none; color:var(--accent); font:600 13px var(--f-body); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .box .fb-link:hover { color:var(--tx); }
  .box .lfoot { margin-top:16px; text-align:center; font-size:11px; letter-spacing:.06em; color:var(--muted); }
  .box .ltool { position:absolute; top:12px; width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center;
    background:var(--bg); color:var(--muted); border:1px solid var(--line); cursor:pointer; }
  .box .ltool:hover { color:var(--tx); border-color:var(--accent); }
  .box .ltool svg { width:15px; height:15px; }
  .box .lclose { right:12px; }

/* ══ Внутренние страницы (/uchet-arendatorov, /oborudovanie, /dokumentaciya) — те же токены и сетка ══ */
.crumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font:500 12.5px/1.4 var(--f-mono); color:var(--muted); margin-bottom:26px; }
.crumbs a { color:var(--muted); } .crumbs a:hover { color:var(--tx); text-decoration:underline; text-underline-offset:3px; }
.crumbs span[aria-hidden] { opacity:.6; }
.page-hero { padding-block:48px 0; }
.page-hero h1 { font:800 clamp(34px,4.8vw,62px)/1.02 var(--f-body); letter-spacing:-.03em; margin-top:18px; max-width:22ch; }
.page-hero .page-lead { font-size:18px; line-height:1.6; color:var(--muted); max-width:58ch; margin-top:22px; }
.page-hero .hero-ctas { margin-top:28px; }
.page-hero .screen { margin-top:44px; }
.more-link { display:inline-flex; align-items:center; gap:8px; margin-top:28px; font-weight:600; color:var(--accent); }
.more-link:hover { text-decoration:underline; text-underline-offset:3px; }
.more-link svg { width:16px; height:16px; transition:transform 160ms ease; } .more-link:hover svg { transform:translateX(3px); }

/* Сравнение «без системы / с системой» */
.compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1.5px solid var(--tx); }
.compare > div { padding:28px 28px 30px 0; min-width:0; }
.compare > div + div { padding-left:28px; border-left:1px solid var(--line); }
.compare h3 { font:700 20px/1.25 var(--f-body); margin-bottom:16px; }
.compare ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:15.5px; line-height:1.5; }
.compare li { padding-left:26px; position:relative; }
.compare .was li { color:var(--muted); }
.compare .was li::before { content:""; position:absolute; left:2px; top:.72em; width:12px; height:1.5px; background:var(--muted); }
.compare .now li::before { content:""; position:absolute; left:2px; top:.38em; width:12px; height:7px; border-left:2px solid var(--brand-blue); border-bottom:2px solid var(--brand-blue); transform:rotate(-45deg); }
@media (max-width:900px) { .compare { grid-template-columns:minmax(0,1fr); } .compare > div, .compare > div + div { padding:24px 0; border-left:none; } .compare > div + div { border-top:1px solid var(--line); } }

/* Таблицы (оборудование, состав данных) */
.table-wrap { overflow-x:auto; border-top:1.5px solid var(--tx); }
.data-table { width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; min-width:560px; }
.data-table th, .data-table td { text-align:left; vertical-align:top; padding:14px 16px 14px 0; border-bottom:1px solid var(--line); }
.data-table th { font:600 11px/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.data-table td:first-child { font-weight:700; white-space:nowrap; }
.data-table td .muted { color:var(--muted); }
.tag { display:inline-block; font:600 11px/1 var(--f-mono); letter-spacing:.06em; padding:4px 7px; border:1px solid var(--line-strong); color:var(--muted); border-radius:2px; vertical-align:2px; margin-left:6px; white-space:nowrap; }
.tag.ok { border-color:var(--brand-blue); color:var(--accent); }

/* Документация: оглавление слева (липкое), текст справа */
.doc-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; }
.toc { grid-column:1 / span 3; position:sticky; top:calc(env(safe-area-inset-top,0px) + 96px); align-self:start; display:flex; flex-direction:column; gap:2px; border-top:1.5px solid var(--tx); padding-top:14px; }
.toc a { font-size:14.5px; color:var(--muted); padding:6px 0; } .toc a:hover { color:var(--tx); }
.prose { grid-column:4 / -1; min-width:0; max-width:76ch; }
.prose section { padding-block:6px 30px; border-top:1px solid var(--line); scroll-margin-top:96px; }
.prose section:first-child { border-top:1.5px solid var(--tx); }
.prose h2 { font:700 clamp(22px,2.4vw,28px)/1.2 var(--f-body); letter-spacing:-.015em; margin:22px 0 14px; }
.prose h3 { font:700 17px/1.3 var(--f-body); margin:20px 0 8px; }
.prose p { font-size:16px; line-height:1.65; color:var(--tx); margin:0 0 12px; }
.prose p.muted, .prose .muted { color:var(--muted); }
.prose ul, .prose ol { margin:0 0 14px; padding-left:22px; font-size:16px; line-height:1.6; }
.prose li { margin:6px 0; }
.prose .req { margin-top:8px; }
@media (max-width:900px) { .doc-grid { grid-template-columns:minmax(0,1fr); } .toc { position:static; grid-column:1 / -1; } .prose { grid-column:1 / -1; } }

/* Полоса-призыв в конце страницы */
.cta-band { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end; border-top:1.5px solid var(--tx); padding-top:32px; }
.cta-band h2 { grid-column:1 / span 7; font:700 clamp(26px,3vw,38px)/1.1 var(--f-body); letter-spacing:-.025em; }
.cta-band p { grid-column:1 / span 7; color:var(--muted); font-size:16px; margin-top:-8px; }
.cta-band .hero-ctas { grid-column:9 / -1; justify-content:flex-end; grid-row:1 / span 2; }
@media (max-width:900px) { .cta-band { grid-template-columns:minmax(0,1fr); } .cta-band h2, .cta-band p, .cta-band .hero-ctas { grid-column:1 / -1; grid-row:auto; justify-content:flex-start; } }

/* Типы объектов — плитки-метки */
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chips span { font:600 14.5px/1 var(--f-body); padding:12px 16px; border:1px solid var(--line); background:var(--bg); }