/* Публичный сайт brovpn.online: лендинг, статьи, бренд.
   Все величины — из tokens.css (docs/DESIGN_SYSTEM.md). Ритм как в хабе «Дизайн-система»:
   между разделами --sp-12 (48), заголовок раздела → контент --sp-4…6. */
@import url("tokens.css");
@import url("components.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{margin:0;color:var(--text);font-family:var(--font-mono);font-size:var(--fs-m);line-height:var(--lh-ui);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
img,svg{max-width:100%}
.prompt{color:var(--violet)}.dim{color:var(--muted)}.ok{color:var(--ok)}.v{color:var(--violet)}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--sp-5)}
.svic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}

/* ---------- логотип: знак + «BRO» «VPN» без пробела ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:var(--fw-bold);font-size:var(--fs-l);letter-spacing:-.01em}
.logo .wm span{color:var(--violet)}

/* ---------- шапка ---------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(11,7,17,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:var(--sp-6);height:60px}
.nav .links{margin-left:auto;display:flex;gap:var(--sp-5);color:var(--muted)}
.nav .links a:hover,.nav .links a.on{color:var(--violet)}
@media(max-width:820px){.nav .links{display:none}.nav .btn{margin-left:auto}}

/* ---------- кнопки: одна высота --ctl ---------- */
.btn{font:var(--fw-semibold) var(--fs-m) var(--font-mono);height:var(--ctl);padding:0 18px;border-radius:var(--r-md);
  border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.14s}
.btn:hover{border-color:var(--violet);color:var(--violet)}
.btn.primary{background:var(--violet-solid);border-color:var(--violet-solid);color:var(--bg);box-shadow:0 0 22px var(--glow)}
.btn.primary:hover{filter:brightness(1.08);color:var(--bg)}

/* ---------- разделы ---------- */
section{padding:var(--sp-12) 0 0}
.eyebrow{font-size:var(--fs-s);letter-spacing:.08em;color:var(--violet);margin:0 0 var(--sp-2)}
h1,h2,h3{line-height:var(--lh-tight);margin:0}
h2{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.01em;text-wrap:balance}
.sub{color:var(--muted);max-width:68ch;margin:var(--sp-2) 0 0}
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-s);padding:3px 9px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.v{color:var(--violet);border-color:color-mix(in srgb,var(--violet) 45%,var(--line))}
.reveal{opacity:0;transform:translateY(12px);transition:.45s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- подвал ---------- */
footer.site{border-top:1px solid var(--line);margin-top:var(--sp-12);padding:var(--sp-8) 0 var(--sp-12);color:var(--muted);font-size:var(--fs-s)}
.fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--sp-6)}
@media(max-width:720px){.fcols{grid-template-columns:1fr 1fr}}
.fcols .col{display:grid;gap:var(--sp-2);align-content:start}
.fcols b{color:var(--text);font-weight:var(--fw-semibold)}
.fcols a:hover{color:var(--violet)}
.fnote{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px dashed var(--line);line-height:1.7}

@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes tin{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =====================================================================
   Лендинг
   ===================================================================== */
.hero{padding:var(--sp-12) 0 0;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center;position:relative}
.hero::before{content:"";position:absolute;inset:-20% -30% 10% 20%;z-index:-1;
  background:radial-gradient(50% 50% at 70% 30%,rgba(139,92,246,.16),transparent 70%)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:var(--sp-6)}}
.hero h1{font-size:var(--fs-display);font-weight:var(--fw-bold);letter-spacing:-.02em;line-height:1.05;
  white-space:pre-wrap;text-shadow:0 0 26px var(--glow);min-height:2.1em;margin-top:var(--sp-2)}
.cur{display:inline-block;width:.6ch;height:1em;transform:translateY(.12em);background:var(--violet);
  box-shadow:0 0 10px var(--glow);animation:blink 1.05s steps(1) infinite}
