/* Lemma Ventures — corporate site
   Direction: deep graphite + teal lattice. Brand-led, spare prose.
   Avoids cream/terracotta and purple-gradient defaults. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Geist"),
    local("Geist Sans"),
    url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    local("Geist Medium"),
    local("Geist Sans Medium"),
    url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local("Geist SemiBold"),
    local("Geist Sans SemiBold"),
    url("https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.2.5/files/geist-sans-latin-600-normal.woff2") format("woff2");
}

/* Klim Söhne — licensed files only (no CDN). Drop woff2 from your Klim web kit into fonts/soehne/. */
@font-face {
  font-family: "Söhne";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    local("Söhne Leicht"),
    local("Soehne Leicht"),
    local("Söhne"),
    local("Soehne"),
    url("../fonts/soehne/soehne-leicht.woff2") format("woff2");
}
@font-face {
  font-family: "Söhne";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Söhne Buch"),
    local("Soehne Buch"),
    local("Söhne"),
    local("Soehne"),
    url("../fonts/soehne/soehne-buch.woff2") format("woff2");
}
@font-face {
  font-family: "Söhne";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    local("Söhne Kräftig"),
    local("Söhne Kraftig"),
    local("Soehne Kraftig"),
    local("Söhne"),
    local("Soehne"),
    url("../fonts/soehne/soehne-kraftig.woff2") format("woff2");
}
@font-face {
  font-family: "Söhne";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local("Söhne Halbfett"),
    local("Soehne Halbfett"),
    local("Söhne"),
    local("Soehne"),
    url("../fonts/soehne/soehne-halbfett.woff2") format("woff2");
}
@font-face {
  font-family: "Söhne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Söhne Fett"),
    local("Soehne Fett"),
    local("Söhne"),
    local("Soehne"),
    url("../fonts/soehne/soehne-fett.woff2") format("woff2");
}

:root {
  --bg: #070b10;
  --bg-elev: #0e141c;
  --ink: #e8eef5;
  --muted: #8b97a8;
  --faint: #5a6575;
  --line: rgba(232, 238, 245, 0.1);
  --accent: #2dd4bf;
  --accent-dim: rgba(45, 212, 191, 0.14);
  --accent-deep: #14b8a6;
  --warn: #f0a86a;
  --display: "Syne", "Avenir Next", sans-serif;
  --sans: "Source Sans 3", "Source Sans Pro", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --max: 1120px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(ellipse 90% 55% at 12% -10%, rgba(45, 212, 191, 0.16), transparent 55%),
    radial-gradient(ellipse 70% 50% at 95% 8%, rgba(56, 120, 200, 0.12), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(20, 184, 166, 0.06), transparent 45%),
    var(--bg);
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { color: #5eead4; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

img, svg { display: block; max-width: 100%; }

.wrap {
  width: min(100% - 40px, var(--max));
  margin-inline: auto;
}

/* ——— Nav ——— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200; /* above aurora field / main parallax layers */
  height: var(--nav-h);
  backdrop-filter: blur(14px);
  background: rgba(7, 11, 16, 0.72);
  border-bottom: 1px solid var(--line);
  overflow: visible;
  isolation: isolate;
  pointer-events: auto;
}

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links > li { position: relative; z-index: 1; }
.nav-links > li.nav-item { z-index: 2; }
.nav-links > li.nav-item:hover,
.nav-links > li.nav-item:focus-within,
.nav-links > li.nav-item.is-open { z-index: 20; }

.nav-links a,
.nav-trigger {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  z-index: 2;
}
.nav-links a:hover,
.nav-trigger:hover,
.nav-links a[aria-current="page"],
.nav-trigger[aria-expanded="true"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  margin-top: 0;
  padding: 10px 8px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
  z-index: 30;
}
/* Bridge the gap between trigger and panel so hover never drops */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: transparent;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(6px);
}
.nav-dropdown a {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 600;
  pointer-events: auto;
}
.nav-dropdown a span {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}
.nav-dropdown a:hover {
  background: var(--accent-dim);
  color: var(--accent);
}

.nav-cta {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}
.nav-cta:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
}

/* ——— Hero ——— */
.hero {
  position: relative;
  padding: clamp(64px, 12vw, 120px) 0 clamp(56px, 8vw, 88px);
  overflow: hidden;
}

.hero-visual {
  position: absolute;
  inset: -10% -5% auto;
  height: min(72vh, 640px);
  z-index: -1;
  opacity: 0.55;
  pointer-events: none;
}

.hero-brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.4rem, 12vw, 7.5rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: 28px;
  animation: rise 0.9s var(--ease) both;
  overflow: visible;
  padding-bottom: 0.06em;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.45rem, 3.2vw, 2.15rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: 18px;
  animation: rise 0.9s var(--ease) 0.08s both;
  overflow: visible;
  padding-bottom: 0.04em;
}

.hero .lede {
  max-width: 42ch;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  animation: rise 0.9s var(--ease) 0.16s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  animation: rise 0.9s var(--ease) 0.24s both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  border: 1.5px solid transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent, #ffffff);
}
.btn-primary:hover {
  background: var(--accent-deep, #5eead4);
  color: var(--on-accent, #ffffff);
}
.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--muted);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
}

/* ——— Sections ——— */
.section {
  padding: clamp(56px, 9vw, 96px) 0;
  border-top: 1px solid var(--line);
}

.section-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.section h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  letter-spacing: -0.025em;
  line-height: 1.3;
  max-width: 22ch;
  margin-bottom: 16px;
  overflow: visible;
  padding-bottom: 0.06em;
}

.section .intro {
  max-width: 54ch;
  color: var(--muted);
  margin-bottom: 36px;
}

.section p + p { margin-top: 1em; }

