/* ============================================================================
   File Hub — единая дизайн-система лендинга (landing-11, задача №5, 2026-07-03)
   Один источник токенов + общий header/footer + share-меню (landing-8v2) для
   под-страниц (privacy, terms). Токены 1:1 с index.html — визуальная связность.
   Адаптив 320–1440px. links.html НЕ использует этот файл (внутренний тул, noindex).
   ========================================================================== */

:root{
  --bg:#070c18;--bg2:#0a1120;--surf:#0d1525;--card:#111c30;--card2:#15233a;
  --border:#1d2d4a;--border2:#2a3f63;--ink:#eaf2ff;--muted:#8198bd;--dim:#5b7099;
  --accent:#2aabee;--accent-d:#1786c4;--a2:#7c5cff;--a3:#22d3a8;--a4:#f5a524;
  --glow:rgba(42,171,238,.22);--r:16px;--tr:.2s cubic-bezier(.4,0,.2,1);
  --wrap:1120px;   /* ширина header/footer-контейнера */
  --doc:800px;     /* ширина колонки текста (читабельность легалок) */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden;line-height:1.6;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
a{text-decoration:none;color:inherit}
::selection{background:var(--accent);color:#fff}
img{max-width:100%}

/* ── ambient background (лёгкая версия hero-фона index) ── */
.hub-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hub-bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4}
.hub-bg i:nth-child(1){width:460px;height:460px;background:#10408a;top:-160px;left:-120px}
.hub-bg i:nth-child(2){width:380px;height:380px;background:#5b32c9;top:8%;right:-140px}
.hub-bg .grid{position:absolute;inset:-40% 0;
  background-image:linear-gradient(rgba(42,171,238,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(42,171,238,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 80% 50% at 50% 20%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 50% at 50% 20%,#000,transparent 72%);opacity:.55}

/* ── header ── */
.hub-hd{position:sticky;top:0;z-index:200;background:rgba(7,12,24,.82);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border)}
.hub-hd-in{max-width:var(--wrap);margin:0 auto;padding:9px 16px;display:flex;align-items:center;
  gap:10px 18px;flex-wrap:wrap}
.hub-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;letter-spacing:-.3px;
  margin-right:auto}
.hub-brand img{width:28px;height:28px;border-radius:7px;
  filter:drop-shadow(0 0 8px rgba(77,214,255,.55))}   /* неон-свечение вокруг знака */
.hub-brand span{background:linear-gradient(135deg,#fff 30%,#9fdcff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[dir=rtl] .hub-brand{margin-right:0;margin-left:auto}

.hub-nav{display:flex;align-items:center;gap:4px}
.hub-nav a{color:var(--muted);font-size:14px;font-weight:600;padding:7px 11px;border-radius:9px;
  transition:var(--tr);white-space:nowrap}
.hub-nav a:hover{color:var(--ink);background:rgba(42,171,238,.1)}

.hub-actions{display:flex;align-items:center;gap:8px}
.hub-share{background:transparent;border:1px solid var(--border2);color:var(--accent);border-radius:10px;
  height:36px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;
  cursor:pointer;transition:var(--tr);line-height:1}
.hub-share svg{width:16px;height:16px;fill:currentColor}
.hub-share:hover{border-color:var(--accent);background:rgba(42,171,238,.1)}

/* язык — компактный dropdown на нативном <details> (без JS для раскрытия) */
.hub-lang{position:relative}
.hub-lang>summary{list-style:none;cursor:pointer;height:36px;padding:0 11px;border:1px solid var(--border2);
  border-radius:10px;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);
  transition:var(--tr);user-select:none}
.hub-lang>summary::-webkit-details-marker{display:none}
.hub-lang>summary:hover,.hub-lang[open]>summary{border-color:var(--accent);color:var(--ink)}
.hub-lang>summary .caret{font-size:9px;opacity:.7;transition:transform var(--tr)}
.hub-lang[open]>summary .caret{transform:rotate(180deg)}
.hub-lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:210;
  background:#0d1526;border:1px solid var(--border2);border-radius:14px;padding:8px;
  box-shadow:0 16px 44px rgba(0,0,0,.5);display:grid;grid-template-columns:repeat(2,1fr);gap:4px;
  min-width:184px}
[dir=rtl] .hub-lang-menu{right:auto;left:0}
.hub-lang-menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;font-size:13.5px;
  color:var(--muted);transition:var(--tr)}
.hub-lang-menu a:hover{background:rgba(42,171,238,.12);color:var(--ink)}

/* ── main / doc prose ── */
.hub-main{flex:1;width:100%;max-width:var(--doc);margin:0 auto;padding:40px 20px 64px}
.hub-doc h1{font-size:clamp(28px,6vw,40px);font-weight:900;letter-spacing:-1px;line-height:1.1;
  background:linear-gradient(135deg,#fff 20%,#9fdcff 70%,var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hub-doc h2{font-size:clamp(18px,3.4vw,22px);font-weight:750;color:#9fc6ff;margin-top:1.7em;
  margin-bottom:.4em;letter-spacing:-.3px}
.hub-doc p{color:var(--muted);margin:.6em 0}
.hub-doc ul{margin:.6em 0;padding-left:22px;color:var(--muted);display:flex;flex-direction:column;gap:.5em}
.hub-doc li{line-height:1.6}
.hub-doc b{color:var(--ink)}
.hub-doc a{color:var(--accent)}
.hub-doc a:hover{text-decoration:underline}
.hub-doc code{background:var(--card2);border:1px solid var(--border);padding:2px 7px;border-radius:6px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88em;color:#cfe4ff}
.hub-doc .mut{color:var(--dim);font-size:14px}
.hub-doc hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);
  margin:40px 0}
[dir=rtl] .hub-doc ul{padding-left:0;padding-right:22px}

/* ── footer ── */
.hub-ft{border-top:1px solid var(--border);padding:34px 20px;text-align:center;color:var(--muted);font-size:13px}
.hub-ft-in{max-width:var(--wrap);margin:0 auto}
.hub-ft .f-row{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:12px}
.hub-ft .f-row a,.hub-ft .f-row button{color:var(--muted);background:none;border:0;font:inherit;cursor:pointer;
  transition:color var(--tr)}
.hub-ft .f-row a:hover,.hub-ft .f-row button:hover{color:var(--accent)}
.hub-ft .f-langs{display:flex;justify-content:center;gap:12px 14px;flex-wrap:wrap;margin-bottom:12px;font-size:12px}
.hub-ft .f-langs a{color:var(--muted);opacity:.75;transition:color var(--tr)}
.hub-ft .f-langs a:hover{color:var(--accent);opacity:1}

/* ── share popover (инжектится hub.js; landing-8v2: копир./TG/WA/X/FB/Email) ── */
.hub-pop{position:fixed;top:64px;right:16px;z-index:400;display:none;gap:8px;flex-wrap:wrap;
  max-width:min(92vw,430px);background:#0d1526;border:1px solid var(--border2);border-radius:14px;
  padding:10px 12px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.hub-pop.show{display:flex}
[dir=rtl] .hub-pop{right:auto;left:16px}
.hub-pop a,.hub-pop button{background:#16223a;border:1px solid var(--border2);color:var(--ink);border-radius:10px;
  padding:8px 13px;font-size:13px;cursor:pointer;text-decoration:none;transition:var(--tr)}
.hub-pop a:hover,.hub-pop button:hover{border-color:var(--accent);color:var(--accent)}

/* ── адаптив ── */
@media(max-width:640px){
  .hub-nav{order:3;width:100%;justify-content:center;gap:2px;
    border-top:1px solid var(--border);margin-top:2px;padding-top:6px}
  .hub-nav a{padding:6px 9px;font-size:13px}
  .hub-brand{font-size:15px}
  .hub-main{padding:28px 16px 52px}
}
@media(max-width:380px){
  .hub-share span{display:none}          /* на самых узких — иконка share без подписи */
  .hub-share{padding:0 10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hub-lang>summary .caret{transition:none}
}

/* ── языковой ряд (SPA-страницы: главная index переключает язык на месте через setLang) ── */
.hub-langs{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.hub-langs button{background:transparent;border:1px solid transparent;border-radius:9px;padding:4px 7px;
  font-size:18px;line-height:1;cursor:pointer;transition:var(--tr);user-select:none}
.hub-langs button:hover{border-color:var(--border2);background:rgba(42,171,238,.08)}
.hub-langs button.on{border-color:var(--accent);background:rgba(42,171,238,.16)}

/* ============================================================================
   Секции локализованных статических входов /go/<lang>/ (генератор
   tools/gen-go-pages.mjs). Тот же визуальный язык, что и главная, но чистой
   статикой (SEO-краул, без SPA-редиректа) — landing-11 (задача №5).
   ========================================================================== */
.l-wrap{flex:1}   /* body=flex-колонка → main тянется, футер прижат к низу и на коротких страницах */
.l-hero{text-align:center;padding:72px 20px 60px;max-width:760px;margin:0 auto}
.l-hero .logo{width:84px;height:84px;filter:drop-shadow(0 0 18px rgba(77,214,255,.5));margin-bottom:18px}
.l-hero h1{font-size:clamp(38px,9vw,68px);font-weight:900;letter-spacing:-2px;line-height:1.03;margin-bottom:14px;
  background:linear-gradient(135deg,#fff 15%,#9fdcff 55%,var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.l-hero .tag{font-size:clamp(15px,3vw,19px);color:var(--muted);max-width:540px;margin:0 auto 18px;line-height:1.55}
.l-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:30px}
.l-chips span{font-size:12.5px;color:var(--dim);background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:30px;padding:5px 12px}
.l-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--accent),var(--accent-d));
  color:#fff;font-size:17px;font-weight:700;padding:15px 36px;border-radius:50px;box-shadow:0 10px 40px var(--glow);
  transition:var(--tr)}
.l-cta:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(42,171,238,.45)}
.l-cta svg{width:20px;height:20px;fill:currentColor}
.l-sec{padding:52px 20px;max-width:var(--wrap);margin:0 auto}
.l-sec>h2{text-align:center;font-size:clamp(23px,4.4vw,34px);font-weight:800;letter-spacing:-.6px;margin-bottom:8px}
.l-sec>p.sub{text-align:center;color:var(--muted);font-size:15px;max-width:520px;margin:0 auto 34px}
.l-sep{height:1px;max-width:var(--wrap);margin:0 auto;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.l-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.l-tool{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px 20px;
  display:flex;flex-direction:column;gap:8px;transition:var(--tr)}
.l-tool:hover{border-color:var(--border2);background:var(--card2);transform:translateY(-3px)}
.l-tool .ic{font-size:32px;line-height:1}
.l-tool .nm{font-size:16.5px;font-weight:750}
.l-tool .ds{font-size:13px;color:var(--muted);line-height:1.6}
.l-tool .go{margin-top:2px;font-size:13px;font-weight:650;color:var(--accent)}
.l-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.l-step{text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:28px 20px}
.l-step .n{width:48px;height:48px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-d));
  box-shadow:0 0 0 6px rgba(42,171,238,.1)}
.l-step h3{font-size:16px;font-weight:750;margin-bottom:7px}
.l-step p{font-size:13.5px;color:var(--muted)}
.l-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin:0 auto;align-items:start}
.l-plan{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:26px 22px}
.l-plan.pro{border-color:var(--accent);position:relative;background:linear-gradient(165deg,#0f2547,var(--card) 55%);
  box-shadow:0 0 60px rgba(42,171,238,.14)}
.l-plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(135deg,var(--accent),var(--a2));color:#fff;font-size:11px;font-weight:750;
  padding:5px 15px;border-radius:30px}
.l-plan .pt{font-size:21px;font-weight:850}
.l-plan .ps{font-size:13px;color:var(--muted);margin:4px 0 16px}
.l-rows{border-top:1px solid var(--border);margin-bottom:16px}
.l-rows .row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px}
.l-rows .row .l{color:var(--muted)}
.l-rows .row .v{font-weight:750}
.l-rows .row .v small{color:var(--dim);font-weight:400;font-size:12px}
.l-plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.l-plan li{font-size:13.5px;color:var(--muted);padding-left:24px;position:relative;line-height:1.45}
.l-plan li::before{content:"✓";position:absolute;left:0;top:0;color:var(--a3);font-weight:800}
.l-plan.pro li{color:var(--ink)}
.l-pcta{display:block;text-align:center;padding:13px;border-radius:11px;font-weight:750;font-size:15px;transition:var(--tr)}
.l-pcta.fill{background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#fff;box-shadow:0 6px 22px var(--glow)}
.l-pcta.fill:hover{transform:translateY(-2px)}
.l-pcta.ghost{border:1px solid var(--border2);color:var(--muted)}
.l-pcta.ghost:hover{border-color:var(--accent);color:var(--ink)}
.l-faq{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:9px}
.l-faq details{background:var(--card);border:1px solid var(--border);border-radius:13px;overflow:hidden}
.l-faq summary{padding:16px 18px;font-weight:650;font-size:15px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.l-faq summary::-webkit-details-marker{display:none}
.l-faq summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1;transition:transform var(--tr)}
.l-faq details[open] summary::after{transform:rotate(45deg)}
.l-faq .a{padding:0 18px 16px;font-size:13.5px;color:var(--muted);line-height:1.7}
[dir=rtl] .l-plan li{padding-left:0;padding-right:24px}
[dir=rtl] .l-plan li::before{left:auto;right:0}
@media(max-width:720px){
  .l-steps{grid-template-columns:1fr}.l-plans{grid-template-columns:1fr}
  .l-sec{padding:40px 16px}.l-hero{padding:52px 16px 44px}
}

/* ============================================================================
   /blog — SEO-блог (задача №6). Шаблон статьи + листинг на дизайн-системе,
   генератор tools/gen-blog.mjs. Хлебные крошки, проза, TOC, шаги, врезки,
   рекламные слоты (пусты до трафика), CTA в бота, перелинковка. — landing-12.
   ========================================================================== */
.b-wrap{flex:1;width:100%;max-width:860px;margin:0 auto;padding:22px 20px 64px}
.b-crumbs{font-size:12.5px;color:var(--dim);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.b-crumbs a{color:var(--muted);transition:color var(--tr)}
.b-crumbs a:hover{color:var(--accent)}
.b-crumbs .sep{opacity:.5}
.b-crumbs [aria-current]{color:var(--dim)}

.b-head h1{font-size:clamp(28px,5.2vw,44px);font-weight:900;letter-spacing:-1px;line-height:1.1;margin-bottom:12px;
  background:linear-gradient(135deg,#fff 25%,#9fdcff 75%,var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.b-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;color:var(--dim);font-size:13px;margin-bottom:26px}
.b-meta .tool{display:inline-flex;align-items:center;gap:6px;color:var(--accent);background:rgba(42,171,238,.1);
  border:1px solid var(--border2);border-radius:30px;padding:4px 12px;font-weight:600}

/* hero-медиа: видео (VideoObject) или картинка; если видео не готово — «coming soon» плашка */
.b-media{border-radius:16px;overflow:hidden;border:1px solid var(--border2);background:#000;margin-bottom:28px;
  box-shadow:0 20px 54px rgba(0,0,0,.5)}
.b-media video,.b-media img{display:block;width:100%;height:auto}
.b-media--soon{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(160deg,#0f2547,var(--card));color:var(--muted);text-align:center;padding:20px}
.b-media--soon .play{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(42,171,238,.16);border:1px solid var(--accent)}
.b-media--soon .play svg{width:22px;height:22px;fill:var(--accent);margin-left:3px}
.b-media--soon small{font-size:12px;color:var(--dim)}

.b-toc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin-bottom:30px}
.b-toc .t{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);font-weight:700;margin-bottom:10px}
.b-toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:7px}
.b-toc li{counter-increment:toc}
.b-toc a{color:var(--muted);font-size:14px;transition:color var(--tr)}
.b-toc a::before{content:counter(toc) ". ";color:var(--accent);font-weight:700}
.b-toc a:hover{color:var(--ink)}

.b-body{font-size:16px;line-height:1.75;color:#cdd8ee}
.b-body h2{font-size:clamp(21px,3.6vw,27px);font-weight:800;letter-spacing:-.4px;color:var(--ink);
  margin:38px 0 14px;scroll-margin-top:76px}
.b-body h3{font-size:18px;font-weight:750;color:var(--ink);margin:26px 0 10px}
.b-body p{margin:14px 0}
.b-body a{color:var(--accent)}
.b-body a:hover{text-decoration:underline}
.b-body b,.b-body strong{color:var(--ink)}
.b-body ul,.b-body ol{margin:14px 0;padding-left:24px;display:flex;flex-direction:column;gap:8px}
.b-body code{background:var(--card2);border:1px solid var(--border);padding:2px 7px;border-radius:6px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88em;color:#cfe4ff}
[dir=rtl] .b-body ul,[dir=rtl] .b-body ol{padding-left:0;padding-right:24px}
/* нумерованные шаги */
.b-steps{list-style:none;counter-reset:step;padding:0;display:flex;flex-direction:column;gap:12px;margin:18px 0}
.b-steps>li{counter-increment:step;position:relative;padding-left:52px;min-height:36px;display:flex;flex-direction:column;justify-content:center}
.b-steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));box-shadow:0 0 0 5px rgba(42,171,238,.1)}
[dir=rtl] .b-steps>li{padding-left:0;padding-right:52px}[dir=rtl] .b-steps>li::before{left:auto;right:0}
/* врезка-подсказка */
.b-tip{background:linear-gradient(160deg,rgba(34,211,168,.08),transparent);border:1px solid var(--border2);
  border-left:3px solid var(--a3);border-radius:12px;padding:14px 18px;margin:20px 0;font-size:14.5px;color:var(--muted)}
.b-tip b{color:var(--ink)}
[dir=rtl] .b-tip{border-left:1px solid var(--border2);border-right:3px solid var(--a3)}

/* рекламный слот (пуст до трафика; сеть с крипто-выплатой подключаем позже) */
.ad-slot{margin:30px 0;min-height:0}
.ad-slot[data-ad]:empty{min-height:90px;border:1px dashed var(--border2);border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:11.5px;letter-spacing:.4px;opacity:.5}
.ad-slot[data-ad]:empty::before{content:"AD · " attr(data-ad)}

/* CTA в бота */
.b-cta{background:linear-gradient(165deg,#0f2547,var(--card) 60%);border:1px solid var(--accent);border-radius:16px;
  padding:26px 24px;text-align:center;margin:36px 0;box-shadow:0 0 60px rgba(42,171,238,.14)}
.b-cta h3{font-size:20px;font-weight:850;margin-bottom:6px}
.b-cta p{color:var(--muted);font-size:14px;margin-bottom:18px}
.b-cta .go{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--accent),var(--accent-d));
  color:#fff;font-weight:750;font-size:16px;padding:14px 32px;border-radius:50px;box-shadow:0 10px 34px var(--glow);transition:var(--tr)}
.b-cta .go:hover{transform:translateY(-2px)}
.b-cta .go svg{width:19px;height:19px;fill:currentColor}

/* перелинковка / листинг */
.b-related{margin-top:44px}
.b-related .t{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);font-weight:700;margin-bottom:14px}
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.b-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:20px;transition:var(--tr)}
.b-card:hover{border-color:var(--border2);background:var(--card2);transform:translateY(-3px)}
.b-card .k{font-size:11.5px;color:var(--accent);font-weight:650;display:flex;align-items:center;gap:6px}
.b-card h3,.b-card h2{font-size:17px;font-weight:750;line-height:1.3;color:var(--ink);margin:0} /* Ф4: h2 в карточках листингов (a11y heading-order) */
.b-card p{font-size:13.5px;color:var(--muted);line-height:1.6;flex:1}
.b-card .m{font-size:12px;color:var(--muted)} /* Ф4: было --dim — контраст <4.5:1 (a11y) */
/* превью-картинка карточки блога (2026-07-06, премиум-вид): 16/9, скругление, лёгкий зум на ховере */
.b-card .thumb{margin:-2px -2px 4px;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--card2)}
.b-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.b-card:hover .thumb img{transform:scale(1.04)}

