@import url("/assets/fonts.css");

:root{
  --accent:#2563EB; --accent-dark:#1D4ED8;
  --bg:#F6F8FC; --surface:#FFFFFF;
  --ink:#16233A; --ink-2:#475569; --muted:#5C6B80; --muted-2:#8A8880;
  --line:#E2E8F0; --line-soft:#EEF2F7;
  --radius:14px; --maxw:1320px;
  --sans:'Inter','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Space Grotesk','Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;overflow-y:scroll}
/* --- Бесшовный хедер/футер между страницами (cross-document View Transitions) ---
   Браузер сохраняет <header>/<footer> при переходе на другую страницу и НЕ двигает их
   (они помечены общими view-transition-name → old/new снимок совпадает → полная статика);
   меняется плавным кросс-фейдом только контент. В браузерах без поддержки — обычный
   переход (текущее поведение), без регресса. overflow-y:scroll выше — страховка от
   горизонтального скачка центровки в движках без scrollbar-gutter (старые Safari/Chrome). */
@view-transition{navigation:auto}
body>header{view-transition-name:sg-header}
body>footer{view-transition-name:sg-footer}
::view-transition-old(sg-header),::view-transition-new(sg-header),
::view-transition-old(sg-footer),::view-transition-new(sg-footer){animation:none;mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none}
}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 36px}
.section{padding:60px 0}
.section--tight{padding:60px 0}
@media(max-width:720px){.container{padding:0 20px}.section{padding:56px 0}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:15px 36px;background:rgba(246,248,252,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand__mark{width:22px;height:22px;border-radius:6px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px}
.brand__name{font-weight:700;font-size:18px;letter-spacing:-.01em}
.nav{display:flex;gap:26px}
.nav a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;padding-bottom:5px;
  background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s,color .25s}
.nav a:hover{color:var(--ink);background-size:100% 2px}
/* header nav links (inline styles replaced by .nav-link so :hover / current-page work) */
.nav-link{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;padding-bottom:5px;
  background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .25s,color .25s}
.nav-link:hover,.nav-link:focus-visible{color:var(--ink);background-size:100% 2px}
.nav-link[aria-current="page"]{color:var(--accent);font-weight:600;background-size:100% 2px}
.nav-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.btn-cta{font-size:14px;font-weight:600;color:#fff;background:var(--accent);padding:10px 18px;border-radius:8px;text-decoration:none;transition:background .25s,transform .25s;white-space:nowrap}
.btn-cta:hover{background:var(--accent-dark);transform:translateY(-1px)}
.nav-toggle{display:none}
@media(max-width:900px){
  .site-header{padding:13px 20px}
  .nav{position:fixed;inset:56px 0 auto 0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 20px 16px;display:none}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line-soft)}
  #nav-toggle:checked ~ .nav{display:flex}
  .nav-toggle{display:inline-flex;cursor:pointer;font-size:22px;line-height:1;color:var(--ink)}
  .header-cta{display:none}
}
/* --- Инлайн-хедер (тег <header>/<nav>): на узких экранах переносим строку действий,
   чтобы кнопка «Войти в аккаунт» никогда не уезжала за край (после добавления поиска ⌘K
   правый кластер стал из 3 элементов). Дублирует и расширяет инлайн-@media главной.
   2026-09-01: порог поднят 820 → 1199. Десктопной раскладке шапки нужно ~1195px
   (лого 170 + 8 пунктов nav 729 + правый кластер ~325 + паддинги 72), поэтому в
   диапазоне 821–1199 не работала ни мобильная, ни десктопная раскладка и документ
   становился шире окна (scrollWidth 1195 при вьюпорте 1024). --- */
