/* Flux — дизайн-система «ink & steel». Токены и экраны воссозданы по прототипу. */































*{box-sizing:border-box}































html,body{margin:0;padding:0}































































:root{































  --bg:#f4f4f3;--surface:#ffffff;--surface2:#faf9f8;--fg:#181a1e;--muted:#63676d;--rlink:#2748d8;--rlink-h:#a9791b;--faint:#9a9ea4;































  --line:#e7e6e3;--line2:#d8d6d2;--ink:#1c1f24;--ink-fg:#ffffff;--field:#ffffff;--overlay:rgba(20,22,26,.5);































  --code:#f4f3f1;--panel:#1c1f24;--panel-fg:#ffffff;--panel-border:transparent;--panel-btn-bg:#ffffff;--panel-btn-fg:#1c1f24;































}































html[data-theme="dark"]{































  --bg:#0d0e10;--surface:#161719;--surface2:#1c1e21;--fg:#f1f1ef;--muted:#9fa3a8;--rlink:#8ea2ff;--rlink-h:#f2c14e;--faint:#6d7176;































  --line:#26282c;--line2:#34373c;--ink:#f1f1ef;--ink-fg:#111214;--field:#111214;--overlay:rgba(0,0,0,.55);































  --code:#111214;--panel:#191a1d;--panel-fg:#f1f1ef;--panel-border:#2d2f34;--panel-btn-bg:#f1f1ef;--panel-btn-fg:#141518;































}































































body{































  background:var(--bg);color:var(--fg);































  font-family:'Golos Text',system-ui,-apple-system,sans-serif;































  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;































  font-size:16px;line-height:1.6;































  transition:background-color .35s ease,color .35s ease;































  min-height:100dvh;































}































.mono{font-family:'Source Code Pro',ui-monospace,SFMono-Regular,Menlo,monospace}































a{color:inherit;text-decoration:none}































button{font-family:inherit;color:inherit;cursor:pointer}































input,textarea,select{font-family:inherit;color:inherit}































::selection{background:var(--ink);color:var(--ink-fg)}































img{max-width:100%}































h1,h2,h3,h4{margin:0;letter-spacing:-.01em;line-height:1.2}































































a,button{transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .18s ease,box-shadow .2s ease,background-color .2s ease,color .15s ease,opacity .2s ease}































































.wrap{max-width:1200px;margin:0 auto;padding:0 24px}































.reader-wrap{max-width:740px;margin:0 auto;padding:0 24px}































.eyebrow{font-family:'Source Code Pro',monospace;font-size:12px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;font-weight:500}































.muted{color:var(--muted)}































.faint{color:var(--faint)}































.center{text-align:center}































































/* ---------- header ---------- */































header.site{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);































  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:saturate(160%) blur(10px)}































.hdr{display:flex;align-items:center;gap:22px;height:66px}































.logo{display:flex;align-items:center;gap:11px;background:none;border:none;padding:0;color:var(--fg)}































.logo .mark{width:24px;height:24px;background:var(--ink);color:var(--ink-fg);border-radius:7px;display:flex;align-items:center;justify-content:center}































.logo .name{font-weight:700;font-size:19px;letter-spacing:-.01em}































nav.main{display:flex;gap:2px;margin-left:6px}































nav.main a{padding:8px 13px;border-radius:8px;color:var(--muted);font-weight:500;font-size:15px}































nav.main a:hover{color:var(--fg)}































nav.main a.active{background:var(--surface2);color:var(--fg);font-weight:600}































.hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px}































.langsw{display:flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}































.langsw a{padding:7px 11px;background:var(--surface);color:var(--muted);font-weight:600;font-size:13px}































.langsw a.on{background:var(--ink);color:var(--ink-fg)}































.iconbtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);































  background:var(--surface);border-radius:9px;color:var(--fg)}































.iconbtn:hover{border-color:var(--fg)}































.avatar{width:34px;height:34px;border-radius:999px;background:var(--ink);color:var(--ink-fg);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;font-family:'Source Code Pro',monospace}































































/* ---------- buttons ---------- */































.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;































  padding:12px 20px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;background:var(--ink);color:var(--ink-fg)}































.btn:hover{transform:translateY(-1px)}































.btn.ghost{background:var(--surface);color:var(--fg);border-color:var(--line2)}































.btn.ghost:hover{border-color:var(--fg)}































.btn.sm{padding:9px 15px;font-size:14px;border-radius:9px}































.btn.lg{padding:14px 26px;font-size:16px}































.btn.block{display:flex;width:100%}































.btn.panel-btn{background:var(--panel-btn-bg);color:var(--panel-btn-fg)}































.btn[disabled]{opacity:.55;pointer-events:none}































.tlink{color:var(--fg);border-bottom:1px solid var(--line2);padding-bottom:1px}































.tlink:hover{border-color:var(--fg)}































































/* ---------- pills / badges ---------- */































.pill{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:9px;border:1px solid var(--line2);































  background:var(--field);color:var(--muted);font-weight:600;font-size:13.5px;white-space:nowrap}































.pill.on{border-color:var(--ink);background:var(--ink);color:var(--ink-fg)}































.badge{font-family:'Source Code Pro',monospace;font-size:11px;letter-spacing:.04em;font-weight:500;































  padding:4px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);text-transform:uppercase}































.badge.free{color:#2f7d4f;border-color:#2f7d4f55}































.badge.paid{color:var(--fg);border-color:var(--line2)}































.badge.owned{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}































html[data-theme="dark"] .badge.free{color:#6fce93;border-color:#6fce9355}































































/* ---------- sections / reveal ---------- */































main section{padding:56px 0}































@keyframes gridUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}































@keyframes revealSafety{to{opacity:1}}































/* по умолчанию скрыто, но подстраховка: если JS/IO не сработали — покажем через 1.2с */































.reveal{opacity:0;animation:revealSafety .01s linear 1.2s forwards}































.reveal.in{animation:gridUp .6s cubic-bezier(.2,.7,.2,1) both}































@media(prefers-reduced-motion:reduce){.reveal{opacity:1;animation:none}.reveal.in{animation:none}}































.section-head{max-width:640px;margin-bottom:34px}































.section-head h2{font-size:30px;font-weight:700;margin:12px 0 10px}































.section-head p{color:var(--muted);font-size:16.5px;margin:0}































































/* ---------- hero ---------- */































.hero{padding:70px 0 40px}































.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}































.hero h1{font-size:52px;font-weight:700;letter-spacing:-.02em;margin:16px 0 20px;max-width:13ch}































.hero .sub{font-size:19px;color:var(--muted);max-width:52ch;margin:0 0 30px}































.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}































.hero .note{margin-top:18px;font-size:13.5px;color:var(--faint);font-family:'Source Code Pro',monospace}































@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero h1{max-width:16ch}}































@media(max-width:640px){.hero h1{font-size:36px}.hero .sub{font-size:17px}}































































/* ---------- hero-visual: живой «дашборд хоста» ---------- */































.hero-visual{display:flex;justify-content:flex-end}































@media(max-width:920px){.hero-visual{justify-content:flex-start}}































.rig-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:18px;































  padding:26px 26px 24px;box-shadow:0 34px 70px -46px rgba(0,0,0,.5);animation:rigFloat 6s ease-in-out infinite}































@keyframes rigFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}































.rig-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}































.rig-title{font-size:11.5px;letter-spacing:.11em;color:var(--faint)}































.rig-status{display:inline-flex;align-items:center;gap:7px;font-family:'Source Code Pro',monospace;font-size:11.5px;color:var(--muted)}































.rig-status .dot{width:8px;height:8px;border-radius:999px;background:#2f9e5f;animation:rigPulse 2s infinite}































@keyframes rigPulse{0%{box-shadow:0 0 0 0 rgba(47,158,95,.5)}70%{box-shadow:0 0 0 8px rgba(47,158,95,0)}100%{box-shadow:0 0 0 0 rgba(47,158,95,0)}}































.rig-income{margin-bottom:22px}































.rig-amount{font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1}































.rig-caption{color:var(--muted);font-size:12.5px;margin-top:7px;font-family:'Source Code Pro',monospace}































.rig-gpus{display:grid;gap:12px;margin-bottom:22px}































.rig-row{display:flex;align-items:center;gap:12px}































.rig-row .g{font-size:11px;color:var(--faint);width:50px;flex:none}































.rig-row .bar{flex:1;height:7px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;overflow:hidden}































.rig-row .bar i{display:block;height:100%;background:var(--ink);border-radius:999px;width:var(--w2);































  animation:rigBar 4.5s ease-in-out infinite}































@keyframes rigBar{0%,100%{width:var(--w1)}50%{width:var(--w2)}}































.rig-row .pct{font-size:11px;color:var(--muted);width:32px;text-align:right;flex:none}































.rig-spark{border-top:1px solid var(--line);padding-top:16px}































.rig-spark svg{width:100%;height:52px;display:block}































.rig-spark polyline{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;































  stroke-dasharray:640;stroke-dashoffset:640;animation:rigDraw 2.2s cubic-bezier(.4,.1,.2,1) forwards .35s}































@keyframes rigDraw{to{stroke-dashoffset:0}}































.rig-spark-cap{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:8px}































@media(prefers-reduced-motion:reduce){































  .rig-card{animation:none}.rig-status .dot{animation:none}.rig-row .bar i{animation:none;width:var(--w2)}































  .rig-spark polyline{animation:none;stroke-dashoffset:0}































}































@media(max-width:400px){.rig-card{padding:22px 20px}.rig-amount{font-size:32px}}































































.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:44px}































.stats .cell{background:var(--surface);padding:26px 24px}































.stats .v{font-size:30px;font-weight:700;font-family:'Source Code Pro',monospace;letter-spacing:-.02em}































.stats .l{color:var(--muted);font-size:14.5px;margin-top:6px}































































/* ---------- grids ---------- */































.grid{display:grid;gap:16px}































.grid.g2{grid-template-columns:repeat(2,1fr)}































.grid.g3{grid-template-columns:repeat(3,1fr)}































.grid.g4{grid-template-columns:repeat(4,1fr)}































@media(max-width:900px){.grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr)}}































@media(max-width:640px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}}































































.card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:22px}































.card.pad{padding:26px}































.value .t{font-weight:600;font-size:17px;margin-bottom:7px}































.value .d{color:var(--muted);font-size:15px}































.step .n{font-family:'Source Code Pro',monospace;font-size:13px;color:var(--faint);font-weight:500}































.step .t{font-weight:600;font-size:17px;margin:10px 0 7px}































.step .d{color:var(--muted);font-size:15px}































































/* ---------- bundle banner ---------- */































.bundle-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--panel);color:var(--panel-fg);































  border:1px solid var(--panel-border);border-radius:16px;padding:22px 26px;margin-bottom:22px}































.bundle-banner:hover{transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(0,0,0,.5)}