/* Vision list */
.vision-list {
  list-style: none;
  display: grid;
  gap: 0;
  counter-reset: v;
}
.vision-list li {
  counter-increment: v;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 4px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.vision-list li:last-child { border-bottom: 1px solid var(--line); }
.vision-list li::before {
  content: counter(v, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
  padding-top: 4px;
}
/* strong + span must share col 2 — otherwise span auto-places into the 48px gutter */
.vision-list strong {
  grid-column: 2;
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  min-width: 0;
}
.vision-list span {
  grid-column: 2;
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
  min-width: 0;
  max-width: none;
}

/* Layers */
.layers {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.layer {
  background: var(--bg-elev);
  padding: clamp(24px, 4vw, 36px);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s var(--ease);
}
.layer:hover { background: #121a24; }
.layer-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.layer h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.layer p {
  color: var(--muted);
  max-width: 52ch;
  font-size: 0.98rem;
}
.layer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.layer ul li {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}

@media (min-width: 860px) {
  .layers { grid-template-columns: 1.15fr 1fr 0.9fr; }
}

/* Property grid (protocol) */
.props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.prop {
  padding: 22px 0 6px;
  border-top: 2px solid var(--accent);
}
.prop h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.prop p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Skills */
.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
.skill h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.skill ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skill li {
  color: var(--muted);
  font-size: 0.95rem;
  padding-left: 14px;
  position: relative;
}
.skill li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 1px;
}

/* Page chrome (inner) */
.page-hero {
  padding: clamp(48px, 8vw, 80px) 0 40px;
}
.page-hero .section-kicker { margin-bottom: 12px; }
.page-hero h1 {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.22;
  max-width: 18ch;
  margin-bottom: 16px;
  animation: rise 0.8s var(--ease) both;
  overflow: visible;
  padding-bottom: 0.06em;
}
.page-hero .lede {
  max-width: 48ch;
  color: var(--muted);
  font-size: 1.1rem;
  animation: rise 0.8s var(--ease) 0.08s both;
}

.prose {
  max-width: 66ch;
}
.prose h2 {
  font-family: var(--display);
  font-size: 1.45rem;
  margin: 2.2em 0 0.7em;
  letter-spacing: -0.02em;
}
.prose h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  margin: 1.6em 0 0.5em;
}
.prose p, .prose li {
  color: var(--muted);
}
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul, .prose ol {
  margin: 0.8em 0 0.8em 1.2em;
}
.prose li { margin: 0.35em 0; }
.prose .callout {
  margin: 1.6em 0;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  color: var(--ink);
  font-size: 0.98rem;
}
.prose .hygiene {
  margin-top: 1.4em;
  font-size: 0.88rem;
  color: var(--faint);
  font-style: italic;
}

.split-2 {
  display: grid;
  gap: 28px;
}
@media (min-width: 720px) {
  .split-2 { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.ladder {
  margin: 28px 0;
  padding: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ladder .k {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.rung {
  display: grid;
  grid-template-columns: 64px 1fr 120px;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  font-size: 0.9rem;
}
.rung .h { font-family: var(--mono); color: var(--faint); font-size: 0.75rem; }
.rung .bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.rung .bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transform-origin: left;
  animation: fillBar 1.1s var(--ease) both;
}
.rung.fail .bar i { background: var(--warn); }
.rung .note { color: var(--muted); font-size: 0.82rem; }
@media (max-width: 560px) {
  .rung { grid-template-columns: 48px 1fr; }
  .rung .note { grid-column: 2; }
}

@keyframes fillBar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.cta-band {
  margin: 48px 0 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, var(--accent-dim), transparent 55%),
    var(--bg-elev);
}
.cta-band h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  max-width: 20ch;
  margin-bottom: 10px;
}
.cta-band p {
  color: var(--muted);
  max-width: 48ch;
  margin-bottom: 20px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  margin-top: 24px;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
.footer-brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
.footer-meta {
  color: var(--faint);
  font-size: 0.88rem;
  max-width: 42ch;
  margin-top: 8px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
}
.footer-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.footer-nav a:hover { color: var(--accent); }

.prop .prop-status {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.apps-strip {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.apps-strip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 8px;
}
.apps-strip-links a {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.apps-strip-links a:hover { color: var(--accent); }

.prose pre.specimen {
  margin: 1.2em 0;
  padding: 16px 18px;
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
  overflow-x: auto;
  white-space: pre-wrap;
}
.prose pre.specimen .err {
  color: var(--warn);
  font-weight: 700;
}

/* Mobile nav */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px 24px;
    background: rgba(7, 11, 16, 0.96);
    border-bottom: 1px solid var(--line);
    gap: 4px;
  }
  .nav-links.is-open { display: flex; }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 12px;
    display: none;
  }
  .nav-item.is-open .nav-dropdown { display: block; }
  .nav-cta { margin: 12px 0 0; justify-content: center; }
}

/* ——— Style Selector (2026 + research) ——— */
:root {
  --on-accent: #070b10;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

.style-selector {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: auto;
  z-index: 99999;
  pointer-events: auto;
  background: rgba(255,255,255,0.97);
  color: #111;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  backdrop-filter: blur(10px);
  max-width: min(920px, calc(100vw - 24px));
  max-height: min(42vh, 320px);
  overflow: auto;
}
.style-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.style-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.style-minimize,
.style-expand {
  border: 1px solid #ccc;
  background: #fafafa;
  color: #444;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
}
.style-minimize:hover,
.style-expand:hover { background: #eee; }
.style-expand {
  display: none;
  min-width: 64px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

/* Collapsed selector — only the expand chip remains */
.style-selector.is-minimized {
  left: auto;
  right: 12px;
  bottom: 12px;
  width: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.style-selector.is-minimized > *:not(.style-expand) { display: none !important; }
.style-selector.is-minimized .style-expand {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.96);
  border: 1px solid #ddd;
  color: #111;
}
html[data-selector-min="1"] body { padding-bottom: 4rem; }

/* Fully hidden until ⌥S (Option+S) */
html[data-selector-hidden="1"] .style-selector,
.style-selector.is-hidden {
  display: none !important;
  pointer-events: none !important;
}
html[data-selector-hidden="1"] body {
  padding-bottom: 0;
}

.style-restore {
  border: 1px solid #ccc;
  background: #fafafa;
  color: #444;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}

.style-restore:hover { background: #eee; }
.style-restore[disabled] { opacity: 0.45; cursor: not-allowed; }
.style-restore.is-open {
  background: #111;
  color: #fff;
  border-color: #111;
}

.style-hidden-panel {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f7f7f5;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.style-hidden-panel[hidden] { display: none !important; }
.style-hidden-label {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #888;
}
.style-hidden-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 120px;
  overflow: auto;
}
.style-hidden-empty {
  font-size: 11px;
  color: #888;
  padding: 2px 0;
}
.style-hidden-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed #bbb;
  background: #fff;
  color: #333;
  border-radius: 4px;
  padding: 4px 6px 4px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.style-hidden-item:hover {
  border-color: #111;
  background: #f3f3f1;
}
.style-font-hint {
  margin-top: 6px;
  font-size: 9px;
  opacity: 0.7;
  line-height: 1.35;
}
.style-hidden-name {
  white-space: nowrap;
}
.style-hidden-restore {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #999;
  border-radius: 999px;
  background: #fff;
  color: #222;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.style-hidden-restore:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}
.style-hidden-hint {
  font-size: 10px;
  color: #888;
  line-height: 1.35;
}
.style-label {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #666;
  white-space: nowrap;
}
.style-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.style-group-label {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #888;
}
.style-options {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.style-btn {
  border: 1px solid #ccc;
  background: #fff;
  color: #222;
  padding: 5px 9px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.style-btn.is-hidden {
  display: none !important;
}

.style-btn-remove {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  opacity: 0.55;
  cursor: pointer;
  user-select: none;
}

.style-btn-remove:hover,
.style-btn-remove:focus {
  opacity: 1;
  background: rgba(255, 255, 255, 0.45);
}

.style-btn.active,
.style-btn.is-active,
.style-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}
.style-reset {
  border: 1px solid #ccc;
  background: #fafafa;
  color: #444;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  pointer-events: auto;
}
.style-reset:hover { background: #eee; }

.style-font-readout {
  width: 100%;
  margin: 2px 0 4px;
  padding: 4px 6px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: #444;
  background: #fafafa;
}

html[data-theme] {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

html[data-theme] body,
body.theme-preview {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--sans) !important;
  padding-bottom: 12rem;
}

html[data-theme] body::before,
body.theme-preview::before {
  background: var(--bg) !important;
}

html[data-theme] .hero,
html[data-theme] .layer,
html[data-theme] .ladder,
html[data-theme] .cta-band,
html[data-theme] .nav-dropdown,
html[data-theme] .site-header {
  border-radius: var(--radius-md);
  box-shadow: none;
}

html[data-theme] .hero-brand,
html[data-theme] .hero h1,
html[data-theme] .section h2,
html[data-theme] .page-hero h1,
html[data-theme] .layer h3,
html[data-theme] .brand,
html[data-theme] .cta-band h2,
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.055em;
}

html[data-theme] .nav-links a,
html[data-theme] .nav-trigger,
html[data-theme] .btn,
html[data-theme] .lede,
html[data-theme] .intro,
html[data-theme] p,
html[data-theme] li,
html[data-theme] .layer p {
  font-family: var(--sans) !important;
}

html[data-theme] .layer-meta,
html[data-theme] .rung .h,
html[data-theme] .section-kicker,
html[data-theme] code,
html[data-theme] .mono {
  font-family: var(--mono) !important;
  letter-spacing: 0.04em;
}

html[data-theme] .style-font-readout {
  border-color: var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
}

html[data-theme="anthropic"] .hero-brand,
html[data-theme="anthropic"] .hero h1,
html[data-theme="anthropic"] .section h2 {
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.03em;
}

html[data-theme] .hero-brand {
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: 1.05;
  overflow: visible;
  padding-bottom: 0.06em;
}

html[data-theme] .hero h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.28;
  overflow: visible;
}

html[data-theme] .section h2,
html[data-theme] .page-hero h1,
html[data-theme] h1,
html[data-theme] h2 {
  line-height: 1.3;
  overflow: visible;
  padding-bottom: 0.05em;
}

html[data-theme] .layer {
  border: 1px solid var(--line);
  background: var(--bg-elev);
}

html[data-theme] .layer:hover {
  background: color-mix(in srgb, var(--bg-elev) 92%, var(--accent) 8%);
}

html[data-theme] .btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
}

html[data-theme] .btn-primary {
  background: var(--accent);
  color: var(--on-accent, #ffffff);
  border-color: var(--accent);
}

html[data-theme] .btn-primary:hover {
  background: var(--accent-deep);
  color: var(--on-accent, #ffffff);
}

html[data-theme] .btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}

html[data-theme] .btn-ghost:hover {
  border-color: var(--muted);
  color: var(--ink);
  background: var(--accent-dim);
}

html[data-theme] .nav-links a,
html[data-theme] .nav-trigger {
  font-weight: 500;
  color: var(--muted);
}

html[data-theme] .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  border-bottom-color: var(--line);
  backdrop-filter: blur(12px);
}

html[data-theme] .section {
  border-top-color: var(--line);
}

html[data-theme] .section-kicker {
  color: var(--accent);
}

html[data-theme] a {
  color: var(--accent);
}

html[data-theme] a:hover {
  color: var(--accent-deep);
}

html[data-theme] .nav-links a:hover,
html[data-theme] .nav-trigger:hover,
html[data-theme] .nav-links a[aria-current="page"],
html[data-theme] .nav-trigger[aria-expanded="true"] {
  background: var(--accent-dim);
  color: var(--accent);
}

html[data-theme] .nav-cta {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

html[data-theme] .nav-cta:hover {
  background: var(--accent) !important;
  color: var(--on-accent, #ffffff) !important;
}

html[data-theme] .hero-visual {
  opacity: 0.25;
}

html[data-theme-mode="dark"] .hero-visual {
  opacity: 0.4;
}

html[data-theme] .vision-list li,
html[data-theme] .ladder {
  border-color: var(--line);
}

html[data-theme] .lede,
html[data-theme] .section p {
  color: var(--muted);
}

html[data-theme] .footer {
  border-top-color: var(--line);
  color: var(--muted);
}

html[data-theme] .brand {
  color: var(--ink);
}

html[data-theme] .style-selector {
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

html[data-theme] .style-label,
html[data-theme] .style-group-label { color: var(--muted); }

html[data-theme] .style-btn {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme] .style-btn.active,
html[data-theme] .style-btn.is-active,
html[data-theme] .style-btn:hover {
  background: var(--accent);
  color: var(--on-accent, var(--bg));
  border-color: var(--accent);
}

html[data-theme] .style-reset {
  background: var(--bg-elev);
  color: var(--muted);
  border-color: var(--line);
}

html[data-theme] .style-reset:hover { background: var(--accent-dim); }

/* ——— Per-theme typography & geometry (2026 rebrands) ——— */
html[data-theme="ondo"] .hero-brand,
html[data-theme="ondo"] .hero h1,
html[data-theme="ondo"] .section h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.055em;
}
html[data-theme="ondo"] .hero-brand { font-size: clamp(3.2rem, 6.5vw, 5.5rem); }
html[data-theme="ondo"] .layer-meta,
html[data-theme="ondo"] .section-kicker { letter-spacing: 0.2em; }

html[data-theme="aptos"] .hero-brand,
html[data-theme="aptos"] .hero h1,
html[data-theme="aptos"] .section h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
}
html[data-theme="aptos"] .hero-brand { font-size: clamp(3.4rem, 7vw, 6.5rem); }
html[data-theme="aptos"] .layer { border-radius: var(--radius-md); }

html[data-theme="chainalysis"] .hero-brand,
html[data-theme="chainalysis"] .hero h1,
html[data-theme="chainalysis"] .section h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.045em;
}
html[data-theme="chainalysis"] .hero-brand { font-size: clamp(3.4rem, 7.5vw, 7rem); }
html[data-theme="chainalysis"] .section-kicker,
html[data-theme="chainalysis"] .layer-meta { letter-spacing: 0.18em; }

html[data-theme="revolut"] .hero-brand,
html[data-theme="revolut"] .hero h1,
html[data-theme="revolut"] .section h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
}
html[data-theme="revolut"] .hero-brand { font-size: clamp(3.4rem, 7vw, 6.8rem); }
html[data-theme="revolut"] .btn { border-radius: var(--radius-sm); }

html[data-theme="monzo"] .hero-brand,
html[data-theme="monzo"] .hero h1,
html[data-theme="monzo"] .section h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.02em;
}
html[data-theme="monzo"] .hero-brand { font-size: clamp(3.2rem, 6.5vw, 6rem); }
html[data-theme="monzo"] .layer { border-radius: var(--radius-lg); }
html[data-theme="monzo"] .layer:hover { background: color-mix(in srgb, var(--bg-elev) 88%, var(--accent) 12%); }

html[data-theme="sky"] .hero-brand,
html[data-theme="sky"] .hero h1,
html[data-theme="sky"] .section h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.04em;
}
html[data-theme="sky"] .hero-brand { font-size: clamp(3.2rem, 6.8vw, 6.4rem); }
html[data-theme="sky"] .btn-primary,
html[data-theme="sky"] .btn { border-radius: var(--radius-lg); }

/* Luminous Blue — paper + blue accent · Geist + IBM Plex + sparse Instrument Serif */
html[data-theme="luminous"] .hero-brand,
html[data-theme="luminous"] .hero h1,
html[data-theme="luminous"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.055em;
}
html[data-theme="luminous"] .hero-brand { font-size: clamp(3.5rem, 7vw, 7rem); line-height: 1.05; }
html[data-theme="luminous"] .layer { border: 1px solid var(--line); background: var(--bg-elev); }
html[data-theme="luminous"] .btn { border-radius: var(--radius-sm); font-weight: 500; }
html[data-theme="luminous"] .section-kicker {
  font-family: var(--serif) !important;
  font-style: italic;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-transform: none;
}
html[data-theme="luminous"] .lede {
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}
html[data-theme="luminous"] .vision-list li strong {
  font-family: var(--serif) !important;
  font-style: italic;
}

/* Luminous Field — full blue ground, light type */
html[data-theme="luminous-field"] .hero-brand,
html[data-theme="luminous-field"] .hero h1,
html[data-theme="luminous-field"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.055em;
  color: var(--ink);
}
html[data-theme="luminous-field"] .hero-brand { font-size: clamp(3.5rem, 7vw, 7rem); line-height: 1.05; }
html[data-theme="luminous-field"] .layer {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
}
html[data-theme="luminous-field"] .btn { border-radius: var(--radius-sm); font-weight: 500; }
html[data-theme="luminous-field"] .section-kicker {
  font-family: var(--serif) !important;
  font-style: italic;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-transform: none;
  color: var(--accent-deep);
}
html[data-theme="luminous-field"] .lede {
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 400;
  color: rgba(245, 244, 239, 0.88);
}
html[data-theme="luminous-field"] .vision-list li strong {
  font-family: var(--serif) !important;
  font-style: italic;
}
html[data-theme="luminous-field"] .site-header {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom-color: var(--line);
}
html[data-theme="luminous-field"] .btn-ghost {
  border-color: rgba(245, 244, 239, 0.35);
  color: var(--ink);
}
html[data-theme="luminous-field"] .btn-primary {
  background: #FFFFFF;
  color: #2A3AD4;
  border-color: #FFFFFF;
}
html[data-theme="luminous-field"] .btn-primary:hover {
  background: #E8EBFF;
  color: #2A3AD4;
  border-color: #E8EBFF;
}
html[data-theme="luminous-field"] .nav-cta {
  border-color: rgba(245, 244, 239, 0.55) !important;
  color: #F5F4EF !important;
}
html[data-theme="luminous-field"] .nav-cta:hover {
  background: #FFFFFF !important;
  color: #2A3AD4 !important;
}

/* Luminous Liquid — Apple Liquid Glass on luminous blue
   Frosted translucency, specular edges, soft refraction, continuous radii */
html[data-theme="luminous-liquid"] {
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
}

html[data-theme="luminous-liquid"] body::before {
  inset: -8%;
  background:
    radial-gradient(ellipse 80% 60% at 8% 12%, rgba(255, 255, 255, 0.28), transparent 52%),
    radial-gradient(ellipse 70% 55% at 92% 18%, rgba(232, 235, 255, 0.35), transparent 48%),
    radial-gradient(ellipse 55% 45% at 48% 88%, rgba(101, 118, 255, 0.55), transparent 55%),
    radial-gradient(ellipse 40% 35% at 70% 55%, rgba(66, 85, 245, 0.4), transparent 50%),
    linear-gradient(165deg, #6576FF 0%, #4255F5 42%, #2E3FD4 100%);
  background-size: 120% 120%;
  background-position: 40% 40%;
  animation: liquid-shift 22s ease-in-out infinite alternate;
}

@keyframes liquid-shift {
  0% {
    background-position: 30% 35%;
    filter: hue-rotate(0deg) saturate(1);
  }
  100% {
    background-position: 65% 55%;
    filter: hue-rotate(10deg) saturate(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="luminous-liquid"] body::before {
    animation: none;
    filter: none;
    background-position: 50% 50%;
  }
}

html[data-theme="luminous-liquid"] .hero-brand,
html[data-theme="luminous-liquid"] .hero h1,
html[data-theme="luminous-liquid"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.055em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}
html[data-theme="luminous-liquid"] .hero-brand {
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: 1.05;
}

html[data-theme="luminous-liquid"] .section-kicker {
  font-family: var(--serif) !important;
  font-style: italic;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-transform: none;
  color: rgba(255, 255, 255, 0.88);
}
html[data-theme="luminous-liquid"] .lede {
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 400;
  color: rgba(247, 246, 242, 0.9);
}
html[data-theme="luminous-liquid"] .vision-list li strong {
  font-family: var(--serif) !important;
  font-style: italic;
}

/* Shared glass material */
html[data-theme="luminous-liquid"] .site-header,
html[data-theme="luminous-liquid"] .layer,
html[data-theme="luminous-liquid"] .nav-dropdown,
html[data-theme="luminous-liquid"] .cta-band,
html[data-theme="luminous-liquid"] .ladder,
html[data-theme="luminous-liquid"] .prop,
html[data-theme="luminous-liquid"] .style-selector {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(20, 30, 120, 0.18),
    0 1px 2px rgba(20, 30, 120, 0.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
  backdrop-filter: blur(28px) saturate(1.55);
}

html[data-theme="luminous-liquid"] .site-header {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 28px rgba(20, 30, 120, 0.12);
}

html[data-theme="luminous-liquid"] .layers {
  background: transparent;
  border: none;
  gap: 14px;
  overflow: visible;
  border-radius: 0;
}
html[data-theme="luminous-liquid"] .layer {
  border-radius: var(--radius-md);
  color: var(--ink);
  transition:
    background 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
html[data-theme="luminous-liquid"] .layer:hover {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 16px 40px rgba(20, 30, 120, 0.22),
    0 2px 6px rgba(20, 30, 120, 0.1);
  transform: translateY(-2px);
}

html[data-theme="luminous-liquid"] .layer ul li {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(247, 246, 242, 0.85);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

html[data-theme="luminous-liquid"] .btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transition:
    background 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
html[data-theme="luminous-liquid"] .btn-primary {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.82) 100%
  );
  color: #2E3FD4;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 6px 20px rgba(20, 30, 120, 0.2);
}
html[data-theme="luminous-liquid"] .btn-primary:hover {
  background: #FFFFFF;
  color: #2E3FD4;
  border-color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 10px 28px rgba(20, 30, 120, 0.28);
  transform: translateY(-1px);
}
html[data-theme="luminous-liquid"] .btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
html[data-theme="luminous-liquid"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--ink);
}

html[data-theme="luminous-liquid"] .nav-cta {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #F7F6F2 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html[data-theme="luminous-liquid"] .nav-cta:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #2E3FD4 !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="luminous-liquid"] .nav-dropdown {
  border-radius: var(--radius-md);
  overflow: hidden;
}
html[data-theme="luminous-liquid"] .nav-dropdown a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

html[data-theme="luminous-liquid"] .cta-band,
html[data-theme="luminous-liquid"] .ladder {
  border-radius: var(--radius-lg);
}

html[data-theme="luminous-liquid"] .vision-list li {
  border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="luminous-liquid"] .section {
  border-top-color: rgba(255, 255, 255, 0.16);
}

html[data-theme="luminous-liquid"] .hero-visual {
  opacity: 0.14;
}

html[data-theme="luminous-liquid"] .style-selector {
  border-radius: var(--radius-md);
  color: var(--ink);
}
html[data-theme="luminous-liquid"] .style-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
html[data-theme="luminous-liquid"] .style-btn.active,
html[data-theme="luminous-liquid"] .style-btn.is-active,
html[data-theme="luminous-liquid"] .style-btn:hover {
  background: rgba(255, 255, 255, 0.92);
  color: #2E3FD4;
  border-color: rgba(255, 255, 255, 0.95);
}
html[data-theme="luminous-liquid"] .style-reset {
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Creative · Swiss/financial — palettes in CSS so themes work even if JS map lags */
html[data-theme="luminous-swiss"] {
  color-scheme: light;
  --bg: #F7F7F2;
  --bg-elev: #FFFFFF;
  --ink: #111111;
  --muted: #5C5C5C;
  --faint: #8A8A8A;
  --line: rgba(17,17,17,.12);
  --accent: #DA291C;
  --accent-dim: rgba(218,41,28,0.12);
  --accent-deep: #B01F16;
  --on-accent: #FFFFFF;
  --warn: #1D3A8A;
  --display: Geist, "Geist Sans", Outfit, "Inter Tight", Inter, system-ui, sans-serif;
  --sans: Outfit, Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="luminous-swiss"] .hero-brand,
html[data-theme="luminous-swiss"] .hero h1,
html[data-theme="luminous-swiss"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.055em;
}
html[data-theme="luminous-swiss"] .hero-brand {
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: 1.05;
}
html[data-theme="luminous-swiss"] .section-kicker { color: var(--accent); }
html[data-theme="luminous-swiss"] .layer {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  background: var(--bg-elev);
}
html[data-theme="luminous-swiss"] .layer:hover {
  background: color-mix(in srgb, var(--bg-elev) 90%, var(--accent) 10%);
}
html[data-theme="luminous-swiss"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(218,41,28,.18);
}
html[data-theme="luminous-swiss"] .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
}

html[data-theme="helvetic-lumen"] {
  color-scheme: light;
  --bg: #F3F5F8;
  --bg-elev: #FFFFFF;
  --ink: #111827;
  --muted: #4B5563;
  --faint: #778295;
  --line: rgba(15,23,42,.10);
  --accent: #0678FF;
  --accent-dim: rgba(6,120,255,0.14);
  --accent-deep: #0357B8;
  --on-accent: #FFFFFF;
  --warn: #EAB308;
  --display: "Inter Tight", Inter, system-ui, sans-serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html[data-theme="helvetic-lumen"] .hero-brand,
html[data-theme="helvetic-lumen"] .hero h1,
html[data-theme="helvetic-lumen"] .section h2 {
  font-family: var(--display) !important;
  letter-spacing: -0.055em;
  font-weight: 500;
}
html[data-theme="helvetic-lumen"] .hero-brand {
  font-size: clamp(3.4rem, 6.8vw, 6.4rem);
}
html[data-theme="helvetic-lumen"] .btn,
html[data-theme="helvetic-lumen"] .style-btn,
html[data-theme="helvetic-lumen"] .nav-cta {
  border-radius: 999px;
}
html[data-theme="helvetic-lumen"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
html[data-theme="helvetic-lumen"] .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

html[data-theme="bern-registry"] {
  color-scheme: light;
  --bg: #F2F4F8;
  --bg-elev: #FFFFFF;
  --ink: #18212F;
  --muted: #51627A;
  --faint: #7E8FA8;
  --line: rgba(24,33,47,.12);
  --accent: #2D3F54;
  --accent-dim: rgba(45,63,84,0.12);
  --accent-deep: #243145;
  --on-accent: #FFFFFF;
  --warn: #EAB308;
  --display: "DM Sans", Inter, system-ui, sans-serif;
  --sans: "DM Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html[data-theme="bern-registry"] .hero-brand,
html[data-theme="bern-registry"] .hero h1,
html[data-theme="bern-registry"] .section h2,
html[data-theme="bern-registry"] .layer h3 {
  font-family: var(--display) !important;
}
html[data-theme="bern-registry"] .hero-brand {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
html[data-theme="bern-registry"] .layer {
  border-left: 4px solid var(--accent);
  background: var(--bg-elev);
}
html[data-theme="bern-registry"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
html[data-theme="bern-registry"] .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

html[data-theme="geneva-horizon"] {
  color-scheme: light;
  --bg: #F7FAFD;
  --bg-elev: #FFFFFF;
  --ink: #08172A;
  --muted: #42556D;
  --faint: #7486A0;
  --line: rgba(8,23,42,.10);
  --accent: #1E5EA8;
  --accent-dim: rgba(30,94,168,0.12);
  --accent-deep: #1B4B86;
  --on-accent: #FFFFFF;
  --warn: #F59E0B;
  --display: Outfit, Inter, system-ui, sans-serif;
  --sans: Outfit, Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html[data-theme="geneva-horizon"] .hero-brand,
html[data-theme="geneva-horizon"] .hero h1,
html[data-theme="geneva-horizon"] .section h2 {
  font-family: var(--display) !important;
}
html[data-theme="geneva-horizon"] .hero-brand {
  font-size: clamp(3.4rem, 7.1vw, 6.6rem);
}
html[data-theme="geneva-horizon"] .layer {
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
html[data-theme="geneva-horizon"] .btn-primary {
  background: linear-gradient(180deg, #1B5EA8, #13477E);
  color: #FFFFFF;
  border-color: #13477E;
}
html[data-theme="geneva-horizon"] .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

html[data-theme="zurich-archive"] {
  color-scheme: dark;
  --bg: #0A101A;
  --bg-elev: #121A28;
  --ink: #E9EEF8;
  --muted: #9AADCB;
  --faint: #6A7CA6;
  --line: rgba(206,215,236,.12);
  --accent: #3D64D2;
  --accent-dim: rgba(61,100,210,0.18);
  --accent-deep: #294FB0;
  --on-accent: #FFFFFF;
  --warn: #F59E0B;
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
  --sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html[data-theme="zurich-archive"] .hero-brand,
html[data-theme="zurich-archive"] .hero h1,
html[data-theme="zurich-archive"] .section h2 {
  font-family: var(--display) !important;
  letter-spacing: -0.06em;
}
html[data-theme="zurich-archive"] .hero-brand {
  font-size: clamp(3.3rem, 7vw, 6.6rem);
}
html[data-theme="zurich-archive"] .layer {
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  position: relative;
}
html[data-theme="zurich-archive"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
html[data-theme="zurich-archive"] .site-header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}

html[data-theme="alpine-ledger"] {
  color-scheme: light;
  --bg: #F5FAFE;
  --bg-elev: #FFFFFF;
  --ink: #0D1B2A;
  --muted: #43566F;
  --faint: #7086A0;
  --line: rgba(13,27,42,.10);
  --accent: #0D6EFD;
  --accent-dim: rgba(13,110,253,0.12);
  --accent-deep: #0A56C7;
  --on-accent: #FFFFFF;
  --warn: #10B981;
  --display: Inter, system-ui, sans-serif;
  --sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html[data-theme="alpine-ledger"] .hero-brand,
html[data-theme="alpine-ledger"] .hero h1,
html[data-theme="alpine-ledger"] .section h2 {
  font-family: var(--display) !important;
  letter-spacing: -0.055em;
}
html[data-theme="alpine-ledger"] .hero-brand {
  font-size: clamp(3.2rem, 6.6vw, 6.2rem);
}
html[data-theme="alpine-ledger"] .btn,
html[data-theme="alpine-ledger"] .nav-cta {
  border-radius: var(--radius-md);
}
html[data-theme="alpine-ledger"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
html[data-theme="alpine-ledger"] .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

html[data-theme="proof-olive"] {
  color-scheme: light;
  --bg: #F6F7F1;
  --bg-elev: #FDFDF9;
  --ink: #101B12;
  --muted: #5A6559;
  --faint: #7F8A7C;
  --line: rgba(16,27,18,.12);
  --accent: #1A5E32;
  --accent-dim: rgba(26,94,50,0.12);
  --accent-deep: #164A2A;
  --on-accent: #FFFFFF;
  --warn: #B45309;
  --display: "Inter Tight", Inter, system-ui, sans-serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html[data-theme="proof-olive"] .hero-brand,
html[data-theme="proof-olive"] .hero h1,
html[data-theme="proof-olive"] .section h2 {
  font-family: var(--display) !important;
}
html[data-theme="proof-olive"] .section-kicker { color: var(--accent); }
html[data-theme="proof-olive"] .hero-brand { color: var(--accent); }
html[data-theme="proof-olive"] .btn { border-radius: 999px; }
html[data-theme="proof-olive"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
html[data-theme="proof-olive"] .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

html[data-theme="lumo-blueprint"] {
  color-scheme: light;
  --bg: #F4F3EE;
  --bg-elev: #FFFFFF;
  --ink: #0B0D10;
  --muted: #4B5160;
  --faint: #717A88;
  --line: rgba(11,13,16,.12);
  --accent: #355CFF;
  --accent-dim: rgba(53,92,255,0.12);
  --accent-deep: #2847CA;
  --on-accent: #FFFFFF;
  --warn: #EAB308;
  --display: Outfit, Inter, system-ui, sans-serif;
  --sans: Outfit, Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html[data-theme="lumo-blueprint"] .hero-brand,
html[data-theme="lumo-blueprint"] .hero h1,
html[data-theme="lumo-blueprint"] .section h2 {
  font-family: var(--display) !important;
  letter-spacing: -0.05em;
  font-weight: 500;
}
html[data-theme="lumo-blueprint"] .hero-brand {
  font-size: clamp(3.4rem, 7vw, 7rem);
}
html[data-theme="lumo-blueprint"] .layer {
  border-radius: 0;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  background: var(--bg-elev);
}
html[data-theme="lumo-blueprint"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
html[data-theme="lumo-blueprint"] .site-header {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}

html[data-theme="canton-crown"] {
  color-scheme: dark;
  --bg: #081425;
  --bg-elev: #11263D;
  --ink: #EDF2F8;
  --muted: #96A9C2;
  --faint: #667B96;
  --line: rgba(237,242,248,.12);
  --accent: #1B4F9C;
  --accent-dim: rgba(27,79,156,0.16);
  --accent-deep: #123A75;
  --on-accent: #FFFFFF;
  --warn: #F59E0B;
  --display: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html[data-theme="canton-crown"] .hero-brand,
html[data-theme="canton-crown"] .hero h1,
html[data-theme="canton-crown"] .section h2 {
  font-family: var(--display) !important;
}
html[data-theme="canton-crown"] .hero-brand {
  font-size: clamp(3.3rem, 6.6vw, 6.3rem);
  letter-spacing: -0.06em;
}
html[data-theme="canton-crown"] .btn,
html[data-theme="canton-crown"] .nav-cta {
  border-radius: var(--radius-sm);
  border-width: 2px;
}
html[data-theme="canton-crown"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
html[data-theme="canton-crown"] .layers { gap: 6px; }
html[data-theme="canton-crown"] .site-header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}

html[data-theme="nordic-glass"] {
  color-scheme: light;
  --bg: #F5F8FC;
  --bg-elev: rgba(255,255,255,0.72);
  --ink: #0D1F35;
  --muted: #5A6E88;
  --faint: #8EA0B8;
  --line: rgba(13,31,53,.14);
  --accent: #2D70BF;
  --accent-dim: rgba(45,112,191,0.16);
  --accent-deep: #24588D;
  --on-accent: #FFFFFF;
  --warn: #10B981;
  --display: Geist, "Geist Sans", Outfit, Inter, system-ui, sans-serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
html[data-theme="nordic-glass"] .hero-brand,
html[data-theme="nordic-glass"] .hero h1,
html[data-theme="nordic-glass"] .section h2 {
  font-family: var(--display) !important;
  letter-spacing: -0.055em;
}
html[data-theme="nordic-glass"] .hero-brand {
  font-size: clamp(3.2rem, 6.8vw, 6.5rem);
}
html[data-theme="nordic-glass"] .hero-visual { opacity: 0.18; }
html[data-theme="nordic-glass"] .site-header,
html[data-theme="nordic-glass"] .layer,
html[data-theme="nordic-glass"] .btn-ghost,
html[data-theme="nordic-glass"] .cta-band {
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  background: color-mix(in srgb, #FFFFFF 72%, transparent);
  border: 1px solid var(--line);
}
html[data-theme="nordic-glass"] .btn { border-radius: var(--radius-md); }
html[data-theme="nordic-glass"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
html[data-theme="nordic-glass"] .style-btn { border-radius: 999px; }
html[data-theme="nordic-glass"] .style-selector {
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* ═══ Concept · protocol themes — palettes in CSS so each works from data-theme alone ═══ */

/* Sealed Ledger — compliance as notarial authority: ivory, oxblood seal, serif */
html[data-theme="sealed-ledger"] {
  color-scheme: light;
  --bg: #FBF8F1;
  --bg-elev: #FFFFFF;
  --ink: #221C15;
  --muted: #6B6053;
  --faint: #998D7D;
  --line: rgba(34,28,21,.14);
  --accent: #7A1E1E;
  --accent-dim: rgba(122,30,30,0.10);
  --accent-deep: #5C1414;
  --on-accent: #FBF8F1;
  --warn: #1A5E32;
  --display: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="sealed-ledger"] body::before { background: var(--bg); }
html[data-theme="sealed-ledger"] .hero-brand,
html[data-theme="sealed-ledger"] .hero h1,
html[data-theme="sealed-ledger"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.02em;
}
html[data-theme="sealed-ledger"] .hero-brand { font-size: clamp(3.4rem, 7vw, 6.8rem); line-height: 1.08; }
html[data-theme="sealed-ledger"] .section { border-top: 3px double var(--line); }
html[data-theme="sealed-ledger"] .layer {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
}
html[data-theme="sealed-ledger"] .section-kicker { color: var(--accent); letter-spacing: 0.22em; }
html[data-theme="sealed-ledger"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  border-radius: var(--radius-xs);
}
html[data-theme="sealed-ledger"] .hero-visual { opacity: 0.1; }

/* Redacted — selective disclosure: ink bars + highlighter yellow on stark white */
html[data-theme="redacted"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-elev: #F7F7F5;
  --ink: #0A0A0A;
  --muted: #4A4A4A;
  --faint: #8C8C8C;
  --line: rgba(10,10,10,.16);
  --accent: #0A0A0A;
  --accent-dim: rgba(255,216,77,0.45);
  --accent-deep: #333333;
  --on-accent: #FFD84D;
  --warn: #B45309;
  --display: "Inter Tight", Inter, system-ui, sans-serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="redacted"] body::before { background: var(--bg); }
html[data-theme="redacted"] ::selection { background: #FFD84D; color: #0A0A0A; }
html[data-theme="redacted"] .hero-brand,
html[data-theme="redacted"] .hero h1,
html[data-theme="redacted"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 600;
  letter-spacing: -0.05em;
}
html[data-theme="redacted"] .hero-brand { font-size: clamp(3.6rem, 8vw, 7.5rem); line-height: 1.05; }
html[data-theme="redacted"] .section-kicker {
  display: inline-block;
  background: var(--ink);
  color: #FFFFFF;
  padding: 4px 10px;
  letter-spacing: 0.18em;
}
html[data-theme="redacted"] a { color: var(--ink); background: rgba(255,216,77,0.55); text-decoration-color: var(--ink); }
html[data-theme="redacted"] a:hover { background: #FFD84D; color: var(--ink); }
html[data-theme="redacted"] .layer { background: var(--bg); border: 1.5px solid var(--ink); }
html[data-theme="redacted"] .layer:hover { background: var(--bg-elev); }
html[data-theme="redacted"] .btn-primary { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
html[data-theme="redacted"] .btn-primary:hover { background: var(--ink); color: #FFD84D; }
html[data-theme="redacted"] .btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); }
html[data-theme="redacted"] .hero-visual { opacity: 0.06; }

/* One-Way Mirror — zero-knowledge: dark silvered glass, single verified green */
html[data-theme="oneway-mirror"] {
  color-scheme: dark;
  --bg: #0B0D10;
  --bg-elev: rgba(201,205,214,0.06);
  --ink: #E6E9EF;
  --muted: #9AA1AC;
  --faint: #646B76;
  --line: rgba(201,205,214,.16);
  --accent: #18A66A;
  --accent-dim: rgba(24,166,106,0.14);
  --accent-deep: #128552;
  --on-accent: #FFFFFF;
  --warn: #E6A23C;
  --display: Geist, "Geist Sans", Outfit, "Inter Tight", Inter, system-ui, sans-serif;
  --sans: Geist, "Geist Sans", Outfit, "Inter Tight", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="oneway-mirror"] body::before {
  background:
    linear-gradient(160deg, rgba(201,205,214,0.05), transparent 40%),
    var(--bg);
}
html[data-theme="oneway-mirror"] .hero-brand,
html[data-theme="oneway-mirror"] .hero h1,
html[data-theme="oneway-mirror"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.045em;
}
html[data-theme="oneway-mirror"] .layer,
html[data-theme="oneway-mirror"] .cta-band {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
html[data-theme="oneway-mirror"] .layer:hover { background: rgba(201,205,214,0.10); }
html[data-theme="oneway-mirror"] .site-header {
  background: rgba(11,13,16,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-theme="oneway-mirror"] .section-kicker { color: var(--accent); }
html[data-theme="oneway-mirror"] .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* PQ Lattice — post-quantum: graph paper, indigo, mono display */
html[data-theme="pq-lattice"] {
  color-scheme: light;
  --bg: #F4F5F9;
  --bg-elev: #FFFFFF;
  --ink: #14162B;
  --muted: #4E5370;
  --faint: #7C81A0;
  --line: rgba(20,22,43,.14);
  --accent: #3B3FBF;
  --accent-dim: rgba(59,63,191,0.10);
  --accent-deep: #2C2F94;
  --on-accent: #FFFFFF;
  --warn: #B45309;
  --display: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="pq-lattice"] body::before {
  background:
    linear-gradient(rgba(59,63,191,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,63,191,0.045) 1px, transparent 1px),
    var(--bg);
  background-size: 28px 28px, 28px 28px, auto;
}
html[data-theme="pq-lattice"] .hero-brand,
html[data-theme="pq-lattice"] .hero h1,
html[data-theme="pq-lattice"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.04em;
}
html[data-theme="pq-lattice"] .hero-brand { font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: 1.08; }
html[data-theme="pq-lattice"] .layer { background: var(--bg-elev); border: 1px solid var(--accent-dim); outline: 1px solid var(--line); }
html[data-theme="pq-lattice"] .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
html[data-theme="pq-lattice"] .hero-visual { opacity: 0.15; }

/* Quantum Slate — post-quantum dark: slate + ultramarine, sharp edges */
html[data-theme="quantum-slate"] {
  color-scheme: dark;
  --bg: #0C1013;
  --bg-elev: #141A1F;
  --ink: #E8ECF2;
  --muted: #98A2B0;
  --faint: #5F6975;
  --line: rgba(232,236,242,.10);
  --accent: #4E5DFF;
  --accent-dim: rgba(78,93,255,0.16);
  --accent-deep: #3948E0;
  --on-accent: #FFFFFF;
  --warn: #E6A23C;
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
  --sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="quantum-slate"] body::before {
  background:
    radial-gradient(ellipse 70% 45% at 80% -5%, rgba(78,93,255,0.14), transparent 55%),
    var(--bg);
}
html[data-theme="quantum-slate"] .hero-brand,
html[data-theme="quantum-slate"] .hero h1,
html[data-theme="quantum-slate"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.03em;
}
html[data-theme="quantum-slate"] .layer { background: var(--bg-elev); border: 1px solid var(--line); border-left: 2px solid var(--accent); }
html[data-theme="quantum-slate"] .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
html[data-theme="quantum-slate"] .section-kicker { color: var(--accent); }

/* Mesh Federation — decentralization: dot-grid mesh, warm paper, signal orange */
html[data-theme="mesh-federation"] {
  color-scheme: light;
  --bg: #FAF6F0;
  --bg-elev: #FFFFFF;
  --ink: #1C1814;
  --muted: #665E54;
  --faint: #948B7F;
  --line: rgba(28,24,20,.12);
  --accent: #E8590C;
  --accent-dim: rgba(232,89,12,0.10);
  --accent-deep: #C2410C;
  --on-accent: #FFFFFF;
  --warn: #1A5E32;
  --display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --sans: "DM Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="mesh-federation"] body::before {
  background:
    radial-gradient(rgba(28,24,20,0.10) 1px, transparent 1.5px),
    var(--bg);
  background-size: 22px 22px, auto;
}
html[data-theme="mesh-federation"] .hero-brand,
html[data-theme="mesh-federation"] .hero h1,
html[data-theme="mesh-federation"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 600;
  letter-spacing: -0.035em;
}
html[data-theme="mesh-federation"] .layer { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-md); }
html[data-theme="mesh-federation"] .layer:hover { background: color-mix(in srgb, var(--bg-elev) 94%, var(--accent) 6%); }
html[data-theme="mesh-federation"] .btn { border-radius: 999px; }
html[data-theme="mesh-federation"] .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Interop Weave — interoperability: teal × cobalt two-tone weave */
html[data-theme="interop-weave"] {
  color-scheme: light;
  --bg: #F6F7F4;
  --bg-elev: #FFFFFF;
  --ink: #101614;
  --muted: #525E59;
  --faint: #7E8A85;
  --line: rgba(16,22,20,.12);
  --accent: #0F766E;
  --accent-dim: rgba(15,118,110,0.10);
  --accent-deep: #2563EB;
  --on-accent: #FFFFFF;
  --warn: #B45309;
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="interop-weave"] body::before { background: var(--bg); }
html[data-theme="interop-weave"] .hero-brand,
html[data-theme="interop-weave"] .hero h1,
html[data-theme="interop-weave"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.04em;
}
html[data-theme="interop-weave"] .section h2 {
  display: inline-block;
  background-image: linear-gradient(90deg, #0F766E, #2563EB);
  background-size: 100% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 8px;
}
html[data-theme="interop-weave"] .layer { background: var(--bg-elev); border: 1px solid var(--line); }
html[data-theme="interop-weave"] .layer:nth-child(odd) { border-top: 2px solid #0F766E; }
html[data-theme="interop-weave"] .layer:nth-child(even) { border-top: 2px solid #2563EB; }
html[data-theme="interop-weave"] .btn-primary {
  background: linear-gradient(100deg, #0F766E, #2563EB);
  color: var(--on-accent);
  border-color: transparent;
}
html[data-theme="interop-weave"] .section-kicker { color: #2563EB; }

/* Attestation Ink — disclosure as document: cream, ink, verdigris seal, serif ledes */
html[data-theme="attestation-ink"] {
  color-scheme: light;
  --bg: #FBF7EE;
  --bg-elev: #FFFDF8;
  --ink: #1A1712;
  --muted: #5F584C;
  --faint: #8D8577;
  --line: rgba(26,23,18,.14);
  --accent: #2F6F5E;
  --accent-dim: rgba(47,111,94,0.10);
  --accent-deep: #245548;
  --on-accent: #FBF7EE;
  --warn: #B45309;
  --display: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="attestation-ink"] body::before { background: var(--bg); }
html[data-theme="attestation-ink"] .hero-brand,
html[data-theme="attestation-ink"] .hero h1,
html[data-theme="attestation-ink"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 400;
  letter-spacing: -0.015em;
}
html[data-theme="attestation-ink"] .hero-brand { font-size: clamp(3.4rem, 7vw, 6.6rem); line-height: 1.08; }
html[data-theme="attestation-ink"] .lede,
html[data-theme="attestation-ink"] .section .intro {
  font-family: var(--serif) !important;
  font-style: italic;
}
html[data-theme="attestation-ink"] .layer { background: var(--bg-elev); border: 1px solid var(--line); }
html[data-theme="attestation-ink"] .vision-list li { border-top: 1px solid var(--line); }
html[data-theme="attestation-ink"] .section-kicker { color: var(--accent); letter-spacing: 0.2em; }
html[data-theme="attestation-ink"] .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
html[data-theme="attestation-ink"] .hero-visual { opacity: 0.08; }

/* Glacier Notary — Swiss compliance: glacial ice blues, crisp precision */
html[data-theme="glacier-notary"] {
  color-scheme: light;
  --bg: #EAF2F7;
  --bg-elev: #FFFFFF;
  --ink: #0C2231;
  --muted: #48606F;
  --faint: #7A8F9C;
  --line: rgba(12,34,49,.12);
  --accent: #0E4C6D;
  --accent-dim: rgba(14,76,109,0.10);
  --accent-deep: #093750;
  --on-accent: #FFFFFF;
  --warn: #18A66A;
  --display: Geist, "Geist Sans", Outfit, "Inter Tight", Inter, system-ui, sans-serif;
  --sans: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="glacier-notary"] body::before {
  background:
    linear-gradient(180deg, #F2F7FA, var(--bg) 40%),
    var(--bg);
}
html[data-theme="glacier-notary"] .hero-brand,
html[data-theme="glacier-notary"] .hero h1,
html[data-theme="glacier-notary"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.05em;
}
html[data-theme="glacier-notary"] .layer {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(12,34,49,0.05);
}
html[data-theme="glacier-notary"] .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
html[data-theme="glacier-notary"] .section-kicker { color: var(--accent); }

/* Open Ledger — transparency: ledger-book paper, ruled lines, tabular numerals */
html[data-theme="open-ledger"] {
  color-scheme: light;
  --bg: #F1F5EE;
  --bg-elev: #FDFEFB;
  --ink: #15201A;
  --muted: #576459;
  --faint: #83907F;
  --line: rgba(21,32,26,.16);
  --accent: #246B45;
  --accent-dim: rgba(36,107,69,0.10);
  --accent-deep: #1A5233;
  --on-accent: #FFFFFF;
  --warn: #C0392B;
  --display: "Inter Tight", Inter, system-ui, sans-serif;
  --sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
}
html[data-theme="open-ledger"] body::before {
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 31px, rgba(36,107,69,0.05) 31px, rgba(36,107,69,0.05) 32px),
    var(--bg);
}
html[data-theme="open-ledger"] body { font-variant-numeric: tabular-nums; }
html[data-theme="open-ledger"] .hero-brand,
html[data-theme="open-ledger"] .hero h1,
html[data-theme="open-ledger"] .section h2 {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -0.045em;
}
html[data-theme="open-ledger"] .layer { background: var(--bg-elev); border: 1px solid var(--line); }
html[data-theme="open-ledger"] .vision-list li,
html[data-theme="open-ledger"] .vision-list li:last-child { border-color: var(--line); }
html[data-theme="open-ledger"] .layer-meta,
html[data-theme="open-ledger"] .section-kicker { color: var(--accent); }
html[data-theme="open-ledger"] .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
html[data-theme="open-ledger"] .hero-visual { opacity: 0.12; }

/* ============================================================
   MOTION PRESETS — additive layer (data-anim) on ANY theme
   2026 UX advances: spring physics, scroll-stagger, aperture,
   quantum phase, mesh federation, attestation flow.
   Respects @media (prefers-reduced-motion)
   ============================================================ */

:root {
  --spring-ease: linear(0 0%, 0.22 12%, 0.5 28%, 0.78 48%, 0.92 68%, 1 100%);
  --liquid-ease: cubic-bezier(0.23, 1.0, 0.32, 1);
}

/* Base: when any motion active, upgrade base transitions.
   Do NOT retarget .nav-dropdown / .site-header — motion transitions
   fight hover open/close and drop the Applications menu. */
html[data-anim]:not([data-anim="none"]) .btn,
html[data-anim]:not([data-anim="none"]) .layer {
  transition-duration: 280ms;
  transition-timing-function: var(--spring-ease);
}

/* Nav stays interactive above all motion overlays */
html[data-anim] .site-header,
html[data-anim~="aurora"] .site-header,
html[data-anim~="scan"] .site-header,
html[data-anim~="scan-decode"] .site-header,
html[data-anim~="depth"] .site-header,
html[data-anim~="grav"] .site-header,
html[data-anim~="prism"] .site-header {
  position: sticky !important;
  z-index: 200 !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
}
html[data-anim] .nav-dropdown,
html[data-anim~="liquid"] .nav-dropdown {
  z-index: 30 !important;
  pointer-events: none;
  /* keep open/close snappy; ignore liquid spring on the menu */
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s !important;
  transform: translateY(4px) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-anim] .nav-item:hover .nav-dropdown,
html[data-anim] .nav-item:focus-within .nav-dropdown,
html[data-anim] .nav-item.is-open .nav-dropdown,
html[data-anim~="liquid"] .nav-item:hover .nav-dropdown,
html[data-anim~="liquid"] .nav-item:focus-within .nav-dropdown,
html[data-anim~="liquid"] .nav-item.is-open .nav-dropdown {
  pointer-events: auto !important;
  transform: translateY(6px) !important;
}

/* SUBTLE — refined craft (visible on hover + soft card lift) */
html[data-anim~="subtle"] .layer {
  transition: transform 260ms var(--ease), background 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
html[data-anim~="subtle"] .layer:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
html[data-anim~="subtle"] .btn:hover { transform: translateY(-1px); }
html[data-anim~="subtle"] .vision-list li {
  transition: padding-left 280ms var(--ease), border-color 280ms var(--ease);
}
html[data-anim~="subtle"] .vision-list li:hover { padding-left: 8px; }

/* LIQUID SPRING — Apple Liquid Glass language */
html[data-anim~="liquid"] .layer,
html[data-anim~="liquid"] .nav-dropdown,
html[data-anim~="liquid"] .cta-band,
html[data-anim~="liquid"] .ladder,
html[data-anim~="liquid"] .prop {
  transition:
    transform 420ms var(--liquid-ease),
    box-shadow 420ms var(--liquid-ease),
    background 320ms var(--liquid-ease),
    border-color 320ms var(--liquid-ease);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
}
html[data-anim~="liquid"] .layer:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 14px 36px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
}
html[data-anim~="liquid"] .btn {
  transition: transform 260ms var(--liquid-ease), background 200ms var(--ease), border-color 200ms var(--ease);
}
html[data-anim~="liquid"] .btn:hover { transform: scale(1.03) translateY(-1px); }
html[data-anim~="liquid"] .btn-primary:active { transform: scale(0.985); }
html[data-anim~="liquid"] .site-header { transition: background 400ms var(--liquid-ease); }
html[data-anim~="liquid"] .hero-brand,
html[data-anim~="liquid"] .hero h1 { transition: letter-spacing 600ms var(--liquid-ease); }
html[data-anim~="liquid"] .hero-brand:hover { letter-spacing: -0.06em; }
html[data-anim~="liquid"] .vision-list li {
  transition: transform 360ms var(--liquid-ease), background 360ms var(--liquid-ease);
}
html[data-anim~="liquid"] .vision-list li:hover {
  transform: translateX(4px);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* CASCADE — staggered compliance / vision reveals
   Only children are gated (never whole sections — that hid headers).
   .stagger-in must beat the pending selectors on specificity. */
html[data-anim~="cascade"] .vision-list li.anim-pending,
html[data-anim~="cascade"] .layer.anim-pending,
html[data-anim~="cascade"] .prop.anim-pending,
html[data-anim~="cascade"] .section > .wrap > .section-kicker.anim-pending,
html[data-anim~="cascade"] .section > .wrap > h2.anim-pending,
html[data-anim~="cascade"] .section > .wrap > .intro.anim-pending {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms var(--spring-ease), transform 560ms var(--spring-ease);
}
html[data-anim~="cascade"] .vision-list li.stagger-in,
html[data-anim~="cascade"] .layer.stagger-in,
html[data-anim~="cascade"] .prop.stagger-in,
html[data-anim~="cascade"] .section > .wrap > .section-kicker.stagger-in,
html[data-anim~="cascade"] .section > .wrap > h2.stagger-in,
html[data-anim~="cascade"] .section > .wrap > .intro.stagger-in {
  opacity: 1;
  transform: none;
}

/* APERTURE — iris / progressive disclosure */
html[data-anim~="aperture"] .layer.anim-pending,
html[data-anim~="aperture"] .vision-list li.anim-pending,
html[data-anim~="aperture"] .prop.anim-pending,
html[data-anim~="aperture"] .section > .wrap > h2.anim-pending {
  opacity: 0;
  transform: scale(0.92);
  clip-path: circle(6% at 50% 40%);
}
html[data-anim~="aperture"] .layer.stagger-in,
html[data-anim~="aperture"] .vision-list li.stagger-in,
html[data-anim~="aperture"] .prop.stagger-in,
html[data-anim~="aperture"] .section > .wrap > h2.stagger-in {
  animation: aperture-in 680ms var(--spring-ease) both;
  opacity: 1;
  clip-path: none;
}
@keyframes aperture-in {
  from { opacity: 0; transform: scale(0.86); clip-path: circle(8% at 50% 40%); }
  to   { opacity: 1; transform: scale(1);   clip-path: circle(140% at 50% 40%); }
}
html[data-anim~="aperture"] .hero-visual { transition: opacity 800ms ease; }

/* QUANTUM DRIFT — visible phase shimmer + border pulse */
html[data-anim~="quantum"] .hero-brand,
html[data-anim~="quantum"] .section h2 {
  animation: quantum-drift 4.2s ease-in-out infinite alternate;
}
@keyframes quantum-drift {
  0%   { transform: translateX(0) skewX(0deg); filter: hue-rotate(0deg) brightness(1); letter-spacing: -0.04em; }
  100% { transform: translateX(3px) skewX(0.8deg); filter: hue-rotate(22deg) brightness(1.08); letter-spacing: -0.02em; }
}
html[data-anim~="quantum"] .layer,
html[data-anim~="quantum"] .vision-list li {
  animation: quantum-edge 3.4s ease-in-out infinite alternate;
}
@keyframes quantum-edge {
  0%   { border-color: var(--line); box-shadow: 0 0 0 0 transparent; }
  100% { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent); }
}
html[data-anim~="quantum"] .layer:hover { transform: translateY(-2px) rotate(0.4deg); }

/* MESH PULSE — decentralization breathing + radial ping */
html[data-anim~="mesh"] .layer {
  animation: mesh-pulse 2.8s ease-in-out infinite;
  transform-origin: center;
  position: relative;
  overflow: visible;
}
html[data-anim~="mesh"] .layers,
html[data-anim~="proof"] .layers,
html[data-anim~="cascade"] .layers,
html[data-anim~="aperture"] .layers,
html[data-anim~="liquid"] .layers {
  overflow: visible;
}
@keyframes mesh-pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); transform: scale(1); }
  50%     { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 14%, transparent); transform: scale(1.012); }
}
html[data-anim~="mesh"] .layer::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: 0.55;
  pointer-events: none;
  animation: mesh-ring 3.2s linear infinite;
}
@keyframes mesh-ring {
  to { transform: rotate(360deg); }
}
html[data-anim~="mesh"] .btn-primary { animation: mesh-cta 1.8s ease-in-out infinite; }
@keyframes mesh-cta {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent); }
}
html[data-anim~="mesh"] .vision-list li strong {
  animation: mesh-node 2s ease-in-out infinite;
}
@keyframes mesh-node {
  0%,100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* PROOF FLOW — attestation cascade + synthetic coverage bars */
html[data-anim~="proof"] .vision-list li.anim-pending,
html[data-anim~="proof"] .layer.anim-pending,
html[data-anim~="proof"] .prop.anim-pending,
html[data-anim~="proof"] .section > .wrap > .section-kicker.anim-pending,
html[data-anim~="proof"] .section > .wrap > h2.anim-pending,
html[data-anim~="proof"] .section > .wrap > .intro.anim-pending {
  opacity: 0;
  transform: translateY(12px) translateX(-8px);
  transition: opacity 480ms var(--spring-ease), transform 480ms var(--spring-ease);
}
html[data-anim~="proof"] .vision-list li.stagger-in,
html[data-anim~="proof"] .layer.stagger-in,
html[data-anim~="proof"] .prop.stagger-in,
html[data-anim~="proof"] .section > .wrap > .section-kicker.stagger-in,
html[data-anim~="proof"] .section > .wrap > h2.stagger-in,
html[data-anim~="proof"] .section > .wrap > .intro.stagger-in {
  opacity: 1;
  transform: none;
}
html[data-anim~="proof"] .layer.stagger-in,
html[data-anim~="proof"] .vision-list li.stagger-in {
  animation: proof-step 520ms var(--spring-ease) both;
}
@keyframes proof-step {
  from { opacity: 0; transform: translateX(-10px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}
/* Synthetic coverage bar under cards / constraint rows */
html[data-anim~="proof"] .layer.stagger-in::after,
html[data-anim~="proof"] .vision-list li.stagger-in::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  transform-origin: left center;
  animation: proof-fill 1.05s var(--spring-ease) both;
}
html[data-anim~="proof"] .vision-list li.stagger-in::after {
  grid-column: 2;
  margin-top: 10px;
}
@keyframes proof-fill {
  from { transform: scaleX(0); opacity: 0.4; }
  to   { transform: scaleX(1); opacity: 1; }
}
html[data-anim~="proof"] .layer ul li {
  transition: transform 180ms var(--spring-ease), background 180ms ease, border-color 180ms ease;
}
html[data-anim~="proof"] .layer.stagger-in ul li {
  animation: proof-chip 420ms var(--spring-ease) both;
}
html[data-anim~="proof"] .layer.stagger-in ul li:nth-child(2) { animation-delay: 80ms; }
html[data-anim~="proof"] .layer.stagger-in ul li:nth-child(3) { animation-delay: 140ms; }
@keyframes proof-chip {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
html[data-anim~="proof"] .layer ul li:hover { transform: scale(1.05); border-color: var(--accent); }

/* ============================================================
   PARALLAX + LIGHT & COLOR — pointer/scroll depth on any theme
   Reads --px/--py (0..1 pointer) and --pxf/--pyf (-1..1 offset)
   written by js/site.js; additive via data-anim.
   ============================================================ */

html[data-anim] {
  --px: 0.5;
  --py: 0.5;
  --pxf: 0;
  --pyf: 0;
}

/* Shared depth easing for cards that glide */
html[data-anim~="aurora"],
html[data-anim~="depth"],
html[data-anim~="grav"] {
  --par-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-anim~="aurora"] .layer,
html[data-anim~="depth"] .layer,
html[data-anim~="grav"] .layer {
  transition: transform 320ms var(--e-parallax, var(--liquid-ease));
}

/* ————— Aurora Veil — luminous color field tracking the pointer ————— */
.parallax-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
html[data-anim~="aurora"] .parallax-field { display: block; }
/* Keep header above aurora blobs and main — never demote sticky/z-index */
html[data-anim~="aurora"] main {
  position: relative;
  z-index: 1;
}
html[data-anim~="aurora"] .site-header {
  position: sticky;
  z-index: 200;
  overflow: visible;
}
html[data-anim~="aurora"] .style-selector {
  z-index: 99999;
}
.parallax-field .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px) saturate(1.15);
  opacity: 0.2;
  will-change: transform;
}
html[data-theme-mode="dark"] .parallax-field .blob {
  opacity: 0.3;
  mix-blend-mode: screen;
}
html[data-theme-mode="light"] .parallax-field .blob {
  opacity: 0.16;
  mix-blend-mode: multiply;
}
.parallax-field .blob.a {
  left: -18vmin;
  top: -12vmin;
  width: 92vmin;
  height: 92vmin;
  background: color-mix(in srgb, var(--accent, #4255F5) 70%, #4255F5);
  transform: translate(calc(var(--pxf, 0) * -18vmin), calc(var(--pyf, 0) * -14vmin));
  animation: aurora-hue 11s ease-in-out infinite alternate;
}
.parallax-field .blob.b {
  right: -16vmin;
  bottom: -10vmin;
  width: 72vmin;
  height: 72vmin;
  background: color-mix(in srgb, #FF9A5D 55%, var(--accent, #4255F5));
  transform: translate(calc(var(--pxf, 0) * 16vmin), calc(var(--pyf, 0) * 13vmin));
  animation: aurora-hue 14s ease-in-out infinite alternate-reverse;
}
.parallax-field .blob.c {
  left: 26vw;
  top: 38vh;
  width: 54vmin;
  height: 54vmin;
  background: color-mix(in srgb, #33D6CC 60%, var(--accent, #4255F5));
  opacity: 0.15;
  transform: translate(calc(var(--pxf, 0) * 8vmin), calc(var(--pyf, 0) * 6vmin));
  animation: aurora-hue 9s ease-in-out infinite alternate;
}
@keyframes aurora-hue {
  from { filter: blur(64px) saturate(1.15) hue-rotate(-8deg); }
  to   { filter: blur(64px) saturate(1.25) hue-rotate(14deg); }
}

/* ————— Prism Split — chromatic aberration + hue-shifted edges ————— */
html[data-anim~="prism"] .hero-brand,
html[data-anim~="prism"] .hero h1,
html[data-anim~="prism"] .section h2 {
  animation: prism-slide 5.5s ease-in-out infinite alternate;
}
@keyframes prism-slide {
  0%   { text-shadow: 2px 0 color-mix(in srgb, var(--accent) 60%, #ff2e5f), -2px 0 color-mix(in srgb, var(--accent) 55%, #0fe0ff); }
  100% { text-shadow: 6px -1px color-mix(in srgb, var(--accent) 45%, #ff2e5f), -6px 1px color-mix(in srgb, var(--accent) 40%, #00e0ff); }
}
html[data-anim~="prism"] .layer,
html[data-anim~="prism"] .prop {
  animation: prism-edge 4.6s ease-in-out infinite alternate;
}
@keyframes prism-edge {
  0%   { border-color: var(--line); filter: hue-rotate(0deg) saturate(1); box-shadow: 0 0 0 0 transparent; }
  100% { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); filter: hue-rotate(10deg) saturate(1.08); box-shadow: -3px 0 18px color-mix(in srgb, #ff2e5f 16%, transparent), 3px 0 18px color-mix(in srgb, #00e0ff 16%, transparent); }
}
html[data-anim~="prism"] .vision-list li:hover { filter: hue-rotate(6deg); }

/* ————— Ledger Depth — multi-depth parallax toward the pointer ————— */
html[data-anim~="depth"] .hero-visual {
  transform: translate3d(calc(var(--pxf, 0) * -30px), calc(var(--pyf, 0) * -16px), 0) scale(1.06);
}
html[data-anim~="depth"] .section {
  transform: translate3d(calc(var(--pxf, 0) * 6px), calc(var(--pyf, 0) * 4px), 0);
}
html[data-anim~="depth"] .layers {
  transform: translate3d(calc(var(--pxf, 0) * -10px), calc(var(--pyf, 0) * -6px), 0);
}
html[data-anim~="depth"] .layer,
html[data-anim~="depth"] .prop,
html[data-anim~="depth"] .ladder li {
  transform: translate3d(calc(var(--pxf, 0) * 14px), calc(var(--pyf, 0) * 8px), 0);
  transition: transform 400ms var(--liquid-ease), box-shadow 400ms var(--liquid-ease);
}
html[data-anim~="depth"] .vision-list li {
  transform: translate3d(calc(var(--pxf, 0) * 9px), calc(var(--pyf, 0) * 5px), 0);
}
html[data-anim~="depth"] .layer {
  box-shadow: calc(var(--pxf, 0) * -10px) calc(var(--pyf, 0) * -6px) 24px color-mix(in srgb, var(--accent) 12%, transparent);
}
html[data-anim~="depth"] .section-kicker {
  letter-spacing: calc(0.16em + var(--pxf, 0) * 0.04em);
}

/* ————— Scan Trace — verification beam sweeping the page ————— */
.scan-beam {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 300px;
  z-index: 3;
  pointer-events: none;
  display: none;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--accent, #4255F5) 14%, transparent) 42%,
    color-mix(in srgb, #4DE087 60%, var(--accent, #4255F5)) 50%,
    color-mix(in srgb, var(--accent, #4255F5) 14%, transparent) 58%,
    transparent
  );
  mix-blend-mode: plus-lighter;
}
html[data-anim~="scan"] .scan-beam { display: block; }
html[data-anim~="scan"] .scan-beam {
  animation: scan-sweep 6.5s var(--spring-ease) infinite;
}
html[data-anim~="scan"] .scan-beam {
  animation: scan-sweep 6.5s var(--spring-ease) infinite;
}
@keyframes scan-sweep {
  0%   { transform: translateY(-40vh); opacity: 0.15; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(130vh); opacity: 0; }
}
html[data-anim~="scan"] .layer,
html[data-anim~="scan"] .vision-list li,
html[data-anim~="scan"] .prop {
  border-color: color-mix(in srgb, var(--accent) 9%, var(--line));
  transition: border-color 300ms ease;
}

/* ————— Scan Decode — one-pass beam decrypts stylized ciphertext ————— */
html[data-anim~="scan-decode"] .scan-beam { display: none; }
html[data-anim~="scan-decode"].scan-decode-armed .scan-beam {
  display: block;
}
/* Scan Decode beam position is driven by JS (6s full-doc pace, scroll-gated).
   CSS keyframes kept only as fallback if JS animation class is applied. */
html[data-anim~="scan-decode"].scan-decode-armed .scan-beam.scan-beam--once {
  animation: scan-sweep-once 6s linear 1 forwards;
}
@keyframes scan-sweep-once {
  0%   { transform: translateY(-40vh); opacity: 0.2; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { transform: translateY(130vh); opacity: 0; }
}
/* Waiting for scroll: hide beam entirely — no residual accent halo at the fold */
html[data-anim~="scan-decode"].scan-decode-waiting .scan-beam {
  opacity: 0 !important;
  visibility: hidden;
  box-shadow: none !important;
  background: transparent !important;
  mix-blend-mode: normal;
}
/* After the pass finishes, keep any leftover beam node fully inert */
html[data-anim~="scan-decode"].scan-decode-done .scan-beam,
html[data-anim~="scan-decode"]:not(.scan-decode-armed) .scan-beam {
  display: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  background: none !important;
}
html[data-anim~="scan-decode"] .scan-cipher,
html[data-anim~="scan-decode"] .scan-decoding {
  font-family: var(--mono), "IBM Plex Mono", ui-monospace, monospace !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--accent) 55%, var(--ink));
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
html[data-anim~="scan-decode"] .scan-decoding {
  color: var(--ink);
  text-shadow:
    0 0 12px color-mix(in srgb, #4DE087 40%, transparent),
    0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
  outline: 1px solid color-mix(in srgb, #4DE087 35%, transparent);
  outline-offset: 4px;
}
html[data-anim~="scan-decode"] .scan-decoded {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-shadow: none;
  outline: none;
  transition: color 280ms ease, text-shadow 280ms ease, letter-spacing 320ms ease;
}
/* Keep vision-list columns intact during/after decode */
html[data-anim~="scan-decode"] .vision-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 4px;
}
html[data-anim~="scan-decode"] .vision-list li::before {
  grid-column: 1;
  grid-row: 1 / span 2;
}
html[data-anim~="scan-decode"] .vision-list strong.scan-decoded,
html[data-anim~="scan-decode"] .vision-list strong:not(.scan-cipher):not(.scan-decoding) {
  grid-column: 2;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: inherit;
  color: inherit;
  text-shadow: none;
  outline: none;
}
html[data-anim~="scan-decode"] .vision-list span.scan-decoded,
html[data-anim~="scan-decode"] .vision-list span:not(.scan-cipher):not(.scan-decoding) {
  grid-column: 2;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: inherit;
  color: var(--ink);
  text-shadow: none;
  outline: none;
}
html[data-anim~="scan-decode"] .layer,
html[data-anim~="scan-decode"] .vision-list li,
html[data-anim~="scan-decode"] .prop {
  border-color: color-mix(in srgb, var(--accent) 14%, var(--line));
  transition: border-color 400ms ease, box-shadow 400ms ease;
}

/* ————— Orbital Pull — cards tilt + accent glow following cursor ————— */
html[data-anim~="grav"] .layer,
html[data-anim~="grav"] .prop,
html[data-anim~="grav"] .ladder li,
html[data-anim~="grav"] .hero-visual {
  transform: perspective(1100px)
    rotateX(calc(var(--pyf, 0) * -4.5deg))
    rotateY(calc(var(--pxf, 0) * 6deg));
}
html[data-anim~="grav"] .layer {
  transform-style: preserve-3d;
  background:
    radial-gradient(
      520px at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.5) * 100%),
      color-mix(in srgb, var(--accent) 13%, transparent),
      transparent 68%
    ),
    var(--bg-elev, transparent);
}
html[data-anim~="grav"] .layer:hover {
  transform: perspective(770px)
    rotateX(calc(var(--pyf, 0) * -7deg))
    rotateY(calc(var(--pxf, 0) * 9deg))
    translateY(-3px);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 22%, transparent);
}
html[data-anim~="grav"] .vision-list li {
  transform: perspective(900px) rotateX(calc(var(--pyf, 0) * -3deg)) rotateY(calc(var(--pxf, 0) * 4deg));
}

/* ————— reduced-motion guards for parallax ————— */
@media (prefers-reduced-motion: reduce) {
  html[data-anim] .parallax-field,
  html[data-anim] .scan-beam { display: none !important; }
  html[data-anim~="prism"] .hero-brand,
  html[data-anim~="prism"] .hero h1,
  html[data-anim~="prism"] .section h2 { text-shadow: none !important; }
  html[data-anim~="depth"] .hero-visual,
  html[data-anim~="depth"] .section,
  html[data-anim~="depth"] .layers,
  html[data-anim~="depth"] .layer,
  html[data-anim~="depth"] .prop,
  html[data-anim~="depth"] .ladder li,
  html[data-anim~="depth"] .vision-list li,
  html[data-anim~="grav"] .layer,
  html[data-anim~="grav"] .prop,
  html[data-anim~="grav"] .ladder li,
  html[data-anim~="grav"] .vision-list li,
  html[data-anim~="grav"] .hero-visual {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Enhance existing rise when motion on */
html[data-anim]:not([data-anim="none"]) .hero-brand,
html[data-anim]:not([data-anim="none"]) .hero h1,
html[data-anim]:not([data-anim="none"]) .hero .lede,
html[data-anim]:not([data-anim="none"]) .hero-actions,
html[data-anim]:not([data-anim="none"]) .page-hero h1,
html[data-anim]:not([data-anim="none"]) .page-hero p,
html[data-anim]:not([data-anim="none"]) .page-hero .lede {
  animation-duration: 780ms;
}

/* Global safety: never leave content invisible under reduced motion */
@media (prefers-reduced-motion: reduce) {
  html[data-anim] * {
    animation: none !important;
    transition: none !important;
  }
  html[data-anim] .anim-pending,
  html[data-anim] .stagger-in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}

.style-btn { transition: all 160ms var(--ease); }
html[data-anim~="liquid"] .style-btn:hover { transform: translateY(-1px); }

/* Subpage / protocol support: make themes apply to .page-hero and bare content sections */
html[data-theme] .page-hero {
  color: var(--ink);
}
html[data-theme] .page-hero h1,
html[data-theme] .page-hero p {
  color: inherit;
}
html[data-theme] .page-hero h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
}
html[data-theme] main p,
html[data-theme] main li,
html[data-theme] .section p,
html[data-theme] .prose p,
html[data-theme] .callout {
  color: var(--ink);
}
html[data-theme] a {
  color: var(--accent);
}
html[data-theme] .section {
  border-color: var(--line);
}

/* Tabbed simplified selector */
.style-tabs { display:flex; gap:4px; border-bottom:1px solid #ddd; padding-bottom:4px; margin-bottom:4px; flex-wrap:wrap; }
.style-tab { border:1px solid #ccc; background:#fff; color:#333; padding:2px 8px; font-size:10px; border-radius:3px; cursor:pointer; font-family:inherit; }
.style-tab.is-active, .style-tab:hover { background:#111; color:#fff; border-color:#111; }
.style-panels { }
.style-panel { display:none; }
.style-panel.is-active { display:block; }
.style-panel .style-options { display:flex; flex-wrap:wrap; gap:2px; }
.style-panel .style-options .style-btn { font-size:10px; padding:2px 6px; }
.style-color-wrap { display:flex; align-items:center; gap:8px; padding:4px 0; flex-wrap:wrap; }
.style-color-slider {
  width:180px;
  accent-color: var(--accent, #4255F5);
}
.style-color-end {
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#888;
}
.style-color-value { font-family:var(--mono); font-size:10px; min-width:36px; text-align:right; }
.style-color-reset { font-size:10px; border:1px solid #ccc; background:#fafafa; padding:1px 5px; border-radius:3px; cursor:pointer; }
.style-color-hint { font-size:9px; opacity:.65; margin-top:2px; }

/* ——— Accessibility: contrast, focus, color-independent affordances ——— */
/* Prose links keep a light underline on most themes; Aleo/default stay clean (no underline). */
html[data-theme] a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html[data-theme] .nav-links a,
html[data-theme] .nav-cta,
html[data-theme] .btn,
html[data-theme] .apps-strip a,
html[data-theme] .brand,
html[data-theme] .footer-brand,
html[data-theme] .footer-nav a,
html[data-theme] .layer {
  text-decoration: none;
}
html[data-theme] .nav-links a:hover,
html[data-theme] .apps-strip a:hover {
  text-decoration: underline;
}

/* Default site look + Aleo: no underlines on any links */
html:not([data-theme]) a,
html[data-theme="current"] a,
html[data-theme="aleo"] a,
html:not([data-theme]) a:hover,
html[data-theme="current"] a:hover,
html[data-theme="aleo"] a:hover {
  text-decoration: none;
}
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-trigger:focus-visible,
.nav-cta:focus-visible,
.style-btn:focus-visible,
.style-tab:focus-visible,
.style-color-slider:focus-visible,
.style-minimize:focus-visible,
.style-restore:focus-visible,
.style-reset:focus-visible,
.style-expand:focus-visible {
  outline: 2px solid var(--accent, #4255F5);
  outline-offset: 2px;
}
@media (prefers-contrast: more) {
  html[data-theme] .btn-primary {
    border-width: 2px;
  }
  html[data-theme] .section-kicker {
    letter-spacing: 0.14em;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .btn,
  html[data-theme] .btn-primary {
    transition: none;
  }
}

/* Style selector — slide-surface control (deck pages) */
.style-color-sep { height: 1px; background: var(--line); margin: 14px 0 12px; }
.style-color-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}