/* листинг-хедер /blog */
.b-lead{text-align:center;max-width:640px;margin:0 auto 40px}
.b-lead h1{font-size:clamp(30px,6vw,46px);font-weight:900;letter-spacing:-1px;margin-bottom:12px;
  background:linear-gradient(135deg,#fff 25%,#9fdcff 75%,var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.b-lead p{color:var(--muted);font-size:16px}

/* ── b-ways: интерактивный блок «способы использования» (Этап 2, мультиязычный блог) ── */
.b-ways{display:flex;flex-direction:column;align-items:center;gap:14px;margin:26px 0;padding:22px 20px;
  background:linear-gradient(165deg,rgba(42,171,238,.08),var(--card) 70%);border:1px solid var(--bd);border-radius:16px}
.b-ways .ways-t{font-weight:800;font-size:16px}
.b-ways .ways-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.b-ways .way{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:50px;
  background:var(--sec,#0a0f1c);border:1px solid var(--bd);font-size:13px;font-weight:650;white-space:nowrap}
.b-ways .way b{font-size:16px;line-height:1}
.b-ways .ways-go{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--accent),var(--accent-d));
  color:#fff;font-weight:750;font-size:15px;padding:12px 28px;border-radius:50px;box-shadow:0 10px 34px var(--glow);transition:var(--tr)}
.b-ways .ways-go:hover{transform:translateY(-2px)}
.b-ways .ways-go svg{width:20px;height:20px;fill:currentColor}
[dir="rtl"] .b-ways .way{flex-direction:row-reverse}

/* ── Ф2 2026-07-11: чипсы тем блога (хабы /blog[/lang]/topic/<tool>/) ── */
.b-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.b-chips a{font-size:13px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.03);
  border:1px solid var(--border);border-radius:30px;padding:6px 13px;transition:var(--tr)}
.b-chips a:hover{color:var(--ink);border-color:var(--accent);background:rgba(42,171,238,.1)}
.b-chips a.on{color:var(--accent);border-color:var(--accent)}