:root {
  --font-sans: Inter, "Segoe UI Variable", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --page: #07090d;
  --page-raised: #0b0e14;
  --surface: #10141c;
  --surface-strong: #161b25;
  --surface-soft: rgba(255, 255, 255, 0.045);
  --ink: #f5f7fb;
  --ink-soft: #c9d0dc;
  --muted: #8f99aa;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --accent: #7c9dff;
  --accent-bright: #a9bdff;
  /* Primeiro plano sobre --accent-bright. Precisa de um token porque
     --accent-bright INVERTE entre os temas (claro no escuro, escuro no claro):
     com a cor do texto fixa em #08101e, o CTA primario do tema claro ficava em
     2,88:1, abaixo do minimo AA de 4,5. */
  --accent-on: #08101e;
  --accent-bright-hover: #c5d1ff;
  --accent-deep: #4d6df0;
  --mint: #6ee7c4;
  --warm: #ff9676;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.24);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --shell: 1240px;
  --header-height: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html[data-theme="light"] {
  --page: #f3f5f9;
  --page-raised: #edf0f5;
  --surface: #ffffff;
  --surface-strong: #e9edf4;
  --surface-soft: rgba(11, 20, 37, 0.045);
  --ink: #111622;
  --ink-soft: #313a49;
  --muted: #5f6878;
  --line: rgba(14, 24, 42, 0.12);
  --line-strong: rgba(14, 24, 42, 0.22);
  --accent: #395fe5;
  --accent-bright: #274fd6;
  /* Branco sobre #274fd6 = 6,61:1; o hover escurece o azul para manter o
     branco legivel (9,38:1) em vez de clarear o fundo. */
  --accent-on: #ffffff;
  --accent-bright-hover: #1b3ba8;
  --accent-deep: #2448c3;
  --mint: #0d8b70;
  --warm: #d95736;
  --shadow: 0 24px 80px rgba(27, 40, 67, 0.14);
  --shadow-soft: 0 12px 36px rgba(27, 40, 67, 0.1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  background: var(--page);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34rem),
    var(--page);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

::selection { color: var(--accent-on); background: var(--accent-bright); }

img, svg { display: block; max-width: 100%; }
/* O <picture> so existe para oferecer o WebP; sem display:contents ele criaria
   uma caixa inline extra e o <img> deixaria de ser filho direto do container
   para efeito de layout -- grid e flex passariam a posicionar o wrapper. */
picture { display: contents; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a { touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 12px 16px;
  color: var(--accent-on);
  background: var(--accent-bright);
  border-radius: 10px;
  font-weight: 750;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.page-shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.section { position: relative; padding: 128px 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--accent-bright);
  font-size: .75rem;
  font-weight: 780;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--mint) 13%, transparent), 0 0 20px var(--mint);
}

h1, h2, h3, p { text-wrap: pretty; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.02;
  letter-spacing: -.045em;
}

h1 { max-width: 820px; font-size: clamp(3.7rem, 7.2vw, 7.1rem); font-weight: 690; }
h1 em, .lumen-statement em { color: var(--accent-bright); font-family: var(--font-serif); font-weight: 400; }
h2 { font-size: clamp(2.6rem, 5vw, 4.9rem); font-weight: 650; }
h3 { font-size: 1.34rem; font-weight: 650; letter-spacing: -.025em; }

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 720;
  line-height: 1;
  cursor: pointer;
  transition: transform 220ms var(--ease), border-color 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-primary { color: var(--accent-on); background: var(--accent-bright); box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 25%, transparent); }
.button-primary:hover { background: var(--accent-bright-hover); box-shadow: 0 16px 44px color-mix(in srgb, var(--accent) 36%, transparent); }
.button-secondary { color: var(--ink); border-color: var(--line-strong); background: var(--surface-soft); }
.button-secondary:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.button-light { color: #0b1020; background: #f5f7fb; }
.button-light:hover { background: #dfe6ff; }
.button-ghost { color: var(--ink-soft); border-color: var(--line); background: transparent; }
.button-ghost:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-soft); }
.button-compact { min-height: 44px; padding: 10px 17px; font-size: .82rem; }

.text-link, .text-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  font-weight: 690;
  text-decoration: none;
  cursor: pointer;
}

.text-link { border-bottom: 1px solid var(--line-strong); }
.text-link:hover, .text-button:hover { color: var(--accent-bright); border-color: var(--accent); }

.icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.icon-button:hover { color: var(--accent-bright); border-color: var(--accent); background: var(--surface-soft); transform: rotate(3deg); }
.icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--page) 82%, transparent);
  border-color: var(--line);
  backdrop-filter: blur(18px) saturate(1.25);
}

.nav-shell {
  width: min(calc(100% - 40px), 1400px);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 11px; width: max-content; color: var(--ink); text-decoration: none; }
.brand-mark { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.brand-mark path { stroke-width: 2; }
.brand-type { font-size: .9rem; font-weight: 820; letter-spacing: .14em; }
.brand-type small { color: var(--muted); font-size: .64em; font-weight: 720; letter-spacing: .2em; }

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { position: relative; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); text-decoration: none; font-size: .84rem; font-weight: 650; }
.site-nav a::after { content: ""; position: absolute; right: 0; bottom: 5px; left: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 220ms var(--ease); }
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.language-control { position: relative; display: flex; align-items: center; }
/* language-select.js sets the [hidden] attribute on this label once the
   custom listbox mounts successfully. The class rule above sets its own
   `display`, which otherwise beats the UA stylesheet's `[hidden]{display:none}`
   by specificity (0-1-0-0 > 0-0-1-0) and leaves the native <select> visible
   alongside the new listbox. Make the attribute win explicitly. */
.language-control[hidden] { display: none; }
.language-control::before { content: ""; width: 16px; height: 16px; position: absolute; inset-inline-start: 12px; pointer-events: none; opacity: .68; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' d='M4 5h10M9 3v2m-4 5c3 0 6-2 7-5m-5 3c1 3 3 5 6 6m2-5h5m-2.5-2v12m-4-4h8'/%3E%3C/svg%3E") center/contain no-repeat; }
.language-control select { min-height: 44px; max-width: 164px; padding: 0 32px 0 38px; color: var(--ink-soft); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
/* Opcoes do dropdown nativo: o popup do <select> no Windows/Chrome renderiza com
   fundo do sistema (branco) mas herda o color claro do select -> texto ilegivel
   no tema escuro. Fixar contraste explicito nas options (dark-on-white) em todas
   as paginas. */
.language-control select option { color: #16181d; background: #ffffff; }
.language-control select option:checked, .language-control select option:hover { background: #e6e9f2; color: #0b0d12; }
[dir="rtl"] .language-control select { padding: 0 38px 0 32px; }
.language-control select:hover, .language-control select:focus-visible { color: var(--ink); border-color: var(--line-strong); }

/* Custom language listbox (progressive enhancement over .language-control,
   built by assets/language-select.js). Keeps full control over popover
   contrast in both themes -- the native <select>'s option list cannot be
   restyled cross-browser, which is exactly what prompted this component. */
.lang-select { position: relative; display: flex; align-items: center; }
.lang-trigger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px 0 16px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.lang-trigger:hover { color: var(--ink); border-color: var(--line-strong); }
.lang-trigger:focus-visible { color: var(--ink); }
.lang-select.is-open .lang-trigger { color: var(--ink); border-color: var(--accent); background: var(--surface); }
.lang-trigger-code { color: var(--accent-bright); font-family: ui-monospace, "Cascadia Code", monospace; font-size: .68rem; font-weight: 780; letter-spacing: .05em; }
.lang-trigger-name { max-width: 132px; overflow: hidden; color: var(--ink-soft); font-size: .78rem; font-weight: 630; white-space: nowrap; text-overflow: ellipsis; }
.lang-caret { display: inline-flex; width: 14px; flex: 0 0 auto; }
.lang-caret svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease); }
.lang-select.is-open .lang-caret svg { transform: rotate(180deg); }

.lang-popover {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 10px);
  z-index: 150;
  width: min(280px, 86vw);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.lang-select.is-open .lang-popover { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }

.lang-listbox {
  max-height: min(360px, 62vh);
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: var(--shadow);
  outline: none;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: .86rem;
  cursor: pointer;
}
.lang-option-check { width: 14px; flex: 0 0 auto; color: var(--accent-bright); font-size: .78rem; opacity: 0; }
.lang-option.is-selected .lang-option-check { opacity: 1; }
.lang-option-name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; }
.lang-option.is-selected .lang-option-name { color: var(--ink); font-weight: 700; }
.lang-option-code { flex: 0 0 auto; color: var(--muted); font-family: ui-monospace, "Cascadia Code", monospace; font-size: .66rem; letter-spacing: .04em; }
.lang-option.is-active { color: var(--ink); background: var(--surface-soft); }
.lang-option.is-active .lang-option-name { color: var(--ink); }

.lang-noscript-note { margin: 0; padding: 10px 16px; color: var(--ink-soft); background: color-mix(in srgb, var(--warm) 12%, var(--surface)); border-bottom: 1px solid var(--line); font-size: .78rem; text-align: center; padding-top: calc(var(--header-height) + 10px); }

.translation-note { position: fixed; z-index: 30; right: 18px; bottom: 18px; max-width: min(420px, calc(100% - 36px)); padding: 12px 16px; color: var(--ink-soft); background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); backdrop-filter: blur(18px); font-size: .76rem; line-height: 1.5; }
.theme-icon { position: absolute; transition: opacity 180ms ease, transform 240ms var(--ease); }
html[data-theme="dark"] .theme-icon-moon, html[data-theme="light"] .theme-icon-sun { opacity: 0; transform: scale(.5) rotate(-35deg); }
html[data-theme="dark"] .theme-icon-sun, html[data-theme="light"] .theme-icon-moon { opacity: 1; transform: scale(1) rotate(0); }
.menu-toggle { display: none; }

