/* ==========================================================================
   Гав VPN — базовый слой: сброс, типографика, общие детали, шапка и подвал,
   переключатель вариантов и панель твиков. Общий для /v1, /v2, /v3.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100svh;
  background: var(--ink);
  color: var(--paper);
  /* Слот текста целиком: гарнитура, толщина, ширина и межстрочный — четыре
     ручки панели. font-stretch у гарнитур без оси ширины просто игнорируется. */
  font-family: var(--f-text);
  font-size: var(--t-body);
  font-weight: var(--w-text);
  font-stretch: var(--wd-text);
  line-height: var(--lh-text);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:target { scroll-margin-top: 92px; }

::selection { background: var(--lime); color: #0a0a0a; }

/* Плейсхолдеры кассы — длинные неразрывные строки вида {{ОТВЕТ-ПРО-ТРАФИК}}:
   на 320 px они вылезали за край. Ломаем их где угодно. */
code, .ph { overflow-wrap: anywhere; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: var(--r1);
}

/* --- Сетка и контейнеры -------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1600px; }
.wrap--tight { max-width: 900px; }

.section { padding-block: var(--s10); position: relative; }
.section--flush { padding-block: 0; }
.stack > * + * { margin-top: var(--s5); }
.measure { max-width: var(--measure); }

/* --- Типографика --------------------------------------------------------- */

.mega,
.display {
  /* Слот заголовков: те же четыре ручки, что у текста, но свои значения. */
  font-family: var(--f-display);
  font-weight: var(--w-head);
  font-stretch: var(--wd-head);
  text-transform: uppercase;
  letter-spacing: var(--tr-mega);
  text-wrap: balance;
}
.mega { font-size: var(--t-mega); line-height: var(--lh-mega); }
.display { font-size: var(--t-d1); line-height: var(--lh-d); }
.display--sm { font-size: var(--t-d2); }

h1, h2, h3 { font-weight: 600; line-height: 1.2; text-wrap: balance; }
h3 { font-size: var(--t-h); }

.lead {
  font-size: clamp(1.0625rem, 4.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--paper-dim);
  max-width: var(--measure);
  text-wrap: pretty;
}
p { text-wrap: pretty; }
.muted { color: var(--paper-mute); }
.small { font-size: var(--t-sm); }

.label {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-mute);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.label--lime { color: var(--lime); }
.label--pink { color: var(--pink); }

.num {
  font-family: var(--f-display);
  font-weight: var(--w-head);
  font-stretch: var(--wd-head);
  font-size: var(--t-num);
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* Лаймовая заливка под словом — приём первого референса. */
.mark {
  background: var(--lime);
  color: #0a0a0a;
  padding: 0.04em 0.16em 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ink-pink { color: var(--pink); }
.ink-lime { color: var(--lime); }

/* --- Линии и печати ------------------------------------------------------ */

.hair { height: var(--bw); background: var(--line); border: 0; }
.hair--lime { background: color-mix(in oklab, var(--lime) 55%, transparent); }

.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: var(--bw-strong) solid var(--paper);
  font-family: var(--f-ui);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  background: var(--ink);
  rotate: -3deg;
}
.stamp--lime { background: var(--lime); color: #0a0a0a; border-color: #0a0a0a; }
.stamp--pink { background: var(--pink); color: #14060f; border-color: #14060f; }
.stamp--tilt-r { rotate: 2.5deg; }

/* --- Кнопки -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--lime);
  --btn-fg: #0a0a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 52px;
  padding: var(--s4) var(--s6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--pill);
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--d1) var(--e-out), background-color var(--d1) linear,
              box-shadow var(--d2) var(--e-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.btn:active { transform: translateY(0); background: var(--lime-deep); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border: var(--bw) solid var(--line-strong);
}
.btn--ghost:hover { --btn-fg: var(--lime); border-color: var(--lime); box-shadow: none; }
.btn--pink { --btn-bg: var(--pink); --btn-fg: #14060f; }
.btn--block { width: 100%; }
.btn--lg { min-height: 62px; padding-inline: var(--s7); font-size: 0.875rem; }

.btn .arrow { transition: transform var(--d2) var(--e-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* Текстовая ссылка с подчёркиванием, которое растёт от края. */
.link {
  position: relative;
  font-family: var(--f-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 2px;
}
.link::after {
  content: '';
  position: absolute; inset-inline: 0; bottom: 0;
  height: var(--bw); background: currentColor;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform var(--d2) var(--e-out);
}
/* Подчёркивание уходит вправо и возвращается слева — раньше переход был
   объявлен, но трансформ никто не менял, и линия стояла мёртвой. */
.link:hover, .link:focus-visible { color: var(--lime); }
.link:hover::after { animation: link-sweep var(--d3) var(--e-out); }

@keyframes link-sweep {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  51%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* --- Логотип ------------------------------------------------------------- */

.logo { display: inline-flex; align-items: center; gap: var(--s3); flex: none; }
.logo__paw { width: 30px; height: 30px; flex: none; color: var(--lime); }
/* Знак не переносится: на узкой шапке рядом с кнопкой «ГАВ VPN» рвался
   на две строки и переставал читаться как логотип. */
.logo__word {
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: var(--w-head);
  font-stretch: var(--wd-head);
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.logo__word i { font-style: normal; color: var(--lime); }

/* --- Шапка (ритм второго референса: тонкая полоса на всю ширину) --------- */

.site-head {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: var(--bw) solid var(--line);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 64px;
}
.site-nav { display: none; margin-inline: auto; gap: var(--s6); }
.site-nav a {
  font-family: var(--f-ui);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-dim);
  transition: color var(--d1) linear;
}
.site-nav a:hover { color: var(--lime); }
.site-head .btn { margin-left: auto; min-height: 42px; padding-inline: var(--s5); font-size: 0.75rem; }

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .site-head .btn { margin-left: 0; }
}

/* --- Подвал (тоже из второго референса: крупный блок + тонкая полоса) ---- */

.site-foot { border-top: var(--bw) solid var(--line); }
.site-foot__cta {
  display: grid; gap: var(--s7);
  padding-block: var(--s10);
}
.site-foot__cols {
  display: grid; gap: var(--s6);
  padding-block: var(--s8);
  border-top: var(--bw) solid var(--line);
}
.site-foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6);
  padding-block: var(--s5);
  border-top: var(--bw) solid var(--line);
  font-family: var(--f-ui);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.site-foot__bar a:hover { color: var(--lime); }
.site-foot__bar .spacer { margin-left: auto; }

@media (min-width: 760px) {
  .site-foot__cols { grid-template-columns: repeat(3, 1fr); }
}

/* --- Правовая сноска ----------------------------------------------------- */

.legal {
  font-size: var(--t-sm);
  color: var(--paper-mute);
  max-width: var(--measure);
}

/* --- Маскот -------------------------------------------------------------- */

.mascot { position: relative; }
.mascot img { width: 100%; height: auto; }
/* Тень рисует страница — у самих карточек её нет. */
.mascot::after {
  content: '';
  position: absolute; left: 50%; bottom: 1%;
  width: 62%; height: 4%;
  translate: -50% 0;
  background: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0 / 0.62), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}
.mascot--nofloor::after { display: none; }

/* --- Скролл-триггеры: общий механизм, характер задаёт вариант ------------ */

/* Стартовая непрозрачность не нулевая: на рывковой прокрутке в слабой сети
   экран не должен встречать пустотой. Плюс страховка таймером в shell.js. */
.reveal {
  opacity: 0.2;
  transition: opacity var(--d3) var(--e-out), transform var(--d3) var(--e-out),
              filter var(--d3) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal[data-reveal='up']    { transform: translateY(28px); }
/* Сдвиг ровно на поле страницы: с фиксированными 40 px непроявленный блок
   на 360 px торчал за экран на 21 px — прокрутки не было только из-за
   overflow-x: hidden, то есть дефект был спрятан, а не исправлен. */
.reveal[data-reveal='left']  { transform: translateX(calc(var(--gutter) * -1)); }
.reveal[data-reveal='right'] { transform: translateX(var(--gutter)); }
.reveal[data-reveal='scale'] { transform: scale(0.94); }
.reveal[data-reveal='blur']  { filter: blur(14px); transform: translateY(14px); }
.reveal[data-reveal='lamp']  { opacity: 0.12; filter: brightness(0.35); }

/* Раскрытие слева направо сделано маской, а не clip-path: обрезанный
   clip-path даёт нулевую площадь пересечения, и IntersectionObserver с
   порогом 0.08 не срабатывает никогда — элемент молча остаётся невидимым.
   Маска геометрию не трогает, наблюдатель считает элемент как обычно. */
.reveal[data-reveal='wipe'] {
  opacity: 1;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 0% 100% no-repeat;
  mask: linear-gradient(#000, #000) 0 0 / 0% 100% no-repeat;
  transition: -webkit-mask-size var(--d3) var(--e-out), mask-size var(--d3) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal[data-reveal='wipe'].is-in { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* Обрезки здесь больше нет: раскрытие слева направо делает маска, а
   clip-path: inset(0) срезал у вариантов вылеты SVG — отводы схемы висели
   не подключёнными к оси. Кому обрезка нужна, задаёт её у себя. */
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Пока скрипт не поднялся — контент виден. Никаких пустых экранов. */
.no-js .reveal { opacity: 1; transform: none; filter: none; clip-path: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* Твик «движение выключено» — страница остаётся полностью читаемой. */
.motion-off .reveal { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.motion-off [data-scrub] { --sp: 1; --sq: 1; }

/* --- Переключатель вариантов: закреплён в углу --------------------------- */

/* Запас снизу: закреплённый переключатель перекрывал по строке текста на
   каждом втором экране телефона — печать, адрес поддержки, низ карточки. */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* Панель и переключатель — инструмент, а не сайт: они всегда остаются на
   моноширинном, что бы владелец ни выбрал для страницы. */
.tweaks, .switcher { --f-ui: var(--f-mono); }

.switcher {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  transition: translate var(--d2) var(--e-out), opacity var(--d2) linear;
  z-index: var(--z-switch);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  backdrop-filter: blur(16px);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--pill);
  box-shadow: var(--sh-2);
}
/* Цель нажатия не меньше 44 px: пальцем по 34 px промахиваются. */
.switcher a, .switcher button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px;
  padding-inline: var(--s2);
  border-radius: var(--pill);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-dim);
  transition: background-color var(--d1) linear, color var(--d1) linear;
}
.switcher a:hover, .switcher button:hover { color: var(--paper); background: color-mix(in oklab, var(--paper) 10%, transparent); }
.switcher a[aria-current='page'] { background: var(--lime); color: #0a0a0a; }
.switcher__sep { width: var(--bw); height: 24px; background: var(--line-strong); margin-inline: 2px; }
/* Уезжает вниз, пока читают вниз, и возвращается при листании вверх. */
.switcher[data-away='true'] { translate: 0 calc(100% + 24px); opacity: 0; }

.switcher__gear { color: var(--lime); }

/* --- Панель твиков ------------------------------------------------------- */

.tweaks {
  position: fixed; inset: auto 0 0 0;
  z-index: var(--z-panel);
  max-height: min(78svh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s5) var(--s5) calc(var(--s8) + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--ink) 94%, transparent);
  backdrop-filter: blur(20px);
  border-top: var(--bw-strong) solid var(--lime);
  box-shadow: var(--sh-3);
  translate: 0 100%;
  visibility: hidden;
  transition: translate var(--d3) var(--e-out), visibility var(--d3);
}
/* Открытая панель поднимается НАД переключателем: иначе кнопки вариантов
   висят поверх её последней группы и закрывают текст. */
.tweaks[data-open='true'] { translate: 0 0; visibility: visible; z-index: calc(var(--z-switch) + 1); }
.tweaks__head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.tweaks__close {
  margin-left: auto; width: 36px; height: 36px;
  border: var(--bw) solid var(--line-strong); border-radius: var(--pill);
  display: inline-flex; align-items: center; justify-content: center;
}
.tweaks__group + .tweaks__group { margin-top: var(--s6); padding-top: var(--s5); border-top: var(--bw) solid var(--line); }
.tweaks__title { margin-bottom: var(--s3); }
.tweaks__row { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px; padding: var(--s2) var(--s4);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--pill);
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--paper-dim);
  transition: border-color var(--d1) linear, color var(--d1) linear;
}
.chip:hover { border-color: var(--paper); color: var(--paper); }
.chip[aria-pressed='true'] { border-color: var(--lime); color: var(--lime); }
.chip__dot { width: 14px; height: 14px; border-radius: var(--pill); border: var(--bw) solid var(--line-strong); }

.tweaks__slot {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s3);
  align-items: center; padding-block: var(--s2);
}
.tweaks__slot img { width: 44px; height: 44px; object-fit: contain; }
.tweaks__slot select {
  width: 100%; min-height: 42px; padding: var(--s2) var(--s3);
  background: var(--sink); color: var(--paper);
  border: var(--bw) solid var(--line-strong); border-radius: var(--r2);
  font-family: var(--f-mono); font-size: 0.75rem;
}
.tweaks__note { margin-top: var(--s4); }

/* --- Ползунки числовых ручек: толщина, ширина, межстрочный -------------- */

.tweaks__slider { margin-top: var(--s4); }
.tweaks__slider[data-off='true'] { opacity: 0.42; }
.tweaks__slider header {
  display: flex; align-items: baseline; gap: var(--s3);
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-mute);
}
.tweaks__slider b { margin-left: auto; color: var(--lime); font-weight: 500; }
.tweaks__slider input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 32px; margin: 0; background: none; cursor: pointer;
}
.tweaks__slider input[type='range']::-webkit-slider-runnable-track {
  height: 2px; background: var(--line-strong); border-radius: var(--pill);
}
.tweaks__slider input[type='range']::-moz-range-track {
  height: 2px; background: var(--line-strong); border-radius: var(--pill);
}
.tweaks__slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -10px; border-radius: var(--pill);
  background: var(--lime); border: 2px solid var(--ink);
}
.tweaks__slider input[type='range']::-moz-range-thumb {
  width: 22px; height: 22px; border: 2px solid var(--ink);
  border-radius: var(--pill); background: var(--lime);
}
.tweaks__slider input[type='range']:disabled::-webkit-slider-thumb { background: var(--paper-mute); }
.tweaks__slider input[type='range']:disabled::-moz-range-thumb { background: var(--paper-mute); }
.tweaks__sub {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: var(--bw) solid var(--line);
}

.tweaks__link {
  width: 100%;
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--sink);
  color: var(--paper-dim);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r2);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
}

@media (min-width: 720px) {
  .tweaks {
    inset: auto var(--s5) var(--s5) auto;
    width: 420px;
    border: var(--bw-strong) solid var(--lime);
    border-radius: var(--r2);
    translate: 0 calc(100% + var(--s6));
  }
}

/* --- Уважение к настройкам движения -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; clip-path: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}

/* --- Печать -------------------------------------------------------------- */

@media print {
  .switcher, .tweaks, .site-head { display: none; }
  body { background: #fff; color: #000; }
}