.bundle-banner h3{font-size:19px;font-weight:700;margin:7px 0 6px}































.bundle-banner p{color:color-mix(in srgb,var(--panel-fg) 68%,transparent);font-size:14.5px;margin:0}































.bundle-price{text-align:right;flex:none;display:flex;flex-direction:column;gap:2px}































.bundle-price .old{color:color-mix(in srgb,var(--panel-fg) 50%,transparent);font-size:14px;text-decoration:line-through}































.bundle-price .new{font-size:26px;font-weight:700;letter-spacing:-.02em}































@media(max-width:600px){.bundle-banner{flex-direction:column;align-items:flex-start}.bundle-price{text-align:left;flex-direction:row;align-items:baseline;gap:12px}}































































/* ---------- article search + read ---------- */































.search-row{position:relative;margin-bottom:16px;max-width:520px}































.search-row .search-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none;display:flex}































.search-row input{width:100%;padding:13px 16px 13px 42px;border:1px solid var(--line2);border-radius:11px;background:var(--field);color:var(--fg);font-size:15px}































.search-row input:focus{outline:none;border-color:var(--fg)}































.read-tick{color:#2f9e5f;font-weight:700;margin-right:2px}































html[data-theme="dark"] .read-tick{color:#6fce93}































.acard.is-read{border-color:var(--line2)}































.read-toggle{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line2);color:var(--muted);































  padding:7px 13px;border-radius:999px;font-weight:600;font-size:13px;cursor:pointer}































.read-toggle.on{border-color:#2f9e5f;color:#2f7d4f;background:#2f9e5f10}































html[data-theme="dark"] .read-toggle.on{color:#6fce93}































































/* ---------- article cards ---------- */































.acard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:22px;height:100%}































.acard:hover{transform:translateY(-3px);box-shadow:0 12px 30px -18px rgba(0,0,0,.35);border-color:var(--line2)}































.acard .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}































.acard .cat{font-family:'Source Code Pro',monospace;font-size:12px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}































.acard h3{font-size:18.5px;font-weight:600;margin:0 0 8px;line-height:1.3}































.acard .exc{color:var(--muted);font-size:14.5px;flex:1}































.acard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}































.acard .min{font-family:'Source Code Pro',monospace;font-size:12.5px;color:var(--faint)}































.acard .price{font-weight:600;font-size:15px}































.acard .price.free{color:#2f7d4f}































html[data-theme="dark"] .acard .price.free{color:#6fce93}































































/* ---------- dark CTA panel ---------- */































.panel{background:var(--panel);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:18px;padding:44px 40px}































.panel h2{font-size:30px;font-weight:700;margin:0 0 12px}































.panel p{color:color-mix(in srgb,var(--panel-fg) 72%,transparent);font-size:16.5px;margin:0 0 24px;max-width:52ch}































@media(max-width:640px){.panel{padding:32px 24px}.panel h2{font-size:24px}}































































/* ---------- community ---------- */































.community{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;































  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:36px}































.community ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}































.community li{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:15px}































.community li::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--ink);flex:none}































@media(max-width:720px){.community{grid-template-columns:1fr}}































































/* ---------- reader ---------- */































.reader{padding:44px 0 60px}































.reader .kicker{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}































.reader h1{font-size:34px;font-weight:700;line-height:1.22;margin:0 0 14px}































.reader .meta{display:flex;gap:14px;align-items:center;color:var(--faint);font-family:'Source Code Pro',monospace;font-size:13px;margin-bottom:8px}































.prose{font-size:17px;line-height:1.72}































.prose p{margin:0 0 18px;color:var(--fg)}































.prose h2{font-size:23px;font-weight:700;margin:36px 0 14px}































.prose ul{margin:0 0 20px;padding-left:0;list-style:none;display:grid;gap:11px}































.prose ul li{position:relative;padding-left:22px;color:var(--fg)}































.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:999px;background:var(--ink)}































.note-box{background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:11px;padding:16px 18px;margin:0 0 22px;color:var(--muted);font-size:15.5px}































.img-ph{background:var(--surface2);border:1px dashed var(--line2);border-radius:12px;padding:34px;text-align:center;color:var(--faint);































  font-family:'Source Code Pro',monospace;font-size:13px;margin:0 0 22px}































.codeblock{background:var(--code);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 22px}































html[data-theme="dark"] .codeblock{background:#0b0c0d}































.codeblock .cb-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);































  font-family:'Source Code Pro',monospace;font-size:12px;color:var(--faint)}































.codeblock pre{margin:0;padding:16px 14px;overflow-x:auto}































.codeblock code{font-family:'Source Code Pro',monospace;font-size:13.5px;line-height:1.65;color:var(--fg);white-space:pre}































.cb-copy{background:none;border:none;color:var(--muted);font-family:inherit;font-size:12px}































.cb-copy:hover{color:var(--fg)}































.table-wrap{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:12px}































table{width:100%;border-collapse:collapse;font-size:14.5px}































th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}































th{font-family:'Source Code Pro',monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:500;background:var(--surface2)}































tr:last-child td{border-bottom:none}































































/* ---------- полнотекстовые главы гайда ---------- */































.chapter{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}































.chapter:first-of-type{border-top:none}































.chapter-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}































.chapter-head h2{font-size:24px;font-weight:700;flex:1;margin:0}































.chapter-n{font-size:13px;color:var(--faint);font-weight:500}































.chapter-min{font-size:12.5px;color:var(--faint);white-space:nowrap}































.chapter-body h2{font-size:19px;margin:28px 0 12px}































.chapter-body h3{font-size:16.5px;font-weight:600;margin:22px 0 10px}































.prose blockquote{background:var(--surface2);border:1px solid var(--line);border-left:3px solid var(--ink);































  border-radius:11px;padding:14px 18px;margin:0 0 22px;color:var(--muted)}































.prose blockquote p{margin:0 0 8px}































.prose blockquote p:last-child{margin:0}































.prose ul ul{margin:8px 0 0}































.prose strong{color:var(--fg);font-weight:600}































.prose code:not(.lang-):not([class]){background:var(--code);padding:1px 6px;border-radius:5px;font-family:'Source Code Pro',monospace;font-size:.9em}































































/* ---------- paywall ---------- */































.paywall{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px;margin-top:28px}































.paywall .pw-head{margin-bottom:20px}































.paywall .pw-head h3{font-size:22px;font-weight:700;margin:10px 0 8px}































.paywall .pw-head p{color:var(--muted);font-size:15.5px;margin:0}































.chlist{display:grid;gap:2px;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:22px}































.chlist .ch{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface2)}































.chlist .ch .cn{font-family:'Source Code Pro',monospace;font-size:13px;color:var(--faint);width:22px}































.chlist .ch .ct{font-weight:500;font-size:15px;flex:1}































.chlist .ch .cm{font-family:'Source Code Pro',monospace;font-size:12.5px;color:var(--faint)}































.chlist .ch .lock{color:var(--faint)}































.buybox{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:24px}































.buybox ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}































.buybox li{display:flex;gap:10px;align-items:flex-start;font-size:15px}































.buybox li svg{flex:none;margin-top:3px;color:var(--ink)}































.buybox .priceline{display:flex;align-items:baseline;gap:8px;margin-bottom:16px}































.buybox .priceline .amt{font-size:28px;font-weight:700;font-family:'Source Code Pro',monospace}































.buybox .priceline .per{color:var(--faint);font-size:13px;font-family:'Source Code Pro',monospace}































.guarantee{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13.5px;margin-top:14px}































































/* ---------- calculator ---------- */































.calc{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}































@media(max-width:860px){.calc{grid-template-columns:1fr}}































.calc-inputs{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;display:grid;gap:20px}































.field label{display:block;font-weight:600;font-size:14px;margin-bottom:9px}































.field .hint{color:var(--faint);font-size:12.5px;font-weight:400}































.pillrow{display:flex;gap:8px;flex-wrap:wrap}































.inp{width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:10px;background:var(--field);color:var(--fg);font-size:15px}































.inp:focus{outline:none;border-color:var(--fg)}































.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line2);border-radius:10px;overflow:hidden;width:fit-content}































.stepper button{width:44px;height:44px;background:var(--field);border:none;font-size:20px;color:var(--fg)}































.stepper button:hover{background:var(--surface2)}































.stepper .val{min-width:56px;text-align:center;font-family:'Source Code Pro',monospace;font-weight:600;font-size:16px;border-left:1px solid var(--line2);border-right:1px solid var(--line2);height:44px;display:flex;align-items:center;justify-content:center}































input[type=range]{width:100%;accent-color:var(--ink)}































.rangehead{display:flex;justify-content:space-between;align-items:baseline}































.rangehead .rv{font-family:'Source Code Pro',monospace;font-weight:600}































.inline2{display:grid;grid-template-columns:1fr 1fr;gap:14px}































.calc-out{background:var(--panel);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:16px;padding:26px;position:sticky;top:82px}































.calc-out .payback{text-align:center;padding:8px 0 20px;border-bottom:1px solid color-mix(in srgb,var(--panel-fg) 15%,transparent);margin-bottom:18px}































.calc-out .payback .num{font-size:52px;font-weight:700;font-family:'Source Code Pro',monospace;line-height:1}































.calc-out .payback .lbl{color:color-mix(in srgb,var(--panel-fg) 65%,transparent);font-size:14px;margin-top:8px}































.calc-out .payback .sublbl{color:color-mix(in srgb,var(--panel-fg) 45%,transparent);font-size:12.5px;margin-top:4px;font-family:'Source Code Pro',monospace}































.outrow{display:flex;justify-content:space-between;padding:9px 0;font-size:14.5px}































.outrow .k{color:color-mix(in srgb,var(--panel-fg) 65%,transparent)}































.outrow .v{font-family:'Source Code Pro',monospace;font-weight:600}































.effhint{margin-top:14px;font-size:12.5px;color:color-mix(in srgb,var(--panel-fg) 55%,transparent)}































.calc-note{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:22px;margin-top:22px}































.calc-note h4{font-size:16px;margin:0 0 8px}































.calc-note p{color:var(--muted);font-size:14.5px;margin:0 0 10px}































































/* ---------- calculator tabs + migration ---------- */































.calc-tabs{display:inline-flex;gap:4px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:26px}































.calc-tabs a{padding:9px 16px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted)}































.calc-tabs a.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.08)}































.calc-tabs a:hover{color:var(--fg)}































.mig-sides{display:grid;grid-template-columns:1fr 1fr;gap:16px}































@media(max-width:560px){.mig-sides{grid-template-columns:1fr}}































.mig-side{background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:18px;display:grid;gap:16px;align-content:start}































.mig-side.accent{border-color:var(--line2);box-shadow:inset 3px 0 0 var(--ink)}































.mig-side-h{font-size:12px;letter-spacing:.05em;color:var(--faint)}































