/* Vaylori — витрина. Токены сняты с Figma-фрейма 3:2 «Главная — Desktop 1086».
   --u = один пиксель макета. Макет нарисован на холсте 1086 px с кеглем 7.5–10 px,
   поэтому на десктопе --u растёт с шириной окна (до 1.4 px), а у мелкого текста
   есть нижняя граница читаемости (--t75…--t95). */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2190-21FF, U+2212, U+2215, U+221E;
}

:root {
  --u: clamp(1.1px, calc(100vw / 1086), 1.4px);

  --bg: #010709;
  --card: #030b0d;
  --tile: #050e11;
  --stats: #020a0b;
  --line: rgba(33, 56, 61, 0.85);
  --line-tile: rgba(33, 56, 61, 0.72);
  --text: #f5f7fa;
  --muted: #9eabb0;
  --green: #0deb8c;
  --on-green: #001f14;
  --pink: #f50d6b;
  --pink-cta: #f20d69;
  --logo-text: #e8edf0;
  --logo-accent: #f61261;
  --placeholder-bg: rgba(255, 199, 15, 0.12);
  --placeholder-fg: #ffd65c;

  --t75: max(calc(7.5 * var(--u)), 10.5px);
  --t8: max(calc(8 * var(--u)), 11px);
  --t85: max(calc(8.5 * var(--u)), 11px);
  --t9: max(calc(9 * var(--u)), 11.5px);
  --t95: max(calc(9.5 * var(--u)), 12px);
  --t10: max(calc(10 * var(--u)), 12.5px);
  --t12: max(calc(12 * var(--u)), 14px);
  --t13: calc(13 * var(--u));
  --t16: calc(16 * var(--u));
  --t17: calc(17 * var(--u));
  --t18: calc(18 * var(--u));
  --t20: calc(20 * var(--u));
  --t36: calc(36 * var(--u));

  --r-card: calc(9 * var(--u));
  --r-tile: calc(7 * var(--u));
  --r-btn: calc(8 * var(--u));
  --r-btn-s: calc(6 * var(--u));

  color-scheme: dark;
}

@media (max-width: 1099px) {
  :root { --u: 1.25px; }
}

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

html { background: var(--bg); }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t9);
  line-height: normal;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 16px; top: -40px; z-index: 10;
  background: var(--green); color: var(--on-green);
  padding: 8px 12px; border-radius: 6px; font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* ---------- Плейсхолдеры и черновые пометки ---------- */
.placeholder {
  background: var(--placeholder-bg);
  color: var(--placeholder-fg);
  border-radius: 3px;
  padding: 0 0.25em;
  font-weight: 500;
  white-space: normal;
}
.draft-mark {
  display: inline-block;
  margin: 0 0.25em;
  padding: 0.1em 0.5em;
  border: 1px dashed var(--placeholder-fg);
  border-radius: 4px;
  color: var(--placeholder-fg);
  font-size: 0.85em;
  font-weight: 500;
  font-style: normal;
  vertical-align: 0.05em;
}

