/* PETROVALUE OPX — marketing site
   Palette takes its accent (teal) and "gap" colour (amber) from the application's own
   control-room theme, so the site and the product read as one thing. */

:root {
  --ground: #edf1f0;
  --surface: #ffffff;
  --surface-2: #e3e9e8;
  --ink: #0e1c24;
  --ink-2: #475a61;
  --ink-3: #6d7f85;
  --line: #cbd6d5;
  --accent: #087f6a;
  --accent-ink: #ffffff;
  --accent-soft: #d3ece6;
  --gap: #a86d06;
  --gap-soft: #f6e8cc;
  --bad: #b3372f;
  --console: #0c131a;          /* the application's own ground — same in both themes */
  --console-2: #121c25;
  --console-line: #22313c;
  --console-ink: #dfe8e8;
  --console-dim: #8398a0;
  --console-teal: #2fd1ae;
  --console-amber: #f2b441;

  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --step-4: clamp(2.5rem, 1.6rem + 4vw, 4.4rem);

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a1016;
    --surface: #101920;
    --surface-2: #16222b;
    --ink: #e3ebeb;
    --ink-2: #9fb1b5;
    --ink-3: #7b8f95;
    --line: #22323c;
    --accent: #34d1b0;
    --accent-ink: #05201a;
    --accent-soft: #10332d;
    --gap: #f2b441;
    --gap-soft: #3a2c10;
    --bad: #f0706a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0a1016;
  --surface: #101920;
  --surface-2: #16222b;
  --ink: #e3ebeb;
  --ink-2: #9fb1b5;
  --ink-3: #7b8f95;
  --line: #22323c;
  --accent: #34d1b0;
  --accent-ink: #05201a;
  --accent-soft: #10332d;
  --gap: #f2b441;
  --gap-soft: #3a2c10;
  --bad: #f0706a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; margin: 0; text-wrap: balance; font-stretch: 100%; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; z-index: 100; border-radius: var(--radius); }
.skip:focus { left: 12px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font: 600 0.78rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 60ch; line-height: 1.5; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 1rem/1 var(--body); padding: 14px 20px; border-radius: var(--radius);
  text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font: 800 1.05rem/1 var(--display); font-stretch: 118%; letter-spacing: 0.06em; }
.brand-name span { color: var(--accent); }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }
.nav .btn { padding: 10px 16px; font-size: 0.95rem; color: var(--accent-ink); }
.theme-toggle, .menu-toggle {
  background: none; border: 1px solid var(--line); color: var(--ink); width: 38px; height: 38px; border-radius: var(--radius);
  display: inline-grid; place-items: center; cursor: pointer; flex: none;
}
.theme-toggle svg, .menu-toggle svg { width: 18px; height: 18px; }
.menu-toggle { display: none; }
.lang-menu { position: relative; flex: none; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; flex: none;
  background: none; border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius);
  text-decoration: none; font: 600 0.85rem var(--body); cursor: pointer; white-space: nowrap;
}
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--ink); }
.lang-toggle svg { width: 16px; height: 16px; flex: none; }
.lang-toggle .care { width: 10px; height: 10px; margin-inline-start: 2px; opacity: .7; }
@media (max-width: 560px) { .lang-toggle span:not(.care) { display: none; } .lang-toggle { width: 38px; padding: 0; justify-content: center; } .lang-toggle .care { display: none; } }
.lang-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; margin: 0; padding: 6px;
  list-style: none; min-width: 168px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .5);
}
.lang-list[hidden] { display: none; }
.lang-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font: 600 0.9rem var(--body);
}
.lang-list a:hover { background: var(--accent-soft); }
.lang-list a[aria-current="true"] { color: var(--accent); pointer-events: none; }
.lang-list a[aria-current="true"]::after { content: "\2713"; }
@media (max-width: 920px) { .lang-list { right: 0; left: auto; } }
@media (max-width: 920px) {
  .menu-toggle { display: inline-grid; }
  .nav {
    position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 12px; justify-content: center; border-bottom: 0; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: end; }
.hero h1 {
  font-size: var(--step-4); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; margin-top: 18px;
}
.hero h1 em { font-style: normal; color: var(--gap); }
.hero .lede { margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-meta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-3); font: 500 0.85rem/1.3 var(--mono); }
.hero-meta span::before { content: "▸ "; color: var(--accent); }

