/* ═══════════════════════════════════════════════════════════════════════════════
   ОФОРМЛЕНИЕ СТАТЕЙ — дизайн-система Vesper.

   Прежний макет был из другого мира: моноширинный шрифт во всём тексте, жёсткие
   рамки в один пиксель и клетчатый фон. Он не врал, но и не выглядел как продукт,
   к которому ведёт.

   Здесь взята система с самой страницы Vesper без изобретательства: Clash Display
   на заголовках, Satoshi в тексте, JetBrains Mono только на служебных подписях и
   числах. Палитра, скругления 22px, свечение изумруда, аврора и плёночный шум —
   всё оттуда же. Статья должна ощущаться продолжением продукта, а не соседним
   сайтом.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #04070a;
  --bg2: #070c10;
  --ink: #eef7f3;
  --soft: #9eb6ad;
  --faint: #566a63;
  --emer: #3df0b0;
  --emer-x: #86ffd6;
  --emer-d: #0f9c72;
  --gold: #e3c489;
  --red: #ff7d6d;
  --line: rgba(110, 180, 155, .12);
  --line2: rgba(110, 180, 155, .055);
  --disp: "Clash Display", "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16, .8, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }

body.vs {
  background: var(--bg);
  color: var(--soft);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--emer); outline-offset: 3px; border-radius: 4px; }

.vwrap { position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; padding: 0 40px; }

/* ── атмосфера: те же три слоя, что на странице продукта ───────────────────── */
.vaur { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vaur i { position: absolute; border-radius: 50%; filter: blur(130px); }
.vaur .a { width: 900px; height: 900px; top: -430px; left: 56%;
  background: radial-gradient(circle, #13c98c, transparent 62%); opacity: .15;
  animation: vdr 30s ease-in-out infinite; }
.vaur .b { width: 620px; height: 620px; top: 62%; left: -250px;
  background: radial-gradient(circle, #0d7ea0, transparent 62%); opacity: .09;
  animation: vdr2 34s ease-in-out infinite; }
@keyframes vdr { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,50px) scale(1.1); } }
@keyframes vdr2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px,-50px) scale(1.08); } }

