/* Orvyn static page styles */

:root {
  /* Colors */
  --c-bg: #f3f3f0;
  --c-bg-soft: #fbfbfa;
  --c-surface: #ffffff;
  --c-block: #f5f5f2;
  --c-navy: #0b1a33;
  --c-navy-hover: #16294a;
  --c-blue: #2f73ee;
  --c-blue-ink: #2459c9;
  --c-blue-deep: #1d4fb8;
  --c-blue-soft: #5b95ff;
  --c-ink: #1d2a40;
  --c-ink-2: #28354d;
  --c-text: #2b3850;
  --c-text-2: #46526a;
  --c-muted: #5a6578;
  --c-muted-2: #6b7587;
  --c-muted-3: #8a93a3;
  --c-graphite: #33415a;
  --c-brand-sub: #5d6779;
  --c-red: #b4382e;
  --c-line: rgba(11, 26, 51, 0.08);
  --c-line-soft: rgba(11, 26, 51, 0.07);
  --c-line-mid: rgba(11, 26, 51, 0.14);
  --c-line-strong: rgba(11, 26, 51, 0.16);
  --c-blue-tint: rgba(47, 115, 238, 0.08);
  --c-blue-tint-2: rgba(47, 115, 238, 0.1);
  --c-blue-border: rgba(47, 115, 238, 0.45);

  /* Console (dark) */
  --k-text: #eef2f8;
  --k-body: #d3dcea;
  --k-sub: #6f80a0;
  --k-dim: #566887;
  --k-time: #a3b3cf;
  --k-caption: #5f7193;
  --k-line: rgba(255, 255, 255, 0.07);
  --k-live: #3ccf8e;

  /* Fonts */
  --f-sans: "Manrope", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad: clamp(32px, 4vw, 48px);
  --header-h: 72px;
  --radius-card: 16px;
  --radius-block: 12px;
  --shadow-card: 0 1px 2px rgba(11, 26, 51, 0.04);
  --ease-out: cubic-bezier(0.16, 0.84, 0.3, 1);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-navy);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-navy); }
a:hover { color: var(--c-blue); }
p a, .kv-val a { color: var(--c-blue); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.page { min-height: 100vh; }
.wrap { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.stack-20 { display: flex; flex-direction: column; gap: 20px; }
.ico { flex: none; }
.code-inline {
  font-family: var(--f-mono);
  font-size: 0.86em;
  background: rgba(11, 26, 51, 0.06);
  padding: 1px 6px;
  border-radius: 5px;
}
.cap {
  font: 600 10.5px/1.3 var(--f-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(243, 243, 240, 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--c-line);
}
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--c-navy); }
.brand:hover { color: var(--c-navy); }
.brand-name { font: 700 21px/1 var(--f-sans); letter-spacing: 0.34em; margin-right: -0.2em; }
.brand-sep { width: 1px; height: 22px; background: rgba(11, 26, 51, 0.2); }
.brand-by { font: 600 10.5px/1 var(--f-sans); letter-spacing: 0.22em; color: var(--c-brand-sub); }
.badge-testnet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(47, 115, 238, 0.09); color: var(--c-blue-ink);
  font: 600 11px/1 var(--f-sans); letter-spacing: 0.04em;
}
.badge-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--c-blue); }
.nav a { text-decoration: none; font: 500 14.5px/1 var(--f-sans); }
.nav-desktop { display: none; gap: 36px; margin: 0 auto; }
.nav-mobile { display: flex; gap: 24px; overflow-x: auto; padding: 0 20px 14px; white-space: nowrap; }
.nav-mobile a { font-size: 14px; }
.btn-github {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px;
  border: 1px solid rgba(11, 26, 51, 0.22); border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  text-decoration: none; font: 600 14px/1 var(--f-sans);
}
.btn-github:hover { border-color: var(--c-navy); background: #fff; color: var(--c-navy); }
@media (min-width: 860px) {
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }
  .nav-desktop + .btn-github { margin-left: 0; }
}

