/* ============================================================
   Электрохаб — фирменные стили по брендбуку 2026
   Палитра: тёмно-синий #02142B, светло-синий #063D83, белый #F0F0F0
   Шрифт: Montserrat (AKONY убран 16.07 — не используется с 05.07)
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.00ab09ef1497.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.6b7768ff3252.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.6cafc8f273bc.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.bb8879980a91.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --dark: #02142B;
  --blue: #063D83;
  --blue-hover: #0a4da0;
  /* хвоя (иконки выгоды) и светлый голубой (обводки на тёмном): раньше на эти
     токены ссылались, не определяя их — глифы падали в currentColor (ТОКЕНЫ, 19.08) */
  --green: #1F5F4A;
  --blue-lt: #8AB9F1;
  /* мелкие подписи: 4.76:1 на #F0F0F0, 5.4:1 на белом (КОНТРАСТ, 19.08) */
  --text-soft: #5A6B84;
  --light: #F0F0F0;
  --white: #FFFFFF;
  --text: #02142B;
  /* вторичный текст: тёмный с холодным оттенком — иерархия сохраняется, читаемость выше */
  --text-muted: #2e3a4c;
  --radius: 20px;
  --radius-sm: 12px;
  /* AKONY не используется на сайте (решение 05.07.2026) */
  --font-accent: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* полоса прокрутки не влияет на центровку — меню не «прыгает» между страницами */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--light);
  /* короткие страницы: футер прижат к низу экрана */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* широкие экраны от 1700 px: контейнер 1560; на 2K и 4K эта же раскладка увеличивается масштабом (ниже) */
@media (min-width: 1700px) {
  body { font-size: 17px; }
  .container { max-width: 1560px; }
  .ymap { height: 460px; }
  .ymap-large { height: 640px; }
  .section-text .richtext, .news-article { max-width: 880px; }
}
/* А «Масштаб 1,2» (борд «Сайт на 2K и 4K», 06.10.2026): от 2400 px сайт строится как раскладка 1700–2399 px
   и увеличивается целиком — текст, меню, кнопки, заголовки и отступы растут в одной пропорции (на 2K ×1,2:
   текст 16 → 19 px, заголовок раздела 44 → 53; 4K при 100 % ×1,8 — выглядит как 2K). Шаги идут и по высоте:
   широкий невысокий экран (3440 × 1440) масштабируется как 2K, 2560 × 1080 — без масштаба. Медиазапросы читают
   настоящий экран, поэтому отдельных правил «от 2400 px» для контейнера и шрифта нет — их заменил масштаб.
   Внутри масштаба не опираться на vw для позиций (vw не учитывает zoom) — брать % от окна. */
@media (min-width: 2400px) and (min-height: 1200px) { :root { zoom: 1.125; } }
@media (min-width: 2560px) and (min-height: 1300px) { :root { zoom: 1.2; } }
@media (min-width: 2880px) and (min-height: 1600px) { :root { zoom: 1.35; } }
@media (min-width: 3200px) and (min-height: 1800px) { :root { zoom: 1.5; } }
@media (min-width: 3840px) and (min-height: 2000px) { :root { zoom: 1.8; } }
@media (min-width: 5120px) and (min-height: 2800px) { :root { zoom: 2.4; } }

.section { padding: 64px 0; }
/* Паттерны по ролям (тихие тон-в-тон версии утверждённых мотивов):
   счётчики — П2 «Полосы», контентные тёмные секции — П151/163 «Плетение»,
   титулы страниц — П71 «Пины», калькулятор — П142 «Вертикаль»,
   контакты — П110 «Плазма» (свечение), футер — П148 «Констелляция».
   Смежные тёмные секции разделяет тонкий светлый шов. */