/* ---------- Декоративная сцена героя (3:2 → 31:3, 31:2, 52:2, 52:19) ---------- */
.stage {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(470 * var(--u));
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.stage__canvas {
  position: absolute;
  top: 0;
  left: calc(50% - 543 * var(--u));
  width: calc(1086 * var(--u));
  height: 100%;
}

/* ---------- Каркас ---------- */
.page {
  position: relative;
  z-index: 1;
  width: min(calc(964 * var(--u)), calc(100% - 32px));
  margin: 0 auto;
}

/* ---------- Шапка (Nav 3:20–3:26, Language 3:27, Download top 3:29, Logo 94:2) ---------- */
.site-header {
  display: grid;
  grid-template-columns: calc(300 * var(--u)) 1fr auto auto;
  align-items: center;
  height: calc(61 * var(--u));
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  height: calc(40 * var(--u));
  margin-left: calc(1 * var(--u));
}
.logo__mark {
  position: relative;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  overflow: hidden;
  flex: none;
}
.logo__mark img {
  position: absolute;
  left: 0; top: -0.35%;
  width: 100%; height: 100.7%;
  max-width: none;
}
.logo__name {
  color: var(--logo-text);
  font-size: calc(15.5 * var(--u));
  font-weight: 500;
  letter-spacing: calc(-0.15 * var(--u));
  white-space: nowrap;
}
.logo__name span { color: var(--logo-accent); }
.site-footer .logo { height: calc(38 * var(--u)); gap: calc(4.5 * var(--u)); margin-left: 0; }
.site-footer .logo__mark { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.site-footer .logo__name { font-size: calc(14.7 * var(--u)); }

.main-nav ul {
  display: flex;
  gap: calc(18 * var(--u));
}
.main-nav a {
  position: relative;
  display: block;
  font-size: var(--t10);
  padding: calc(4 * var(--u)) 0;
}
.main-nav a[aria-current="page"] { font-weight: 600; }
.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--u));
  bottom: calc(-14 * var(--u));
  width: calc(33 * var(--u));
  height: 2px;
  border-radius: 1px;
  background: var(--pink);
}
.main-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.lang {
  display: grid;
  place-items: center;
  width: calc(52 * var(--u));
  height: calc(31 * var(--u));
  margin-right: calc(13 * var(--u));
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--bg);
  font-size: var(--t13);
  font-weight: 600;
}

.btn {
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-btn);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  transition: filter 0.15s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn--pink { background: var(--pink); color: var(--text); }
.btn--green { background: var(--green); color: var(--on-green); }
.btn--ghost { background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.btn--download-top {
  width: calc(124 * var(--u));
  height: calc(29 * var(--u));
  background: var(--pink-cta);
  color: #fff;
  font-size: var(--t9);
}

/* ---------- Герой (Hero 1–3 3:31–3:33, Hero sub 3:34, Try free 3:35, Download app 3:37) ---------- */
.hero { padding-top: calc(43 * var(--u)); }
.hero h1 {
  font-size: var(--t36);
  font-weight: 600;
  line-height: calc(44 * var(--u));
}
.hero h1 span { display: block; white-space: nowrap; }
.hero h1 .c-green { color: var(--green); }
.hero h1 .c-pink { color: var(--pink); }
.hero__sub {
  width: calc(360 * var(--u));
  max-width: 100%;
  margin-top: calc(11 * var(--u));
  color: var(--muted);
  font-size: var(--t12);
  line-height: 1.25;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(15 * var(--u));
  margin-top: calc(19 * var(--u));
  margin-left: calc(1 * var(--u));
}
.btn--try { width: calc(180 * var(--u)); height: calc(41 * var(--u)); font-size: var(--t10); }
.btn--download { width: calc(165 * var(--u)); height: calc(43 * var(--u)); font-size: var(--t10); }

/* ---------- Статистика 3:61 ---------- */
.stats {
  display: grid;
  grid-template-columns: calc(121 * var(--u)) calc(125 * var(--u)) calc(129 * var(--u)) 1fr;
  align-items: center;
  width: calc(496 * var(--u));
  max-width: 100%;
  min-height: calc(69 * var(--u));
  margin-top: calc(21 * var(--u));
  padding-left: calc(9 * var(--u));
  background: var(--stats);
  border: 1px solid var(--line);
  border-radius: calc(10 * var(--u));
}
.stats li { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) 0; }
.stats img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; }
.stats b { display: block; margin-top: calc(2 * var(--u)); font-size: var(--t16); font-weight: 600; }
.stats span { display: block; margin-top: calc(5 * var(--u)); color: var(--muted); font-size: var(--t9); }