.vgrid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .3;
  background-image: linear-gradient(rgba(110,180,155,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(110,180,155,.05) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(130% 78% at 50% 22%, #000 16%, transparent 72%);
  mask-image: radial-gradient(130% 78% at 50% 22%, #000 16%, transparent 72%); }

.vnoise { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── шапка: сжимается на прокрутке и подкладывает размытие ─────────────────── */
.vtop { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease); }
.vtop.cond { background: rgba(4,8,10,.74); backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line2); }
.vtop-in { display: flex; align-items: center; gap: 26px; padding-block: 20px;
  transition: padding .5s var(--ease); }
.vtop.cond .vtop-in { padding-block: 11px; }

.vbrand { display: flex; align-items: center; gap: 10px; flex: none; }
.vbrand svg { width: 30px; height: 18px; filter: drop-shadow(0 0 12px rgba(61,240,176,.5)); }
.vbrand b { font-family: var(--disp); font-weight: 600; font-size: 17px;
  letter-spacing: -.012em; color: var(--ink); }

/* Полоса меню прокручивается на узких экранах. Ничего абсолютно позиционированного
   внутрь класть нельзя: overflow-x:auto обрезает потомков и по вертикали — так уже
   пропала выпадашка языков, причём замеры показывали её «видимой». */
.vnav { display: flex; align-items: center; gap: 20px; margin-left: auto;
  font-size: 13.5px; color: var(--soft); overflow-x: auto; scrollbar-width: none;
  min-width: 0; }
.vnav::-webkit-scrollbar { display: none; }
.vnav a { white-space: nowrap; transition: color .2s var(--ease); }
.vnav a:hover { color: var(--ink); }
.vtop-in > .go, .vnav .go { flex: none; color: #031510; background: linear-gradient(180deg, #5cffc4, var(--emer));
  padding: 10px 17px; border-radius: 11px; font-family: var(--disp); font-weight: 500;
  box-shadow: 0 12px 30px -14px rgba(61,240,176,.8); transition: transform .2s var(--ease); }
.vtop-in > .go:hover, .vnav .go:hover { transform: translateY(-2px); color: #031510; }

/* ── герой ─────────────────────────────────────────────────────────────────── */
.vhero { display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center;
  padding: 66px 0 84px; }

.vkick { display: inline-flex; align-items: center; gap: 9px;
  font: 500 10px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase;
  color: var(--emer); border: 1px solid rgba(61,240,176,.28); border-radius: 20px;
  padding: 9px 14px; background: rgba(61,240,176,.05); }
.vkick i { width: 6px; height: 6px; border-radius: 50%; background: var(--emer);
  box-shadow: 0 0 9px var(--emer); animation: vbl 2.4s ease-in-out infinite; }
@keyframes vbl { 0%,100% { opacity: 1; } 50% { opacity: .32; } }

.vhero h1 { margin-top: 24px; font-family: var(--disp); font-weight: 600;
  font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -.026em;
  color: var(--ink); text-wrap: balance; }

.vlead { margin-top: 20px; max-width: 46ch; font-size: 17.5px; line-height: 1.68; color: var(--soft); }
.vlead b { color: var(--ink); font-weight: 700; }

.vcta { margin-top: 30px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vbtn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--disp);
  font-weight: 500; font-size: 15px; border-radius: 13px; padding: 15px 26px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.vbtn.p { color: #031510; background: linear-gradient(180deg, #5cffc4, var(--emer));
  box-shadow: 0 16px 38px -16px rgba(61,240,176,.9); }
.vbtn.p:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -16px rgba(61,240,176,1); }
.vbtn.s { color: var(--ink); border: 1px solid var(--line); background: rgba(150,200,180,.03); }
.vbtn.s:hover { transform: translateY(-2px); border-color: rgba(61,240,176,.4); }

/* рамка вокруг картинки — тот же «pane», что у сцен на странице продукта */
.vshot { position: relative; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(9,17,15,.9), rgba(4,8,10,.95));
  box-shadow: 0 -8px 130px -56px rgba(61,240,176,.45),
              0 50px 120px -60px rgba(0,0,0,.96),
              inset 0 1px 0 rgba(255,255,255,.04); }
.vshot .ph { display: flex; align-items: center; gap: 8px; padding: 11px 15px;
  border-bottom: 1px solid var(--line); background: rgba(150,200,180,.028);
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.vshot .ph .d { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.vshot img { display: block; width: 100%; height: auto; }

/* ── метрики ───────────────────────────────────────────────────────────────── */
.vmetrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  padding-bottom: 30px; }
.vmetric { border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px;
  background: linear-gradient(180deg, rgba(11,20,18,.72), rgba(5,9,11,.6));
  transition: transform .3s var(--ease), border-color .3s var(--ease); }
.vmetric:hover { transform: translateY(-3px); border-color: rgba(61,240,176,.3); }
.vmetric strong { display: block; font-family: var(--disp); font-weight: 600; font-size: 31px;
  line-height: 1.1; letter-spacing: -.024em; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.vmetric span { display: block; margin-top: 9px; font: 500 12.5px/1.55 var(--sans); color: var(--faint); }

/* ── разделы ───────────────────────────────────────────────────────────────── */
.vsec { display: grid; grid-template-columns: 78px minmax(0, 1.06fr) minmax(300px, .94fr);
  gap: 34px; padding: 52px 0; border-top: 1px solid var(--line2); }
.vsec .n { font: 600 11px/1 var(--mono); letter-spacing: .2em; color: var(--emer-d);
  padding-top: 11px; font-variant-numeric: tabular-nums; }
.vsec h2 { font-family: var(--disp); font-weight: 600; font-size: clamp(25px, 2.5vw, 33px);
  line-height: 1.16; letter-spacing: -.026em; color: var(--ink); text-wrap: balance; }
.vsec p { margin-top: 17px; max-width: 60ch; font-size: 16.5px; line-height: 1.72; color: var(--soft); }
.vsec p b { color: var(--ink); font-weight: 700; }

.vbul { list-style: none; align-self: start; border: 1px solid var(--line); border-radius: 20px;
  padding: 8px 22px; background: linear-gradient(180deg, rgba(11,20,18,.6), rgba(5,9,11,.45)); }
.vbul li { display: grid; grid-template-columns: 15px 1fr; gap: 13px; padding: 15px 0;
  border-top: 1px solid var(--line2); font-size: 14.5px; line-height: 1.6; color: var(--soft); }
.vbul li:first-child { border-top: 0; }
.vbul li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%;
  background: var(--emer); box-shadow: 0 0 8px rgba(61,240,176,.6); }

/* ── вопросы ───────────────────────────────────────────────────────────────── */
.vfaq { padding: 52px 0; border-top: 1px solid var(--line2); }
.vfaq > h2 { font-family: var(--disp); font-weight: 600; font-size: clamp(25px, 2.5vw, 33px);
  letter-spacing: -.026em; color: var(--ink); margin-bottom: 22px; }
.vfaq details { border-top: 1px solid var(--line2); }
.vfaq details:first-of-type { border-top: 0; }
.vfaq summary { list-style: none; cursor: pointer; padding: 20px 34px 20px 0; position: relative;
  font-family: var(--disp); font-weight: 500; font-size: 18px; letter-spacing: -.014em;
  color: var(--ink); transition: color .2s var(--ease); }
.vfaq summary::-webkit-details-marker { display: none; }
.vfaq summary:hover { color: var(--emer); }
.vfaq summary::after { content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font: 400 22px/1 var(--mono); color: var(--emer);
  transition: transform .25s var(--ease); }
.vfaq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.vfaq details p { padding: 0 0 22px; max-width: 68ch; font-size: 16px; line-height: 1.72; color: var(--soft); }

/* ── смежные страницы ──────────────────────────────────────────────────────── */
.vrel { padding: 52px 0 10px; border-top: 1px solid var(--line2); }
.vrel > h2 { font-family: var(--disp); font-weight: 600; font-size: clamp(25px, 2.5vw, 33px);
  letter-spacing: -.026em; color: var(--ink); margin-bottom: 22px; }
.vrel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 13px; }
.vrel-grid a { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-radius: 16px; padding: 19px 21px;
  background: linear-gradient(180deg, rgba(11,20,18,.6), rgba(5,9,11,.45));
  font-family: var(--disp); font-weight: 500; font-size: 15.5px; letter-spacing: -.012em;
  color: var(--ink); transition: transform .28s var(--ease), border-color .28s var(--ease); }
.vrel-grid a::after { content: "→"; font: 400 15px/1 var(--mono); color: var(--emer);
  transition: transform .25s var(--ease); }
.vrel-grid a:hover { transform: translateY(-3px); border-color: rgba(61,240,176,.36); }
.vrel-grid a:hover::after { transform: translateX(4px); }

/* ── переключатель языков ──────────────────────────────────────────────────── */
.vlangs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 34px 0 8px; border-top: 1px solid var(--line2); margin-top: 44px; }
.vlangs-k { font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint); margin-right: 4px; }
.vlangs a, .vlangs b { font: 500 13.5px/1 var(--sans); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 15px; transition: border-color .2s var(--ease), color .2s var(--ease); }
.vlangs a { color: var(--soft); }
.vlangs a:hover { color: var(--ink); border-color: rgba(61,240,176,.4); }
.vlangs b { color: #031510; background: linear-gradient(180deg, #5cffc4, var(--emer)); border-color: transparent; }

/* ── подвал ────────────────────────────────────────────────────────────────── */
.vfoot { padding: 54px 0 70px; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line2); margin-top: 34px;
  font: 500 10px/1.8 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.vfoot a:hover { color: var(--emer); }

/* ── появление при прокрутке ───────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ── письмо: иероглиф заполняет знакоместо целиком ─────────────────────────
   Clash Display и Satoshi не содержат китайских и корейских глифов — браузер
   подставлял бы их поштучно системным шрифтом, и внутри строки разъезжались бы
   ширины. Плюс плотное межстрочие заголовков, рассчитанное на латиницу, у
   иероглифов накладывает строки друг на друга. Оба лечения — здесь. */
html[lang^="zh"] body.vs, html[lang^="zh"] .vhero h1, html[lang^="zh"] .vsec h2,
html[lang^="zh"] .vfaq > h2, html[lang^="zh"] .vrel > h2, html[lang^="zh"] .vfaq summary,
html[lang^="zh"] .vmetric strong, html[lang^="zh"] .vbtn, html[lang^="zh"] .vbrand b,
html[lang^="zh"] .vrel-grid a {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
}
html[lang^="ko"] body.vs, html[lang^="ko"] .vhero h1, html[lang^="ko"] .vsec h2,
html[lang^="ko"] .vfaq > h2, html[lang^="ko"] .vrel > h2, html[lang^="ko"] .vfaq summary,
html[lang^="ko"] .vmetric strong, html[lang^="ko"] .vbtn, html[lang^="ko"] .vbrand b,
html[lang^="ko"] .vrel-grid a {
  font-family: "Apple SD Gothic Neo", Pretendard, "Noto Sans KR",
               "Malgun Gothic", system-ui, sans-serif;
}
html[lang^="zh"] .vhero h1, html[lang^="ko"] .vhero h1 {
  font-size: clamp(32px, 3.9vw, 50px); line-height: 1.24; letter-spacing: 0; }
html[lang^="zh"] .vsec h2, html[lang^="ko"] .vsec h2,
html[lang^="zh"] .vfaq > h2, html[lang^="ko"] .vfaq > h2,
html[lang^="zh"] .vrel > h2, html[lang^="ko"] .vrel > h2 {
  line-height: 1.4; letter-spacing: 0; }
html[lang^="zh"] .vfaq summary, html[lang^="ko"] .vfaq summary { line-height: 1.5; letter-spacing: 0; }
html[lang^="zh"] .vmetric strong, html[lang^="ko"] .vmetric strong { line-height: 1.28; letter-spacing: 0; }
html[lang^="zh"] .vlead, html[lang^="ko"] .vlead { line-height: 1.85; }
/* служебные подписи и цифры остаются моноширинными: они там ради выравнивания */
html[lang^="zh"] .vkick, html[lang^="ko"] .vkick,
html[lang^="zh"] .vsec .n, html[lang^="ko"] .vsec .n,
html[lang^="zh"] .vfoot, html[lang^="ko"] .vfoot,
html[lang^="zh"] .vlangs-k, html[lang^="ko"] .vlangs-k { font-family: var(--mono); }

/* ── узкие экраны ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .vhero { grid-template-columns: 1fr; gap: 38px; padding: 46px 0 60px; }
  .vsec { grid-template-columns: 52px 1fr; gap: 22px; }
  .vsec .vbul { grid-column: 2; margin-top: 22px; }
}
@media (max-width: 720px) {
  .vwrap { padding: 0 20px; }
  .vmetrics { grid-template-columns: 1fr; }
  .vsec { grid-template-columns: 1fr; gap: 0; padding: 40px 0; }
  .vsec .n { padding-top: 0; margin-bottom: 12px; }
  .vsec .vbul { grid-column: 1; }
  .vhero h1 { font-size: 34px; }
  html[lang^="zh"] .vhero h1, html[lang^="ko"] .vhero h1 { font-size: 29px; line-height: 1.3; }
  .vfoot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ЖИВАЯ ЧАСТЬ. Всё ниже добавлено ради одного: чтобы страницу хотелось читать
   дальше. Каждый приём отвечает на вопрос «что это даёт человеку», а не «как бы
   покрасивее»:
     рельс слева        — видно, сколько осталось, и что ты движешься;
     счёт цифр          — число входит в глаз, а не просто лежит;
     пятно под курсором — карточка отзывается, страница ощущается живой;
     блик на кнопке     — единственный элемент, который зовёт, и он один такой;
     параллакс героя    — движение чувствуется, а не только происходит.
   Всё это выключается при prefers-reduced-motion — там страница обязана быть
   тихой и статичной, а не «почти тихой».
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── рельс прочитанного: тонкая полоса слева, наливается по мере чтения ────── */
.vrail { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); width: 2px;
  height: 32vh; background: var(--line); border-radius: 2px; z-index: 15; opacity: 0;
  transition: opacity .5s var(--ease); pointer-events: none; }
