/* Legal pages of LADOGA VPN: the black & gold look of the cabinet
   (index.html) and sub.ladogavpn.top. Fonts are self-hosted in /fonts. */
@font-face { font-family: Manrope; font-weight: 400; font-display: swap; src: url(/fonts/manrope-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: Manrope; font-weight: 400; font-display: swap; src: url(/fonts/manrope-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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url(/fonts/manrope-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url(/fonts/manrope-latin-700-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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url(/fonts/playfair-display-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url(/fonts/playfair-display-latin-700-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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --bg: #0a0908;
  --text: #f6f0e0;
  --muted: #a89f8a;
  --gold: #d4af37;
  --gold-light: #e6ca6a;
  --gold-pale: #efdc98;
  --border: rgba(212, 175, 55, 0.18);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 24px 16px 40px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 20% 0%, rgba(212, 175, 55, 0.14), transparent 60%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(184, 150, 46, 0.1), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M0 80 Q40 40 80 80 T160 80'/%3E%3Cpath d='M0 120 Q40 80 80 120 T160 120'/%3E%3Cpath d='M0 40 Q40 0 80 40 T160 40'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 160px,
    linear-gradient(180deg, #14110b 0%, #0a0908 50%, #070605 100%);
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px;
  background: rgba(22, 19, 13, 0.9);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(239, 220, 152, 0.05);
}

h1 {
  margin: 0 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  line-height: 1.25;
  background: linear-gradient(135deg, #efdc98 0%, #d4af37 48%, #b8962e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  margin: 30px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--gold);
  font-size: 18px;
  line-height: 1.35;
}

.date,
.muted {
  color: var(--muted);
}

.date {
  margin-top: 0;
  font-size: 14px;
}

a {
  color: var(--gold-light);
  text-decoration-color: rgba(230, 202, 106, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--gold-pale);
}

ul {
  padding-left: 22px;
}

li {
  margin: 4px 0;
}

li::marker {
  color: var(--gold);
}

strong,
b {
  color: var(--gold-pale);
}

@media (max-width: 480px) {
  main {
    padding: 22px 18px;
  }
  h1 {
    font-size: 26px;
  }
}