/* ---------- Сетка карточек ---------- */
.cards {
  display: grid;
  grid-template-columns: calc(478 * var(--u)) calc(478 * var(--u));
  justify-content: space-between;
  row-gap: calc(4 * var(--u));
  margin-top: calc(16 * var(--u));
}
.card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: calc(13 * var(--u)) calc(11 * var(--u)) calc(12 * var(--u));
}
.card__title {
  font-size: var(--t16);
  font-weight: 600;
  text-align: center;
  line-height: calc(27 * var(--u));
}
.card__sub {
  margin-top: calc(-3 * var(--u));
  color: var(--muted);
  font-size: var(--t8);
  text-align: center;
}
.card--wide { grid-column: 1 / -1; }

/* 3:78 Ваша конфиденциальность */
.card--privacy { min-height: calc(175 * var(--u)); padding: calc(15 * var(--u)) calc(17 * var(--u)); }
.card--privacy .card__title { text-align: left; line-height: normal; }
.privacy-list { position: relative; z-index: 1; margin-top: calc(18 * var(--u)); margin-left: calc(2 * var(--u)); }
.privacy-list li {
  display: flex;
  gap: calc(11 * var(--u));
  min-height: calc(31 * var(--u));
  width: calc(305 * var(--u));
  max-width: 100%;
  color: var(--muted);
  font-size: var(--t9);
}
.privacy-list img { width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: none; margin-top: calc(1 * var(--u)); }
.art-slot {
  position: absolute;
  inset: 0 0 auto auto;
  width: calc(478 * var(--u));
  height: 100%;
  pointer-events: none;
}

/* 3:92 Как это работает */
.card--how { min-height: calc(175 * var(--u)); padding-top: calc(15 * var(--u)); }
.card--how .card__title { font-size: var(--t17); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, calc(161 * var(--u)));
  margin-top: calc(13 * var(--u));
  padding-left: calc(-4.5 * var(--u));
  margin-left: calc(-4.5 * var(--u));
}
.steps li { position: relative; text-align: center; }
.step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  margin-left: calc(50% - 50 * var(--u));
  color: var(--pink);
  font-size: var(--t18);
  font-weight: 600;
}
.step__num img { position: absolute; inset: 0; width: 100%; height: 100%; }
.step__num span { position: relative; }
.steps h3 { margin-top: calc(14 * var(--u)); font-size: var(--t10); font-weight: 600; }
.steps p { margin: calc(8 * var(--u)) auto 0; width: calc(120 * var(--u)); max-width: 100%; color: var(--muted); font-size: var(--t8); }
.step__arrow {
  position: absolute;
  left: calc(77.5 * var(--u));
  top: calc(14 * var(--u));
  width: calc(92 * var(--u));
  height: calc(10 * var(--u));
}

/* 4:2 Серверы */
.card--servers { min-height: calc(212 * var(--u)); padding-left: calc(17 * var(--u)); }
.card--servers .card__title, .card--servers .card__sub { margin-left: calc(-6 * var(--u)); }
.servers-body { display: flex; justify-content: space-between; margin-top: calc(8 * var(--u)); }
.server-list li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(24 * var(--u));
  padding-left: calc(1 * var(--u));
  font-size: var(--t9);
}
.server-list img { width: calc(18 * var(--u)); height: calc(11 * var(--u)); }
.server-list__note { margin-top: calc(10 * var(--u)); width: calc(220 * var(--u)); color: var(--muted); font-size: var(--t8); }
.map-slot {
  position: relative;
  flex: none;
  width: calc(225 * var(--u));
  height: calc(118 * var(--u));
  margin-right: calc(-12 * var(--u));
  margin-top: calc(-9 * var(--u));
}
.map-slot > [data-node="64:4"] { left: 0 !important; top: 0 !important; }