/* the gap gauge — the hero's instrument */
.gauge {
  background: var(--console); color: var(--console-ink); border-radius: 10px; padding: 22px 22px 18px;
  border: 1px solid var(--console-line); box-shadow: 0 30px 60px -30px rgba(4, 20, 26, .55);
}
.gauge-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 0.72rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--console-dim); }
.gauge-head b { color: var(--console-teal); font-weight: 600; }
.gauge-readings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.reading small { display: block; font: 600 0.68rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--console-dim); }
.reading strong { display: block; font: 600 clamp(1.35rem, 1rem + 1.4vw, 1.9rem)/1.1 var(--mono); margin-top: 6px; font-variant-numeric: tabular-nums; }
.reading em { font: 400 0.75rem var(--mono); color: var(--console-dim); font-style: normal; }
.reading.gapr strong { color: var(--console-amber); }
.bar { position: relative; height: 34px; margin-top: 20px; background: var(--console-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--console-line); }
.bar-actual { position: absolute; inset: 0 auto 0 0; width: 92.03%; background: linear-gradient(90deg, #178f79, var(--console-teal)); transform-origin: left; animation: fill 1.9s cubic-bezier(.2,.7,.2,1) both .3s; }
.bar-gap {
  position: absolute; inset: 0 0 0 92.03%;
  background: repeating-linear-gradient(-45deg, var(--console-amber) 0 5px, #b98522 5px 10px);
  animation: blink 1.8s ease both 1.9s;
}
@keyframes fill { from { transform: scaleX(0.2); } to { transform: scaleX(1); } }
@keyframes blink { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bar-actual, .bar-gap { animation: none; } }
.bar-scale { display: flex; justify-content: space-between; font: 400 0.7rem var(--mono); color: var(--console-dim); margin-top: 6px; }
.gauge-value { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--console-line); }
.gauge-value strong { white-space: nowrap; font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem)/1 var(--mono); color: var(--console-amber); }
.gauge-value span { font-size: 0.85rem; color: var(--console-dim); max-width: 26ch; text-align: right; }

.hero-shot { margin-top: clamp(44px, 6vw, 72px); }
.frame {
  background: var(--console); border-radius: 10px 10px 0 0; border: 1px solid var(--console-line); border-bottom: 0;
  padding: 10px 10px 0; box-shadow: 0 -10px 60px -30px rgba(8, 127, 106, .45);
}
.frame-bar { display: flex; gap: 6px; padding: 2px 4px 10px; align-items: center; }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--console-line); }
.frame-bar span { margin-left: 10px; font: 500 0.72rem var(--mono); color: var(--console-dim); }
.frame img { border-radius: 4px 4px 0 0; width: 100%; height: auto; aspect-ratio: 16 / 9; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .gauge-readings { grid-template-columns: 1fr 1fr; }
  .reading.gapr { grid-column: 1 / -1; }
  .gauge-value { flex-direction: column; align-items: start; }
  .gauge-value span { text-align: left; }
}

/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: var(--step-3); font-weight: 750; font-stretch: 108%; letter-spacing: -0.01em; }
.band { background: var(--surface); }

/* proof strip */
.proof { border-bottom: 1px solid var(--line); background: var(--surface); }
.proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof div { padding: 26px 20px; border-left: 1px solid var(--line); }
.proof div:first-child { border-left: 0; padding-left: 0; }
.proof strong { display: block; font: 700 var(--step-2)/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.proof span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 0.93rem; line-height: 1.4; }
@media (max-width: 760px) {
  .proof .wrap { grid-template-columns: 1fr 1fr; }
  .proof div:nth-child(3) { border-left: 0; padding-left: 0; }
  .proof div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* value chain — a real sequence, so it is numbered */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); counter-reset: step; border-top: 2px solid var(--ink); }
.chain li { counter-increment: step; padding: 20px 18px 0 0; position: relative; }
.chain li::before { content: counter(step, decimal-leading-zero); font: 600 0.8rem var(--mono); color: var(--ink-3); display: block; margin-bottom: 14px; }
.chain li::after { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ground); border: 2px solid var(--ink); }
.chain li:last-child::after { background: var(--gap); border-color: var(--gap); }
.chain h3 { font-size: 1.12rem; font-weight: 700; font-stretch: 104%; }
.chain p { margin-top: 8px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.chain .kpi { color: var(--gap); }
@media (max-width: 980px) { .chain { grid-template-columns: repeat(3, 1fr); row-gap: 36px; } }
@media (max-width: 560px) {
  .chain { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--ink); padding-left: 22px; row-gap: 26px; }
  .chain li { padding: 0; }
  .chain li::after { top: 2px; left: -30px; }
}