.lede{color:var(--muted);font-size:var(--fs-l);line-height:var(--lh-read);margin:var(--sp-4) 0 0;max-width:52ch}
.hero-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.trust{margin-top:var(--sp-4);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.trust .chip svg{width:14px;height:14px;color:var(--ok)}

/* окно терминала справа — живой список локаций и протоколов */
.term{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:0 30px 70px rgba(0,0,0,.5)}
.bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.2)}
.bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.bar i:nth-child(1){background:var(--err)}.bar i:nth-child(2){background:var(--warn)}.bar i:nth-child(3){background:var(--ok)}
.bar .p{margin-left:8px;color:var(--muted);font-size:var(--fs-s)}
.term .in{padding:var(--sp-5);font-size:var(--fs-s);display:grid;gap:var(--sp-2)}
.term .ln{opacity:0;transform:translateX(-6px);animation:tin .3s ease forwards}
.term .loc{display:grid;grid-template-columns:1fr auto auto;gap:var(--sp-3);align-items:center;
  padding:9px 12px;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--bg-2)}
.term .loc b{font-weight:var(--fw-semibold);color:var(--text);font-size:var(--fs-m)}
.term .loc .st{color:var(--ok)}
.term .loc.auto{border-color:color-mix(in srgb,var(--violet) 50%,var(--line))}
.term .protos{display:flex;flex-wrap:wrap;gap:6px}

/* протоколы */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
@media(max-width:820px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pgrid{grid-template-columns:1fr}}
.pc{padding:var(--sp-4);display:grid;gap:4px}
.pc .hd{display:flex;align-items:center;gap:var(--sp-2)}
.pc b{font-size:var(--fs-m)}
.pc p{margin:0;color:var(--muted);font-size:var(--fs-s)}
.pc .chip{margin-left:auto}

.switch{margin-top:var(--sp-3);padding:var(--sp-4) var(--sp-5);display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap}
.switch .svic{width:22px;height:22px;color:var(--violet)}
.switch p{margin:0;color:var(--muted);flex:1;min-width:240px}
.switch b{color:var(--text)}

/* локации */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3);margin-top:var(--sp-6)}
.lc{padding:var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.lc .cc{width:36px;height:36px;border-radius:var(--r-md);background:var(--violet-deep);color:var(--violet);
  display:grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-s);flex:none}
.lc b{display:block}.lc span{color:var(--muted);font-size:var(--fs-s)}
.lc.soon{border-style:dashed;background:transparent}
.lc.soon .cc{background:transparent;border:1px dashed var(--line);color:var(--muted)}

/* шаги */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
@media(max-width:820px){.steps3{grid-template-columns:1fr}}
.step{padding:var(--sp-5);display:flex;gap:var(--sp-4);align-items:flex-start}
.step .n{width:32px;height:32px;border-radius:var(--r-md);background:var(--violet-deep);color:var(--violet);
  display:grid;place-items:center;font-weight:var(--fw-bold);flex:none}
.step h3{font-size:var(--fs-m);margin-bottom:4px}.step p{margin:0;color:var(--muted);font-size:var(--fs-s)}

/* возможности: иконка слева, текст справа */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
@media(max-width:820px){.feats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.feats{grid-template-columns:1fr}}
.feat{padding:var(--sp-4);display:flex;gap:var(--sp-3);align-items:flex-start}
.feat .ic{width:40px;height:40px;border-radius:var(--r-md);background:var(--violet-deep);color:var(--violet);
  display:grid;place-items:center;flex:none}
.feat .ic .svic{width:20px;height:20px}
.feat h3{font-size:var(--fs-m);margin-bottom:4px}.feat p{margin:0;color:var(--muted);font-size:var(--fs-s)}

/* тарифы */
.tiers{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-6);align-items:center}
.tiers .lbl{color:var(--muted);font-size:var(--fs-s);margin-right:var(--sp-2)}
.tiers button.on{border-color:var(--violet-solid);color:var(--violet);background:var(--violet-deep)}
.prices[hidden]{display:none}
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
@media(max-width:820px){.prices{grid-template-columns:1fr 1fr}}
.price{padding:var(--sp-5) var(--sp-4);text-align:center;position:relative;display:flex;flex-direction:column}
.price.pop{border-color:var(--violet-solid);box-shadow:0 0 26px var(--glow)}
.price .badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:var(--fs-s);
  background:var(--violet-solid);color:var(--bg);padding:1px 10px;border-radius:var(--r-sm);font-weight:var(--fw-bold);white-space:nowrap}