/* 4:53 Возможности */
.card--features { min-height: calc(210 * var(--u)); }
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(9 * var(--u)) calc(12 * var(--u));
  margin-top: calc(13 * var(--u));
  margin-right: calc(-6 * var(--u));
}
.feature {
  display: flex;
  gap: calc(2 * var(--u));
  min-height: calc(56 * var(--u));
  padding: calc(7 * var(--u));
  background: var(--tile);
  border: 1px solid var(--line-tile);
  border-radius: var(--r-tile);
}
.feature img { width: calc(32 * var(--u)); height: calc(40 * var(--u)); flex: none; }
.feature h3 { font-size: var(--t9); font-weight: 600; }
.feature p { margin-top: calc(5 * var(--u)); color: var(--muted); font-size: var(--t75); }

/* 4:79 Free или Premium */
.card--plans { min-height: calc(230 * var(--u)); }
.plans-compare {
  display: grid;
  grid-template-columns: calc(190 * var(--u)) calc(232 * var(--u));
  gap: calc(16 * var(--u));
  margin-top: calc(8 * var(--u));
  margin-left: calc(4 * var(--u));
}
.plan-box {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(158 * var(--u));
  padding: calc(12 * var(--u)) calc(15 * var(--u)) calc(8 * var(--u));
  background: var(--tile);
  border-radius: var(--r-btn);
}
.plan-box--premium {
  padding: calc(10.5 * var(--u)) calc(13.5 * var(--u)) calc(8 * var(--u));
  border: 1.5px solid rgba(245, 13, 107, 0.85);
  box-shadow: 0 0 calc(10 * var(--u)) rgba(245, 13, 107, 0.23);
}
.plan-box h3 { font-size: var(--t12); font-weight: 600; }
.plan-box--premium h3 { color: var(--green); }
.plan-box ul { margin-top: calc(16 * var(--u)); flex: 1; }
.plan-box li {
  display: flex;
  align-items: flex-start;
  gap: calc(7 * var(--u));
  min-height: calc(22 * var(--u));
  color: var(--muted);
  font-size: var(--t85);
}
.plan-box li img { width: calc(9 * var(--u)); height: calc(9 * var(--u)); flex: none; margin-top: calc(2 * var(--u)); }
.plan-box li .check { width: calc(11 * var(--u)); flex: none; color: var(--green); font-size: calc(11 * var(--u)); font-weight: 600; line-height: 1; }
.plan-box .btn { height: calc(24 * var(--u)); font-size: var(--t9); border-radius: var(--r-btn-s); }
.plan-box--free .btn { width: calc(160 * var(--u)); max-width: 100%; }
.plan-box--premium .btn { width: 100%; height: calc(25 * var(--u)); }
.plan-box__crown { position: absolute; right: calc(21 * var(--u)); top: calc(7.5 * var(--u)); width: calc(42 * var(--u)); height: calc(38 * var(--u)); }