@media(max-width:1199px){
  body>header{flex-wrap:wrap;gap:10px!important;padding-left:20px!important;padding-right:20px!important}
  body>header>nav{order:3;width:100%;overflow-x:auto;gap:20px!important;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  body>header>nav a{white-space:nowrap}
  body>header>div:last-child{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
}
/* 1200–1339: десктопная раскладка помещается впритык. После переключателя RU/EN шапке
   нужно ~1290px (замер QA 24.09.2026: +90px при 1200, +26px при 1280 на всех RU-страницах),
   поэтому в этом диапазоне сжимаем паддинги, промежутки и прячем подсказку ⌘K у поиска. */
@media(min-width:1200px) and (max-width:1339px){
  body>header{padding-left:20px!important;padding-right:20px!important}
  body>header>nav{gap:16px!important}
  body>header>div:last-child{gap:10px!important}
  body>header .hs-btn .hs-kbd{display:none}
}

/* Баннер подбора на главной: кнопка «Подобрать за 30 секунд →» имеет инлайновый
   white-space:nowrap и flex:none, поэтому на 320px (280px за вычетом паддингов
   контейнера, минус 72px паддингов баннера) не помещалась и уводила страницу вбок
   на +32px. Инлайн бьётся только !important. */
@media(max-width:560px){
  .pd-banner{padding:24px 20px!important;gap:16px!important}
  .pd-banner>span{white-space:normal!important;text-align:center;width:100%;padding:13px 16px!important;font-size:15px!important}
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:13px;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 8px;color:var(--line)}

/* ---------- page hero ---------- */
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.page-hero{padding:36px 0 8px}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1.05;letter-spacing:-.025em;margin:14px 0 0;max-width:18ch}
.page-hero .lead{font-size:18px;color:var(--ink-2);margin:18px 0 0;max-width:62ch}

/* ---------- section heading ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.02em}
.sec-head .all-link{font-size:14px;font-weight:500;color:var(--accent);text-decoration:none}
.sec-head .all-link:hover{text-decoration:underline}

/* ---------- rubric tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}
.tile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 26px rgba(37,99,235,.08)}
.tile .num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
.tile h3{font-size:19px;font-weight:600;margin:14px 0 6px}
.tile p{font-size:13.5px;color:var(--ink-2)}

/* ---------- article cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.card .cover{aspect-ratio:16/10;border-radius:12px;background:#eef1f6;overflow:hidden}
.card .cover img{width:100%;height:100%;object-fit:cover}
/* пустая обложка (карточки-ссылки на разделы): нейтральный фон вместо синей подложки */
.cover:empty,.cov:empty{background:#eef1f6;position:relative}
.cover:empty::after,.cov:empty::after{content:"→";position:absolute;inset:0;display:grid;place-items:center;font-size:26px;font-weight:300;color:var(--muted)}
.card .badge{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:14px 0 6px}
.card h3{font-size:16px;font-weight:600;line-height:1.3}
.card .meta{font-size:12.5px;color:var(--muted);margin-top:8px}
.card:hover h3{color:var(--accent)}

/* ---------- rating cards (wide) ---------- */
.rcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.rcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rcards{grid-template-columns:1fr}}
.rcard{display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;border-radius:14px;padding:20px;text-decoration:none;color:#0b1530;background:linear-gradient(135deg,#cfe0ff,#e9e2ff);border:1px solid var(--line)}
.rcard .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--accent);align-self:flex-start;background:rgba(255,255,255,.7);padding:4px 9px;border-radius:999px;margin-bottom:auto}
.rcard h3{font-size:17px;font-weight:600;line-height:1.25;margin-top:14px}

/* ---------- news / link list ---------- */
.news-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.news-list a{display:flex;gap:20px;align-items:baseline;padding:18px 22px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-soft);transition:background .15s}
.news-list a:last-child{border-bottom:0}
.news-list a:hover{background:#f8faff}
.news-list .date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);min-width:54px}
.news-list .ttl{font-size:15px;font-weight:500}
.news-list .news-row{display:flex;gap:20px;align-items:baseline;padding:18px 22px;border-bottom:1px solid var(--line-soft);color:var(--muted)}
.news-list .news-row:last-child{border-bottom:0}
.news-list .news-row .ttl{color:var(--muted);font-weight:400}

