/* Sao VPN — общий стиль. Шрифты хранятся локально в /fonts. */

@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url(fonts/onest-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url(fonts/onest-latin-400-normal.woff2) format("woff2"); 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+2122,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url(fonts/onest-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url(fonts/onest-latin-500-normal.woff2) format("woff2"); 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+2122,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url(fonts/onest-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url(fonts/onest-latin-600-normal.woff2) format("woff2"); 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+2122,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant"; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Cormorant"; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); 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+2122,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant"; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Cormorant"; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); 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+2122,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Marck"; font-weight: 400; font-display: swap; src: url(fonts/marck-script-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Marck"; font-weight: 400; font-display: swap; src: url(fonts/marck-script-latin-400-normal.woff2) format("woff2"); 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+2122,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --night: #0d0826;      /* фон */
  --indigo: #1c1150;     /* приподнятые поверхности */
  --amethyst: #7b4dff;   /* свечение колец */
  --lavender: #bdb3e3;   /* второстепенный текст */
  --star: #f6f2ff;       /* основной текст */
  --gold: #e6b566;       /* акцент бренда */
  --line: rgba(189, 179, 227, 0.18);

  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Onest", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --script: "Marck", "Segoe Script", cursive;

  --wrap: 1080px;
  --gutter: clamp(20px, 5vw, 48px);
}

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

html {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--star);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #f3cf8f; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- шапка ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 22px;
  position: relative; z-index: 2;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--star); text-decoration: none;
  font: 600 22px/1 var(--serif); letter-spacing: 0.02em;
}
.brand svg { width: 30px; height: 34px; }
.top nav { display: flex; gap: 22px; font-size: 15px; }
.top nav a { color: var(--lavender); text-decoration: none; }
.top nav a:hover { color: var(--star); }
@media (max-width: 640px) { .top nav .hide-sm { display: none; } }

/* ---------- кнопки ---------- */
.btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--gold);
  color: #24133f;
  font: 600 16px/1.2 var(--sans);
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.btn:hover { background: #f3cf8f; color: #24133f; transform: translateY(-1px); }
.btn-quiet {
  background: transparent; color: var(--star);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-quiet:hover { background: rgba(123, 77, 255, .16); color: var(--star); }

/* ---------- типографика разделов ---------- */
section { padding-block: clamp(64px, 10vw, 112px); }
section + section { border-top: 1px solid var(--line); }

h2 {
  margin: 0 0 14px;
  font: 500 clamp(34px, 5vw, 48px)/1.1 var(--serif);
  letter-spacing: -0.005em;
}
.lead { margin: 0 0 44px; max-width: 58ch; color: var(--lavender); font-size: 18px; }

/* ---------- подвал ---------- */
.foot {
  padding-block: 40px 56px;
  border-top: 1px solid var(--line);
  color: var(--lavender); font-size: 14px;
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; }
.foot a { color: var(--lavender); }
.foot a:hover { color: var(--star); }
.foot .links { display: flex; flex-wrap: wrap; gap: 8px 24px; }