/* 4:107 Выберите Premium — тарифы */
.card--pricing { min-height: calc(230 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.period-toggle {
  position: relative;
  display: grid;
  grid-template-columns: calc(100 * var(--u)) calc(96 * var(--u)) 1fr;
  align-items: center;
  width: calc(232 * var(--u));
  height: calc(28 * var(--u));
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--bg);
}
.period-toggle button {
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: calc(7 * var(--u));
  color: var(--text);
  font: 500 var(--t85) / 1 inherit;
  font-family: inherit;
  cursor: pointer;
}
.period-toggle button[aria-pressed="true"] { background: rgba(245, 13, 107, 0.14); }
.period-toggle .badge { justify-self: end; margin-right: calc(2 * var(--u)); width: auto; min-width: calc(26 * var(--u)); padding: 0 calc(3 * var(--u)); height: calc(22 * var(--u)); }
.badge {
  display: inline-grid;
  place-items: center;
  min-width: calc(31 * var(--u));
  padding: 0 calc(3 * var(--u));
  height: calc(18 * var(--u));
  border-radius: calc(7 * var(--u));
  background: var(--pink);
  color: var(--text);
  font-size: var(--t75);
  font-weight: 600;
}
.price-plans {
  display: flex;
  justify-content: center;
  gap: calc(8 * var(--u));
  margin-top: calc(9 * var(--u));
}
.price-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(150 * var(--u));
  min-height: calc(112 * var(--u));
  padding: calc(9 * var(--u)) calc(18 * var(--u)) calc(9 * var(--u));
  background: var(--tile);
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
}
.price-plan.is-selected {
  border-color: rgba(245, 13, 107, 0.85);
  box-shadow: 0 0 calc(9 * var(--u)) rgba(245, 13, 107, 0.2);
}
.price-plan h3 { color: var(--muted); font-size: var(--t75); font-weight: 400; }
.price-plan .badge { position: absolute; right: calc(6 * var(--u)); top: calc(4.5 * var(--u)); }
.price-plan__price { margin-top: calc(12 * var(--u)); white-space: nowrap; }
.price-plan__price b { font-size: var(--t20); font-weight: 600; }
.price-plan__price small { margin-left: calc(1 * var(--u)); color: var(--muted); font-size: var(--t75); }
.price-plan__note { margin-top: calc(6 * var(--u)); color: var(--muted); font-size: var(--t75); text-align: center; }
.price-plan .btn {
  width: calc(114 * var(--u));
  max-width: 100%;
  height: calc(24 * var(--u));
  margin-top: auto;
  font-size: var(--t9);
  border-radius: var(--r-btn-s);
}
.price-plan:not(.is-selected) .btn { background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.pricing__foot { display: block; margin-top: calc(9 * var(--u)); color: var(--green); font-size: var(--t85); font-weight: 500; text-align: center; }
.pricing__foot:hover, .faq__more:hover { text-decoration: underline; }

/* 4:138 Что говорят наши пользователи */
.card--reviews { min-height: calc(195 * var(--u)); padding: calc(12 * var(--u)) calc(13 * var(--u)) calc(10 * var(--u)); }
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(12 * var(--u));
  margin-top: calc(6 * var(--u));
  margin-right: calc(11 * var(--u));
}
.review {
  display: flex;
  flex-direction: column;
  min-height: calc(116 * var(--u));
  padding: calc(14 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));
  background: var(--tile);
  border: 1px solid rgba(33, 56, 61, 0.65);
  border-radius: var(--r-tile);
}
.review__name { font-size: var(--t95); font-weight: 600; }
.review__city { margin-top: calc(3 * var(--u)); color: var(--muted); font-size: var(--t75); }
.review__text { margin: calc(12 * var(--u)) 0 0; font-size: var(--t85); flex: 1; }
.review__stars { margin-top: calc(8 * var(--u)); color: #ffc70f; font-size: calc(10 * var(--u)); letter-spacing: 0.05em; }
.review__stars .placeholder { font-size: var(--t75); letter-spacing: normal; }
.card__foot { margin-top: calc(8 * var(--u)); color: var(--muted); font-size: var(--t85); text-align: center; }
.card__foot a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* 4:159 FAQ */
.card--faq { min-height: calc(195 * var(--u)); padding-top: calc(12 * var(--u)); }
.faq { display: grid; gap: calc(5 * var(--u)); margin-top: calc(6 * var(--u)); }
.faq details {
  background: var(--tile);
  border: 1px solid rgba(33, 56, 61, 0.6);
  border-radius: calc(5 * var(--u));
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(26 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(11 * var(--u));
  font-size: var(--t85);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "⌄";
  font-size: calc(14 * var(--u));
  line-height: 1;
  transform: translateY(calc(-3 * var(--u)));
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: translateY(calc(2 * var(--u))) rotate(180deg); }
.faq__answer { padding: 0 calc(11 * var(--u)) calc(10 * var(--u)); color: var(--muted); font-size: var(--t85); line-height: 1.45; }
.faq__answer p + p { margin-top: 0.5em; }
.faq__answer a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.faq__more { display: block; margin-top: calc(9 * var(--u)); color: var(--green); font-size: var(--t85); font-weight: 500; text-align: center; }

/* 4:174 Финальный CTA */
.cta {
  position: relative;
  overflow: hidden;
  min-height: calc(72 * var(--u));
  margin-top: calc(2 * var(--u));
  padding: calc(14 * var(--u)) 0 calc(10 * var(--u));
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: linear-gradient(to right, #05120f, #1c0612 48%, #0a060e);
}
.cta__art-left, .cta__art-right { position: absolute; inset: 0 auto 0 0; width: 100%; pointer-events: none; }
.cta__art-right { inset: 0 0 0 auto; width: calc(964 * var(--u)); }
.cta__text { position: relative; width: calc(620 * var(--u)); max-width: 100%; margin-left: calc(99 * var(--u)); text-align: center; }
.cta h2 { font-size: var(--t17); font-weight: 600; line-height: calc(24 * var(--u)); }
.cta p { margin-top: calc(3 * var(--u)); color: var(--muted); font-size: var(--t85); }
.cta .btn { position: absolute; left: calc(605 * var(--u)); top: calc(21 * var(--u)); width: calc(150 * var(--u)); height: calc(30 * var(--u)); border-radius: var(--r-tile); font-size: var(--t9); }

/* 4:189 Подвал */
.site-footer {
  display: grid;
  grid-template-columns: calc(220 * var(--u)) calc(135 * var(--u)) calc(135 * var(--u)) calc(150 * var(--u)) calc(215 * var(--u)) 1fr;
  min-height: calc(103 * var(--u));
  margin-top: calc(8 * var(--u));
  padding-bottom: calc(16 * var(--u));
}
.footer-brand { padding-top: calc(2 * var(--u)); }
.footer-brand p { margin-top: calc(8 * var(--u)); color: var(--muted); font-size: var(--t9); }
.footer-brand small { display: block; margin-top: calc(14 * var(--u)); color: var(--muted); font-size: var(--t8); }
.footer-col { padding-top: calc(10 * var(--u)); }
.footer-col h2 { font-size: var(--t9); font-weight: 600; }
.footer-col ul { margin-top: calc(13 * var(--u)); display: grid; gap: calc(8 * var(--u)); }
.footer-col a { color: var(--muted); font-size: var(--t8); }
.footer-col a:hover { color: var(--text); text-decoration: underline; }
.footer-social { display: flex; gap: calc(6 * var(--u)); margin-top: calc(9 * var(--u)); }
.footer-social img { width: calc(25 * var(--u)); height: calc(25 * var(--u)); }

/* ---------- Внутренние страницы ---------- */
.page-head { padding-top: calc(43 * var(--u)); }
.page-head h1 { font-size: calc(30 * var(--u)); font-weight: 600; line-height: 1.2; }
.page-head p { margin-top: calc(10 * var(--u)); max-width: calc(560 * var(--u)); color: var(--muted); font-size: var(--t12); line-height: 1.35; }

.prose { font-size: max(calc(10 * var(--u)), 14px); line-height: 1.6; color: #d9e0e3; }
.prose p, .prose ul, .prose ol, .prose table { margin-top: 0.8em; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.3em; }
.prose li + li { margin-top: 0.3em; }
.prose h2 { margin-top: 1.8em; font-size: 1.2em; color: var(--text); line-height: 1.3; scroll-margin-top: 16px; }
.prose h3 { margin-top: 1.3em; font-size: 1.05em; color: var(--text); }
.prose strong { color: var(--text); }
.prose a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.prose code { font-size: 0.9em; background: var(--tile); padding: 0.1em 0.35em; border-radius: 4px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.93em; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.5em 0.7em; text-align: left; vertical-align: top; }
.prose th { background: var(--tile); color: var(--text); font-weight: 600; }

.doc-layout {
  display: grid;
  grid-template-columns: calc(230 * var(--u)) 1fr;
  gap: calc(7 * var(--u));
  align-items: start;
  margin-top: calc(16 * var(--u));
}
.doc-toc { position: sticky; top: 16px; padding: calc(15 * var(--u)); text-align: left; }
.doc-toc h2 { font-size: var(--t10); font-weight: 600; }
.doc-toc ol { margin-top: calc(10 * var(--u)); display: grid; gap: calc(6 * var(--u)); }
.doc-toc a { color: var(--muted); font-size: var(--t85); }
.doc-toc a:hover { color: var(--text); }
.doc { padding: calc(20 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
.doc-status {
  margin-bottom: 1.2em;
  padding: 0.8em 1em;
  border: 1px dashed var(--placeholder-fg);
  border-radius: 8px;
  color: var(--placeholder-fg);
  font-size: 0.92em;
  line-height: 1.5;
}
.doc .doc-edition { color: var(--muted); }

.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(7 * var(--u)); margin-top: calc(16 * var(--u)); }
.info-card { padding: calc(15 * var(--u)) calc(17 * var(--u)); text-align: left; }
.info-card .card__title { text-align: left; line-height: 1.3; }
.info-card .prose { margin-top: 0; }
.info-card .btn { height: calc(30 * var(--u)); padding: 0 calc(18 * var(--u)); margin-top: calc(12 * var(--u)); font-size: var(--t9); border-radius: var(--r-tile); }

.pricing-page .price-plans { justify-content: flex-start; }

/* ---------- Адаптив ---------- */
@media (max-width: 1099px) {
  .site-header { grid-template-columns: auto 1fr auto; row-gap: 6px; height: auto; padding-top: 10px; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; }
  .main-nav ul { flex-wrap: wrap; gap: 6px 18px; padding-bottom: 14px; }
  .main-nav a[aria-current="page"]::after { bottom: -2px; }
  .lang { justify-self: end; }

  .hero h1 { font-size: clamp(28px, 7.4vw, 45px); line-height: 1.22; }
  .hero h1 span { white-space: normal; }

  .stage [data-node="52:19"] { display: none; }

  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 4px; padding: 6px 12px; }

  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0 !important; }
  .info-grid { grid-template-columns: 1fr; }

  .art-slot { opacity: 0.35; }
  .privacy-list li { width: auto; }

  .steps { grid-template-columns: repeat(3, 1fr); margin-left: 0; }
  .step__num { margin-left: auto; margin-right: auto; }
  .step__arrow { display: none; }

  .features { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-right: 0; }
  .plans-compare { grid-template-columns: 1fr; margin-left: 0; }
  .price-plans { flex-wrap: wrap; }
  .price-plan { flex: 1 1 150px; }
  .reviews { grid-template-columns: 1fr; margin-right: 0; }

  .cta { padding: 16px 16px 18px; text-align: center; }
  .cta__text { width: auto; margin: 0; }
  .cta .btn { position: relative; left: auto; top: auto; margin: 14px auto 0; }

  .site-footer { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }
  .footer-brand { grid-column: 1 / -1; }

  .doc-layout { grid-template-columns: 1fr; }
  .doc-toc { position: static; }
  .doc { padding: 18px 16px 22px; }
}

@media (max-width: 560px) {
  .btn--download-top { display: none; }
  .lang { margin-right: 0; }
  .servers-body { flex-direction: column; }
  .map-slot { margin: 12px auto 0; }
  .art-slot { display: none; }
  .steps { grid-template-columns: 1fr; row-gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.info-faq { margin-top: calc(7 * var(--u)); }
.stage--inner [data-node="52:19"] { display: none; }
.doc-layout > *, .cards > *, .info-grid > * { min-width: 0; }
.prose { overflow-wrap: break-word; }
.page-head h1 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 560px) { .page-head h1 { font-size: clamp(22px, 7vw, 30px); } }