/* ---------- workspace gallery ---------- */
.gallery { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.tabs { display: flex; flex-direction: column; gap: 2px; }
.tab-group { font: 600 0.7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 6px; }
.tab-group:first-child { margin-top: 0; }
.tab {
  text-align: left; background: none; border: 0; border-left: 2px solid var(--line); padding: 9px 14px; font: 600 0.98rem var(--body);
  color: var(--ink-2); cursor: pointer;
}
.tab:hover { color: var(--ink); border-left-color: var(--ink-3); }
.tab[aria-selected="true"] { color: var(--ink); border-left-color: var(--accent); background: var(--accent-soft); }
.viewer { min-width: 0; }
.viewer .frame { border-radius: 10px; border-bottom: 1px solid var(--console-line); padding-bottom: 10px; box-shadow: none; }
.viewer .frame img { border-radius: 4px; cursor: zoom-in; }
.viewer-caption { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin-top: 18px; }
.viewer-caption h3 { font-size: var(--step-1); font-weight: 700; }
.viewer-caption .path { font: 500 0.78rem var(--mono); color: var(--ink-3); align-self: center; }
.viewer-caption p { grid-column: 1 / -1; color: var(--ink-2); max-width: 70ch; }
@media (max-width: 860px) {
  .gallery { grid-template-columns: 1fr; }
  .tabs { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: thin; }
  .tab-group { display: none; }
  .tab { border-left: 0; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; padding: 8px 14px; font-size: 0.9rem; }
  .tab[aria-selected="true"] { border-color: var(--accent); }
}

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1700px); width: 100%; }
.lightbox::backdrop { background: rgba(4, 10, 14, .86); }
.lightbox img { width: 100%; height: auto; border-radius: 6px; }
.lightbox button { position: absolute; top: 10px; right: 10px; background: var(--console); color: var(--console-ink); border: 1px solid var(--console-line); border-radius: var(--radius); padding: 8px 12px; font: 600 0.9rem var(--body); cursor: pointer; }