/* ---------- hub index list (compact rows) ---------- */
.row-list{border-top:1px solid var(--line)}
.row-list a{display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;gap:24px;padding:24px 4px;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:padding-left .2s}
.row-list a:hover{padding-left:10px;color:var(--accent)}
.row-list .idx{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted)}
.row-list .rl-title{font-size:19px;font-weight:600}
.row-list .rl-sub{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.row-list .rl-go{font-size:13px;color:var(--muted)}

/* ---------- prose (articles & static) ---------- */
/* Раскладка статьи тянется на всю ширину контейнера, как секции главной.
   Бегущий текст держим на читаемой мере (--measure), а медиа/таблицы/блоки — во всю ширину. */
:root{--measure:900px}
.prose{max-width:none;font-size:17px;line-height:1.75;color:#1f2b40}
.prose>*+*{margin-top:18px}
/* читаемая длина строки для текстовых элементов (не растягиваем строки во всю ширину) */
.prose>p,.prose>ul,.prose>ol,.prose>.lead-p,.prose>blockquote,.prose .lead-p{max-width:var(--measure)}
.prose h2{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-.02em;margin-top:64px;max-width:var(--measure)}
.prose h3{font-size:21px;font-weight:600;margin-top:40px;max-width:var(--measure)}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin-top:8px}
@media(max-width:720px){.prose h2{margin-top:48px}.prose h3{margin-top:32px}}
.prose a:not(.btn-cta):not(.btn-ghost){color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:600;color:var(--ink)}
.lead-p{font-size:19px;line-height:1.7;color:var(--ink-2)}
/* широкие блоки — на всю ширину статьи (как карточки/секции на главной) */
.prose figure,.prose .tbl,.prose table,.prose .pc,.prose .faq,.prose .callout{max-width:none;width:100%}

/* article meta header */
.art-head{max-width:none}
.art-head h1{max-width:22ch}
.art-head .art-meta,.art-head .eyebrow{max-width:var(--measure)}
.art-head h1{font-family:var(--display);font-size:clamp(30px,4.4vw,50px);font-weight:700;line-height:1.08;letter-spacing:-.025em;margin:14px 0 0}
.art-meta{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:13.5px;color:var(--muted)}
.art-meta .author{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-weight:500}
.art-meta .avatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,#cfe0ff,#e9e2ff);display:inline-block}
.art-cover{aspect-ratio:16/9;border-radius:16px;margin:28px 0 8px;background:#eef1f6;overflow:hidden}
.art-cover img{width:100%;height:100%;object-fit:cover;display:block}
img.avatar{object-fit:cover}
.prose figure{margin:26px 0}
.prose figure img{width:100%;border-radius:14px;display:block}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.member .ava{overflow:hidden}
.member .ava img{width:100%;height:100%;object-fit:cover;display:block}

/* tables */
/* Обёртка со своей горизонтальной прокруткой: широкая таблица (3–7 колонок) не влезает
   в 320–414px и без обёртки растягивала ВЕСЬ документ (страница ехала вбок до +526px).
   Эталон — loadfile.ru/.tablewrap. min-width держит колонки читаемыми внутри скролла. */
/* .table-wrap / .ac-table-wrap — обёртки, которые уже были в разметке отдельных статей,
   но своего CSS не имели и потому не работали; лечим тем же правилом. */
.tablewrap,.table-wrap,.ac-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
.tablewrap>table,.table-wrap>table,.ac-table-wrap>table{margin:0}
@media(max-width:720px){.tablewrap>table,.table-wrap>table,.ac-table-wrap>table{min-width:520px}}
/* Элементы грид-раскладок по умолчанию имеют min-width:auto и раздуваются под самый
   широкий кусок содержимого (на /reklama/ карточка формата растягивалась до 574px
   в колонке 265px). */
.fmt-grid>*,.tiles>*,.cards>*{min-width:0}
/* Длинные слова в заголовках («Усовершенствованный…») на 320px не помещаются в строку
   и уводят документ вбок — разрешаем перенос внутри слова. */
h1,h2,h3,.prose h2,.prose h3,.art-head h1{overflow-wrap:break-word;hyphens:auto}
/* То же для текста: в импортированных статьях встречаются склейки без пробела
   («устройства.Кроссплатформенность»), которые не переносятся и рвут раскладку. */
.prose p,.prose li,.prose dd,.prose blockquote{overflow-wrap:break-word}
/* Страховка для НОВЫХ статей: если таблицу опубликовали без .tablewrap, на узких
   экранах она всё равно скроллится сама в себе, а не растягивает документ.
   Только прямой потомок .prose — обёрнутых таблиц правило не касается. */
@media(max-width:900px){.prose>table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}
.tbl{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.tbl th{background:#1f3a5f;color:#fff;text-align:left;padding:11px 14px;font-weight:600}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line)}
.tbl tr:nth-child(even) td{background:#f8faff}

/* callout / faq */
.callout{background:#f4f5f7;border-left:4px solid var(--accent);border-radius:10px;padding:18px 20px;font-size:15.5px}
.faq{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:20px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--accent)}
.faq details[open] summary::after{content:'–'}
.faq .ans{padding:0 20px 16px;color:var(--ink-2);font-size:15px}

/* pros/cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
@media(max-width:560px){.pc{grid-template-columns:1fr}}
.pc .box{border-radius:12px;padding:18px 20px;font-size:15px}
.pc .pros{background:#ecfdf3;border:1px solid #b7ebc6}
.pc .cons{background:#fef2f2;border:1px solid #f6c9c9}
.pc h4,.pc h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.pc .pros h4,.pc .pros h3{color:#15803d}.pc .cons h4,.pc .cons h3{color:#b91c1c}
.pc ul{padding-left:18px}.pc li{margin-top:6px}

/* author cards */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
@media(max-width:800px){.team{grid-template-columns:1fr}}
.member{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px}
.member .ava{width:64px;height:64px;border-radius:999px;background:linear-gradient(135deg,#cfe0ff,#e9e2ff);margin-bottom:14px}
.member h3{font-size:18px;font-weight:600}
.member .role{font-size:13px;color:var(--accent);font-weight:600;margin:2px 0 10px}
.member p{font-size:14px;color:var(--ink-2)}

/* contact form */
.form{max-width:560px;display:grid;gap:14px;margin-top:24px}
.form label{font-size:13px;font-weight:600;color:var(--ink-2)}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.form input:hover,.form select:hover,.form textarea:hover{border-color:#c7d2e0}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.form textarea{min-height:130px;resize:vertical}
.form .chk{display:block;position:relative;padding-left:28px;font-size:13px;line-height:1.5;color:var(--muted)}
.form .chk input{position:absolute;left:0;top:1px;width:16px;height:16px;margin:0;accent-color:var(--accent)}
.form .chk input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form .chk a{color:#1d4ed8;text-decoration:underline}
.form button[type=submit]:disabled{opacity:.65;cursor:progress}

/* footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:48px 36px 52px}
.site-footer .ft-wrap{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.site-footer p{font-size:13px;line-height:1.6;color:#64748B;margin:14px 0 0;max-width:300px}
.site-footer .soc{display:flex;gap:16px;margin-top:18px}
.site-footer .soc a{font-size:13px;font-weight:500;color:var(--accent);text-decoration:none}
.site-footer .cols{display:flex;gap:54px;flex-wrap:wrap}
.site-footer .col{display:flex;flex-direction:column;gap:11px}
.site-footer .col .h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.site-footer .col a{font-size:14px;color:var(--ink-2);text-decoration:none}
.site-footer .col a:hover{color:var(--accent)}
.site-footer .copy{max-width:var(--maxw);margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted)}

/* hero (home) */
.home-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;padding:60px 0 30px}
@media(max-width:900px){.home-hero{grid-template-columns:1fr;gap:28px}}
.home-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,5.4vw,68px);line-height:1.05;letter-spacing:-.025em;margin:18px 0 0}
.home-hero h1 em{font-style:normal;color:var(--accent)}
.home-hero .lead{font-size:18px;color:var(--ink-2);margin:20px 0 26px;max-width:52ch}
.home-hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.btn-ghost{font-size:14px;font-weight:600;color:var(--accent);background:#fff;border:1px solid var(--line);padding:11px 20px;border-radius:8px;text-decoration:none}
.feature-card{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.feature-card .cov{aspect-ratio:16/10;background:#eef1f6;overflow:hidden}
.feature-card .cov img{width:100%;height:100%;object-fit:cover;display:block}
.feature-card .body{padding:18px 20px}
.feature-card .badge{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:600}
.feature-card h3{font-size:18px;font-weight:600;margin-top:8px;line-height:1.3}

.sg-social{display:flex;gap:10px;margin-top:16px}
.sg-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid rgb(226,232,240);background:#fff;color:rgb(100,116,139);transition:color .18s,border-color .18s,background .18s,transform .18s}
.sg-social a svg{width:20px;height:20px;fill:currentColor}
.sg-social a:hover{transform:translateY(-2px);color:#fff;background:#0077ff;border-color:#0077ff}

/* ===== Newsletter / подписка на новости (#871) ===== */
.nl-band{position:relative;overflow:hidden;isolation:isolate;text-align:center;color:#eaf0ff;border-radius:22px;padding:44px 40px;margin:34px 0;background:radial-gradient(120% 140% at 82% 16%,rgba(96,150,255,.32),transparent 46%),linear-gradient(152deg,#0b1226 0%,#121d40 48%,#0a1020 100%);border:1px solid rgba(120,160,255,.22);box-shadow:0 34px 74px -34px rgba(12,26,72,.8),inset 0 1px 0 rgba(255,255,255,.06);transform:perspective(1100px) rotateX(0deg) rotateY(0deg);transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;will-change:transform}
.nl-band::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;background:linear-gradient(90deg,#3b6bff,#45d4ff,#3b6bff)}
.nl-band::after{content:"";position:absolute;z-index:0;width:min(46%,400px);aspect-ratio:1;top:-40%;left:0;right:0;margin-inline:auto;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(88,140,255,.45),rgba(72,110,230,.2) 46%,transparent 72%);filter:blur(12px);opacity:.42;animation:nlOrb 9s ease-in-out infinite}
.nl-band>*{position:relative;z-index:1;max-width:660px;margin-inline:auto}
@keyframes nlOrb{0%,100%{transform:translate(0,0) scale(1);opacity:.34}50%{transform:translate(-6%,7%) scale(1.1);opacity:.5}}
.nl-band .nl-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fb4ff;font-weight:700;margin:0 auto 10px}
.nl-band h2{font-size:clamp(1.55rem,3.2vw,2.1rem);line-height:1.18;margin:0 auto 10px;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 26px rgba(69,120,255,.4);text-wrap:balance;text-wrap:pretty}
.nl-band p{color:#b6c2e4;margin:0 auto 16px;max-width:56ch;font-size:15px;line-height:1.6}
.nl-benefits{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:0 auto 20px;padding:0;list-style:none}
.nl-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 12px;border-radius:999px;font-size:13px;font-weight:600;color:#e7edff;background:rgba(255,255,255,.06);border:1px solid rgba(140,175,255,.24);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nl-chip::before{content:"";width:15px;height:15px;flex:none;background:#45d4ff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.35 12.4l1.4-1.4 3.8 3.8 8.5-8.5 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.35 12.4l1.4-1.4 3.8 3.8 8.5-8.5 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.nl-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;max-width:560px;margin:0 auto}
.nl-form input[type=email]{flex:1 1 230px;min-width:0;padding:14px 16px;border-radius:12px;border:1px solid rgba(140,175,255,.3);background:rgba(8,14,32,.55);color:#fff;font-size:15px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nl-form input[type=email]::placeholder{color:#93a0c6}
.nl-form input[type=email]:focus-visible{outline:none;border-color:#45d4ff;box-shadow:0 0 0 3px rgba(69,212,255,.3)}
.nl-form button{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border:none;cursor:pointer;border-radius:12px;background:linear-gradient(135deg,#3b6bff,#3ba7ff 60%,#45d4ff);color:#fff;font-weight:700;font-size:15px;box-shadow:0 12px 30px -10px rgba(59,120,255,.8);transition:transform .16s,box-shadow .22s}
.nl-form button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-140%);transition:transform .6s}
.nl-form button::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 12h12.2l-4.6-4.6L14 6l7 7-7 7-1.4-1.4 4.6-4.6H5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 12h12.2l-4.6-4.6L14 6l7 7-7 7-1.4-1.4 4.6-4.6H5z'/%3E%3C/svg%3E") center/contain no-repeat}
.nl-form button:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(69,180,255,.92)}
.nl-form button:hover::before{transform:translateX(140%)}
.nl-form button:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.nl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.nl-note{font-size:12.5px;color:#93a0c6;margin:14px auto 0;max-width:60ch}
.nl-note a{color:#8fb4ff;font-weight:600}
.nl-msg{margin:10px 0 0;font-weight:600;color:#5fe0b0}
.nl-msg.err{color:#ff9aa2}
/* Telegram — ВТОРИЧНАЯ CTA: стеклянно-контурная, визуально отлична от синей primary-кнопки */
.nl-alt{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:20px 0 0;
  padding:12px 22px;border-radius:14px;font-weight:700;font-size:15px;color:#bfe6ff;text-decoration:none;
  background:rgba(42,171,238,.12);border:1.5px solid rgba(76,196,255,.5);
  position:relative;overflow:hidden;isolation:isolate;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .2s,border-color .2s}
.nl-alt svg{width:19px;height:19px;fill:#4cc4ff;transition:fill .2s;animation:tg-fly 2.6s ease-in-out infinite}
.nl-alt::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .6s}
.nl-alt:hover{transform:translateY(-2px);background:linear-gradient(135deg,#2AABEE,#229ED9);border-color:transparent;color:#fff;box-shadow:0 16px 34px -10px rgba(34,158,217,.82)}
.nl-alt:hover svg{fill:#fff}
.nl-alt:hover::before{transform:translateX(130%)}
.nl-alt:focus-visible{outline:3px solid #bfe3fb;outline-offset:2px}
@keyframes tg-glow{0%,100%{box-shadow:0 10px 26px -8px rgba(34,158,217,.5)}50%{box-shadow:0 13px 32px -6px rgba(34,158,217,.92)}}
@keyframes tg-fly{0%,100%{transform:translateX(0)}50%{transform:translateX(3px) translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.nl-alt,.nl-alt svg{animation:none}.nl-alt::before{transition:none}.nl-band::after{animation:none}.nl-band{transition:none}}
@media(max-width:560px){.nl-band{padding:32px 20px}.nl-band>*{max-width:none}.nl-band::after{width:64%;top:-10%}.nl-form input[type=email]{flex-basis:100%}.nl-form button{width:100%}.nl-alt{width:100%}}
.f-nl{max-width:1320px;margin:26px auto 0;padding:24px 36px 0;border-top:1px solid #eef2f7;text-align:center}
.f-nl h3{font-size:1.02rem;margin:0 0 6px;color:#0f172a}
.f-nl p{font-size:13.5px;color:#64748b;margin:0 auto 14px;max-width:60ch}

/* sg-ux-20260820 */
/* ---------- п.8: контраст вторичного текста и кнопок ---------- */
/* Кнопка подписки: белым по светло-голубому концу градиента было 2.8:1.
   Градиент сохранён, стопы затемнены до прохождения нормы. */
.nl-form button{background:linear-gradient(135deg,#2247c9,#1d63c4 60%,#0f6f93)}
.nl-form button:hover{box-shadow:0 16px 40px -10px rgba(29,99,196,.92)}
/* Telegram-кнопка в СВЕТЛОМ подвале (её рисует widget.js) — тёмный текст по светлой плашке.
   Вариант внутри тёмного баннера .nl-band остаётся прежним. */
.f-nl .nl-alt{color:#0b4a6e;background:rgba(42,171,238,.14);border-color:rgba(34,158,217,.55)}
.f-nl .nl-alt svg{fill:#0f6f93}
.f-nl .nl-alt:hover{color:#fff}
.f-nl .nl-alt:hover svg{fill:#fff}
.f-nl__consent{font-size:12.5px;color:#64748b;margin:12px auto 0;max-width:60ch}
.f-nl__consent a{color:#1d4ed8}

/* ---------- п.10: тач-цели не меньше 44 px на сенсорных экранах ---------- */
@media (pointer: coarse){
  .crumbs{padding:2px 0 0}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .crumbs span{display:inline-flex;align-items:center;min-height:44px}
  .sec-head .all-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .btn-cta{display:inline-flex;align-items:center;min-height:44px}
  .sg-social a{width:44px;height:44px}
  footer a{display:inline-flex;align-items:center;min-height:44px}
  /* колонки подвала: инлайновый gap:11px + min-height дал бы лишние 80 px высоты */
  footer div[style*="flex-direction: column"]{gap:0!important}
  header > a:first-child{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- п.1: результат отправки формы связи ---------- */
.form-msg{margin:6px 0 0;font-size:14px;font-weight:600;line-height:1.45}
.form-msg.ok{color:#0f7b4f}
.form-msg.err{color:#b42318}
.form .chk a{color:#1d4ed8}

/* ---------- п.2: уведомление об аналитических cookie ---------- */
/* z-index выше закреплённого рекламного баннера (/api/uz/c.js, 99990): иначе «Хорошо» не нажать (QA 25.09.2026) */
.sg-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:99995;display:flex;gap:14px;
  align-items:center;flex-wrap:wrap;justify-content:center;max-width:760px;margin:0 auto;
  padding:14px 18px;border-radius:14px;background:#0f172a;color:#e2e8f0;
  box-shadow:0 18px 44px -16px rgba(8,15,35,.7);font-size:13.5px;line-height:1.5}
.sg-cookie p{margin:0;flex:1 1 320px}
.sg-cookie a{color:#93c5fd}
.sg-cookie__ok{flex:0 0 auto;min-height:44px;padding:0 22px;border:none;border-radius:10px;cursor:pointer;
  background:#2563eb;color:#fff;font-weight:700;font-size:14px}
.sg-cookie__ok:hover{background:#1d4ed8}
@media(max-width:560px){.sg-cookie{left:10px;right:10px;bottom:10px}.sg-cookie__ok{width:100%}}

/* ---------- п.6: порционный показ длинных лент ---------- */
.card--hidden{display:none!important}
.sg-more__wrap{display:flex;justify-content:center;margin:26px 0 0}
.sg-more{min-height:48px;padding:0 26px;border-radius:12px;cursor:pointer;
  border:1.5px solid #cbd5e1;background:#fff;color:#1d4ed8;font-weight:700;font-size:15px;
  transition:background .2s,border-color .2s,transform .18s}
.sg-more:hover{background:#f1f5ff;border-color:#93b4ff;transform:translateY(-1px)}

/* sg-ux2-20260820 */
/* п.10: оставшиеся цели в шапке и оверлее поиска */
@media (pointer: coarse){
  .sg-authlink{min-height:44px;display:inline-flex;align-items:center}
  .hs-burger{min-height:44px;min-width:44px}
  button.hs-esc{min-height:46px;padding:0 16px;line-height:1}
}

/* sg-authlink-reserve-20260820 */
header a[href="/profile/"],header a[href="/vojti/"]{display:inline-flex;align-items:center;min-height:42px;box-sizing:border-box}
@media (pointer: coarse){ header a[href="/profile/"],header a[href="/vojti/"]{min-height:44px} }

/* #1736: языковой переключатель — слева от аккаунта, справа от поиска.
   Поиск (.hs-btn) инжектится скриптом перед ссылкой аккаунта; порядок фиксируем. */
header .hs-btn{order:-1}
header .lang-switch{order:0}
header a[href="/profile/"],header a[href="/vojti/"]{order:1}

/* ===== Рекламные места (единая ADS) — раскладка и вписывание в макет =====
   Контейнеры (data-uz / .uz-top / .uz-feed + голые футерные слоты) расставлены при
   интеграции клиента показа, но БЕЗ раскладки — клиент вставлял баннер на всю ширину
   и прижимал влево. Центрируем по колонке контента (--maxw), даём воздух и метку. */
.uz-top,.uz-feed{max-width:var(--maxw);margin:32px auto;padding:0 36px}
.uz-top{margin-top:20px}
body>[data-uz]{max-width:var(--maxw);margin:0 auto 32px;padding:0 36px}
@media(max-width:720px){.uz-top,.uz-feed,body>[data-uz]{padding:0 20px}}
.uz-b__w{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;margin:0 auto;text-align:center}
.uz-b__w .uz-b__lb,.uz-b__lb{align-self:flex-start;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);opacity:.75}
.uz-b__w a{display:block;width:100%;text-align:center}
.uz-b__img{margin:0 auto;border-radius:12px;box-shadow:0 20px 44px -22px rgba(30,45,80,.35)}
.uz-b__n{display:block;width:100%;max-width:760px;margin:0 auto;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:0 20px 44px -22px rgba(30,45,80,.35)}
.uz-b__n strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:6px}
.uz-b__n>span{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.uz-b__cta{display:inline-block;margin-top:12px;color:var(--accent);font-weight:600}