.hero {
  min-height: 100svh;
  padding-top: calc(var(--header-height) + 92px);
  padding-bottom: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -24%;
  right: -12%;
  width: min(76vw, 1060px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 120px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 180px color-mix(in srgb, var(--accent) 6%, transparent);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); align-items: center; gap: clamp(42px, 7vw, 108px); }
.hero-copy { position: relative; z-index: 2; }
.hero-lede { max-width: 650px; margin: 32px 0 0; color: var(--ink-soft); font-size: clamp(1.08rem, 1.4vw, 1.27rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.proof-list { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 38px 0 0; padding: 0; color: var(--muted); list-style: none; font-size: .83rem; }
.proof-list li { display: flex; align-items: center; gap: 8px; }
.proof-list svg { width: 16px; fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hero-stage { position: relative; min-height: 600px; display: grid; place-items: center; perspective: 1200px; }
.stage-orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 50%; }
.orbit-one { width: 570px; height: 570px; opacity: .66; transform: rotateX(66deg) rotateZ(-10deg); }
.orbit-two { width: 430px; height: 430px; opacity: .35; transform: rotateX(58deg) rotateZ(38deg); }
.stage-orbit::after { content: ""; position: absolute; top: 50%; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 24px var(--mint); }

.stage-card {
  position: relative;
  z-index: 2;
  width: min(100%, 450px);
  padding: 20px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 94%, var(--accent)), color-mix(in srgb, var(--surface) 98%, transparent));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08);
  transform: rotateY(-7deg) rotateX(3deg);
  animation: stage-float 7s var(--ease) infinite alternate;
}

.stage-card::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 50%, transparent), transparent 35%, color-mix(in srgb, var(--mint) 26%, transparent)); filter: blur(16px); opacity: .28; }
.stage-topline { display: flex; align-items: center; justify-content: space-between; padding: 2px 5px 18px; color: var(--muted); font-size: .65rem; font-weight: 750; letter-spacing: .13em; }
.stage-status { display: flex; align-items: center; gap: 7px; }
.stage-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.study-card { padding: 36px 32px 30px; min-height: 350px; display: flex; flex-direction: column; justify-content: center; color: #eff3ff; background: radial-gradient(circle at 90% 10%, rgba(124,157,255,.22), transparent 38%), linear-gradient(155deg, #121827, #0d111a); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; }
.study-kicker, .study-answer span { color: #9bb2ff; font-size: .68rem; font-weight: 780; letter-spacing: .17em; text-transform: uppercase; }
.study-card > strong { max-width: 320px; margin-top: 14px; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.23; letter-spacing: -.035em; }
.study-answer { margin-top: 34px; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.11); }
.study-answer p { margin: 8px 0 0; color: #aeb8cc; font-size: .89rem; line-height: 1.58; }
.stage-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px 4px 2px; }
.stage-metrics span { display: flex; flex-direction: column; color: var(--muted); font-size: .62rem; letter-spacing: .03em; }
.stage-metrics b { color: var(--ink); font-size: 1.1rem; line-height: 1.2; }
.floating-chip { position: absolute; z-index: 4; padding: 10px 15px; color: var(--ink-soft); background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-soft); backdrop-filter: blur(16px); font-size: .68rem; font-weight: 730; letter-spacing: .08em; text-transform: uppercase; }
.chip-top { top: 17%; right: -2%; }
/* 21%: a pilula flutua sobre o cartao, entao a posicao precisa cair numa
   faixa SEM texto. A 16% ela cobria a primeira coluna de .stage-metrics e
   escondia o numero ("12" de "12 themes"); a 27% passava a cobrir a ultima
   linha da resposta. As faixas livres medidas no cartao sao 468-530 e
   604-649 (a pilula tem 39px de altura) -- a segunda tem so 6px de sobra,
   apertado demais: em 21% a pilula encostava na resposta em 1440/1920px.
   4% a leva para BAIXO das metricas, encostada na borda inferior do cartao,
   onde ha ~57px livres. Travado por test_site_layout.py.
   Abaixo do breakpoint que esconde .floating-chip a questao nao existe. */