/* Hero */
.hero { padding: clamp(24px, 3vw, 48px) 0 clamp(28px, 3vw, 48px); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.hero-copy { display: flex; flex-direction: column; gap: 26px; }
.eyebrow { font: 600 12.5px/1 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-blue); }
.hero-title {
  margin: 0;
  font: 600 clamp(38px, 4.86vw, 63px)/1.04 var(--f-sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-lead {
  margin: 0; max-width: 520px;
  font: 400 clamp(17px, 1.5vw, 19px)/1.6 var(--f-sans);
  color: var(--c-text-2);
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 8px; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 28px; border-radius: 12px;
  background: var(--c-navy); color: #fff;
  text-decoration: none; font: 600 15.5px/1 var(--f-sans); white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(11, 26, 51, 0.7);
}
.btn-primary:hover { background: var(--c-navy-hover); color: #fff; }
.link-underline {
  font: 600 15px/1 var(--f-sans); text-decoration: none;
  padding-bottom: 5px; border-bottom: 1.5px solid rgba(11, 26, 51, 0.35);
}
.link-underline:hover { border-color: var(--c-blue); }
.feature-strip {
  list-style: none; margin: 6px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(11, 26, 51, 0.1);
  max-width: 560px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.feature {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 11px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-ink-2); white-space: nowrap;
}
.feature svg { color: var(--c-blue); }
.feature-sep { width: 1px; height: 14px; background: var(--c-line-mid); }
.hero-visual { position: relative; min-width: 0; }
.hero-glow {
  position: absolute; inset: -60px -40px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47, 115, 238, 0.16), rgba(47, 115, 238, 0));
}

/* Agent console */
.console {
  position: relative;
  display: flex; flex-direction: column;
  height: min(600px, max(440px, calc(100vh - 176px)));
  border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 55% at 100% 0%, rgba(47, 115, 238, 0.24), rgba(47, 115, 238, 0) 60%), var(--c-navy);
  border: 1px solid rgba(11, 26, 51, 0.9);
  box-shadow: 0 40px 80px -36px rgba(11, 26, 51, 0.65), 0 2px 6px rgba(11, 26, 51, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.console-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--k-line); }
