/*
  Сброс и базовые элементы. Всё, что относится к странице целиком:
  типографика, фокус, служебные классы. Компонентов здесь нет.

  Подключать после tokens.css.
*/

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink-1);color:var(--text);
  font:400 16px/24px var(--font);
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* Видимый фокус только с клавиатуры — мышью он мешает. */
:focus-visible{outline:2px solid var(--silver-2);outline-offset:3px;border-radius:var(--s4)}
:focus:not(:focus-visible){outline:none}

/* ---------- Типографика ---------- */
.overline{font:500 11px/12px var(--font);letter-spacing:.10em;text-transform:uppercase;
  color:var(--steel-2)}
.h1{font-weight:600;font-size:clamp(34px,6.2vw,64px);line-height:1.04;letter-spacing:-.04em}
.h2{font-weight:600;font-size:clamp(26px,3.6vw,40px);line-height:1.1;letter-spacing:-.03em}
.h3{font-weight:600;font-size:20px;line-height:26px;letter-spacing:-.02em}
.h4{font-weight:600;font-size:17px;line-height:23px;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.9vw,21px);line-height:1.5;color:var(--silver-1);letter-spacing:-.01em}
.body{font-size:16px;line-height:24px}
.callout{font-size:15px;line-height:22px;color:var(--silver-1);letter-spacing:0}
.caption{font-size:13px;line-height:18px;color:var(--silver-1);letter-spacing:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:19px;color:var(--steel-3);word-break:break-all}

.t-center{text-align:center}
.t-ok{color:var(--ok)}
.t-alert{color:var(--alert)}
.t-dim{color:var(--silver-1)}

/* ---------- Служебные ----------
   .hide помечен !important намеренно: это утилита, и любое правило
   с display, объявленное ниже, иначе её перебьёт. Так уже случалось —
   скрытые блоки показывались все разом. */
.hide{display:none!important}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Марка ---------- */
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:600;
  letter-spacing:-.02em;font-size:21px}
.brand svg{width:19px;height:23px;color:var(--silver-1);flex:none}
/* Фирменный щит из логотипа, вырезан по форме на прозрачный фон.
   Без плашки — сам щит, читается и на светлом, и на тёмном. */
.brand .mark{height:36px;width:auto;flex:none;display:block}
/* Обёртка нужна, чтобы flex-gap марки не разрывал «NormNet» и «VPN». */
.brand-name{white-space:nowrap}
.brand-name b{font-weight:600}
.brand-name .vpn{color:var(--silver-1);font-weight:600}
/* Контур и ребро щита — соседние <path>, не вложенные: селекторы вида
   «.shield .rib» с такой разметкой не совпадают ни с чем. */
.shield,.rib{stroke:currentColor;fill:none;stroke-width:2.4;stroke-linejoin:round}