/* ---------- engineering ---------- */
.eng-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.figure { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption { margin-top: 12px; color: var(--ink-2); font-size: 0.93rem; line-height: 1.5; }
.figure .axis { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.figure .grid { stroke: var(--line); stroke-width: 1; fill: none; }
.figure .tick { fill: var(--ink-3); font: 500 10px var(--mono); }
.figure .lbl { fill: var(--ink-2); font: 600 11px var(--body); }
.figure .ipr { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.figure .vlp { stroke: var(--ink); stroke-width: 2.5; fill: none; }
.figure .vlp-left { stroke: var(--ink); stroke-width: 2.5; fill: none; stroke-dasharray: 5 4; }
.figure .pt-stable { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.figure .pt-unstable { fill: var(--surface); stroke: var(--bad); stroke-width: 2.5; }
.figure .note-stable { fill: var(--accent); font: 700 11px var(--body); }
.figure .note-unstable { fill: var(--bad); font: 700 11px var(--body); }
.decisions { display: grid; gap: 0; }
.decision { padding: 18px 0; border-top: 1px solid var(--line); }
.decision:first-child { border-top: 0; padding-top: 0; }
.decision h3 { font-size: 1.1rem; font-weight: 700; font-stretch: 104%; }
.decision p { margin-top: 6px; color: var(--ink-2); }
.decision .num { color: var(--ink); font-weight: 600; }

.table-wrap { overflow-x: auto; margin-top: clamp(40px, 6vw, 64px); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 640px; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 0.72rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
td:first-child { font-weight: 700; white-space: nowrap; width: 190px; }
td { color: var(--ink-2); font-size: 0.97rem; }
tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) { .eng-grid { grid-template-columns: 1fr; } }

/* ---------- copilot ---------- */
.copilot-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.pipeline { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: p; }
.pipeline li {
  counter-increment: p; font: 600 0.8rem var(--mono); padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink);
}
.pipeline li::before { content: counter(p) " "; color: var(--ink-3); }
.pipeline li.key { border-color: var(--accent); background: var(--accent-soft); }
.rules { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.rules li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); }
.rules svg { width: 18px; height: 18px; margin-top: 4px; color: var(--accent); }
.rules li.no svg { color: var(--bad); }
.chat { background: var(--console); color: var(--console-ink); border: 1px solid var(--console-line); border-radius: 10px; padding: 18px; font-size: 0.95rem; }
.chat-head { display: flex; justify-content: space-between; font: 600 0.72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--console-dim); padding-bottom: 12px; border-bottom: 1px solid var(--console-line); }
.msg { margin-top: 14px; padding: 12px 14px; border-radius: 6px; background: var(--console-2); border: 1px solid var(--console-line); }
.msg.you { border-color: #1d6e5f; background: #0f2a25; }
.msg .who { font: 600 0.72rem var(--mono); color: var(--console-dim); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.msg p + p { margin-top: 8px; }
.msg .fig { color: var(--console-amber); font-family: var(--mono); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.badge { font: 600 0.72rem var(--mono); padding: 4px 9px; border-radius: 999px; border: 1px solid; }
.b-obs { color: #5ad8a6; border-color: #2c6b53; }
.b-calc { color: #7fb4ff; border-color: #2c4c7a; }
.b-est { color: #f2c35a; border-color: #6e5720; }
.b-ass { color: #c7a0ff; border-color: #56407a; }
.b-ai { color: #ff9a74; border-color: #7a3e2a; }
.computed { margin-top: 8px; font: 500 0.75rem var(--mono); color: var(--console-dim); }
.msg.refuse { border-color: #6e2f2b; }
@media (max-width: 900px) { .copilot-grid { grid-template-columns: 1fr; } }

/* ---------- governance ---------- */
.gov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gov-grid > div { background: var(--surface); padding: 26px 24px; }
.gov-grid h3 { font-size: 1.08rem; font-weight: 700; font-stretch: 104%; }
.gov-grid p { margin-top: 8px; color: var(--ink-2); font-size: 0.97rem; }
.gov-grid .tag { font: 600 0.7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px; }
@media (max-width: 900px) { .gov-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .gov-grid { grid-template-columns: 1fr; } }

/* ---------- validation ---------- */
.validation { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.faults { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 460px; }
.faults i { aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
.faults i.f { background: var(--gap); border-color: var(--gap); }
.faults i.x { background: transparent; border: 2px solid var(--bad); }
.faults-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 0.9rem; color: var(--ink-2); }
.faults-legend span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.faults-legend .l-f::before { background: var(--gap); }
.faults-legend .l-h::before { background: var(--surface-2); border: 1px solid var(--line); }
.faults-legend .l-x::before { background: transparent; border: 2px solid var(--bad); }
.score { font: 700 var(--step-4)/1 var(--mono); color: var(--ink); letter-spacing: -0.03em; }
.score small { display: block; font-size: 0.3em; color: var(--ink-3); letter-spacing: 0; margin: 10px 0 22px; }
.checks { margin-top: 26px; display: grid; gap: 10px; }
.checks div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); color: var(--ink-2); }
.checks b { font-family: var(--mono); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 860px) { .validation { grid-template-columns: 1fr; } }

/* ---------- editions ---------- */
.editions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.edition { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.edition.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.edition header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.edition h3 { font-size: var(--step-2); font-weight: 750; font-stretch: 108%; }
.edition .pill { font: 600 0.7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.edition p { color: var(--ink-2); }
.spec { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; font-size: 0.95rem; }
.spec dt { font: 600 0.75rem/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { margin: 0; color: var(--ink); }
.edition code, .cli code { font-family: var(--mono); font-size: 0.85em; }
.edition .btn { margin-top: auto; align-self: start; }
@media (max-width: 820px) { .editions { grid-template-columns: 1fr; } .spec { grid-template-columns: 1fr; gap: 2px; } .spec dd { margin-bottom: 8px; } }

.interop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.interop div { border-top: 2px solid var(--ink); padding-top: 14px; }
.interop h3 { font-size: 1rem; font-weight: 700; }
.interop p { margin-top: 6px; color: var(--ink-2); font-size: 0.93rem; }
@media (max-width: 900px) { .interop { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .interop { grid-template-columns: 1fr; } }

.cli { margin-top: 44px; background: var(--console); color: var(--console-ink); border-radius: 10px; padding: 20px 22px; overflow-x: auto; border: 1px solid var(--console-line); }
.cli pre { margin: 0; font: 400 0.88rem/1.8 var(--mono); }
.cli .c { color: var(--console-dim); }
.cli .p { color: var(--console-teal); }

/* ---------- themes ---------- */
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.themes figure { margin: 0; }
.themes img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--console-line); }
.themes figcaption { margin-top: 10px; color: var(--ink-2); font-size: 0.95rem; }
.themes figcaption b { color: var(--ink); margin-right: 8px; font-family: var(--display); font-stretch: 104%; }
@media (max-width: 700px) { .themes { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 50px -30px rgba(8, 127, 106, .5); }
.plan h3 { font-size: var(--step-2); font-weight: 750; font-stretch: 108%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plan .pill { font: 600 0.68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.plan-for { margin-top: 10px; color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; }
.plan-price { color: var(--ink); padding-block: 16px; border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.plan-price .amount { font: 750 clamp(1.6rem, 1.3rem + 1vw, 2rem)/1 var(--display); font-stretch: 108%; letter-spacing: -0.01em; }
.plan-price .amount.num { font-family: var(--mono); font-weight: 700; letter-spacing: -0.02em; }
.plan-price .per { font-size: 0.9rem; color: var(--ink-3); }
.plan-plus { font-weight: 700; font-size: 0.93rem; color: var(--ink); margin-bottom: -8px; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 0.96rem; line-height: 1.45; }
.plan-list li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px;
  border-left: 2.4px solid var(--accent); border-bottom: 2.4px solid var(--accent); transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; justify-content: center; }
.plan-all { margin-top: 28px; padding: 20px 24px; border: 1px dashed var(--line); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; }
.plan-all strong { font: 600 0.75rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.plan-all ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.plan-all li { color: var(--ink-2); font-size: 0.95rem; }
.plan-all li::before { content: "+ "; color: var(--accent); font-family: var(--mono); }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 620px; } }

/* ---------- hero ribbon ---------- */
.ribbon {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 600;
}
.ribbon b { font: 700 0.7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--gap); color: var(--console); }
.ribbon:hover { border-color: var(--accent); }
.ribbon span { color: var(--accent); }

/* ---------- value ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.value-card .value-figure { font: 700 clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem)/1 var(--mono); color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.value-card:nth-child(1) .value-figure { color: var(--gap); }
.value-card .value-figure small { font-size: 0.42em; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; font-weight: 600; }
.value-card h3 { font-size: 1.12rem; font-weight: 700; font-stretch: 104%; margin-top: 6px; }
.value-card p { color: var(--ink-2); font-size: 0.96rem; line-height: 1.5; }
.value-card p b { color: var(--ink); }
@media (max-width: 960px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .value-grid { grid-template-columns: 1fr; } }

.roi { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px, 4vw, 48px); align-items: start;
  background: var(--console); color: var(--console-ink); border-radius: 12px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--console-line); }
.roi .eyebrow { color: var(--console-teal); }
.roi h3 { font-size: var(--step-2); font-weight: 750; font-stretch: 108%; margin-top: 12px; color: var(--console-ink); }
.roi-copy p:last-child { margin-top: 14px; color: var(--console-dim); line-height: 1.55; }
.roi-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.roi-form .field label { color: var(--console-ink); font-size: 0.85rem; }
.roi-form .field label span { color: var(--console-dim); }
.roi-form .field input { background: var(--console-2); border-color: var(--console-line); color: var(--console-ink); font-family: var(--mono); }
.roi-out { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 16px; border-top: 1px solid var(--console-line); margin-top: 4px; }
.roi-out small { display: block; font: 600 0.7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--console-dim); }
.roi-out strong { display: block; margin-top: 6px; font: 700 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.1 var(--mono); color: var(--console-amber); }
.roi-out div:first-child strong { color: var(--console-ink); }
.roi-note { grid-column: 1 / -1; color: var(--console-dim) !important; }
.roi-form .btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 900px) { .roi { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .roi-form { grid-template-columns: 1fr 1fr; } .roi-out { grid-template-columns: 1fr; } }

/* ---------- scale ---------- */
.scale { background: var(--console); color: var(--console-ink); padding-block: clamp(64px, 9vw, 110px); border-block: 1px solid var(--console-line); }
.scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.scale .eyebrow { color: var(--console-teal); }
.scale-title { font-size: var(--step-4); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; margin-top: 16px; color: var(--console-ink); }
.scale-title em { font-style: normal; color: var(--console-amber); }
.scale-lede { margin-top: 18px; color: var(--console-dim); font-size: var(--step-1); line-height: 1.5; max-width: 52ch; }
.scale-stats { margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--console-line); border: 1px solid var(--console-line); border-radius: 8px; overflow: hidden; }
.scale-stats div { background: var(--console-2); padding: 14px 16px; }
.scale-stats dt { font: 600 0.68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--console-dim); }
.scale-stats dd { margin: 6px 0 0; font: 700 1.5rem/1 var(--mono); color: var(--console-ink); font-variant-numeric: tabular-nums; }
.scale-note { margin-top: 16px; font-size: 0.85rem; color: var(--console-dim); line-height: 1.5; max-width: 60ch; }
.swarm { margin: 0; background: var(--console-2); border: 1px solid var(--console-line); border-radius: 12px; padding: 16px; }
.swarm canvas { width: 100%; height: auto; display: block; aspect-ratio: 560 / 360; }
.swarm figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 0.9rem; color: var(--console-dim); }
.swarm figcaption .num { color: var(--console-ink); font-weight: 700; }
.swarm-legend { display: inline-flex; gap: 14px; align-items: center; }
.swarm-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.swarm-legend .ok { background: var(--console-teal); }
.swarm-legend .gap { background: var(--console-amber); }
.swarm-ill { margin-left: auto; font: 600 0.68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 900px) { .scale-grid { grid-template-columns: 1fr; } }

/* ---------- features ---------- */
.feature-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fgroup { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px 22px 18px; }
.fgroup.wide { grid-column: span 3; }
.fgroup h3 { font-size: 1.05rem; font-weight: 750; font-stretch: 106%; display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fgroup h3 .num { font-size: 0.78rem; color: var(--accent); font-weight: 600; }
.fgroup ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.fgroup ul.two-col { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.fgroup li { color: var(--ink-2); font-size: 0.93rem; line-height: 1.45; }
.fgroup li b { display: block; color: var(--ink); font-weight: 700; font-size: 0.96rem; }
@media (max-width: 960px) { .feature-groups { grid-template-columns: 1fr 1fr; } .fgroup.wide { grid-column: span 2; } }
@media (max-width: 620px) { .feature-groups { grid-template-columns: 1fr; } .fgroup.wide { grid-column: auto; } .fgroup ul.two-col { grid-template-columns: 1fr; } }

/* ---------- compare ---------- */
.compare-wrap { margin-top: 0; }
table.compare th[scope="row"] { font-weight: 700; color: var(--ink); white-space: nowrap; width: 150px; background: transparent; font: 700 0.95rem var(--body); letter-spacing: 0; text-transform: none; }
table.compare td:first-of-type { color: var(--ink-3); font-weight: 400; white-space: normal; width: auto; }
table.compare td:last-child { color: var(--ink); font-weight: 600; }
table.compare td:last-child::before { content: "\2713"; color: var(--accent); margin-right: 8px; font-weight: 700; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, #0b3a33, var(--console) 60%); color: var(--console-ink); padding-block: clamp(48px, 7vw, 80px); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.cta-band h2 { font-size: var(--step-3); font-weight: 800; font-stretch: 110%; color: var(--console-ink); max-width: 22ch; }
.cta-band p { margin-top: 12px; color: var(--console-dim); max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-ghost-light { border-color: var(--console-line); color: var(--console-ink); background: transparent; }
.btn-ghost-light:hover { border-color: var(--console-teal); }
.cta-band .btn-primary { background: var(--console-teal); color: #05201a; }

.service { margin-top: 20px; display: grid; grid-template-columns: 1.45fr 0.55fr; gap: clamp(20px, 3vw, 40px);
  background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: clamp(22px, 3vw, 32px); align-items: start; }
.service h3 { font-size: var(--step-2); font-weight: 750; font-stretch: 108%; margin-top: 10px; }
.service-copy > p { margin-top: 12px; color: var(--ink-2); }
.service-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.service-list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 0.96rem; line-height: 1.45; }
.service-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px;
  border-left: 2.4px solid var(--accent); border-bottom: 2.4px solid var(--accent); transform: rotate(-45deg); }
.service-buy { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 32px); display: grid; gap: 14px; justify-items: start; }
.service-buy .plan-price { border-block: 0; padding-block: 0; }
.service-note { color: var(--ink-3); font-size: 0.88rem; line-height: 1.45; }
@media (max-width: 900px) { .service { grid-template-columns: 1fr; } .service-buy { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font: 700 1.08rem/1.35 var(--display); font-stretch: 104%; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 1.5rem var(--mono); color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--ink-2); max-width: 70ch; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.93rem; }
.field label span { color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea {
  font: 400 1rem var(--body); color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--bad); }
.field .err { color: var(--bad); font-size: 0.85rem; min-height: 0; }
.form .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form .fine { color: var(--ink-3); font-size: 0.85rem; }
.form-done { grid-column: 1 / -1; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 16px; }
.form-done pre { white-space: pre-wrap; font: 400 0.85rem/1.55 var(--mono); margin: 10px 0; color: var(--ink); }
.form-done .row { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-points { margin-top: 28px; display: grid; gap: 14px; }
.contact-points div { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--ink-2); }
.contact-points svg { width: 18px; height: 18px; color: var(--accent); margin-top: 4px; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } }

/* ---------- WhatsApp ---------- */
.wa-float {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border-radius: 999px;
  background: #25d366; color: #05210f; text-decoration: none;
  font: 700 0.95rem/1 var(--body);
  box-shadow: 0 10px 30px -10px rgba(4, 20, 14, .55);
  transition: transform .15s, box-shadow .15s;
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(4, 20, 14, .6); }
.wa-float svg { width: 22px; height: 22px; flex: none; }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }
@media (max-width: 560px) { .wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wa-float { padding: 14px; } }
@media print { .wa-float { display: none; } }
.contact-points a { color: var(--accent); }
.contact-points svg[viewBox="0 0 24 24"] { color: #25d366; }

/* ---------- footer ---------- */
.site-footer { background: var(--console); color: var(--console-dim); padding-block: 48px 32px; font-size: 0.93rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.site-footer .brand { color: var(--console-ink); }
.site-footer h4 { font: 600 0.72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--console-ink); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--console-dim); text-decoration: none; }
.site-footer a:hover { color: var(--console-teal); }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--console-line); padding-top: 20px; margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.85rem; }
.site-footer p { margin-top: 14px; max-width: 38ch; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .wrap > div:first-child { grid-column: 1 / -1; } }


@media print {
  .site-header, .hero-cta, .tour, .contact .form, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- one theme, carried across the application ---------- */
.theme-spread { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); padding-top: clamp(26px, 4vw, 40px); }
.theme-spread h3 { font-size: var(--step-1); font-weight: 700; font-stretch: 104%; }
.theme-spread > p { margin-top: 10px; color: var(--ink-2); max-width: 64ch; }
#gallery .theme-spread { margin-top: 0; border-top: 0; padding-top: 0; }
#gallery .theme-row:first-child { margin-top: 0; }
.themes-more { margin-top: 26px; color: var(--ink-2); }
.themes-more a { color: var(--accent); }
.theme-row { margin-top: clamp(24px, 3vw, 34px); }
.theme-row h4 {
  font: 600 0.74rem var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.theme-row h4 span { color: var(--ink-3); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.theme-row .theme-spread-grid { margin-top: 0; }
.theme-spread-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.theme-spread-grid figure { margin: 0; }
.theme-spread-grid img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; display: block;
  border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.theme-spread-grid img:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -24px rgba(0,0,0,.5); border-color: var(--accent); }
.theme-spread-grid figcaption { margin-top: 9px; font: 600 0.78rem var(--mono); letter-spacing: .04em; color: var(--ink-3); }
@media (max-width: 900px) { .theme-spread-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .theme-spread-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .theme-spread-grid img:hover { transform: none; } }

/* ============================================================
   MOTION
   Nothing here carries meaning on its own: every element is
   readable at rest, and the whole layer is switched off by
   prefers-reduced-motion and when printing.
   ============================================================ */

@keyframes pv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv-zoom { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } }
@keyframes pv-flash { 30% { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); } }
@keyframes pv-ring {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); }
  to   { box-shadow: 0 0 0 10px transparent; }
}

/* ---------- hero: one sequence on arrival ---------- */
.hero-grid > div > * { animation: pv-rise .95s cubic-bezier(.2,.7,.2,1) both; }
.hero-grid > div > :nth-child(2) { animation-delay: .09s; }
.hero-grid > div > :nth-child(3) { animation-delay: .18s; }
.hero-grid > div > :nth-child(4) { animation-delay: .27s; }
.hero-grid > div > :nth-child(5) { animation-delay: .36s; }
.hero-grid > div > :nth-child(6) { animation-delay: .45s; }
.gauge { animation: pv-zoom 1.1s cubic-bezier(.2,.7,.2,1) both .3s; }
.hero-shot { animation: pv-rise 1.25s cubic-bezier(.2,.7,.2,1) both .6s; }
.ribbon { transition: transform .15s, border-color .15s; }
.ribbon:hover { transform: translateX(2px); }

.motion-settled .hero-grid > div > *, .motion-settled .gauge, .motion-settled .hero-shot {
  animation: none; opacity: 1; transform: none;
}

/* ---------- header: lifts off the page once you scroll ---------- */
.site-header { transition: box-shadow .25s ease, backdrop-filter .25s ease; }
.site-header.scrolled { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .75); }
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  overflow: hidden; pointer-events: none;
}
.scroll-progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gap));
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* ---------- reveal on scroll: opacity joins the existing lift ---------- */
.js .reveal { transition: transform .85s cubic-bezier(.2,.7,.2,1), opacity .7s ease; }
.js .reveal.pre { transform: translateY(18px); opacity: 0; }

