@import url("/fonts/fonts.css?v=2");

/* ===== DEAD VPN — токены «Пункт приёма»: сажа, эмаль, один сигнальный жёлтый ===== */
:root {
  --soot: #0C0C0B;         /* фон: сажа */
  --tar: #151514;          /* поверхности: гудрон */
  --tar-2: #1E1E1C;        /* приподнятые блоки */
  --rule: rgba(241, 241, 236, .12);
  --rule-2: rgba(241, 241, 236, .26);

  --bone: #F1F1EC;         /* эмаль: основной текст и таблички */
  --chalk: #C8C7C0;        /* светлый вторичный */
  --ash: #8E8D86;          /* пепел: подписи */
  --char: #4B4B47;         /* выгоревшее */

  --signal: #F2C21B;       /* сигнальный жёлтый — только точечно */
  --signal-lo: #8C6E05;
  --ink: #0C0C0B;          /* текст на эмали и на сигнале */

  --stencil: "DV Trafaret", "Oswald", "Arial Narrow", sans-serif;
  --sans: "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "PT Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r: 3px;                /* штампованная жесть: углы почти прямые */
  --ease: cubic-bezier(.2, .75, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* фактура: мелкий шум ксерокса и «съеденная» краска штампа */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --wear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 0 0 0 6.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");

  color-scheme: dark;

  /* ===== Ритм: единая шкала отступов (кратно 4) ===== */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* роли поверх шкалы — в CSS используем только их */
  --gutter: var(--s-4);        /* боковые поля контейнера / экрана */
  --section: var(--s-8);       /* вертикальный отступ секции лендинга */
  --head-gap: var(--s-6);      /* шапка секции → её контент */
  --col-gap: var(--s-6);       /* между крупными колонками (десктоп) */
  --block: var(--s-5);         /* блок → блок внутри экрана/героя */
  --group: var(--s-6);         /* перед новой группой с подписью (sec-title) */
  --eyebrow: var(--s-3);       /* машинописная метка → то, что она подписывает */
  --title-text: var(--s-4);    /* заголовок → основной текст */
  --para: var(--s-4);          /* абзац → абзац / мелкий текст */
  --text-action: var(--s-5);   /* текст → кнопки */
  --media: var(--s-4);         /* иконка/номер/аватар/знак → его текст */
  --stack: var(--s-2);         /* внутри карточки: метка → значение → описание */
  --item-text: var(--s-1);     /* две строки одного пункта (название / пояснение) */
  --gap: var(--s-3);           /* между карточками, плитками, бирками, кнопками в группе */
  --gap-tight: var(--s-2);     /* мелочь внутри одного элемента (поле+кнопка, флаги) */
  --links-gap: var(--s-5);     /* между ссылками в строке навигации */
  --pad-card: var(--s-4);      /* внутренний паддинг карточек, плиток, опций, плашек */
  --pad-plate: var(--s-5);     /* паддинг эмалированных табличек */
  --pad-table: var(--s-4);     /* паддинг листа акта и табло */
  --row-y: var(--s-4);         /* вертикальный паддинг строк компактных списков/таблиц */
  --row-y-lg: var(--s-5);      /* вертикальный паддинг строк крупных списков лендинга */

  /* межстрочные по типам текста */
  --lh-text: 1.5;              /* абзацы и вторичный текст */
  --lh-title: 1.25;            /* жирные заголовки пунктов (sans) */
  --lh-caption: 1.3;           /* машинопись: метки, шифры, подписи */
  --lh-display: .9;            /* трафарет: заголовки и крупные значения */
}
@media (min-width: 768px) { :root { --gutter: var(--s-6); } }
@media (min-width: 980px) {
  :root {
    --section: var(--s-9); --head-gap: var(--s-7); --col-gap: var(--s-8); --block: var(--s-6);
    --pad-plate: var(--s-6); --pad-table: var(--s-6); --row-y-lg: var(--s-6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--soot);
  color: var(--bone);
  font: 400 16px/var(--lh-text) var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
body::after { /* зерно поверх всего — едва заметно */
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none;
  background: var(--noise); opacity: .05;
}
img, svg { display: block; max-width: 100%; }
/* поля у текста — только явные, через роли (без браузерных 1em, без схлопывания) */
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
::selection { background: var(--signal); color: var(--ink); }

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

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: var(--s-3); top: var(--s-3); z-index: 400; padding: var(--s-3) var(--pad-card);
  background: var(--signal); color: var(--ink); font: 700 14px/1 var(--sans);
  transform: translateY(-160%); transition: transform .2s;
}
.skip:focus { transform: none; }

/* ===== Типографика ===== */
.label { /* машинописная маркировка: шифры, инвентарные номера, подписи */
  font: 400 11.5px/var(--lh-caption) var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ash);
}
.stencil {
  font-family: var(--stencil);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: .01em;
}
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ash); }