.mig-side-h .mono{color:var(--fg);font-weight:600}































.mig-out{position:sticky;top:82px;display:flex;flex-direction:column}































.diffbox{background:var(--panel);color:var(--panel-fg);border:1px solid var(--panel-border);border-radius:16px;padding:28px 24px;text-align:center;margin-bottom:14px}































.diffbox .amt{font-size:42px;font-weight:700;font-family:'Source Code Pro',monospace;letter-spacing:-.02em;line-height:1}































.diffbox.pos .amt{color:#4cc98a}































.diffbox.neg .amt{color:#e8917f}































.diffbox .lbl{color:color-mix(in srgb,var(--panel-fg) 65%,transparent);font-size:14px;margin-top:10px}































.mig-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:14.5px;color:var(--muted);border-bottom:1px solid var(--line)}































.mig-row:last-child{border-bottom:none}































.mig-row .mono{color:var(--fg);font-weight:600}































.mig-row.total{padding-top:14px;font-weight:600;color:var(--fg)}































@media(max-width:860px){.mig-out{position:static}}































































/* ---------- services ---------- */































.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}































@media(max-width:900px){.svc-grid{grid-template-columns:1fr}}































.svc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;position:relative}































.svc.popular{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}































.svc .poptag{position:absolute;top:-11px;left:28px;background:var(--ink);color:var(--ink-fg);font-family:'Source Code Pro',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px}































.svc h3{font-size:19px;font-weight:600;margin:0 0 8px}































.svc .price{font-size:30px;font-weight:700;font-family:'Source Code Pro',monospace;margin:6px 0 4px}































.svc .price.free{color:#2f7d4f}































html[data-theme="dark"] .svc .price.free{color:#6fce93}































.svc .desc{color:var(--muted);font-size:14.5px;margin:0 0 18px}































.svc ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;flex:1}































.svc li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px}































.svc li svg{flex:none;margin-top:3px;color:var(--ink)}































































/* ---------- forms / checkout / login ---------- */































.formcard{max-width:460px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px}































.formcard.wide{max-width:960px}































.formrow{margin-bottom:16px}































.formrow label{display:block;font-weight:600;font-size:14px;margin-bottom:8px}































.err{background:#fbeaea;border:1px solid #e6b7b7;color:#a12a2a;border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:16px}































html[data-theme="dark"] .err{background:#2a1616;border-color:#5a2a2a;color:#f0a5a5}































.checkbox{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted);margin:14px 0}































.checkbox input{margin-top:3px}































.methods{display:grid;gap:10px;margin-bottom:20px}































.method{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:11px;padding:14px 16px;cursor:pointer}































.method.on,.method:hover{border-color:var(--ink)}































/* Рамка должна стоять у выбранного способа. Класс .on проставляется шаблоном































   первому варианту, поэтому без этого правила подсветка залипала на СБП,































   даже когда выбрана карта. :has() поддержан во всех текущих браузерах,































   JS ниже дублирует поведение для старых. */































.method:has(input:checked){border-color:var(--ink)}































.method:not(:has(input:checked)):not(:hover){border-color:var(--line2)}































.method input{accent-color:var(--ink)}































.method .mn{font-weight:600;font-size:15px}































.method .md{color:var(--faint);font-size:13px}































.checkout-grid{display:grid;grid-template-columns:1fr .8fr;gap:24px;align-items:start}































@media(max-width:800px){.checkout-grid{grid-template-columns:1fr}}































.summary{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:22px;position:sticky;top:82px}































.summary .row{display:flex;justify-content:space-between;padding:8px 0;font-size:14.5px;color:var(--muted)}































.summary .total{display:flex;justify-content:space-between;padding-top:14px;margin-top:8px;border-top:1px solid var(--line);font-weight:700;font-size:18px;color:var(--fg)}































.summary .total .mono{font-family:'Source Code Pro',monospace}































.tg-btn{display:inline-flex;align-items:center;gap:10px;background:#229ED9;color:#fff;border-color:#229ED9}































.tg-btn:hover{background:#1b8ec4}































.tg-badge{width:56px;height:56px;border-radius:16px;background:var(--ink);color:var(--ink-fg);display:inline-flex;align-items:center;justify-content:center}































.tg-badge svg{width:26px;height:26px}































.tg-widget{margin:20px 0 4px;min-height:48px}































.tg-perks{list-style:none;padding:0;margin:20px auto 0;max-width:340px;display:grid;gap:11px}































.tg-perks li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted)}































.tg-perks li svg{flex:none;margin-top:2px;color:var(--ink)}































.email-fallback summary{cursor:pointer;text-align:center;color:var(--muted);font-size:14px;font-weight:600;list-style:none;padding:4px}































.email-fallback summary::-webkit-details-marker{display:none}































.email-fallback summary:hover{color:var(--fg)}































.email-fallback[open] summary{margin-bottom:4px}































.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:13px;margin:20px 0}































.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}































































/* ---------- consult modal ---------- */































.modal-overlay{position:fixed;inset:0;z-index:120;background:var(--overlay);display:flex;































  align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .18s ease}































.modal-overlay[hidden]{display:none}































.modal-overlay.in{opacity:1}































.modal{width:100%;max-width:480px;max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--surface);































  border:1px solid var(--line);border-radius:20px;padding:32px;position:relative;































  box-shadow:0 34px 70px -40px rgba(0,0,0,.55);































  transform:translateY(10px) scale(.98);opacity:0;transition:transform .2s cubic-bezier(.2,.7,.2,1),opacity .18s ease}































.modal-overlay.in .modal{transform:translateY(0) scale(1);opacity:1}































@media(prefers-reduced-motion:reduce){.modal-overlay,.modal{transition:none}}































.modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;display:flex;align-items:center;































  justify-content:center;border:1px solid var(--line2);border-radius:9px;background:var(--surface);color:var(--muted)}































.modal-close:hover{color:var(--fg);border-color:var(--fg)}































.modal h3{font-size:22px;font-weight:700;margin:0 0 8px;padding-right:26px}































.modal-sub{margin:0 0 22px;font-size:14.5px}































.modal .formrow .hint{font-weight:400;color:var(--faint);font-size:12.5px}































.modal textarea.inp{resize:vertical;min-height:70px}































.hp-wrap{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}































.modal-alt{font-size:13.5px;margin:0}































.modal-success{text-align:center;padding:14px 4px 4px}































.modal-success-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;































  border-radius:999px;background:#2f9e5f;color:#fff;margin-bottom:16px}































.modal-success-t{font-size:16px;font-weight:600;margin:0 0 22px;line-height:1.5}































html.modal-lock,html.modal-lock body{overflow:hidden}































@media(max-width:480px){.modal{padding:26px 20px;border-radius:16px}}































































/* ---------- FAQ ---------- */































.faq{display:grid;gap:10px;max-width:760px}































.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}































.faq summary{padding:18px 20px;font-weight:600;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}































.faq summary::-webkit-details-marker{display:none}































.faq summary::after{content:"+";color:var(--faint);font-size:20px;font-weight:400}































.faq details[open] summary::after{content:"–"}































.faq .ans{padding:0 20px 20px;color:var(--muted);font-size:15px}































































/* ---------- legal ---------- */































.legal-grid{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}































@media(max-width:800px){.legal-grid{grid-template-columns:1fr}}































.legal-nav{display:grid;gap:4px;position:sticky;top:82px}































.legal-nav a{display:block;padding:10px 14px;border-radius:9px;color:var(--muted);font-size:14.5px;font-weight:500}































.legal-nav a.on{background:var(--surface2);color:var(--fg);font-weight:600}































.legal-body{max-width:720px}































.legal-body h1{font-size:28px;font-weight:700;margin-bottom:6px}































































/* ---------- reading progress ---------- */































.read-progress{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:15px 18px;margin-bottom:14px}































.rp-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;font-size:13px;font-weight:600}































.rp-bar{height:8px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;overflow:hidden}































.rp-bar>i{display:block;height:100%;background:#2f9e5f;border-radius:999px;transition:width .6s cubic-bezier(.2,.7,.2,1)}































































/* ---------- account ---------- */































.acct-head{display:flex;align-items:center;gap:16px;margin-bottom:28px}































.acct-head .av{width:56px;height:56px;border-radius:999px;background:var(--ink);color:var(--ink-fg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;font-family:'Source Code Pro',monospace}































.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:24px}































.tabs button{padding:12px 4px;margin-right:16px;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-weight:600;font-size:15px}































.tabs button.on{color:var(--fg);border-color:var(--ink)}































.empty{text-align:center;padding:56px 24px;color:var(--muted)}































.empty p{margin:0 0 18px}































.orderrow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:10px}































.status-chip{font-family:'Source Code Pro',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}































.status-chip.paid{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}































































/* ---------- dashboard CTA (account) ---------- */































.dash-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--surface);































  border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:26px}































.dash-cta h3{font-size:18px;font-weight:700;margin:8px 0 6px}































.dash-cta p{color:var(--muted);font-size:14.5px;margin:0;max-width:52ch}































.dash-cta .btn{flex:none}































@media(max-width:640px){.dash-cta{flex-direction:column;align-items:flex-start}.dash-cta .btn{width:100%}}































































/* ---------- footer ---------- */































footer.site{border-top:1px solid var(--line);margin-top:40px;padding:48px 0 40px;background:var(--surface2)}































.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}































@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}































footer .col h5{font-family:'Source Code Pro',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;font-weight:500}































footer .col a{display:block;color:var(--muted);font-size:14px;margin-bottom:9px}































footer .col a:hover{color:var(--fg)}































footer .about{color:var(--muted);font-size:14px;max-width:34ch;margin:14px 0 0}































footer .disc{color:var(--faint);font-size:12.5px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}































































/* ---------- toast / cookie ---------- */































.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--ink-fg);































  padding:13px 20px;border-radius:11px;font-weight:600;font-size:14.5px;z-index:90;box-shadow:0 16px 40px -18px rgba(0,0,0,.5)}































.cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:620px;margin:0 auto;background:var(--surface);































  border:1px solid var(--line2);border-radius:14px;padding:16px 20px;display:flex;gap:16px;align-items:center;z-index:80;































  box-shadow:0 16px 40px -20px rgba(0,0,0,.4)}































.cookie p{margin:0;font-size:13.5px;color:var(--muted);flex:1}































@media(max-width:540px){.cookie{flex-direction:column;align-items:stretch}}































































/* ---------- mobile nav ---------- */































.menu-btn{display:none}































.mobile-nav{border-top:1px solid var(--line);background:var(--surface)}































.mobile-nav .wrap{display:flex;flex-direction:column;padding-top:6px;padding-bottom:10px}































.mobile-nav a{padding:13px 4px;font-size:16px;font-weight:600;color:var(--fg);border-bottom:1px solid var(--line)}































