/* Общие стили лендинга. Подключаются каждой страницей раньше её собственного
 * <style>, поэтому страница может подправить общее, а наоборот — нет.
 *
 * Сюда попадает то, что нужно двум страницам и больше: токены, основа,
 * шапка, подвал и общие блоки. Своё у страницы — в её <style>. Карта и
 * правила — DESIGN.md; что у страниц нет своих токенов, шапки и подвала,
 * сторожит tests/unit/visual-rules.test.js.
 *
 * Шрифты лежат у нас, в landing/fonts/, и описаны здесь первым разделом.
 * Раньше они ехали с Google Fonts — и адрес каждого посетителя уходил Google
 * ещё до всякого согласия на cookie. Лицензии (SIL OFL 1.1) — рядом с
 * файлами. Все три шрифта переменные: один файл на алфавит держит весь
 * диапазон начертаний. */

/* ---------- шрифты ---------- */
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:500 700; font-display:swap; src:url('fonts/JetBrainsMono-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:500 700; font-display:swap; src:url('fonts/JetBrainsMono-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:500 700; font-display:swap; src:url('fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono'; font-style:normal; font-weight:500 700; font-display:swap; src:url('fonts/JetBrainsMono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/Sora-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/Sora-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Unbounded'; font-style:normal; font-weight:600 900; font-display:swap; src:url('fonts/Unbounded-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Unbounded'; font-style:normal; font-weight:600 900; font-display:swap; src:url('fonts/Unbounded-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded'; font-style:normal; font-weight:600 900; font-display:swap; src:url('fonts/Unbounded-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Unbounded'; font-style:normal; font-weight:600 900; font-display:swap; src:url('fonts/Unbounded-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---------- токены ---------- */
:root{
  color-scheme:dark;
  --bg:#181a20;
  --bg-deep:#121317;
  --panel:#22252c;
  --panel-2:#2b2e37;
  --border:#383c46;
  --border-soft:#2f333c;
  --accent:#69d345;
  --accent-deep:#53c22e;
  --accent-text:#0d1a07;
  --text:#f2f4ef;
  --text-dim:#9a9fac;
  --text-faint:#6a707d;
  /* Два цвета сверх основной палитры: журналу и схеме архитектуры нужно
   * отличать поломку от предупреждения. */
  --danger:#ff8674;
  --warn:#ffc95c;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --maxw:1120px;
}

/* ---------- основа ---------- */
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
/* Колонка во всю высоту окна: на короткой странице подвал прижат к низу. */
body{
  background:var(--bg); color:var(--text);
  font-family:'Sora', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
}
main{flex:1 0 auto;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
h1,h2,h3{font-family:'Unbounded', system-ui, sans-serif; margin:0; text-wrap:balance; letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:24px; width:100%;}
.mono{font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

/* ---------- шапка ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(24,26,32,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.header-row{display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Unbounded'; font-weight:700; font-size:1.05rem;}
/* Знак шире, чем высок: рамка в разметке впритык (4:3), цвет — токен акцента. */
.brand svg{width:26px; height:19.5px; flex:none; color:var(--accent);}
.status-pill{
  display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text-dim);
  border:1px solid var(--border); border-radius:999px; padding:7px 14px 7px 10px;
  white-space:nowrap;
}
.status-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(105,211,69,.55); animation:pulse-dot 2.2s ease-out infinite;}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(105,211,69,.55);}
  70%{box-shadow:0 0 0 8px rgba(105,211,69,0);}
  100%{box-shadow:0 0 0 0 rgba(105,211,69,0);}
}
.gh-link{display:flex; align-items:center; gap:7px; font-size:.85rem; color:var(--text-dim); border:1px solid var(--border); border-radius:999px; padding:7px 14px; transition:border-color .2s, color .2s;}
.gh-link:hover{color:var(--text); border-color:var(--accent);}
.header-actions{display:flex; align-items:center; gap:10px;}
/* Порог замерен, а не угадан: шапке в полном составе нужно 583 px (герб 125 +
 * правый блок 394 + поля 48 + зазор 16), поэтому 640 — с запасом, а 560 уже
 * поздно: при ширине 561 правый блок вылезал за поле на 22 px. Порог с обеих
 * сторон проверяет tests/landing/chrome.spec.js. */
@media (max-width: 640px){
  .header-row{height:60px;}
  .gh-link span.long{display:none;}
  .status-pill{display:none;}
}

/* ---------- подвал ---------- */
footer{padding-block:44px; border-top:1px solid var(--border-soft); flex:none;}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.footer-brand{display:flex; align-items:center; gap:9px; color:var(--text-dim); font-size:.86rem;}
.footer-brand svg{width:18px; height:13.5px; color:var(--accent);}
.footer-links{display:flex; gap:22px; font-size:.86rem; color:var(--text-dim);}
.footer-links a:hover{color:var(--accent);}
/* Правовые документы — второй строкой, мельче основной. Кнопка «Настройки
 * cookie» открывает баннер согласия заново (landing/consent.js) и выглядит
 * как ссылка: отозвать согласие должно быть так же легко, как дать.
 * align-items:center — в строке стоит переключатель языка выше текста:
 * растянутые под него ссылки держали текст у верха, а кнопка по центру, и
 * «Настройки cookie» проседала на 6 px. */
.footer-legal{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:22px; font-size:.78rem; color:var(--text-faint);}
.footer-legal a:hover{color:var(--accent);}
.footer-consent{font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer;}
.footer-consent:hover{color:var(--accent);}
.footer-legal .lang-switch{margin-left:auto; padding:2px;}
.footer-legal .lang-switch button{padding:4px 10px; font-size:.72rem;}
@media (max-width: 560px){
  .footer-legal .lang-switch{margin-left:0;}
}

/* ---------- переключатель языка ---------- */
/* Два применения: язык сайта в подвале (ru/en) и язык документа на правовых
   страницах (ещё uk и kk) — пишут они один и тот же выбор.
   Почему в подвале, а не в шапке: шапке в полном составе хватало 583 px, а с
   переключателем нужно было уже 764 — подписи ссылки растут с языком
   («Скачать» 88, «Download» 100, «Завантажити» 126), и на 375 правый блок
   вылезал за поле страницы на 98 px. Язык и так определяется сам по браузеру,
   поэтому ручной выбор живёт рядом с «Настройками cookie». */
.lang-switch{display:inline-flex; gap:2px; padding:3px; flex:none; background:var(--panel); border:1px solid var(--border); border-radius:999px;}
.lang-switch button{
  font-family:'Sora', system-ui, sans-serif; font-size:.76rem; font-weight:600; letter-spacing:.04em;
  padding:6px 14px; border:none; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--text-dim); transition:background .2s, color .2s;
}
.lang-switch button:hover{color:var(--text);}
.lang-switch button[aria-pressed="true"]{background:var(--accent); color:var(--accent-text);}

/* ---------- общие детали ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}
.eyebrow::before{content:''; width:16px; height:1.5px; background:var(--accent);}
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:'Sora', system-ui, sans-serif; font-weight:600; font-size:.94rem;
  padding:13px 22px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .22s, background .22s, color .22s;
}
.btn:active{transform:scale(.97);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
/* Счётчик в кнопке фильтра — у блога и журнала. */
.filter-count{font-size:.74rem; opacity:.7; font-variant-numeric:tabular-nums;}

/* ---------- шапка страницы: блог, журнал, устройство, граф ----------
 * Раньше у блога она называлась .blog-hero, у журнала — .log-hero, и при
 * одинаковых значениях сжималась на разной ширине: у блога на 560, у журнала
 * на 640. Теперь блок один и порог один — 640, как у шапки сайта. */
.page-hero{padding-block:64px 40px; border-bottom:1px solid var(--border-soft); background:var(--bg-deep);}
h1.page-headline{font-size:clamp(2rem, 3.6vw, 2.9rem); font-weight:800; line-height:1.1; overflow-wrap:anywhere; hyphens:auto;}
.page-lede{margin-top:18px; font-size:1.02rem; line-height:1.65; color:var(--text-dim); max-width:58ch;}
/* Заголовок слева, кнопки справа — у блога и журнала. */
.page-hero-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;}
/* Фильтр по типу: у блога — тип записи, у журнала — вид события. */
.page-filter{display:flex; gap:8px; flex-wrap:wrap; margin-top:30px;}
.page-filter button{
  font-family:'Sora', system-ui, sans-serif; font-size:.82rem; font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--text-dim); border:1px solid var(--border);
  transition:border-color .2s, color .2s, background .2s;
}
.page-filter button:hover{color:var(--text); border-color:var(--accent);}
.page-filter button[aria-pressed="true"]{background:var(--accent); color:var(--accent-text); border-color:var(--accent);}
.log-back{display:flex; justify-content:center; margin-top:48px;}
@media (max-width: 860px){
  .page-hero-row{align-items:flex-start; flex-direction:column; gap:22px;}
}
@media (max-width: 640px){
  .page-hero{padding-block:44px 32px;}
}

/* ---------- плитки с числами: устройство и граф ---------- */
.arch-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1px; margin-top:34px; background:var(--border-soft);
  border:1px solid var(--border-soft); border-radius:var(--radius-md); overflow:hidden;
}
.arch-stat{background:var(--panel); padding:18px 20px; min-width:0;}
.arch-stat b{
  display:block; font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:1.55rem; font-weight:700; line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.arch-stat span{display:block; font-size:.8rem; color:var(--text-dim); margin-top:6px;}

/* ---------- лента блога: главная и /blog ----------
 * Общее у обеих — линия времени и ярлыки. Плотность записи у главной своя
 * (три свежие записи), у блога своя (вся лента), — это в страницах. */
.blog-list{display:flex; flex-direction:column;}
.blog-when{display:flex; flex-direction:column; gap:6px; padding-top:2px;}
.blog-date{font-size:.82rem; color:var(--text-dim); white-space:nowrap;}
.blog-main{position:relative; padding-left:26px; border-left:1px solid var(--border-soft);}
.blog-main::before{
  content:''; position:absolute; left:-4.5px; top:7px; width:8px; height:8px; border-radius:50%;
  background:var(--border);
}
.blog-entry.latest .blog-main::before{background:var(--accent); animation:pulse-dot 2.2s ease-out infinite;}
.blog-tag{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; border:1px solid transparent; margin-bottom:12px;
}
.blog-tag.release{background:var(--accent); color:var(--accent-text);}
.blog-tag.feature{background:rgba(105,211,69,.1); color:var(--accent-deep); border-color:rgba(105,211,69,.32);}
.blog-tag.improvement{background:var(--panel-2); color:var(--text-dim); border-color:var(--border);}
.blog-text{margin-top:10px; display:flex; flex-direction:column; gap:10px;}
.blog-empty{font-size:.9rem; color:var(--text-dim);}
@media (max-width: 560px){
  .blog-when{flex-direction:row; align-items:baseline; gap:10px; padding-top:0;}
  .blog-main{padding-left:0; border-left:none;}
  .blog-main::before{display:none;}
}

/* ---------- баннер согласия на cookie: все страницы ----------
 * Разметку ставит landing/consent.js. «Принять» и «Отклонить» — один класс,
 * один вид: отказ не должен быть мельче или бледнее согласия. */
.consent{
  position:fixed; z-index:60; left:16px; right:16px; bottom:16px; margin-inline:auto; max-width:760px;
  display:flex; flex-direction:column; gap:16px; padding:20px 22px;
  background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:0 18px 48px var(--bg-deep);
}
.consent-title{font-family:'Unbounded', system-ui, sans-serif; font-weight:700; font-size:.95rem; margin-bottom:6px;}
.consent-text p{font-size:.86rem; line-height:1.6; color:var(--text-dim);}
.consent-text a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.consent-cats{display:flex; flex-direction:column; gap:10px;}
.consent-cat{display:flex; gap:12px; align-items:flex-start; font-size:.86rem; cursor:pointer;}
.consent-cat input{margin-top:3px; width:18px; height:18px; accent-color:var(--accent); flex:none;}
.consent-cat input:disabled{cursor:not-allowed;}
.consent-cat b{display:block; font-weight:600;}
.consent-cat small{display:block; color:var(--text-dim); font-size:.8rem; margin-top:2px;}
.consent-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;}
.consent-actions .btn{padding:10px 18px; font-size:.86rem;}
@media (max-width: 560px){
  .consent{left:8px; right:8px; bottom:8px; padding:16px;}
  .consent-actions .btn{flex:1 1 auto; justify-content:center;}
}

/* ---------- правовые документы: privacy, terms, cookies, refund, legal, delete-account ----------
 * Четыре перевода в одной странице, видим один (landing/legal.js). Слева —
 * текст, справа — меню документов; на узком экране меню уходит наверх. */
.legal-body{padding-block:48px 72px;}
.legal-layout{display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:48px; align-items:start;}
.legal-nav{position:sticky; top:92px; display:flex; flex-direction:column; gap:2px; font-size:.86rem;}
.legal-nav a{padding:8px 12px; border-radius:var(--radius-sm); color:var(--text-dim);}
.legal-nav a:hover{color:var(--text); background:var(--panel);}
.legal-nav a[aria-current="page"]{color:var(--accent-text); background:var(--accent);}
.legal-doc{max-width:72ch; font-size:.95rem; line-height:1.72; color:var(--text-dim);}
.legal-doc h2{font-size:1.12rem; color:var(--text); margin:40px 0 12px; line-height:1.35;}
.legal-doc h2:first-of-type{margin-top:28px;}
.legal-doc h3{font-size:.98rem; color:var(--text); margin:24px 0 8px;}
.legal-doc p + p{margin-top:12px;}
.legal-doc ul, .legal-doc ol{padding-left:20px; margin:10px 0;}
.legal-doc code{font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.82rem; color:var(--text); word-break:break-word;}
.legal-doc li + li{margin-top:6px;}
.legal-doc strong{color:var(--text); font-weight:600;}
.legal-doc a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.legal-meta{font-size:.82rem; color:var(--text-faint);}
.legal-note{margin-top:16px; padding:14px 16px; border-left:3px solid var(--accent); background:var(--panel); border-radius:var(--radius-sm); color:var(--text);}
.legal-table{width:100%; border-collapse:collapse; margin:12px 0; font-size:.88rem;}
.legal-table th, .legal-table td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--border-soft);}
.legal-table th{color:var(--text); font-weight:600;}
/* Незаполненное поле реквизитов — видно сразу, а не тонет в тексте. */
.biz-blank{color:var(--warn);}
@media (max-width: 860px){
  .legal-layout{grid-template-columns:minmax(0,1fr); gap:28px;}
  .legal-nav{position:static; flex-direction:row; flex-wrap:wrap; order:-1;}
  .legal-table{display:block; overflow-x:auto;}
}