/* staggered containers move their children instead of themselves */
.js .reveal.stagger.pre { transform: none; opacity: 1; }
.js .stagger > * { transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .65s ease; transition-delay: calc(var(--i, 0) * 85ms); }
.js .stagger.pre > * { transform: translateY(16px); opacity: 0; }
.js .stagger-slow > * { transition-delay: calc(var(--i, 0) * 210ms); }

/* ---------- value chain: the line draws, then the nodes land ---------- */
.js .chain { position: relative; }
.js .chain::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 2.1s cubic-bezier(.3,.6,.2,1);
}
.js .chain.drawn::before { transform: scaleX(1); }
.js .chain li::after { transition: transform .6s cubic-bezier(.2,1.5,.4,1); transition-delay: calc(var(--i, 0) * 200ms + 400ms); }
.js .chain:not(.drawn) li::after { transform: scale(0); }
@media (max-width: 560px) {
  .js .chain::before { top: 0; bottom: 0; left: -2px; right: auto; width: 2px; height: auto; transform: scaleY(0); transform-origin: top; }
  .js .chain.drawn::before { transform: scaleY(1); }
}

/* ---------- nodal figure: the two curves are drawn, then the roots appear ---------- */
.js .figure .pt-stable, .js .figure .pt-unstable { transform-box: fill-box; transform-origin: center; }

