:root {
  --legal-bg: #070A10;
  --legal-panel: rgba(7, 10, 16, 0.78);
  --legal-panel-strong: rgba(7, 10, 16, 0.9);
  --legal-line: rgba(255, 255, 255, 0.11);
  --legal-line-strong: rgba(var(--theme-primary-rgb), 0.42);
  --legal-ink: #f8fafc;
  --legal-muted: rgba(226, 232, 240, 0.72);
}

* {
  letter-spacing: 0 !important;
}

html,
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, Arial, sans-serif !important;
  color: var(--legal-ink) !important;
  background:
    linear-gradient(180deg, rgba(7, 10, 16, 0.72), rgba(7, 10, 16, 0.98)),
    url("images/hero/bg1.webp") center / cover fixed,
    var(--legal-bg) !important;
}

body::before {
  background:
    linear-gradient(180deg, rgba(var(--theme-primary-rgb), 0.12), rgba(7, 10, 16, 0.22) 38%, rgba(7, 10, 16, 0.78)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: auto, 44px 44px, 44px 44px !important;
}

.page {
  width: min(980px, calc(100% - 32px)) !important;
  margin: 22px auto 34px !important;
}

.topbar {
  border-radius: 18px !important;
  border: 1px solid var(--legal-line) !important;
  background: rgba(0, 0, 0, 0.82) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
}

.brand {
  color: var(--legal-ink) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.brand span,
a {
  color: var(--theme-primary) !important;
}

.nav a {
  color: var(--legal-muted) !important;
  border-radius: 999px !important;
  text-transform: none !important;
}

.nav a:hover,
.nav a.active {
  color: var(--legal-ink) !important;
  background: rgba(var(--theme-primary-rgb), 0.12) !important;
  border-color: var(--legal-line-strong) !important;
  transform: none !important;
}

.hero,
.section,
.foot {
  border-radius: 18px !important;
  border: 1px solid var(--legal-line) !important;
  background: var(--legal-panel) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: saturate(150%) blur(14px) !important;
}

.hero {
  padding: 24px !important;
}

.badge {
  color: var(--theme-accent) !important;
  border-color: rgba(var(--theme-primary-rgb), 0.32) !important;
  background: rgba(var(--theme-primary-rgb), 0.1) !important;
}

.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.6rem) !important;
  line-height: 1.04 !important;
  font-weight: 600 !important;
}

.meta,
.hero p,
.section p,
.section li,
.foot {
  color: var(--legal-muted) !important;
}

.section {
  background: rgba(7, 10, 16, 0.72) !important;
  transition: border-color 160ms ease, background-color 160ms ease !important;
}

.section:hover {
  border-color: var(--legal-line-strong) !important;
  background: var(--legal-panel-strong) !important;
  transform: none !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38) !important;
}

.section h2 {
  color: var(--legal-ink) !important;
  font-weight: 700 !important;
}

.num {
  background: linear-gradient(130deg, var(--theme-primary), var(--theme-secondary)) !important;
  box-shadow: 0 10px 22px rgba(var(--theme-primary-rgb), 0.26) !important;
}

.foot {
  background: rgba(0, 0, 0, 0.68) !important;
}

.foot-links {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .page {
    width: calc(100% - 16px) !important;
    margin: 12px auto 18px !important;
  }

  .topbar {
    align-items: flex-start !important;
  }

  .hero,
  .section,
  .foot {
    border-radius: 14px !important;
  }
}