/* Статьи VOOK Russia. Токены те же, что на главной (index.html), правьте синхронно. */
:root{
  color-scheme:dark;
  --bg:#0A0C0F;--bg-2:#0F1216;--surface:#13171C;--surface-2:#1A1F26;
  --line:rgba(205,218,235,.10);--line-2:rgba(205,218,235,.18);
  --ink:#ECEFF3;--muted:#8A94A1;--dim:#5B6470;
  --ice:#A9C7FF;--ice-deep:#6E95E8;--sand:#C8AE86;--ok:#7FD6A6;
  --on-ice:#08101F;--ice-rgb:169,199,255;--bg-rgb:10,12,15;
  --f-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px;--ease-soft:cubic-bezier(.25,.8,.25,1);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F3F4F6;--bg-2:#EBEDF0;--surface:#FFFFFF;--surface-2:#E4E8EE;
  --line:rgba(16,24,38,.10);--line-2:rgba(16,24,38,.18);
  --ink:#0E1116;--muted:#525B67;--dim:#79828E;
  --ice:#2F62D0;--ice-deep:#1D4AB2;--sand:#94733F;--ok:#1E9A5B;
  --on-ice:#FFFFFF;--ice-rgb:47,98,208;--bg-rgb:243,244,246;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:var(--ice);text-underline-offset:3px;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
::selection{background:var(--ice);color:var(--bg)}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* шапка */
.bhdr{position:sticky;top:0;z-index:50;background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.bhdr .wrap{display:flex;align-items:center;gap:22px;min-height:68px}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);font:500 1.2rem/1 var(--f-display);letter-spacing:.32em}
.logo small{font:400 .62rem var(--f-mono);letter-spacing:.18em;color:var(--muted)}
.bhdr nav{display:flex;gap:24px;margin-left:auto}
.bhdr nav a{color:var(--muted);text-decoration:none;font-size:.92rem;transition:color .3s}
.bhdr nav a:hover,.bhdr nav a[aria-current]{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 28px;border-radius:999px;border:1px solid transparent;background:var(--ice);color:var(--on-ice);font:500 1rem/1 var(--f-body);text-decoration:none;cursor:pointer;transition:transform .6s var(--ease-soft),box-shadow .6s var(--ease-soft)}
.btn .arr{display:inline-block;transition:transform .6s var(--ease-soft)}
@media (hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(var(--ice-rgb),.6)}.btn:hover .arr{transform:translateX(5px)}}
.btn--sm{min-height:42px;padding:0 18px;font-size:.9rem}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.theme-t{position:relative;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;padding:0;display:grid;place-items:center;transition:border-color .4s}
.theme-t:hover{border-color:var(--ice)}
.theme-t svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;transition:opacity .6s var(--ease-soft),transform .9s var(--ease-soft)}
.theme-t .moon{opacity:0;transform:rotate(-70deg) scale(.6)}
:root[data-theme="light"] .theme-t .sun{opacity:0;transform:rotate(70deg) scale(.6)}
:root[data-theme="light"] .theme-t .moon{opacity:1;transform:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:.7s;animation-timing-function:cubic-bezier(.25,.8,.25,1)}
@media (max-width:820px){.bhdr nav{display:none}.bhdr .btn{margin-left:auto}}
@media (max-width:400px){.logo small{display:none}}

/* статья */
.crumbs{font:400 .78rem/1.5 var(--f-mono);letter-spacing:.06em;color:var(--dim);padding-top:28px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.art{max-width:760px;margin-inline:auto;padding-block:20px 80px}
.art-head{padding-block:18px 8px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:400 .74rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--ice)}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-weight:300;font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.05;margin-top:18px}
.lede{font-size:clamp(1.08rem,1.6vw,1.22rem);color:var(--muted);margin:22px 0 0}
.meta{display:flex;gap:8px 18px;flex-wrap:wrap;font:400 .8rem var(--f-mono);color:var(--dim);margin-top:22px}
.cover{margin:34px 0 8px;border-radius:calc(var(--r) + 4px);overflow:hidden;background:#FCFCFC;border:1px solid var(--line)}
.cover img{width:100%}
.art h2{font-weight:400;font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.15;margin:56px 0 16px;scroll-margin-top:90px}
.art h3{font-weight:500;font-size:1.25rem;line-height:1.3;margin:34px 0 10px}
.art p{margin:0 0 16px}
.art ul,.art ol{margin:0 0 18px;padding-left:1.3em}
.art li{margin-bottom:8px}
.art li::marker{color:var(--ice)}
.art strong{font-weight:600;color:var(--ink)}
.art hr{border:0;border-top:1px solid var(--line);margin:48px 0}

/* оглавление */
.toc{margin:34px 0 0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.toc b{display:block;font:400 .74rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin:4px 0}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--ice)}

