/* BlancVPN — blancvpn.space/ru, снято 2026-09-21
   Блок 1 — переменные со страницы как есть. Блок 2 — производные (шкала, радиусы,
   тени, спейсинг), выведены из замеров. Блок 3 — кнопки.
   Принцип: серого нет. Все нейтрали — альфа от #17387e / #0c1527. */

:root {
  /* ——— 1. оригинальные токены сайта ——— */
  --bg-primary: #fff;
  --bg-accent: #3183ff;
  --bg-accent-hover: #2072ee;
  --bg-accent-pressed: #0f60dc;

  --bg-secondary: #17387e0a;           /* 4%  */
  --bg-secondary-hover: #17387e1a;     /* 10% */
  --bg-secondary-pressed: #17387e2e;   /* 18% */
  --bg-secondary-on-white: #f6f7fa;    /* тот же 4%, свёрнутый в плотный цвет */

  --bg-subdued: #3183ff0f;             /* 6%  акцента */
  --bg-subdued-hover: #3183ff1f;       /* 12% */
  --bg-subdued-pressed: #3183ff33;     /* 20% */
  --bg-subdued-on-white: #f3f8ff;      /* ← фон светлых секций */

  --bg-tertiary: #0c152766;
  --bg-success: #39b56a29;
  --bg-warning: #ed656514;

  --border-accent: #3183ff;
  --border-primary: #17387e2e;         /* 18% */
  --border-secondary: #17387e1a;       /* 10% */

  --text-primary: #151e30;
  --text-primary-inverse: #fff;
  --text-secondary: #0c1527ad;         /* 68% — было 58%, 4,3:1 на светлом фоне; стало 5,6:1 */
  --text-disabled: #17387e54;          /* 33% */
  --text-accent: #3183ff;
  --text-accent-hover: #0f60dc;
  --text-accent-pressed: #3183ffcc;
  --text-success: #39b56a;
  --text-error: #ed6565;

  /* ——— 2. производные ——— */

  /* тёмные полосы */
  --dark-bg: #0b1122;
  --dark-bg-alt: #0c1223;
  --dark-surface: rgba(255, 255, 255, .06);   /* большая плита */
  --dark-surface-2: rgba(255, 255, 255, .08); /* вложенная плитка */
  --dark-surface-3: rgba(255, 255, 255, .12);
  --dark-border: rgba(255, 255, 255, .16);
  --dark-border-strong: rgba(255, 255, 255, .24);
  --dark-text: #fff;
  --dark-text-secondary: rgba(255, 255, 255, .65);
  --dark-glow: radial-gradient(20% 100% at 0 0, #2a4489, transparent),
               radial-gradient(25% 55% at 100% 100%, #2a4489, transparent);

  /* типографика — Golos Text один на всё */
  --font: "Golos Text", -apple-system, sans-serif;
  --font-mono: Cousine, ui-monospace, monospace;
  --fs-12: 12px;  --lh-12: 18px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-18: 18px;  --lh-18: 26px;
  --fs-20: 20px;  --lh-20: 26px;
  --fs-26: 26px;  --lh-26: 34px;
  --fs-32: 32px;  --lh-32: 38px;   /* h1 mobile */
  --fs-40: 40px;  --lh-40: 48px;   /* h2 */
  --fs-48: 48px;  --lh-48: 58px;   /* h1 desktop */
  --fw-body: 400;
  --fw-label: 500;
  --fw-head: 600;                  /* заголовки 600, не 700 */

  /* радиус = глубина вложенности */
  --r-slab: 40px;    /* плита секции, CTA-баннер, стык светлого над тёмным */
  --r-card: 30px;    /* карточка, бейдж-пилюля */
  --r-nested: 24px;
  --r-tile: 20px;    /* плитка внутри карточки */
  --r-sm: 16px;      /* иконка платформы, пилюля скидки */
  --r-pill: 32px;    /* кнопка */
  --r-pill-sm: 24px; /* кнопка в шапке */

  /* тени — всего три на весь сайт */
  --shadow-card: 1px 1px 8px rgba(0, 0, 0, .06);
  --shadow-card-strong: 1px 1px 8px rgba(0, 0, 0, .08);
  --shadow-float: 0 0 2px rgba(0, 0, 0, .16), 0 2px 16px rgba(0, 0, 0, .1);

  /* ритм */
  --container: 1200px;
  --container-text: 740px;
  --gutter: 40px;
  --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px;  /* базовый gap — 24 */
  --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-60: 60px; --s-64: 64px;
  --section-y: 120px;
  --pad-card: 24px;
  --pad-tile: 20px;
  --pad-slab: 56px 64px;

  /* движение */
  --t: .2s;
  --t-reveal: .8s;
}

/* ——— карточки и поверхности ——— */
.card {                       /* тень вместо границы */
  background: var(--bg-primary);
  border-radius: var(--r-tile);
  padding: var(--pad-card);
  box-shadow: var(--shadow-card);
}
.slab {                       /* большая плита на светлом */
  background: var(--bg-subdued);
  border-radius: var(--r-slab);
  padding: var(--pad-slab);
}
.pill-badge {                 /* бейдж секции: прозрачный, только обводка */
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--border-primary);
  border-radius: var(--r-card);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--text-primary);
}