.section-dark {
  /* сплошной тёмный (плетение удалено 06.07); узор — только модификаторами */
  background: var(--dark);
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.section-dark .section-title { color: var(--white); }
/* Сохранённые фоны Ф-библиотеки (применять к любой секции, не только футеру):
   тёмные — вместе с .section-dark, светлый — к обычной .section */
.bg-speedometer { /* Ф31: веер лучей из нижнего угла, чистый CSS */
  background-image: repeating-conic-gradient(from 285deg at -4% 106%, rgba(15, 58, 110, 0.55) 0 1.6deg, transparent 1.6deg 11deg);
}
.bg-chevrons { /* Ф39: синие шевроны на светлом */
  background-image: url("../img/pattern-chevrons-light.75fbe9ac8a47.svg");
}
.bg-searchlight { /* Ф46: два диагональных луча света (тёмные секции) */
  background-image: linear-gradient(115deg, transparent 0 16%, rgba(255, 255, 255, 0.05) 16% 30%, transparent 30% 54%, rgba(255, 255, 255, 0.04) 54% 63%, transparent 63%);
}
.bg-searchlight-light { /* Ф86: лучи на белом (светлые секции) */
  background-image: linear-gradient(115deg, transparent 0 16%, rgba(6, 61, 131, 0.08) 16% 30%, transparent 30% 54%, rgba(6, 61, 131, 0.06) 54% 63%, transparent 63%);
}
.bg-bolt-giant { /* Ф157: гигантская молния-силуэт у правого края (тёмные секции) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="%230a2140"/></svg>');
  background-repeat: no-repeat;
  background-position: 110% 46%;
  background-size: auto 230%;
}
.bg-bolt-giant-light { /* Ф193: гигантская молния на белом (светлые секции) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="%23063D83" opacity=".07"/></svg>');
  background-repeat: no-repeat;
  background-position: 110% 46%;
  background-size: auto 230%;
}
.bg-bolt-poster { /* Ф250: почти белая молния — постерный контраст (тёмные секции) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="%23F0F0F0" opacity=".92"/></svg>');
  background-repeat: no-repeat;
  background-position: 106% 50%;
  background-size: auto 150%;
}
.bg-bolt-poster-light { /* Ф252: инверсия Ф250 — чернильная молния на светлом */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="%2302142B" opacity=".9"/></svg>');
  background-repeat: no-repeat;
  background-position: 106% 50%;
  background-size: auto 150%;
}
.bg-wedge-light { /* Ф278: тёмный клин на светлой секции, белый знак на клине */
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="%23F0F0F0" opacity=".92"/></svg>'),
    linear-gradient(64deg, transparent 0 55%, #101216 55%);
  background-repeat: no-repeat, no-repeat;
  background-position: 88% 62%, center;
  background-size: auto 74%, cover;
}
.bg-speedometer-light { /* Ф289: спидометр-негатив — лучи синим по белому */
  background-image: repeating-conic-gradient(from 285deg at -4% 106%, rgba(6, 61, 131, 0.14) 0 1.6deg, transparent 1.6deg 11deg);
}
/* Ф46 «Прожекторы» на главной: Сервис 24/7 и Новости */
.page-home .features-section,
.page-home .service-comfort,
.page-home .ti-dark {
  background-image: linear-gradient(115deg, transparent 0 16%, rgba(255, 255, 255, 0.05) 16% 30%, transparent 30% 54%, rgba(255, 255, 255, 0.04) 54% 63%, transparent 63%);
}
/* на тёмной секции ссылка «Все новости» — светлым */
.section-dark .section-more { color: #fff; }
.bg-brackets-orange { /* Ф291: два оранжевых уголка кадрируют тёмную секцию */
  background-image:
    linear-gradient(#FF6B4A 0 4px, transparent 4px),
    linear-gradient(90deg, #FF6B4A 0 4px, transparent 4px),
    linear-gradient(0deg, transparent calc(100% - 4px), #FF6B4A calc(100% - 4px)),
    linear-gradient(90deg, transparent calc(100% - 4px), #FF6B4A calc(100% - 4px));
  background-size: 12% 12%, 12% 12%, 12% 12%, 12% 12%;
  background-position: 8% 12%, 8% 12%, 92% 88%, 92% 88%;
  background-repeat: no-repeat;
}

.section-title {
  /* П1: обычный регистр, плотный Montserrat 800 — капс только малым лейблам */
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.15;
  color: var(--dark);
  margin-bottom: 32px;
  letter-spacing: -0.015em;
}
.section-subtitle { color: var(--text-muted); margin-bottom: 24px; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  /* hairline вместо тени — дороже и чище */
  border: 1px solid #e5eaf1;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base) var(--ease-out), transform var(--t-quick) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
/* К1.4 «Ритм»: CTA чернильные, синий остаётся ссылкам и мелочам */
.btn-primary { background: var(--dark); color: var(--white); }
.btn-primary:hover { background: var(--ink-hover); }
.btn-light { background: var(--white); color: var(--dark); }
.btn-light:hover { background: var(--light); }

/* ---------- Шапка ---------- */
/* a11y: ссылка «к содержимому» — видна только при фокусе с клавиатуры */
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 200; transform: translateY(-72px);
  background: var(--dark); color: #fff; padding: 10px 16px;
  border-radius: var(--r-pill); font-weight: 700; text-decoration: none;
  transition: transform var(--t-base) var(--ease-out);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }
/* страховка от горизонтального распора длинными словами на узких экранах (ПЕРЕНОСЫ, 19.08) */
h1, h2, h3, .page-title { overflow-wrap: break-word; }
/* пилюля телефона в CTA офферов: на 320px номер обрезался white-space:nowrap */
@media (max-width: 480px) {
  .offer-cta-btns .offer-cta-phone, .offer-cta-btns .offer-cta-tg { white-space: normal; height: auto; min-height: 38px; padding: 8px 16px; }
}
/* ПАТРУЛЬ (19.08): пины карты теперь настоящие кнопки — сброс UA-стилей button */
button.ehm-pin, button.ehm-dot { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* живой регион успеха формы: ПУСТОЙ выпадает из грида .contact-inner (1fr 1fr) —
   иначе он занимал ячейку и сталкивал форму во вторую строку (ревью 19.08) */
.form-live:empty { display: none; }
.form-live:focus { outline: none; }
/* чипы удобств на мобиле: только иконки — подписи ломали ритм карточки (07.09).
   Название удобства остаётся в .hca-label для скринридеров и в data-tip. */
@media (max-width: 640px) {
  .hca-i::after, .hca-i::before { display: none; } /* тултипа на таче всё равно нет */
}
/* ---------- Шапка «жидкое стекло» (header-glass-board.html, выбор 25.09.2026) ----------
   Десктоп — 03·B: при скролле капсула сжимается и становится стеклом с линзой по кромке.
   Мобайл — 06·B: при скролле всегда одна и та же компактная капсула (значок, раздел,
   кольцо прогресса, «Меню»), в обе стороны прокрутки.
   Плавность (26.09.2026): высота шапки постоянна (84 / 66 px), а переход анимирует только
   transform и opacity — их считает компоновщик, основной поток и перерисовка не участвуют.
   Слои (стекло — не на самой sticky-шапке: backdrop-filter там ломает липкость в Chrome):
   .header-glass — тон, размытие, тень; .header-lens — линза (site.js, только Chromium);
   ::after — блик и световой кант. .is-glass и data-tone ставит site.js.
   Первый кадр (header-top-board.html, вариант 01, 26.09.2026): полосы больше нет — наверху
   та же капсула, чуть крупнее (--cap-top) и из плотных «чернил»; первый блок страницы
   продлён под шапку (см. #main ниже). Своя геометрия капсулы — верхняя, поэтому первый кадр
   верен ещё до site.js; при прокрутке стекло и кант сжимаются transform'ом до --cap
   (--sx/--sy считает site.js), линза всегда стоит в --cap. */
.site-header {
  --cw: 1280px;
  --cap: 12px max(12px, calc((100% - var(--cw)) / 2 - 4px));
  --cap-top: 10px max(8px, calc((100% - var(--cw)) / 2 - 24px));
  --h-fg: #fff; --h-dim: #9ba9b9; --h-line: #4b5056; --h-ic: rgba(255, 255, 255, 0.28);
  --h-ul: #c4d8f1; --h-chip: rgba(255, 255, 255, 0.14);
  --glass: rgba(11, 12, 15, 0.36); --rim: rgba(255, 255, 255, 0.55); --rim2: rgba(255, 255, 255, 0.2);
  --h-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  --h-prog: linear-gradient(90deg, #8fb8f2, #7fe3b6);
  /* одна кривая и длительность на всю геометрию — движение читается как один жест */
  --glass-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --glass-dur: 0.5s;
  /* цвет текста стартует мягко: полоса успевает раствориться раньше, чем текст потемнеет */
  --tone-ease: cubic-bezier(0.45, 0, 0.25, 1);
  --tone-dur: var(--t-move);
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  /* растянутая в полосе капсула не должна давать горизонтальную прокрутку; clip (не hidden)
     не создаёт контейнер прокрутки — липкость и тень/меню по вертикали сохраняются */
  overflow-x: clip;
}
@media (min-width: 1700px) { .site-header { --cw: 1560px; } }
.site-header::after, .header-glass, .header-lens {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}
/* капсула наверху: чернила почти без просвета — тёмная шапка над белым первым блоком */
.site-header:not(.is-glass) { --glass: rgba(11, 12, 15, 0.88); }
/* стекло и кант: наверху стоят в --cap-top, при прокрутке сжимаются к --cap */
.site-header::after, .header-glass {
  inset: var(--cap-top);
  transition: transform var(--glass-dur) var(--glass-ease), opacity var(--t-base) var(--ease-out);
}
.site-header.is-glass::after, .site-header.is-glass .header-glass {
  transform: scale(var(--sx, 1), var(--sy, 1));
}
/* линза нужна только капсуле при прокрутке — стоит сразу в её размере */
.header-lens {
  inset: var(--cap);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.site-header.is-glass.lens-on .header-lens { opacity: 1; transition: opacity var(--t-move) var(--ease-out); }
.header-glass {
  z-index: -3;
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(5.4px) saturate(1.9) brightness(1.05);
  backdrop-filter: blur(5.4px) saturate(1.9) brightness(1.05);
  box-shadow: var(--h-shadow);
  transition: transform var(--glass-dur) var(--glass-ease), opacity var(--t-base) var(--ease-out), background-color var(--tone-dur) var(--tone-ease), box-shadow var(--tone-dur) var(--tone-ease);
}
/* с линзой центр прозрачнее — край делает основную работу */
.eh-lens .header-glass {
  -webkit-backdrop-filter: blur(2.7px) saturate(1.9) brightness(1.05);
  backdrop-filter: blur(2.7px) saturate(1.9) brightness(1.05);
}
.header-lens { z-index: -2; }
.site-header::after {
  z-index: -1;
  background: radial-gradient(55% 200% at 14% -85%, rgba(255, 255, 255, 0.38), transparent 60%);
  box-shadow: inset 1.5px 1.5px 0 -0.5px var(--rim), inset -1px -1px 0 -0.5px var(--rim2),
    inset 0 0 18px rgba(255, 255, 255, 0.06);
}
.site-header.is-glass { pointer-events: none; }
.site-header.is-glass .header-inner > *, .site-header.is-glass .header-mini { pointer-events: auto; }
/* строка-капсула и затемнение меню — только в мобильной карточке */
.nav-top, .nav-scrim { display: none; }
/* светлое стекло над светлыми блоками */
.site-header.is-glass[data-tone="light"] {
  --h-fg: #101216; --h-dim: #3c434d; --h-line: rgba(16, 18, 22, 0.18); --h-ic: rgba(16, 18, 22, 0.22);
  --h-ul: #063D83; --h-chip: rgba(2, 20, 43, 0.07);
  --glass: rgba(255, 255, 255, 0.52); --rim: rgba(255, 255, 255, 0.95); --rim2: rgba(16, 18, 22, 0.08);
  --h-shadow: 0 18px 40px -20px rgba(2, 20, 43, 0.35);
}
/* под капсулой разный фон — плотнее стекло, контраст меню на обеих частях */
.site-header.is-glass.tone-mixed { --glass: rgba(11, 12, 15, 0.64); }
.site-header.is-glass.tone-mixed[data-tone="light"] { --glass: rgba(255, 255, 255, 0.8); }
/* тень текста для стекла над фото; на «чернилах» её не видно, поэтому она есть всегда —
   при переходе ничего не переключается скачком */
.site-header .header-inner, .site-header .header-mini { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.site-header.is-glass[data-tone="light"] .header-inner,
.site-header.is-glass[data-tone="light"] .header-mini { text-shadow: 0 1px 10px rgba(255, 255, 255, 0.6); }
/* Прогресс чтения — кант капсулы (header-progress-board.html, вариант 01, 29.09.2026): нижняя
   половина канта стекла, из левого скругления по низу капсулы в правое. Начало проявляется из угла
   (неподвижная маска коробки), кончик гаснет (маска окна едет вместе с ним). Прогресс — два
   transform навстречу (site.js): окно .hp-win сдвигается, кант .hp-rim внутри стоит на месте —
   перерисовки при прокрутке нет. Цвет один на тёмном и светлом стекле (решение владельца). */
.header-progress {
  position: absolute; z-index: 2; inset: var(--cap);
  clip-path: inset(50% 0 0 0);
  -webkit-mask: linear-gradient(90deg, transparent, #000 44px);
  mask: linear-gradient(90deg, transparent, #000 44px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-move) var(--ease-out);
}
.hp-win, .hp-rim { position: absolute; inset: 0; will-change: transform; }
.hp-win {
  overflow: hidden;
  transform: translateX(-100%);
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  mask: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
}
.hp-rim {
  border-radius: 999px; padding: 2px;
  background: var(--h-prog);
  transform: translateX(100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.site-header.is-glass .header-progress { opacity: 1; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 84px;
}
.logo { position: relative; display: flex; align-items: center; flex: none; }
.logo img { height: 60px; width: auto; max-width: none; transform-origin: 0 50%; transition: transform var(--glass-dur) var(--glass-ease), opacity var(--tone-dur) var(--tone-ease); }
.logo .logo-ink { position: absolute; left: 0; top: 0; opacity: 0; }
.site-header.is-glass[data-tone="light"] .logo img:not(.logo-ink) { opacity: 0; }
.site-header.is-glass[data-tone="light"] .logo .logo-ink { opacity: 1; }
.header-mini { display: none; }
/* Первый блок страницы продлён под шапку (26.09.2026): капсула парит над его фоном и узором,
   а не над серой полосой body. Рамка прозрачная, фон рисуется и под ней (origin border-box),
   содержимое стоит там же, где стояло под полосой, — раскладка страницы не меняется.
   Все шаблоны начинают <main> с блока (hero, page-lead, page-hero, about-hero, press-detail). */
#main { margin-top: -84px; }
#main > :first-child { border-top: 84px solid transparent; background-origin: border-box; }
@media (max-width: 900px) {
  #main { margin-top: -66px; }
  #main > :first-child { border-top-width: 66px; }
}
@media (min-width: 901px) {
  /* Логотип уменьшается transform'ом (растр не пересчитывается), коробка сразу получает
     финальную ширину, а сдвиг пунктов меню site.js проигрывает FLIP-анимацией. */
  /* логотип-SVG 697×548: при высоте 60 px — 76 px; в верхней капсуле (×0,834) — 50 px / 64 px,
     в капсуле при прокрутке (×0,634) — 38 px / 48 px */
  .logo { width: 64px; }
  .logo img { transform: scale(0.834); }
  .site-header.is-glass .logo { width: 48px; }
  .site-header.is-glass .logo img { transform: scale(0.634); }
  /* верхняя капсула 64 px, при прокрутке 60 px — в шапке 84 px; содержимое отступает от кромки
     на 32 / 26–28 px и на широком, и на узком десктопе */
  .header-inner { padding-inline: max(8px, calc(40px - max(0px, (100% - var(--cw)) / 2))); }
  .site-header.is-glass .header-inner { padding-inline: max(24px, calc(38px - max(0px, (100% - var(--cw)) / 2))); }
  /* префикс .site-header — чтобы базовые правила ниже по файлу не затирали transform */
  .site-header .logo { transition: transform var(--glass-dur) var(--glass-ease); }
  .site-header .main-nav > a { transition: transform var(--glass-dur) var(--glass-ease), color var(--tone-dur) var(--tone-ease), opacity var(--t-base) var(--ease-out); }
  .site-header .header-support { transition: transform var(--glass-dur) var(--glass-ease), border-color var(--tone-dur) var(--tone-ease); }
  /* подпись «Поддержка 24/7» не участвует в раскладке: номер один центрируется в капсуле,
     в полосе пара «номер + подпись» приподнята transform'ом */
  .hs-phone { position: relative; transform: translateY(-8px); transition: transform var(--glass-dur) var(--glass-ease), color var(--tone-dur) var(--tone-ease); }
  .hs-phone .hs-caption { position: absolute; right: 0; top: 100%; margin-top: 3px; transition: opacity var(--t-base) var(--ease-out), color var(--tone-dur) var(--tone-ease); }
  .site-header.is-glass .hs-phone { transform: none; }
  .site-header.is-glass .hs-phone .hs-caption { opacity: 0; }
}
@media (max-width: 900px) {
  .site-header { --cap: 8px max(12px, calc(50% - 170px)); --cap-top: 8px 12px; }
  .header-progress { display: none; }
  .site-header .logo, .site-header .burger {
    transition: opacity var(--tone-dur) var(--tone-ease), transform var(--glass-dur) var(--glass-ease), visibility 0s;
  }
  .site-header.is-glass .logo, .site-header.is-glass .burger {
    opacity: 0; visibility: hidden; transform: scale(0.92);
    transition: opacity var(--t-base) var(--ease-out), transform var(--glass-dur) var(--glass-ease), visibility 0s linear 0.2s;
  }
  .header-mini {
    display: flex; position: absolute; inset: var(--cap); z-index: 1;
    align-items: center; gap: 10px; padding: 0 6px 0 18px;
    color: var(--h-fg); font-weight: 700; font-size: 14px; line-height: 1;
    opacity: 0; visibility: hidden; transform: scale(var(--ix, 1.06), var(--iy, 1));
    transition: opacity var(--t-base) var(--ease-out), transform var(--glass-dur) var(--glass-ease), color var(--tone-dur) var(--tone-ease), visibility 0s linear 0.2s;
  }
  .site-header.is-glass .header-mini {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--tone-dur) var(--tone-ease) 0.08s, transform var(--glass-dur) var(--glass-ease), color var(--tone-dur) var(--tone-ease), visibility 0s;
  }
  .hm-bolt { width: 13px; height: 22px; flex: none; }
  .hm-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Кольцо прогресса — тот же градиент, что у полосы на десктопе (голубой → мятный), на любом
     тоне стекла: конусная заливка до --p (ставит site.js), кольцо вырезает маска. Градиент
     сжимается вместе с прогрессом, поэтому край заполнения всегда мятный — как у полосы. */
  .hm-ring {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    background: conic-gradient(#8fb8f2 0deg, #7fe3b6 calc(var(--p, 0) * 360deg), var(--h-ic) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  }
  .hm-menu {
    font: inherit; font-size: 13px; color: var(--h-fg); background: var(--h-chip);
    border: 0; border-radius: 999px; padding: 0 16px; height: 38px; cursor: pointer;
    transition: background-color var(--tone-dur) var(--tone-ease), color var(--tone-dur) var(--tone-ease);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .header-glass { background-color: #0b0c0f; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.is-glass[data-tone="light"] .header-glass { background-color: #fff; }
  /* линза выключена, но её коробка — эталон размера капсулы для site.js */
  .header-lens { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::after, .header-glass, .header-lens, .header-progress,
  .logo img, .header-mini, .site-header .logo, .site-header .burger, .main-nav > a, .header-support, .hs-phone,
  .main-nav, .nav-scrim { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}
.main-nav {
  /* меню растягивается между лого и телефоном, пункты распределяются равномерно */
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  gap: 12px;
  min-width: 0;
}
/* №01: спокойная плотность меню и явный текущий раздел. */
.main-nav a {
  color: var(--h-fg, var(--white));
  transition: color var(--tone-dur) var(--tone-ease), opacity var(--t-base) var(--ease-out);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  opacity: 0.9;
}
.main-nav a:hover { opacity: 1; }
.main-nav a[aria-current] {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--h-ul, #c4d8f1);
  text-decoration-thickness: 2px;
  text-underline-offset: 9px;
}
@media (min-width: 901px) {
  .main-nav > a { white-space: nowrap; font-size: 16px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .header-inner { gap: 16px; }
  .main-nav { gap: 10px; }
  .main-nav a { font-size: 14px; }
  .header-inner .header-support { padding-left: 16px; }
  .header-support .hs-phone { font-size: 14px; }
}
/* «Медиа»-группа и телефон-кнопка — только в мобильной панели */
.nav-media-group, .nav-phone { display: none; }
/* №06: поддержка отделена от основной навигации. */
.header-support { display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--h-line, #4b5056); padding-left: 24px; transition: border-color var(--tone-dur) var(--tone-ease); }
.hs-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  color: var(--h-fg, var(--white));
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  transition: color var(--tone-dur) var(--tone-ease);
  white-space: nowrap;
}
.hs-caption {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--h-dim, #9ba9b9);
}
.hs-ic {
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--h-ic, rgba(255, 255, 255, 0.28));
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--h-fg, var(--white));
  transition: background var(--t-base) var(--ease-out), border-color var(--t-move) var(--ease-out), color var(--tone-dur) var(--tone-ease);
}
.hs-ic:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); }
.nav-support { display: none; }
/* Кнопка меню наверху страницы на телефоне — та же пилюля «Меню», что в капсуле при прокрутке
   (.hm-menu): вместо трёх полосок бургера с 26.09.2026. */
.burger {
  display: none;
  align-items: center;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--h-fg, var(--white));
  background: var(--h-chip, rgba(255, 255, 255, 0.14));
  border: 0;
  border-radius: 999px;
  height: 38px;
  padding: 0 16px;
  cursor: pointer;
}

/* ---------- Первый экран (паттерн П2, как у тёмных секций) ---------- */
.hero {
  background: var(--white);
  color: var(--dark);
  padding: 40px 0 80px;
  position: relative;
  overflow: hidden;
}
/* на белом хиро кнопка — чернильная */
.hero .btn-light { background: var(--dark); color: var(--white); }
.hero .btn-light:hover { background: var(--ink-hover); }
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
/* грид-дети не раздувают трек своим min-content: чип живого тарифа (width:max-content)
   на узких экранах делал колонку шире вьюпорта — контент срезался справа (баг с Pixel) */
.hero-inner > *, .hub-hero-inner > * { min-width: 0; }
/* с видео текст занимает ~третъ, медиа — остальное.
   Текстовый блок центрирован по вертикали плеера, ровный вертикальный ритм */
.hero--video .hero-inner {
  grid-template-columns: minmax(300px, 1fr) 2fr;
  align-items: center;
}
.hero--video .hero-subtitle { margin-bottom: 28px; }
.hero-title {
  /* исключение из П1: слоган хиро главной — капсом (правка юзера 05.07) */
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 29px);
  line-height: 1.22;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}
.hero-subtitle {
  font-size: 16px;
  opacity: 0.85;
  margin-bottom: 24px;
  max-width: 520px;
}
.hero-photo { border-radius: var(--radius); }
.hero-media { position: relative; }
.hero-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  background: #000;
  cursor: pointer;
}
.hero-video.is-paused { opacity: 0.85; }
/* кнопка play: стеклянный сквиркл (вариант В3, блюр умеренный) */
.hero-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--white);
  box-shadow: 0 10px 28px rgba(2, 20, 43, 0.35);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
  z-index: 2;
}
.hero-video-play svg { margin-left: 3px; }
.hero-video-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(255, 255, 255, 0.28);
}
.hero-video-play.is-hidden { opacity: 0; pointer-events: none; }
.hero-video-fs {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: rgba(10, 11, 14, 0.65);
  color: var(--white);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out);
}
.hero-video-fs:hover { background: rgba(10, 11, 14, 0.9); }

/* ---------- Заголовок внутренней страницы ---------- */
.page-hero {
  background: var(--dark);
  color: var(--white);
  /* Ф46 «Прожекторы» — диагональные лучи на титулах разделов */
  background-image: linear-gradient(115deg, transparent 0 16%, rgba(255, 255, 255, 0.05) 16% 30%, transparent 30% 54%, rgba(255, 255, 255, 0.04) 54% 63%, transparent 63%);
  /* компактный титул (правка 06.07) */
  padding: 34px 0 30px;
}
/* Правило ритма (13.07): оглавление разделов — тёмным текстом по БЕЛОМУ с фоном
   Ф289 «Спидометр-негатив». Шапка тёмная → это светлый блок → дальше чередование.
   Герои страниц хабов с 28.07 светлые — см. .hub-hero--light (гибрид В6). */
.page-hero--light {
  background: var(--white);
  color: var(--dark);
  background-image: repeating-conic-gradient(from 285deg at -4% 106%, rgba(6, 61, 131, 0.14) 0 1.6deg, transparent 1.6deg 11deg);
}
.page-hero--light .page-title { color: var(--dark); }
.page-hero--light .page-intro { opacity: 1; color: var(--text-muted); }
.page-hero--light .page-intro--aside { border-left-color: #d2dae6; color: var(--text-muted); }
.page-title {
  /* длинные заголовки страниц — Montserrat, AKONY не тянет длинные строки */
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1.2;
}
.page-intro { margin-top: 16px; opacity: 0.85; max-width: 640px; }
/* В2 «С чертой»: доп-текст правее заголовка на компактном титуле */
.page-hero-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.page-intro--aside {
  margin: 0;
  /* растянуто на всю свободную ширину строки (правка юзера 07.08, вторая итерация:
     без потолка — текст занимает всё место правее заголовка) */
  flex: 1 1 40ch;
  min-width: 0;
  max-width: none; /* перебивает потолок 640px базового .page-intro */
  font-size: 15.5px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  padding-left: 28px;
}
.page-intro--aside p { margin: 0; }
@media (max-width: 760px) {
  .page-intro--aside { border-left: 0; padding-left: 0; }
}

/* ---------- Счётчики ---------- */
.stats-section {
  /* Ф5 «Дуотон» (борд 📸 29.07, правка юзера — без слэшей): живое фото рядов
     стоек под чернильной вуалью, просто затемнённое изображение */
  background: var(--dark);
  background-image:
    linear-gradient(180deg, rgba(7, 10, 14, 0.55), rgba(4, 6, 9, 0.65)),
    url("../img/stats-bg.0b0ffd1ba9f7.jpg");
  background-size: auto, cover;
  background-position: center, center 50%;
  padding: 48px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  /* именно clip, а не hidden: hidden делает секцию скролл-контейнером, и тогда
     view()-таймлайн свечения мерит прогресс относительно неё же — анимация замирает */
  overflow: clip;
}
/* свечение логотипа: слой — тот же кадр с вырезанной маркой (всё прозрачно,
   кроме логотипа) и теми же background-size/position, что у фото. Совпадение по
   контуру — от геометрии, а не от подгонки. Ореол даёт drop-shadow по альфе,
   поэтому свет идёт ровно по форме марки. Прозрачность ведёт scroll-driven
   анимация — считает композитор, JS-слушателей скролла нет. */
.stats-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("../img/stats-logo.602b34dac3d3.png");
  background-size: cover;
  background-position: center 50%;
  mix-blend-mode: screen;
  /* пик подсветки поднят на ~10% (правка юзера): и сама марка, и ореол вокруг неё */
  filter: brightness(1.1) drop-shadow(0 0 11px rgba(150, 200, 255, 0.61));
  opacity: 0;
}
@supports (animation-timeline: view()) {
  .stats-glow {
    animation: stats-glow linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes stats-glow {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .stats-glow { animation: none; opacity: 0; }
}
/* марка «Электрохаб» на фото сидит на 76% по горизонтали — на узком экране
   cover-кроп по центру её срезает; смещаем кадр вправо (оба слоя одинаково,
   иначе свечение разъедется с фото) */
@media (max-width: 760px) {
  .stats-section { background-position: center, 85% 50%; }
  .stats-glow { background-position: 85% 50%; }
}
.stats-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.stat-card { color: var(--white); text-align: center; }
/* В1: иконка над числом — ритм икона → число → подпись */
.stat-icon { display: block; width: 26px; height: 26px; margin: 0 auto 10px; }
.stat-icon svg { width: 100%; height: 100%; display: block; }
.stat-value {
  /* цифры набираем Montserrat: AKONY плохо читается в числах */
  display: block;
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1;
}
.stat-label { display: block; margin-top: 8px; opacity: 0.85; }
/* точки в больших числах — белые (правка юзера 05.07) */
.stat-dot { color: var(--white); }

/* ---------- Карточки хабов ---------- */
.hubs-grid, .news-grid, .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.hub-card { position: relative; text-decoration: none; color: var(--text); display: flex; flex-direction: column; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.hub-card:hover { transform: translateY(-3px); border-color: #cfdae8; box-shadow: 0 8px 20px rgba(2,20,43,.08); }
/* «растянутая ссылка»: клик по всей карточке ведёт на страницу хаба, но кнопки
   карусели (z-index выше) остаются доступны — без вложенных <button> в <a> (#15) */
.hub-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hub-card-link:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.hub-card img, .hub-card-placeholder { aspect-ratio: 8/5; object-fit: cover; width: 100%; }
.hub-card-placeholder {
  position: relative;
  background: var(--dark) url("../img/icon-white.7a3c194744cf.svg") center/64px no-repeat;
}

/* листаемая мини-галерея на карточке хаба */
.hub-card-media, .page-carousel { position: relative; overflow: hidden; }
.hub-card-media .hc-slide, .page-carousel .hc-slide {
  display: none;
}
.hub-card-media .hc-slide.is-active, .page-carousel .hc-slide.is-active { display: block; }
/* большая карусель на страницах хаба и новостей */
.page-carousel { border-radius: var(--radius); margin: 8px 0 24px; }
.hub-hero-carousel { margin: 0; }
.page-carousel .hc-slide { width: 100%; }
.page-carousel .hc-arrow { opacity: 1; }
.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 11, 14, 0.55);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  /* глифы ‹ › оптически выше центра — прижимаем к середине круга */
  padding: 0 0 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
  z-index: 2;
}
.hc-prev { left: 10px; }
.hc-next { right: 10px; }
.hub-card:hover .hc-arrow { opacity: 1; }
.hc-arrow:hover { background: rgba(10, 11, 14, 0.85); }
@media (hover: none) {
  .hc-arrow { opacity: 1; } /* на тач-устройствах стрелки видны всегда */
}
.hc-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.hc-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.hc-dots span.is-active { background: var(--white); }
.hub-card-body { padding: 20px; }
/* название всегда в 2 строки (бренд + «Имя») — элементы карточек выравниваются */
.hub-card h3 { font-size: 20px; font-weight: 700; margin: 10px 0 8px; line-height: 1.3; min-height: 2.6em; }

/* чипы под фото: город слева, статус справа */
.hub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* город — просто слово, по той же сетке (левой кромке), что и название */
.hub-tag-city {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* рейтинг Яндекса под названием */
.hub-rate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin-bottom: 10px;
  min-height: 19px;
}
/* хабы без рейтинга: спокойная подпись на той же строке */
.hub-rate--alt { color: var(--text-muted); font-size: 13px; font-weight: 600; }
.hub-rate-star { color: #F2B705; font-size: 15px; line-height: 1; }
.hub-rate b { font-weight: 700; }
.hub-rate-count { color: var(--text-muted); }

.hub-card-meta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
}
.hub-card-meta { color: var(--text-muted); margin-bottom: 6px; }
.hub-card-meta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  opacity: 0.75;
}

.hub-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--light);
  color: var(--text-muted);
}
/* на карточках статус с большой буквы, не капсом */
.hub-card .hub-status { text-transform: none; letter-spacing: 0.02em; font-size: 13px; }
.hub-status--operating { background: #e0f2e9; color: #16794c; }
/* партнёрская сеть: нейтральный маркер без понижения в статусе */
.hub-status--partner { background: #eef1f6; color: #5b6b80; }
.hub-status--construction { background: #fdf1dc; color: #86590f; }
.hub-status--project { background: #e2ecfb; color: var(--blue); }

/* ---------- Страница хаба ---------- */
.hub-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}
.hub-hero-text .hub-status { margin-bottom: 16px; }
.hub-intro { margin-top: 16px; opacity: 0.85; }
.hub-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.hub-facts > div {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.hub-facts dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 2px;
}
.hub-facts dt svg { width: 15px; height: 15px; flex-shrink: 0; }
.hub-facts dd { font-weight: 700; font-size: 17px; }
.hub-fact-wide { grid-column: 1 / -1; }

/* ---------- Рейтинг и тарифы хаба ---------- */
.hub-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 4px;
}
.hub-rating-badge {
  background: #F2B705;
  color: #02142B;
  font-weight: 700;
  font-size: 15px;
  padding: 4px 12px;
  border-radius: 999px;
}
.hub-rating a { color: var(--white); opacity: 0.85; font-size: 14px; }
.hub-rating a:hover { opacity: 1; }
/* «N оценок на Яндексе» — ссылка на карточку хаба в Я.Картах; размер как у бейджа рейтинга */
.hub-rating > a { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); }
.hub-rating > a:hover { text-decoration-color: rgba(255, 255, 255, 0.7); }

/* Т1 «Одна плита»: компактные счастливые часы */
/* размер = .section-title («Сколько стоит зарядка?» и др.) — правка юзера 28.07 */
.hh-title { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.01em; }
/* месяц и год — под заголовком, белым */
.hh-month { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-top: 6px; }
.hh-times { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 18px; }
.hh-time {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 14px;
  font-weight: 700;
}
/* солнце — янтарь, месяц — лунный светло-голубой */
.hh-sun { color: var(--amber, #F2B705); }
.hh-moon { color: #8fb8f2; }
.hh-hubs { display: flex; gap: 10px; flex-wrap: wrap; }
.hh-chip {
  background: var(--white);
  color: var(--dark);
  border-radius: 12px;
  padding: 10px 16px;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.hh-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(2, 20, 43, 0.3); }
.hh-chip b { display: block; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hh-chip span { display: block; font-size: 13px; font-weight: 700; margin-top: 2px; }
.hh-chip small { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.hh-note { font-size: 13px; opacity: 0.75; margin-top: 18px; max-width: 76ch; }
.hh-note a { color: var(--link); }

.tariffs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.tariff-card { padding: 24px; }
.tariff-name { font-weight: 600; color: var(--text-muted); font-size: 15px; }
.tariff-price {
  font-weight: 800;
  /* одна строка без переносов «₽/кВт·ч» — карточки единого вида */
  font-size: clamp(22px, 2.1vw, 29px);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--dark);
  margin: 6px 0 10px;
}
.tariff-note { font-size: 14px; color: var(--text-muted); font-weight: 400; }
.tariff-warn { font-size: 13px; color: #86590f; margin-top: 4px; }
.happy-hub-card { text-decoration: none; display: block; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
/* цвета цен — те же, что на табло /tarify/ (один язык выгоды по сайту);
   хвойный кант — маркер самой выгодной карточки */
/* Тарифные зоны (борд «Пиковый тариф», 02.09.2026): живая строка, полоса суток,
   карточка пикового тарифа. Тёплый цвет пика — единственный «дорогой» акцент
   на странице, чтобы 30 ₽ не читались как выгода. */
:root { --peak: #C2571C; --peak-soft: #F8E6DA; }
.tariff-card--peak { border-left: 3px solid var(--peak); }
.tariff-card--peak .tariff-price { color: var(--peak); }
.live-tariff.is-peak .lt-dot { background: var(--peak); }
.ehm-happy.is-peak b { color: var(--peak); }
.hh-chip--own small { white-space: normal; }
.board-win--note { color: var(--text-muted); font-weight: 500; }
.tariff-card--happy { border-left: 3px solid #1F5F4A; }
.tariff-card--happy .tariff-price { color: #1F5F4A; }
.tariff-card--loyalty .tariff-price { color: var(--blue); }
.happy-hub-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(2,20,43,.12); }
.happy-hub-card .tariff-note { color: var(--text-muted); font-weight: 400; }

/* ---------- Cookie-плашка: тихий тост в углу ---------- */
.cookie-bar {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  background: rgba(10, 11, 14, 0.92);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  animation: cookie-in 0.4s 1.2s ease both;
}
/* display:flex у .cookie-bar перебивает браузерный [hidden]{display:none} —
   без этого правила кнопка «Ок» ставит hidden, но бар не исчезает */
.cookie-bar[hidden] { display: none; }
.channel-float { display: none; }
@media (min-width: 1101px) {
  .channel-float {
    position: fixed;
    right: max(24px, calc(50% - 688px));
    bottom: 28px;
    z-index: 150;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: rgba(255, 255, 255, .89);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 25px rgba(2, 20, 43, .18);
    color: #02142b;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  }
  .channel-float svg { width: 23px; height: 23px; }
  .channel-float:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(2, 20, 43, .25); }
  .cookie-bar:not([hidden]) + .channel-float { bottom: 96px; }
}
@media (min-width: 1700px) {
  .channel-float { right: max(24px, calc(50% - 828px)); }
}
@media (prefers-reduced-motion: reduce) {
  .channel-float { transition: none; }
}
.cookie-bar p { margin: 0; }
.cookie-bar a { color: var(--white); }
.cookie-bar .btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
}
.cookie-bar .btn:hover { background: rgba(255, 255, 255, 0.12); }
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { animation: none; }
}
@media (min-width: 601px) {
  /* справа бар не накрывает панель маршрута карты и чип «Адрес» хаба */
  .cookie-bar { left: auto; right: 16px; }
}
@media (max-width: 600px) {
  .cookie-bar { right: 16px; max-width: none; }
  /* пока cookie-бар не закрыт — панель карты приподнята над ним */
}

/* ---------- Преимущества ---------- */
.feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature-card img { aspect-ratio: 8/5; object-fit: cover; width: 100%; }
.feature-card h3 { padding: 18px 20px 6px; font-size: 19px; }
.feature-card p { padding: 0 20px 20px; opacity: 0.8; font-size: 15px; }

/* Ведущая карточка (variant=lead): широкая, янтарный тон, иконка — как у остальных */
.feature-lead {
  display: flex;
  gap: 20px;
  align-items: center;
  background: rgba(242, 183, 5, 0.08);
  border: 1px solid rgba(242, 183, 5, 0.30);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 16px;
}
.feature-lead .feature-icon { margin-bottom: 0; flex: none; }
.feature-lead h3 { margin: 0; font-size: 22px; }
.feature-lead p { margin: 6px 0 0; font-size: 15px; opacity: 0.82; }
@media (max-width: 600px) {
  .feature-lead { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* Партнёр в секции (лого на белой пилюле — сохраняет фирменные цвета на тёмном) */
.features-partner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  text-decoration: none;
  color: #aebfd6;
  font-size: 14px;
  font-weight: 600;
}
.fp-logo {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  transition: transform var(--t-base) var(--ease-out);
}
.fp-logo img { display: block; height: 26px; width: auto; }
.features-partner:hover { color: var(--white); }
.features-partner:hover .fp-logo { transform: translateY(-1px); }
@media (max-width: 600px) {
  .features-partner { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* ─── Блок «Сервис и комфорт 24/7» (Вид C): заголовок+лого слева, удобства рядами-чипами ─── */
.service-comfort .svc-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.svc-title-link { display: inline-flex; align-items: center; text-decoration: none; color: var(--white); transition: color var(--t-base) var(--ease-out); }
.svc-title-link:hover { color: var(--link); }
.service-comfort .svc-title { margin: 0; }
.svc-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 11px; padding: 9px 15px; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.svc-logo:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.svc-logo img { display: block; height: 24px; width: auto; }
.svc-groups { margin-top: 22px; }
.svc-row { display: flex; align-items: center; gap: 18px; padding: 16px 0; }
.svc-row + .svc-row { border-top: 1px solid rgba(255, 255, 255, .12); }
.svc-label { flex: 0 0 210px; }
.svc-gt { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #8fb8f2; font-weight: 800; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.svc-am { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--white); }
.svc-am-i { display: inline-flex; align-items: center; color: #8fb8f2; }
.svc-am-i .icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .svc-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 0; }
  .svc-label { flex: none; }
}

/* Светлый вариант секции «Преимущества»: белый фон, тёмный текст, синие иконки */
.features-light { background: #fff; color: var(--dark); border-top: 1px solid #e5eaf1; }
.features-light .section-title { color: var(--dark); }
.features-light .feature-card { background: #fff; border: 1px solid #e5eaf1; }
.features-light .feature-card h3 { color: var(--dark); }
.features-light .feature-card p { color: var(--text-muted); opacity: 1; }
.features-light .feature-icon { background: rgba(6, 61, 131, 0.08); border-color: transparent; color: var(--blue); }
.features-light .feature-lead { background: rgba(242, 183, 5, 0.10); border-color: rgba(242, 183, 5, 0.35); }
.features-light .feature-lead h3 { color: var(--dark); }
.features-light .feature-lead p { color: var(--text-muted); opacity: 1; }

/* ---------- B2B: две карточки на белом ---------- */
.b2b-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.b2b-section .section-title { margin-bottom: 14px; }
.b2b-lead {
  max-width: 62ch;
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
}
.b2b-section .btn { margin-top: 30px; }

/* ---------- B2B: офферы с крупной ценой и плашкой выгоды ---------- */
.offers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.offer-card { padding: 24px 26px; display: flex; flex-direction: column; }
.offer-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(6, 61, 131, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.offer-card :is(h2, h3) { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--dark); }
.offer-price {
  font-size: 40px;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
/* юнит не рвётся посреди фразы: либо рядом с цифрой, либо целиком строкой ниже */
.offer-price small { font-size: 16px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.offer-card p { margin: 10px 0 18px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.offer-payoff {
  margin-top: auto;
  padding: 14px 16px;
  /* В1 «Хвоя» (выбор юзера 08.07): выгода = хвоя из палитры брендбука */
  background: linear-gradient(100deg, #edf5f0, #e3efe8);
  border: 1px solid #cfe0d6;
  border-radius: var(--radius-sm);
  display: flex;
  /* сумма по центру против 2–3 строк пояснения (правка юзера 08.07) */
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.offer-payoff b {
  font-size: 24px;
  font-weight: 800;
  color: #1F5F4A;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.offer-payoff span { font-size: 13px; line-height: 1.45; color: #3d5a4d; flex: 1; min-width: 180px; }
/* без примечания плашка резервирует его слот (30px) — плашки соседних карточек на одном уровне */
.offer-payoff:last-child { margin-bottom: 30px; }
.offer-note { margin-top: 12px; font-size: 12.5px; color: #6f7a8c; }
/* CTA-ряд оффера: подпись + кнопки связи (вместо примечания) */
.offer-cta { margin-top: 14px; display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; }
.offer-cta-label { font-size: 15px; font-weight: 700; color: var(--text); }
.offer-cta-btns { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.offer-cta-phone,
.offer-cta-tg {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: 19px; background: var(--dark); color: var(--white);
  font-weight: 700; font-size: 14.5px; white-space: nowrap;
  text-decoration: none; transition: background var(--t-base) var(--ease-out);
}
.offer-cta-phone { font-variant-numeric: tabular-nums; }
.offer-cta-ic {
  width: 38px; height: 38px; flex: none; border: 1px solid rgba(2, 20, 43, 0.28);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--dark); transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.offer-cta-ic:hover { background: rgba(2, 20, 43, 0.06); border-color: rgba(2, 20, 43, 0.5); }
@media (max-width: 480px) {
  .offer-cta-phone, .offer-cta-tg { font-size: 13px; padding: 0 13px; }
}

/* ---------- B2B: аренда помещений карточками ---------- */
.rooms-intro { max-width: 72ch; margin: -8px 0 26px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.room-card { padding: 22px 24px; display: block; color: inherit; text-decoration: none; }
a.room-card:hover h3 { color: var(--link); }
.room-area { font-size: 28px; font-weight: 800; color: var(--dark); font-variant-numeric: tabular-nums; }
.room-card h3 { margin: 6px 0 4px; font-size: 17px; font-weight: 800; color: var(--blue); }
.room-addr { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.room-chip {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.room-chip--ok { background: #e8f1ec; color: #1F5F4A; }
.room-chip--soon { background: #fff2df; color: #8a5a12; }
.rooms-contact {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--text-muted);
}
.rooms-contact .btn { white-space: nowrap; }
.rooms-actions { display: inline-flex; align-items: center; gap: 10px; }
.rc-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-m);
  height: var(--btn-m);
  border-radius: 50%;
  border: 1.5px solid #cdd8e6;
  color: var(--dark);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.rc-ic:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
@media (max-width: 900px) {
  .rooms-grid { grid-template-columns: 1fr; }
  .offers-grid { grid-template-columns: 1fr; }
}

/* ---------- Программа лояльности electro.cars ---------- */
.loyalty-section { background: #fff; border-top: 1px solid #e5eaf1; }
.loyalty-logo { display: block; height: 32px; width: auto; margin-bottom: 18px; }
.loyalty-section .section-title { margin-bottom: 14px; }
.loyalty-lead { max-width: 62ch; margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.loyalty-lead p { margin: 0; }
.loyalty-lead p + p { margin-top: 10px; }
.loyalty-cities { display: flex; gap: 12px; flex-wrap: wrap; }
.loyalty-stores {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.loyalty-stores a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blue);
  font-weight: 700;
}
.loyalty-stores a:hover { color: var(--link); }
.loyalty-stores svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* ---------- Шаги: вертикальный таймлайн + фото, светлая секция ---------- */
.steps-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.steps-tl { position: relative; padding-left: 34px; }
.steps-tl::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 14px;
  width: 2px;
  background: #dfe5ee;
}
.step { position: relative; margin-bottom: 26px; }
.step::before {
  content: "";
  position: absolute;
  left: -31px;
  /* центр точки = центр первой строки заголовка (19px × 1.6) */
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #F2B705;
}
.step:nth-child(2)::before { background: #063D83; }
.step:nth-child(3)::before { background: #1F5F4A; }
.step-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.step h3 { font-size: 19px; font-weight: 800; color: var(--dark); }
.step-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
  background: #F2B705;
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.step p { font-size: 15px; color: var(--text-muted); margin-top: 6px; max-width: 46ch; }
.steps-apps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.steps-apps-lab { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
.steps-apps a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  text-decoration: none;
  border: 1px solid #cdd8e6;
  border-radius: 999px;
  padding: 6px 15px;
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.steps-apps a img { width: 18px; height: 18px; border-radius: 5px; display: block; }
.steps-apps a:hover { border-color: var(--dark); background: #f4f7fb; }
.steps-photo { width: 100%; border-radius: var(--radius); display: block; }
@media (max-width: 900px) {
  .steps-wrap { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Текст + фото ---------- */
.ti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ti-reversed .ti-text { order: 2; }
.ti-photo { border-radius: var(--radius); }
.richtext p { margin-bottom: 14px; }
.richtext ul, .richtext ol { margin: 0 0 14px 22px; }
.richtext li { margin-bottom: 8px; }
.richtext h2, .richtext h3 {
  font-weight: 700;
  line-height: 1.25;
  margin: 28px 0 14px;
}
.richtext h2 { font-size: clamp(22px, 2.6vw, 30px); }
.richtext h3 { font-size: 19px; }
.richtext > h2:first-child, .richtext > h3:first-child { margin-top: 0; }
.richtext a { font-weight: 600; }
/* картинки внутри статей (схемы разъёмов и т.п.): своя ширина, скруглённые,
   с отбивкой от текста — раньше в richtext их просто не было */
.richtext img { max-width: 100%; height: auto; display: block; border-radius: 14px; margin: 22px 0; }
.richtext .richtext-image.full-width { width: 100%; }
.richtext .richtext-image.left { float: left; margin: 6px 22px 14px 0; max-width: 46%; }
.richtext .richtext-image.right { float: right; margin: 6px 0 14px 22px; max-width: 46%; }
@media (max-width: 640px) { .richtext .richtext-image.left, .richtext .richtext-image.right { float: none; max-width: 100%; margin: 22px 0; } }
/* таблицы в гидах (тарифы, модели; 11.09): узкий экран — своя прокрутка вбок, страница не едет */
.richtext table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 22px 0; font-size: 15px; line-height: 1.4; }
.richtext th, .richtext td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.richtext th { font-weight: 700; }
/* ссылки в подводке гида (11.09): шапка тёмная, фирменный синий там сливался (контраст 1,8) —
   берём цвет текста подводки и подчёркивание, читается на любом фоне */
.page-intro a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* на тёмных секциях ссылки осветляем, чернильные кнопки инвертируем */
.section-dark .richtext a { color: var(--link); }
.section-dark .btn-primary { background: var(--white); color: var(--dark); }
.section-dark .btn-primary:hover { background: var(--light); }

/* текстовые секции: читаемая колонка, а не вся ширина экрана */
.section-text { padding: var(--sp-band) 0; }
.section-text .richtext { max-width: 800px; }
.section-text + .section-text { padding-top: 0; }
.ti .btn { margin-top: 10px; }

/* ---------- Галерея ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.gallery-grid img { border-radius: var(--radius-sm); width: 100%; object-fit: cover; }

/* ---------- Новости ---------- */
.news-card {
  display: flex;
  flex-direction: column;
  position: relative; /* якорь для растянутой ссылки */
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.news-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(2,20,43,.12); }
/* ссылка заголовка накрывает всю карточку — кликабельно целиком */
.news-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.news-card img { aspect-ratio: 16/9; object-fit: cover; }
.news-card-body { padding: 20px; }
.news-card time { color: var(--text-muted); font-size: 13px; }
.news-card :is(h2, h3) { font-size: 18px; margin: 8px 0; }
.news-card :is(h2, h3) a { color: var(--text); text-decoration: none; }
.news-card :is(h2, h3) a:hover { color: var(--blue); }
.news-card p { font-size: 15px; color: var(--text-muted); }

/* ---------- «СМИ о нас»: плитки внешних публикаций ---------- */
.press-year + .press-year { margin-top: 48px; }
.press-filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
/* два ряда фильтров (тип издания + годы): верхний ряд прижат к нижнему */
.press-filter--kind { margin-bottom: 10px; }
/* чип года, в котором при выбранном типе не осталось публикаций */
.press-filter .is-off { opacity: 0.4; pointer-events: none; }
/* [hidden] сам по себе не работает: авторский display:flex у .press-card
   сильнее UA-правила [hidden]{display:none} — гасим явно (баг фильтра 19.08) */
.press-card[hidden], .press-year[hidden] { display: none; }
.press-year-title { font-size: 28px; margin-bottom: 20px; letter-spacing: -0.015em; }
.press-year-count { color: var(--text-muted); font-size: 16px; font-weight: 600; vertical-align: 4px; margin-left: 4px; }
.press-grid {
  display: grid;
  /* min(320px,100%): плитка не распирает контейнер на самых узких экранах */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.press-card {
  display: flex;
  flex-direction: column;
  position: relative; /* якорь для растянутой ссылки издания */
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.press-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(2,20,43,.12); }
.press-card-body { padding: 16px 20px 18px; display: flex; flex-direction: column; flex: 1; }
/* обложка-логотип: вписывается целиком на светлой подложке */
.press-cover--logo {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ВИТРИНА-СМИ (13.08): все три вида обложек — одна пропорция 21:9,
     ряды перестают плясать (была фикс-высота 96px рядом с фото 16:9) */
  aspect-ratio: 21 / 9;
  /* белый фон: иконки изданий с белой подложкой сливаются без «заплатки» */
  background: var(--white);
  border-bottom: 1px solid #e5eaf1;
}
.press-cover--logo img { max-height: 56px; max-width: 60%; width: auto; height: auto; }
/* издание без пригодного графического лого — типографская плашка-вордмарк */
.press-cover--word {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 21 / 9;
  padding: 0 24px;
  background: var(--white);
  border-bottom: 1px solid #e5eaf1;
  color: var(--blue);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-align: center;
}
/* обложка-фото: кадрируется как у новостей */
img.press-cover { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.press-card time { color: var(--text-muted); font-size: 13px; }
.press-outlet { font-size: 17px; margin: 4px 0 8px; }
.press-outlet a { color: var(--text); text-decoration: none; }
.press-outlet a:hover { color: var(--blue); }
/* клик по всей плитке ведёт на первоисточник */
.press-outlet a::after { content: ""; position: absolute; inset: 0; }
.press-sum { font-size: 15px; color: var(--text-muted); margin-bottom: 12px; }
/* ссылки в аннотации (хаб, первоисточник цитаты) — поверх растянутой ссылки плитки */
.press-sum a, .press-article-sum a { position: relative; z-index: 1; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.press-sum a:hover, .press-article-sum a:hover { color: var(--text); }
.press-src {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  position: relative; /* поверх растянутой ссылки */
  z-index: 1;
}
.press-src:hover { text-decoration: underline; }
.press-net { font-size: 13px; color: var(--text-muted); padding-top: 8px; }
.press-net p { margin: 0 0 8px; }
.press-net a { position: relative; z-index: 1; }
/* кнопка-разворот блока про хабы на плитке */
.press-more {
  border-top: 1px solid #e5eaf1;
  margin-top: 14px;
  padding-top: 10px;
  position: relative; /* поверх растянутой ссылки плитки */
  z-index: 1;
}
.press-more summary {
  cursor: pointer;
  list-style: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  position: relative;
  padding-right: 24px;
}
.press-more summary::-webkit-details-marker { display: none; }
.press-more summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-base) var(--ease-out);
}
.press-more[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

/* подсветка хаба, о котором публикация */
.press-net-hl { font-weight: 700; }

/* «СМИ о хабе» на странице хаба */
.hub-press { list-style: none; margin: 0; padding: 0; }
.hub-press li { border-bottom: 1px solid #e5eaf1; }
.hub-press li:first-child { border-top: 1px solid #e5eaf1; }
.hub-press a {
  display: grid;
  grid-template-columns: 110px 210px 1fr;
  gap: 6px 20px;
  align-items: baseline;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--text);
}
.hub-press a:hover b { color: var(--blue); }
.hub-press time { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.hub-press span { color: var(--text-muted); font-size: 15px; }
@media (max-width: 760px) {
  .hub-press a { grid-template-columns: 1fr; gap: 2px; padding: 12px 2px; }
}

/* ---------- страница одной публикации ---------- */
.press-article { max-width: 760px; }
.press-back { margin-bottom: 20px; }
.press-back a { font-weight: 600; text-decoration: none; }
.press-back a:hover { text-decoration: underline; }
.press-article .press-cover--big {
  /* фикс 19.08: базовый aspect-ratio 21/9 (витрина 13.08) при height 180px раздувал
     ширину до 420px — мобильные пресс-страницы получали горизонтальную прокрутку
     (жалоба Я.Вебмастера); на детальной аспект отключаем, высота решает */
  aspect-ratio: auto;
  max-width: 100%;
  height: 180px;
  border: 1px solid #e5eaf1;
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.press-article .press-cover--big img { max-height: 110px; max-width: 70%; }
.press-article .press-cover--word.press-cover--big { font-size: 28px; }
img.press-cover--big { height: auto; aspect-ratio: 21/9; border-radius: var(--radius); }
.press-article time { color: var(--text-muted); font-size: 14px; }
.press-article-title { font-size: 34px; margin: 6px 0 14px; letter-spacing: -0.015em; }
.press-article-sum { font-size: 19px; line-height: 1.55; margin-bottom: 22px; }
.press-article-net {
  border-top: 1px solid #e5eaf1;
  margin-top: 32px;
  padding-top: 20px;
}
.press-article-net .press-net { font-size: 15px; }
.press-article-net .press-net p { margin-bottom: 12px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* лента «Медиа»: вторая секция (гиды) с воздухом после новостей */
.media-feed .mf-guides { margin-top: 44px; }
.section-more { font-weight: 600; text-decoration: none; white-space: nowrap; }
.section-more { transition: color var(--t-base) var(--ease-out); }

/* фильтр городов в «Развитии сети» */
.hubs-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.hf-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  background: none;
  border: 1px solid #cdd6e1;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
  text-decoration: none; /* чипы бывают ссылками (/hubs/: города) */
  display: inline-block;
}
.hf-btn:hover { border-color: var(--dark); color: var(--dark); }

.hf-btn.is-active {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.news-date { opacity: 0.7; font-size: 14px; display: inline-block; margin-bottom: 10px; }
/* видимая свежесть гида — в одну строку с датой публикации */
.news-updated { opacity: 0.7; font-size: 14px; }
.news-article { max-width: 860px; }
.news-cover { border-radius: var(--radius); margin-bottom: 28px; }
.news-article .gallery-grid { margin-top: 28px; }
.news-back { margin-top: 36px; }
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

/* ---------- Форма ---------- */
.contact-section {
  background: var(--dark);
  color: var(--white);
  padding: 64px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.contact-section .section-title { color: var(--white); }
.contact-section .section-subtitle { color: rgba(255, 255, 255, 0.88); }
/* светлый вариант формы (чекбокс в CMS) */
.contact-section--light {
  background: var(--white);
  background-image: none;
  color: var(--text);
  border-top: 0;
}
.contact-section--light .section-title { color: var(--dark); }
.contact-section--light .section-subtitle { color: var(--text-muted); }
.contact-section--light .contact-phone-big a { color: var(--dark); }
.contact-section--light .contact-form { border: 1px solid #e5eaf1; }
.contact-phone-big a {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 30px);
  text-decoration: none;
}
.contact-form { padding: 28px; color: var(--text); }
.contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font: inherit;
  border: 1px solid #d3dae3;
  border-radius: var(--radius-sm);
  background: var(--white);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--dark);
}
.contact-form .btn { width: 100%; margin-top: 4px; }
.form-policy { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.form-ok { background: #e0f2e9; color: #16794c; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 14px; }
.form-error { background: #fdecea; color: #b3261e; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 14px; }
.hp-field { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
/* инлайн-ошибка поля в стиле сайта (вместо нативной англ. подсказки) */
.field-error { margin: 5px 0 2px; font-size: 13px; font-weight: 500; color: #b3261e; }
.contact-form input.is-invalid, .contact-form textarea.is-invalid { border-color: #e0533d; background: #fff8f7; }
.contact-form input.is-invalid:focus, .contact-form textarea.is-invalid:focus { outline-color: #e0533d; border-color: #e0533d; }
/* «Отправить» неактивна, пока не заполнены все поля */
.contact-form .btn[disabled], .contact-form .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Карта (Яндекс-виджет) ---------- */
.ymap {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: var(--radius);
  background: #101216;
  display: block;
  position: relative;
}
/* П10: скелет карты — пульсирующая молния, пока грузится API Яндекса */
.ymap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -24px 0 0 -17px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232E6FD9"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"/></svg>') center/contain no-repeat;
  animation: eh-map-pulse 1.6s ease-in-out infinite;
}
.ymap::after {
  content: "Загружаем карту…";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #8fa0b8;
}
.ymap.is-ready { background: #dfe6ee; }
.ymap.is-ready::before, .ymap.is-ready::after { content: none; }
@keyframes eh-map-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}
/* П10+: скелетон-загрузка — мягкий блик по тёмному фону, пока грузятся тайлы */
.ymap:not(.is-ready) {
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .07) 55%, transparent 80%),
    #101216;
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: eh-map-shimmer 1.5s linear infinite;
}
@keyframes eh-map-shimmer {
  0% { background-position: -60% 0, 0 0; }
  100% { background-position: 160% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ymap::before, .ymap:not(.is-ready) { animation: none; }
}
.ymap-large { height: 540px; }
.map-legend {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Произвольные страницы ---------- */
/* нижний отступ убран: тёмные финальные секции должны смыкаться с футером без белой полосы */
.flex-body .richtext, .flex-body > section > .container > .richtext { max-width: 820px; }

/* ---------- Подвал ---------- */
.site-footer {
  /* Ф250 «Постер-знак»: фирменный знак из брендбука (Знак/SVG/White_icon.svg),
     гигантским кадром у правого края. Пропорции знака 160×279 — он уже́ прежней
     рисованной молнии, поэтому и масштаб, и вылет за кромку пересчитаны: в кадре
     остаётся ступень знака, руки уходят за верх и низ футера */
  background: var(--dark);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 279"><path d="M160 120.634H96.694C93.6464 120.634 91.1771 117.555 91.1771 113.76V0L0 157.459H60.9653C65.3049 157.459 68.8252 161.843 68.8252 167.254V278.095L160 120.634Z" fill="%23F0F0F0" opacity=".92"/></svg>');
  background-repeat: no-repeat;
  /* только излом знака у кромки — не заходит на колонку контактов */
  background-position: right -90px center;
  background-size: auto 150%;
  color: var(--white);
  padding: 56px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-col a { color: var(--white); text-decoration: none; opacity: 0.85; }
.footer-col a:hover { opacity: 1; }
.footer-heading { font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; opacity: .6; }
.footer-phone { font-weight: 700; font-size: 20px; }
/* Почта в футере: клик — копирует адрес, показывает «Скопировано» */
.footer-email {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: var(--white); opacity: 0.85; cursor: pointer;
}
.footer-email:hover { opacity: 1; }
.footer-email .fe-label { border-bottom: 1px dashed rgba(255, 255, 255, 0.45); padding-bottom: 1px; }
.footer-email:hover .fe-label { border-bottom-color: rgba(255, 255, 255, 0.75); }
.footer-email svg { width: 15px; height: 15px; flex: 0 0 auto; }
.footer-email .fe-check, .footer-email .fe-done { display: none; }
.footer-email .fe-done { font-size: 12.5px; font-weight: 600; color: #7fe3b6; opacity: 1; }
.footer-email.is-copied .fe-copy { display: none; }
.footer-email.is-copied .fe-check { display: inline; color: #7fe3b6; }
.footer-email.is-copied .fe-done { display: inline; }
.footer-email.is-copied .fe-label { border-bottom-color: transparent; }
/* П6: соцсети в футере */
.footer-socials { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
/* текстовая ссылка «Телеграм-канал» перед иконкой — не круглая кнопка */
.footer-socials a.footer-tg-label {
  width: auto; height: auto; border-radius: 0; border: 0;
  display: inline; padding: 0; margin-right: 2px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
}
.footer-socials a.footer-tg-label:hover { background: none; text-decoration: underline; }
.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  color: var(--white);
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.footer-socials a:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.footer-socials svg { width: 17px; height: 17px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  opacity: 0.7;
}
.footer-bottom a { color: var(--white); }

/* иконка в карточке преимуществ */
.feature-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.feature-icon svg { width: 26px; height: 26px; }

/* ---------- FAQ-аккордеон ---------- */
.faq { max-width: 860px; }
/* П5: аккордеон + липкая карточка помощи в правой трети */
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}
.faq-help {
  position: sticky;
  top: 104px;
  background: var(--dark);
  background-image:
    radial-gradient(90% 150% at 88% -20%, rgba(6, 61, 131, 0.85), transparent 60%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.faq-help-title { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.faq-help-sub { font-size: 14px; opacity: 0.85; margin-bottom: 18px; }
.faq-help-phone {
  display: block;
  color: var(--white);
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
  margin-bottom: 16px;
}
.faq-help-tg { width: 100%; text-align: center; }
@media (max-width: 1040px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-help { position: static; }
}

.faq-item {
  background: var(--white);
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  margin-bottom: 10px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 46px 16px 18px;
  font-weight: 600;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-base) var(--ease-out);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item p { margin: 0; padding: 0 18px 16px; color: var(--text-muted); }

/* рубрика гида на карточке новостей */
.news-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

/* карточки — опора для абсолютно позиционированных деталей внутри */
.card, .feature-card, .faq-item { position: relative; }

/* ---------- Лайтбокс ---------- */
.eh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(2, 12, 27, 0.96);
  backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4vh 4vw;
  cursor: zoom-out;
}
.eh-lightbox.is-open { display: flex; }
/* сцена по размеру кадра: к её границам крепятся стрелки листания (29.09) */
.eh-lightbox__stage { position: relative; display: flex; flex: none; max-width: 100%; }
.eh-lightbox img, .eh-lightbox__video {
  display: block;
  max-width: 100%;
  /* высота экрана минус поля оверлея, подпись и зазор */
  max-height: calc(100vh - 8vh - 60px);
  max-height: calc(100dvh - 8vh - 60px);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.eh-lightbox img[hidden], .eh-lightbox__video[hidden] { display: none; }
/* ролик в лайтбоксе: те же габариты, что у фото, курсор — не «закрыть» */
.eh-lightbox__video { background: #000; cursor: default; }
.eh-lightbox__close, .eh-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
}
.eh-lightbox__close { top: 18px; right: 22px; width: 44px; height: 44px; }
.eh-lightbox__close svg { width: 20px; height: 20px; }
/* листание — появляется, только если в группе больше одного кадра; центр кружка
   стоит на левой/правой границе кадра */
.eh-lightbox__nav { top: 50%; width: 52px; height: 52px; display: none;
  transition: transform var(--t-quick) var(--ease-out), background-color var(--t-base) var(--ease-out); }
.eh-lightbox.has-many .eh-lightbox__nav { display: grid; }
.eh-lightbox__prev { left: 0; transform: translate(-50%, -50%); }
.eh-lightbox__next { right: 0; transform: translate(50%, -50%); }
.eh-lightbox__prev:active { transform: translate(-50%, -50%) scale(0.94); }
.eh-lightbox__next:active { transform: translate(50%, -50%) scale(0.94); }
.eh-lightbox__cap {
  /* подпись идёт сразу под фото (колонка), а не прибита к низу экрана:
     на телефоне иначе она отрывалась от кадра на пол-экрана */
  margin: 0;
  flex: none;
  max-width: min(90vw, 720px);
  text-align: center;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1.4;
}
.eh-lightbox__cap i { font-style: normal; color: rgba(255, 255, 255, 0.55); margin-left: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  /* телефон: кадр во всю ширину — стрелки внутри кадра, у его краёв */
  .eh-lightbox__nav { width: 42px; height: 42px; }
  .eh-lightbox__cap { font-size: 13px; }
  .eh-lightbox__prev { left: 10px; transform: translateY(-50%); }
  .eh-lightbox__next { right: 10px; transform: translateY(-50%); }
  .eh-lightbox__prev:active, .eh-lightbox__next:active { transform: translateY(-50%) scale(0.94); }
}

/* ---------- Соцсети ---------- */
/* вертикальный список сетей, у каждой — QR (скрыт на тач-устройствах) */
.socials-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.social-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px 14px 16px;
  text-decoration: none;
  color: var(--text);
}
.social-qr {
  margin-left: auto;
  background: var(--white);
  border: 1px solid #e5eaf1;
  border-radius: 10px;
  padding: 7px;
  line-height: 0;
  flex: none;
}
.social-qr img { width: 72px; height: 72px; display: block; }
@media (hover: none), (max-width: 700px) {
  .social-qr { display: none; } /* на телефоне QR бесполезен — клик ведёт напрямую */
  .social-arrow { margin-left: auto; }
}
.social-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.social-icon svg { width: 24px; height: 24px; }
.social-icon--telegram { background: #2aabee; }
.social-icon--vk { background: #0077ff; }
.social-icon--dzen { background: #1f1f1f; }
.social-icon--youtube { background: #ff0033; }
.social-icon--rutube { background: #100943; }
.social-meta b { display: block; font-size: 15px; }
.social-meta small { color: var(--text-muted); font-size: 12px; }
.social-arrow { margin-left: 18px; color: var(--blue); font-weight: 700; }

/* ---------- Калькулятор выгоды ---------- */
.sc-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  margin-top: 8px;
}
.sc-fuels { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
/* фон калькулятора — Ф31 «Спидометр» через класс .bg-speedometer в шаблоне */
/* калькулятор на белом (правка 06.07): чипы топлива — базовые тёмные */
.savings-calc { background: var(--white); }
.sc-slider-label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; opacity: .9; }
.sc-km {
  width: 100%;
  accent-color: #4d94e8;
  height: 26px;
  cursor: pointer;
}
.sc-big {
  /* <output> инлайновый по умолчанию — возвращаем блочное поведение прежнего <p> */
  display: block;
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin: 16px 0 4px;
}
/* «Предохранитель» ширины: хвост « ₽/мес» пришпилен справа, гуляет только
   невидимый отступ слева перед «−». 12ch влезает худший «− 99 999 ₽/мес». */
.sc-save {
  display: inline-block;
  min-width: 12ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.sc-save-year { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.sc-km-out { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sc-note { font-size: 13.5px; opacity: .8; margin: 0; }
.sc-bars { display: flex; flex-direction: column; gap: 14px; }
.sc-row-lab { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin-bottom: 6px; }
.sc-row-lab b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.sc-row-save { color: #1F5F4A; font-weight: 700; margin-left: 6px; }
.sc-bar { height: 14px; border-radius: 7px; background: #e9edf3; overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: 7px; transition: width var(--t-move) var(--ease-out); }
.sc-bar i.fuel { background: #b6543f; }
.sc-bar i.ev { background: #2e9e5b; }
.sc-fine { font-size: 12px; color: var(--text-muted); margin: 26px 0 0; max-width: 720px; }
.sc-fine a { color: inherit; }

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
  .hero-inner, .hub-hero-inner, .ti, .contact-inner, .sc-grid { grid-template-columns: 1fr; }
  /* Б2: правило .hero--video .hero-inner специфичнее — сбрасываем его явно,
     иначе видео остаётся в узкой колонке и вылезает за правый край */
  .hero--video .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .ti-reversed .ti-text { order: 0; }
  .footer-inner { grid-template-columns: 1fr; }
  /* Б1: на мобильных футер — сплошная тёмно-синяя заливка, без молнии Ф250
     (белый знак наползал в центр и глушил ссылки) */
  .site-footer { background-image: none; }
  .header-support { display: none; }
  /* на мобиле шапка компактнее: 66 px (правка юзера 13.08) */
  /* Капсула с первого кадра (26.09.2026): логотип 38 px и «Меню» в капсуле 50 px;
     отступы — от кромки капсулы (12 px) до содержимого: 12 px слева, «Меню» — 6 px от края */
  .header-inner, .site-header.scrolled .header-inner { height: 66px; padding-inline: 24px 18px; }
  .logo img, .site-header.scrolled .logo img { height: 38px; }
  .burger { display: flex; margin-left: auto; }
  /* Меню — карточка из жидкого стекла (25.09.2026): раскрывается из капсулы шапки,
     страница под ней затемнена и не прокручивается; тап мимо, прокрутка страницы и Escape
     закрывают (site.js). Плавность (26.09): только opacity + transform на заранее
     отрисованном слое — первый кадр после нажатия не ждёт отрисовки карточки;
     закрытую карточку site.js делает inert (не фокусируется, скрыта от чтения экрана). */
  .main-nav {
    --h-fg: #fff; --h-ul: #c4d8f1; --h-dim: #9ba9b9; --h-ic: rgba(255, 255, 255, 0.28);
    display: flex;
    position: absolute;
    top: 8px;
    left: 12px;
    right: 12px;
    z-index: 6;
    flex-direction: column;
    gap: 0;
    padding: 0 18px 20px;
    border-radius: 28px;
    background: rgba(14, 16, 20, 0.8);
    -webkit-backdrop-filter: blur(21.6px) saturate(1.8);
    backdrop-filter: blur(21.6px) saturate(1.8);
    box-shadow: inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, 0.5),
      inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.18), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    text-shadow: none;
    /* ландшафт телефона: карточка выше экрана — прокручивается сама, страница стоит */
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    transform-origin: 50% 25px; /* центр капсулы — карточка «выходит» из неё */
    will-change: transform, opacity;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) cubic-bezier(0.4, 0, 1, 1);
  }
  .site-header .header-inner > .main-nav:not(.open) { pointer-events: none; }
  .main-nav.open {
    opacity: 1;
    transform: none;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-move) var(--ease-out);
  }
  .nav-top { display: flex; align-items: center; gap: 10px; height: 50px; flex: none; margin-bottom: 4px; color: #fff; font-weight: 700; font-size: 14px; }
  .nav-top-bolt { width: 13px; height: 22px; flex: none; }
  .nav-top-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-close {
    display: grid; place-items: center; width: 38px; height: 38px; margin-right: -12px; flex: none;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer;
  }
  .main-nav > a { padding: 12px 2px; font-size: 19px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 5;
    background: rgba(4, 6, 9, 0.45);
    opacity: 0; visibility: hidden; touch-action: none;
    will-change: opacity;
    transition: opacity var(--t-base) var(--ease-out), visibility 0s linear 0.2s;
  }
  .site-header.nav-open .nav-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--t-move) var(--ease-out), visibility 0s; }
  /* «Развитие сети»: на мобиле фильтры переносятся под заголовок — отдаём зазор
     не между заголовком и чипами (32px от .section-title), а под чипами перед карточками */
  #hubs .section-title { margin-bottom: 12px; }
  #hubs .hubs-filter { margin-bottom: 26px; }
  /* мобильная панель: группа «Медиа» с подпунктами + телефон белой кнопкой */
  .nav-media-link { display: none; }
  .nav-media-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 16px;
  }
  .nav-media-group a { padding: 8px 2px; font-size: 16px; }
  .nav-media-group .nav-group-title { padding-bottom: 4px; }
  .nav-media-group .nav-group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7f95b5;
    opacity: 1;
  }
  .main-nav .nav-phone {
    display: block;
    margin-top: 18px;
    text-align: center;
    background: var(--white);
    color: var(--dark);
    font-weight: 700;
    font-size: 16px;
    border-radius: 999px;
    padding: 14px;
    border-bottom: 0;
    opacity: 1;
  }
  /* строка поддержки под кнопкой телефона: подпись + иконки MAX/TG */
  .main-nav .nav-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
  }
  .section { padding: 44px 0; }
}

/* ==================================================================
   Раунд «И1–И6 + видео»: живой тариф, панель действий, удобства,
   калькулятор парка, веха сети, кино-обвязка хиро-видео (В1+В2) */

/* --- И1 «Живой тариф»: пилюля с пульсирующей точкой --- */
.live-tariff {
  /* по дизайну кнопки «Найти хаб»: чернильная плита, radius-sm (правка 08.07) */
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  background: var(--dark);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}
.live-tariff[hidden] { display: none; }
.lt-dot { width: 8px; height: 8px; border-radius: 50%; background: #39d98a; flex-shrink: 0; }
.live-tariff.is-on .lt-dot {
  box-shadow: 0 0 0 0 rgba(57, 217, 138, 0.5);
  animation: lt-pulse 1.8s infinite;
}
.live-tariff.is-wait .lt-dot { background: #8fb8f2; }
@keyframes lt-pulse {
  70% { box-shadow: 0 0 0 8px rgba(57, 217, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(57, 217, 138, 0); }
}
/* цена — хвоя, осветлённая для тёмного фона (правка юзера 08.07) */
.lt-price { color: #7cc7a1; font-weight: 700; white-space: nowrap; }
.lt-count { opacity: 0.72; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-text .live-tariff { display: flex; width: max-content; max-width: 100%; margin-top: 18px; }
.hub-live { margin: -6px 0 18px; }
/* мобила: ссылка «Расписание…» дублирует живой бейдж (оба ведут на /tarify/) —
   прячем ссылку, когда бейдж показан; отрицательный отступ бейджа снимаем,
   иначе он наезжает на перенесённую строку (скрин юзера 21.07) */
@media (max-width: 700px) {
  .hub-live { margin: 10px 0 18px; }
  .section-head:has(+ .hub-live .live-tariff:not([hidden])) .section-more { display: none; }
}

/* О компании — «Досье» (вариант А борда 30.09.2026): плитка хабов, паспорт, рост сети, структура,
   таблица хабов и матрица разъёмов, пресса, ответы, реквизиты. Размеры — токены дизайн-системы. */
.about-page { color: #16191d; background: #fff; }
.about-page main { background: #fff; }
.about-hero { background: #fff; padding: var(--sp-band) 0 var(--sp-next); }
.about-hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
/* H1 длинный (формулировка владельца) — кегль ниже --h1, чтобы встать в четыре строки */
.about-hero h1 { font-size: clamp(27px, 2.7vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: pretty; color: var(--dark); border-left: 4px solid var(--dark); padding-left: 22px; margin-top: 12px; }
.about-lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; max-width: 62ch; margin-top: 18px; }
.about-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.about-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.about-tile { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r-inner); background: var(--ink-0); color: #fff; text-decoration: none; }
.about-tile--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; border-radius: var(--r-photo); }
.about-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-glass) var(--ease-out); }
.about-tile:hover img { transform: scale(1.04); }
.about-tile-cap { position: absolute; inset: auto 0 0; padding: 22px 8px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.about-tile-cap b, .about-tile-cap small { display: block; }
.about-tile-cap small { font-size: 11px; font-weight: 600; color: #d8dde4; margin-top: 2px; }
.about-tile:not(.about-tile--big):not(.about-tile--plan) small { display: none; }
.about-tile--big .about-tile-cap { font-size: 15px; padding: 34px 14px 12px; }
.about-tile--plan b { margin-top: 2px; }
.about-dark { --focus: #fff; }
.about-nav { margin-bottom: var(--sp-next); }
.about-section[id] { scroll-margin-top: calc(134px - var(--sp-sec)); }
.about-paper { background: #f7f8f8; }
.about-dark { color: #fff; }
.about-dark .about-h2 { color: #fff; }
.about-h2 { color: var(--dark); margin-top: 10px; }
.about-h3 { font-size: var(--h3); font-weight: 800; letter-spacing: -.02em; color: var(--dark); margin-top: var(--sp-band); }
.about-sub { font-size: 16px; line-height: 1.6; max-width: 72ch; margin-top: 8px; }
.about-note { font-size: 13px; line-height: 1.6; color: #5b6676; max-width: 90ch; margin-top: 14px; }
.about-metrics { color: #fff; }
.about-metrics-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about-metrics-inner > div { padding: 4px 22px; border-left: 1px solid; }
.about-metrics-inner > div:first-child { border: 0; padding-left: 0; }
.about-metrics strong { display: block; font-size: clamp(24px, 3vw, 38px); font-weight: 800; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.about-metrics span { display: block; font-size: 13px; margin-top: 4px; }
.about-pass { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin-top: 22px; }
.about-pass > div { border-top: 1px solid rgba(2, 20, 43, .12); padding: 14px 0 18px; }
.about-pass dt { font-size: 12.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; }
.about-pass dd { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--dark); }
.about-growth { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 22px 0 0; padding: 0; }
.about-growth li { display: flex; flex-direction: column; }
.about-growth-bar { height: 136px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.about-growth-bar b { font-size: 20px; font-weight: 800; line-height: 1; color: var(--dark); font-variant-numeric: tabular-nums; }
.about-growth-bar i { display: block; width: min(64px, 70%); height: calc(var(--v) * 104px); background: var(--green); border-radius: 6px 6px 0 0; }
.about-growth-node { position: relative; flex: 1; border-top: 2px solid var(--dark); padding: 14px 12px 0 0; font-size: 13.5px; line-height: 1.45; }
.about-growth-node small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.about-growth-node b { display: block; font-size: 15.5px; color: var(--dark); margin: 4px 0 2px; }
.about-growth .is-plan .about-growth-node::before { content: ""; position: absolute; left: 0; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: #f7f8f8; box-shadow: inset 0 0 0 2px var(--dark); }
.about-legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 28px; margin-top: 22px; }
.about-legal-grid > div { border-top: 1px solid #c9ced6; padding: 18px 0; }
.about-legal-grid small { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.about-legal-grid h3 { font-size: var(--h3); font-weight: 800; letter-spacing: -.02em; color: var(--dark); margin: 8px 0 6px; }
.about-legal-grid p { font-size: 14.5px; }
.about-legal-grid .about-inn { font-size: 13px; font-weight: 600; color: var(--dark); font-variant-numeric: tabular-nums; margin-top: 6px; }
.data-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--dark); margin-top: 22px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 13px 14px 13px 0; border-bottom: 1px solid rgba(2, 20, 43, .12); text-align: left; vertical-align: baseline; font-weight: 500; }
.data-table thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.data-table tbody th { font-size: 16px; font-weight: 700; color: var(--dark); white-space: nowrap; }
.data-table td:last-child { white-space: nowrap; }
.about-phone { display: none; }
.about-matrix { margin-top: 16px; font-size: 14px; table-layout: fixed; }
.about-matrix th:not(:first-child), .about-matrix td { text-align: center; padding-right: 0; color: #9aa3af; }
.about-matrix thead th:not(:first-child) { text-transform: none; font-size: 12px; letter-spacing: .02em; color: var(--text-soft); }
.about-matrix th:first-child { width: 28%; }
.about-matrix .is-yes { color: var(--green); }
.about-press { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: #c6cdd7; }
.about-dark .about-button { background: #fff; color: var(--dark); }
.about-dark .about-button:hover { background: var(--paper-hover); color: var(--dark); }
.about-faq { border-top: 1px solid var(--dark); margin-top: 20px; }
.about-faq summary { font-weight: 700; }
.about-next { padding: var(--sp-band) 0; }
.about-next-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.about-next a { display: block; border: 1px solid rgba(2, 20, 43, .12); border-radius: var(--r-photo); padding: 16px 18px; background: #fff; color: var(--dark); font-size: 16px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: border-color var(--t-base) var(--ease-out); }
.about-next a:hover { border-color: var(--dark); }
.about-next small { display: block; font-size: 13px; font-weight: 500; line-height: 1.45; color: #5b6676; margin-top: 6px; }
@media (max-width: 900px) {
  .about-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .about-pass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .about-hero h1 { padding-left: 16px; }
  /* плитка листается каруселью: нативный scroll-snap, без скрипта */
  .about-bento { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -24px; padding: 0 24px; scroll-padding: 0 24px; }
  .about-bento::-webkit-scrollbar { display: none; }
  .about-tile, .about-tile--big { flex: 0 0 86%; aspect-ratio: 3 / 2; scroll-snap-align: start; border-radius: var(--r-photo); }
  .about-tile-cap, .about-tile--big .about-tile-cap { font-size: 14px; padding: 30px 14px 12px; }
  .about-tile:not(.about-tile--big):not(.about-tile--plan) small { display: block; }
  .about-section[id] { scroll-margin-top: calc(118px - var(--sp-sec)); }
  .about-metrics-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .about-metrics-inner > div { padding: 4px 8px 4px 14px; }
  .about-metrics-inner > div:nth-child(3) { border: 0; padding-left: 0; }
  .about-metrics strong { font-size: clamp(18px, 6vw, 26px); }
  .about-pass { grid-template-columns: minmax(0, 1fr); }
  .about-pass > div { padding: 10px 0 12px; }
  .about-growth { grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid rgba(2, 20, 43, .12); }
  .about-growth li { display: grid; gap: 6px; border-top: 1px solid rgba(2, 20, 43, .12); padding: 10px 0; }
  .about-growth-bar { order: 2; height: auto; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; }
  .about-growth-bar i { height: 10px; width: calc(var(--v) * 80%); border-radius: 10px; }
  .about-growth-node { border: 0; padding: 0; }
  .about-growth .is-plan .about-growth-node::before { display: none; }
  .data-table thead { display: none; }
  .data-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid rgba(2, 20, 43, .12); }
  .data-table th, .data-table td { padding: 0; border: 0; }
  .data-table tbody th, .data-table td:nth-child(2) { grid-column: 1 / -1; white-space: normal; }
  .about-phone { display: inline; }
  .about-matrix tr { grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; }
  .about-matrix th:first-child { width: auto; }
  .about-matrix tbody th { grid-column: auto; font-size: 14px; }
  .about-matrix td:not(.about-phone) { display: none; }
  .about-matrix td.about-phone { display: block; text-align: left; font-size: 13.5px; color: inherit; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .live-tariff.is-on .lt-dot { animation: none; } }

/* --- И3 бейджи удобств: пилюли в тёмном титуле хаба + иконки на карточках --- */
.hub-amenities {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.hub-amenities li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}
.hub-amenities .icon { width: 17px; height: 17px; opacity: 0.85; }
.hub-card-amen {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #eef2f7;
  color: var(--blue);
  flex-wrap: wrap;
  list-style: none;
}
.hub-card-amen .hca-i { display: inline-flex; position: relative; }
.hca-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hub-card-amen .icon { width: 18px; height: 18px; }
.hca-more { font-size: 12px; color: var(--text-muted); font-weight: 600; }
/* быстрый CSS-тултип вместо нативного title (тот всплывает через ~1–2 с) */
.hca-i::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-out);
  z-index: 6;
}
.hca-i::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-quick) var(--ease-out);
  z-index: 6;
}
.hca-i:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hca-i:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hca-i::after { transition: opacity var(--t-quick) var(--ease-out); transform: translateX(-50%); }
}

/* --- И2 панель действий на страницах хабов (только мобила) --- */
.hub-actionbar { display: none; }
@media (max-width: 760px) {
  .hub-actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    display: flex;
    background: rgba(10, 11, 14, 0.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .hub-actionbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 12px;
    color: var(--white);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
  }
  .hub-actionbar a + a { border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .hub-actionbar svg { width: 18px; height: 18px; opacity: 0.9; }
  /* контент и куки-бар не должны прятаться под панелью */
  body.page-hub { padding-bottom: 64px; }
  body.page-hub .cookie-bar { bottom: 66px; }
}

/* --- И5 калькулятор парка (B2B), светлый как все калькуляторы --- */
.fleet-calc .fc-intro { color: var(--text-muted); max-width: 640px; margin: 0 0 22px; }
.fc-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  padding: 28px;
}
.fc-row { display: block; margin-bottom: 22px; cursor: pointer; }
.fc-lab {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 10px;
}
.fc-lab b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-controls input[type="range"] { width: 100%; accent-color: var(--blue); }
.fc-note { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.fc-payoff {
  display: block;
  background: linear-gradient(180deg, #edf5f0, #e3efe8);
  border: 1px solid #cfe0d6;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  color: #3d5a4d;
}
.fc-payoff span { display: block; font-size: 13px; line-height: 1.45; }
.fc-payoff b {
  display: block;
  font-size: clamp(20px, 1.9vw, 26px);
  color: #1F5F4A;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.fc-payoff small { display: block; font-size: 12.5px; margin-top: 5px; color: #56705f; }
.fc-alt { font-size: 14px; color: var(--text-muted); margin: 14px 0 18px; }
.fc-alt b { font-variant-numeric: tabular-nums; color: var(--text); }
.fc-cta { width: 100%; }
@media (max-width: 760px) {
  .fc-grid { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
}

/* --- И6 «Веха сети»: счётчик + шкала до следующей отметки --- */
.milestone-section {
  background: var(--dark);
  color: var(--white);
  padding: 26px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background-image: linear-gradient(115deg,
    transparent 0 30%, rgba(255, 255, 255, 0.05) 30% 42%,
    transparent 42% 78%, rgba(255, 255, 255, 0.04) 78% 86%, transparent 86%);
}
.mile-value { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mile-num {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.mile-label { font-size: 15px; opacity: 0.8; }
.mile-bar {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  margin: 18px 0 10px;
}
.mile-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #0d5ac2, #5b97e0);
  border-radius: 2px;
  transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mile-bolt {
  position: absolute;
  left: 0; top: 50%;
  width: 17px; height: 17px;
  transform: translate(-50%, -50%);
  fill: var(--amber, #F2B705);
  filter: drop-shadow(0 0 7px rgba(242, 183, 5, 0.75));
  transition: left 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mile-sub { margin: 0; font-size: 13px; opacity: 0.72; }
.mile-sub b { font-variant-numeric: tabular-nums; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .mile-fill, .mile-bolt { transition: none; } }

/* --- В1 амбиент-свечение за видео + В2 кино-плашка ---
   hv-frame клипует скруглением плашку/прогресс; свечение — вне рамки */
.hero-media::before {
  content: "";
  position: absolute;
  inset: -6% -10% -12%;
  background:
    radial-gradient(58% 55% at 50% 62%, rgba(38, 99, 196, 0.45), transparent 70%),
    radial-gradient(38% 40% at 74% 22%, rgba(242, 183, 5, 0.16), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}
.hv-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}
.hv-frame .hero-video { border-radius: 0; }
.hv-plate {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 14px;
  background: linear-gradient(0deg, rgba(2, 10, 24, 0.78), rgba(2, 10, 24, 0.28) 70%, transparent);
  color: var(--white);
  font-size: 13px;
}
.hv-bolt {
  width: 14px; height: 14px;
  fill: var(--white);
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
}
.hv-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv-time { margin-left: auto; font-variant-numeric: tabular-nums; opacity: 0.85; flex-shrink: 0; }
.hv-time[hidden] { display: none; }
.hv-plate .hero-video-fs {
  position: static;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.hv-plate .hero-video-fs:hover { background: rgba(255, 255, 255, 0.25); }
/* кнопка звука — близнец кнопки фуллскрина; иконка меняется классом is-on */
.hv-plate .hero-video-audio {
  position: static;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-base) var(--ease-out);
}
.hv-plate .hero-video-audio:hover { background: rgba(255, 255, 255, 0.25); }
.hero-video-audio .ico-on { display: none; }
.hero-video-audio.is-on .ico-on { display: block; }
.hero-video-audio.is-on .ico-off { display: none; }
.hero-video-audio.is-on { background: rgba(255, 255, 255, 0.28); }
/* Дорожка перемотки лежит поверх плашки, поэтому у плашки снизу отступ
   в её высоту — иначе полоса откусывала бы низ кнопок звука и фуллскрина */
.hv-seek {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  z-index: 3;
  cursor: pointer;
  touch-action: none; /* тянем полосу, а не скроллим страницу */
}
.hv-seek::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.24);
}
.hv-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 0;
  background: var(--white);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}
.hv-seek:hover::before, .hv-seek:hover .hv-progress,
.hv-seek:focus-visible::before, .hv-seek:focus-visible .hv-progress { height: 5px; }
.hv-seek:focus-visible { outline: 2px solid var(--white); outline-offset: -3px; }
@media (max-width: 760px) {
  .hero-media::before { inset: -4% -6% -8%; filter: blur(18px); }
}

/* на /tarify/ «живой тариф» встаёт третьим чипом в ряд день/ночь —
   тот же вид, что .hh-time (правка юзера 08.07); цену не дублируем */
.hh-times .live-tariff {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
}
.hh-times .lt-count { font-weight: 400; }
/* цифра внутри жирной строки плашки наследует её размер/цвет,
   а не 13px от .fc-payoff span */
.fc-payoff b .fc-month { display: inline; font-size: inherit; line-height: inherit; color: inherit; }
/* бейдж-ссылка: без подчёркивания, лёгкий отклик на ховер (клик → /tarify/) */
.live-tariff { text-decoration: none; }
.live-tariff[href]:hover { border-color: rgba(255, 255, 255, 0.32); transform: translateY(-1px); }
.live-tariff { transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }

/* ---------- Карта сети на MapLibre (/elektrohaby/) ---------- */
.ehm-pin {
  width: 40px; height: 48px; cursor: pointer; z-index: 2;
  --plate: #101216; --bolt: #ffffff;
  filter: drop-shadow(0 3px 6px rgba(2, 20, 43, 0.4));
}
.ehm-pin.is-soon { --plate: #F2B705; --bolt: #101216; }
/* выбранный пин — фирменный тёмно-синий + чуть крупнее (правка юзера 08.07). Масштаб — у svg внутри: transform самого
   пина занят MapLibre (позиция), поэтому scale на .ehm-pin не работал (найдено на борде карты 04.10.2026) */
.ehm-pin.is-selected { --plate: #101216; --bolt: #ffffff; z-index: 3; }
.ehm-dot {
  width: 20px; height: 20px; cursor: pointer;
  --plate: #063D83; --bolt: #ffffff;
  filter: drop-shadow(0 1px 3px rgba(2, 20, 43, 0.4));
}
.ehm-dot.is-selected { --plate: #101216; }
.ehm-pin svg, .ehm-dot svg { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform var(--t-move) var(--spring); }
.ehm-dot svg { transform-origin: 50% 50%; }
.ehm-pin:hover svg { transform: scale(1.08); }
.ehm-pin.is-selected svg { transform: scale(1.18); }
.ehm-dot:hover svg { transform: scale(1.25); }
.ehm-dot.is-selected svg { transform: scale(1.3); }

.maplibregl-popup-content {
  font-family: var(--font-body);
  border-radius: 14px;
  padding: 16px 18px 14px;
  /* ширина не зависит от длины названия: у коротких («Южный») кнопки раньше
     переносились в две строки, у длинных — нет. Теперь карточка одинаковая */
  min-width: 320px;
  max-width: calc(100vw - 64px);
  box-shadow: 0 14px 40px rgba(2, 20, 43, 0.35);
}
.maplibregl-popup-close-button { font-size: 18px; padding: 4px 9px; color: var(--text-muted); }
.ehm-title { font-weight: 700; font-size: 14.5px; color: var(--text); margin: 0 22px 5px 0; }
.ehm-net { font-size: 11px; color: var(--text-muted); margin: 0 0 6px; font-weight: 600; letter-spacing: 0.03em; }
.ehm-rate { font-size: 12.5px; color: var(--text-muted); margin: 0 0 7px; }
.ehm-rate span { color: var(--amber, #F2B705); }
.ehm-rate b { color: #8a6d00; }
.ehm-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 999px; padding: 3px 9px; margin-bottom: 8px;
  background: #e8f1ec; color: #1F5F4A;
}
.ehm-chip.is-soon { background: #fdf1dc; color: #86590f; }
.ehm-meta { font-size: 12px; color: var(--text-muted); margin: 0 0 4px; }
.ehm-happy { font-size: 12px; color: #1F5F4A; margin: 0 0 10px; font-weight: 600; }
.ehm-links { display: flex; gap: 8px; margin-top: 8px; }
.ehm-links a {
  flex: 1; text-align: center; text-decoration: none; white-space: nowrap;
  font-size: 12px; font-weight: 600; border-radius: 9px; padding: 9px 10px;
}
.ehm-links a.pg { background: var(--dark); color: var(--white); }
.ehm-links a.ya { border: 1px solid #d4dce8; color: var(--blue); }

/* мобила: попап не шире экрана — min-width уступает, ширину держит max-width */
@media (max-width: 420px) {
  .maplibregl-popup-content { min-width: 0; }
}

/* ---------- Второе липкое меню: вторая капсула с «жидким ползунком» ----------
   sticky-menu-board.html, вариант 03 (выбор владельца 26.09.2026). Одна система для якорей
   хаба (.hub-anchors) и рубрик FAQ (.fl-chips): под капсулой шапки (12–72 px) — вторая капсула
   44 px с зазором 6 px и теми же краями (--sub-cap = --cap шапки), стекло того же рецепта,
   тон — по фону под ней (data-tone ставит site.js). Активный пункт — пилюля-ползунок, которую
   clip-path вырезает из слоя во всю ширину ряда и двигает с пружиной; текст под ней инвертируется.
   Липкий слой прозрачен и не ловит клики — страница по бокам капсулы остаётся живой.
   Стекло — на ::before липкого слоя (backdrop-filter на самом sticky ломает липкость в Chrome),
   ряд — прозрачный, с маской по краям только когда пункты не помещаются. */
.eh-subnav {
  --cw: 1280px;
  --sub-cap: max(12px, calc((100% - var(--cw)) / 2 - 4px));
  --sub-top: 6px; --sub-h: 44px; --sub-item: 34px;
  --spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  /* светлое стекло по умолчанию: обе полосы стоят на светлых блоках */
  --s-fg: #101216; --s-dim: rgba(16, 18, 22, 0.5); --s-hover: rgba(2, 20, 43, 0.06);
  --s-act-bg: #101216; --s-act-fg: #fff;
  --s-glass: rgba(255, 255, 255, 0.55); --s-rim: rgba(255, 255, 255, 0.95); --s-rim2: rgba(16, 18, 22, 0.08);
  --s-shadow: 0 18px 40px -20px rgba(2, 20, 43, 0.35);
  position: sticky;
  top: 72px;
  z-index: 60;
  /* зазор под шапкой — padding, не margin ряда: margin схлопнулся бы с липким слоем */
  height: calc(var(--sub-h) + var(--sub-top) * 2);
  padding-top: var(--sub-top);
  pointer-events: none;
}
/* метка места полосы в потоке (site.js): по ней считается, где капсула, когда она ещё не прилипла */
.eh-subnav-mark { display: block; height: 0; }
@media (min-width: 1700px) { .eh-subnav { --cw: 1560px; } }
.eh-subnav[data-tone="dark"] {
  --s-fg: #fff; --s-dim: rgba(255, 255, 255, 0.6); --s-hover: rgba(255, 255, 255, 0.1);
  --s-act-bg: #fff; --s-act-fg: #101216;
  --s-glass: rgba(11, 12, 15, 0.36); --s-rim: rgba(255, 255, 255, 0.55); --s-rim2: rgba(255, 255, 255, 0.2);
  --s-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.eh-subnav.tone-mixed { --s-glass: rgba(255, 255, 255, 0.8); }
.eh-subnav.tone-mixed[data-tone="dark"] { --s-glass: rgba(11, 12, 15, 0.64); }
.eh-subnav::before {
  content: "";
  position: absolute;
  top: var(--sub-top); height: var(--sub-h);
  left: var(--sub-cap); right: var(--sub-cap);
  border-radius: 999px;
  background-color: var(--s-glass);
  -webkit-backdrop-filter: blur(5.4px) saturate(1.9) brightness(1.05);
  backdrop-filter: blur(5.4px) saturate(1.9) brightness(1.05);
  box-shadow: inset 1.5px 1.5px 0 -0.5px var(--s-rim), inset -1px -1px 0 -0.5px var(--s-rim2),
    inset 0 0 18px rgba(255, 255, 255, 0.06), var(--s-shadow);
  transition: background-color var(--t-move) var(--ease-inout), box-shadow var(--t-move) var(--ease-inout);
}
.eh-subnav .eh-subnav-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 4px;
  max-width: none;
  height: var(--sub-h);
  margin: 0 var(--sub-cap);
  padding: 0 5px;
  border-radius: 999px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  pointer-events: auto;
}
.eh-subnav .eh-subnav-row::-webkit-scrollbar { display: none; }
/* пункты не помещаются — край, за которым есть ещё, мягко гаснет */
.eh-subnav-row.is-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px); mask-image: linear-gradient(90deg, transparent, #000 22px); }
.eh-subnav-row.is-r { -webkit-mask-image: linear-gradient(270deg, transparent, #000 22px); mask-image: linear-gradient(270deg, transparent, #000 22px); }
.eh-subnav-row.is-l.is-r {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.eh-subnav .eh-subnav-item {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--sub-item);
  padding: 0 14px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--s-fg);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  opacity: 1;
  cursor: pointer;
  transition: color var(--t-move) var(--ease-inout), background-color var(--t-base) var(--ease-out);
}
.eh-subnav .eh-subnav-item:hover { background-color: var(--s-hover); }
/* фокус — цвет текста капсулы: чернила на светлом стекле, белый на тёмном (контраст ≥ 3:1) */
.eh-subnav .eh-subnav-item:focus-visible { outline-offset: 2px; }
.eh-subnav-n { color: var(--s-dim); font-weight: 600; transition: color var(--t-move) var(--ease-out); }
/* без JS активный пункт залит (FAQ — по :checked в шаблоне, хаб — .is-active) */
.eh-subnav:not(.is-ready) .eh-subnav-item.is-active { background: var(--s-act-bg); color: var(--s-act-fg); }
.eh-subnav .eh-subnav-item.is-on { color: var(--s-act-fg); }
.eh-subnav .eh-subnav-item.is-on:hover { background-color: transparent; }
.eh-subnav .eh-subnav-item.is-on .eh-subnav-n,
.eh-subnav:not(.is-ready) .eh-subnav-item.is-active .eh-subnav-n { color: inherit; opacity: 0.6; }
/* ползунок — слой во всю ширину ряда, из которого clip-path вырезает пилюлю под активным
   пунктом: форма со скруглением сохраняется, а анимация идёт без перерасчёта раскладки */
.eh-subnav-thumb {
  position: absolute;
  z-index: 0;
  left: 0;
  top: calc((var(--sub-h) - var(--sub-item)) / 2);
  height: var(--sub-item);
  width: var(--sw, 100%);
  border-radius: 999px;
  background: var(--s-act-bg);
  clip-path: inset(0 calc(var(--sw, 100%) - var(--tx, 0px) - var(--tw, 0px)) 0 var(--tx, 0px) round 999px);
  opacity: 0;
  pointer-events: none;
  transition: clip-path var(--t-glass) var(--spring), background-color var(--t-move) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.eh-subnav.is-ready .eh-subnav-thumb { opacity: 1; }
.eh-subnav.is-snap .eh-subnav-thumb, .eh-subnav.is-snap .eh-subnav-item { transition: none; }
@media (max-width: 900px) {
  /* капсула 06·B: 8–58 px, края max(12 px, 50% − 170 px) */
  .eh-subnav { top: 58px; --sub-cap: max(12px, calc(50% - 170px)); --sub-h: 42px; --sub-item: 32px; }
  .eh-subnav .eh-subnav-row { justify-content: flex-start; }
  .eh-subnav .eh-subnav-item { font-size: 13px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .eh-subnav-thumb, .eh-subnav .eh-subnav-item, .eh-subnav::before { transition-duration: 0.01s !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .eh-subnav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #fff; }
  .eh-subnav[data-tone="dark"]::before { background-color: #0b0c0f; }
}
/* якоря: заголовок раздела встаёт на 12 px ниже второй капсулы (78 + 44 / 64 + 42) */
#obzor, #foto, #tarify, #razyomy, #zagruzka, #route, #contact, #schastlivye-chasy, #loyalty,
#arenda, #reklama, #fleet-calc { scroll-margin-top: 134px; }

/* ---------- Загруженность по часам (данные сети) ---------- */
/* ---------- №2: калькулятор стоимости зарядки ---------- */
.charge-calc .cc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; padding: 26px 28px; }
.cc-lab { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 700; color: var(--dark); }
.cc-lab:first-child { margin-top: 0; }
.cc-lab-range { display: flex; justify-content: space-between; align-items: baseline; }
.cc-lab-range b { font-size: 14px; color: var(--blue); font-variant-numeric: tabular-nums; }
.cc-car, .cc-power {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  border: 1.5px solid #cdd8e6;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--dark);
}
.cc-car:focus, .cc-power:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(6, 61, 131, .12); }

/* Комбобокс модели: аккуратный дропдаун, открывается по клику даже с вписанной моделью */
.cc-combo { position: relative; }
.cc-combo .cc-car { padding-right: 42px; }
.cc-combo-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #6b7c93; cursor: pointer;
}
.cc-combo-toggle svg { width: 18px; height: 18px; transition: transform var(--t-base) var(--ease-out); }
.cc-combo[data-open="true"] .cc-combo-toggle svg { transform: rotate(180deg); }
.cc-list {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid #dbe4ef; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(2, 20, 43, .16); max-height: 264px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility var(--t-base);
}
.cc-combo[data-open="true"] .cc-list { opacity: 1; visibility: visible; transform: translateY(0); }
.cc-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14.5px; color: var(--dark);
}
.cc-list li:hover, .cc-list li.is-hi { background: #eef4fb; }
.cc-list li.is-selected { background: var(--blue); color: #fff; }
.cc-opt-kwh { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-list li.is-selected .cc-opt-kwh { color: rgba(255, 255, 255, .8); }
.cc-list .cc-empty { display: block; padding: 12px; text-align: center; font-size: 13px; color: var(--text-soft); cursor: default; }
.cc-list .cc-empty:hover { background: none; }
.cc-carinfo { margin: 7px 0 0; font-size: 12.5px; color: var(--text-muted); min-height: 1.2em; }

/* Стилизованный select мощности — свой шеврон вместо уродливой системной стрелки */
.cc-select { position: relative; }
.cc-power { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 42px; cursor: pointer; }
.cc-select-arrow { position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; transform: translateY(-50%); color: #6b7c93; pointer-events: none; }

/* Двойной ползунок «заряд от–до» */
.cc-track--dual { position: relative; height: 34px; margin-top: 6px; }
.cc-rail { position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); background: #dbe4ef; border-radius: 999px; }
.cc-fill { position: absolute; top: 50%; height: 6px; transform: translateY(-50%); background: var(--blue); border-radius: 999px; pointer-events: none; }
.cc-track--dual input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 34px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.cc-track--dual input[type="range"]::-webkit-slider-runnable-track { background: transparent; border: 0; }
.cc-track--dual input[type="range"]::-moz-range-track { background: transparent; border: 0; }
.cc-track--dual input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; box-sizing: border-box; pointer-events: auto; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; border: 2px solid var(--blue);
  box-shadow: 0 1px 5px rgba(2, 20, 43, .28); cursor: grab;
}
.cc-track--dual input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.cc-track--dual input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue); box-shadow: 0 1px 5px rgba(2, 20, 43, .28); cursor: grab;
}
.cc-track--dual input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(6, 61, 131, .22); }
.cc-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-soft); margin-top: 6px; }
.cc-scale-green { color: #1F5F4A; font-weight: 600; }
.cc-result { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid #e5eaf1; padding-left: 30px; }
.cc-big { display: block; margin: 0; font-size: 30px; font-weight: 800; color: var(--dark); letter-spacing: -.01em; }
.cc-happy { margin: 10px 0 0; }
.cc-happy .hh { display: inline-block; background: #e7f1ec; color: #1F5F4A; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; }
.cc-happy .hh b { font-weight: 800; }
.cc-meta { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }
.cc-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--text-soft); max-width: 72ch; }
@media (max-width: 820px) {
  .charge-calc .cc-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px 18px; }
  .cc-result { border-left: 0; border-top: 1px solid #e5eaf1; padding: 18px 0 0; }
  .cc-big { font-size: 24px; }
}

/* ---------- Трафик в карточках аренды (/b2b/) ---------- */
.room-traffic {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1F5F4A;
  background: #e7f1ec;
  border-radius: 999px;
  padding: 4px 12px;
}
.room-card .room-chip { margin-top: 10px; margin-left: 6px; }

/* ---------- живой тариф в попапе карты ---------- */
.ehm-happy.is-on b { color: #1F5F4A; }

/* ---------- B2B: реклама на хабах (секция «Экран-герой») ---------- */
.brands-section { overflow: hidden; }
.brands-inner { display: flex; align-items: center; gap: 48px; }
.brands-text { flex: 1.25; min-width: 0; }
.brands-lead { max-width: 58ch; margin: -6px 0 22px; font-size: 16px; line-height: 1.65; color: #b8c4d8; }
.brands-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.brands-chips li {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #e3eaf4;
}
.brands-chips li:first-child { background: var(--white); color: var(--dark); border-color: var(--white); font-weight: 700; }
.brands-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.brands-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.brands-btn-tg { background: transparent; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.45); }
.brands-btn-tg:hover { background: rgba(255, 255, 255, 0.08); }
.brands-totem { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.brands-screen {
  width: 240px;
  aspect-ratio: 9 / 14;
  border-radius: 14px;
  border: 6px solid #0a1322;
  /* фон как у блока счастливых часов: тёмный + веер лучей Ф31 */
  background-color: var(--dark);
  background-image: repeating-conic-gradient(from 285deg at -4% 106%, rgba(15, 58, 110, 0.55) 0 1.6deg, transparent 1.6deg 11deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 20px;
  box-shadow: 0 0 44px rgba(110, 163, 236, 0.4), inset 0 0 28px rgba(0, 0, 0, 0.35);
}
.brands-screen svg { height: 64px; width: auto; }
.brands-screen span { font-size: 12.5px; line-height: 1.55; color: #c9d6ea; }
.brands-leg { width: 14px; height: 40px; background: #0a1322; border-radius: 0 0 5px 5px; }
@media (max-width: 900px) {
  .brands-inner { flex-direction: column; align-items: flex-start; }
  .brands-totem { align-self: center; }
  .brands-screen { width: 200px; }
}

/* ---------- страница «Реклама на хабах»: матрица + карточки ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.brand-hubs-intro { max-width: 72ch; margin: -8px 0 26px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }

/* ---------- плашка «Реклама на этом хабе» ---------- */
.brand-teaser-section { padding: 48px 0 64px; }
.brand-teaser { display: flex; align-items: center; gap: 20px; padding: 18px 24px; color: inherit; text-decoration: none; }
.brand-teaser-screen {
  flex: none;
  width: 86px;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  border: 4px solid #0a1322;
  background-color: var(--dark);
  background-image: repeating-conic-gradient(from 285deg at -4% 106%, rgba(15, 58, 110, 0.55) 0 1.6deg, transparent 1.6deg 11deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(110, 163, 236, 0.35);
}
/* фирменная молния по центру «экрана» */
.brand-teaser-screen svg { height: 26px; width: auto; flex: none; }
.brand-teaser-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-teaser-tx span { font-size: 15.5px; font-weight: 600; color: var(--dark); }
/* «Подробнее» — штатная кнопка btn btn-primary (цвета/ховер как у всех кнопок сайта);
   здесь только позиционирование в карточке */
.brand-teaser-go { margin-left: auto; white-space: nowrap; }
/* секция тёмная, но кнопка живёт на белой карточке — не инвертируем её,
   как .fleet-calc.section-dark .fc-cta */
.section-dark .brand-teaser .btn-primary { background: var(--dark); color: var(--white); }
.section-dark .brand-teaser .btn-primary:hover { background: var(--ink-hover); }
@media (max-width: 640px) {
  .brand-teaser { flex-wrap: wrap; }
  .brand-teaser-go { margin-left: 0; }
}

/* ---------- кликабельные заголовки-оглавления (страница «Медиа») ---------- */
.title-link { color: inherit; text-decoration: none; }
.title-link .title-arrow { display: inline-block; transition: transform var(--t-base) var(--ease-out); }
.title-link:hover { color: var(--link); }
.title-link:hover .title-arrow { transform: translateX(4px); }
/* на тёмных секциях (главная «Новости») — ховер светло-синим, видно на чернильном */
.section-dark .title-link:hover { color: var(--link); }

/* ---------- B2B: лента преимуществ «В обоих вариантах» под офферами ---------- */
.offers-shared { margin-top: 34px; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 28px; }
.offers-shared-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7cc7a1;
  margin-bottom: 18px;
}
.offers-shared-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 32px; }
.oshared-item { display: flex; gap: 14px; align-items: flex-start; }
.oshared-ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(124, 199, 161, 0.14);
  color: #7cc7a1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oshared-ic svg { width: 22px; height: 22px; }
.oshared-tx b { display: block; font-size: 15.5px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.oshared-tx span { font-size: 13px; line-height: 1.5; color: #a9bad2; }
@media (max-width: 900px) { .offers-shared-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ПРАВИЛО РИТМА (13.07): лид-оглавление тёмным по белому сливается
   с первым блоком; дальше чередование светлый/тёмный.
   ============================================================ */
.page-lead {
  background: var(--white);
  padding: 34px 0 8px;
}
/* Оглавление №06 «Боковая опора»: акцент у названия, чистое поле аннотации. */
.page-lead .page-hero-row { gap: 40px; }
.page-lead .page-title {
  color: var(--dark);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1.2;
  border-left: 4px solid #02142B;
  padding-left: 22px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.page-lead .page-intro { opacity: 1; color: var(--text-muted); }
.page-lead .page-intro--aside { border-left: 0; padding-left: 0; }
@media (max-width: 700px) {
  .page-lead .page-hero-row { gap: 18px; }
  .page-lead .page-intro { color: var(--text); }
}
/* первый блок сразу под лидом — белый и без верхнего зазора: один цельный блок */
.page-lead + section:not(.section-dark),
.page-lead + .flex-body > section:first-child:not(.section-dark) {
  background: var(--white);
  padding-top: 18px;
  border-top: 0;
}

/* ---------- офферы на СВЕТЛОМ (перекрас из тёмного) ---------- */
.offers-section--light { background: var(--white); }
.offers-section--light .offers-shared { border-top-color: #e5eaf1; }
.offers-section--light .offers-shared-label { color: var(--green); }
.offers-section--light .oshared-ic { background: #e7f1ec; color: var(--green); }
.offers-section--light .oshared-tx b { color: var(--dark); }
.offers-section--light .oshared-tx span { color: var(--text-muted); }
.offers-section--light .offer-card { border: 1px solid #e5eaf1; box-shadow: 0 8px 26px rgba(2, 20, 43, 0.07); }

/* ---------- калькулятор парка на ТЁМНОМ (карточка внутри белая) ---------- */
.fleet-calc.section-dark .fc-intro { color: #b8c4d8; }
/* внутри белой карточки текст тёмный (иначе наследует белый от .section-dark) */
.fleet-calc.section-dark .fc-grid.card { color: var(--text); }
.fleet-calc.section-dark .fc-grid.card .fc-lab { color: var(--text); }
.fleet-calc.section-dark .fc-cta.btn-primary { background: var(--dark); color: var(--white); }
.fleet-calc.section-dark .fc-cta.btn-primary:hover { background: var(--ink-hover); }

/* ---------- Кнопка-призрак (на тёмном фоне) ---------- */
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .4);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7); }

/* ---------- Примечание под заголовком секции ---------- */
.section-note { margin: 6px 0 0; font-size: 14px; color: var(--text-muted); }
.section-dark .section-note { color: rgba(255, 255, 255, .65); }

/* ---------- CTA в шапке хаба (строится/планируется) ---------- */
.hub-hero-cta { margin: 18px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hub-hero-cta-note { font-size: 13.5px; color: rgba(255, 255, 255, .72); max-width: 32ch; }
/* адрес в чипе «Адрес» — ссылка на карточку хаба в Яндекс.Картах */
.hub-facts dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, .42);
  transition: border-color var(--t-base) var(--ease-out);
}
.hub-facts dd a:hover { border-bottom-color: var(--white); }
.page-hero--light .hub-hero-cta-note { color: var(--text-muted); }

/* на тёмном page-hero тёмная btn-primary сливается с фоном — делаем светлой */
.hub-hero-cta .btn-primary,
.error-actions .btn-primary { background: var(--white); color: var(--dark); }
.hub-hero-cta .btn-primary:hover,
.error-actions .btn-primary:hover { background: var(--light); }

/* ---------- Брендовая страница 404 ---------- */
.error-hero { text-align: center; }
.error-code {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(56px, 12vw, 104px); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--white); margin: 0 0 14px;
}
.error-bolt { width: .62em; height: .62em; color: var(--accent, #2E6FD9); flex: none; }
.error-lead { font-size: 17px; color: rgba(255, 255, 255, .82); margin: 0 auto 26px; max-width: 46ch; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.error-hubs { margin-top: 34px; }
.error-hubs-title {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin: 0 0 12px;
}
.error-hubs-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.error-hubs-list a {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  color: var(--white); font-weight: 600; font-size: 14px; transition: background var(--t-base) var(--ease-out);
}
.error-hubs-list a:hover { background: rgba(255, 255, 255, .16); }
.error-hub-city { color: rgba(255, 255, 255, .6); font-weight: 500; }

/* ---------- Гибрид В6 (28.07): светлая шапка страницы хаба ---------- */
/* Порядок: бейдж → H1 → адрес-плита → рейтинг → «Маршрут» → строки-линейки;
   фото-карусель справа ~48% на всю высоту колонки. Пилюли тёмно-синие,
   звезда #F2B705 — как в «Развитии сети» на главной. */
.hub-hero--light {
  background: var(--light);
  color: var(--dark);
  background-image: linear-gradient(115deg, transparent 0 38%, rgba(2, 20, 43, 0.04) 38% 66%, transparent 66%);
  padding: 40px 0 34px;
}
.hub-hero--light .page-title { color: var(--dark); font-size: clamp(26px, 2.6vw, 32px); }
.hub-hero--light .hub-hero-inner {
  grid-template-columns: 1.08fr 1fr;
  grid-template-areas: "head photo" "rows photo";
  grid-template-rows: auto 1fr;
  align-items: stretch;
  gap: 16px 40px;
  margin-bottom: 26px;
}
.hub-hero--light .hub-hero-text {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}
.hub-hero--light .hub-hero-text .hub-status { margin-bottom: 0; }
.hub-hero--light .hub-hero-carousel { grid-area: photo; height: 100%; min-height: 340px; }
.hub-hero--light .hub-hero-carousel .hc-slide { height: 100%; object-fit: cover; }

/* адрес-плита: город впереди, одна строка, клик = копирование («Скопировано» ~1.7с) */
/* Определяющая строка под H1 хаба: «зарядный хаб для электромобилей …».
   Служит и человеку, и роботу — поэтому обычный текст, а не мелкий шрифт-подпись. */
.hub-def {
  margin: 6px 0 14px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.45;
  /* шапка хаба светлая всегда (hub-hero--light в шаблоне безусловный) */
  color: var(--text-muted);
}

.hub-addr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #2e3a4c;
  line-height: 1.45;
  cursor: pointer;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 9px;
  transition: background var(--t-base) var(--ease-out);
}
.hub-addr svg { width: 14px; height: 14px; flex: none; display: block; }
.hub-addr .ha-full, .hub-addr .ha-short { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-addr .ha-short { display: none; }
.hub-addr .ha-cp { margin-left: 4px; opacity: 0.4; transition: opacity var(--t-base) var(--ease-out); }
.hub-addr:hover { background: rgba(2, 20, 43, 0.07); }
.hub-addr:hover .ha-cp { opacity: 1; }
/* «Скопировано» не резервирует место справа — строка ровная и без ховера */
.hub-addr .ha-ok {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  color: #1F5F4A;
  opacity: 0;
  transform: translateX(-4px);
  max-width: 0;
  overflow: hidden;
  margin-left: -8px;
  white-space: nowrap;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), max-width var(--t-base) var(--ease-out), margin-left var(--t-base) var(--ease-out);
}
.hub-addr.is-copied .ha-ok { opacity: 1; transform: none; max-width: 150px; margin-left: 0; }

/* рейтинг и «Маршрут» — тёмно-синие пилюли одной высоты */
.hub-hero--light .hub-rating { margin: 0; }
.hub-hero--light .hub-rating-badge {
  background: var(--dark);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hub-rating-star { color: #F2B705; font-style: normal; }
.hub-hero--light .hub-rating a { color: #46536A; opacity: 1; }
.hub-hero--light .hub-rating > a { font-size: 13px; font-weight: 600; text-decoration-color: rgba(2, 20, 43, 0.35); }
.hub-hero--light .hub-rating > a:hover { text-decoration-color: rgba(2, 20, 43, 0.7); }
.hub-hero--light .hub-rating > span:not(.hub-rating-badge) { font-size: 13px; font-weight: 600; color: #46536A; }
.hub-route {
  display: inline-flex;
  align-items: center;
  background: var(--dark);
  color: var(--white);
  border-radius: 8px;
  padding: 3px 14px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background var(--t-base) var(--ease-out);
}
.hub-hero--light .hub-hero-cta { margin: 0; }
.hub-hero--light .hub-hero-cta .btn-primary { background: var(--dark); color: var(--white); }
.hub-hero--light .hub-hero-cta .btn-primary:hover { background: var(--ink-hover); }

/* строки-линейки фактов одного размера (иерархия отменена юзером) */
.hub-rows { grid-area: rows; width: 100%; align-self: start; }
.hub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(2, 20, 43, 0.14);
}
.hub-row span { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.hub-row b { font-size: 15.5px; font-weight: 700; color: var(--dark); text-align: right; font-variant-numeric: tabular-nums; }
/* Коннекторы одной строкой (08.08): метка · серая группировка по типам · сумма чёрным */
.hub-row--conn { align-items: baseline; }
.conn-groups {
  flex: 1; min-width: 0; text-align: right;
  font-size: 12.5px; font-weight: 600; color: #8a94a6;
  font-variant-numeric: tabular-nums;
}
/* К6: секция «Разъёмы и мощность» — таблица тип/штук/мощность */
.hub-conn { margin-top: 40px; }
.hub-conn-table { padding: 6px 22px; }
.hub-conn-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px 18px;
  align-items: baseline; padding: 11px 0;
  border-bottom: 1px solid rgba(2, 20, 43, 0.1);
}
.hub-conn-row:last-child { border-bottom: 0; }
.hub-conn-row.is-mut .hc-type, .hub-conn-row.is-mut .hc-power { color: #8a94a6; }
.hc-type { font-weight: 700; }
.hc-type em { font-style: normal; font-weight: 500; color: var(--text-soft); font-size: 13.5px; }
.hc-count { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.hc-power { color: var(--text-soft); font-size: 13.5px; min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.hub-conn-total { border-top: 2px solid rgba(2, 20, 43, 0.16); }
.hub-conn-total .hc-power { font-weight: 500; }
@media (max-width: 640px) {
  .hub-row--conn { flex-wrap: wrap; row-gap: 4px; }
  .conn-groups { order: 3; flex-basis: 100%; text-align: left; }
  .hub-conn-table { padding: 2px 14px; }
  .hc-power { min-width: 0; }
  .hc-type em { display: block; }
}

/* чипы удобств и вступление на светлом */
.hub-hero--light .hub-amenities { margin: 0; }
.hub-hero--light .hub-amenities li { border-color: rgba(2, 20, 43, 0.22); color: #3c4c63; background: none; }
.hub-hero--light .hub-amenities .icon { opacity: 0.8; }
.hub-hero--light .hub-intro { margin: 18px 0 0; opacity: 1; color: var(--text-muted); max-width: 84ch; font-size: 15px; }
.hub-hero--light .hub-hero-cta-note { color: var(--text-muted); }

@media (max-width: 900px) {
  /* мобила: имя → адрес (СПБ/МСК) → рейтинг → «Маршрут» → ФОТО → строки */
  .hub-hero--light .hub-hero-inner {
    grid-template-areas: "head" "photo" "rows";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 18px;
  }
  .hub-hero--light .hub-hero-carousel { height: auto; min-height: 0; }
  .hub-hero--light .hub-hero-carousel .hc-slide { height: auto; }
  .hub-addr .ha-full { display: none; }
  .hub-addr .ha-short { display: inline-block; }
  .hub-addr .ha-cp { opacity: 0.7; } /* на таче значок виден всегда */
  /* якоря хаба под второй капсулой на мобиле: 64 + 42 + 12 */
  #obzor, #foto, #tarify, #razyomy, #zagruzka, #route, #contact { scroll-margin-top: 118px; }
}

/* ---------- «Сервис и комфорт»: вариант А «Тёплое окно» (28.07, борд 8c03f105) ---------- */
/* Вечерний лаунж фоном, один источник света; текст-пара слева в темноте,
   группы удобств — в «световом подвале» кадра. */
.svc-window { position: relative; overflow: hidden; padding: 72px 0 44px; }
.svc-bg { position: absolute; inset: 0; background-size: cover; background-position: center 62%; }
.svc-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(2, 10, 24, .88) 0 30%, rgba(2, 10, 24, .50) 52%, rgba(2, 10, 24, .13) 74%, rgba(2, 10, 24, .40)),
    linear-gradient(0deg, rgba(2, 10, 24, .89) 0 24%, transparent 46%);
}
.svc-win-in { position: relative; }
.svc-win-tx { max-width: 620px; }
.svc-kick { display: block; font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.svc-pair { font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.14; color: var(--white); margin: 0; }
.svc-sub { font-size: 15px; color: rgba(255, 255, 255, .82); max-width: 58ch; margin-top: 14px; }
.svc-sub p { margin: 0; }
.svc-sub a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); transition: text-decoration-color var(--t-base) var(--ease-out); }
.svc-sub a:hover { text-decoration-color: #fff; }
.svc-cta { display: inline-flex; align-items: center; background: var(--white); color: var(--dark); border-radius: 10px; padding: 11px 22px; font-size: 14px; font-weight: 700; text-decoration: none; margin-top: 20px; transition: background var(--t-base) var(--ease-out); }
.svc-cta:hover { background: var(--light); }
.svc-win-foot { display: grid; grid-template-columns: 2fr 1.1fr; gap: 26px; margin-top: 110px; }
.svc-win-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0 0 8px; }
.svc-win-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* чипы на фото — чуть плотнее фон + блюр, чтобы читались на ярких участках кадра */
.svc-window .svc-am { background: rgba(2, 20, 43, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* мобильный кадр включается только на узких экранах и перекрывает десктопный */
.svc-bg--mob { display: none; }
@media (max-width: 900px) {
  .svc-window { padding: 56px 0 36px; }
  /* на мобиле кадр кропится ПО ГОРИЗОНТАЛИ (высота вписывается ровно), поэтому
     вертикаль тут ни на что не влияет — двигаем по X, чтобы фигура в окне
     лаунжа попала в свободную правую часть, а не под чипы.
     Если задан вертикальный кадр, всё это неважно — он кропится сам под рамку */
  .svc-bg { background-position: 47% 62%; }
  /* кадр скомпонован симметрично вокруг окна, поэтому берём центр: окно с
     фигурой держит середину рамки, ламели обрамляют его с двух сторон */
  .svc-bg--mob { display: block; background-position: center; }
  .svc-win-foot { grid-template-columns: 1fr; margin-top: 64px; gap: 18px; }
}

/* --- TR1 «Табло»: /tarify/ ---------------------------------------------------
   Три карточки прайса и полоса счастливых часов слиты в одно тёмное табло-плакат
   на дуотоне ночной вывески. Активная строка — крупнее остальных, у неё золотой
   бегунок слева (единственное золото экрана). Цены — табличными цифрами. */
/* правка юзера 30.07: табло переведено на БЕЛЫЙ — фото-дуотон снят, цены все
   одного кегля, бегунок активной строки синий (золото на белом не держит вес) */
.board {
  position: relative;
  background: var(--white);
  color: var(--dark);
  padding: 26px 0 56px;
}
.board-in { position: relative; }
.board-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(2, 20, 43, 0.18);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 22px;
}
.board-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7cc7a1;
  flex: none;
}
.board-live-dot.is-wait { background: #8fb8f2; }
.board-rows { display: flex; flex-direction: column; }
.board-row {
  position: relative;
  display: grid;
  /* колонки в процентах — одинаковы во всех строках, цены на одной левой оси */
  grid-template-columns: 26% minmax(0, 34%) 1fr;
  /* правка юзера 30.07: подпись тарифа, цена и пояснение — по вертикальному центру
     строки; у строк с двухстрочным пояснением базовая линия давала перекос */
  align-items: center;
  gap: 12px 26px;
  padding: 22px 0 20px;
  border-top: 1px solid rgba(2, 20, 43, 0.14);
  color: var(--dark);
  text-decoration: none;
}
.board-rows .board-row:last-child { border-bottom: 1px solid rgba(2, 20, 43, 0.14); }
/* засечка на конце линейки — как у остальных линеек сайта */
.board-row::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  width: 1px;
  height: 6px;
  background: rgba(2, 20, 43, 0.28);
}
.board-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #63707f;
}
/* правка юзера 30.07: все цены одного кегля — вровень с заголовками секций */
.board-price {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* цвет цены закреплён за тарифом: лояльность синяя, счастливые часы хвойные */
.board-row--loyalty .board-price { color: var(--blue); }
.board-row--happy .board-price { color: #1F5F4A; }
.board-row--peak .board-price { color: var(--peak); }
.board-row--peak .board-note a { color: inherit; }
.board-note { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
/* подпись внутри строки-ссылки: обычная серая, как пояснения других строк */
.board-key { color: inherit; font-weight: 400; text-decoration: none; }
/* ховер подсвечивает НАЗВАНИЕ тарифа его же цветом, цена не меняется */
a.board-row:hover { background: #FAFBFD; }
.board-row--loyalty:hover .board-name { color: var(--blue); }
.board-row--happy:hover .board-name { color: #1F5F4A; }
.board-name { transition: color var(--t-base) var(--ease-out); }
/* заголовок расписания — тем же кеглем, что H1 «Тарифы» */
.board-sched {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
  margin: 34px 0 16px;
}
.board-when { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 20px; font-size: 17px; font-weight: 600; }
.board-when .hh-sun, .board-when .hh-moon { font-size: 19px; }
/* чипы и сноска на белом: чип получает бордер вместо тени-на-тёмном,
   ссылки сноски — штатный синий, а не осветлённый для чернильного фона */
/* ПРАЙС-ЛИНЕЙКА (13.08): чипы расписания — сетка во всю ширину полосы,
   цена кеглем и хвоей табло — рифма с board-price выше */
.board-hubs {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.board-hubs .hh-chip { text-align: center; padding: 18px 12px 14px; }
.board-hubs .hh-chip b { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.05; color: #1F5F4A; }
.board-hubs .hh-chip span { margin-top: 6px; }
.board .hh-chip { border: 1px solid rgba(2, 20, 43, 0.14); }
.board .hh-chip:hover { box-shadow: 0 8px 20px rgba(2, 20, 43, 0.10); border-color: rgba(2, 20, 43, 0.28); }
.board .hh-note { opacity: 1; color: var(--text-muted); }
.board .hh-note a { color: var(--link); }
.board-note-foot { margin-top: 20px; }
@media (max-width: 820px) {
  .board { padding: 44px 0 46px; }
  .board-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0 15px;
  }
  .board-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-when { gap: 10px; flex-direction: column; margin: 18px 0 14px; }
}

/* полоса-ключ electro.cars — второй тёмный такт /tarify/ */
.loyalty-key { position: relative; overflow: hidden; border-top: 0; }
.loyalty-key-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 62%;
  box-shadow: inset 0 0 0 100vmax rgba(2, 20, 43, 0.80);
}
.loyalty-key .container { position: relative; z-index: 2; }
.loyalty-key .loyalty-lead { color: #B8C4D4; }
.loyalty-key .loyalty-stores { color: #9fb2c9; }
.loyalty-key .loyalty-stores a { color: var(--white); }
/* невидимый алиас-якорь: старый #loyalty сохранён, новый #app-key добавлен */
.anchor-alias { position: absolute; top: -90px; }

/* --- HB1 «Штурман» в белом исполнении: первый экран /hubs/ -------------------
   Белый блок, слитый с лидом: слева индекс сети на линейках с засечками,
   справа карта в своей раме — она и даёт тёмную массу экрана, поэтому
   отдельной чернильной полосы не нужно. Ниже — светлая секция карточек. */
.navigator {
  background: var(--white);
  padding: 18px 0 56px;
}
.nav-split {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
  gap: 34px;
  align-items: stretch;
}
.nav-split > * { min-width: 0; }
/* карта тянется по высоте индекса: колонка — флекс, легенда прижата вниз */
.nav-map { display: flex; flex-direction: column; }
.nav-map .ymap { flex: 1; }
/* строка индекса */
.nav-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 15px 2px 14px 0;
  border-top: 1px solid rgba(2, 20, 43, 0.14);
}
.nav-index .nav-row:last-child { border-bottom: 1px solid rgba(2, 20, 43, 0.14); }
/* вся строка — мишень для показа пина; «Маршрут» лежит выше и уводит в карты */
.nav-index .nav-row[data-slug] { cursor: pointer; }
/* засечки на концах линейки — тот же мотив, что у фактов хаба */
.nav-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 1px;
  height: 6px;
  background: rgba(2, 20, 43, 0.28);
}
/* золотая засечка активной строки — единственный золотой жест экрана */
.nav-row::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 2px;
  height: 10px;
  background: #F2B705;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.nav-row:hover::after, .nav-row:focus-within::after, .nav-row.is-active::after { opacity: 1; }
.nav-row:hover { background: #FAFBFD; }
/* нумерация индекса — CSS-счётчик: скрытые фильтром строки не увеличивают его,
   поэтому при переключении города номера идут 01, 02, 03 без пропусков */
.nav-index { counter-reset: navhub; }
.nav-index .nav-row[data-city] { counter-increment: navhub; }
.nav-idx {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.nav-index .nav-row[data-city] .nav-idx::before {
  content: counter(navhub, decimal-leading-zero);
}
.nav-idx--pin { color: var(--blue); }
.nav-idx--pin svg { width: 15px; height: 15px; display: block; }
.nav-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav-name {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--dark);
  text-decoration: none;
  line-height: 1.25;
}
.nav-name:hover { text-decoration: underline; }
.nav-name--plain { color: var(--dark); }
.nav-addr { font-size: 13.5px; color: var(--text-muted); }
.nav-meta {
  font-size: 13px;
  color: #63707f;
  font-variant-numeric: tabular-nums;
}
.nav-row--soon .nav-meta { color: #8a7a4a; }
.nav-route {
  position: relative;
  z-index: 2;
  border: 1.5px solid rgba(2, 20, 43, 0.24);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
/* партнёрская сеть — не седьмая строка, а отдельный ярус после керна */
.nav-partner { margin-top: 22px; padding-top: 4px; }
.nav-partner-kick {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.nav-row--partner { border-top-color: rgba(2, 20, 43, 0.14); }
.nav-row--partner::after { display: none; }
.nav-map .ymap-large { height: 100%; min-height: 430px; }
.nav-map .map-legend { margin-top: 12px; }
@media (max-width: 1000px) {
  /* мобила: список виден всегда и идёт первым, карта под ним */
  .nav-split { grid-template-columns: 1fr; gap: 22px; }
  .nav-map .ymap-large { min-height: 340px; }
  .navigator { padding-bottom: 40px; }
}
@media (max-width: 560px) {
  .nav-row { grid-template-columns: 26px 1fr; gap: 6px 10px; }
  .nav-route { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* --- NW4 «Тёмная комната»: новости главной ---------------------------------
   Две зоны вместо фото-ковра: справа кадр молнии киоска под вуалью, гаснет
   к центру; слева чистый чернильный, плашки непрозрачные — контраст текста
   держится раскладкой, а не прозрачностью. Слэши-прожекторы здесь не нужны:
   роль «фактуры тёмной полосы» взял на себя кадр. */
.news-room {
  position: relative;
  background: var(--dark);
  color: var(--white);
  /* высота от контента: поля срезаны с 96/92 — было слишком много воздуха
     над заголовком и под подвалом секции (правка юзера 30.07) */
  padding: 58px 0 52px;
  /* именно clip, а не hidden: hidden сделал бы секцию скролл-контейнером, и
     view()-таймлайн свечения марки мерил бы прогресс относительно неё же */
  overflow: clip;
}
.news-room-shot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  background-size: cover;
  background-position: 62% center;
  /* вуаль + гашение к центру одной композицией слоёв */
  box-shadow: inset 0 0 0 100vmax rgba(2, 20, 43, 0.52);
  mask-image: linear-gradient(90deg, transparent, #000 38%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
}
/* Свечение вывески на скролле: слой — тот же кадр с вырезанной маркой (прозрачно
   всё, кроме двух светящихся логотипов) и с теми же background-size/position, что
   у фото, поэтому контур совпадает от геометрии, а не от подгонки. Псевдоэлемент,
   а не отдельный div: он лежит поверх вуали и наследует маску-растворение кадра —
   свет гаснет к центру вместе с фотографией. Прозрачность ведёт scroll-driven
   анимация, считает композитор, слушателей скролла в JS нет. */
.news-room-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/news-glow.08a9389db7b1.png");
  background-size: cover;
  background-position: inherit;
  mix-blend-mode: screen;
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(150, 200, 255, 0.6));
  opacity: 0;
}
@supports (animation-timeline: view()) {
  .news-room-shot::after {
    animation: news-glow linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes news-glow {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .news-room-shot::after { animation: none; opacity: 0; }
}
.news-room-in { position: relative; z-index: 2; }
.news-room .section-head { margin-bottom: 18px; }
.news-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 700px;
}
.nr-plate {
  background: #0A2140;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  transition: border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.nr-plate--lead {
  grid-column: 1 / -1;
  position: relative;
  padding-left: 26px;
}
/* кромка свежей новости — акцентная хвоя (осветлённый тон: на чернильном тёмная
   хвоя пропадает). Inset-тень, а не полоска-псевдоэлемент: она обрезается по
   скруглению плашки и идёт ровно по её фигуре, без выступающих прямых углов */
.nr-plate--lead { box-shadow: inset 3px 0 0 #7CC7A1; }
.nr-plate:hover { border-color: rgba(255, 255, 255, 0.35); transform: translateY(-2px); }
.nr-plate--lead:hover { box-shadow: inset 3px 0 0 #7CC7A1; }
.nr-plate time {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #8FA0B8;
  margin-bottom: 8px;
}
.nr-plate { position: relative; }
.nr-plate h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--white); }
.nr-plate--lead h3 { font-size: 22px; }
/* растянутая ссылка: кликабельна вся плашка, вложенных интерактивов нет */
.nr-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.nr-link:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.nr-plate:hover h3 { text-decoration: underline; }
.nr-plate p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #B8C4D4;
}
.news-room-foot {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.nr-all { color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transition: color var(--t-base) var(--ease-out); }
.nr-all:hover { color: var(--link); }
.nr-tg { color: #8FA0B8; font-weight: 600; font-size: 14px; text-decoration: none; }
.nr-tg:hover { color: var(--link); }
@media (prefers-reduced-motion: reduce) {
  .nr-plate { transition: none; }
  .nr-plate:hover { transform: none; }
}
@media (max-width: 900px) {
  /* мобила: плашки в столбец, кадр уходит в нижние 30% фоном на молнию */
  .news-room { padding: 44px 0 40px; }
  .news-room-grid { grid-template-columns: 1fr; max-width: none; }
  .news-room-shot {
    top: auto;
    left: 0;
    width: 100%;
    height: 30%;
    background-position: 58% 40%;
    mask-image: linear-gradient(180deg, transparent, #000 55%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
  }
  .news-room-foot { margin-top: 22px; gap: 16px; }
}

/* --- FAQ-библиотека (M1v2 «Ритм и полка» + поиск M2v3) ----------------------
   радио-фильтр: правила по слагам рубрик генерирует шаблон faq_library.html,
   здесь — общие. Радио скрыты клипом (не display:none) — клавиатура работает */
.fl-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
/* Поиск в липкой капсуле рубрик (борд 30.09.2026, вариант Б): поле стоит слева в капсуле, вне прокручиваемого
   ряда чипов; на телефоне — кнопка-лупа, которая по фокусу раскрывается поверх чипов. */
.fl-chips { --fl-find: 228px; }
.fl-search { position: absolute; z-index: 2; top: calc(var(--sub-top) + 5px); left: calc(var(--sub-cap) + 5px); width: var(--fl-find); pointer-events: auto; }
.fl-chips.has-search .eh-subnav-row { margin-left: calc(var(--sub-cap) + var(--fl-find) + 9px); justify-content: flex-start; }
.fl-search-lab { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.fl-search-row { position: relative; }
.fl-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--s-dim); pointer-events: none; }
.fl-search-in {
  width: 100%; height: var(--sub-item); padding: 0 34px 0 36px; border: 0; border-radius: var(--r-pill);
  background: var(--s-hover); color: var(--s-fg); font: inherit; font-size: 14px;
  transition: background-color var(--t-base) var(--ease-out);
}
.fl-search-in::placeholder { color: var(--s-dim); }
.fl-search-in:focus { outline: 0; background: var(--s-act-fg); color: var(--s-act-bg); box-shadow: inset 0 0 0 1.5px var(--s-act-bg); }
.fl-search-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.fl-search-x { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; font-size: 19px; line-height: 1; color: var(--s-dim); cursor: pointer; }
.fl-search-in:focus ~ .fl-search-x { color: var(--s-act-bg); }
.fl-search-n { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--s-dim); pointer-events: none; }
.fl-body.is-searching:not(:has(.q:not(.is-filtered-out)))::before { content: attr(data-none); display: block; padding: var(--sp-sec) 24px; text-align: center; font-size: 17px; font-weight: 600; color: var(--text-soft); }
@media (max-width: 700px) {
  .fl-chips { --fl-find: 32px; }
  .fl-search { transition: width var(--t-move) var(--ease-out); }
  .fl-search-in { padding: 0; color: transparent; cursor: pointer; }
  .fl-search-in::placeholder { color: transparent; }
  .fl-search-ico { left: 8px; }
  .fl-search-n, .fl-search-x { opacity: 0; pointer-events: none; }
  .fl-search:focus-within, .fl-search:has(.fl-search-in:not(:placeholder-shown)) { width: calc(100% - var(--sub-cap) * 2 - 10px); }
  .fl-search:focus-within .fl-search-in, .fl-search-in:not(:placeholder-shown) { padding: 0 34px 0 36px; color: var(--s-act-bg); background: var(--s-act-fg); box-shadow: inset 0 0 0 1.5px var(--s-act-bg); cursor: text; }
  .fl-search:focus-within .fl-search-in::placeholder { color: var(--s-dim); }
  .fl-search:focus-within .fl-search-ico, .fl-search:has(.fl-search-in:not(:placeholder-shown)) .fl-search-ico { left: 12px; }
  .fl-search:focus-within .fl-search-n, .fl-search:has(.fl-search-in:not(:placeholder-shown)) .fl-search-n { opacity: 1; }
  .fl-search:focus-within .fl-search-x:not([hidden]), .fl-search:has(.fl-search-in:not(:placeholder-shown)) .fl-search-x:not([hidden]) { opacity: 1; pointer-events: auto; }
}
/* липкая полоса чипов — вторая капсула .eh-subnav (см. «Второе липкое меню», 26.09.2026) */
/* корпус: полосы */
.fl-body { scroll-margin-top: 134px; } /* 12 px под второй капсулой */
.fl-band { padding: 72px 0 80px; }
.fl-band.band-light { background: var(--light); }
.fl-band.band-dark { background: var(--dark); color: var(--white); }
.fl-band-in { display: flex; flex-direction: column; gap: 56px; }
.fl-rubric { max-width: 800px; }
/* десктоп (борд 30.09.2026): заголовок рубрики — в левой колонке и едет с прокруткой, вопросы — справа */
@media (min-width: 1000px) {
  .fl-body { --fl-rubric-display: grid; }
  .fl-rubric { max-width: none; display: grid; grid-template-columns: 300px minmax(0, 820px); column-gap: 64px; }
  .fl-rubric .fl-rubric-head { grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: 148px; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
  .fl-rubric > .q { grid-column: 2; }
  .fl-rubric > .q:first-of-type summary { padding-top: 2px; }
}
.fl-rubric-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.fl-rubric-head h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; }
/* единственная хвоя страницы: бейдж счастливых часов (на тёмном — осветлённая) */
.fl-happy {
  font-size: 13px;
  font-weight: 700;
  color: #7CC7A1;
  text-decoration: none;
  border: 1.5px solid rgba(124, 199, 161, 0.5);
  border-radius: 999px;
  padding: 5px 12px;
}
.fl-happy:hover { border-color: #7CC7A1; color: #7CC7A1; }
/* вопросы: нативные details, линейки как у факт-блоков */
.q { border-bottom: 1px solid rgba(2, 20, 43, 0.12); scroll-margin-top: 142px; }
.band-dark .q { border-bottom-color: rgba(255, 255, 255, 0.14); }
.q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 13px 0;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform var(--t-base) var(--ease-out);
}
.q[open] summary::after { transform: rotate(225deg); }
.q-body { padding: 0 0 18px; max-width: 68ch; }
.q-body p { font-size: 15.5px; line-height: 1.6; }
.band-dark .q-body p { color: #cdd8e6; }
.q-link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; }
.band-dark .q-link { color: var(--link); }
@media (prefers-reduced-motion: no-preference) {
  .q::details-content { transition: content-visibility 0.25s allow-discrete; }
}
/* режим «полка»: другие полосы и рубрики скрыты (показ — правила из шаблона),
   активная полоса перекрашивается в светлую независимо от такта */
.fl-radio:checked:not(#r-all) ~ .fl-body .fl-band { display: none; }
.fl-radio:checked:not(#r-all) ~ .fl-body .fl-rubric { display: none; }
.fl-radio:checked:not(#r-all) ~ .fl-body .fl-band.band-dark {
  background: var(--light);
  color: var(--dark);
}
.fl-radio:checked:not(#r-all) ~ .fl-body .band-dark .q { border-bottom-color: rgba(2, 20, 43, 0.12); }
.fl-radio:checked:not(#r-all) ~ .fl-body .band-dark .q-body p { color: inherit; }
.fl-radio:checked:not(#r-all) ~ .fl-body .band-dark { --link: #063D83; --link-line: rgba(6, 61, 131, 0.4); }
.fl-radio:checked:not(#r-all) ~ .fl-body .band-dark .fl-happy { color: #1F5F4A; border-color: rgba(31, 95, 74, 0.45); }
.fl-radio:checked:not(#r-all) ~ .fl-body .fl-band { padding: 28px 0 56px; }
.fl-radio:checked:not(#r-all) ~ .fl-body .fl-floor { display: block; }
/* «пол» полки */
.fl-floor { display: none; background: var(--white); padding: 8px 0 56px; }
.fl-floor-in { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fl-floor-in > p { font-size: 16px; font-weight: 600; }
.fl-floor-acts { display: flex; align-items: center; gap: 18px; }
.fl-floor-tel { font-weight: 700; text-decoration: none; color: var(--dark); white-space: nowrap; }
/* поиск: скрываем несовпавшие только классами — восстановление байт-в-байт */
.fl-body.is-searching .q.is-filtered-out { display: none; }
.fl-body.is-searching .fl-rubric.is-empty { display: none; }
.fl-body.is-searching .fl-band.is-empty { display: none; }
@media (max-width: 900px) {
  .fl-body { scroll-margin-top: 118px; }
  .q { scroll-margin-top: 126px; }
  .fl-band { padding: 48px 0 56px; }
  .fl-band-in { gap: 40px; }
}
/* мобила: строки-линейки в языке факт-блоков В6; вместо бегунка золото —
   засечка активного по времени пункта, у цены живая подстрока вместо шеврона */
@media (max-width: 640px) {
  .hero-dash { flex-direction: column; margin-top: 26px; border-top: 0; }
  .hero-dash .dash-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px 2px 12px 14px;
    border-bottom: 1px solid rgba(6, 61, 131, 0.14);
  }
  .hero-dash .dash-item:first-child { border-top: 1px solid rgba(6, 61, 131, 0.14); }
  .hero-dash .dash-item::before { top: 50%; margin-top: -5px; }
  .hero-dash .dash-price.is-on::before { background: #F2B705; box-shadow: none; animation: none; }
  .hero-dash .dash-item::after {
    content: "›";
    position: static;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    opacity: 1;
    color: #9aa7b5;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
  }
  .hero-dash .dash-price::after { content: none; }
  .hero-dash .dash-sub { display: none; }
  .hero-dash .dash-live { display: block; flex: none; text-align: right; font-size: 12px; }
  .hero-dash .dash-live .lt-count { display: block; margin-left: 0; }
}

/* ТУПИК (19.08): «Ещё по теме»/«Ещё новости» под статьёй */
.related-posts { margin-top: 44px; }
.related-posts .related-title { font-size: 24px; margin-bottom: 18px; }
.related-posts .news-card h3 { font-size: 16px; }
.related-tg { margin-top: 18px; }

/* ---------- CTA-ЗНАНИЯ (13.08): концевой блок статей «Знаний» ---------- */
.guide-cta {
  margin-top: 40px;
  background: var(--dark);
  background-image: linear-gradient(115deg, transparent 0 16%, rgba(255, 255, 255, 0.05) 16% 30%, transparent 30% 54%, rgba(255, 255, 255, 0.04) 54% 63%, transparent 63%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
}
.guide-cta-title { margin: 0; font-size: 21px; font-weight: 800; }
.guide-cta-sub { margin: 6px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.75); max-width: 52ch; }
.guide-cta-btns { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.guide-cta .btn { background: var(--white); color: var(--dark); }
.guide-cta .btn:hover { background: var(--light); }
.guide-cta .btn-ghost { background: transparent; color: var(--white); }
.guide-cta .btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* ---------- ЗНАНИЯ-ХАРАКТЕР (13.08): кромки рубрик на листинге ----------
   палитра без хвои (в словаре бренда хвоя = выгода): технологии/устройство —
   синий, батарея/зарядка — электрик, право и деньги — тёмный янтарь,
   остальное — чернильный. Пустой data-cat (новости) кромки не получает. */
.news-card[data-cat] { border-top: 3px solid var(--cat, #02142B); }
.news-card[data-cat] .news-cat { color: var(--cat, #02142B); }
.news-card[data-cat="Технологии"], .news-card[data-cat="Устройство"] { --cat: #063D83; }
.news-card[data-cat="Батарея"], .news-card[data-cat="Зарядка"] { --cat: #2E6FD9; }
.news-card[data-cat="Право и деньги"] { --cat: #9a6b15; }
.news-upd { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
/* свежая статья — широкой карточкой на весь ряд */
@media (min-width: 901px) {
  .news-card--wide { grid-column: 1 / -1; }
  /* двухколоночный разворот — только когда есть обложка, иначе правая половина пустует */
  .news-card--wide:has(img) { display: grid; grid-template-columns: 5fr 4fr; }
  .news-card--wide:has(img) img { height: 100%; object-fit: cover; }
  .news-card--wide .news-card-body { align-self: center; padding: 28px 32px; }
  .news-card--wide h2 { font-size: 24px; }
}

/* ---------- B2B-ЛИД (13.08): шаги подключения и парные поля ---------- */
.contact-steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: cs; max-width: 44ch; }
.contact-steps li {
  counter-increment: cs;
  position: relative;
  padding: 0 0 14px 44px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}
.contact-steps li b { color: var(--white); }
.contact-steps li::before {
  content: counter(cs);
  position: absolute;
  left: 0;
  top: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.contact-section--light .contact-steps li { color: var(--text-muted); }
.contact-section--light .contact-steps li b { color: var(--dark); }
.contact-section--light .contact-steps li::before { border-color: rgba(2, 20, 43, 0.3); color: var(--blue); }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .form-row2 { grid-template-columns: 1fr; } }

/* счётчики глубины разделов в ленте «Медиа» (ВИТРИНА-СМИ, 13.08) */
.mf-count {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  vertical-align: super;
  margin-left: 2px;
}

/* фон-фото калькулятора парка (правка юзера 13.08): та же вуаль, что у полосы
   electro.cars на /tarify/ — один язык тёмных фото-секций */
.fleet-calc, .brands-section { position: relative; overflow: hidden; }
.fleet-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* кадр прижат к низу машины первого плана (правка юзера 13.08) */
  background-position: center 72%;
  box-shadow: inset 0 0 0 100vmax rgba(2, 20, 43, 0.80);
}
.fleet-calc .container, .brands-section .container { position: relative; z-index: 2; }
/* НЕ называть классы ad-*/ads-* — блокировщики их прячут (вето 22.07, грабля 13.08) */
.brands-bg { background-position: center; }

/* ═══════════════════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА «ЧЕРНИЛА И ХВОЯ» — принята в прод 13.08.2026.
   Родилась локальным экспериментом 12.08; ниже — вся тема целиком:
   графитовые поверхности вместо нави, хвойные акценты выгоды,
   фирменное ::selection (кнопки и фокус — в разделе «Дизайн-система» 27.09).
   ═══════════════════════════════════════════════════════════════════════ */


/* 1. Палитра: чернильный вместо нави — им перекрашивается всё разом
   (заголовки, кнопки, активные чипы, тёмные пилюли) */
:root {
  --dark: #101216;
  --text: #101216;
  --text-muted: #3c434d;
}

/* 2. Тёмные поверхности: комната чернее карточек */
.site-footer { background: #0b0c0f; }
.news-room { background: #0b0c0f; }
.section-dark { background: #0b0c0f; }
.news-room .nr-plate { background: #1b1e23; border-color: rgba(255, 255, 255, 0.12); }

/* 3. Дружелюбные акценты */
/* стрелки-указатели дышат хвоей — маленький тёплый маяк в строгой типографике */
/* хвоя у стрелок заголовков откачена (правка юзера 13.08): стрелка наследует
   цвет слова и синеет с ним на ховере; на тёмных секциях — белая от заголовка */
.section-more { color: inherit; }
.section-more:hover { color: var(--link); }
.section-dark .section-more { color: #fff; }
.section-dark .section-more:hover { color: var(--link); }
/* действия отвечают зелёным дыханием */
/* зелёное свечение кнопок при ховере откачено (правка юзера 13.08) —
   нейтральная тень вместо хвойной */
.nav-phone:hover {
  box-shadow: 0 6px 22px rgba(2, 8, 16, 0.28);
}
.nr-plate:hover { border-color: rgba(124, 199, 161, 0.55); }
/* выделение текста и клавиатурный фокус — тоже фирменные */
::selection { background: #cde8da; color: #101216; }

/* полоса electro.cars на /tarify/: вуаль поверх фото — графит вместо нави (правка 13.08) */
.loyalty-key-bg, .fleet-bg { box-shadow: inset 0 0 0 100vmax rgba(10, 11, 14, 0.82); }

/* кнопка и плашка хиро прижаты к низу видео-рамки (правка юзера 13.08):
   текст-колонка растягивается на высоту ряда, кнопки уезжают вниз */
@media (min-width: 901px) {
  .hero--video .hero-text { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
  .hero--video .hero-text .btn-light { margin-top: auto; }
}

/* кикер «Сервис и комфорт 24/7» — цветом иконок чипов блока (правка юзера 13.08) */
.svc-kick { color: #8fb8f2; }

/* шапка: иконка Telegram убрана решением юзера 13.08 — мёртвая разметка
   вычищена из header.html целиком (ТОКЕНЫ, 19.08), правило-селектор не нужно */

/* кружочек-индикатор у «Найти хаб» — как у плашки счастливых часов ниже
   (правка юзера 13.08): слева от текста, по центру */
.hero .btn-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* левый паддинг = паддингу плашки ниже: кружки на одной вертикали */
  padding-left: 18px;
  padding-right: 26px;
}
.hero .btn-light::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8fb8f2;
  flex-shrink: 0;
}

/* Согласованные улучшения дизайн-аудита 17.09.2026. */
.offer-card { box-shadow: none; }
.offer-cta-phone { gap: 8px; }
.offer-cta-phone strong { white-space: nowrap; font-weight: inherit; }
.offer-max-label { display: none; }
.offer-cta-ic { text-decoration: none; }
.contact-form { box-shadow: none; }
.contact-text { padding-top: 28px; }
.board-hubs { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.listing-search { max-width: 720px; margin: 0 0 20px; }
.listing-search label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.listing-search-row { display: flex; gap: 10px; }
.listing-search input[type="search"] { min-width: 0; flex: 1; width: 100%; border: 1px solid #b9c5ce; border-radius: 10px; padding: 13px 15px; font: inherit; color: var(--dark); background: #fff; }
.listing-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.listing-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 15px; border: 1px solid #c6d1dc; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--dark); }
.listing-chips a:hover { border-color: var(--dark); background: #e7ecf0; }
.listing-chips a[aria-current] { background: var(--dark); color: #fff; border-color: var(--dark); }
.listing-count { color: var(--text-muted); font-size: 13px; margin: 18px 0 24px; }
.listing-empty { grid-column: 1 / -1; padding: 28px 0; }
.listing-empty h2 { font-size: 22px; margin-bottom: 12px; }
.listing-empty p { margin-bottom: 14px; }
.pagination { flex-wrap: wrap; font-size: 13px; }

.press-archive .press-grid { grid-template-columns: 1fr; gap: 0; }
.press-archive .press-card { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 22px; border: 0; border-bottom: 1px solid #d7dde3; border-radius: 0; box-shadow: none; padding: 20px 0; background: transparent; }
.press-archive .press-card:hover { transform: none; box-shadow: none; }
.press-archive .press-cover { width: 140px; height: 82px; min-height: 0; font-size: 14px; border: 1px solid #e2e7ed; border-radius: 8px; }
.press-archive .press-cover--logo, .press-archive .press-cover--word { padding: 12px; }
.press-archive .press-cover--word { overflow-wrap: anywhere; }
.press-archive .press-cover img { max-height: 56px; }
.press-archive .press-card-body { min-width: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; }
.press-archive .press-card time, .press-archive .press-outlet, .press-archive .press-sum { grid-column: 1; margin: 0; }
.press-archive .press-sum { font-size: 14px; -webkit-line-clamp: 3; }
.press-archive .press-src { grid-column: 2; grid-row: 1 / 4; align-self: center; margin: 0; }
.press-archive .press-year-title { margin: 28px 0 4px; }

.article-hero { background: #fff; background-image: none; color: var(--dark); padding: 36px 0 20px; }
.article-hero .container { max-width: 860px; }
.article-hero .page-title { border-left: 4px solid #02142b; padding-left: 22px; color: var(--dark); font-size: clamp(25px, 3vw, 36px); line-height: 1.2; }
.article-hero .page-intro { color: #424c57; opacity: 1; max-width: none; }
.article-hero .news-date, .article-hero .news-updated { color: #596774; }
.article-body { background: #fff; padding-top: 26px; }

input.calc-range { appearance: none; -webkit-appearance: none; width: 100%; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
input.calc-range::-webkit-slider-runnable-track { height: 6px; border: 0; border-radius: 4px; background: linear-gradient(to right, #063d83 var(--range-fill, 0%), #dce4ed var(--range-fill, 0%)); }
input.calc-range::-moz-range-track { height: 6px; border: 0; border-radius: 4px; background: #dce4ed; }
input.calc-range::-moz-range-progress { height: 6px; border-radius: 4px; background: #063d83; }
input.calc-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 20px; height: 20px; margin-top: -7px; border: 2px solid #063d83; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0002; }
input.calc-range::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border: 2px solid #063d83; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0002; }
input.calc-range:focus-visible { outline-offset: 5px; border-radius: 4px; }
.cc-track--dual input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(6,61,131,.22); }
.cc-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; font-size: clamp(23px, 2.4vw, 32px); }
.cc-metric { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cc-metric-label { font-size: 12px; line-height: 1.5; font-weight: 500; color: #5b6875; letter-spacing: normal; }
.cc-happy { margin-top: 24px; }
.cc-meta { margin-top: 16px; }
.rental-text .richtext { max-width: 1100px; }
.rental-text .richtext > p { max-width: 850px; }
.rental-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 22px 0 24px; padding: 24px 0; border-block: 1px solid #d6dfe7; }
.rental-specs dt { font-size: 11px; text-transform: uppercase; font-weight: 700; color: #5e6d7c; margin-bottom: 8px; }
.rental-specs dd { font-size: 16px; line-height: 1.55; margin: 0; }
@media (min-width: 901px) { .footer-network { grid-column: 2; grid-row: 1; } .footer-contacts { grid-column: 3; grid-row: 1; } }
@media (max-width: 1100px) { .board-hubs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .press-archive .press-card-body { grid-template-columns: 1fr; } .press-archive .press-src { grid-column: 1; grid-row: auto; justify-self: start; } }
@media (max-width: 900px) {
  .footer-inner { gap: 24px; }
  .footer-col:first-child img { width: 110px; height: auto; }
  .site-footer { padding-top: 28px; }
  .rental-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-text { padding-top: 0; }
}
@media (max-width: 700px) {
  .offer-cta-btns { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .offer-cta-btns .offer-cta-phone { flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 12px; line-height: 1.5; }
  .offer-cta-ic { width: 100%; min-height: 44px; height: auto; border-radius: 10px; gap: 8px; flex-direction: row-reverse; }
  .offer-max-label { display: inline; font-size: 13px; font-weight: 600; }
  .board-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-hubs .hh-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .press-archive .press-card { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .press-archive .press-cover { width: 76px; height: 64px; font-size: 10px; }
  .press-archive .press-cover--logo, .press-archive .press-cover--word { padding: 7px; }
  .press-archive .press-card time { font-size: 11px; }
  .press-archive .press-outlet { font-size: 16px; }
  .press-archive .press-sum { font-size: 13px; }
  .press-archive .press-src { font-size: 12px; padding: 8px 0; }
  .article-hero .page-title { padding-left: 18px; }
  .cc-big { gap: 14px; }
  .cc-metric-label { min-height: 3em; }
  .rental-specs { gap: 20px; }
  .rental-specs dd { font-size: 14px; }
}

.listing-search .guide-category-select { display: none; }
@media (max-width: 700px) {
  .listing-search .guide-category-select { display: block; margin: 14px 0 0; }
  .guide-category-select select { display: block; width: 100%; margin-top: 8px; padding: 12px; min-height: 46px; border: 1px solid #b9c5ce; border-radius: 10px; font: inherit; color: var(--dark); background: #fff; }
  .guide-categories { display: none; }
}
@media (max-width: 700px) {
  .press-archive .press-card-body { display: contents; }
  .press-archive .press-cover { grid-column: 1; grid-row: 1 / 3; }
  .press-archive .press-card time { grid-column: 2; grid-row: 1; align-self: end; }
  .press-archive .press-outlet { grid-column: 2; grid-row: 2; }
  .press-archive .press-sum, .press-archive .press-src { grid-column: 1 / -1; }
  /* Название уже в заголовке: текстовую замену логотипа на телефоне не дублируем. */
  .press-archive .press-cover--word { display: none; }
  .press-archive .press-card:has(.press-cover--word) time,
  .press-archive .press-card:has(.press-cover--word) .press-outlet { grid-column: 1 / -1; }
}


/* Выбранные пункты визуального аудита 18.09.2026. */
.tariffs-grid--partner { grid-template-columns: minmax(0, 560px); }
.rental-contact { padding: 22px; border: 1px solid #c9d3dd; border-left: 4px solid #02142b; border-radius: 0 12px 12px 0; background: #fff; margin-top: 28px; font-size: 15px; }
.rental-contact a[href^="tel:"] { display: block; width: fit-content; white-space: nowrap; font-size: 22px; font-weight: 700; margin: 8px 0; }
.rental-contact a[href*="t.me"] { display: inline-block; font-weight: 700; padding: 8px 0; }
.article-toc { border: 1px solid #ccd5df; border-radius: 12px; padding: 18px 20px; margin-bottom: 30px; background: #f5f7fa; }
.article-toc summary { font-weight: 700; cursor: pointer; }
.article-toc ol { margin: 14px 0 0; padding-left: 20px; }
.article-toc li { margin: 9px 0; font-size: 14px; line-height: 1.5; }
.article-toc a { color: #063d83; }
.news-article .richtext h2[id] { scroll-margin-top: 110px; }
.news-cover { width: 100%; max-height: 480px; object-fit: contain; background: #f2f4f7; border: 1px solid #dce2e8; }
.press-detail { background: #fff; }
.press-article { max-width: 860px; }
.press-article-title { border-left: 4px solid #02142b; padding-left: 22px; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; margin: 18px 0 22px; }
.press-article-sum { font-size: 20px; line-height: 1.6; max-width: 760px; }
.press-article .press-cover--logo.press-cover--big { width: fit-content; min-width: 160px; height: 96px; padding: 16px 24px; }
.press-article .press-cover--logo.press-cover--big img { max-height: 64px; max-width: 240px; width: auto; object-fit: contain; }
.press-article-net { margin-top: 40px; border-top-color: #d4dce4; }
@media (min-width: 900px) {
  .related-posts .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .related-posts .news-card-body { padding: 20px; }
  .related-posts .news-card h3 { line-height: 1.5; }
}
@media (max-width: 700px) {
  .hub-addr { height: auto; min-height: 48px; align-items: flex-start; white-space: normal; }
  .hub-addr .ha-short { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; flex: 1; }
  .hub-addr > svg { flex-shrink: 0; margin-top: 3px; }
  .hub-addr .ha-cp { margin-left: 8px; }
  .guide-list { gap: 0; }
  .guide-list .news-card { border: 0; border-bottom: 1px solid #cbd3dd; border-radius: 0; background: transparent; box-shadow: none; }
  .guide-list .news-card-body { padding: 20px 0; }
  .guide-list .news-card h2, .guide-list .news-card h3 { font-size: 19px; line-height: 1.35; margin: 8px 0; }
  .guide-list .news-card-body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.5; }
  .guide-list .news-card--wide { grid-column: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА 27.09.2026 (design-consistency-board.html, пункты 01–07, 09–12).
   Один язык на всех страницах: токены типографики, кнопок, стекла, движения,
   ритма, тёмных поверхностей и фокуса. Правила ниже — источник правды; частные
   размеры и цвета компонентов в разделах выше заменены ссылками на токены.
   Паспорт системы: node scripts/qa/test_design_tokens.mjs <base>.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* 01 типографика: роли вместо размеров */
  --h1: clamp(30px, 3.1vw, 44px);
  --h2: clamp(24px, 2.4vw, 34px);
  --h2-prose: clamp(22px, 2.1vw, 28px);
  --h3: 20px;
  /* 03 кнопки: L / M / S, форма — капсула, как шапка и второе меню */
  --btn-l: 52px; --btn-m: 44px; --btn-s: 36px;
  --r-pill: 999px; --r-card: 20px; --r-photo: 16px; --r-inner: 12px;
  --ink-hover: #343a45; --paper-hover: #dde3ea;
  /* 06 тёмные поверхности: фон и поднятая плашка */
  --ink-0: #0b0c0f; --ink-1: #16191e;
  /* 07 ритм секций */
  --sp-next: 28px; --sp-band: 40px; --sp-sec: 64px;
  /* 09 движение: длительности и кривые (кривые — те, что уже выверены в шапке) */
  --t-quick: 0.12s; --t-base: 0.2s; --t-move: 0.3s; --t-glass: 0.5s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.25, 1);
  --spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  /* 12 фокус: цвет текста на этом фоне */
  --focus: #101216;
}
@media (max-width: 700px) {
  :root { --sp-band: 28px; --sp-sec: 44px; }
}
/* шапка и второе меню берут время из общих токенов */
.site-header { --glass-dur: var(--t-glass); --glass-ease: var(--ease-out); --tone-ease: var(--ease-inout); }

/* ---------- 12. Фокус и ссылки ---------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.section-dark, .site-footer, .news-room, .stats-section, .about-metrics,
.guide-cta, .band-dark, .loyalty-key, .fleet-bg, .hero-media, .eh-lightbox,
.cookie-bar, [data-glass][data-tone="dark"], .contact-section:not(.contact-section--light), .page-hero:not(.page-hero--light):not(.hub-hero--light):not(.article-hero):not(.error-hero) { --focus: #fff; }
/* внутри белых плит — чернила; кольцо самой плиты рисуется на её фоне и берёт его цвет */
.card *, .contact-form, .contact-form *, [data-glass][data-tone="light"], [data-glass][data-tone="light"] * { --focus: #101216; }
/* поверх фото (стрелки, слайды каруселей) — белое кольцо внутри кадра */
.hc-arrow, .card .hc-arrow, .hc-slide, .page-carousel *, .hub-card-media * { --focus: #fff; }
.hc-slide:focus-visible { outline-offset: -4px; }
.site-header { --focus: var(--h-fg); }
.eh-subnav { --focus: var(--s-fg); }
.skip-link:focus-visible { outline-color: #101216; }
.richtext a, .page-intro a, .about-section a:not(.about-button), .svc-sub a, .rental-contact a {
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: text-decoration-thickness var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.richtext a:hover, .page-intro a:hover, .about-section a:not(.about-button):hover, .rental-contact a:hover { text-decoration-thickness: 2.5px; }

/* ---------- 01. Шкала заголовков ---------- */
.page-title, .page-lead .page-title, .hub-hero--light .page-title, .article-hero .page-title, .press-article-title {
  font-size: var(--h1); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12;
}
.section-title, .board-sched, .fl-rubric-head h2, .svc-pair, .press-year-title, .related-posts .related-title,
.about-h2 {
  font-size: var(--h2); font-weight: 800; letter-spacing: -0.018em; line-height: 1.15;
}
.richtext h2 { font-size: var(--h2-prose); font-weight: 800; letter-spacing: -0.012em; }
/* длинные адреса в тексте (политика) переносятся, а не распирают страницу на 320 px */
.richtext { overflow-wrap: break-word; }

/* ---------- 02. Кикер: один стиль, цвет по фону ---------- */
.kicker, .svc-kick, .b2b-eyebrow, .about-kicker, .about-hero .about-kicker, .nav-partner-kick, .error-hubs-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5a6b84;
}
.kicker { display: block; margin: 0 0 8px; }
.section-dark .kicker, .section-dark .b2b-eyebrow, .about-dark .about-kicker { color: rgba(255, 255, 255, 0.62); }
/* «Сервис и комфорт 24/7» — цветом иконок чипов блока (правка владельца 13.08) */
.svc-kick { color: #8fb8f2; }

/* ---------- 03. Кнопки-капсулы: 3 роли × 3 размера ---------- */
.btn, .svc-cta, .about-button, .offer-cta-phone, .offer-cta-tg, .hub-route, .nav-route,
.fl-happy, .error-hubs-list a, .cookie-bar .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-quick) var(--ease-out);
}
/* L — главное действие страницы или блока */
.btn { min-height: var(--btn-l); padding: 0 28px; font-size: 15px; }
/* длинная подпись на узком экране переносится внутри капсулы, а не распирает страницу */
@media (max-width: 420px) { .btn { white-space: normal; text-align: center; padding: 8px 24px; } }
/* M — действие внутри карточки или блока */
.svc-cta, .about-button, .offer-cta-phone, .offer-cta-tg { min-height: var(--btn-m); height: auto; padding: 0 22px; font-size: 14px; }
/* S — действие в строке (маршрут, быстрый переход) */
.hub-route, .nav-route, .fl-happy, .error-hubs-list a, .cookie-bar .btn { min-height: var(--btn-s); padding: 0 15px; font-size: 13px; }
.btn:active, .svc-cta:active, .about-button:active, .offer-cta-phone:active, .offer-cta-tg:active,
.hub-route:active, .nav-route:active, .error-hubs-list a:active { transform: scale(0.97); }
/* основная: чернила на светлом, белая на тёмном */
.btn-primary, .hero .btn-light, .about-button, .hub-route, .offer-cta-phone, .offer-cta-tg { background: var(--dark); color: #fff; border: 0; }
.btn-primary:hover, .hero .btn-light:hover, .about-button:hover, .hub-route:hover, .offer-cta-phone:hover, .offer-cta-tg:hover { background: var(--ink-hover); color: #fff; }
.btn-light, .section-dark .btn-primary, .error-actions .btn-primary, .guide-cta .btn, .svc-cta { background: #fff; color: var(--dark); border: 0; }
.btn-light:hover, .section-dark .btn-primary:hover, .guide-cta .btn:hover, .svc-cta:hover { background: var(--paper-hover); color: var(--dark); }
.section-dark .brand-teaser .btn-primary { background: var(--dark); color: #fff; }
.section-dark .brand-teaser .btn-primary:hover { background: var(--ink-hover); }
/* вторичная: контур; на светлом — чернила, на тёмном — белый */
.about-button--outline, .nav-route, .error-hubs-list a { background: transparent; color: var(--dark); box-shadow: inset 0 0 0 1.5px rgba(16, 18, 22, 0.22); border: 0; }
.about-button--outline:hover, .nav-route:hover, .error-hubs-list a:hover { background: transparent; color: var(--dark); box-shadow: inset 0 0 0 1.5px var(--dark); }
.btn-ghost, .guide-cta .btn-ghost, .brands-btn-tg, .cookie-bar .btn { background: transparent; color: #fff; border: 0; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
.btn-ghost:hover, .guide-cta .btn-ghost:hover, .brands-btn-tg:hover, .cookie-bar .btn:hover { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
/* кнопка-иконка (MAX у B2B-офферов): круг высотой M-кнопки, тот же контур */
.offer-cta-ic { width: var(--btn-m); height: var(--btn-m); border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(16, 18, 22, 0.22);
  transition: box-shadow var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out); }
.offer-cta-ic:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dark); }
.fl-happy { background: transparent; border: 0; color: #7CC7A1; box-shadow: inset 0 0 0 1.5px rgba(124, 199, 161, 0.45); }
.fl-happy:hover { color: #7CC7A1; box-shadow: inset 0 0 0 1.5px #7CC7A1; }
/* выбранная рубрика FAQ: тёмная полоса становится светлой — кольцо и плашка следуют за ней */
.fl-radio:checked:not(#r-all) ~ .fl-body .band-dark { --focus: #101216; }
.fl-radio:checked:not(#r-all) ~ .fl-body .band-dark .fl-happy { color: #1F5F4A; box-shadow: inset 0 0 0 1.5px rgba(31, 95, 74, 0.45); }
/* многострочная плашка «Счастливые часы…» — плита с радиусом карточки */
.live-tariff { border-radius: var(--r-card); transition: border-color var(--t-base) var(--ease-out), transform var(--t-quick) var(--ease-out); }
.contact-form .btn { width: 100%; }
@media (max-width: 700px) {
  .offer-cta-btns .offer-cta-phone { border-radius: var(--r-card); white-space: normal; }
  .offer-cta-tg { white-space: normal; text-align: center; padding: 10px 22px; }
  .offer-cta-ic { width: 100%; height: auto; min-height: var(--btn-m); border-radius: var(--r-pill); }
  .error-hubs-list a { display: inline-block; white-space: normal; text-align: left; padding: 8px 15px; border-radius: 18px; }
}

/* ---------- 04. Стеклянная семья плавающих элементов ---------- */
/* тот же материал, что у шапки и второго меню: blur 5,4 px, насыщенность, двойной кант;
   тон — по блоку под элементом (data-tone ставит site.js по карте блоков страницы) */
.hc-arrow, .eh-lightbox__nav, .eh-lightbox__close, .cookie-bar, .channel-float, .hub-actionbar {
  --gl-bg: rgba(11, 12, 15, 0.42); --gl-fg: #fff; --gl-rim: rgba(255, 255, 255, 0.55); --gl-rim2: rgba(255, 255, 255, 0.2);
  --gl-drop: 0 8px 24px rgba(0, 0, 0, 0.2);
  background: var(--gl-bg);
  color: var(--gl-fg);
  -webkit-backdrop-filter: blur(5.4px) saturate(1.9) brightness(1.05);
  backdrop-filter: blur(5.4px) saturate(1.9) brightness(1.05);
  box-shadow: inset 1.5px 1.5px 0 -0.5px var(--gl-rim), inset -1px -1px 0 -0.5px var(--gl-rim2),
    inset 0 0 18px rgba(255, 255, 255, 0.06), var(--gl-drop);
  border: 0;
}
[data-glass][data-tone="light"] {
  --gl-bg: rgba(255, 255, 255, 0.55); --gl-fg: #101216; --gl-rim: rgba(255, 255, 255, 0.95); --gl-rim2: rgba(16, 18, 22, 0.08);
  --gl-drop: 0 8px 24px rgba(2, 20, 43, 0.16);
}
[data-glass].tone-mixed { --gl-bg: rgba(11, 12, 15, 0.64); }
[data-glass][data-tone="light"].tone-mixed { --gl-bg: rgba(255, 255, 255, 0.8); }
[data-glass] { transition: background-color var(--t-move) var(--ease-inout), color var(--t-move) var(--ease-inout), box-shadow var(--t-move) var(--ease-inout), transform var(--t-base) var(--ease-out); }
.hc-arrow { width: 40px; height: 40px; transition: opacity var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out); }
.hc-arrow:hover, .eh-lightbox__nav:hover, .eh-lightbox__close:hover { --gl-bg: rgba(11, 12, 15, 0.66); }
/* cookie: пилюля из стекла, кнопка «Ок» — S-капсула */
.cookie-bar { border-radius: 26px; padding: 8px 8px 8px 18px; color: var(--gl-fg); }
.cookie-bar a { color: inherit; }
.cookie-bar[data-tone="light"] .btn { color: #101216; box-shadow: inset 0 0 0 1.5px rgba(16, 18, 22, 0.28); }
.cookie-bar[data-tone="light"] .btn:hover { color: #101216; box-shadow: inset 0 0 0 1.5px #101216; }
@media (min-width: 1101px) {
  .channel-float { color: var(--gl-fg); }
  .channel-float:hover { transform: translateY(-2px); }
}
/* телефон: панель действий хаба — парящая капсула, как шапка сверху */
@media (max-width: 760px) {
  .hub-actionbar {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 0 6px; border-radius: var(--r-pill);
  }
  .hub-actionbar a { padding: 8px 4px 9px; color: var(--gl-fg); }
  .hub-actionbar a + a { border-left: 0; }
  .hub-actionbar[data-tone="light"] { --gl-drop: 0 10px 30px rgba(2, 20, 43, 0.22); }
  body.page-hub { padding-bottom: 80px; }
  body.page-hub .cookie-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-transparency: reduce) {
  .hc-arrow, .eh-lightbox__nav, .eh-lightbox__close, .cookie-bar, .channel-float, .hub-actionbar {
    -webkit-backdrop-filter: none; backdrop-filter: none; --gl-bg: rgba(11, 12, 15, 0.94);
  }
  [data-glass][data-tone="light"] { --gl-bg: rgba(255, 255, 255, 0.97); }
}

/* ---------- 05. Сегменты: один компонент для всех фильтров ---------- */
/* капсула-дорожка; выбранный пункт — ползунок clip-path (как во втором меню, без layout),
   без JS выбранный пункт залит */
.hubs-filter, .listing-chips, .sc-fuels {
  position: relative; display: flex; width: fit-content; max-width: 100%; flex-wrap: nowrap; gap: 2px; padding: 4px;
  /* материал «Контур» (борд 30.09.2026): белая дорожка с обводкой вторичных кнопок, текст — полные чернила */
  border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(16, 18, 22, 0.16);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.hubs-filter::-webkit-scrollbar, .listing-chips::-webkit-scrollbar, .sc-fuels::-webkit-scrollbar { display: none; }
.hubs-filter .hf-btn, .sc-fuels .hf-btn, .listing-chips a {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; min-height: 36px; height: 36px;
  padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent;
  font-size: 13.5px; font-weight: 600; color: #101216; white-space: nowrap; text-decoration: none;
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
.hubs-filter .hf-btn:hover, .sc-fuels .hf-btn:hover, .listing-chips a:hover { color: var(--dark); background: rgba(16, 18, 22, 0.07); border-color: transparent; }
.hubs-filter .hf-btn.is-active, .sc-fuels .hf-btn.is-active, .listing-chips a[aria-current] { background: var(--dark); color: #fff; }
.hubs-filter .hf-btn:focus-visible, .sc-fuels .hf-btn:focus-visible, .listing-chips a:focus-visible { outline-offset: -2px; }
/* с JS заливку рисует ползунок */
.eh-seg.is-ready .hf-btn.is-active, .eh-seg.is-ready .hf-btn.is-active:hover { background: transparent; color: #fff; }
.eh-seg-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: var(--sw, 0); border-radius: var(--r-pill);
  background: var(--dark); pointer-events: none; opacity: 0;
  clip-path: inset(0 calc(var(--sw, 0px) - var(--tx, 0px) - var(--tw, 0px)) 0 var(--tx, 0px) round 999px);
  transition: clip-path var(--t-glass) var(--spring);
}
.eh-seg.is-ready .eh-seg-thumb { opacity: 1; }
.eh-seg.is-snap .eh-seg-thumb { transition: none; }
.listing-chips { margin: 0 8px 14px 0; display: inline-flex; vertical-align: top; }
/* дорожка прокручивается внутри колонки, а не растягивает её */
.sc-controls, .sc-bars { min-width: 0; }
/* ---------- Борд 30.09.2026: «Медиа» — капсула разделов, «Тарифы» — второе меню, топливо с ценой, таблица по хабам ---------- */
.media-feed { padding-top: 0; }
.media-nav { margin-bottom: 18px; }
/* разделы «Медиа» — от левого края, как рубрики FAQ (просьба владельца 02.10.2026) */
.media-nav .eh-subnav-row { justify-content: flex-start; }
.media-feed .section-head { scroll-margin-top: 140px; }
.media-feed .press-cover--logo, .media-feed .press-cover--word { height: 104px; min-height: 0; }
/* полоса второго меню стоит между оглавлением и первым блоком — под ней фон страницы, делаем его белым */
#main:has(> .flex-nav) { background: #fff; }
.flex-nav ~ .flex-body > section[id] { scroll-margin-top: 70px; }
.flex-nav ~ .flex-body > .board { padding-top: var(--sp-next); }
.sc-fuels .hf-btn { height: 50px; min-height: 50px; flex-direction: column; justify-content: center; gap: 2px; padding: 0 20px; line-height: 1.1; }
.sc-fuels .hf-btn small { font-size: 11.5px; font-weight: 600; opacity: 0.6; font-variant-numeric: tabular-nums; }
.sc-fuels .hf-btn.is-active small { opacity: 0.75; }
/* сумма — по левому краю блока; топливо — нейтральная полоса, тарифы сети — хвоя */
.sc-save { min-width: 0; text-align: left; }
.sc-bar { height: 12px; background: #eef1f4; }
.sc-bar i.fuel { background: #8d97a5; }
.sc-bar i.ev { background: var(--green); }
@media (max-width: 700px) {
  .media-feed .section-head { scroll-margin-top: 124px; }
  .flex-nav ~ .flex-body > section[id] { scroll-margin-top: 74px; }
  .sc-fuels { width: 100%; }
  .sc-fuels .hf-btn { flex: 1; padding: 0 4px; font-size: 13px; }
}
/* длинный ряд (рубрики «Знаний») — одна строка с прокруткой и маской краёв */
.eh-seg.is-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.eh-seg.is-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.eh-seg.is-l.is-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
@media (prefers-reduced-motion: reduce) { .eh-seg-thumb { transition: none; } }
/* на телефоне рубрики «Знаний» — выпадающий список (решение 17.09), чипы скрыты */
@media (max-width: 700px) { .listing-chips.guide-categories { display: none; } }

/* ---------- 06. Два уровня тёмного ---------- */
.section-dark, .site-footer, .news-room, .about-metrics, .about-dark, .guide-cta, .ymap,
.contact-section:not(.contact-section--light) { background-color: var(--ink-0); }
.news-room .nr-plate { background: var(--ink-1); }
.about-metrics-inner > div { border-color: rgba(255, 255, 255, 0.1); }
.about-metrics span { color: rgba(255, 255, 255, 0.62); }

/* ---------- 07. Ритм секций: 28 · 40 · 64 (телефон 28 · 28 · 44) ---------- */
.page-lead { padding: var(--sp-band) 0 0; }
.page-lead + section:not(.section-dark),
.page-lead + .flex-body > section:first-child:not(.section-dark) { padding-top: var(--sp-next); }
.navigator, .board { padding-bottom: var(--sp-sec); }
.page-lead + .navigator, .page-lead + .flex-body > .board:first-child { padding-top: var(--sp-next); }
.hero { padding: var(--sp-band) 0 var(--sp-sec); }
.stats-section { padding: var(--sp-band) 0; }
.page-home .service-comfort, .service-comfort, .svc-window { padding-top: var(--sp-sec); padding-bottom: var(--sp-sec); }
.news-room { padding: var(--sp-sec) 0; }
.section.section-dark, .contact-section { padding: var(--sp-sec) 0; }
.fl-band.band-dark { background: var(--ink-0); }
.listing-search-row { align-items: center; }
.listing-search input[type="search"] { min-height: var(--btn-l); box-sizing: border-box; }
.about-section { padding: var(--sp-sec) 0; }
.about-metrics-inner { padding-top: var(--sp-band); padding-bottom: var(--sp-band); }
.article-hero { padding: var(--sp-band) 0 0; }
.article-body { padding-top: var(--sp-next); }
@media (max-width: 700px) {
  .stats-section { padding: var(--sp-sec) 0; }
}

/* ---------- 10. Боковая опора: герой хаба и 404 как оглавления разделов (№06) ---------- */
/* герой хаба — на «бумаге» своей страницы (#F0F0F0): белый давал шов сквозь капсулу второго меню */
.hub-hero--light { background-image: none; padding: var(--sp-band) 0; }
.hub-hero--light .page-title, .error-hero .page-title { border-left: 4px solid var(--dark); padding-left: 22px; }
.error-hero { background: #fff; background-image: none; color: var(--dark); text-align: left; padding: var(--sp-band) 0 var(--sp-sec); }
.error-lead { max-width: 46ch; }
.error-code { color: var(--dark); font-size: clamp(56px, 9vw, 96px); }
.error-hero .page-title { color: var(--dark); margin-bottom: 12px; }
.error-lead { color: var(--text-muted); margin: 0 0 26px; }
.error-actions, .error-hubs-list { justify-content: flex-start; }
.error-actions .btn-primary { background: var(--dark); color: #fff; }
.error-actions .btn-primary:hover { background: var(--ink-hover); color: #fff; }
.error-actions .btn-ghost { color: var(--dark); box-shadow: inset 0 0 0 1.5px rgba(16, 18, 22, 0.22); }
.error-actions .btn-ghost:hover { color: var(--dark); box-shadow: inset 0 0 0 1.5px var(--dark); }
.error-hubs-list a { gap: 0.3em; }
.error-hubs-list .error-hub-city { color: var(--text-muted); font-weight: 600; }
@media (max-width: 700px) {
  .hub-hero--light .page-title, .error-hero .page-title { padding-left: 18px; }
}

/* ---------- 11. Одна рамка для фотографий ---------- */
.page-carousel, .news-cover, .hero-photo { border-radius: var(--r-photo); }

/* ---------- 09. Движение: доступность ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --t-quick: 0.01s; --t-base: 0.01s; --t-move: 0.01s; --t-glass: 0.01s; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ВИТРИНА ЭКРАНОВ /b2b/reklama/ (вариант Б, 29.09.2026; artifacts/reklama-board-2026-09-29).
   Карточка на экран: галерея = карусель хабов (.hub-card-media + .hc-*) и лайтбокс,
   отметка «В подборку», липкая панель подборки, полоса на телефоне, заявка.
   Префикс bv-: имена ad-* и reklama прячет RU AdList.
   ═══════════════════════════════════════════════════════════════════════ */
.bv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-next); }
.bv-chips span { background: var(--light); color: var(--dark); border-radius: var(--r-pill); padding: 7px 14px; font-size: 13.5px; font-weight: 600; }
.bv-chips .is-strong { background: var(--dark); color: #fff; }
.bv-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.bv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bv-card { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.bv-card:has(.bv-pick input:checked) { border-color: var(--dark); box-shadow: 0 0 0 2px var(--dark); }
.bv-media { aspect-ratio: 4 / 3; background: var(--ink-0); }
.bv-media .hc-slide { width: 100%; height: 100%; object-fit: cover; }
.bv-card:hover .hc-arrow, .bv-card .hc-arrow:focus-visible { opacity: 1; }
.bv-media .hc-slide:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* значок ролика — пока в кадре постер ролика; клик проходит сквозь него в лайтбокс */
.bv-play { display: none; position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 1; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302142B'%3E%3Cpath d='M9 6.5v11l9-5.5-9-5.5Z'/%3E%3C/svg%3E") no-repeat 54% 50% / 24px 24px; }
.bv-media:has(.hc-slide.is-active[data-video]) .bv-play { display: block; }
.bv-tag { position: absolute; left: 12px; top: 12px; z-index: 1; pointer-events: none; background: rgba(11, 12, 15, 0.72); color: #fff;
  border-radius: var(--r-pill); padding: 5px 11px; font-size: 12.5px; font-weight: 700; }
.bv-sil { position: absolute; right: 10px; bottom: 10px; z-index: 1; pointer-events: none; display: grid; place-items: center;
  width: 62px; height: 42px; background: rgba(255, 255, 255, 0.92); border-radius: var(--r-inner); }
.bv-sil i { display: block; background: var(--dark); border-radius: 2px; }
.bv-pick { position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; margin: 0;
  background: #fff; color: var(--dark); border-radius: var(--r-pill); padding: 7px 13px 7px 9px; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.bv-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--dark); }
.bv-pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.bv-body { padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; }
.bv-place { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--dark); }
.bv-res { margin: 2px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--dark); font-variant-numeric: tabular-nums; }
.bv-res small { margin-left: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text-soft); }
.bv-meta, .bv-note { margin: 0; font-size: 13.5px; color: var(--text-soft); }
.bv-aud { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--green); }
.bv-aud a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* панель подборки: чернила, как CTA; липнет под капсулой шапки */
.bv-sum { position: sticky; top: 100px; display: grid; gap: 14px; padding: 22px; border-radius: var(--r-card); background: var(--dark); color: #fff; --focus: #fff; }
.bv-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.bv-empty { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.78); }
.bv-big { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.bv-big small { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: rgba(255, 255, 255, 0.75); }
.bv-sizes { display: grid; gap: 6px; margin-top: -6px; }
.bv-size { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 10px;
  border-radius: var(--r-inner); background: var(--ink-1); font-size: 13.5px; }
.bv-size b { font-variant-numeric: tabular-nums; }
.bv-size .bv-sil { position: static; width: 46px; height: 30px; background: none; }
.bv-size .bv-sil i { background: #fff; }
.bv-term { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.88); }
.bv-sum .btn { width: 100%; min-height: var(--btn-m); }
.bv-extra { margin: 22px 0 0; font-size: 14.5px; color: var(--text-soft); }
.bv-extra b { color: var(--dark); }
.bv-bar { display: none; }
/* заявка */
.bv-lead { margin-top: var(--sp-sec); scroll-margin-top: 100px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px;
  padding: 32px; border-radius: var(--r-card); background: var(--dark); color: #fff; --focus: #fff; }
.bv-lead .section-title { color: #fff; margin: 0; }
.bv-lead-text { display: grid; gap: 16px; align-content: start; }
.bv-lead-text p { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 15.5px; max-width: 46ch; }
.bv-lead-text .bv-term { justify-self: start; background: rgba(255, 255, 255, 0.1); border-radius: var(--r-card); padding: 8px 15px; color: #fff; font-weight: 600; }
.bv-lead-text .btn { justify-self: start; }
.bv-form { scroll-margin-top: 100px; }
.bv-form select { width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; border: 1px solid #d3dae3; border-radius: var(--radius-sm); background: var(--white); color: var(--dark); }
.bv-form select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--dark); }
.bv-lead .form-ok { margin: 0; }
.bv-picked { display: grid; gap: 8px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #e5eaf1; }
.bv-flabel { font-size: 14px; font-weight: 600; }
.bv-chiplist { display: flex; flex-wrap: wrap; gap: 6px; }
.bv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 5px 5px 12px; border-radius: var(--r-pill); background: #eef3f7; color: var(--dark); font-size: 13px; font-weight: 600; }
.bv-chip-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--text-soft); font: 600 17px/1 var(--font-body); cursor: pointer; display: grid; place-items: center;
  transition: background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out); }
.bv-chip-x:hover { background: #dde5ec; color: var(--dark); }
.bv-pempty { font-size: 13.5px; color: var(--text-soft); }
.bv-picked-sum { margin: 0; font-size: 13px; font-weight: 700; color: var(--green); }
/* срок 3/6/9/12 мес — сегменты-капсулы: в форме радио, в панели кнопки-зеркало */
.bv-terms { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.bv-terms legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.bv-terms legend span { font-weight: 500; color: var(--text-soft); }
.bv-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--light); }
.bv-seg label { margin: 0; position: relative; }
.bv-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bv-seg span, .bv-seg button {
  display: grid; place-items: center; min-height: var(--btn-s); padding: 0 8px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--dark); font: 700 14px/1 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.bv-seg input:checked + span, .bv-seg button[aria-pressed="true"] { background: var(--dark); color: #fff; }
.bv-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.bv-seg--dark { background: var(--ink-1); }
.bv-seg--dark button { color: rgba(255, 255, 255, 0.82); }
.bv-seg--dark button[aria-pressed="true"] { background: #fff; color: var(--dark); }
.bv-term-pick { display: grid; gap: 8px; }
@media (max-width: 1100px) {
  .bv-split { grid-template-columns: minmax(0, 1fr) 300px; }
  .bv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bv-split { grid-template-columns: minmax(0, 1fr); }
  .bv-sum { display: none; }
  /* телефон: вместо панели — полоса-капсула внизу, пока витрина в кадре */
  .bv-bar:not([hidden]) { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; margin-top: 16px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 8px 8px 18px;
    border-radius: var(--r-pill); background: var(--dark); color: #fff; --focus: #fff; box-shadow: 0 8px 24px rgba(2, 20, 43, 0.3);
    font-size: 13px; line-height: 1.25; }
  .bv-bar b { display: block; font-size: 15px; }
  .bv-bar .btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; white-space: nowrap; }
  body:has(#cookie-bar:not([hidden])) .bv-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .bv-lead { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 20px; margin-top: var(--sp-band); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ДОКУМЕНТ /policy/ — вариант Б «Лист документа» (policy-board 29.09.2026).
   Белый лист 820 px на бумажном фоне, название с чертой (как оглавление №06),
   дата редакции, разделы — h2 с номером из CSS-счётчика.
   ═══════════════════════════════════════════════════════════════════════ */
.doc-page { background: var(--light); padding: var(--sp-band) 0 var(--sp-sec); }
.doc-sheet { max-width: 820px; margin: 0 auto; display: grid; gap: 34px; padding: 48px 56px; background: #fff; border-radius: var(--r-card); }
.doc-head { display: grid; gap: 16px; }
.doc-head .page-title { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; color: var(--dark); border-left: 4px solid var(--dark); padding-left: 22px; overflow-wrap: anywhere; }
.doc-meta { margin: 0; padding-left: 26px; }
.doc-meta span { display: inline-block; background: var(--light); color: var(--dark); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 600; }
.doc-body { counter-reset: doc; }
.doc-body .richtext { max-width: none; }
.doc-body .richtext h2 { counter-increment: doc; display: flex; align-items: baseline; gap: 14px; margin: 34px 0 0; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -0.012em; color: var(--dark); }
.doc-body .richtext h2:first-child { margin-top: 0; }
.doc-body .richtext h2::before { content: counter(doc); min-width: 22px; font-size: 15px; font-weight: 800; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.doc-body .richtext p { margin: 12px 0 0; max-width: 68ch; }
@media (max-width: 600px) {
  .doc-page { padding: var(--sp-band) 0 var(--sp-sec); }
  .doc-page .container { padding-inline: 12px; }
  .doc-sheet { padding: 24px 20px; gap: 26px; border-radius: 16px; }
  .doc-body .richtext h2 { font-size: 20px; }
  .doc-meta { padding-left: 26px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ОБХОД САЙТА 30.09.2026 (artifacts/site-board-2026-09-30, выбор владельца:
   02, 04–12 и правка «О компании» по пункту 01).
   ═══════════════════════════════════════════════════════════════════════ */

/* 01 · «О компании»: общее число коннекторов, как на главной; разбивка — строкой под полосой */
.about-metrics-note { margin-top: calc(18px - var(--sp-band)); padding-bottom: var(--sp-band); font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.about-metrics-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* 02 · Карточки хабов: проектируемый хаб — строкой под ровными рядами; на телефоне все карточки — строки */
.hub-rate { flex-wrap: nowrap; }
@media (min-width: 701px) {
  .hubs-grid .hub-card--project { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .hub-card--project .hub-card-media, .hub-card--project .hub-card-placeholder { flex: 0 0 min(30%, 373px); min-height: 150px; aspect-ratio: auto; }
  .hub-card--project .hub-card-media img.hc-slide { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .hub-card--project .hub-card-body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 0 32px; padding: 22px 28px; }
  .hub-card--project .hub-card-top { grid-column: 1; justify-content: flex-start; gap: 12px; }
  .hub-card--project h3 { grid-column: 1; min-height: 0; margin: 10px 0 6px; }
  .hub-card--project h3 br { display: none; }
  .hub-card--project .hub-rate { grid-column: 1; margin: 0; }
  .hub-card--project .hub-card-amen { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-content: flex-end; margin: 0; padding: 0; border: 0; }
}
@media (max-width: 700px) {
  .hubs-grid { gap: 12px; }
  .hubs-grid .hub-card { flex-direction: row; align-items: stretch; }
  .hubs-grid .hub-card-media, .hubs-grid .hub-card-placeholder { flex: 0 0 108px; min-height: 118px; aspect-ratio: auto; }
  .hubs-grid .hub-card-media img.hc-slide { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .hubs-grid .hub-card-media .hc-arrow, .hubs-grid .hub-card-media .hc-dots, .hubs-grid .hub-card-amen, .hubs-grid .hr-src { display: none; }
  .hubs-grid .hub-card-body { flex: 1; min-width: 0; padding: 12px 14px; }
  .hubs-grid .hub-card h3 { font-size: 16px; line-height: 1.25; min-height: 0; margin: 6px 0 4px; }
  .hubs-grid .hub-card-top { gap: 8px; }
  .hubs-grid .hub-tag-city { font-size: 11px; }
  .hubs-grid .hub-card .hub-status { font-size: 11.5px; padding: 2px 8px; }
  .hubs-grid .hub-rate { font-size: 13px; margin: 0 0 3px; white-space: nowrap; }
  .hubs-grid .hub-card-meta { font-size: 12.5px; line-height: 1.35; margin: 0 0 2px; }
  .hubs-grid .hub-card-meta svg { width: 14px; height: 14px; }
}
@media (max-width: 360px) {
  .hubs-grid .hub-card-media, .hubs-grid .hub-card-placeholder { flex-basis: 88px; }
  .hubs-grid .hub-card-body { padding: 12px 10px 12px 12px; }
  .hubs-grid .hub-card h3 { font-size: 15px; }
}

/* 04 · Тарифы на странице хаба: на десктопе карточки делят весь ряд, на телефоне — одна карточка-список */
@media (min-width: 701px) {
  .tariffs-grid:not(.tariffs-grid--partner) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 700px) {
  .tariffs-grid:not(.tariffs-grid--partner) { gap: 0; background: #fff; border: 1px solid #e5eaf1; border-radius: var(--r-card); overflow: hidden; }
  .tariffs-grid:not(.tariffs-grid--partner) .tariff-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 14px 18px; border: 0; border-top: 1px solid #e5eaf1; border-radius: 0; box-shadow: none; background: none; transform: none; }
  .tariffs-grid:not(.tariffs-grid--partner) .tariff-card:first-child { border-top: 0; }
  .tariffs-grid:not(.tariffs-grid--partner) .tariff-card--happy { box-shadow: inset 3px 0 0 var(--green); }
  .tariffs-grid:not(.tariffs-grid--partner) .tariff-card--peak { box-shadow: inset 3px 0 0 var(--peak); }
  .tariffs-grid:not(.tariffs-grid--partner) .tariff-name { font-size: 13.5px; line-height: 1.35; margin: 0; }
  .tariffs-grid:not(.tariffs-grid--partner) .tariff-price { font-size: 20px; margin: 0; white-space: nowrap; }
  .tariffs-grid:not(.tariffs-grid--partner) :is(.tariff-note, .tariff-warn) { grid-column: 1 / -1; font-size: 13px; margin: 0; }
}

/* 05 · «СМИ о хабе»: в строке — фраза с названием хаба */
.hub-press span { color: #424c57; }
.hub-press mark { background: none; color: inherit; font-weight: 700; }

/* 06 · Хаб в проекте: действующие хабы рядом */
.near-hubs { background: #fff; }
.near-hubs .section-subtitle { max-width: 64ch; }

/* 07 · Второе меню на /b2b/ */
.flex-nav ~ .flex-body > .offers-section { padding-top: var(--sp-next); }

/* 08 · Аренда: фото хаба и факты рядом с описанием помещения */
.rental-grid { display: grid; gap: 0 56px; align-items: start; }
.rental-side { display: grid; gap: 14px; min-width: 0; }
.rental-photos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 8px; aspect-ratio: 3 / 2; }
.rental-photos img { min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-photo); display: block; }
.rental-photos img:first-child { grid-row: 1 / 3; }
.rental-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-block: 1px solid #d6dfe7; margin: 0; }
.rental-facts div { padding: 14px 14px 14px 0; }
.rental-facts div + div { padding-left: 14px; border-left: 1px solid #d6dfe7; }
.rental-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #5e6d7c; margin-bottom: 6px; }
.rental-facts dd { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rental-facts small { display: block; font-size: 12.5px; line-height: 1.4; color: #5e6d7c; margin-top: 4px; }
.rental-side > a { font-weight: 600; font-size: 14.5px; }
@media (min-width: 1000px) {
  .rental-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rental-grid .rental-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .rental-side { order: -1; margin-bottom: 26px; }
  .rental-photos { aspect-ratio: auto; height: min(62vw, 360px); }
  .rental-facts dd { font-size: 17px; }
}
@media (max-width: 380px) {
  .rental-facts { grid-auto-flow: row; }
  .rental-facts div { display: grid; grid-template-columns: 88px auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 0; }
  .rental-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid #d6dfe7; }
  .rental-facts dt, .rental-facts small { margin: 0; }
}

/* 09 · Статья «Знаний»: на широком экране оглавление едет сбоку и отмечает раздел в кадре (site.js) */
@media (min-width: 1180px) {
  .article-hero:has(+ .article-body .article-toc) .container { max-width: 1096px; }
  .article-hero:has(+ .article-body .article-toc) :is(.page-title, .page-intro) { max-width: 800px; }
  .article-body .news-article:has(> .article-toc) { max-width: 1096px; display: grid; grid-template-columns: minmax(0, 800px) 240px; column-gap: 56px; }
  .article-body .news-article:has(> .article-toc) > * { grid-column: 1; min-width: 0; }
  .article-body .news-article > .article-toc { grid-column: 2; grid-row: 1 / span 12; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .article-toc details { position: sticky; top: 96px; border-left: 1.5px solid #d9dde3; padding-left: 18px; }
  .article-toc summary { list-style: none; pointer-events: none; font-size: 11.5px; line-height: 1; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5A6B84; }
  .article-toc summary::-webkit-details-marker { display: none; }
  .article-toc ol { list-style: none; padding: 0; margin: 14px 0 0; }
  .article-toc li { margin: 0; font-size: 13.5px; line-height: 1.4; }
  .article-toc li a { display: block; position: relative; padding: 7px 0; color: #424c57; text-decoration: none; }
  .article-toc li a:hover { color: var(--dark); }
  .article-toc li a.is-current { color: var(--dark); font-weight: 700; }
  .article-toc li a.is-current::before { content: ""; position: absolute; left: -19.5px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--dark); }
}

/* 10 · Таблицы статей на телефоне: строка — карточка «подпись: значение» (подписи — ru.article_document) */
@media (max-width: 700px) {
  .richtext table.t-cards { display: block; overflow: visible; width: 100%; border: 0; }
  .richtext table.t-cards tbody { display: grid; gap: 10px; }
  .richtext table.t-cards tr { display: block; border: 1px solid #d9dde3; border-radius: 14px; padding: 12px 14px; background: #fff; }
  .richtext table.t-cards tr.t-head { display: none; }
  .richtext table.t-cards :is(td, th) { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 10px; padding: 5px 0; border: 0; font-size: 14.5px; line-height: 1.4; font-weight: 400; white-space: normal; }
  .richtext table.t-cards :is(td, th)::before { content: attr(data-label); color: #5e6d7c; font-size: 12.5px; line-height: 1.45; font-weight: 400; }
  .richtext table.t-cards :is(td, th):first-child { display: block; font-weight: 700; font-size: 15.5px; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1px solid #e5eaf1; }
  .richtext table.t-cards :is(td, th):first-child::before { display: none; }
  .richtext table.t-cards :is(td, th) p { margin: 0; }
}

/* 11 · Лента новостей на телефоне: первая новость крупно, остальные — строка с миниатюрой */
@media (max-width: 700px) {
  .news-grid:not(.guide-list) { gap: 0; }
  .news-grid:not(.guide-list) > .news-card:has(> img) { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; align-items: start; padding: 16px 0; border: 0; border-bottom: 1px solid #d9dde3; border-radius: 0; box-shadow: none; background: none; transform: none; }
  .news-grid:not(.guide-list) > .news-card:has(> img) > img { order: 2; width: 104px; height: 78px; aspect-ratio: auto; border-radius: 12px; }
  .news-grid:not(.guide-list) > .news-card:has(> img) .news-card-body { padding: 0; }
  .news-grid:not(.guide-list) > .news-card:has(> img) :is(h2, h3) { font-size: 16px; line-height: 1.3; margin: 6px 0 0; }
  .news-grid:not(.guide-list) > .news-card:has(> img) p { display: none; }
  :not(.related-posts) > .news-grid:not(.guide-list) > .news-card:has(> img):first-child { display: block; padding: 0 0 18px; }
  :not(.related-posts) > .news-grid:not(.guide-list) > .news-card:has(> img):first-child > img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-photo); margin-bottom: 14px; }
  :not(.related-posts) > .news-grid:not(.guide-list) > .news-card:has(> img):first-child :is(h2, h3) { font-size: 19px; }
  :not(.related-posts) > .news-grid:not(.guide-list) > .news-card:has(> img):first-child p { display: block; margin-top: 6px; }
}

/* 12 · «Соцсети» на десктопе: пять карточек-визиток в ряд с крупным QR */
@media (min-width: 1000px) and (hover: hover) {
  .socials-list { max-width: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .social-card { position: relative; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .social-card .social-meta { min-width: 0; max-width: 100%; }
  .social-card .social-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .social-qr { margin: 6px 0 0; align-self: stretch; display: grid; place-items: center; padding: 14px; border-radius: 14px; }
  .social-qr img { width: 100%; max-width: 132px; height: auto; aspect-ratio: 1; }
  .social-arrow { position: absolute; right: 20px; top: 26px; margin: 0; }
}

/* ИЛЛЮСТРАЦИИ ГИДОВ 01.10.2026: график/фото из Word + подпись; рамка как у фото и карточек */
.richtext figure { margin: 28px 0; }
.richtext figure img { width: auto; max-width: 100%; margin: 0; border: 1px solid #d9dde3; border-radius: var(--r-photo); background: #fff; }
.richtext figcaption { margin-top: 10px; color: var(--text-soft); font-size: 14px; line-height: 1.45; }

/* ГРУППЫ ГОРОДОВ НА ГЛАВНОЙ И /hubs/ 02–03.10.2026 (борд плитки хабов, вариант В «Два города»):
   над группой — только название города; город на карточке скрыт; «Очаковский» — обычной карточкой.
   ≤1023 — строки, 1024–2399 — по 4 в ряд с общими колонками, ≥2400 — одна сетка на все карточки (subgrid). */
.hubs-cities { display: grid; row-gap: 34px; }
.hubs-city[hidden] { display: none; }
.hubs-city-title { font-size: 20px; line-height: 1.2; font-weight: 700; margin: 0 0 16px; padding-top: 14px; border-top: 1px solid rgba(2, 20, 43, .14); }
.hubs-city .hub-card h3 { min-height: 0; }
.hubs-city .hub-tag-city { display: none; }
.hubs-city .hub-card-top { justify-content: flex-start; }
@media (max-width: 700px) {
  .hubs-cities { row-gap: 26px; }
  .hubs-city-title { font-size: 18px; margin-bottom: 12px; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  .hubs-city .hubs-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hubs-city .hub-card { flex-direction: row; align-items: stretch; }
  .hubs-city .hub-card-media, .hubs-city .hub-card-placeholder { flex: 0 0 220px; min-height: 150px; aspect-ratio: auto; }
  .hubs-city .hub-card-media img.hc-slide { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .hubs-city .hub-card-body { flex: 1; min-width: 0; padding: 16px 22px; }
  .hubs-city .hub-card h3 { margin: 8px 0 6px; }
}
@media (min-width: 1024px) {
  .hubs-city .hubs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hubs-cities--solo .hubs-city .hubs-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hubs-city .hub-card h3 { font-size: 17px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hubs-city .hub-card-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hubs-city .hr-src { display: none; }
  .hubs-city .hub-card-body { padding-inline: 16px; }
  .hubs-city .hub-card-amen { gap: 8px; }
}
@media (min-width: 2400px) {
  .hubs-cities--row .hub-card-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hubs-cities--row .hr-src { display: none; }
  .hubs-cities--row .hub-card-body { padding-inline: 12px; }
  .hubs-cities--row .hub-card-amen { gap: 8px; }
  /* под масштабом А раскладка 2K — контейнер 1560, семь карточек по ~210 px: заголовок как у компактной
     карточки на 1024–1199 px, поля и зазоры 12 px — иначе рвутся «Правобережный», «Энергия Москвы» */
  .hubs-cities--row .hub-card h3 { font-size: 17px; }
}
@media (min-width: 2400px) {
  .hubs-cities--row { grid-template-columns: repeat(var(--total), minmax(0, 1fr)); column-gap: 12px; }
  .hubs-cities--row .hubs-city { grid-column: span var(--n); display: grid; grid-template-columns: subgrid; align-content: start; }
  .hubs-cities--row .hubs-city-title { grid-column: 1 / -1; }
  .hubs-cities--row .hubs-city .hubs-grid { grid-column: 1 / -1; grid-template-columns: subgrid; gap: 12px; }
}

/* =========================================================================
   ХОВЕРЫ, КНОПКИ И ССЫЛКИ 03.10.2026 — борд hover-board, выбор владельца:
   H1·П «Подъём», К6 «Магнит», Р1 «Размер по роли», Е «Единый язык»,
   Л1 «Синий — значит ссылка». Анимируются только transform / opacity /
   box-shadow карточки; раскладка не пересчитывается.
   ========================================================================= */
:root {
  --shadow-lift: 0 2px 4px rgba(2, 20, 43, 0.04), 0 16px 32px -12px rgba(2, 20, 43, 0.24);
  --link: #063D83; --link-line: rgba(6, 61, 131, 0.4);
}
/* на тёмном ссылка — светлый синий брендбука */
.section-dark, .band-dark, .about-dark, .site-footer, .news-room { --link: #8AB9F1; --link-line: rgba(138, 185, 241, 0.45); }

/* ---------- H1·П: карточка поднимается на 4 px пружиной, одна тень-токен ---------- */
.hub-card, .news-card, .press-card, .happy-hub-card {
  transition: transform var(--t-glass) var(--spring), box-shadow var(--t-move) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.hub-card:hover, .hub-card:has(.hub-card-link:focus-visible),
.news-card:hover, .news-card:has(a:focus-visible),
.press-card:hover, .press-card:has(a:focus-visible),
.happy-hub-card:hover, .happy-hub-card:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #c3cedb;
}
/* строчные раскладки (широкая полоса) — только тень, без подъёма */
.hubs-grid .hub-card--project:hover, .hubs-grid .hub-card--project:has(.hub-card-link:focus-visible) { transform: none; }
@media (max-width: 1023px) { .hubs-city .hub-card:is(:hover, :has(.hub-card-link:focus-visible)) { transform: none; } }
@media (max-width: 700px) { .hubs-grid .hub-card:is(:hover, :has(.hub-card-link:focus-visible)) { transform: none; } }
/* архив «СМИ о нас» — компактные строки, ховер не нужен (как раньше) */
.press-archive .press-card:hover, .press-archive .press-card:has(a:focus-visible) { transform: none; box-shadow: none; }

/* фото медленно наезжает внутри рамки */
.hub-card-media .hc-slide { transition: transform var(--t-glass) var(--ease-out); }
.hub-card:is(:hover, :has(.hub-card-link:focus-visible)) .hc-slide { transform: scale(1.035); }
/* у новости фото без обёртки: нижняя кромка неподвижна, рост уходит под скругление карточки */
@media (hover: hover) and (min-width: 701px) {
  .news-card img { transform-origin: 50% 100%; transition: transform var(--t-glass) var(--ease-out); }
  .news-card--wide img { transform-origin: 100% 50%; }
  .news-card:is(:hover, :has(a:focus-visible)) img { transform: scale(1.035); }
}
/* стрелку за названием хаба на ховере владелец убрал 05.10.2026 — не возвращать */

/* ---------- Е: новости и плашки тем же языком ---------- */
/* заголовок карточки — ссылка-переход: синеет, подчёркивание растёт слева */
.news-card :is(h2, h3) a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: color var(--t-base) var(--ease-out), background-size var(--t-move) var(--ease-out);
}
.news-card:is(:hover, :has(a:focus-visible)) :is(h2, h3) a { color: var(--link); background-size: 100% 1.5px; }
/* плашки новостей на тёмном: без подъёма, кант светлеет, подчёркивание растёт */
.nr-plate { transition: border-color var(--t-base) var(--ease-out); }
.nr-plate:hover, .nr-plate:has(.nr-link:focus-visible) { transform: none; border-color: rgba(255, 255, 255, 0.5); }
.nr-plate h3 { display: inline; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--t-move) var(--ease-out); }
.nr-plate:is(:hover, :has(.nr-link:focus-visible)) h3 { text-decoration: none; background-size: 100% 1.5px; }

/* ---------- Л1: ссылка в тексте — синяя и подчёркнута всегда ---------- */
.richtext a, .page-intro a, .about-section a:not(.about-button), .rental-contact a, .rental-side a,
.press-sum a, .press-article-sum a, .q-link, .form-policy a, .hh-note a, .data-table a, .about-note a,
.news-back a, .press-src, .svc-sub a, .bv-aud a {
  color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: var(--link-line);
  transition: text-decoration-color var(--t-base) var(--ease-out), text-decoration-thickness var(--t-base) var(--ease-out);
}
.richtext a:hover, .page-intro a:hover, .about-section a:not(.about-button):hover, .rental-contact a:hover, .rental-side a:hover,
.press-sum a:hover, .press-article-sum a:hover, .q-link:hover, .form-policy a:hover, .hh-note a:hover, .data-table a:hover, .about-note a:hover,
.news-back a:hover, .press-src:hover, .svc-sub a:hover, .bv-aud a:hover {
  color: var(--link); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 2px;
}
/* ссылки-переходы со стрелкой: стрелка сдвигается на 4 px */
.section-more .title-arrow, .nr-all .title-arrow { display: inline-block; transition: transform var(--t-base) var(--ease-out); }
.section-more:hover .title-arrow, .nr-all:hover .title-arrow { transform: translateX(4px); }

/* ---------- Р1: размер по роли — 52 главное действие, 44 действие в блоке, 36 в строке ---------- */
/* M: действие в блоке — первый экран хаба, телефон и мессенджер, переход в раздел, листание */
.hub-route, .btn.btn-m { min-height: var(--btn-m); padding: 0 22px; font-size: 14px; }
@media (max-width: 420px) { .btn.btn-m { padding: 6px 20px; } }
/* S: действие в строке — шаг 8 px до M */
.nav-route, .fl-happy, .error-hubs-list a, .cookie-bar .btn { padding: 0 16px; }
/* на сенсорных экранах у S невидимая зона касания 44 px */
@media (pointer: coarse) {
  .nav-route, .fl-happy { position: relative; }
  .nav-route::after, .fl-happy::after { content: ""; position: absolute; inset: calc((var(--btn-s) - 44px) / 2) 0; }
}
/* вторичная контурная: листание и мессенджер рядом с телефоном */
.btn-outline, .offer-cta-tg { background: transparent; color: var(--dark); border: 0; box-shadow: inset 0 0 0 1.5px rgba(16, 18, 22, 0.22); }
.btn-outline:hover, .offer-cta-tg:hover { background: transparent; color: var(--dark); box-shadow: inset 0 0 0 1.5px var(--dark); }
/* телефон оффера на телефоне — капсула M, а не плитка 64–70 px; при нехватке места переносится мягко */
@media (max-width: 700px) {
  .offer-cta-btns .offer-cta-phone { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 8px; row-gap: 0;
    min-height: var(--btn-m); padding: 10px 20px; line-height: 1.3; border-radius: var(--r-card); white-space: normal; }
  .offer-cta-btns .offer-cta-tg { min-height: var(--btn-m); padding: 10px 20px; }
}

/* ---------- К6 «Магнит»: L- и M-кнопка тянется к курсору на 1,5 px, подпись — ещё на 0,75 px ---------- */
/* переменные ставит site.js только для мыши; ховер-тон основной кнопки — 1,6 : 1 (токены выше) */
.btn-ghost:hover, .guide-cta .btn-ghost:hover, .brands-btn-tg:hover { background: rgba(255, 255, 255, 0.06); }
.eh-mag {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out), transform var(--t-glass) var(--spring);
}
.eh-mag.is-pull { transition-duration: var(--t-base), var(--t-base), var(--t-base), var(--t-base), var(--t-quick); transition-timing-function: var(--ease-out); }
.eh-mag:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(0.97); }
.eh-mag-in {
  display: inherit; flex-direction: inherit; flex-wrap: inherit; align-items: inherit; justify-content: inherit; gap: inherit;
  transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform var(--t-glass) var(--spring);
}
.eh-mag.is-pull .eh-mag-in { transition-duration: var(--t-quick); transition-timing-function: var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .hub-card, .news-card, .press-card, .happy-hub-card { transition: box-shadow var(--t-base) linear, border-color var(--t-base) linear; }
  .hub-card:hover, .hub-card:has(.hub-card-link:focus-visible), .news-card:hover, .news-card:has(a:focus-visible),
  .press-card:hover, .press-card:has(a:focus-visible), .happy-hub-card:hover, .happy-hub-card:focus-visible { transform: none; }
  .hub-card .hc-slide, .news-card img { transform: none !important; transition: none; }
  .eh-mag, .eh-mag-in { transform: none !important; }
}

/* подсказка карты MapLibre («двумя пальцами / Ctrl + прокрутка»): затухание по токену, задержка 1 с для чтения сохранена.
   Стиль библиотеки грузится позже нашего — поэтому селектор с картой-родителем */
.maplibregl-map .maplibregl-cooperative-gesture-screen { transition: opacity var(--t-move) var(--ease-out) 1s; }
.maplibregl-map .maplibregl-cooperative-gesture-screen.maplibregl-show { transition: opacity var(--t-quick) var(--ease-out); }

/* Второе меню начинается по левому краю заголовка (просьба владельца 04.10.2026): капсула остаётся по краям
   шапки, а первый пункт (на FAQ — поле поиска) встаёт на левый край контейнера — туда же, где черта H1.
   --sub-in = край контейнера − край капсулы − внутренний отступ ряда; на телефоне 0. */
.eh-subnav { --sub-in: max(0px, calc(max(24px, (100% - var(--cw)) / 2 + 24px) - var(--sub-cap) - 5px)); }
.eh-subnav .eh-subnav-row { justify-content: flex-start; padding-left: calc(5px + var(--sub-in)); }
.fl-search { left: calc(var(--sub-cap) + 5px + var(--sub-in)); }
.fl-chips.has-search .eh-subnav-row { padding-left: 5px; margin-left: calc(var(--sub-cap) + var(--sub-in) + var(--fl-find) + 9px); }

/* СН «Сразу на месте» (борд карты /hubs/, 04.10.2026): снимок карты в той же камере, что живая карта.
   Картинка 2x встаёт в свой CSS-размер по центру — нарезка подходит к любой ширине своего диапазона.
   Пины на снимке нарисованы; живые пины и тайлы под ним, снимок тает по первому idle карты (site.js).
   Цвет подложки — фон стиля Liberty: виден, только пока грузится сама картинка. */
.map-poster { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none;
  background: #f8f4f0; transition: opacity var(--t-move) var(--ease-out); }
.map-poster img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; width: auto; height: auto; }
.map-poster.is-out { opacity: 0; }
/* скелетон (тёмная заглушка, молния, «Загружаем карту…») при снимке не нужен */
.ymap:has(> .map-poster) { animation: none; background: #f8f4f0; }
.ymap:has(> .map-poster)::before, .ymap:has(> .map-poster)::after { content: none; }
@media (prefers-reduced-motion: reduce) { .map-poster { transition: none; } }

/* ---------- Карта сети, вторая волна (борд карты ред. 3, 04.10.2026): АН+ · Э1 · Э4 ----------
   Селекторы с .maplibregl-map: стиль библиотеки подгружается позже style.css и при равной специфичности перебил бы наш. */
/* АН+ «Подлёт на нажатии»: выбранный пин пускает кольцо; карточка проявляется на 30 % подлёта (site.js снимает .ehm-wait) —
   прозрачность --t-base, подъём 8 px и рост от острия пина на --spring */
.ehm-pin.is-selected::after {
  content: ""; position: absolute; left: 50%; top: 40%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 14px; border: 2px solid var(--dark); opacity: 0; pointer-events: none; animation: ehm-ring 0.6s var(--ease-out);
}
@keyframes ehm-ring { 0% { opacity: 0.5; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.55); } }
/* карточка — поверх пинов (z 2–3) и кластеров (z 1): у попапа MapLibre своего z-index нет (замечание владельца 04.10) */
.maplibregl-map .maplibregl-popup { z-index: 5; transition: opacity var(--t-base) var(--ease-out); }
.maplibregl-map .maplibregl-popup.ehm-wait { opacity: 0; }
.maplibregl-map .maplibregl-popup-content { transform-origin: 50% 100%; transition: transform var(--t-move) var(--spring); }
.maplibregl-map .maplibregl-popup.ehm-wait .maplibregl-popup-content { transform: translateY(8px) scale(0.96); }
/* Э1 «Кластер ЭЗС»: кружок с числом станций — та же точка сети (синий диск, белая обводка), число шрифтом сайта */
.ehm-cluster { width: var(--d, 36px); height: var(--d, 36px); padding: 0; border: 0; background: none; cursor: pointer; z-index: 1; }
.ehm-cluster span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #063D83; color: #fff;
  box-shadow: inset 0 0 0 2.5px #fff, 0 6px 14px -6px rgba(2, 20, 43, 0.55);
  font: 700 13px/1 var(--font-body); font-variant-numeric: tabular-nums;
  transition: transform var(--t-move) var(--spring); animation: ehm-pop var(--t-move) var(--spring) backwards;
}
.ehm-cluster:hover span { transform: scale(1.1); }
.ehm-cluster:focus-visible { outline: none; }
.ehm-cluster:focus-visible span { box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 2px var(--focus); }
.ehm-dot.is-clustered { visibility: hidden; }
.ehm-dot.is-pop svg { animation: ehm-pop var(--t-move) var(--spring) backwards; }
@keyframes ehm-pop { from { transform: scale(0.55); opacity: 0; } }
/* Э4 «Ближайший ко мне»: точка «вы здесь» */
.ehm-me { width: 20px; height: 20px; border-radius: 50%; background: #063D83; box-shadow: inset 0 0 0 3px #fff, 0 2px 8px rgba(2, 20, 43, 0.4); pointer-events: none; }
.ehm-me::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: rgba(6, 61, 131, 0.2); animation: ehm-me 2s var(--ease-out) infinite; }
@keyframes ehm-me { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
/* «Ближайший ко мне» — пункт полки /hubs/ у правого края капсулы (01 «Полка раздела», 06.10.2026): материал и высота
   пунктов второго меню, нажата — заливка чернилами, как выбранный город; на телефоне — круглый значок. Отказ в геопозиции
   на телефоне на 3 с раскрывается поверх ряда — как поиск FAQ поверх рубрик. */
.nav-near {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: var(--sub-item); margin-left: auto; padding: 0 16px 0 12px;
  border: 0; border-radius: var(--r-pill); background: none; color: var(--s-fg);
  font: 600 13.5px/1 var(--font-body); white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-quick) var(--ease-out);
}
.nav-near[hidden] { display: none; }
.nav-near:hover { background: var(--s-hover); }
.nav-near:active { transform: scale(0.97); }
.nav-near[aria-pressed="true"] { background: var(--s-act-bg); color: var(--s-act-fg); }
.nav-near svg { width: 17px; height: 17px; flex: none; }
.nav-near.is-busy svg { animation: nav-near-spin 1s linear infinite; }
@keyframes nav-near-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .nav-near:not(.is-error) { width: var(--sub-item); padding: 0; justify-content: center; }
  .nav-near:not(.is-error) .nav-near-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav-near.is-error { position: absolute; z-index: 2; inset: calc((var(--sub-h) - var(--sub-item)) / 2) 5px; height: auto; margin: 0; justify-content: center; background: var(--s-act-bg); color: var(--s-act-fg); }
}
.nav-dist { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; font-weight: 700; color: var(--dark); animation: nav-dist-in var(--t-move) var(--ease-out) backwards; }
.nav-dist svg { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.nav-dist b { margin-right: 6px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--dark); color: #fff; font-size: 12px; }
.nav-dist i { font-style: normal; font-weight: 600; color: #5A6B84; white-space: nowrap; }
@keyframes nav-dist-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .ehm-pin.is-selected::after, .ehm-me::before, .nav-near.is-busy svg { animation: none; }
}

/* ==========================================================================
   «БИЗНЕСУ» Б·01, /tarify/ Т·01, ТАРИФЫ ХАБА С·01 — 05.10.2026 (борд «Бизнесу» + таблицы /tarify/)
   Цвета зон: хвоя — дешевле по часам, тёплый — пик, синий — программа лояльности,
   стандарт нейтральный (серый на белом, белый на «бумаге»). Двигаются только transform,
   opacity и clip-path; сутки участника программы — второй слой со шторкой.
   ========================================================================== */
.tz-happy { --zb: #DDEFE5; --zt: #1F5F4A; }
.tz-standard { --zb: #ECEEF1; --zt: #4A5563; }
.tz-peak { --zb: var(--peak-soft); --zt: var(--peak); }
.tz-loyalty { --zb: #DCE6F6; --zt: #063D83; }
.tc-now {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; vertical-align: 1px;
  font-size: 11.5px; font-weight: 700; line-height: 1.5; color: #fff; background: var(--dark);
  border-radius: var(--r-pill); padding: 2px 10px 2px 8px; white-space: nowrap;
}
.tc-now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7CE0AE; }
.tf-pill {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; line-height: 1.4;
  color: #063D83; background: #E8EFF9; border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap;
}
.tariff-card--loyalty { border-left: 3px solid var(--blue); }
.tc-welcome, .tf-welcome { margin: 10px 0 0; }

/* С·01: карточки и линия суток на странице хаба */
.hc-grid .tariff-card { display: flex; flex-direction: column; transition: transform var(--t-glass) var(--spring), box-shadow var(--t-glass) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.hc-grid .tariff-price { margin: 6px 0 8px; }
.hc-grid .tc-next { margin-top: 10px; font-weight: 600; color: var(--dark); }
.hc-grid .tariff-warn { margin-top: 8px; }
@media (hover: hover) and (min-width: 701px) {
  .hc-grid .tariff-card.is-hl { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #C3CEDB; }
}
.tday { margin: 22px 0 0; padding-top: 34px; }
.tday-box { position: relative; height: 58px; }
.tday-g { position: absolute; inset: 0; }
.tday-mem, .tf-mem { clip-path: inset(0 100% 0 0); transition: clip-path var(--t-glass) var(--ease-out); }
[data-mode="member"] .tday-mem, [data-mode="member"] .tf-mem { clip-path: inset(0); }
.tday-seg {
  position: absolute; top: 0; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  padding: 0 6px; font-style: normal; background: var(--zb); color: var(--zt); transition: opacity var(--t-base) var(--ease-out);
}
.tday-seg.tz-standard { --zb: #fff; box-shadow: inset 0 0 0 1px #dfe4ea; }
.tday-seg b { font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tday-seg.is-narrow { padding: 0; }
/* отрезок с текущим часом: цена у дальнего от метки «сейчас» края */
.tday-seg.is-start, .tf-s.is-start { justify-content: flex-start; padding-left: 14px; }
.tday-seg.is-end, .tf-s.is-end { justify-content: flex-end; padding-right: 14px; }
.tday-m { position: absolute; top: 39px; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; color: var(--text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tday-m i { font-style: normal; }
.tday-m.is-l { transform: none; }
.tday-m.is-r { transform: translateX(-100%); }
.tday-now { position: absolute; top: -4px; height: 40px; width: calc(100% / 24); border: 2px solid var(--dark); border-radius: 8px; box-sizing: border-box; z-index: 2; pointer-events: none; }
.tday-nowl { position: absolute; top: -34px; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: #fff; background: var(--dark); padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; z-index: 2; pointer-events: none; }
[data-hl-k] .tday-base .tday-seg { opacity: 0.25; }
[data-hl-k="happy"] .tday-base .tz-happy, [data-hl-k="standard"] .tday-base .tz-standard, [data-hl-k="peak"] .tday-base .tz-peak { opacity: 1; }

/* Т·01: карточки тарифов с примером в рублях и сетка часов на /tarify/ */
.board--grid { background: var(--light); }
.tf-cards { margin: 0 0 10px; }
.tf-cards .tariff-card { display: flex; flex-direction: column; gap: 6px; }
.tf-cards .tariff-price { margin: 0; }
.tf-cards .tariff-note { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.tf-cards .tariff-note a { color: inherit; }
.tf-cards .tf-welcome { margin: 0; }
.tf-ex { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed rgba(2, 20, 43, 0.14); font-size: 13.5px; font-weight: 600; color: var(--text-soft); }
.tf-ex b { color: var(--dark); font-weight: 700; }
.tf-exnote { font-size: 12.5px; color: var(--text-soft); margin: 0 0 44px; }
@media (hover: hover) and (min-width: 701px) {
  .tf-cards a.tariff-card { transition: transform var(--t-glass) var(--spring), box-shadow var(--t-glass) var(--ease-out), border-color var(--t-base) var(--ease-out); }
  .tf-cards a.tariff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #C3CEDB; }
}
.tf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin: 0 0 16px; }
.tf-head .board-sched { margin: 0; }
.tf-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.tf-legend li { display: inline-flex; align-items: center; gap: 7px; }
.tf-legend li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--zb); box-shadow: inset 0 0 0 1px rgba(2, 20, 43, 0.14); }
.tf-legend .k-happy { --zb: #DDEFE5; }
.tf-legend .k-loyalty { --zb: #DCE6F6; }
.tf-legend .k-standard { --zb: #ECEEF1; }
.tf-legend .k-peak { --zb: var(--peak-soft); }
.tf-legend .k-now::before { background: transparent; box-shadow: none; outline: 2px solid var(--dark); outline-offset: -2px; }
.tf-mbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 18px; }
.tf-mseg .hf-btn { cursor: pointer; font-family: inherit; }
.tf-mnote { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--text-soft); max-width: 64ch; margin: 0; }
.tf-grid-card { position: relative; background: #fff; border: 1px solid #e5eaf1; border-radius: var(--r-card); padding: 14px 24px 40px; --hc: 230px; --gap: 20px; }
.tf-grid, .tf-grid thead, .tf-grid tbody { display: block; width: 100%; }
.tf-grid { border-collapse: collapse; }
.tf-row { display: grid; grid-template-columns: var(--hc) minmax(0, 1fr); gap: 0 var(--gap); align-items: center; padding: 6px 0; }
.tf-row > th, .tf-row > td, .tf-city > th { display: block; padding: 0; border: 0; text-align: left; font-weight: inherit; background: none; }
.tf-hd { padding: 0 0 6px; }
.tf-bar { position: relative; height: 40px; }
.tf-ticks { height: 18px; }
.tf-tk { position: absolute; bottom: 0; transform: translateX(-50%); font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.tf-tk:first-child { transform: none; }
.tf-tk:last-child { transform: translateX(-100%); }
.tf-g { position: absolute; inset: 0; }
.tf-s { position: absolute; top: 0; bottom: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-style: normal; background: var(--zb); color: var(--zt); }
.tf-s b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tf-hub { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--dark); text-decoration: none; }
.tf-hub img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.tf-hub b { display: block; font-size: 15px; line-height: 1.2; transition: color var(--t-base) var(--ease-out); }
.tf-hub small { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft); margin-top: 2px; }
.tf-hub:hover b { color: var(--link); }
.tf-city { display: block; }
.tf-city > th { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); padding: 12px 0 2px; margin-top: 6px; border-top: 1px solid rgba(2, 20, 43, 0.1); }
.tf-grid tbody .tf-city:first-child > th { border-top: 0; margin-top: 0; padding-top: 4px; }
.tf-now {
  position: absolute; top: 38px; bottom: 34px; width: 2px; margin-left: -1px; z-index: 2; pointer-events: none;
  left: calc(24px + var(--hc) + var(--gap) + (100% - 48px - var(--hc) - var(--gap)) * var(--now) / 100);
  background: var(--dark); border-radius: 2px;
}
.tf-now span { position: absolute; bottom: -28px; left: 50%; transform: translateX(var(--now-x, -50%)); white-space: nowrap; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--dark); border-radius: var(--r-pill); padding: 3px 10px; }
.tf-mnow { display: none; position: absolute; top: -3px; bottom: -3px; width: calc(100% / 24); border: 2px solid var(--dark); border-radius: 6px; box-sizing: border-box; z-index: 1; }

/* Б·01: «Витрина с кадром» на главной */
.b2b-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 44px; align-items: stretch; margin-top: 6px; }
/* строки одной высоты: плашка только едет (transform), высоту не анимируем — иначе перерасчёт раскладки в каждом кадре */
.b2b-list { position: relative; display: grid; grid-auto-rows: 1fr; }
.b2b-plate {
  position: absolute; left: 0; right: 0; top: 0; height: 0; contain: layout paint; overflow: hidden; pointer-events: none; opacity: 0;
  background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  transition: transform var(--t-glass) var(--spring), opacity var(--t-base) var(--ease-out);
}
.b2b-plate.is-ready { opacity: 1; }
.b2b-plate::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2f6fd0, #1f9d6b); transform-origin: 0 50%; transform: scaleX(0); }
.b2b-plate.is-tick::after { animation: b2b-prog 5s linear forwards; }
@keyframes b2b-prog { to { transform: scaleX(1); } }
.b2b-row {
  position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 22px 24px 22px 20px; color: var(--dark); text-decoration: none; border-top: 1px solid rgba(2, 20, 43, 0.14);
  transition: border-color var(--t-base) var(--ease-out);
}
.b2b-row:not(:has(.b2b-ic)) { grid-template-columns: minmax(0, 1fr); }
.b2b-row:last-child { border-bottom: 1px solid rgba(2, 20, 43, 0.14); }
/* засечки на концах линейки — мотив фактов страниц хабов; под плашкой линейки гаснут */
.b2b-row::before, .b2b-row::after { content: ""; position: absolute; top: -1px; width: 1px; height: 6px; background: rgba(2, 20, 43, 0.28); transition: opacity var(--t-base) var(--ease-out); }
.b2b-row::before { left: 0; }
.b2b-row::after { right: 0; }
.b2b-row.is-on, .b2b-row.is-on + .b2b-row { border-top-color: transparent; }
.b2b-row.is-on::before, .b2b-row.is-on::after, .b2b-row.is-on + .b2b-row::before, .b2b-row.is-on + .b2b-row::after { opacity: 0; }
.b2b-row.is-on:last-child { border-bottom-color: transparent; }
.b2b-ic {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--blue); box-shadow: inset 0 0 0 1.5px rgba(2, 20, 43, 0.16);
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-glass) var(--spring);
}
.b2b-ic svg { width: 22px; height: 22px; }
.b2b-row.is-on .b2b-ic { background: var(--dark); color: #fff; box-shadow: none; transform: scale(1.04); }
.b2b-name { display: block; font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; line-height: 1.15; margin-bottom: 6px; text-wrap: balance; }
.b2b-text { display: block; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.b2b-go { white-space: nowrap; font-weight: 700; color: var(--dark); margin-left: 4px; transition: color var(--t-base) var(--ease-out); }
.b2b-row.is-on .b2b-go { color: var(--link); }
.b2b-arr { font-style: normal; color: var(--blue); display: inline-block; margin-left: 8px; transition: transform var(--t-base) var(--ease-out); }
.b2b-row.is-on .b2b-arr { transform: translateX(4px); }
.b2b-th, .b2b-fact-m, .b2b-pager { display: none; }
.b2b-frame { position: relative; min-height: 420px; border-radius: var(--r-photo); overflow: hidden; background: #dfe4ea; isolation: isolate; }
.b2b-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.b2b-frame img.is-prev { opacity: 1; z-index: 1; }
.b2b-frame img.is-on { opacity: 1; z-index: 2; }
.b2b-frame img.is-on.is-anim { animation: b2b-in 0.8s var(--ease-out) both; }
@keyframes b2b-in { from { clip-path: inset(100% 0 0 0); transform: scale(1.06); } to { clip-path: inset(0); transform: scale(1); } }
/* стекло — материал шапки в тёмном тоне */
.b2b-at, .b2b-chip, .b2b-fact-m {
  color: #fff; background: rgba(11, 12, 15, 0.42); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.2);
}
.b2b-at { position: absolute; z-index: 3; top: 16px; left: 16px; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); }
.b2b-chip { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 18px; border-radius: 18px; }
.b2b-chip b { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.b2b-chip span { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.b2b-chip > * { transition: opacity var(--t-base) var(--ease-out), transform var(--t-glass) var(--spring); }
.b2b-chip.is-swap > * { opacity: 0; transform: translateY(6px); }
.b2b-dots { position: absolute; z-index: 3; top: 20px; right: 18px; display: flex; gap: 6px; }
.b2b-dots i, .b2b-pager i { width: 6px; height: 6px; border-radius: 50%; transition: background-color var(--t-base) var(--ease-out), transform var(--t-glass) var(--spring); }
.b2b-dots i { background: rgba(255, 255, 255, 0.5); }
.b2b-dots i.is-on { background: #fff; transform: scale(1.35); }
@media (max-width: 900px) {
  .b2b-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 4px -24px 0; padding: 6px 24px 14px; scroll-padding-inline: 24px; scrollbar-width: none; }
  .b2b-grid::-webkit-scrollbar { display: none; }
  .b2b-list { display: contents; }
  .b2b-plate, .b2b-frame { display: none; }
  .b2b-row { flex: 0 0 82%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: #fff; border: 1px solid #e5eaf1 !important; border-radius: var(--r-card); overflow: hidden; }
  .b2b-row::before, .b2b-row::after { display: none; }
  .b2b-th { display: block; position: relative; aspect-ratio: 4 / 3; background: #dfe4ea; }
  .b2b-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .b2b-fact-m { display: inline-flex; position: absolute; left: 12px; bottom: 12px; padding: 8px 12px; border-radius: 14px; font-size: 15px; font-weight: 700; }
  .b2b-ic { display: none; }
  .b2b-tx { padding: 16px 18px 18px; }
  .b2b-name { font-size: 19px; }
  .b2b-text { font-size: 14.5px; }
  .b2b-row.is-on .b2b-go { color: var(--dark); }
  .b2b-row.is-on .b2b-arr { transform: none; }
  .b2b-pager { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
  .b2b-pager i { background: rgba(2, 20, 43, 0.22); }
  .b2b-pager i.is-on { background: var(--dark); }
}

@media (max-width: 700px) {
  .tariffs-grid:not(.tariffs-grid--partner) .tariff-card--loyalty { box-shadow: inset 3px 0 0 var(--blue); }
  .tc-welcome, .tf-welcome, .tf-ex { grid-column: 1 / -1; }
  .tc-welcome, .tf-welcome { margin: 4px 0 0; }
  .hc-grid .tc-next { margin-top: 6px; }
  .hc-grid .tariff-warn { margin-top: 2px; }
  .tday { margin-top: 18px; }
  .tday-seg { padding: 0 4px; }
  .tday-seg b { font-size: 11.5px; }
  .tday-seg.is-narrow b, .tday-m i { display: none; }
  .tday-now { border-radius: 5px; }
  .tf-ex { margin: 2px 0 0; padding-top: 0; border: 0; font-size: 12.5px; }
  .tf-exnote { margin-bottom: 34px; }
  .tf-mx { display: none; }
  .tf-mseg .hf-btn { padding: 0 12px; font-size: 13px; }
  .tf-grid-card { padding: 10px 14px 14px; --hc: 0px; --gap: 0px; }
  .tf-row { grid-template-columns: minmax(0, 1fr); gap: 6px 0; padding: 8px 0; }
  .tf-hd { padding: 0; }
  .tf-hd > th:first-child { display: none; }
  .tf-tk.is-3 { display: none; }
  .tf-hub img { width: 32px; height: 32px; border-radius: 8px; }
  .tf-hub b { font-size: 14px; }
  .tf-bar { height: 30px; }
  .tf-ticks { height: 18px; }
  .tf-s b { font-size: 11.5px; }
  .tf-s.is-narrow b { display: none; }
  .tf-now { display: none; }
  .tf-mnow { display: block; }
}
@media (min-width: 701px) and (max-width: 1180px) {
  /* четыре карточки в ряд на планшете переносят названия и разводят цены по высоте — две в ряд */
  .tariffs-grid.tf-cards:not(.tariffs-grid--partner) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .tf-mx2 { display: none; }
}
@media (max-width: 360px) {
  /* «Электрохаб «Правобережный»» в 30 px шире экрана 320 px (было и до 05.10) */
  .page-hub .page-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .tday-mem, .tf-mem { transition: none; }
  .b2b-frame img.is-on.is-anim, .b2b-plate.is-tick::after { animation: none; }
  .b2b-plate { transition: opacity var(--t-base); }
}

/* ============================================================
   ПОЛКА РАЗДЕЛА 01 (борд 05.10.2026, на сайте 06.10.2026): второе меню или фильтр под заголовком страниц
   шапки — одна стеклянная капсула .eh-subnav на одном шаге. Шаг --shelf-gap (= --sp-next, 28 px) — от низа
   оглавления (заголовок или лид, что ниже) до стекла, первый пункт на 33 px; тот же шаг — от капсулы до первого
   блока. Правило языка: под заголовком страницы — стеклянная полка, внутри блоков — дорожка «Контур».
   ============================================================ */
:root { --shelf-gap: var(--sp-next); }
/* отступы блоков остаются по шкале ритма (28), а поле капсулы над стеклом (--sub-top, 6 px) полка забирает
   отрицательным отступом — стекло стоит ровно на шаге от оглавления и от первого блока */
.page-lead--shelf { padding-bottom: var(--shelf-gap); }
.flex-nav, .hubs-shelf, .fl-chips, .media-nav { margin-top: calc(-1 * var(--sub-top)); }
.flex-nav, .hubs-shelf { margin-bottom: calc(-1 * var(--sub-top)); }
.media-nav { margin-bottom: calc(var(--shelf-gap) - var(--sub-top)); }
.flex-nav ~ .flex-body > .board:first-child,
.flex-nav ~ .flex-body > .offers-section:first-child,
.hubs-shelf + .navigator { padding-top: var(--shelf-gap); }
/* полка /hubs/: города — сегменты внутри капсулы без своей дорожки (ползунок рисует модуль сегментов) */
#main:has(> .hubs-shelf) { background: #fff; }
.hubs-shelf .hubs-filter { flex: none; gap: 4px; width: auto; max-width: none; height: var(--sub-item); margin: 0; padding: 0; background: none; box-shadow: none; overflow: visible; }
.hubs-shelf .eh-seg-thumb { top: 0; bottom: 0; background: var(--s-act-bg); }
.hubs-shelf .hubs-filter .hf-btn { height: var(--sub-item); min-height: var(--sub-item); padding: 0 14px; color: var(--s-fg); }
.hubs-shelf .hubs-filter .hf-btn:hover { color: var(--s-fg); background: var(--s-hover); }
.hubs-shelf .hubs-filter .hf-btn.is-active { color: var(--s-act-fg); background: var(--s-act-bg); }
.hubs-shelf .eh-seg.is-ready .hf-btn.is-active { background: transparent; }
@media (max-width: 700px) { .hubs-shelf .hubs-filter .hf-btn { padding: 0 12px; font-size: 13px; } }
/* телефон: пункты полок плотнее — у «Медиа» на 390 px все три раздела помещаются */
@media (max-width: 420px) { .eh-subnav .eh-subnav-item { padding: 0 10px; } .hubs-shelf .hubs-filter .hf-btn { padding: 0 11px; } }
/* самые узкие телефоны: число хабов прячется — полка /hubs/ остаётся одной строкой */
@media (max-width: 359px) { .hubs-shelf .hf-n { display: none; } }

/* С «Короткие строки» (борд «Сайт на 2K и 4K», 06.10.2026): на больших экранах лид под заголовком, «СМИ о хабе»
   и анонсы публикаций читаются в 70–90 знаков. На ноутбуке лид — во всю ширину правее заголовка (решение 07.08). */
@media (min-width: 1700px) {
  .page-lead .page-intro--aside { max-width: 70ch; }
  .hub-press span { display: block; max-width: 78ch; }
  .press-sum { max-width: 80ch; }
}

/* ---------- Рамка калькулятора экономии 06.10.2026: как у калькулятора зарядки (.cc-grid.card) ---------- */
.savings-calc .sc-grid { padding: 26px 28px; gap: 34px; }
.sc-bars { align-self: stretch; justify-content: center; border-left: 1px solid #e5eaf1; padding-left: 30px; }
@media (max-width: 900px) {
  .savings-calc .sc-grid { padding: 20px 18px; gap: 20px; }
  .sc-bars { border-left: 0; border-top: 1px solid #e5eaf1; padding: 18px 0 0; }
}
/* ≤359 px: рамка забирает 36 px — топливо и подписи полос плотнее, иначе «Дизель» уходит за край дорожки */
@media (max-width: 359px) {
  .savings-calc .sc-grid { padding: 18px 14px; }
  .sc-fuels .hf-btn { padding: 0 2px; font-size: 12px; }
  .sc-fuels .hf-btn small { font-size: 11px; }
  .sc-row-lab { font-size: 12.5px; gap: 8px; }
}

/* ==========================================================================
   ЗАГРУЖЕННОСТЬ ПО ЧАСАМ — А «Шкала мест» + Д «Честные числа» (06.10.2026)
   Столбик — средняя доля занятых портов в этот час, верх графика — все порты хаба:
   светлая дорожка = свободно (реальный запас), заливка снизу = занято. Высота —
   clip-path (без перерасчёта раскладки), «сейчас» — как у линии тарифов С·01.
   ========================================================================== */
.hz { --gap: 3px; --gut: 40px; --ph: 128px; --hz-busy: #4A5563; --hz-free: #DDEFE5; padding: 22px 28px 20px; overflow: visible; }
.hz-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; }
.hz-big { display: flex; align-items: center; gap: 14px; flex: 1 1 360px; min-width: 0; margin: 0; }
.hz-big b { font-size: 29px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #1F5F4A; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hz-big span { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--text-muted); }
.hz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.hz-legend li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hz-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.hz-legend .k-busy { background: var(--hz-busy); }
.hz-legend .k-free { background: var(--hz-free); box-shadow: inset 0 0 0 1px #c9dfd2; }
.hz-legend .k-happy, .hz-legend .k-peak { width: 16px; height: 5px; }
.hz .k-happy { background: #1F5F4A; }
.hz .k-peak { background: var(--peak); }
.hz-body { position: relative; margin-top: 38px; padding-left: var(--gut); }
.hz-y {
  position: absolute; left: 0; top: 0; width: calc(var(--gut) - 8px); height: var(--ph);
  display: flex; flex-direction: column; justify-content: space-between; text-align: right;
  font-size: 11px; font-weight: 600; line-height: 1; color: var(--text-soft); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hz-y::before { content: attr(data-unit); position: absolute; right: 0; bottom: calc(100% + 8px); font-size: 10.5px; }
.hz-y span:first-child { transform: translateY(-2px); }
.hz-y span:last-child { transform: translateY(2px); }
.hz-plot { position: relative; height: var(--ph); cursor: crosshair; touch-action: pan-y; border-radius: 8px; }
.hz-plot:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.hz-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--gap); }
.hz-col { position: relative; border-radius: 5px; background: var(--hz-free); }
.hz-col i {
  position: absolute; inset: 0; border-radius: 5px; background: var(--hz-busy);
  clip-path: inset(min(calc(100% - var(--v) * 1%), calc(100% - 3px)) 0 0 0 round 5px);
  transition: background-color var(--t-quick) var(--ease-out);
}
.hz-col.is-sel i { background: var(--dark); }
.hz-mid { position: absolute; left: 0; right: 0; top: 50%; z-index: 1; border-top: 1px dashed rgba(2, 20, 43, 0.22); pointer-events: none; }
.hz-now {
  position: absolute; top: -5px; bottom: -5px; z-index: 2; pointer-events: none; box-sizing: border-box;
  left: calc((100% - 23 * var(--gap)) / 24 * var(--h) + var(--gap) * var(--h) - 3px);
  width: calc((100% - 23 * var(--gap)) / 24 + 6px);
  border: 2px solid var(--dark); border-radius: 8px;
}
.hz-nowl {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--dark); padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hz-now.is-l .hz-nowl { left: 0; transform: none; }
.hz-now.is-r .hz-nowl { left: auto; right: 0; transform: none; }
.hz-band { display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--gap); height: 5px; margin-top: 6px; }
.hz-band i { border-radius: 3px; }
.hz-axis { position: relative; height: 15px; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.hz-axis span { position: absolute; top: 0; transform: translateX(-50%); left: calc((100% - 23 * var(--gap)) / 24 * (var(--h) + 0.5) + var(--gap) * var(--h)); }
.hz-axis .is-l { left: 0; transform: none; }
.hz-axis .is-r { left: auto; right: 0; transform: none; }
.hz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e9edf2; }
.hz-read { flex: 1 1 420px; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; color: var(--dark); }
.hz-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; vertical-align: 1px;
  font-size: 11.5px; font-weight: 700; line-height: 1.5; color: #fff; background: var(--dark); border-radius: var(--r-pill); padding: 2px 10px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hz-pill.is-now { padding-left: 8px; }
.hz-pill.is-now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7CE0AE; }
.hz-src { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.hz-src b { color: var(--text-muted); }
@media (max-width: 1150px) { .hz { --gut: 36px; } }
@media (max-width: 700px) {
  .hz { --gap: 2px; --gut: 26px; --ph: 112px; padding: 18px 16px 16px; }
  .hz-big b { font-size: 26px; }
  .hz-big span, .hz-read { font-size: 13px; }
  .hz-legend { gap: 4px 12px; font-size: 12px; }
  .hz-body { margin-top: 36px; }
  .hz-y { font-size: 10px; }
  .hz-col, .hz-col i { border-radius: 3px; }
  .hz-col i { clip-path: inset(min(calc(100% - var(--v) * 1%), calc(100% - 3px)) 0 0 0 round 3px); }
  .hz-now { border-radius: 6px; }
}