.console-dot { flex: none; width: 8px; height: 8px; border-radius: 99px; background: var(--k-dim); transition: all 0.3s; }
.console.is-playing .console-dot { background: var(--k-live); box-shadow: 0 0 0 4px rgba(60, 207, 142, 0.16); }
.console-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.console-title { font: 600 13px/1 var(--f-sans); color: var(--k-text); }
.console-sub { font: 500 10.5px/1.2 var(--f-mono); color: var(--k-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-time { margin-left: auto; font: 500 11.5px/1 var(--f-mono); color: var(--k-time); font-variant-numeric: tabular-nums; white-space: nowrap; }
.console-btn {
  flex: none; width: 32px; height: 32px; padding: 0;
  border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05); color: #dbe4f3;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.console-btn:hover { background: rgba(255, 255, 255, 0.12); }
.console-btn .ico-play { display: none; margin-left: 1px; }
.console:not(.is-playing) .console-btn .ico-play { display: block; }
.console:not(.is-playing) .console-btn .ico-pause { display: none; }
.console-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 18px 22px;
  display: flex; flex-direction: column; gap: 9px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.console-foot { padding: 12px 18px 14px; border-top: 1px solid var(--k-line); display: flex; flex-direction: column; gap: 10px; }
.console-track { position: relative; height: 14px; }
.console-rail, .console-bar { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; }
.console-rail { background: rgba(255, 255, 255, 0.08); }
.console-bar { background: var(--c-blue-soft); transform-origin: left center; transform: scaleX(0); }
.console-marker {
  position: absolute; top: 0; width: 14px; height: 14px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.console-marker::before {
  content: ""; width: 8px; height: 8px; border-radius: 99px;
  background: var(--c-navy); border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.console-marker.is-done::before { background: var(--c-blue-soft); border-color: var(--c-blue-soft); }
.console-caption { display: flex; justify-content: space-between; gap: 12px; font: 500 10.5px/1.3 var(--f-mono); color: var(--k-caption); }
.console-turn { white-space: nowrap; }
.console-error { margin: auto; padding: 24px; text-align: center; font: 500 13px/1.6 var(--f-mono); color: var(--k-time); }

/* Console lines */
.cl-in { animation: cl-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes cl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cl-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
.cl-caret {
  display: inline-block; width: 7px; height: 1.05em; margin-left: 2px;
  vertical-align: -0.15em; background: currentColor; opacity: 0.8;
  animation: cl-blink 1s steps(1) infinite;
}
.cl-label { font: 600 10px/1 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-sub); }
.cl-owner { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.cl-owner:first-child { margin-top: 0; }
.cl-divider { display: flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--f-mono); color: var(--k-dim); }
.cl-divider::before, .cl-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); }
.cl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cl-bubble {
  max-width: 88%; padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f3f6fb; font: 500 14px/1.5 var(--f-sans);
}
.cl-agent { display: flex; flex-direction: column; gap: 6px; max-width: 94%; margin-top: 4px; }
.cl-agent-head { display: flex; align-items: center; gap: 8px; }
.cl-agent-head::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--c-blue-soft); }
.cl-agent-head .cl-label { color: #8fb2ff; }
.cl-agent-text { color: var(--k-body); font: 400 14px/1.6 var(--f-sans); }
.cl-call {
  align-self: flex-start; max-width: 100%;
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(91, 149, 255, 0.1); border: 1px solid rgba(120, 166, 255, 0.22);
  font: 500 12px/1.5 var(--f-mono);
}
.cl-call-tool { color: #e4ecff; font-weight: 600; }
.cl-call-args { color: #8ea6cf; word-break: break-word; min-width: 0; }
.cl-result { display: flex; gap: 8px; padding-left: 12px; font: 400 12px/1.5 var(--f-mono); color: #8494ad; }
.cl-result svg { flex: none; margin-top: 3px; color: #4f6386; }
.cl-ok {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 11px 4px 4px; border-radius: 999px;
  background: rgba(47, 115, 238, 0.16); border: 1px solid rgba(91, 149, 255, 0.38);
}
.cl-ok-check { width: 18px; height: 18px; border-radius: 99px; background: var(--c-blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.cl-ok-text { font: 600 12px/1 var(--f-sans); color: #dbe6ff; }
.cl-ok-tool { font: 500 11px/1 var(--f-mono); color: #7d93bd; }
.cl-ask {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: 12px; margin-top: 4px;
  background: linear-gradient(180deg, rgba(47, 115, 238, 0.22), rgba(47, 115, 238, 0.08));
  border: 1px solid rgba(120, 166, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(47, 115, 238, 0.1), 0 10px 30px -10px rgba(47, 115, 238, 0.5);
}
.cl-ask-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-ask-head .cl-label { color: #a9c4ff; }
.cl-ask-sub { font: 500 10.5px/1 var(--f-mono); color: #6f86b3; }
.cl-ask-text { color: #eef3fc; font: 500 13.5px/1.55 var(--f-sans); }
.cl-answer {
  padding: 8px 12px; border-radius: 12px 12px 4px 12px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f3f6fb; font: 500 12.5px/1.4 var(--f-mono);
}
.cl-verdict {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
}
.cl-verdict-label { font: 500 10px/1 var(--f-mono); color: var(--k-sub); letter-spacing: 0.02em; }
.cl-verdict-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cl-verdict-amount { font: 600 20px/1 var(--f-sans); letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.cl-verdict-pill {
  display: inline-flex; padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(120, 166, 255, 0.55); color: #8fb2ff;
  font: 600 10px/1 var(--f-mono); letter-spacing: 0.08em;
}
.cl-verdict-note { font: 500 11px/1.3 var(--f-mono); color: #7d8fb0; }

/* Sections */
.below { display: block; background: var(--c-bg-soft); border-top: 1px solid var(--c-line-soft); }
.section {
  position: relative;
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--c-line-soft);
  scroll-margin-top: var(--header-h);
}
.section-first { border-top: none; }
.section-clip { overflow: hidden; }
.glow {
  position: absolute; width: 620px; height: 620px; border-radius: 999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47, 115, 238, 0.075), rgba(47, 115, 238, 0));
}
.glow-how { right: -220px; top: -200px; }
.glow-demo { left: -260px; top: 30%; }
.sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 3vw, 40px); }
.sec-head-tight { margin-bottom: clamp(8px, 1vw, 20px); }
.sec-num { font: 500 12px/1 var(--f-mono); color: var(--c-blue); }
.sec-title {
  margin: 0;
  font: 600 clamp(32px, 3.8vw, 46px)/1.08 var(--f-sans);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.sec-title-sm {
  margin: 0 0 clamp(10px, 1.4vw, 18px);
  font: 600 clamp(24px, 2.4vw, 30px)/1.15 var(--f-sans);
  letter-spacing: -0.022em;
}
.sec-stack { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.sec-lead { margin: 0; max-width: 560px; font: 400 17px/1.65 var(--f-sans); color: var(--c-text-2); text-wrap: pretty; }
.sec-lead-wide { margin-top: 6px; max-width: 820px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; }
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 24px 64px;
  align-items: stretch;
}
.col-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.col-fill { display: flex; flex-direction: column; min-width: 0; }
.body-lg { margin: 0; font: 400 17px/1.65 var(--f-sans); color: var(--c-text-2); text-wrap: pretty; }
.body-md { margin: 0; font: 400 15px/1.65 var(--f-sans); color: var(--c-muted); text-wrap: pretty; }

/* Chips */
.chip-tool, .chip-plain {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px; border-radius: 7px;
  background: var(--c-block); border: 1px solid var(--c-line);
  font: 600 12px/1.2 var(--f-mono); color: var(--c-blue-ink); white-space: nowrap;
}
.chip-tool::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--c-blue); }
.chip-plain { font-weight: 500; color: var(--c-graphite); }

/* 01 What */
.what-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.what-card { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.visual {
  height: 120px; border-radius: var(--radius-block);
  background: var(--c-block); border: 1px solid var(--c-line);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
.vis-label { font: 500 10.5px/1 var(--f-mono); color: var(--c-muted-3); letter-spacing: 0.02em; }
.vis-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.kv-lines { gap: 5px; font: 500 12.5px/1.35 var(--f-mono); }
.kv-line { display: flex; justify-content: space-between; gap: 12px; }
.kv-line-k { color: var(--c-muted-2); }
.kv-line-v, .j-val { color: var(--c-blue-ink); font-weight: 600; }
.json-lines { font: 500 12.5px/1.4 var(--f-mono); color: var(--c-graphite); }
.j-key { color: var(--c-graphite); }
.j-punc { color: var(--c-muted-3); }
.what-title { margin: 10px 0 0; font: 600 19px/1.25 var(--f-sans); letter-spacing: -0.01em; }
.what-text { margin: 0; font: 400 15px/1.6 var(--f-sans); color: var(--c-muted); text-wrap: pretty; }

/* Verdict (light) */
.verdict { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.verdict-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.verdict-amount { font: 600 24px/1 var(--f-sans); letter-spacing: -0.02em; color: var(--c-navy); white-space: nowrap; }
.verdict-pill {
  display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--c-blue-border);
  font: 600 10.5px/1 var(--f-mono); letter-spacing: 0.08em; color: var(--c-blue-ink);
}
.verdict-note { font: 500 11.5px/1.3 var(--f-mono); color: var(--c-muted-3); }

/* 02 How */
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.flow-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; min-width: 0; }
.flow-node {
  grid-column: 1; grid-row: 1;
  width: 34px; height: 34px; border-radius: 99px;
  background: #fff; border: 1px solid var(--c-line-strong);
  display: flex; align-items: center; justify-content: center;
  font: 600 11.5px/1 var(--f-mono); color: var(--c-blue);
}
.flow-line { grid-column: 1; grid-row: 2; justify-self: center; width: 1px; margin-top: 8px; background: var(--c-line-strong); }
.flow-body { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 12px; padding: 6px 0 28px; min-width: 0; }
.flow-step:last-child .flow-line { display: none; }
.flow-step:last-child .flow-body { padding-bottom: 0; }
.flow-text { margin: 0; font: 400 14.5px/1.6 var(--f-sans); color: var(--c-text); text-wrap: pretty; }
.flow-text a { color: var(--c-blue); }
.flow-chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 1080px) {
  .flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .flow-step { grid-template-rows: 34px 1fr; column-gap: 0; row-gap: 20px; }
  .flow-line { grid-column: 2; grid-row: 1; align-self: center; justify-self: stretch; width: auto; height: 1px; margin: 0 10px; }
  .flow-body { grid-column: 1 / span 2; grid-row: 2; padding: 0 22px 0 0; gap: 18px; }
  .flow-step:last-child .flow-body { padding-right: 22px; }
  .flow-chips { margin-top: auto; }
}

/* Key value tables */
.kv-table { overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.kv-table[data-table="variables"] { --kw: 190px; }
.kv-table[data-table="rules-fields"] { --kw: 170px; }
.kv-head { display: flex; gap: 16px; padding: 11px 18px; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line-soft); }
.kv-head span { font: 600 10.5px/1.3 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted-2); flex: 1; }
.kv-head span:first-child { flex: 0 0 var(--kw); }
.kv-row { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 10px 18px; }
.kv-row + .kv-row { border-top: 1px solid var(--c-line-soft); }
.kv-key { flex: 0 0 var(--kw); font: 500 12px/1.6 var(--f-mono); color: var(--c-navy); word-break: break-all; }
.kv-val { flex: 1 1 220px; min-width: 0; font: 400 13.5px/1.55 var(--f-sans); color: var(--c-text-2); }
.kv-table-fill { flex: 1; display: flex; flex-direction: column; }
.kv-rows { flex: 1; display: flex; flex-direction: column; }
.kv-table-fill .kv-row { flex: 1; align-content: center; }

/* Code blocks */
.code-dark, .code-light { min-width: 0; display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden; }
.code-dark { background: var(--c-navy); box-shadow: 0 24px 60px -30px rgba(11, 26, 51, 0.6); }
.code-light { background: var(--c-block); border: 1px solid var(--c-line); }
.code-head { display: flex; align-items: center; gap: 12px; }
.code-dark .code-head { padding: 12px 12px 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.code-light .code-head { padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--c-line); }
.code-title { font: 500 12px/1 var(--f-mono); color: #8ea0bf; }
.code-light .code-title { color: var(--c-muted-2); }
.code-hint { font: 500 11px/1 var(--f-mono); color: var(--k-caption); }
.btn-copy { margin-left: auto; padding: 0 14px; border-radius: 8px; font: 600 12px/1 var(--f-sans); cursor: pointer; }
.btn-copy-dark { height: 32px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #e6ecf6; }
.btn-copy-dark:hover { background: rgba(255, 255, 255, 0.12); }
.btn-copy-light { height: 30px; border: 1px solid var(--c-line-mid); background: #fff; color: var(--c-navy); }
.btn-copy-light:hover { border-color: var(--c-navy); }
.code-pre { flex: 1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-dark .code-pre { padding: 20px 20px 24px; font: 400 11px/1.75 var(--f-mono); color: #d6e0f0; }
.code-light .code-pre { padding: 18px 20px 20px; font: 500 12.5px/1.75 var(--f-mono); }

/* 04 Tools */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.tool-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tool-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tool-card .chip-tool { font-size: 12.5px; }
.badge-signs, .badge-read {
  flex: none; display: inline-flex; padding: 4px 9px; border-radius: 999px;
  font: 600 10.5px/1 var(--f-sans); letter-spacing: 0.06em;
}
.badge-signs { border: 1px solid rgba(47, 115, 238, 0.4); color: var(--c-blue-ink); }
.badge-read { border: 1px solid var(--c-line-strong); color: var(--c-muted-2); }
.tool-line { margin: 4px 0 0; font: 500 14.5px/1.55 var(--f-sans); color: var(--c-navy); text-wrap: pretty; }
.tool-details { margin: 0; font: 400 13px/1.55 var(--f-sans); color: var(--c-muted-2); text-wrap: pretty; }
.tool-inputs { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-line-soft); display: flex; flex-direction: column; gap: 7px; }
.tool-inputs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inputs-label { font: 500 10.5px/1 var(--f-mono); color: var(--c-muted-3); margin-right: 2px; }
.in-chip {
  display: inline-flex; padding: 3px 7px; border-radius: 6px;
  background: var(--c-block); border: 1px solid var(--c-line);
  font: 500 11.5px/1.3 var(--f-mono); color: var(--c-graphite);
}
.muted-sm { font: 400 12.5px/1.5 var(--f-sans); color: var(--c-muted-3); }

/* 06 Session */
.split-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.split-col { background: #fff; display: flex; flex-direction: column; gap: 14px; }
.perm-col { padding: 22px 26px 18px; }
.perm-col-claims { padding-bottom: 22px; }
.perm-head { display: flex; align-items: center; gap: 12px; }
.perm-chip {
  font: 600 12px/1 var(--f-mono); color: var(--c-blue-ink);
  background: var(--c-block); border: 1px solid var(--c-line);
  padding: 6px 9px; border-radius: 7px;
}
.perm-title { margin: 0; font: 600 17px/1.25 var(--f-sans); color: var(--c-navy); }
.perm-list { margin: 0; padding: 0; list-style: none; }
.perm-list li {
  display: flex; gap: 12px; padding: 8px 0;
  border-top: 1px solid var(--c-line-soft);
  font: 400 14.5px/1.5 var(--f-sans); color: var(--c-text);
}
.perm-list li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 99px; background: var(--c-blue); }
.approve-note {
  margin-top: auto; padding: 14px 16px; border-radius: 10px;
  background: var(--c-block); border: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: 8px;
}
.approve-note p { margin: 0; font: 400 14px/1.6 var(--f-sans); color: var(--c-text-2); text-wrap: pretty; }
.callout { display: flex; gap: 16px; align-items: flex-start; padding: 18px 22px; border-radius: 14px; }
.callout-icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--c-block); border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
}
.callout-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 1px; }
.callout-strong { font: 600 15.5px/1.45 var(--f-sans); color: var(--c-navy); text-wrap: pretty; }
.callout-muted { font: 400 14px/1.55 var(--f-sans); color: var(--c-muted); text-wrap: pretty; }
.refused-col { padding: 22px 24px 24px; }
.refused-head { display: flex; flex-direction: column; gap: 6px; }
.refused-head p { margin: 0; font: 400 13.5px/1.55 var(--f-sans); color: var(--c-muted-2); }
.x-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.x-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 8px;
  background: var(--c-block); border: 1px solid var(--c-line);
  font: 500 13px/1.4 var(--f-sans); color: var(--c-text);
}
.x-chip::before {
  content: ""; flex: none; width: 9px; height: 9px;
  background: var(--c-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2L2 8' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2L2 8' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 07 Demo */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1px; background: var(--c-line);
  border: 1px solid var(--c-line); border-radius: var(--radius-card); overflow: hidden;
}
.fact { background: #fff; padding: 14px 18px; display: flex; flex-direction: column; gap: 7px; }
.fact-text { font: 400 13.5px/1.5 var(--f-sans); color: var(--c-text); }
.convo { overflow: hidden; display: flex; flex-direction: column; }
.tabs { display: flex; overflow-x: auto; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 13px 20px 11px; margin-bottom: -1px;
  border: none; border-bottom: 2px solid transparent; background: transparent;
  cursor: pointer; text-align: left;
}
.tab-id { font: 600 12.5px/1 var(--f-mono); color: var(--c-muted-3); }
.tab-at { font: 500 10.5px/1 var(--f-mono); color: var(--c-muted-3); white-space: nowrap; }
.tab:hover .tab-id { color: var(--c-navy); }
.tab[aria-selected="true"] { background: #fff; border-bottom-color: var(--c-blue); }
.tab[aria-selected="true"] .tab-id { color: var(--c-navy); }
.convo-owner {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 32px;
  padding: 20px clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--c-line-soft);
}
.owner-main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.owner-meta { display: flex; align-items: center; gap: 10px; }
.owner-at { font: 500 11px/1 var(--f-mono); color: var(--c-muted-3); }
.owner-text { margin: 0; font: 500 clamp(17px, 1.5vw, 19px)/1.5 var(--f-sans); letter-spacing: -0.005em; color: var(--c-navy); text-wrap: pretty; }
.convo-nav { flex: none; display: flex; align-items: center; gap: 10px; }
.btn-pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--c-line-strong); background: #fff;
  font: 600 12.5px/1 var(--f-sans); color: var(--c-navy); cursor: pointer;
}
.btn-pill:hover { border-color: var(--c-navy); }
.btn-pill:disabled { opacity: 0.35; cursor: default; border-color: var(--c-line-strong); }
.nav-count { font: 500 11px/1 var(--f-mono); color: var(--c-muted-3); white-space: nowrap; }
.stream {
  max-height: 460px; overflow-y: auto;
  padding: 22px clamp(20px, 3vw, 32px) 26px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
}
.item-call { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: 100%; }
.call-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.owner-ok {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--c-blue-tint); border: 1px solid rgba(47, 115, 238, 0.22);
  font: 600 11.5px/1 var(--f-sans); color: var(--c-blue-deep);
}
.owner-ok-check { width: 16px; height: 16px; border-radius: 99px; background: var(--c-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.call-note { font: 400 13px/1.4 var(--f-sans); color: var(--c-muted-2); }
.args {
  margin: 0; max-width: 100%; padding: 9px 13px; border-radius: 10px;
  background: var(--c-block); border: 1px solid var(--c-line);
  font: 400 12px/1.6 var(--f-mono); color: var(--c-graphite);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ask {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(47, 115, 238, 0.05); border: 1px solid rgba(47, 115, 238, 0.3);
}
.ask-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ask-title { font: 700 10.5px/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-blue-ink); }
.ask-sub { font: 500 11px/1 var(--f-mono); color: var(--c-muted-2); }
.ask-q { margin: 0; font: 400 14px/1.6 var(--f-sans); color: var(--c-text); }
.ask-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(47, 115, 238, 0.18); }
.ask-answer-label { font: 600 12.5px/1.3 var(--f-sans); color: var(--c-navy); }
.ans-chip { padding: 4px 9px; border-radius: 6px; background: #fff; border: 1px solid rgba(11, 26, 51, 0.12); font: 500 11.5px/1.2 var(--f-mono); color: var(--c-graphite); }
.ans-chip-primary { background: rgba(47, 115, 238, 0.12); border-color: transparent; color: var(--c-blue-deep); font-weight: 600; }
.agent-msg { display: flex; flex-direction: column; gap: 6px; }
.agent-text {
  margin: 0; padding: 12px 16px; border-radius: 12px;
  background: var(--c-block); border: 1px solid var(--c-line);
  color: var(--c-ink); font: 400 14.5px/1.6 var(--f-sans); text-wrap: pretty;
}
.orders-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 20px; align-items: stretch; margin-top: 8px;
}
.order-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.order-id { font: 600 14px/1 var(--f-mono); color: var(--c-navy); }
.order-claim { padding: 4px 8px; border-radius: 6px; background: var(--c-block); border: 1px solid var(--c-line); font: 500 11.5px/1 var(--f-mono); color: var(--c-text-2); }
.order-text { display: flex; flex-direction: column; gap: 4px; }
.order-item { font: 500 15px/1.5 var(--f-sans); color: var(--c-navy); }
.order-story { font: 400 14px/1.55 var(--f-sans); color: var(--c-muted-2); }
.order-verdict {
  margin-top: auto; padding: 14px 16px; border-radius: var(--radius-block);
  background: var(--c-block); border: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: 10px;
}
.order-verdict .verdict-amount { font-size: clamp(26px, 2.6vw, 30px); }
.tx-toggle {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--c-line-mid); background: #fff;
  font: 600 12.5px/1 var(--f-sans); color: var(--c-navy); cursor: pointer;
}
.tx-toggle:hover { border-color: var(--c-navy); }
.tx-count { font: 500 11px/1 var(--f-mono); color: var(--c-muted-3); }
.tx-list { list-style: none; margin: -4px 0 0; padding: 0; }
.tx-list[hidden] { display: none; }
.tx-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--c-line-soft); }
.tx-time { flex: none; width: 60px; font: 500 11.5px/1.5 var(--f-mono); color: var(--c-muted-3); }
.tx-what { flex: 1 1 200px; min-width: 0; font: 400 13.5px/1.5 var(--f-sans); color: var(--c-ink); }
.tx-row-offchain .tx-what { color: var(--c-muted-2); }
.tx-link, .total-link {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(11, 26, 51, 0.12);
  text-decoration: none; font: 500 11px/1.2 var(--f-mono); color: var(--c-blue-ink);
}
.tx-link:hover, .total-link:hover { border-color: var(--c-blue); background: rgba(47, 115, 238, 0.06); color: var(--c-blue-ink); }
.tx-net { color: var(--c-muted-2); }
.settle-note { margin: 0; font: 400 15px/1.6 var(--f-sans); color: var(--c-text-2); }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.total {
  padding: 13px 16px; border-radius: var(--radius-block);
  background: var(--c-block); border: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
}
.total-value { font: 600 17px/1.3 var(--f-sans); color: var(--c-navy); }
.total-label { font: 400 13.5px/1.4 var(--f-sans); color: var(--c-muted); }
.total-link { padding: 3px 7px; background: #fff; }
.run-note { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; max-width: 920px; }
.run-note .cap { flex: none; }
.run-note-text { flex: 1 1 420px; font: 400 14px/1.6 var(--f-sans); color: var(--c-muted); text-wrap: pretty; }

/* 08 Network, 09 Status */
.net-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px 64px; align-items: stretch; }
.net-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.net-card { overflow: hidden; flex: 1; display: flex; flex-direction: column; }
.net-row { flex: 1; display: flex; flex-wrap: wrap; align-content: center; gap: 4px 16px; padding: 12px 18px; }
.net-row + .net-row { border-top: 1px solid var(--c-line-soft); }
.net-label { flex: 0 0 84px; font: 600 10.5px/1.9 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted-2); }
.net-val { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.net-text { font: 500 14px/1.6 var(--f-sans); color: var(--c-navy); }
.net-mono { font: 400 12px/1.8 var(--f-mono); color: var(--c-graphite); word-break: break-all; }
.net-val a { font: 400 12px/1.8 var(--f-mono); color: var(--c-blue-ink); }
.status-card { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.status-lead { margin: 0; font: 500 15.5px/1.55 var(--f-sans); color: var(--c-navy); }
.nb { display: flex; flex-direction: column; border-top: 1px solid var(--c-line-soft); padding-top: 12px; }
.nb .cap { padding-bottom: 4px; }
.nb-item { display: flex; gap: 12px; padding: 9px 0; }
.nb-item + .nb-item { border-top: 1px solid var(--c-line-soft); }
.nb-ring { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 99px; border: 1.5px solid var(--c-muted-3); }
.nb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-title { font: 500 14px/1.5 var(--f-sans); color: var(--c-navy); }
.nb-detail { font: 400 13px/1.5 var(--f-sans); color: var(--c-muted-3); }
.status-note {
  margin: auto 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--c-block); border: 1px solid var(--c-line);
  font: 400 13px/1.55 var(--f-sans); color: var(--c-muted);
}

/* Footer */
.site-footer { border-top: 1px solid var(--c-line); background: var(--c-bg-soft); }
.footer-inner { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.brand-sm { gap: 12px; }
.brand-sm .brand-name { font-size: 15px; }
.brand-sm .brand-sep { height: 16px; }
.brand-sm .brand-by { font-size: 9.5px; }
.footer-text { font: 400 13.5px/1.4 var(--f-sans); color: var(--c-muted-2); }
.footer-links { margin-left: auto; display: flex; gap: 24px; }
.footer-links a { display: inline-flex; align-items: center; gap: 5px; font: 600 13.5px/1 var(--f-sans); text-decoration: none; }

/* Scroll reveal: active only when app.js adds the "motion" class to html */
.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 1.1s var(--ease-out) var(--rv-delay, 0ms), transform 1.3s var(--ease-out) var(--rv-delay, 0ms);
}
.motion [data-reveal="card"] { transform: translate3d(0, 26px, 0); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion [data-reveal].rv-instant { transition: none; }
[data-parallax] { will-change: transform; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cl-in { animation: none; }
  .cl-caret { animation: none; }
  [data-parallax] { will-change: auto; transform: none !important; }
}