.vrail.on { opacity: 1; }
.vrail i { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 2px;
  background: linear-gradient(180deg, var(--emer-x), var(--emer) 45%, rgba(61,240,176,.25));
  box-shadow: 0 0 14px rgba(61,240,176,.55); transition: height .12s linear; }
.vrail em { position: absolute; left: 13px; top: 0; font: 600 9px/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint); white-space: nowrap;
  font-style: normal; transform: translateY(-50%); transition: top .12s linear; }
@media (max-width: 1180px) { .vrail { display: none; } }

/* ── оглавление: липкая полоса разделов под шапкой ─────────────────────────── */
/* Полоса разделов липнет под шапкой. Подложка — СПЛОШНАЯ на всю ширину строки,
   а не полупрозрачная у каждой плашки: при полупрозрачности сквозь плашки просвечивал
   проезжающий текст, и строка читалась как грязная. Растягиваем фон за поля обёртки
   отрицательными отступами, чтобы полоса перекрывала контент целиком. */
.vtoc { position: sticky; top: 58px; z-index: 14; display: flex; gap: 8px; overflow-x: auto;
  padding: 13px 40px 14px; margin: 0 -40px; scrollbar-width: none;
  background: linear-gradient(180deg, rgba(4,7,10,.96) 72%, rgba(4,7,10,.82));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line2);
  -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent);
  mask-image: linear-gradient(90deg, #000 94%, transparent); }
.vtoc::-webkit-scrollbar { display: none; }
.vtoc a { flex: none; font: 500 12px/1 var(--sans); color: var(--faint);
  border: 1px solid var(--line2); border-radius: 999px; padding: 9px 14px;
  background: rgba(11,20,18,.9);
  transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease); }