.price .t{color:var(--muted)}
.price .big{font-size:var(--fs-2xl);font-weight:var(--fw-bold);margin:var(--sp-2) 0 2px}
.price .per{font-size:var(--fs-s);color:var(--muted)}
.price .btn{margin-top:var(--sp-4)}
.paynote{margin-top:var(--sp-3);padding:var(--sp-4) var(--sp-5);display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.paynote .svic{width:20px;height:20px;color:var(--violet)}
.paynote p{margin:0;color:var(--muted);flex:1;min-width:240px}
.paynote b{color:var(--text)}

/* статьи — карточки */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
@media(max-width:820px){.agrid{grid-template-columns:1fr}}
.ac{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);transition:.14s}
.ac:hover{border-color:color-mix(in srgb,var(--violet) 55%,var(--line))}
.ac b{font-size:var(--fs-m);line-height:var(--lh-tight)}
.ac p{margin:0;color:var(--muted);font-size:var(--fs-s);flex:1}
.ac .meta{display:flex;gap:var(--sp-2);align-items:center;color:var(--muted);font-size:var(--fs-s)}
.more{margin-top:var(--sp-4)}

/* вопросы */
.faq{margin-top:var(--sp-6);display:grid;gap:var(--sp-2)}
.qa{overflow:hidden}
.qa summary{padding:14px var(--sp-4);cursor:pointer;font-weight:var(--fw-semibold);list-style:none;display:flex;gap:10px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"+";color:var(--violet);font-weight:var(--fw-bold)}
.qa[open] summary::before{content:"–"}
.qa .a{padding:0 var(--sp-4) var(--sp-4) 38px;color:var(--muted);line-height:var(--lh-read)}
.qa .a a{color:var(--violet)}

.final{margin-top:var(--sp-12);padding:var(--sp-8) var(--sp-6);text-align:center;
  background:radial-gradient(80% 120% at 50% 0%,rgba(139,92,246,.18),transparent 60%),var(--panel)}
.final p{color:var(--muted);max-width:52ch;margin:var(--sp-2) auto var(--sp-5)}

/* =====================================================================
   Статьи
   ===================================================================== */
.crumbs{padding-top:var(--sp-8);font-size:var(--fs-s);color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.crumbs a:hover{color:var(--violet)}
.ahead{padding-top:var(--sp-4);max-width:760px}
.ahead h1{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.01em;text-wrap:balance}
.ahead .meta{margin-top:var(--sp-3);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.alayout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--sp-8);margin-top:var(--sp-6);align-items:start}
@media(max-width:900px){.alayout{grid-template-columns:1fr}.aside{display:none}}
.aside{position:sticky;top:84px;padding:var(--sp-4);font-size:var(--fs-s)}
.aside b{display:block;margin-bottom:var(--sp-2)}
.aside a{display:block;color:var(--muted);padding:3px 0}
.aside a:hover{color:var(--violet)}

.prose{max-width:720px;font-size:var(--fs-m);line-height:var(--lh-read);color:#C9C1DE}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:var(--fs-xl);color:var(--text);margin:var(--sp-8) 0 var(--sp-3);scroll-margin-top:80px}
.prose h2::before{content:"// ";color:var(--violet)}
.prose h3{font-size:var(--fs-l);color:var(--text);margin:var(--sp-6) 0 var(--sp-2)}
.prose p{margin:0 0 var(--sp-4)}
.prose ul,.prose ol{margin:0 0 var(--sp-4);padding-left:22px;display:grid;gap:6px}
.prose li::marker{color:var(--violet)}
.prose b,.prose strong{color:var(--text)}
.prose a{color:var(--violet);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose code{font-size:.92em;color:var(--violet);background:var(--violet-deep);padding:1px 6px;border-radius:var(--r-sm);word-break:break-word}
.prose pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
  overflow-x:auto;font-size:var(--fs-s);margin:0 0 var(--sp-4)}
.prose pre code{background:none;padding:0;color:var(--text)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-s);margin:0 0 var(--sp-4);display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--panel);color:var(--muted);font-weight:var(--fw-semibold)}
.prose td:first-child{color:var(--text);white-space:nowrap}
.prose .note{margin:0 0 var(--sp-4)}
.tldr{padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-6)}
.tldr b:first-child{color:var(--violet)}
.related{margin-top:var(--sp-8)}