/* ===== Шильдик ===== */
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark__emblem { width: 30px; height: 30px; flex: none; }
.wordmark__text { font: 400 21px/1 var(--stencil); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; padding-top: 2px; }

/* ===== Кнопки: тугие клавиши пульта ===== */
.btn {
  --h: 52px;
  --lip: 3px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 22px;
  border-radius: var(--r);
  font: 700 15.5px/1 var(--sans);
  letter-spacing: .01em;
  white-space: nowrap;
  user-select: none; -webkit-user-select: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn > svg { flex: none; }
.btn:active { transform: translateY(2px); }
.btn[disabled] { opacity: .42; pointer-events: none; }

.btn--signal { background: var(--signal); color: var(--ink); box-shadow: 0 var(--lip) 0 0 var(--signal-lo); }
.btn--signal:active { box-shadow: 0 1px 0 0 var(--signal-lo); }
.btn--signal[disabled] { opacity: 1; background: var(--tar-2); color: var(--ash); box-shadow: inset 0 0 0 1.5px var(--rule-2); }
.btn--solid { background: var(--bone); color: var(--ink); box-shadow: 0 var(--lip) 0 0 #85847d; }
.btn--solid:active { box-shadow: 0 1px 0 0 #85847d; }
.btn--ghost { color: var(--bone); background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-2); }
.btn--block { display: flex; width: 100%; } /* блочная: без прыжков строки вокруг inline-flex */
.btn--sm { --h: 40px; --lip: 2px; padding: 0 16px; font-size: 14px; }

@media (hover: hover) {
  .btn--signal:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--lip) + 2px) 0 0 var(--signal-lo); }
  .btn--solid:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--lip) + 2px) 0 0 #85847d; }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--bone); }
  /* нажатие перебивает наведение: кромка сжимается, кнопка «продавливается» */
  .btn--signal:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--signal-lo); }
  .btn--solid:active { transform: translateY(2px); box-shadow: 0 1px 0 0 #85847d; }
}

/* ===== Эмалированная табличка с заклёпками ===== */
.plate {
  --rv: #a3a29b;
  position: relative;
  background-color: var(--bone);
  color: var(--ink);
  border-radius: 4px;
  background-image:
    radial-gradient(circle at 13px 13px, var(--rv) 0 2.6px, #6d6c66 2.8px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 13px) 13px, var(--rv) 0 2.6px, #6d6c66 2.8px 3.6px, transparent 4px),
    radial-gradient(circle at 13px calc(100% - 13px), var(--rv) 0 2.6px, #6d6c66 2.8px 3.6px, transparent 4px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), var(--rv) 0 2.6px, #6d6c66 2.8px 3.6px, transparent 4px);
  box-shadow: inset 0 0 0 5px var(--bone), inset 0 0 0 6.5px var(--ink);
}
.plate .label { color: #55544f; }

/* ===== Резиновый штамп ===== */
.stamp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 9px 4px;
  border: 2px solid currentColor; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px transparent;
  font: 400 13px/1 var(--stencil); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-3deg);
  -webkit-mask-image: var(--wear); mask-image: var(--wear);
  -webkit-mask-size: 160px 90px; mask-size: 160px 90px;
}

/* ===== Появление при скролле ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ===== Эмблема: цикл переработки ===== */
/* стрелки крутятся вокруг центроида треугольника (transform-origin задан в разметке), череп стоит */
.emblem { color: var(--char); transition: color .9s var(--ease) .15s; }
.emblem .dv-arrows { transform-box: view-box; }
.emblem.is-alive { color: var(--bone); }
.emblem.is-cycling .dv-arrows { animation: recycle 1.35s var(--ease-io) both; }
.emblem.is-spinning .dv-arrows { animation: recycle 1.6s var(--ease-io) infinite; }
@keyframes recycle { from { transform: rotate(0); } to { transform: rotate(-120deg); } } /* против часовой — по ходу стрелок */

/* ===== Тост ===== */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px); opacity: 0;
  background: var(--bone); color: var(--ink);
  padding: var(--s-3) var(--pad-card); border-radius: var(--r);
  font: 700 14px/var(--lh-title) var(--sans); z-index: 100; pointer-events: none;
  transition: opacity .25s, transform .35s var(--ease);
  max-width: calc(100vw - 2 * var(--gutter)); text-align: center;
  box-shadow: 0 12px 30px -10px #000;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto !important; }
}