.vtoc a:hover { color: var(--ink); border-color: rgba(61,240,176,.34); }
.vtoc a.here { color: var(--emer); border-color: rgba(61,240,176,.42); background: rgba(61,240,176,.07); }
@media (max-width: 720px) { .vtoc { top: 52px; padding-inline: 20px; margin-inline: -20px; } }

/* ── пятно под курсором на карточках ───────────────────────────────────────── */
.vmetric, .vrel-grid a, .vbul { position: relative; isolation: isolate; overflow: hidden; }
.vmetric::before, .vrel-grid a::before, .vbul::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; opacity: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(61,240,176,.14), transparent 62%);
  transition: opacity .28s var(--ease); }
.vmetric:hover::before, .vrel-grid a:hover::before, .vbul:hover::before { opacity: 1; }

/* ── цифра метрики: пока считается, слегка светится ────────────────────────── */
.vmetric strong { transition: text-shadow .5s var(--ease); }
.vmetric.count strong { text-shadow: 0 0 22px rgba(61,240,176,.4); }

/* ── блик, пробегающий по главной кнопке ───────────────────────────────────── */
.vbtn.p { position: relative; overflow: hidden; }
.vbtn.p::after { content: ""; position: absolute; top: 0; left: -140%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: vsheen 4.6s var(--ease) infinite; }
@keyframes vsheen { 0%, 62% { left: -140%; } 82%, 100% { left: 190%; } }