.mobile-nav a:last-child{border-bottom:none}































@media(max-width:900px){nav.main{display:none}.menu-btn{display:flex}}































@media(min-width:801px){.mobile-nav{display:none}}































































/* FLEET-CSS-START */































/* ============================================================































   Витрина парка. Панель намеренно в палитре vast и одинакова































   в светлой и тёмной теме — это «снимок панели хоста», врезка.































   ============================================================ */































:root{































  --v-bg:#1b1b1b;--v-card:#414459;--v-edge:#4c4f66;--v-fg:#ffffff;































  --v-sec:#dcdce4;--v-dim:#b9b9c6;--v-orange:#ee7a1e;--v-purple:#a020d5;































  --v-good:#7ee08e;































}































































/* ---------- сводка над панелью ---------- */































/* высота 120px задана и здесь, и у правых карточек — так второй ряд обеих колонок































   начинается на одной линии независимо от длины подписей */































.fleet-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;































  min-height:120px;margin-bottom:13px}































.fleet-sum .fs-c{background:var(--surface);border:1px solid var(--line);border-radius:12px;































  padding:15px 17px;min-width:0}































.fleet-sum .fs-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);































  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}































.fleet-sum .fs-v{font-size:25px;font-weight:700;margin-top:7px;font-variant-numeric:tabular-nums;































  letter-spacing:-.01em}































.fleet-sum .fs-n{font-size:11px;color:var(--faint);margin-top:3px}































































/* ---------- панель ---------- */































.vast-panel{background:var(--v-bg);border-radius:12px;padding:7px;overflow-x:auto}































.vast-inner{min-width:1138px}































.vm{background:var(--v-card);border:1px solid var(--v-edge);border-radius:10px;































  margin-bottom:7px;padding:11px 16px 9px;color:var(--v-fg);line-height:1.35;































  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}































.vm:last-child{margin-bottom:0}































.vm-grid{display:grid;grid-template-columns:274px 190px 150px 146px 124px minmax(150px,1fr);































  gap:14px;align-items:start}































.vm-gpu{font-size:27px;font-weight:400;letter-spacing:-.01em;white-space:nowrap}































.vm-l2{display:flex;align-items:baseline;gap:24px;margin-top:6px}































.vm-tf{font-size:23px;font-weight:700;font-variant-numeric:tabular-nums}































.vm-tf i{font-style:normal;font-size:12px;font-weight:400;margin-left:6px;color:var(--v-sec)}































.vm-vr{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}































.vm-vr i{display:block;font-style:normal;font-size:12px;font-weight:400;color:var(--v-sec)}































.vm-cuda{font-size:13px;margin-top:5px}































.vm-t1{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}































.vm-pair{display:flex;gap:20px;margin-top:1px}































.vm-pair span{font-size:12px;color:var(--v-sec);font-variant-numeric:tabular-nums}































.vm-gap{margin-top:11px}































.vm-drop{margin-top:22px}































.vm-net{font-size:13.5px;margin-top:3px;font-variant-numeric:tabular-nums}































.vm-ports{font-size:13px;margin-top:11px;font-variant-numeric:tabular-nums}































.vm-rel-k{font-size:13px;margin-top:11px;color:var(--v-sec)}































.vm-money{text-align:right}































.vm-ask{font-size:17px;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}































.vm-ask span{font-size:12px;font-weight:400;color:var(--v-sec)}































.vm-real{font-size:19px;white-space:nowrap;font-weight:700;margin-top:9px;font-variant-numeric:tabular-nums}































.vm-real.good{color:var(--v-good)}































.vm-real.free{color:#9fd0ff}































.vm-note{font-size:11px;line-height:1.35;color:var(--v-dim);margin-top:2px}































.vm-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:11px;































  font-size:12.5px;font-variant-numeric:tabular-nums}































.vm-chip{padding:3px 10px;border-radius:4px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}































.vm-chip.o{background:var(--v-orange)}































.vm-chip.p{background:var(--v-purple)}































































.fleet-foot{margin-top:18px;max-width:78ch}































.fleet-foot p{margin:0 0 8px;font-size:14px}































.fleet-foot .xs{font-size:12px}































































/* ---------- компактный виджет в углу /articles ---------- */































.cat-top{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:34px;align-items:start}































@media(max-width:1040px){.cat-top{grid-template-columns:1fr}}































































.fleetw{position:relative;background:#121732;border:1px solid #262f57;border-radius:14px;































  color:#f2f4ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:block;































  transition:border-color .18s ease,box-shadow .2s ease,background .2s ease,































             transform .2s cubic-bezier(.2,.7,.2,1)}