.chip-bottom { bottom: 4%; left: -4%; }

@keyframes stage-float { from { transform: rotateY(-7deg) rotateX(3deg) translateY(8px); } to { transform: rotateY(-4deg) rotateX(1deg) translateY(-10px); } }

.hero-marquee { width: 100%; margin-top: 76px; overflow: hidden; border-block: 1px solid var(--line); color: var(--muted); }
.hero-marquee > div { width: max-content; display: flex; align-items: center; gap: 30px; padding: 14px 0; animation: marquee 34s linear infinite; }
.hero-marquee span { font-size: .66rem; font-weight: 760; letter-spacing: .18em; }
.hero-marquee i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

.catalog { background: var(--page-raised); border-block: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); align-items: end; gap: 80px; }
.section-heading h2 { max-width: 820px; }
.section-heading > p { max-width: 480px; margin: 0 0 8px; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 64px 0 26px; }
.search-field { width: min(100%, 360px); min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 16px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; transition: border-color 180ms ease, box-shadow 180ms ease; }
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.search-field svg { width: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-field input { width: 100%; min-height: 46px; color: var(--ink); background: transparent; border: 0; outline: 0; }
.search-field input::placeholder { color: var(--muted); opacity: .8; }
.filter-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.filter-button { min-height: 44px; padding: 9px 16px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: .76rem; font-weight: 680; cursor: pointer; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; }
.filter-button:hover { color: var(--ink); border-color: var(--line-strong); }
.filter-button.is-active { color: var(--accent-on); background: var(--accent-bright); border-color: var(--accent-bright); }
.catalog-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }

.product-card {
  grid-column: 1 / -1;
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 280ms var(--ease), border-color 220ms ease, box-shadow 280ms ease;
}

.product-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: var(--shadow); }
.product-copy { display: flex; flex-direction: column; padding: clamp(32px, 5vw, 64px); }
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 40px; }
.status-pill, .version-pill { display: inline-flex; min-height: 30px; align-items: center; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .66rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.status-pill::before { content: ""; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 10px color-mix(in srgb, var(--warm) 70%, transparent); }
.product-eyebrow { margin: 0 0 12px; color: var(--accent-bright); font-size: .71rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.product-card h3 { font-size: clamp(2.2rem, 4vw, 4.3rem); }
.product-summary { max-width: 540px; margin: 24px 0 0; color: var(--ink-soft); font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.65; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: auto 0 34px; padding-top: 46px; }
.metric { padding-top: 16px; border-top: 1px solid var(--line); }
.metric strong { display: block; color: var(--ink); font-size: 1.55rem; line-height: 1; letter-spacing: -.04em; }
.metric span { display: block; margin-top: 8px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.product-visual { position: relative; min-height: 480px; overflow: hidden; background: radial-gradient(circle at 32% 25%, rgba(124,157,255,.22), transparent 33%), #090c12; }
.product-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--surface), transparent 18%), linear-gradient(0deg, rgba(7,9,13,.62), transparent 45%); pointer-events: none; }
.product-visual img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; object-position: center; filter: saturate(.8) contrast(1.04); transform: scale(1.035); transition: transform 650ms var(--ease), filter 320ms ease; }
.product-card:hover .product-visual img { transform: scale(1.06); filter: saturate(1) contrast(1.02); }
.visual-caption { position: absolute; right: 26px; bottom: 24px; z-index: 2; display: flex; gap: 8px; align-items: center; padding: 8px 12px; color: #ced5e3; background: rgba(7,9,13,.7); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; backdrop-filter: blur(12px); font-size: .66rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.visual-caption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.catalog-empty { padding: 64px 24px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.catalog-empty p { margin: 0 0 8px; }

.module-showcase {
  grid-column: 1 / -1;
  margin-top: 76px;
  padding-top: 74px;
  border-top: 1px solid var(--line);
}

.module-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  align-items: end;
  gap: 64px;
}