/* ---------- copilot pipeline: one pass along the steps ---------- */
.js .pipeline.swept li { animation: pv-flash 1.25s ease; animation-delay: calc(var(--i, 0) * 215ms); }

/* ---------- validation grid: fifty wells land in a sweep ---------- */
.js .faults i { transition: opacity .42s ease, transform .42s cubic-bezier(.2,1.5,.4,1); transition-delay: calc(var(--i, 0) * 18ms); }
.js .faults.pre i { opacity: 0; transform: scale(.35); }
.js .faults.played i.x { animation: pv-ring 1.9s ease-out 3 1.7s; }

/* ---------- workspace gallery: the screenshot cross-fades ---------- */
.js .viewer .frame img, .js .viewer-caption { transition: opacity .34s ease; }
.js .viewer.swapping .frame img, .js .viewer.swapping .viewer-caption { opacity: .25; }
.tab { transition: color .15s, border-left-color .15s, background-color .15s; }

/* ---------- lightbox ---------- */
.lightbox[open] { animation: pv-zoom .34s cubic-bezier(.2,.7,.2,1); }
.lightbox::backdrop { animation: pv-fade .34s ease; }

/* ---------- cards lift under the cursor ---------- */
.value-card, .plan, .edition, .themes figure, .fgroup {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.value-card:hover, .plan:hover, .edition:hover, .themes figure:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .55);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.gov-grid > div { transition: background-color .2s ease; }
.gov-grid > div:hover { background: var(--surface-2); }
.checks div, .spec, .interop div { transition: border-color .2s ease; }

/* ---------- everything off when the viewer asks for less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-grid > div > *, .gauge, .hero-shot, .lightbox[open], .lightbox::backdrop,
  .js .pipeline.swept li, .js .faults.played i.x { animation: none !important; }
  .js .reveal.pre, .js .stagger.pre > *, .js .faults.pre i { opacity: 1 !important; transform: none !important; }
  .js .chain::before { transform: none !important; }
  .js .chain:not(.drawn) li::after { transform: none !important; }
  .js .viewer.swapping .frame img, .js .viewer.swapping .viewer-caption { opacity: 1 !important; }
  .value-card:hover, .plan:hover, .edition:hover, .themes figure:hover, .ribbon:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important;
  }
}

@media print {
  .js .reveal.pre, .js .stagger.pre > *, .js .faults.pre i { opacity: 1 !important; transform: none !important; }
  .js .chain::before, .js .chain:not(.drawn) li::after { transform: none !important; }
  .scroll-progress { display: none; }
}