.section-dark {
  background: var(--dark-bg);
  background-image: var(--dark-glow);
  color: var(--dark-text);
}
.section-dark .card {
  background: var(--dark-surface);
  box-shadow: none;
  border-radius: var(--r-slab);
}
.section-dark .card .tile {
  background: var(--dark-surface-2);
  border-radius: var(--r-tile);
  padding: var(--pad-tile);
}

/* светлая секция наезжает на тёмную скруглённым листом — стык без линии */
.section-light-over-dark {
  background: var(--bg-subdued-on-white);
  border-radius: var(--r-slab) var(--r-slab) 0 0;
  padding: var(--section-y) 0;
  position: relative;
  z-index: 1;
}

/* ——— кнопки: шесть вариантов, состояния одними и теми же токенами ——— */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  height: 56px;
  padding: 0 var(--s-24);
  border: 0;
  border-radius: var(--r-pill);
  font: var(--fw-label) var(--fs-16) / var(--lh-16) var(--font);
  background: var(--bg-accent);
  color: var(--text-primary-inverse);
  cursor: pointer;
  transition: background-color var(--t), color var(--t),
              opacity var(--t), border-color var(--t), box-shadow var(--t);
}
.button:not(.disabled):hover  { background-color: var(--bg-accent-hover); }
.button:not(.disabled):active { background-color: var(--bg-accent-pressed); }

.button.secondary { background: var(--bg-secondary); color: var(--text-primary); }
.button.secondary:not(.disabled):hover  { background-color: var(--bg-secondary-hover); }
.button.secondary:not(.disabled):active { background-color: var(--bg-secondary-pressed); }

.button.subdued { background: var(--bg-subdued); color: var(--text-accent); }
.button.subdued:not(.disabled):hover  { background-color: var(--bg-subdued-hover); }
.button.subdued:not(.disabled):active { background-color: var(--bg-subdued-pressed); }

.button.flat { background: transparent; color: var(--text-accent); }
.button.flat:not(.disabled):hover  { color: var(--text-accent-hover); }
.button.flat:not(.disabled):active { color: var(--text-accent-pressed); }

/* обводка через inset-тень: размер кнопки не прыгает на hover */
.button.outline {
  background: transparent;
  color: var(--text-accent);
  box-shadow: 0 0 0 1px var(--bg-accent) inset;
}
.button.outline:not(.disabled):hover {
  color: var(--text-accent-hover);
  box-shadow: 0 0 0 1px var(--bg-accent-hover) inset;
}
.button.outline:not(.disabled):active {
  color: var(--text-accent-pressed);
  box-shadow: 0 0 0 1px var(--bg-accent-pressed) inset;
}

.button.outline-neutral {
  background: transparent;
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-primary) inset;
}
.button.outline-neutral:not(.disabled):hover  { background-color: var(--bg-secondary); }
.button.outline-neutral:not(.disabled):active { background-color: var(--bg-secondary-hover); }

.button.sm { height: 44px; }
.button.nav { height: 36px; border-radius: var(--r-pill-sm); padding: 0 var(--s-16); }
.button.disabled { color: var(--text-disabled); cursor: default; }

/* кнопка на цветном баннере гасится прозрачностью, а не сменой цвета */
.banner .button:hover  { opacity: .85; }
.banner .button:active { opacity: .7; }

/* ——— плитка платформы: одно правило на всю решётку ——— */
.platform { display: grid; justify-items: center; gap: var(--s-8); }
.platform__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--bg-primary);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  transition: background-color var(--t), color var(--t);
}
.platform:hover .platform__icon { background: var(--bg-accent); color: #fff; }
.platform__label { font-size: var(--fs-12); line-height: var(--lh-12); }

/* ——— статусы ——— */
.status-ok   { color: var(--text-success); background: var(--bg-success); }
.status-warn { color: var(--text-error);   background: var(--bg-warning); }

/* ——— появление по скроллу — единственная длинная анимация ——— */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: transform var(--t-reveal), opacity var(--t-reveal);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (width <= 767px) {
  :root { --gutter: 24px; --section-y: 60px; --pad-slab: 32px 24px; }
  h1 { font-size: var(--fs-32); line-height: var(--lh-32); }
  .button { width: 100%; }
}