.module-section-heading h3 { max-width: 700px; font-size: clamp(2.35rem, 4.3vw, 4.4rem); }
.module-section-heading > p { max-width: 570px; margin: 0 0 8px; color: var(--muted); line-height: 1.75; }

.module-flow {
  display: grid;
  grid-template-columns: max-content minmax(40px, 1fr) max-content minmax(40px, 1fr) max-content;
  align-items: center;
  gap: 18px;
  margin: 54px 0 26px;
  padding: 19px 24px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.module-flow-step { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.module-flow-step span { color: var(--accent-bright); font-family: ui-monospace, "Cascadia Code", monospace; font-size: .62rem; letter-spacing: .08em; }
.module-flow-step strong { color: var(--ink-soft); font-size: .72rem; font-weight: 680; }
.module-flow-line { height: 1px; background: linear-gradient(90deg, var(--line), var(--accent), var(--line)); }

.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.module-grid.is-single { max-width: 720px; grid-template-columns: 1fr; }

.module-card {
  --module-accent: var(--accent);
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(155deg, color-mix(in srgb, var(--surface-strong) 80%, var(--module-accent)), var(--surface) 38%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform 280ms var(--ease), border-color 220ms ease, box-shadow 280ms ease;
}

.module-card-mint { --module-accent: var(--mint); }
.module-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--module-accent) 44%, var(--line)); box-shadow: var(--shadow); }
.module-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px rgba(255,255,255,.07); }

