:root {
  color-scheme: dark;
  --bg: #050706;
  --panel: rgba(16,49,25, .78);
  --line: rgba(114,222,136, .2);
  --text: #F7FEF8;
  --muted: #ADCFB4;
  --cyan: #64DE7C;
  --violet: #7af793;
  --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(77,203,102, .24), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(44,191,73, .16), transparent 28%),
    #050706;
  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(8,29,14, .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: #CDE8D3; text-decoration: none; }
.legal-nav a:hover,
.legal-nav a.active,
.legal-nav nav a[aria-current="page"] { color: var(--cyan); background: rgba(100,222,124, .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(27,68,35, .82), rgba(16,55,24, .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(122,247,147, .1);
  border-radius: 50%;
  box-shadow: 0 0 65px rgba(100,222,124, .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: #CDE8D3; background: rgba(7,24,12, .4); font-size: 13px; }

article { margin-top: 24px; padding: 32px; border: 1px solid rgba(131,204,146, .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: #E1F6E5; font-size: 17px; }
article p,
article li { color: var(--muted); line-height: 1.75; }
article li + li { margin-top: 8px; }
.callout { border-color: rgba(100,222,124, .35); background: linear-gradient(135deg, rgba(27,98,41, .22), rgba(24,82,36, .6)); }
.warning { border-color: rgba(255, 113, 141, .32); }
footer { width: min(980px, calc(100% - 32px)); margin: 0 auto 40px; color: #83A98A; 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; }
}