/* ---------- стилизованные «скриншоты»: схемы экранов приложений ---------- */
.figrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4);margin:0 0 var(--sp-6)}
figure.shot{margin:0;display:grid;gap:var(--sp-2);justify-items:center}
figure.shot figcaption{font-size:var(--fs-s);color:var(--muted);text-align:center;max-width:260px}
figure.shot figcaption b{color:var(--violet)}
.phone{width:220px;border:1px solid var(--line);border-radius:28px;background:var(--bg);padding:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
.phone.wide{width:100%;max-width:340px;border-radius:var(--r-lg)}
.scr{border-radius:20px;background:linear-gradient(180deg,var(--panel-2),var(--panel));min-height:300px;
  padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-s);position:relative;overflow:hidden}
.phone.wide .scr{border-radius:var(--r-md);min-height:200px}
.scr .top{display:flex;align-items:center;justify-content:space-between;color:var(--text);font-weight:var(--fw-semibold);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--line-soft)}
.scr .top .x{color:var(--muted);font-weight:var(--fw-regular)}
.scr .row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:7px 9px;
  border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--bg-2);color:var(--muted)}
.scr .row b{color:var(--text);font-weight:var(--fw-semibold)}
.scr .menu{position:absolute;right:10px;top:40px;width:72%;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel-2);box-shadow:0 10px 30px rgba(0,0,0,.5);padding:4px;display:grid;gap:2px}
.scr .menu div{padding:7px 9px;border-radius:var(--r-sm);color:var(--muted)}
.scr .power{margin:var(--sp-5) auto var(--sp-3);width:96px;height:96px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;color:var(--muted)}
.scr .power .svic{width:34px;height:34px}
.scr .power.on{border-color:var(--ok);color:var(--ok);box-shadow:0 0 30px rgba(110,231,183,.25)}
.scr .cap{text-align:center;color:var(--muted)}
.scr .cap b{color:var(--ok)}
.scr .fld{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px;color:var(--muted);background:var(--bg-2);word-break:break-all}
.scr .sbtn{border-radius:var(--r-sm);padding:7px 9px;text-align:center;background:var(--violet-solid);color:var(--bg);font-weight:var(--fw-semibold)}
/* подсветка «нажми сюда» */
.hl{outline:2px solid var(--violet);outline-offset:2px;box-shadow:0 0 18px var(--glow);position:relative;color:var(--text)!important}
.hl[data-n]::after{content:attr(data-n);position:absolute;right:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--violet-solid);color:var(--bg);font-size:var(--fs-s);font-weight:var(--fw-bold);display:grid;place-items:center;line-height:1}

/* =====================================================================
   Бренд
   ===================================================================== */
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3);margin-top:var(--sp-6)}
.bcell{padding:var(--sp-6);display:grid;place-items:center;min-height:180px}
.bcell.light{background:#F2EEF9}.bcell.violet{background:var(--violet-solid);border-color:var(--violet-solid)}
.bcap{display:flex;justify-content:space-between;gap:var(--sp-2);align-items:center;margin-top:var(--sp-2);font-size:var(--fs-s);color:var(--muted)}
.bcap a{color:var(--violet)}
.sw{height:56px;border-radius:var(--r-md);border:1px solid var(--line)}
.swg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3);margin-top:var(--sp-6);font-size:var(--fs-s)}
.swg div span{display:block;color:var(--muted);margin-top:6px}