.fleetw:hover,.fleetw:focus-visible{border-color:#4a7bff;































  border-bottom-color:rgba(255,196,104,.42);































  background:linear-gradient(180deg,#16204a,#141634 58%,#241d33 82%,#2e2331);































  transform:translateY(-3px);































  box-shadow:0 20px 55px -28px rgba(74,123,255,.85),































             0 40px 70px -30px rgba(255,178,52,.55)}































.fw-t{display:flex;align-items:center;justify-content:space-between;gap:10px;































  padding:12px 14px;border-bottom:1px solid var(--v-edge)}































.fw-n{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c3cbf0}































.fw-s{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#8390c4}































.fw-dot{width:6px;height:6px;border-radius:999px;background:var(--v-good);flex:none}































@media(prefers-reduced-motion:no-preference){.fw-dot{animation:fwp 3s ease-in-out infinite}}































@keyframes fwp{0%,100%{opacity:1}50%{opacity:.35}}































.fw-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#262f57}































.fw-c{background:#121732;padding:10px 13px}































.fw-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8390c4}































.fw-v{font-size:17px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}































.fw-l{padding:5px}































.fw-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:11px;align-items:center;































  background:#182046;border:1px solid #232c55;border-radius:7px;padding:8px 10px;margin-bottom:4px}































.fw-r:last-child{margin-bottom:0}































.fw-g{font-size:14px;font-weight:600}































.fw-sp{font-size:11.5px;color:#98a2d0;margin-top:1px;font-variant-numeric:tabular-nums}































.fw-p{font-size:12.5px;font-weight:600;color:#d5daf5;text-align:right;font-variant-numeric:tabular-nums}































.fw-p i{display:block;font-style:normal;font-size:10.5px;font-weight:400;color:#8390c4}































.fw-e{font-size:13.5px;font-weight:700;text-align:right;min-width:54px;font-variant-numeric:tabular-nums}































.fw-e.good{color:var(--v-good)}































.fw-e.free{color:#9fd0ff}































.fw-occ{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}































.fw-occ i{width:7px;height:7px;border-radius:2px;display:inline-block;background:#3a4472}































.fw-occ i.on{background:#e8a33a}































/* нижняя строка виджета — это призыв к действию, поэтому подсвечена и крупнее */































.fw-f{padding:12px 14px;font-size:13px;color:#b9c2ea;background:#1b2450;































  border-top:1px solid #262f57;border-radius:0 0 13px 13px;display:flex;align-items:center;































  justify-content:space-between;gap:12px;flex-wrap:wrap}































.fw-f u{text-decoration:none;font-size:14px;font-weight:700;color:#ffb86b;































  border-bottom:1px solid rgba(255,184,107,.5);padding-bottom:1px;white-space:nowrap}































.fleetw:hover .fw-f{background:#243063}































.fleetw:hover .fw-f u{color:#ffcd97;border-bottom-color:rgba(255,205,151,.75)}































































@media(max-width:640px){































  .fleet-sum{grid-template-columns:repeat(2,1fr)}































  .vast-panel{padding:5px;border-radius:10px}































}































/* ---------- широкая раскладка страницы парка ---------- */































.wrap-wide{max-width:2000px;margin:0 auto;padding:0 24px}































.wrap-wide .section-head p{max-width:88ch}































.fleet-cols{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);align-items:stretch}































.fleet-left{min-width:0}































@media(min-width:1720px){































  .fleet-cols{grid-template-columns:1152px minmax(440px,1fr)}































}































































/* ---------- кабинет заработков (копия страницы Earnings у vast) ---------- */































.earn{































  --e-card:#1a1a1a;--e-line:#2e2e2e;--e-fg:#f2f2f2;--e-mut:#8d8d8d;--e-sunk:#111213;































  --e-blue:#3358ff;--e-gpu:#ffc93c;--e-st:#e8801f;--e-bw:#ff2d9b;































  display:flex;flex-direction:column;gap:13px;min-width:0;































  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}































.earn-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:120px}































.ecard{background:var(--e-card);border:1px solid var(--e-line);border-radius:12px;































  padding:15px 17px;color:var(--e-fg);min-width:0}































.ecard.blue{background:var(--e-blue);border-color:var(--e-blue)}































.ec-k{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}































.ec-v{font-size:25px;font-weight:700;margin-top:7px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}































.ec-n{font-size:11px;color:var(--e-mut);margin-top:3px}































.ecard.blue .ec-n{color:rgba(255,255,255,.78)}































































.earn-box{background:var(--e-card);border:1px solid var(--e-line);border-radius:12px;































  padding:16px 18px 18px;color:var(--e-fg);min-width:0}































.earn-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}































.earn-head h3{font-size:16px;font-weight:600}































.earn-ctl{display:flex;flex-wrap:wrap;gap:7px}































.pillbox{border:1px solid var(--e-line);border-radius:8px;padding:6px 11px;































  font-size:12px;color:var(--e-fg);background:var(--e-sunk);white-space:nowrap}































.earn-legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}































.ec-lg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--e-line);































  border-radius:999px;padding:5px 12px;font-size:12px;color:var(--e-mut);white-space:nowrap}































.ec-lg b{color:var(--e-fg);font-weight:700}































.ec-lg i{width:9px;height:9px;border-radius:999px;display:inline-block;flex:none}































.ec-lg.total{background:var(--e-sunk)}































.d-gpu{background:var(--e-gpu)}































.d-st{background:var(--e-st)}































.d-bw{background:var(--e-bw)}































































.ec-chart{display:grid;grid-template-columns:44px minmax(0,1fr);gap:9px;margin-top:16px}































.ec-y{display:flex;flex-direction:column;justify-content:space-between;height:270px;































  align-self:start;font-size:11px;color:var(--e-mut);text-align:right;































  font-variant-numeric:tabular-nums}































.ec-y span{line-height:1;transform:translateY(-4px)}































.ec-plot{position:relative;min-width:0}































.ec-grid{position:absolute;left:0;right:0;top:0;height:270px;display:flex;































  flex-direction:column;justify-content:space-between;pointer-events:none}































.ec-grid span{display:block;border-top:1px solid #242424}































.ec-bars{position:relative;height:270px;display:flex;align-items:flex-end;gap:2px}































.ec-bar{flex:1;min-width:0;height:100%;display:flex;flex-direction:column-reverse;































  justify-content:flex-start;border-radius:2px 2px 0 0;overflow:hidden}































.ec-bar span{display:block;width:100%}































.s-gpu{background:var(--e-gpu)}































.s-st{background:var(--e-st)}































.s-bw{background:var(--e-bw)}































.ec-x{display:flex;gap:2px;margin-top:7px;height:14px}































.ec-x span{flex:1;min-width:0;position:relative}































.ec-x b{position:absolute;left:50%;top:0;transform:translateX(-50%);































  font-size:10.5px;font-weight:400;color:var(--e-mut);white-space:nowrap}































































.etbl-wrap{overflow-x:auto}































.etbl{width:100%;border-collapse:collapse;font-size:13px}































.etbl th{background:#232323;color:var(--e-mut);font-weight:600;text-align:left;































  padding:9px 12px;font-size:11.5px;white-space:nowrap}































.etbl th:first-child{border-radius:7px 0 0 7px}































.etbl th:last-child{border-radius:0 7px 7px 0}































.etbl td{padding:10px 12px;border-bottom:1px solid #232323;white-space:nowrap;































  font-variant-numeric:tabular-nums}































.etbl tbody tr:last-child td{border-bottom:0}































.etbl .mch{font-weight:600}































.etbl .amt{font-weight:700}































.etbl .ta-r{text-align:right}































.etbl tfoot td{border-top:1px solid var(--e-line);border-bottom:0;































  font-weight:600;padding-top:12px;color:var(--e-fg)}































.earn-note{margin:12px 0 0;font-size:11.5px;color:var(--e-mut);line-height:1.5}































































@media(max-width:560px){































  .earn-cards{grid-template-columns:1fr}































  .ec-chart{grid-template-columns:36px minmax(0,1fr)}































}































































/* правая колонка тянется до низа левой — иначе под ней зияет пустота */































/* та же подача, что у карточки перехода справа — синий по тёмному */































.fleet-how{margin-top:14px;padding:17px 20px 19px;border-radius:12px;































  background:linear-gradient(160deg,#1f2a5c,#171a2c);border:1px solid #33407a;































  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}































.fleet-how h3{font-size:15px;font-weight:600;margin-bottom:11px;color:#fff}































.fleet-how ul{margin:0;padding-left:19px;display:grid;































  grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 30px}































.fleet-how li{font-size:13px;line-height:1.5;color:#c2c8e8}































.fleet-how li::marker{color:#7f8ed0}































.fleet-how li b{color:#fff;font-weight:600}































@media(max-width:760px){.fleet-how ul{grid-template-columns:1fr}}































.earn-box.cta{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:16px;































  background:linear-gradient(160deg,#1f2a5c,#171a2c);border-color:#33407a;text-decoration:none}































.earn-box.cta:hover{border-color:#5468c4}































.cta-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9fb0ff}































.earn-box.cta h3{font-size:19px;font-weight:600;margin:8px 0 7px;line-height:1.25}































.earn-box.cta p{margin:0;font-size:13px;line-height:1.5;color:#c2c8e8}































.cta-go{align-self:flex-start;background:#3358ff;color:#fff;font-size:13px;font-weight:600;































  border-radius:9px;padding:9px 16px}































































/* знак и свечение под виджетом парка — как у платных карточек */































.fw-glow,.fw-lock{position:absolute;left:50%;pointer-events:none;opacity:0;































  transition:opacity .34s ease,transform .46s cubic-bezier(.2,.85,.25,1)}































.fw-glow{bottom:-44px;width:330px;height:225px;z-index:0;































  transform:translateX(-50%) translateY(12px) scale(.92);filter:blur(16px);































  background:radial-gradient(48% 40% at 50% 87%,































      rgba(255,212,116,.58) 0%, rgba(255,201,84,.47) 14%, rgba(255,188,60,.355) 27%,































      rgba(255,177,50,.25) 39%, rgba(252,167,54,.175) 50%, rgba(232,159,68,.115) 61%,































      rgba(198,151,98,.07) 71%, rgba(158,144,140,.032) 80%, rgba(118,136,190,.015) 88%,































      rgba(88,126,240,.006) 94%, rgba(74,123,255,0) 100%)}































.fw-lock{bottom:-36px;z-index:1;transform:translateX(-50%) translateY(16px) scale(.86)}































.fleetw:hover .fw-glow,.fleetw:focus-visible .fw-glow{opacity:1;































  transform:translateX(-50%) scale(1)}































.fleetw:hover .fw-lock,.fleetw:focus-visible .fw-lock{opacity:1;































  transform:translateX(-50%) scale(.94)}































/* знаку нужно место под виджетом, иначе он ляжет на сетку статей */































.cat-top{padding-bottom:54px}































@media(prefers-reduced-motion:reduce){































  .fw-glow,.fw-lock{transition:opacity .2s ease}































  .fleetw:hover .fw-glow{transform:translateX(-50%)}































  .fleetw:hover .fw-lock{transform:translateX(-50%) scale(.86)}































}































.fleet-plain{margin:0 0 14px;font-size:16.5px;line-height:1.55;color:var(--fg);































  max-width:88ch;font-weight:500}































/* FLEET-CSS-END */































































/* PAID-CSS-START */































/* ============================================================































   Зона платных гайдов на /articles. Намеренно тёмно-синяя врезка































   в обеих темах сайта — она должна читаться как отдельная витрина,































   а не как продолжение сетки бесплатных статей.































   ============================================================ */































.paid-zone{margin-top:32px;padding:26px 26px 54px;border-radius:18px;































  background:radial-gradient(120% 120% at 50% 0%,#17213f 0%,#0e1327 52%,#0a0d18 100%);































  border:1px solid #26305a}































.paid-zone[hidden]{display:none}































































.pz-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;































  gap:22px;margin-bottom:22px}































.pz-intro{min-width:0;flex:1 1 380px}































.pz-head .eyebrow{color:#8296ff}































.pz-head h3{font-size:24px;font-weight:600;color:#fff;margin:9px 0 7px;letter-spacing:-.015em}































.pz-head p{margin:0;color:#a6aed2;font-size:14.5px;line-height:1.55;max-width:62ch}































































.pz-bundle{display:flex;flex-direction:column;background:#101731;border:1px solid #2b3768;































  border-radius:14px;padding:14px 18px 15px;min-width:236px}































.pz-bundle:hover{border-color:#4a5fae;transform:translateY(-2px)}































.pzb-k{font-size:10.5px;letter-spacing:.13em;color:#8296ff}































.pzb-t{font-size:14px;font-weight:600;color:#fff;margin-top:5px}































.pzb-p{display:flex;align-items:baseline;gap:9px;margin-top:6px}































.pzb-p s{color:#6b76a8;font-size:13px}































.pzb-p b{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em}































.pzb-s{font-size:11.5px;color:#6fce93;margin-top:3px}































































.pz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}































@media(max-width:1180px){.pz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}































@media(max-width:620px){.pz-grid{grid-template-columns:1fr}}































































.pcard{position:relative;display:flex;flex-direction:column;background:#121732;































  border:1px solid #262f57;border-radius:14px;padding:20px 19px 19px;min-width:0;cursor:pointer;































  transition:border-color .18s ease,box-shadow .2s ease,background .2s ease,































             transform .2s cubic-bezier(.2,.7,.2,1)}































.pcard.owned{border-color:#2c5a44}































.pc-flag{position:absolute;top:-11px;right:15px;background:#3358ff;color:#fff;































  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;































  padding:5px 11px;border-radius:999px;white-space:nowrap}































.pc-flag.own{background:#2f7d4f}































.pc-cat{font-family:'Source Code Pro',monospace;font-size:11.5px;letter-spacing:.07em;































  text-transform:uppercase;color:#8390c4}































.pcard h4{font-size:17px;font-weight:600;color:#fff;margin:10px 0 8px;line-height:1.3;































  text-wrap:balance}































.pc-exc{margin:0;color:#a6aed2;font-size:13.5px;line-height:1.5}































.pc-price{margin:17px 0 15px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}































.pc-price b{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.025em;































  font-variant-numeric:tabular-nums}































.pc-price b.ok{font-size:19px;color:#6fce93}































.pc-price span{font-size:12.5px;color:#8390c4}































.pc-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}































.pc-list li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#c1c7e4;line-height:1.4}































.pc-list i{color:#6fce93;flex:none;display:flex;margin-top:1px}































.pc-btn{display:block;text-align:center;background:#3358ff;color:#fff;font-weight:600;































  font-size:14px;border-radius:10px;padding:11px 14px}































.pc-btn:hover{background:#4a6bff}































































/* Вся карточка кликабельна и ведёт туда же, куда «Что внутри».































   Кнопка покупки лежит выше растяжки, поэтому перехватывает свои клики. */































/* position на самой ссылке ставить нельзя: тогда inset:0 отсчитывался бы































   от неё самой, а не от карточки, и накрывал бы только нижнюю строку.































   z-index работает и без position — это флекс-элементы .pcard. */































.pc-more{z-index:1}































.pc-more::after{content:"";position:absolute;inset:0;border-radius:14px}































.pc-btn{z-index:2}































































/* При наведении, нажатии и приходе фокуса карточка подсвечивается:































   рамка синеет, а низ уходит в тёплый тон под кучку монет. */































.pcard:hover,































.pcard:focus-within,































.pcard:active{border-color:#4a7bff;border-bottom-color:rgba(255,196,104,.42);































  background:linear-gradient(180deg,#16204a,#141634 58%,#241d33 82%,#2e2331);































  transform:translateY(-3px);































  box-shadow:0 20px 55px -28px rgba(74,123,255,.85),































             0 40px 70px -30px rgba(255,178,52,.55)}































.pcard.owned:hover,































.pcard.owned:focus-within,































.pcard.owned:active{border-color:#3f8f68;background:linear-gradient(180deg,#143024,#0f1a26);































  box-shadow:0 20px 55px -28px rgba(63,143,104,.85)}































@media(prefers-reduced-motion:reduce){.pcard{transition:none}































  .pcard:hover,.pcard:focus-within,.pcard:active{transform:none}}































.pcard.owned .pc-btn{background:#22503c}































.pcard.owned .pc-btn:hover{background:#2c6a4e}































.pc-more{display:block;text-align:center;margin-top:10px;font-size:12.5px;color:#8390c4}































.pc-more:hover{color:#c1c7e4}































































/* ============================================================































   Кучка золота под платной карточкой. Рисунок векторный, свой —































   поэтому у него нет прямоугольных краёв и он тянется под любой































   размер. Верх кучки съеден маской: монеты будто выкатываются































   из-под карточки, а не лежат отдельной картинкой.































   ============================================================ */































.pc-glow,.pc-lock{position:absolute;left:50%;pointer-events:none;opacity:0;































  transition:opacity .34s ease,transform .46s cubic-bezier(.2,.85,.25,1)}































































/* тёплый ореол: в центре золото, к краям уходит в синеву карточки */































.pc-glow{bottom:-46px;width:340px;height:230px;































  transform:translateX(-50%) translateY(12px) scale(.92);































  background:radial-gradient(48% 40% at 50% 87%,































      rgba(255,212,116,.58) 0%,































      rgba(255,201,84,.47) 14%,































      rgba(255,188,60,.355) 27%,































      rgba(255,177,50,.25) 39%,































      rgba(252,167,54,.175) 50%,































      rgba(232,159,68,.115) 61%,































      rgba(198,151,98,.07) 71%,































      rgba(158,144,140,.032) 80%,































      rgba(118,136,190,.015) 88%,































      rgba(88,126,240,.006) 94%,































      rgba(74,123,255,0) 100%);































  filter:blur(16px)}































































.pc-lock{bottom:-38px;transform:translateX(-50%) translateY(16px) scale(.92)}































































/* тёплый подмес внутри самой карточки — стык золота и синевы без шва */































.pcard:hover .pc-glow,.pcard:focus-within .pc-glow,.pcard:active .pc-glow,































.pcard:hover .pc-lock,.pcard:focus-within .pc-lock,.pcard:active .pc-lock{































  opacity:1;transform:translateX(-50%) translateY(0) scale(1)}































































@media(prefers-reduced-motion:reduce){































  .pc-glow,.pc-lock{transition:opacity .2s ease}































  .pcard:hover .pc-glow,.pcard:hover .pc-lock{transform:translateX(-50%)}































}































@media(max-width:620px){































  .paid-zone{padding-bottom:46px}































  .pc-lock{bottom:-32px;scale:.86}































  .pc-glow{width:200px;height:114px;bottom:-40px}































}































































/* у фильтров каталога наведения не было — добавляем, чтобы кликабельное































   везде отзывалось одинаково */































.pill:not(.on):hover{border-color:var(--fg);color:var(--fg)}































































/* ============================================================































   Промо-плашка в пустой ячейке сетки бесплатных статей.































   Кучка золота здесь видна всегда и подрастает при наведении —































   в отличие от платных карточек, где она выкатывается по ховеру.































   ============================================================ */































.gcard{position:relative;display:flex;flex-direction:column;overflow:hidden;































  border-radius:15px;padding:22px;min-height:238px;































  background:radial-gradient(105% 92% at 76% 112%,#5a3f08 0%,#2a1f14 44%,#15161c 76%);































  border:1px solid #4a3a16;color:#f4efe2;































  transition:border-color .18s ease,box-shadow .2s ease,transform .2s cubic-bezier(.2,.7,.2,1)}































.gcard:hover,.gcard:focus-visible{border-color:#8a6b22;box-shadow:0 20px 50px -28px rgba(255,178,52,.6);transform:translateY(-3px)}































.gc-body{position:relative;z-index:2;flex:1}































.gc-eyebrow{font-family:'Source Code Pro',monospace;font-size:12px;letter-spacing:.09em;































  text-transform:uppercase;color:#e0b467}































.gcard h3{font-size:18.5px;font-weight:600;margin:12px 0 8px;line-height:1.3;color:#fff;































  text-wrap:balance}































.gcard p{margin:0;font-size:14px;line-height:1.5;color:#cfc3aa;max-width:32ch}































.gc-go{position:relative;z-index:2;margin-top:18px;font-size:13.5px;font-weight:600;































  color:#ffcf7a;max-width:58%}































.gcard:hover .gc-go{color:#ffe0a6}































.gc-glow{position:absolute;right:-70px;bottom:-90px;width:380px;height:250px;z-index:0;































  pointer-events:none;filter:blur(18px);































  background:radial-gradient(40% 32% at 50% 74%,































      rgba(255,208,104,.46) 0%,































      rgba(255,196,74,.36) 15%,































      rgba(255,183,52,.27) 28%,































      rgba(255,172,46,.19) 40%,































      rgba(248,162,50,.13) 51%,































      rgba(226,152,62,.085) 62%,































      rgba(192,142,84,.05) 72%,































      rgba(150,130,110,.026) 82%,































      rgba(110,116,130,.01) 91%,































      rgba(90,100,140,0) 100%);































  transition:opacity .3s ease,transform .42s cubic-bezier(.2,.85,.25,1)}































.gc-lock{position:absolute;right:18px;bottom:14px;z-index:1;pointer-events:none;































  transform:scale(.82);transform-origin:100% 100%;































  transition:transform .42s cubic-bezier(.2,.85,.25,1)}































.gcard:hover .gc-lock,.gcard:focus-visible .gc-lock{transform:scale(.9) translateY(-3px)}































.gcard:hover .gc-glow{transform:scale(1.07)}































@media(prefers-reduced-motion:reduce){































  .gcard,.gc-lock,.gc-glow{transition:none}































  .gcard:hover .gc-lock{transform:scale(.82)}































}































































/* ============================================================































   Фирменный знак золотом: тиснёная плашка со «стрелкой» плюс































   название. Появляется из-под платной карточки вместе со свечением.































   ============================================================ */































.fxlock{display:flex;align-items:center;gap:12px;white-space:nowrap;































  filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(255,183,60,.42))}































.fxlock-m{width:46px;height:46px;flex:none;display:block}































.fxlock-n{font-family:'Golos Text',system-ui,sans-serif;font-size:33px;font-weight:700;































  letter-spacing:-.02em;line-height:1;































  background:linear-gradient(150deg,#fff6d8 0%,#f7cf5d 24%,#dfa529 46%,#b09a6a 66%,#7d8bc8 84%,#4a7bff 100%);































  -webkit-background-clip:text;background-clip:text;color:transparent;































  -webkit-text-fill-color:transparent}































@media(max-width:620px){.fxlock-m{width:38px;height:38px}.fxlock-n{font-size:27px}}































































/* оставшиеся без наведения: логотип, переключатель языка и поле поиска */































.logo:hover .name{opacity:.82}































.logo:hover .mark{transform:translateY(-1px)}































.langsw a:not(.on):hover{background:var(--surface2);color:var(--fg)}































.search-row input:hover{border-color:var(--line2)}































/* PAID-CSS-END */































































/* HOME-CSS-START */































/* ============================================================































   Правки главной по итогам разбора: живая панель в героя,































   полоса-доказательство и блок автора.































   ============================================================ */































































/* панель героя стала ссылкой на парк */































.rig-card.is-live{display:block;text-decoration:none;color:inherit;position:relative;































  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease}































.rig-card.is-live:hover{transform:translateY(-3px);box-shadow:0 26px 60px -30px rgba(0,0,0,.55)}































.rig-more{display:block;margin-top:16px;font-size:13px;font-weight:600;color:var(--acc);































  opacity:.85}































.rig-card.is-live:hover .rig-more{opacity:1}































/* метка машины была шириной 50 px, а «1x 3080 Ti» требует 66 —































   текст налезал на полосу загрузки */































.rig-row .g{white-space:nowrap;min-width:68px;flex:none}































































/* полоса-доказательство */































.proof{padding:8px 0}































.proof-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,460px);gap:36px;































  align-items:center;background:var(--surface);border:1px solid var(--line);































  border-radius:20px;padding:32px 34px}































.proof-copy .eyebrow{margin-bottom:10px}































.proof-copy h2{font-size:27px;font-weight:600;letter-spacing:-.015em;margin:0 0 10px;































  text-wrap:balance}































.proof-copy p{margin:0 0 20px;color:var(--muted);font-size:15px;max-width:56ch}































.proof-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}































.proof-nums .pn{background:var(--surface2);border:1px solid var(--line);border-radius:13px;































  padding:13px 15px;min-width:0}































/* пятая плитка занимает строку целиком, чтобы не оставалась сиротой */































.proof-nums .pn.wide{grid-column:1 / -1}































.proof-nums .k{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;































  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}































.proof-nums .v{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;































  margin-top:4px;font-variant-numeric:tabular-nums}































































/* кто это пишет */































.who{padding:8px 0}































.who-in{display:flex;gap:22px;align-items:flex-start;background:var(--surface);































  border:1px solid var(--line);border-radius:20px;padding:28px 30px}































.who-ava{flex:none;width:62px;height:62px;border-radius:999px;background:var(--ink);































  color:var(--ink-fg);display:flex;align-items:center;justify-content:center;































  font-size:26px;font-weight:600;font-family:'Source Code Pro',monospace}































.who-copy{min-width:0}































.who-lead{margin:8px 0 8px;font-size:19px;font-weight:600;letter-spacing:-.01em}































.who-copy p{margin:0 0 12px;color:var(--muted);font-size:15px;max-width:70ch}































































/* плашка cookie: узкая полоса во всю ширину, не поверх кнопок */































.cookie{left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:0;































  border-left:0;border-right:0;border-bottom:0;padding:12px 24px;































  justify-content:center;box-shadow:0 -8px 24px -18px rgba(0,0,0,.5)}































.cookie p{flex:0 1 auto;text-align:left}































































@media(max-width:960px){































  .proof-in{grid-template-columns:1fr;gap:26px;padding:26px}































}































@media(max-width:620px){































  .who-in{flex-direction:column;gap:16px;padding:24px}































  .proof-nums{grid-template-columns:1fr}































  .cookie{flex-direction:column;align-items:stretch;padding:14px 18px}































}































































/* ============================================================































   Правки под телефон, найденные обходом на 375 px.































   ============================================================ */































@media(max-width:560px){































  /* Три цифры под героем стояли в ряд по 117 px и не помещались:































     на английском третья ячейка «30 days support» уезжала за экран,































     а .stats клипует overflow, так что она просто пропадала. */































  .stats{grid-template-columns:1fr}































  .stats .cell{padding:18px 20px}































  .stats .v{font-size:26px}































}































































@media(max-width:430px){































  /* Правая группа шапки занимала 267 px при доступных 327:































     переключатель языка, тема, «Войти» и бургер не влезали,































     а в английской версии «Sign in» ломался на три строки. */































  .hdr{gap:10px}































  .hdr-right{gap:7px}































  .langsw a{padding:7px 8px}































  .hdr .btn.sm{padding:9px 11px;white-space:nowrap}































  .iconbtn{width:34px;height:34px}































  /* заголовок героя стал длиннее и занимал шесть строк */































  .hero h1{font-size:31px}































}































/* акцент заголовка героя: золото->синь градиентом (перелив логотипа), залит в текст */
.hero h1 .hl-blue,h1 .hl-blue{
  background:linear-gradient(100deg,#f7cf5d 0%,#e0a72a 30%,#8a8fca 64%,#3358ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#3358ff;
  white-space:nowrap;
}
[data-theme="light"] .hero h1 .hl-blue,[data-theme="light"] h1 .hl-blue{
  background:linear-gradient(100deg,#d99f26 0%,#c8912a 26%,#5a6fc0 60%,#2a49e6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#2a49e6;
}
/* иллюстрации в статьях (figure + подпись) */
.fig{margin:22px 0}
.fig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid rgba(128,128,128,.25)}
.fig figcaption{margin-top:8px;font-size:13px;color:var(--muted,#8a8f98);text-align:center}
/* HOME-CSS-END */































































































































/* пересчёт ставки под полем калькулятора */































.calc-conv{margin-top:5px;font-variant-numeric:tabular-nums}































.calc-conv:empty{display:none}































































/* Печать платных статей. ⛔Это не защита контента — сохранить страницу всё равно































   можно из исходника или DevTools. Задача скромнее: убрать «распечатал в PDF и































   переслал» как бытовой сценарий и обозначить, что материал платный. */































.print-guard{display:none}































@media print{































  body.paid-article .reader .prose,































  body.paid-article .reader .chapters,































  body.paid-article .reader .full-chapters,































  body.paid-article .reader-wrap .prose,































  body.paid-article header,































  body.paid-article footer,































  body.paid-article .cookie{display:none!important}































  body.paid-article .print-guard{































    display:block!important;padding:60px 0;text-align:center;































    font-family:inherit;color:#111































  }































  body.paid-article .print-guard h2{font-size:22px;margin:0 0 10px}































  body.paid-article .print-guard p{font-size:14px;margin:0 0 6px;color:#444}































}































































.paid-guard-toast{































  position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);































  max-width:min(520px,92vw);padding:12px 16px;border-radius:12px;































  background:var(--surface);border:1px solid var(--line);color:var(--fg);































  font-size:14px;line-height:1.35;text-align:center;































  box-shadow:0 10px 30px rgba(0,0,0,.18);































  opacity:0;pointer-events:none;z-index:200;































  transition:opacity .18s,transform .18s































}































.paid-guard-toast.on{opacity:1;transform:translate(-50%,0)}































































/* Поле промокода переводит ввод в верхний регистр — но подсказка «если есть»































   не должна кричать капсом. */































.inp[data-upper]{text-transform:uppercase}































.inp[data-upper]::placeholder{text-transform:none}































































/* LOGO-CSS-START */















/* Знак Flux: золото с диагональным переливом в синь (вариант C, 27.08.2026).















   Плашка рисуется вектором из base.html, поэтому прежний квадрат-фон















   var(--ink) гасим. Блок стоит ПОСЛЕДНИМ в файле намеренно: так он перебивает















   .logo .mark из базовой части без повышения специфичности.















   sync.py переписывает блоки FLEET/PAID/HOME целиком — этот блок не из их















   числа и синхронизацию переживёт. */















.logo .mark{width:24px;height:24px;background:none;border-radius:0;















  display:block;flex:none;overflow:visible}















.logo .mark svg{width:24px;height:24px;display:block}































/* Знаков два, и это не дубль. Верхний угол плашки начинается со сливок















   #fff4cd — на тёмной шапке это 14,5:1, а на светлой всего 1,15:1, угол















   растворяется в фоне. Через CSS-переменную не лечится: стопы градиента















   резолвят var() от своего места в defs, а не от места использования, и















   правка задела бы знак на платных карточках, где фон тёмный ВСЕГДА.















   Поэтому два символа и переключение показом. */















.logo .mark .mk-l{display:none}















[data-theme="light"] .logo .mark .mk-d{display:none}















[data-theme="light"] .logo .mark .mk-l{display:block}































.logo .name{















  background:linear-gradient(150deg,















    #fff6d8 0%, #f7cf5d 24%, #dfa529 46%,















    #b09a6a 66%, #7d8bc8 84%, #4a7bff 100%);















  -webkit-background-clip:text;background-clip:text;















  color:transparent;-webkit-text-fill-color:transparent;















}















/* у слова та же беда со светлым фоном — начинаем сразу с золота */















[data-theme="light"] .logo .name{















  background:linear-gradient(150deg,















    #dfa92c 0%, #cf9a22 30%, #a98d54 58%,















    #6d7cbb 82%, #3358d8 100%);















  -webkit-background-clip:text;background-clip:text;















}































/* --- знак под платной карточкой и сетка -----------------------------------















   Знак .pc-lock свисает под карточку на 51 px (на узких экранах 41 px), а















   .pz-grid задавала gap:16px сразу и по колонкам, и по рядам. Из-за этого знак















   падал на карточку следующего ряда: на 1440 px перекрытие 35 px (карточка 0















   роняла знак на карточку 4, потому что пять карточек в четыре колонки дают















   ряды 4+1), на узком экране — по 25 px у каждой карточки из пяти.















   Разводим ТОЛЬКО ряды: колоночный зазор остаётся 16 px. */















.pz-grid{row-gap:64px}















@media(max-width:620px){.pz-grid{row-gap:54px}}















/* страховка: z-index у .pc-lock не помогает, потому что соседняя карточка —















   отдельный элемент того же уровня и рисуется по порядку в документе.















   Поднимаем саму наведённую карточку вместе со знаком. */















.pcard:hover,.pcard:focus-within,.pcard:active{z-index:3}























/* --- карточки услуг в оформлении платной зоны -------------- SVC-SKIN ---







   Просьба была: «оформи как Разборы под ключ, размеры оставь прежние».







   Поэтому здесь НЕТ ни одного padding, font-size, border-radius и gap —







   меняются только цвета, рамка, наведение и добавляется знак.















   Карточка становится тёмной в ОБЕИХ темах, как .pcard. Значит всё, что







   внутри неё раньше брало цвет из токенов (--fg, --muted, --ink), надо







   задать явно: иначе на светлой теме получим тёмный текст на тёмном фоне.







   Ровно этот класс ошибки ловится тем, что цвет объявлен только внутри







   media или [data-theme]. */







.svc{background:#121732;border-color:#262f57;







  transition:border-color .18s ease,box-shadow .2s ease,background .2s ease,







             transform .2s cubic-bezier(.2,.7,.2,1)}







.svc.popular{border-color:#3358ff;box-shadow:0 0 0 1px #3358ff}







.svc .poptag{background:#3358ff;color:#fff}















/* текст: явные цвета вместо токенов */







.svc h3{color:#fff}







.svc .price{color:#fff}







.svc .price.free,







html[data-theme="dark"] .svc .price.free{color:#6fce93}







.svc .desc{color:#a6aed2}







.svc li{color:#c1c7e4}







.svc li svg{color:#6fce93}















/* кнопки: на тёмной карточке var(--ink) даёт тёмное на тёмном */







.svc .btn{background:#3358ff;color:#fff;border-color:transparent}







.svc .btn:hover{background:#4a6bff}







/* Средняя карточка размечена как .btn.ghost, но кнопка у неё должна быть







   синей, как у соседей: своих правил для .ghost здесь намеренно НЕТ.







   Базовое .btn.ghost (var(--surface)/var(--fg)) перебивается тем, что







   .svc .btn стоит ниже по файлу при равной специфичности (0,2,0). */















/* наведение — тот же жест, что у платной карточки: синяя рамка,







   тёплый низ, подъём и двойная тень */







.svc:hover,.svc:focus-within{







  border-color:#4a7bff;border-bottom-color:rgba(255,196,104,.42);







  background:linear-gradient(180deg,#16204a,#141634 58%,#241d33 82%,#2e2331);







  transform:translateY(-3px);z-index:3;







  box-shadow:0 20px 55px -28px rgba(74,123,255,.85),







             0 40px 70px -30px rgba(255,178,52,.55)}







.svc.popular:hover,.svc.popular:focus-within{







  box-shadow:0 0 0 1px #4a7bff,







             0 20px 55px -28px rgba(74,123,255,.85),







             0 40px 70px -30px rgba(255,178,52,.55)}







@media(prefers-reduced-motion:reduce){







  .svc{transition:none}







  .svc:hover,.svc:focus-within{transform:none}}















/* знак и ореол выкатываются так же, как под платной карточкой */







.svc:hover .pc-glow,.svc:focus-within .pc-glow,.svc:active .pc-glow,







.svc:hover .pc-lock,.svc:focus-within .pc-lock,.svc:active .pc-lock{







  opacity:1;transform:translateX(-50%) translateY(0) scale(1)}















/* Под карточками услуг ровно 56 px до следующей секции, а знак свисает на







   51 px — на десктопе влезает, размеры менять не нужно. Но до 900 px сетка







   становится одноколоночной с зазором 18 px, и знак упал бы на соседнюю







   карточку (та же беда, что была в платной зоне). Размеры трогать нельзя,







   поэтому там знак просто не показываем: мягкий ореол остаётся, жест







   наведения сохраняется. */







@media(max-width:900px){







  .svc .pc-lock{display:none}}







/* --- SVC-SKIN END --- */











/* --- монумент на первом экране ------------------------ MONUMENT-START ---



   Ракурс «снизу героический», толщина плиты 0.30. Кадр отрендерен один раз



   в WebP: живой канвас на 673 полигона ради фоновой картинки — лишний груз,



   а WebP весит 44 КБ против 528 КБ у PNG (мелкое зерно материала убивает



   сжатие PNG, WebP с ним справляется).







   z-index:-1 обязателен и не заменяется нулём: у элемента с position:fixed



   любое неотрицательное значение поднимает его НАД обычным потоком, и он



   лёг бы поверх текста. Отрицательный кладёт его выше фона страницы, но



   ниже всего содержимого. Работает потому, что main и все section на сайте



   прозрачные — проверено перед правкой; подвал непрозрачный, и монумент



   за ним честно скрывается.







   Левый край гасится маской: колонка контента шириной 1200 px не оставляет



   в правом поле места под объект в 1/6 экрана, и он неизбежно заходит под



   текст. По z-порядку текст сверху и читается, но чтобы под ним не было



   яркого золота, та часть объекта растворяется. */



.monument{



  position:fixed;



  z-index:-1;



  pointer-events:none;



  top:92px;                      /* ниже липкой шапки в 67 px, с воздухом */



  right:2.5vw;                   /* отступ от края, чтобы не липнул к углу */



  width:16.667vw;                /* 1/6 видимой ширины экрана */



  aspect-ratio:620/768;



  background:url("/static/img/monument.webp?v=2") no-repeat center/contain;



  opacity:.85;



  /* Мягкий сход только у самой кромки, которая уходит под текст. Прежняя



     маска гасила почти половину объекта и он выглядел как в тумане —



     теперь основная часть в полную силу, растворяется лишь край. */



  -webkit-mask-image:linear-gradient(to left,#000 68%,transparent 100%);



          mask-image:linear-gradient(to left,#000 68%,transparent 100%);



}



/* На тёмной теме золото на тёмном фоне даёт светлое пятно, и светлый текст



   поверх него теряет контраст сильнее, чем тёмный текст на светлой теме.



   Поэтому здесь тише, а не громче. */



html[data-theme="dark"] .monument{opacity:.62}







/* Ниже 1100 px колонка контента занимает всю ширину: свободного угла нет,



   и объект оказался бы под текстом целиком. Убираем. */



@media(max-width:1100px){ .monument{display:none} }







/* Экран короткий — объект упёрся бы в подвал. */



@media(max-height:560px){ .monument{display:none} }







@media(prefers-reduced-motion:reduce){ .monument{opacity:.6} }



/* --- MONUMENT-END --- */

/* --- ШКАЛЫ ЗАГРУЗКИ ЗЕЛЁНЫМ ------------------------------------------

   Заливка шкалы брала var(--ink) — это «чернила» темы, то есть почти белый

   на тёмной и почти чёрный на светлой. Загрузка — показатель хороший, и

   читаться должен как хороший.

   Карточка парка стоит на var(--surface) и меняется вместе с темой, поэтому

   зелёных два: тёмный держит контраст на белом фоне, светлый — на тёмном.

   Оба уже живут на сайте: этим же цветом набраны «Бесплатно» и галочки. */

.rig-row .bar i{background:#2f7d4f}

html[data-theme="dark"] .rig-row .bar i{background:#6fce93}

/* --- ШКАЛЫ ЗАГРУЗКИ КОНЕЦ --- */
/* --- ПАНЕЛЬ «ПОСЧИТАЙТЕ ОКУПАЕМОСТЬ»: ВЫЛЕТ ЗА КРАЙ НА МОБИЛЬНОМ ------
   Раскладка была задана ИНЛАЙНОМ в index.html:
   style="display:grid;grid-template-columns:1.3fr 1fr;gap:28px".
   Колонка fr по умолчанию не может стать уже своего содержимого — её
   минимум равен auto, то есть min-content. На экране 375 px две колонки
   требовали 154.8 + 28 + 148.8 = 331.7 px, а внутри панели после отступов
   остаётся 279. Разница вылезала за правый край на 6 px и давала
   горизонтальную прокрутку ВСЕЙ страницы.
   Инлайн-стиль не перебить медиазапросом, поэтому он вынесен в класс.
   minmax(0,…) снимает запрет на сжатие, а ниже 760 px панель складывается
   в одну колонку: две по 130 px всё равно не читаются. */
.panel-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:28px;align-items:center}
@media(max-width:760px){
  .panel-split{grid-template-columns:minmax(0,1fr);gap:22px}
}
/* --- ПАНЕЛЬ КОНЕЦ --- */






/* LOGO-CSS-END */

/* ASM-CSS-START */
/* Блок «сборка сервера»: sticky-сцена, прокрутка листает видео по кадрам.
   Сцена всегда тёмная в обеих темах — видео снято на чёрном фоне, светлая
   подложка вокруг него смотрелась бы рамкой. Поэтому цвета здесь заданы
   явно, а не через переменные темы. */

.asm{ padding-bottom:0 }

.asm-scroller{
  position:relative;
  height:720vh;                 /* длина прокрутки под 24,6 с видео и 6 подписей */
  margin-top:28px;
}
.asm-stage{
  position:sticky; top:0;
  height:100vh; min-height:420px;
  overflow:hidden;
  background:#050506;
  display:grid; place-items:center;
}
.asm-stage::after{              /* виньетка: прижимает края и держит подписи читаемыми */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 38%,rgba(5,5,6,.82) 100%);
}
.asm-video{
  width:100%; height:100%;
  object-fit:cover; display:block;
  background:#050506;
}

/* Холст для сенсорных: показывается вместо видео в режиме секвенции кадров */
.asm-canvas{ display:none }
.asm.is-frames .asm-video{ display:none }
.asm.is-frames .asm-canvas{ display:block }

/* Полоска загрузки кадров */
.asm-load{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  height:2px; background:rgba(255,255,255,.08);
  transition:opacity .5s;
}
.asm-load i{ display:block; height:100%; width:0; background:#4ade80; transition:width .25s }
.asm-load.is-done{ opacity:0 }

/* ---- подписи глав ---- */
.asm-caption{
  position:absolute; z-index:3;
  left:clamp(74px,8.5vw,124px); bottom:clamp(56px,10vh,110px);
  /* ширину задаём явно: дети абсолютные, иначе контейнер схлопнется в ноль */
  width:min(430px,78vw); min-height:196px;
  color:#f2f3f5;
}
.asm-chapter{
  position:absolute; left:0; right:0; bottom:0;
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.asm-chapter.is-active{ opacity:1; transform:none }
.asm-tag{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#4ade80; margin-bottom:12px;
}
.asm-chapter h3{
  font-size:clamp(24px,3.2vw,40px); line-height:1.08;
  letter-spacing:-.025em; font-weight:700; margin:0 0 12px;
  color:#f2f3f5;
}
.asm-chapter p{
  font-size:clamp(14px,1.1vw,16px); line-height:1.55;
  color:#9aa0a8; margin:0;
}

/* ---- рельс прогресса: слева по центру, точки кликабельны ----
   По столбику едет капля: в движении вытягивается по ходу и сужается,
   на остановке собирается в шар. Пройденные точки подсвечиваются. */
.asm-rail{
  position:absolute; z-index:6;
  left:clamp(18px,3.2vw,50px); top:50%; transform:translateY(-50%);
  width:26px; height:246px;
}
/* сама точка мелкая, зона нажатия крупная — иначе в неё не попасть */
.asm-hit{
  position:absolute; left:50%; width:34px; height:34px;
  margin-left:-17px; margin-top:-17px;
  display:grid; place-items:center;
  background:none; border:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.asm-dot{
  width:6px; height:6px; border-radius:50%;
  background:#2a2d32; transition:background .35s, transform .25s;
}
.asm-dot.passed{ background:#3f6b52 }
.asm-hit:focus-visible{ outline:2px solid #4ade80; outline-offset:5px; border-radius:50% }
.asm-lbl{
  position:absolute; left:30px; white-space:nowrap;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#f2f3f5;
  background:rgba(8,9,11,.88); padding:5px 9px; border-radius:6px;
  opacity:0; transform:translateX(-6px);
  transition:opacity .2s, transform .2s; pointer-events:none;
}
/* подписи только там, где есть курсор: на тач-экранах наведения нет */
@media (hover:hover){
  .asm-hit:hover .asm-dot{ transform:scale(1.7); background:#535a63 }
  .asm-hit:hover .asm-lbl,
  .asm-hit:focus-visible .asm-lbl{ opacity:1; transform:none }
}
.asm-drop{
  position:absolute; left:50%; top:0; width:14px; height:14px;
  margin-left:-7px; margin-top:-7px;
  background:#4ade80; border-radius:50%;
  box-shadow:0 0 16px rgba(74,222,128,.5);
  will-change:transform, border-radius; pointer-events:none;
}

/* ---- подсказка ---- */
.asm-hint{
  position:absolute; z-index:3; bottom:20px; left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:#8b8f96; transition:opacity .4s;
}
.asm-hint svg{ animation:asmBob 1.8s ease-in-out infinite }
@keyframes asmBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ---- мобильные ----
   На телефоне 16:9 видео при object-fit:cover обрезалось почти до середины
   платы — видно было мало, а подпись уезжала за нижний край. Поэтому здесь
   другая раскладка: видео целиком (contain) полосой сверху, текст под ним.
   Высота сцены в svh: обычные 100vh на мобильных меняются при скрытии
   адресной строки и sticky-сцена дёргается. */
@media (max-width:820px){
  .asm-scroller{ height:560vh }
  .asm-stage{
    height:100vh; height:100svh;
    display:flex; flex-direction:column;
    align-items:stretch; justify-content:center;
    gap:18px; padding:0 18px 40px 54px;
  }
  .asm-stage::after{ display:none }   /* виньетка не нужна: текст не поверх видео */
  /* Кадр 4:3 вместо 16:9: с 16:9 полоса выходила всего ~190 px высотой и
     терялась на экране. Обрезаем по 12% с боков — плата стоит по центру
     и целиком остаётся в кадре, зато картинка заметно крупнее. */
  .asm-video,
  .asm-canvas{
    position:static; flex:0 0 auto;
    width:100%; height:auto;
    aspect-ratio:4/3; object-fit:cover;
    border-radius:12px;
  }
  /* relative обязателен: главы внутри абсолютные, без него они привязались
     бы к sticky-сцене и уехали под шапку. */
  .asm-caption{
    position:relative; flex:0 0 auto;
    width:auto; min-height:172px;
    left:auto; bottom:auto;
  }
  .asm-chapter{ position:absolute; left:0; right:0; top:0; bottom:auto }
  .asm-chapter h3{ font-size:26px }
  .asm-chapter p{ font-size:15px }
  /* Рельс держим ВЕРТИКАЛЬНЫМ. Горизонтальный ряд точек внизу читался
     как пагинация карусели, и люди пытались смахивать вбок вместо
     прокрутки вниз. */
  /* Рельс и на телефоне слева по центру — единообразно с десктопом.
     Сцене даём левый отступ, чтобы рельс жил в своей полосе и не лез
     на видео и текст. */
  .asm-rail{ left:9px; height:210px }
  .asm-lbl{ display:none }
  /* Подсказку на мобильных показываем и держим дольше: она называет
     направление прокрутки. Ставим её в поток сразу под текстом, а не
     прижимаем к низу экрана — внизу её перекрывает баннер про cookie
     ровно у тех, кто на сайте впервые и кому она нужнее всего. */
  .asm-hint{
    position:static; display:flex;
    left:auto; bottom:auto; transform:none;
    justify-content:flex-start;
    flex:0 0 auto; font-size:12px;
  }
}

/* ---- «уменьшить движение»: статичный кадр, без скраба ---- */
@media (prefers-reduced-motion:reduce){
  .asm-chapter{ transition:none }
  .asm-hint svg{ animation:none }
}
.asm-scroller.asm-static{ height:auto }
.asm-scroller.asm-static .asm-stage{ position:relative; height:min(72vh,620px) }
.asm-scroller.asm-static .asm-hint{ display:none }
/* ASM-CSS-END */

/* clickable, highlighted links inside article prose (a16 review 06.09) */
.reader .prose a{color:var(--rlink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px;font-weight:600;border-radius:3px;padding:0 1px;transition:color .15s ease,background .15s ease}
.reader .prose a:hover{color:var(--rlink-h);background:color-mix(in srgb,var(--rlink) 12%,transparent)}
.reader .prose a:focus-visible{outline:2px solid var(--rlink);outline-offset:2px}

/* Лицензионная подпись под статьёй */
.reader .lic{margin:34px 0 4px;padding:13px 16px;border:1px solid rgba(128,128,128,.28);border-radius:10px;font-size:13px;line-height:1.6;color:var(--muted)}
.reader .lic a{color:inherit;text-decoration:underline}
.reader .lic-terms{margin-top:3px}