/* таблицы: на широком экране обычная таблица, на телефоне листается внутри своей рамки */
.tbl{margin:22px 0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
.tbl.narrow table{min-width:0}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font:400 .74rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg-2)}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl td.n,.tbl th.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.hl>*{background:rgba(var(--ice-rgb),.08)}
/* на телефоне таблицы .stack превращаются в карточки: подписи колонок берутся из data-label */
@media (max-width:640px){
  .tbl.stack{overflow:visible;border:0;background:none}
  .tbl.stack table{min-width:0}
  .tbl.stack thead{display:none}
  .tbl.stack tr{display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:6px 16px;margin-bottom:10px}
  .tbl.stack tr.hl{border-color:rgba(var(--ice-rgb),.5)}
  .tbl.stack tr.hl>*{background:none}
  .tbl.stack td{display:flex;justify-content:space-between;gap:16px;padding:9px 0;text-align:right;border-bottom:1px solid var(--line)}
  .tbl.stack td:last-child{border-bottom:0}
  .tbl.stack td::before{content:attr(data-label);font:400 .72rem/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;flex:none;max-width:45%}
  .tbl.stack td:first-child{display:block;text-align:left;font:500 1.08rem var(--f-display);padding-top:10px}
  .tbl.stack td:first-child::before{content:none}
  .tbl.stack td.n{white-space:normal}
  .tbl.stack td .v{min-width:0}
}
.tbl-note{font-size:.84rem;color:var(--dim);margin:-14px 0 24px}

/* врезки */
.note{margin:26px 0;padding:18px 22px;border-left:2px solid var(--ice);background:rgba(var(--ice-rgb),.06);border-radius:0 var(--r) var(--r) 0}
.note p:last-child{margin:0}
.cta{margin:44px 0;padding:clamp(22px,4vw,34px);border:1px solid var(--line-2);border-radius:calc(var(--r) + 4px);background:linear-gradient(135deg,var(--surface),var(--bg-2));display:grid;gap:14px}
.cta h3{margin:0;font-weight:400;font-size:clamp(1.35rem,2.6vw,1.75rem)}
.cta p{margin:0;color:var(--muted)}
.cta .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* карточки моделей внутри статьи */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin:22px 0 26px}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:18px;display:grid;gap:6px;align-content:start}
.card b{font:500 1.05rem var(--f-display)}
.card span{color:var(--muted);font-size:.9rem}
.card .pr{font:400 1.25rem var(--f-mono);color:var(--ink);margin-top:4px}

/* мини-калькулятор */
.calc{margin:26px 0;padding:22px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);display:grid;gap:16px}
.calc .flds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.calc label{display:grid;gap:6px;font:400 .74rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.calc input{width:100%;min-width:0;height:52px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:400 1.15rem var(--f-mono)}
.calc input:focus{outline:none;border-color:var(--ice)}
.calc output{display:block;font-size:1.02rem;line-height:1.55}
.calc output b{font:400 1.5rem var(--f-display);color:var(--ice)}
@media (max-width:480px){.calc .flds{grid-template-columns:minmax(0,1fr)}}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font:300 1.5rem var(--f-display);color:var(--ice);transition:transform .5s var(--ease-soft)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted)}

/* читайте также и список статей */
.more{border-top:1px solid var(--line);padding-block:56px 30px}
.more h2{font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:22px}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.post{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:calc(var(--r) + 2px);overflow:hidden;background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .5s,transform .6s var(--ease-soft)}
@media (hover:hover){.post:hover{border-color:var(--ice);transform:translateY(-3px)}}
.post .ph{aspect-ratio:16/9;background:#FCFCFC;overflow:hidden}
.post .ph img{width:100%;height:100%;object-fit:contain}
.post .tx{padding:18px 20px 22px;display:grid;gap:8px;align-content:start}
.post h3{font-weight:400;font-size:1.25rem;line-height:1.25}
.post p{margin:0;color:var(--muted);font-size:.93rem}
.post small{font:400 .74rem var(--f-mono);color:var(--dim);letter-spacing:.06em}
.blog-head{padding-block:30px 40px}
.blog-head h1{text-transform:none}

footer{border-top:1px solid var(--line);padding-block:36px 50px;color:var(--dim);font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
/* юридическая сноска и плашка cookie */
.legal{flex-basis:100%;margin:6px 0 0;font-size:.76rem;line-height:1.6;color:var(--dim);max-width:72em}
.ck{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;max-width:420px;display:flex;align-items:center;gap:14px;padding:14px 14px 14px 18px;border:1px solid var(--line-2);border-radius:var(--r);background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--muted);font-size:.82rem;line-height:1.5;box-shadow:0 18px 40px -20px rgba(0,0,0,.6);transform:translateY(calc(100% + 40px));opacity:0;transition:transform .8s var(--ease-soft),opacity .8s var(--ease-soft)}
.ck.show{transform:none;opacity:1}
.ck button{flex:none;min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:500 .85rem var(--f-body);cursor:pointer;transition:border-color .4s}
.ck button:hover{border-color:var(--ice)}
@media (max-width:560px){.ck{left:12px;right:12px;max-width:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}