:root {
  --signal: oklch(60% 0.145 256);
  --signal-ink: oklch(49% 0.125 256);
  --signal-light: oklch(72% 0.09 253);
  --signal-pale: oklch(86% 0.045 252);
  --signal-muted: oklch(70% 0.075 254);
  --blue-wash: oklch(95% 0.025 252);
  --ice: oklch(97.2% 0.012 252);
  --surface: oklch(99.2% 0.004 252);
  --surface-strong: oklch(98.3% 0.009 252);
  --ink: oklch(30% 0.035 255);
  --muted: oklch(54% 0.026 255);
  --line: oklch(89% 0.018 252);
  --line-strong: oklch(82% 0.025 252);
  --deep: oklch(30% 0.04 255);
  --footer: oklch(97% 0.012 252);
  --device: oklch(21% 0.015 255);
  --navy: oklch(35% 0.045 255);
  --navy-2: oklch(40% 0.055 255);
  --danger: oklch(60% 0.16 25);
  --warning: oklch(68% 0.13 75);
  --safe: oklch(60% 0.115 155);
  --white: oklch(99.5% 0.003 252);
}

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

.site-header,
.hero {
  color: var(--ink);
}

.site-header {
  border-bottom-color: oklch(30% 0.035 255 / 10%);
  background: oklch(95% 0.025 252 / 68%);
}

.site-nav {
  background: transparent;
}

.brand img {
  box-shadow: 0 10px 28px oklch(30% 0.035 255 / 14%);
}

.nav-links a {
  color: var(--muted);
  opacity: 1;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
}

.language-menu summary {
  border-color: oklch(30% 0.035 255 / 12%);
  background: oklch(99.2% 0.004 252 / 70%);
}

.language-menu summary:hover,
.language-menu[open] summary {
  border-color: oklch(49% 0.125 256 / 22%);
  background: var(--surface);
}

.nav-download {
  border-color: oklch(30% 0.035 255 / 12%);
  background: oklch(99.2% 0.004 252 / 70%);
  color: var(--ink);
}

.nav-download:hover {
  background: var(--surface);
}

.hero {
  background:
    radial-gradient(circle at 77% 44%, oklch(60% 0.145 256 / 11%), transparent 30%),
    radial-gradient(circle at 88% 10%, oklch(72% 0.09 253 / 10%), transparent 28%),
    var(--blue-wash);
}

.hero::before {
  background-image: radial-gradient(circle, oklch(30% 0.035 255 / 12%) 0.7px, transparent 0.8px);
  opacity: 0.25;
}

.hero::after {
  border-color: oklch(60% 0.145 256 / 12%);
  box-shadow:
    0 0 0 12vw oklch(60% 0.145 256 / 2.5%),
    0 0 0 24vw oklch(60% 0.145 256 / 1.5%);
}

.hero-kicker,
.hero h1 strong {
  color: var(--signal-ink);
}

.hero-description,
.text-link,
.hero-facts dd {
  color: var(--muted);
}

.text-link:hover {
  color: var(--ink);
}

.hero-facts {
  border-top-color: oklch(30% 0.035 255 / 11%);
}

.hero-facts div + div {
  border-left-color: oklch(30% 0.035 255 / 9%);
}

.hero-facts dt {
  color: oklch(54% 0.026 255 / 72%);
}

.hero-signal,
.hero-foot {
  color: oklch(30% 0.035 255 / 18%);
}

.hero-foot div {
  background: oklch(30% 0.035 255 / 10%);
}

.orbit {
  border-color: oklch(60% 0.145 256 / 16%);
}

.hero-product {
  display: grid;
  place-items: center;
}

.hero-device {
  position: relative;
  top: auto;
  right: auto;
  width: min(410px, 82%);
  transform: none;
  box-shadow: 0 38px 90px oklch(30% 0.035 255 / 20%);
}

.section-index-light,
.section-label-light {
  color: var(--signal-ink);
}

.workflow {
  background: var(--surface-strong);
  color: var(--ink);
}

.timeline-step {
  border-top-color: var(--line);
  color: var(--muted);
}

.timeline-step:last-child {
  border-bottom-color: var(--line);
}

.timeline-step.is-current {
  color: var(--ink);
}

.timeline-step.is-current::before {
  background: var(--signal);
  box-shadow: 0 0 18px oklch(60% 0.145 256 / 22%);
}

.workflow-callout {
  border-color: var(--line);
  background: oklch(99.2% 0.004 252 / 91%);
  box-shadow: 0 24px 64px oklch(30% 0.035 255 / 14%);
}

.callout-unit,
.workflow-callout p {
  color: var(--muted);
}

.privacy {
  background:
    radial-gradient(circle at 80% 38%, oklch(60% 0.145 256 / 12%), transparent 30%),
    var(--navy);
}

.privacy::after {
  border-color: oklch(72% 0.09 253 / 14%);
  box-shadow:
    0 0 0 10vw oklch(72% 0.09 253 / 2.5%),
    0 0 0 20vw oklch(72% 0.09 253 / 1.5%);
}

.privacy-lead {
  color: oklch(95% 0.025 252 / 72%);
}

.privacy-list {
  border-top-color: oklch(99.5% 0.003 252 / 16%);
}

.privacy-list div {
  border-bottom-color: oklch(99.5% 0.003 252 / 16%);
}

.privacy-list dt {
  color: var(--signal-pale);
}

.privacy-list dd {
  color: oklch(99.5% 0.003 252 / 78%);
}

.final-cta {
  background: var(--blue-wash);
  color: var(--ink);
}

.final-cta::before {
  background-image: radial-gradient(circle, oklch(30% 0.035 255 / 10%) 0.7px, transparent 0.8px);
}

.cta-orbit {
  border-color: oklch(60% 0.145 256 / 12%);
  box-shadow:
    0 0 0 110px oklch(60% 0.145 256 / 2.5%),
    0 0 0 220px oklch(60% 0.145 256 / 1.5%);
}

.cta-inner > img {
  box-shadow: 0 30px 70px oklch(30% 0.035 255 / 18%);
}

.final-cta .section-label-light {
  color: var(--signal-ink);
}

.cta-note {
  color: var(--muted);
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--footer);
  color: var(--muted);
}

.footer-brand {
  color: var(--ink);
}

.footer-links a:hover {
  color: var(--ink);
}