/* ── подчерк-росчерк под заголовками разделов ──────────────────────────────── */
.vsec h2 { position: relative; padding-bottom: 14px; }
.vsec h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  border-radius: 2px; background: linear-gradient(90deg, var(--emer), rgba(61,240,176,0));
  transition: width 1.1s var(--ease) .18s; }
.vsec.in h2::after { width: 92px; }

/* ── номер раздела: обводка, которая дорисовывается ────────────────────────── */
.vsec .n { position: relative; }
.vsec .n::before { content: ""; position: absolute; left: -12px; top: 4px; width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 9px; z-index: -1;
  transition: border-color .8s var(--ease) .2s, transform .8s var(--ease) .2s;
  transform: scale(.82); }
.vsec.in .n::before { border-color: rgba(61,240,176,.32); transform: scale(1); }

/* ── герой: лёгкий параллакс рамки ─────────────────────────────────────────── */
.vshot { will-change: transform; }

/* ── вопрос раскрывается плавно ────────────────────────────────────────────── */
.vfaq details p { animation: vopen .42s var(--ease); }
@keyframes vopen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .vbtn.p::after { animation: none; display: none; }
  .vsec h2::after { transition: none; width: 92px; }
  .vsec .n::before { transition: none; transform: none; border-color: rgba(61,240,176,.32); }
  .vfaq details p { animation: none; }
  .vrail { display: none; }
  .vshot { transform: none !important; }
}

/* ── переключатель языков в шапке ──────────────────────────────────────────────
   Форма — <details>, а не выпадашка на скрипте: закрытый список всё равно лежит
   в разметке обычными ссылками, поэтому поисковик находит по ним языковые версии,
   а человек без JS всё равно может переключиться. */
