:root {
  color-scheme: dark;
  --bg: #05091a;
  --panel: rgba(13, 22, 52, .78);
  --line: rgba(104, 225, 232, .2);
  --text: #f6f7ff;
  --muted: #aab4d2;
  --cyan: #58eadf;
  --violet: #9a72ff;
  --rose: #ff718d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(138, 69, 211, .24), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(30, 196, 205, .16), transparent 28%),
    #05091a;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

.stars,
.stars::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .22;
  background-image: radial-gradient(#fff 1px, transparent 1px), radial-gradient(var(--cyan) 1px, transparent 1px);
  background-size: 73px 73px, 121px 121px;
  background-position: 0 0, 37px 29px;
}

.legal-nav {
  position: sticky;
  top: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1180px, calc(100% - 32px));
  margin: 16px auto;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(6, 11, 31, .78);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  backdrop-filter: blur(24px);
}

.brand {
  color: var(--text);
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;
}
.brand i { color: var(--cyan); font-style: normal; }
.legal-nav nav { display: flex; gap: 8px; margin-left: auto; }
.legal-nav a,
.back { padding: 9px 12px; border-radius: 11px; color: #cbd3ea; text-decoration: none; }
.legal-nav a:hover,
.legal-nav a.active,
.legal-nav nav a[aria-current="page"] { color: var(--cyan); background: rgba(88, 234, 223, .1); }
:where(a):focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

main { width: min(980px, calc(100% - 32px)); margin: 72px auto 100px; }
.hero {
  position: relative;
  overflow: hidden;
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(23, 34, 72, .82), rgba(17, 19, 54, .62));
  box-shadow: 0 40px 100px rgba(0, 0, 0, .32);
}
.hero::after {
  position: absolute;
  top: -105px;
  right: -70px;
  width: 240px;
  height: 240px;
  border: 35px solid rgba(154, 114, 255, .1);
  border-radius: 50%;
  box-shadow: 0 0 65px rgba(88, 234, 223, .12);
  content: "";
}
.eyebrow { display: inline-flex; color: var(--cyan); font: 700 12px/1.2 ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; }
.hero h1 { margin: 18px 0; font-size: clamp(38px, 6vw, 70px); line-height: .98; }
.hero p { max-width: 700px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.meta span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: #cbd3ea; background: rgba(5, 9, 26, .4); font-size: 13px; }

article { margin-top: 24px; padding: 32px; border: 1px solid rgba(124, 144, 211, .16); border-radius: 24px; background: var(--panel); backdrop-filter: blur(18px); }
article h2 { margin: 0 0 14px; font-size: 24px; }
article h3 { margin: 24px 0 10px; color: #dfe4f8; font-size: 17px; }
article p,
article li { color: var(--muted); line-height: 1.75; }
article li + li { margin-top: 8px; }
.callout { border-color: rgba(88, 234, 223, .35); background: linear-gradient(135deg, rgba(20, 90, 105, .22), rgba(28, 30, 78, .6)); }
.warning { border-color: rgba(255, 113, 141, .32); }
footer { width: min(980px, calc(100% - 32px)); margin: 0 auto 40px; color: #7f8bad; font-size: 13px; text-align: center; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 700px) {
  .legal-nav { top: 8px; flex-wrap: wrap; }
  .legal-nav nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .hero { padding: 28px 22px; }
  article { padding: 24px 20px; }
  main { margin-top: 36px; }
}