.module-art { position: relative; height: 350px; overflow: hidden; color: var(--module-accent); background: #090c12; border-bottom: 1px solid var(--line); }
.module-art::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, color-mix(in srgb, var(--surface) 82%, transparent), transparent 38%), radial-gradient(circle at 72% 14%, color-mix(in srgb, var(--module-accent) 17%, transparent), transparent 42%); }
.module-art-screenshot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: saturate(.8) contrast(1.06); transform: scale(1.03); transition: transform 650ms var(--ease), filter 320ms ease; }
.module-card:hover .module-art-screenshot img { transform: scale(1.065); filter: saturate(1) contrast(1.03); }
.module-art-label { position: absolute; right: 20px; bottom: 18px; z-index: 4; padding: 7px 10px; color: #d7deec; background: rgba(7,9,13,.72); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; backdrop-filter: blur(12px); font-size: .61rem; font-weight: 730; letter-spacing: .09em; text-transform: uppercase; }

.module-art-graph { display: grid; place-items: center; background: radial-gradient(circle at center, color-mix(in srgb, var(--mint) 13%, #0a1017), #080b10 65%); }
.module-art-graph svg { position: relative; z-index: 1; width: min(96%, 550px); height: auto; overflow: visible; }
.graph-link { fill: none; stroke: color-mix(in srgb, var(--mint) 34%, transparent); stroke-width: 1.2; }
.graph-node circle { fill: #101923; stroke: color-mix(in srgb, var(--mint) 56%, #1d2b37); stroke-width: 1.2; }
.graph-node text { fill: #b7c6d3; font-family: var(--font-sans); font-size: 11px; font-weight: 680; }
.graph-node-root circle { fill: color-mix(in srgb, var(--mint) 20%, #111a25); stroke: var(--mint); filter: drop-shadow(0 0 15px color-mix(in srgb, var(--mint) 38%, transparent)); }
.graph-node-root text { fill: #e9fff9; font-size: 14px; }
.graph-node-major circle { fill: #101923; stroke: color-mix(in srgb, var(--mint) 62%, #1d2b37); }
.graph-node-leaf circle { fill: color-mix(in srgb, var(--mint) 14%, #101923); stroke: color-mix(in srgb, var(--mint) 40%, #1d2b37); }
.graph-node-leaf text { font-size: 9px; }
.graph-stats { position: absolute; right: 18px; bottom: 16px; left: 18px; z-index: 4; display: flex; justify-content: space-between; gap: 8px; }
.graph-stats span { padding: 7px 10px; color: #b8c8d5; background: rgba(7,9,13,.7); border: 1px solid rgba(255,255,255,.11); border-radius: 999px; backdrop-filter: blur(10px); font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.module-copy { min-height: 455px; display: flex; flex-direction: column; padding: clamp(28px, 4vw, 44px); }
.module-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.module-number { color: var(--module-accent); font-family: ui-monospace, "Cascadia Code", monospace; font-size: .68rem; font-weight: 720; letter-spacing: .1em; }
.module-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .63rem; font-weight: 710; letter-spacing: .07em; text-transform: uppercase; }
.module-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--module-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--module-accent) 70%, transparent); }
.module-label { margin: 0 0 9px; color: var(--module-accent); font-size: .68rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.module-copy h4 { margin: 0; font-size: clamp(1.9rem, 3.2vw, 3rem); letter-spacing: -.045em; }
.module-statement { max-width: 480px; margin: 16px 0 0; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.18rem, 1.8vw, 1.55rem); font-style: italic; line-height: 1.35; }
.module-summary { margin: 21px 0 0; color: var(--muted); font-size: .94rem; line-height: 1.7; }
.module-proof { display: flex; flex-wrap: wrap; gap: 7px; margin: 26px 0 34px; padding: 0; list-style: none; }
.module-proof li { padding: 6px 9px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; font-size: .62rem; }
.module-open { min-height: 48px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding: 13px 0 0; color: var(--ink); background: transparent; border: 0; border-top: 1px solid var(--line); font-size: .8rem; font-weight: 720; text-align: left; cursor: pointer; }
.module-open span { color: var(--module-accent); font-size: 1.2rem; transition: transform 220ms var(--ease); }
.module-open:hover { color: var(--module-accent); }
.module-open:hover span { transform: translateX(5px); }

.dialog-module-statement { margin: 12px 0 0; color: var(--accent-bright); font-family: var(--font-serif); font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-style: italic; }
.dialog-integration > p { margin: 0; color: var(--muted); }
.dialog-gate { margin-top: 24px; padding: 18px; background: color-mix(in srgb, var(--warm) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warm) 34%, var(--line)); border-radius: var(--radius-sm); }
.dialog-gate span { color: var(--warm); font-size: .63rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.dialog-gate p { margin: 8px 0 0; color: var(--ink-soft); font-size: .84rem; }

.method { overflow: hidden; }
.method::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); }
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.method-intro { position: sticky; top: calc(var(--header-height) + 54px); align-self: start; }
.method-intro h2 { max-width: 560px; }
.method-intro > p:not(.eyebrow) { max-width: 520px; margin: 28px 0; color: var(--muted); font-size: 1.05rem; }
.method-list { margin: 0; padding: 0; list-style: none; }
.method-list li { display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 36px 0 44px; border-bottom: 1px solid var(--line); }
.method-list li:first-child { padding-top: 8px; }
.method-list > li > span { color: var(--accent-bright); font-family: ui-monospace, "Cascadia Code", monospace; font-size: .72rem; letter-spacing: .08em; }
.method-list h3 { margin-bottom: 12px; }
.method-list p { max-width: 490px; margin: 0; color: var(--muted); }

.lumen-section { min-height: 850px; display: flex; align-items: center; overflow: hidden; color: #f7f8fb; background: #080a10; border-block: 1px solid rgba(255,255,255,.1); }
.lumen-backdrop { position: absolute; inset: 0; opacity: .75; pointer-events: none; }
.lumen-backdrop::before { content: ""; position: absolute; width: 70vw; height: 70vw; top: 50%; left: 25%; border-radius: 50%; background: radial-gradient(circle, rgba(77,109,240,.32), rgba(77,109,240,.08) 38%, transparent 69%); transform: translate(-50%, -50%); filter: blur(8px); }
.lumen-backdrop span { position: absolute; border: 1px solid rgba(155,178,255,.18); border-radius: 50%; }
.lumen-backdrop span:nth-child(1) { width: 760px; height: 760px; top: 50%; left: 24%; transform: translate(-50%, -50%); }
.lumen-backdrop span:nth-child(2) { width: 530px; height: 530px; top: 50%; left: 24%; transform: translate(-50%, -50%); }
.lumen-backdrop span:nth-child(3) { width: 300px; height: 300px; top: 50%; left: 24%; transform: translate(-50%, -50%); }
.lumen-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 100px; }
.lumen-symbol { display: grid; place-items: center; }
.lumen-symbol svg { width: min(100%, 470px); fill: none; stroke: #b9c8ff; stroke-width: 1.1; filter: drop-shadow(0 0 36px rgba(124,157,255,.28)); }
.lumen-symbol path { stroke-width: 3.5; }
.lumen-copy .eyebrow { color: #a9bdff; }
.lumen-copy h2 { font-size: clamp(4.8rem, 10vw, 9rem); letter-spacing: -.07em; }
.lumen-statement { max-width: 680px; margin: 10px 0 26px; color: #dce2ee; font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.25; letter-spacing: -.03em; }
.lumen-copy > p:not(.eyebrow, .lumen-statement) { max-width: 630px; color: #9ba6bb; font-size: 1.02rem; }
.signal-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.signal-row span { padding: 8px 12px; color: #bdc6d8; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: .71rem; }

.about { background: var(--page-raised); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.about .section-heading { display: block; }
.about-copy { padding-top: 52px; }
.about-lede { margin: 0 0 30px; color: var(--ink); font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.38; letter-spacing: -.03em; }
.about-copy > p:not(.about-lede) { max-width: 570px; color: var(--muted); }
.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 38px; }

.site-footer { padding: 48px 0 36px; background: var(--page); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 30px; }
.footer-grid > p { margin: 0; color: var(--muted); font-size: .78rem; text-align: center; }
.footer-meta { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; color: var(--muted); font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; }

.product-dialog {
  width: min(calc(100% - 32px), 850px);
  max-height: min(86vh, 900px);
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.product-dialog::backdrop { background: rgba(2, 4, 8, .78); backdrop-filter: blur(12px); }
.dialog-shell { position: relative; max-height: inherit; overflow-y: auto; padding: clamp(30px, 5vw, 58px); }
.dialog-close { position: absolute; top: 18px; right: 18px; z-index: 2; background: var(--surface); }
.dialog-eyebrow { margin: 0 56px 10px 0; color: var(--accent-bright); font-size: .7rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.dialog-title { margin-right: 56px; font-size: clamp(2.4rem, 6vw, 4rem); }
.dialog-description { margin: 22px 0 32px; color: var(--ink-soft); font-size: 1.06rem; }
.dialog-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.dialog-columns h4 { margin: 0 0 14px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.dialog-columns ul { margin: 0; padding: 0; color: var(--muted); list-style: none; }
.dialog-columns li { position: relative; padding: 0 0 12px 20px; }
.dialog-columns li::before { content: ""; position: absolute; top: .68em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dialog-columns .release-list li::before { width: 7px; height: 7px; background: transparent; border: 1px solid var(--warm); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

.noscript-card { padding: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.noscript-card h3 { margin-bottom: 18px; font-size: 2rem; }
.noscript-card > p:not(.product-eyebrow) { max-width: 650px; color: var(--muted); }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1080px) {
  .hero { padding-top: calc(var(--header-height) + 76px); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow, .proof-list, .hero-actions { justify-content: center; }
  .hero-copy h1, .hero-lede { margin-inline: auto; }
  .hero-stage { min-height: 560px; }
  .chip-top { right: 7%; }
  .chip-bottom { left: 7%; }
  .section-heading { gap: 42px; }
  .product-card { grid-template-columns: 1fr; }
  .product-visual { order: -1; min-height: 430px; }
  .product-visual img { min-height: 430px; }
  .metric-grid { margin-top: 16px; }
  .method-grid, .about-grid { gap: 64px; }
  .lumen-grid { gap: 42px; }
}

@media (max-width: 860px) {
  :root { --header-height: 68px; }
  .section { padding: 96px 0; }
  .nav-shell { grid-template-columns: 1fr auto auto; gap: 10px; }
  .menu-toggle { display: inline-grid; grid-column: 3; }
  .nav-actions { grid-column: 2; grid-row: 1; }
  .nav-github { display: none; }
  .site-nav { position: fixed; top: calc(var(--header-height) + 8px); right: 20px; left: 20px; display: grid; gap: 0; padding: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 180ms ease, transform 220ms var(--ease), visibility 180ms; }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav a { min-height: 50px; padding: 0 14px; border-radius: 10px; }
  .site-nav a:hover { background: var(--surface-soft); }
  .site-nav a::after { display: none; }
  .section-heading, .method-grid, .about-grid, .lumen-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; }
  .section-heading > p { max-width: 620px; }
  .module-section-heading { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .module-section-heading > p { max-width: 680px; }
  .module-grid { grid-template-columns: 1fr; }
  .module-grid.is-single { max-width: none; }
  .module-card { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); }
  .module-art { height: 100%; min-height: 510px; border-right: 1px solid var(--line); border-bottom: 0; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .search-field { width: 100%; }
  .filter-list { justify-content: flex-start; }
  .method::before { display: none; }
  .method-intro { position: static; }
  .lumen-symbol { position: absolute; inset: 50% auto auto -120px; width: 420px; opacity: .17; transform: translateY(-50%); }
  .lumen-copy { position: relative; z-index: 2; }
  .lumen-backdrop span { left: 18%; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { justify-self: center; }
  .footer-meta { justify-self: center; justify-content: center; }
}

@media (max-width: 600px) {
  .page-shell, .nav-shell { width: min(calc(100% - 28px), var(--shell)); }
  .section { padding: 78px 0; }
  .brand-mark { width: 33px; height: 33px; }
  .brand-type { font-size: .78rem; }
  .language-control select { width: 52px; max-width: 52px; color: transparent; padding-inline: 38px 8px; }
  .language-control select option { color: initial; }
  .lang-trigger { width: 44px; min-width: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .lang-trigger-name, .lang-caret { display: none; }
  /* Fixed to the viewport (not anchored to the trigger) so the panel never
     overflows the screen edge regardless of where the trigger sits among
     the other header controls at narrow widths. */
  .lang-popover { position: fixed; inset-inline: 12px; top: calc(var(--header-height) + 8px); width: auto; }
  h1 { font-size: clamp(3.1rem, 16vw, 4.7rem); }
  h2 { font-size: clamp(2.45rem, 12vw, 3.6rem); }
  .hero { min-height: auto; padding-top: calc(var(--header-height) + 74px); padding-bottom: 42px; }
  .hero-lede { margin-top: 24px; font-size: 1.02rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .proof-list { gap: 12px 18px; font-size: .75rem; }
  .hero-stage { min-height: 465px; }
  .stage-card { width: calc(100% - 16px); padding: 14px; border-radius: 25px; transform: none; animation-name: stage-float-mobile; }
  .study-card { min-height: 300px; padding: 28px 24px 24px; }
  .study-card > strong { font-size: 1.5rem; }
  .stage-metrics { gap: 4px; }
  .stage-metrics b { font-size: .95rem; }
  .stage-metrics span { font-size: .54rem; }
  .orbit-one { width: 460px; height: 460px; }
  .orbit-two { width: 330px; height: 330px; }
  .floating-chip { display: none; }
  .hero-marquee { margin-top: 42px; }
  .section-heading { gap: 24px; }
  .catalog-toolbar { margin-top: 42px; }
  .filter-list { flex-wrap: nowrap; max-width: 100%; padding-bottom: 5px; overflow-x: auto; scrollbar-width: thin; }
  .filter-button { flex: 0 0 auto; }
  .product-card { min-height: 0; border-radius: 24px; }
  .product-visual, .product-visual img { min-height: 280px; }
  .product-copy { padding: 30px 24px; }
  .product-meta { margin-bottom: 28px; }
  .product-card h3 { font-size: 2.45rem; }
  .metric-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
  .metric { display: flex; align-items: baseline; gap: 10px; padding-top: 12px; }
  .metric span { margin-top: 0; }
  .product-actions { flex-direction: column; }
  .product-actions .button { width: 100%; }
  .module-showcase { margin-top: 56px; padding-top: 56px; }
  .module-flow { grid-template-columns: 1fr; gap: 0; padding: 18px 20px; border-radius: var(--radius-md); }
  .module-flow-step { min-height: 44px; }
  .module-flow-line { width: 1px; height: 20px; margin-left: 9px; background: linear-gradient(var(--line), var(--accent), var(--line)); }
  .module-card { display: block; }
  .module-art { height: 270px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .module-copy { min-height: 0; padding: 28px 24px; }
  .module-meta { margin-bottom: 26px; }
  .module-copy h4 { font-size: 2rem; }
  .module-open { margin-top: 4px; }
  .method-list li { grid-template-columns: 42px 1fr; gap: 14px; }
  .lumen-section { min-height: 760px; }
  .lumen-copy h2 { font-size: 5rem; }
  .signal-row { align-items: flex-start; flex-direction: column; }
  .lumen-copy .button { width: 100%; }
  .about-copy { padding-top: 0; }
  .about-actions { align-items: stretch; flex-direction: column; }
  .dialog-shell { padding: 32px 22px; }
  .dialog-columns { grid-template-columns: 1fr; gap: 26px; }
  .dialog-actions { flex-direction: column; }
  .dialog-actions .button { width: 100%; }
  .dialog-title { font-size: 2.35rem; }
}

@keyframes stage-float-mobile { from { transform: translateY(5px); } to { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .button, .filter-button, .icon-button, .product-card, .search-field { border: 1px solid ButtonText; }
  .live-dot, .stage-status i, .status-pill::before { forced-color-adjust: none; }
  .lang-trigger, .lang-listbox { border: 1px solid ButtonText; }
  .lang-option.is-active { outline: 1px solid Highlight; }
}