.vlang { position: relative; flex: none; }
.vlang > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  font: 500 13px/1 var(--sans); color: var(--soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 14px; white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease); }
.vlang > summary::-webkit-details-marker { display: none; }
.vlang > summary svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.vlang > summary:hover, .vlang[open] > summary { color: var(--ink); border-color: rgba(61,240,176,.42); }

.vlang-menu { position: absolute; right: 0; top: calc(100% + 9px); z-index: 30;
  display: flex; flex-direction: column; min-width: 158px; padding: 7px;
  border: 1px solid var(--line); border-radius: 15px;
  background: rgba(7,12,14,.97); backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.04);
  animation: vlangin .22s var(--ease); }
@keyframes vlangin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vlang-menu a { padding: 10px 13px; border-radius: 10px; font: 500 13.5px/1.3 var(--sans);
  color: var(--soft); transition: background .18s var(--ease), color .18s var(--ease); }
.vlang-menu a:hover { background: rgba(61,240,176,.09); color: var(--ink); }
.vlang-menu a.tek { color: var(--emer); }
.vlang-menu a.tek::after { content: "✓"; float: right; font: 400 12px/1.3 var(--mono); }
@media (prefers-reduced-motion: reduce) { .vlang-menu { animation: none; } }
@media (max-width: 720px) { .vlang > summary { padding: 8px 11px; font-size: 12px; } }


/* переключатель и кнопка живут РЯДОМ с полосой меню, а не внутри неё */
.vtop-in > .vlang { margin-left: 14px; }
.vtop-in > .go { margin-left: 12px; text-decoration: none; }
@media (max-width: 720px) { .vtop-in > .vlang { margin-left: 8px; } .vtop-in > .go { margin-left: 8px; } }

/* ── шапка на узких экранах ────────────────────────────────────────────────────
   Пока переключатель и кнопка жили внутри прокручиваемой полосы, ширина шапки
   ничего не значила: лишнее просто уезжало в прокрутку. Теперь они стоят рядом
   с полосой и занимают место по-настоящему — на 390px строка вылезала за экран
   на 24-36px (у каждого языка по-своему: подписи разной длины).
   Лечение: словесная часть логотипа прячется, отступы ужимаются, а полоса меню
   отдаёт всю оставшуюся ширину — она умеет прокручиваться. */
@media (max-width: 640px) {
  .vtop-in { gap: 10px; }
  .vbrand b { display: none; }
  .vnav { gap: 15px; font-size: 13px; }
  .vtop-in > .vlang { margin-left: 4px; }
  .vtop-in > .go { margin-left: 4px; padding: 9px 13px; font-size: 13.5px; }
  .vlang > summary { padding: 8px 10px; gap: 5px; }
  .vlang-menu { min-width: 146px; }
}
@media (max-width: 430px) {
  .vnav { gap: 13px; }
  .vlang > summary span { display: none; }   /* остаётся только глобус */
}

/* ── сравнительная таблица ─────────────────────────────────────────────────────
   На сравнительное содержание приходится около трети цитирований ИИ-ответов, и
   таблица извлекается лучше прозы. Обёртка с собственной прокруткой обязательна:
   без неё широкая таблица растягивает вбок всю страницу, а не себя. */
/* Дети сетки раздела обязаны уметь сжиматься: по умолчанию min-width:auto, и
   широкая таблица расширяла колонку, а через неё и страницу — на 390px вбок
   уезжало 177 пикселей. */
.vsec > * { min-width: 0; }
/* Таблица занимает ВСЮ ширину раздела: в колонке текста ей доставалось 504px
   из 1180, и она листалась там, где места полно. */
.vtab-wrap { grid-column: 1 / -1; margin-top: 26px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(11,20,18,.6), rgba(5,9,11,.45)); }
.vtab { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.vtab th, .vtab td { padding: 15px 20px; text-align: left; vertical-align: top;
  border-top: 1px solid var(--line2); }
.vtab thead th { border-top: 0; font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--emer-d); white-space: nowrap; }
.vtab tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.vtab td { color: var(--soft); }
.vtab tbody tr:hover td, .vtab tbody tr:hover th { background: rgba(61,240,176,.035); }
@media (max-width: 720px) {
  .vtab { font-size: 14px; }
  .vtab th, .vtab td { padding: 13px 15px; }
}
html[lang^="zh"] .vtab thead th, html[lang^="ko"] .vtab thead th { font-family: var(--mono); }