/* ==========================================================================
   AI FINANCE HUB — Design System v3 "TERMINAL"

   Reference: professional market-data terminals (Bloomberg, Refinitiv).
   Positioning: "25 Years of Market Intelligence. Powered by AI."

   Why this direction (handoff §1, §2):
     "The system must be designed as a platform, not as a content-only website."
     "25 Years of Market Intelligence" → heritage + authority, not a startup.

   Rules:
     · Near-black canvas with real tonal range (black → panel → raised).
     · Bloomberg amber is the single accent; green/red are data, never decor.
     · Hairline borders + inner top-highlight build elevation. No neon glow.
     · Tabular numerals everywhere. Mono for every number, code and rule.
     · Density is a feature. Panels, boards and tables over marketing cards.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Canvas — true terminal blacks with a faint navy cast */
  --bg:        #06070a;
  --bg-1:      #090b11;
  --panel:     #0d0f15;
  --panel-2:   #12151d;
  --panel-3:   #171b25;

  /* Amber — the Bloomberg signature accent */
  --amber-700: #8a5200;
  --amber-600: #b86f08;
  --amber-500: #ffa028;
  --amber-400: #ffb85c;
  --amber-300: #ffd39a;
  --amber-dim: rgba(255, 160, 40, .12);

  /* Data semantics */
  --up:        #22d07f;
  --up-dim:    rgba(34, 208, 127, .13);
  --down:      #ff4d5e;
  --down-dim:  rgba(255, 77, 94, .13);
  --info:      #45b8ff;
  --warn:      #ffb020;

  /* Hairlines */
  --line-1: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --line-3: rgba(255, 255, 255, .22);
  --line-dark-1: rgba(0, 0, 0, .1);
  --line-dark-2: rgba(0, 0, 0, .18);

  /* Ink */
  --tx-1: #ffffff;
  --tx-2: rgba(255, 255, 255, .74);
  --tx-3: rgba(255, 255, 255, .5);
  --tx-4: rgba(255, 255, 255, .32);
  --tx-5: rgba(255, 255, 255, .18);

  /* Legacy aliases (kept so all existing markup still renders) */
  --navy-1000:#06070a; --navy-950:#090b11; --navy-900:#0d0f15; --navy-850:#12151d;
  --navy-800:#171b25; --navy-700:#1e2431; --navy-600:#2a3242; --navy-500:#39435a;
  --navy-400:#4d597a; --navy-300:#6b7a9c; --navy-200:#8b99b8;
  --gold-600:var(--amber-600); --gold-500:var(--amber-500);
  --gold-400:var(--amber-400); --gold-300:var(--amber-300); --gold-100:#2a1e0c;
  --pos-500:#17a566; --pos-400:var(--up); --neg-500:#d33b4a; --neg-400:var(--down);
  --info-400:var(--info);
  --on-dark-1:var(--tx-1); --on-dark-2:var(--tx-2); --on-dark-3:var(--tx-3);
  --on-dark-4:var(--tx-4); --on-dark-5:var(--tx-5);
  --paper-0:#ffffff; --paper-50:#f7f8fb; --paper-100:#eef1f7; --paper-200:#e0e5ef; --paper-300:#c8d0e0;
  --ink-900:#0b1220; --ink-700:#26324a; --ink-500:#4c5a75; --ink-400:#6b7891; --ink-300:#8d99ae;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --max: 1320px;
  --max-narrow: 880px;
  --nav-h: 56px;
  --tape-h: 34px;

  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius: 4px;

  --lift: inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-panel: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.35);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
  color: var(--tx-3); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5 { margin: 0; color: var(--tx-1); line-height: 1.16; letter-spacing: -.022em; font-weight: 640; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
code, kbd { font-family: var(--font-mono); }
hr { border: 0; height: 1px; background: var(--line-1); margin: 0; }
::selection { background: var(--amber-500); color: #000; }
:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; border-radius: 2px; }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: content-box; }

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: var(--max-narrow); }
.section { padding: 76px 0; background: var(--bg); }
.section--tight { padding: 50px 0; }
.section--raise { background: var(--bg-1); border-block: 1px solid var(--line-1); }
.section--sunken { background: #040507; border-block: 1px solid var(--line-1); }
.section--navy { background: var(--bg-1); border-block: 1px solid var(--line-1); }
.section--paper {
  background: var(--panel); color: var(--tx-2); border-block: 1px solid var(--line-2);
}
.rule { border-top: 1px solid var(--line-1); }

/* ---------- 4. Typography ---------- */
.d1 { font-size: clamp(2.3rem, 4.3vw, 3.3rem); font-weight: 660; letter-spacing: -.035em; line-height: 1.08; }
.d2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 650; letter-spacing: -.028em; line-height: 1.14; }
.d3 { font-size: clamp(1.25rem, 1.85vw, 1.55rem); font-weight: 640; letter-spacing: -.02em; }
.d4 { font-size: 1.05rem; font-weight: 630; letter-spacing: -.012em; }
.lede { font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.66; color: var(--tx-3); }

.eyebrow {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--amber-500);
}
.eyebrow--plain { color: var(--tx-4); }
.mono { font-family: var(--font-mono); font-size: .8rem; letter-spacing: -.01em; }
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; }
.idx { font-family: var(--font-mono); font-size: .7rem; font-weight: 600; color: var(--amber-500); }

.section-head { max-width: 800px; margin-bottom: 38px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head h2 { margin-bottom: 14px; }
.section-head--ruled { padding-top: 20px; border-top: 1px solid var(--line-2); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius);
  font-size: .86rem; font-weight: 600; letter-spacing: -.003em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn--primary, .btn--gold { background: var(--amber-500); color: #000; border-color: var(--amber-500); }
.btn--primary:hover, .btn--gold:hover { background: var(--amber-400); border-color: var(--amber-400); }
.btn--ghost, .btn--onnavy, .btn--outline-light {
  background: transparent; color: var(--tx-2); border-color: var(--line-3);
}
.btn--ghost:hover, .btn--onnavy:hover, .btn--outline-light:hover {
  border-color: var(--amber-500); color: var(--amber-400); background: var(--amber-dim);
}
.btn--paper { background: var(--tx-1); color: #000; border-color: var(--tx-1); }
.btn--paper:hover { background: var(--amber-300); border-color: var(--amber-300); }
.btn--sm { padding: 7px 13px; font-size: .79rem; }
.btn--lg { padding: 12px 24px; font-size: .92rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.tlink { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--amber-500); }
.tlink:hover { color: var(--amber-400); }
.tlink svg { width: 13px; height: 13px; transition: transform .16s var(--ease); }
.tlink:hover svg { transform: translateX(3px); }

/* ---------- 6. Ticker tape ---------- */
.tape {
  height: var(--tape-h); overflow: hidden; position: relative;
  background: #000; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center;
}
.tape::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 90px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #000);
}
.tape__track { display: flex; align-items: center; gap: 0; white-space: nowrap; animation: tape 62s linear infinite; }
.tape:hover .tape__track { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tape__i {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 0 16px;
  border-right: 1px solid var(--line-1); font-family: var(--font-mono); font-size: .715rem;
}
.tape__s { color: var(--tx-2); font-weight: 600; }
.tape__p { color: var(--tx-3); }
.tape__c { font-weight: 600; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--tx-4); }

/* ---------- 7. Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: rgba(6, 7, 10, .93); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.hdr.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.6); }
.hdr__in { display: flex; align-items: center; gap: 24px; height: 100%; }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__mark { width: 28px; height: 28px; flex-shrink: 0; }
.logo__txt { display: flex; flex-direction: column; line-height: 1.04; }
.logo__name { font-size: .88rem; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.logo__sub { font-family: var(--font-mono); font-size: .55rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--amber-500); }

.nav { display: flex; align-items: center; gap: 1px; }
.nav__link {
  padding: 6px 10px; border-radius: var(--radius-xs);
  font-size: .83rem; font-weight: 550; color: var(--tx-3);
  transition: color .14s var(--ease), background .14s var(--ease), box-shadow .14s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav__link.is-active { color: var(--amber-400); background: var(--amber-dim); box-shadow: inset 0 -2px 0 var(--amber-500); }

.hdr__actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }

.hdr__stat {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
  border-radius: var(--radius-xs); background: rgba(255,255,255,.04); border: 1px solid var(--line-1);
  font-family: var(--font-mono); font-size: .67rem; color: var(--tx-3);
}
.hdr__stat i { width: 5px; height: 5px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 2.5px var(--up-dim); animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 1240px) { .hdr__stat { display: none; } }

.lang { display: inline-flex; padding: 2px; border-radius: var(--radius-xs); background: rgba(255,255,255,.05); border: 1px solid var(--line-1); }
.lang__btn {
  padding: 3px 9px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .05em;
  color: var(--tx-4); border-radius: 2px; transition: all .14s var(--ease);
}
.lang__btn:hover { color: var(--tx-2); }
.lang__btn.is-on { background: var(--amber-500); color: #000; }

.burger { display: none; width: 36px; height: 36px; border: 1px solid var(--line-2); background: transparent; border-radius: var(--radius-xs); cursor: pointer; flex-shrink: 0; }
.burger span { display: block; width: 15px; height: 1.5px; background: #fff; margin: 3.5px auto; }

/* Narrow phones: the masthead descriptor pushes the header past the viewport. */
@media (max-width: 620px) {
  .wrap {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .logo__sub { display: none; }
  .hdr__actions { gap: 7px; }
  .lang { flex-shrink: 0; }
  .lang__btn { padding: 3px 7px; }
  .burger { width: 32px; height: 32px; }
}

.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: var(--bg); padding: 20px 24px; overflow-y: auto;
  transform: translateX(100%); transition: transform .26s var(--ease); border-top: 1px solid var(--line-1);
}
.drawer.is-open { transform: translateX(0); }
.drawer__link { display: block; padding: 12px 0; font-size: .98rem; color: var(--tx-2); border-bottom: 1px solid var(--line-1); }
.drawer__link:hover { color: var(--amber-400); }
.drawer__group { padding: 18px 0 6px; font-family: var(--font-mono); font-size: .63rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-500); }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--bg);
  padding: 68px 0 60px; border-bottom: 1px solid var(--line-2);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line-1) 1px, transparent 1px), linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 70% 30%, #000 5%, transparent 72%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 82% 4%, rgba(255,160,40,.10) 0%, transparent 62%);
}
.hero__in { position: relative; z-index: 2; }
.hero h1 { max-width: 21ch; }
.hero .lede { max-width: 56ch; margin-top: 18px; }
.hero__grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 52px; align-items: start; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 4px 11px 4px 9px; border-radius: var(--radius-xs);
  background: var(--amber-dim); border: 1px solid rgba(255,160,40,.3);
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .05em;
  color: var(--amber-300);
}
.hero__badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber-500); box-shadow: 0 0 0 3px rgba(255,160,40,.18); }
.hero .btn-row { margin-top: 28px; }

.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin-top: 30px; border-top: 1px solid var(--line-1); }
.spec { padding: 13px 0; border-bottom: 1px solid var(--line-1); }
.spec__k { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-500); }
.spec__v { display: block; margin-top: 4px; font-size: .855rem; color: var(--tx-2); line-height: 1.55; }

/* ---------- 9. Panels & grids ---------- */
.grid { display: grid; gap: 1px; background: var(--line-1); }
.grid--spaced { gap: 12px; background: transparent; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: var(--panel); border: 1px solid var(--line-1); border-radius: var(--radius);
  padding: 22px; position: relative; box-shadow: var(--lift);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.card--hover:hover { border-color: var(--line-3); background: var(--panel-2); }
.card__ico {
  width: 32px; height: 32px; border-radius: var(--radius-xs); margin-bottom: 14px;
  display: grid; place-items: center;
  background: rgba(255,160,40,.09); border: 1px solid rgba(255,160,40,.22); color: var(--amber-500);
}
.card__ico svg { width: 16px; height: 16px; }
.card h3 { font-size: .97rem; margin-bottom: 7px; }
.card p { font-size: .85rem; color: var(--tx-3); line-height: 1.6; }
.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .82rem; font-weight: 600; color: var(--amber-500); }
.card__link:hover { color: var(--amber-400); gap: 9px; }
.card__link svg { width: 13px; height: 13px; transition: transform .16s var(--ease); }
.card--navy { background: var(--panel-2); border-color: var(--line-2); }
.card--navy.card--hover:hover { border-color: rgba(255,160,40,.4); }
.card--ref { padding-left: 54px; }
.card__ref { position: absolute; left: 20px; top: 22px; font-family: var(--font-mono); font-size: .69rem; font-weight: 600; color: var(--amber-500); }
.card--paper { background: var(--panel-2); border-color: var(--line-2); }

.num-card { position: relative; padding-left: 52px; }
.num-card__n {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: var(--radius-xs);
  background: var(--amber-dim); border: 1px solid rgba(255,160,40,.24); color: var(--amber-500);
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
}

/* ---------- 10. Value chain ---------- */
.chain { display: flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--lift); }
.chain__node { flex: 1 1 0; min-width: 128px; position: relative; padding: 18px 16px; background: var(--panel); border-right: 1px solid var(--line-1); }
.chain__node:last-child { border-right: 0; }
.chain__node::after {
  content: ""; position: absolute; right: -4px; top: 50%; z-index: 2; width: 7px; height: 7px;
  transform: translateY(-50%) rotate(45deg); background: var(--panel);
  border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
}
.chain__node:last-child::after { display: none; }
.chain__lbl { display: block; font-family: var(--font-mono); font-size: .63rem; color: var(--amber-500); margin-bottom: 5px; letter-spacing: .07em; }
.chain__ttl { display: block; font-size: .88rem; font-weight: 620; color: #fff; }
.chain__sub { display: block; margin-top: 4px; font-size: .72rem; color: var(--tx-4); line-height: 1.45; }

/* ---------- 11. Instrument panels (hero + market board) ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-panel);
}
.panel__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.panel__ttl {
  font-family: var(--font-mono); font-size: .71rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--tx-2);
}
.panel__ttl b { color: var(--amber-500); font-weight: 600; }
.panel__meta { font-family: var(--font-mono); font-size: .67rem; color: var(--tx-4); }
.panel__bd { padding: 14px; }
.panel__bd--flush { padding: 0; }

/* quote header inside a panel */
.quote { display: flex; align-items: flex-end; gap: 18px; padding: 14px; border-bottom: 1px solid var(--line-1); }
.quote__sym { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
.quote__sub { font-family: var(--font-mono); font-size: .66rem; color: var(--tx-4); margin-top: 3px; }
.quote__px { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: #fff; letter-spacing: -.02em; line-height: 1; }
.quote__chg { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; margin-left: auto; text-align: right; }
.quote__chg span { display: block; font-size: .68rem; color: var(--tx-4); font-weight: 400; margin-top: 2px; }

/* chart */
.chart { position: relative; height: 168px; padding: 10px 6px 0; }
.chart svg { width: 100%; height: 100%; }
.chart__g { stroke: var(--line-1); stroke-width: 1; }

/* market board rows */
.board__row {
  display: grid; grid-template-columns: 1.4fr .8fr .8fr 84px; gap: 12px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--line-1); font-family: var(--font-mono); font-size: .78rem;
  transition: background .12s var(--ease);
}
.board__row:last-child { border-bottom: 0; }
.board__row:hover { background: rgba(255,255,255,.03); }
.board__row--hd {
  background: var(--panel-2); border-bottom: 1px solid var(--line-2);
  font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-4); font-weight: 600;
}
.board__row--hd:hover { background: var(--panel-2); }
.board__sym { color: #fff; font-weight: 600; }
.board__name { display: block; font-size: .66rem; color: var(--tx-4); font-weight: 400; margin-top: 1px; letter-spacing: 0; text-transform: none; }
.board__px { text-align: right; color: var(--tx-2); }
.board__chg { text-align: right; font-weight: 600; }
.spark { width: 84px; height: 22px; overflow: visible; }

/* session status strip */
.sessions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-1); border-top: 1px solid var(--line-2); }
.sess { background: var(--panel); padding: 11px 14px; }
.sess__k { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-4); }
.sess__v { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-family: var(--font-mono); font-size: .76rem; color: var(--tx-2); }
.sess__v i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sess__v i.on { background: var(--up); box-shadow: 0 0 0 2.5px var(--up-dim); }
.sess__v i.off { background: var(--tx-5); }

/* risk meters */
.gauge { display: grid; gap: 11px; }
.gauge__r { display: grid; gap: 5px; }
.gauge__top { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-mono); font-size: .7rem; }
.gauge__k { color: var(--tx-3); letter-spacing: .04em; }
.gauge__v { color: #fff; font-weight: 600; }
.gauge__bar { height: 5px; background: rgba(255,255,255,.07); border-radius: 1px; overflow: hidden; }
.gauge__bar i { display: block; height: 100%; }

/* ---------- 12. Asset tiles ---------- */
.asset {
  display: block; padding: 18px; background: var(--panel); border: 1px solid var(--line-1);
  border-radius: var(--radius); transition: border-color .16s var(--ease), background .16s var(--ease);
}
.asset:hover { border-color: var(--line-3); background: var(--panel-2); }
.asset__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.asset__sym { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--amber-500); letter-spacing: .02em; }
.asset__tag { font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-xs); background: rgba(255,255,255,.05); color: var(--tx-4); border: 1px solid var(--line-1); }
.asset h3 { font-size: .93rem; margin-bottom: 6px; }
.asset p { font-size: .82rem; color: var(--tx-3); line-height: 1.58; }
.asset__meta { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-1); display: flex; gap: 16px; }
.asset__meta div { font-family: var(--font-mono); font-size: .67rem; color: var(--tx-4); letter-spacing: .04em; }
.asset__meta b { display: block; font-family: var(--font-mono); font-size: .77rem; color: var(--tx-2); font-weight: 600; margin-top: 2px; }
.section--paper .asset { background: var(--panel-2); border-color: var(--line-2); }

/* ---------- 13. Tables ---------- */
.tbl-wrap { border: 1px solid var(--line-2); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; background: var(--panel); box-shadow: var(--lift); }
.tbl { font-size: .83rem; }
.tbl thead th {
  background: var(--panel-2); padding: 10px 15px; text-align: left;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-4); border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.tbl tbody td { padding: 12px 15px; border-bottom: 1px solid var(--line-1); color: var(--tx-3); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(255,255,255,.022); }
.tbl td:first-child { color: var(--tx-2); }
.tbl code { font-family: var(--font-mono); font-size: .76rem; background: var(--amber-dim); padding: 1px 6px; border-radius: var(--radius-xs); color: var(--amber-400); border: 1px solid rgba(255,160,40,.22); }
.tbl .num { font-family: var(--font-mono); text-align: right; }

/* ---------- 14. Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: .66rem;
  font-weight: 600; letter-spacing: .04em; border: 1px solid; white-space: nowrap;
}
.badge--navy { background: rgba(255,255,255,.05); border-color: var(--line-2); color: var(--tx-3); }
.badge--gold { background: var(--amber-dim); border-color: rgba(255,160,40,.3); color: var(--amber-400); }
.badge--pos { background: var(--up-dim); border-color: rgba(34,208,127,.3); color: var(--up); }
.badge--neg { background: var(--down-dim); border-color: rgba(255,77,94,.3); color: var(--down); }
.badge--warn { background: rgba(255,176,32,.12); border-color: rgba(255,176,32,.32); color: var(--warn); }
.badge--onnavy { background: rgba(255,255,255,.05); border-color: var(--line-2); color: var(--tx-3); }
.badge--locked { background: var(--down-dim); border-color: rgba(255,77,94,.28); color: var(--down); }

/* ---------- 15. Console / gate trace ---------- */
.console { background: #000; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-panel); }
.console--flat { box-shadow: none; }
.console__bar { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: var(--panel-2); border-bottom: 1px solid var(--line-2); }
.console__dots { display: flex; gap: 5px; }
.console__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--tx-5); }
.console__title { font-family: var(--font-mono); font-size: .68rem; color: var(--tx-4); margin-left: 4px; }
.console__tag { margin-left: auto; font-family: var(--font-mono); font-size: .63rem; padding: 2px 7px; border-radius: var(--radius-xs); background: var(--down-dim); border: 1px solid rgba(255,77,94,.3); color: var(--down); }
.console__body { padding: 14px; font-family: var(--font-mono); font-size: .72rem; line-height: 1.8; }
.console__row { display: flex; align-items: baseline; gap: 10px; padding: 1px 0; color: var(--tx-3); }
.console__row--dim { color: var(--tx-4); }
.console__dim { color: var(--tx-4); }
.console__k { color: var(--info); min-width: 112px; }
.console__v { color: var(--tx-2); }
.console__ok { color: var(--up); }
.console__warn { color: var(--warn); }
.console__err { color: var(--down); }
.console__rule { height: 1px; background: var(--line-1); margin: 9px 0; }
.console__foot { padding: 9px 13px; border-top: 1px solid var(--line-1); background: rgba(255,255,255,.018); font-family: var(--font-mono); font-size: .66rem; color: var(--tx-4); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.pipe { display: flex; flex-direction: column; gap: 7px; }
.pipe__row { display: flex; align-items: center; gap: 11px; padding: 10px 13px; background: var(--panel); border: 1px solid var(--line-1); border-radius: var(--radius-xs); font-size: .8rem; }
.pipe__row--gate { background: var(--amber-dim); border-color: rgba(255,160,40,.3); }
.pipe__row--block { background: var(--down-dim); border-color: rgba(255,77,94,.28); }
.pipe__step { font-family: var(--font-mono); font-size: .67rem; color: var(--amber-500); min-width: 20px; }
.pipe__ttl { color: var(--tx-2); font-weight: 560; }
.pipe__note { margin-left: auto; font-family: var(--font-mono); font-size: .66rem; color: var(--tx-4); }

/* ---------- 16. Steps ---------- */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 62px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-1); }
.step:last-child { border-bottom: 0; }
.step__n { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--amber-600); }
.step h3 { font-size: 1rem; margin-bottom: 6px; }
.step p { font-size: .86rem; color: var(--tx-3); }

/* ---------- 17. Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split--wide { grid-template-columns: 1.08fr .92fr; }
.split--top { align-items: start; }
.check-list { display: grid; gap: 10px; margin-top: 20px; }
.check-list li { display: flex; gap: 10px; font-size: .87rem; color: var(--tx-3); }
.check-list svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 4px; color: var(--up); }
.check-list--gold svg { color: var(--amber-500); }
.check-list--x svg { color: var(--down); }

/* ---------- 18. Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-1); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--lift); }
.plan { background: var(--panel); padding: 22px 20px; display: flex; flex-direction: column; position: relative; }
.plan--hi { background: var(--panel-2); }
.plan--hi::before { content: attr(data-badge); position: absolute; top: 0; right: 0; background: var(--amber-500); color: #000; padding: 3px 9px; font-family: var(--font-mono); font-size: .59rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.plan__name { font-size: .96rem; font-weight: 640; color: #fff; }
.plan__desc { font-size: .78rem; color: var(--tx-4); margin-top: 4px; min-height: 2.7em; line-height: 1.5; }
.plan__price { margin: 16px 0 3px; display: flex; align-items: baseline; gap: 5px; }
.plan__amt { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; color: #fff; }
.plan__per { font-family: var(--font-mono); font-size: .71rem; color: var(--tx-4); }
.plan__note { font-family: var(--font-mono); font-size: .67rem; color: var(--tx-4); margin-bottom: 16px; }
.plan ul { display: grid; gap: 8px; margin-bottom: 20px; flex: 1; }
.plan li { display: flex; gap: 8px; font-size: .81rem; color: var(--tx-3); line-height: 1.5; }
.plan li svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 4px; color: var(--amber-500); }
.plan li.is-off { color: var(--tx-5); }
.plan li.is-off svg { color: var(--tx-5); }

/* ---------- 19. Marketplace ---------- */
.mk-toolbar { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.chip { padding: 6px 12px; border-radius: var(--radius-xs); border: 1px solid var(--line-2); background: transparent; font-family: var(--font-mono); font-size: .73rem; font-weight: 600; color: var(--tx-3); cursor: pointer; transition: all .14s var(--ease); }
.chip:hover { border-color: var(--line-3); color: #fff; }
.chip.is-on { background: var(--amber-500); border-color: var(--amber-500); color: #000; }

.prod { background: var(--panel); border: 1px solid var(--line-1); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .16s var(--ease), background .16s var(--ease); box-shadow: var(--lift); }
.prod:hover { border-color: var(--line-3); background: var(--panel-2); }
.prod__head { padding: 16px 18px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.prod__plat { display: flex; gap: 5px; flex-wrap: wrap; }
.plat { padding: 2px 7px; border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: .64rem; font-weight: 600; border: 1px solid; letter-spacing: .04em; }
.plat--tv { background: rgba(69,184,255,.12); border-color: rgba(69,184,255,.3); color: var(--info); }
.plat--mt5 { background: var(--up-dim); border-color: rgba(34,208,127,.28); color: var(--up); }
.plat--ct { background: var(--amber-dim); border-color: rgba(255,160,40,.3); color: var(--amber-400); }
.plat--api { background: rgba(255,255,255,.05); border-color: var(--line-2); color: var(--tx-3); }
.prod__body { padding: 12px 18px 16px; flex: 1; }
.prod__name { font-size: .97rem; font-weight: 630; color: #fff; margin-bottom: 6px; line-height: 1.35; }
.prod__desc { font-size: .83rem; color: var(--tx-3); line-height: 1.55; min-height: 3.8em; }
.prod__stats { display: flex; gap: 16px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-1); }
.prod__stat { font-family: var(--font-mono); font-size: .65rem; color: var(--tx-4); letter-spacing: .05em; }
.prod__stat b { display: block; font-family: var(--font-mono); font-size: .77rem; color: var(--tx-2); font-weight: 600; margin-top: 2px; }
.prod__foot { padding: 12px 18px; background: var(--panel-2); border-top: 1px solid var(--line-1); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prod__amt { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: #fff; }
.prod__lic { font-family: var(--font-mono); font-size: .64rem; color: var(--tx-4); letter-spacing: .05em; }
.prod__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-1); }
.tabs-wrap { margin-top: 4px; }

/* ---------- 20. Matrix ---------- */
.matrix td:first-child { font-weight: 600; color: var(--tx-2); }
.matrix .yes { color: var(--up); font-weight: 600; font-family: var(--font-mono); }
.matrix .no { color: var(--tx-5); font-weight: 600; font-family: var(--font-mono); }
.matrix th:not(:first-child), .matrix td:not(:first-child) { text-align: center; }

/* ---------- 21. Accordion ---------- */
.acc { border-top: 1px solid var(--line-1); }
.acc__item { border-bottom: 1px solid var(--line-1); }
.acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 0; background: transparent; border: 0; cursor: pointer; text-align: left; font-size: .94rem; font-weight: 600; color: #fff; }
.acc__q:hover { color: var(--amber-400); }
.acc__q svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--amber-500); transition: transform .2s var(--ease); }
.acc__item.is-open .acc__q svg { transform: rotate(45deg); }
.acc__a { max-height: 0; overflow: hidden; transition: max-height .28s var(--ease); }
.acc__a > div { padding: 0 0 18px; font-size: .87rem; color: var(--tx-3); line-height: 1.7; max-width: 82ch; }

/* ---------- 22. Trust strip ---------- */
.trust { background: var(--bg-1); border-top: 1px solid var(--line-1); }
.trust__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { padding: 18px 22px; border-right: 1px solid var(--line-1); display: flex; align-items: flex-start; gap: 10px; font-size: .78rem; color: var(--tx-3); line-height: 1.5; }
.trust__item:last-child { border-right: 0; }
.trust__item svg { width: 15px; height: 15px; color: var(--amber-500); flex-shrink: 0; margin-top: 2px; }
.trust__item b { display: block; color: #fff; font-weight: 600; font-size: .81rem; margin-bottom: 2px; }

/* ---------- 23. CTA ---------- */
.cta { position: relative; overflow: hidden; background: var(--bg-1); border-top: 1px solid var(--line-2); padding: 62px 0; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255,160,40,.09) 0%, transparent 68%); pointer-events: none; }
.cta__in { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; text-align: center; }
.cta h2 { margin-bottom: 14px; }
.cta .btn-row { justify-content: center; margin-top: 26px; }

/* ---------- 24. Footer ---------- */
.ftr { background: #000; color: var(--tx-3); padding: 52px 0 0; border-top: 1px solid var(--line-2); }
.ftr__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; padding-bottom: 40px; }
.ftr__about p { font-size: .82rem; line-height: 1.68; margin-top: 14px; max-width: 36ch; color: var(--tx-4); }
.ftr__col h4 { font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2); margin-bottom: 13px; }
.ftr__col li { margin-bottom: 9px; }
.ftr__col a { font-size: .82rem; color: var(--tx-4); transition: color .14s var(--ease); }
.ftr__col a:hover { color: var(--amber-400); }
.ftr__risk { padding: 18px 0; border-top: 1px solid var(--line-1); font-size: .73rem; line-height: 1.72; color: var(--tx-4); max-width: 106ch; }
.ftr__risk b { color: var(--tx-3); }
.ftr__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--line-1); font-family: var(--font-mono); font-size: .69rem; color: var(--tx-4); }
.ftr__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.ftr__legal a:hover { color: var(--amber-400); }

/* ---------- 25. Page header ---------- */
.phead { background: var(--bg); padding: 52px 0 40px; border-bottom: 1px solid var(--line-2); position: relative; overflow: hidden; }
.phead::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-1) 1px, transparent 1px), linear-gradient(90deg, var(--line-1) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 110% at 22% 35%, #000 3%, transparent 72%); }
.phead__in { position: relative; z-index: 2; max-width: 840px; }
.phead h1 { margin: 11px 0 14px; }
.crumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .68rem; color: var(--tx-4); letter-spacing: .05em; }
.crumb a:hover { color: var(--amber-400); }
.crumb span { color: var(--tx-5); }
.pmeta { display: flex; flex-wrap: wrap; margin-top: 24px; border-top: 1px solid var(--line-1); }
.pmeta div { padding: 11px 20px 0 0; margin-right: 20px; border-right: 1px solid var(--line-1); padding-right: 20px; }
.pmeta div:last-child { border-right: 0; }
.pmeta dt { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-500); }
.pmeta dd { margin: 3px 0 0; font-size: .82rem; color: var(--tx-2); }

/* two-column terminal page header (title + watch board) */
.phead__in.phead__grid { max-width: var(--max); display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 52px; align-items: start; }
.phead__main { min-width: 0; }
.phead__side { margin-top: 6px; }
.phead__side .board__row { grid-template-columns: 1fr .75fr .7fr 0; }
.phead__side .board__row--hd span:last-child, .phead__side .board__row > span:last-child { display: none; }

/* ---------- 26. Utilities ---------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; }
.mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; } .mb-5 { margin-bottom: 48px; }
.text-c { text-align: center; }
.muted { color: var(--tx-4); }
.small { font-size: .85rem; }
.xsmall { font-size: .77rem; }
.nowrap { white-space: nowrap; }
.divider { height: 1px; background: var(--line-1); border: 0; margin: 0; }
.mono-sm { font-family: var(--font-mono); font-size: .74rem; }

.note { padding: 14px 18px; border-radius: var(--radius-xs); font-size: .84rem; line-height: 1.65; background: var(--amber-dim); border: 1px solid rgba(255,160,40,.26); color: var(--amber-300); border-left: 3px solid var(--amber-500); }
.note--navy { background: rgba(69,184,255,.08); border-color: rgba(69,184,255,.26); color: #8fcbf5; border-left-color: var(--info); }
.note--danger { background: var(--down-dim); border-color: rgba(255,77,94,.3); color: #ff9aa4; border-left-color: var(--down); }
.note strong { color: inherit; font-weight: 650; }

.kv { display: grid; border-top: 1px solid var(--line-1); }
.kv__row { display: grid; grid-template-columns: 226px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line-1); font-size: .85rem; }
.kv__row:last-child { border-bottom: 0; }
.kv__k { font-family: var(--font-mono); font-weight: 600; color: var(--amber-400); font-size: .76rem; }
.kv__v { color: var(--tx-3); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-1); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--lift); }
.stat { background: var(--panel); padding: 20px 20px; }
.stat__v { font-family: var(--font-mono); font-size: 1.55rem; font-weight: 600; letter-spacing: -.03em; color: var(--amber-500); }
.stat__l { font-size: .76rem; color: var(--tx-4); margin-top: 5px; line-height: 1.5; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); margin-bottom: 26px; overflow-x: auto; }
.tab { padding: 10px 15px; border: 0; background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: .77rem; font-weight: 600; color: var(--tx-4); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .14s var(--ease), border-color .14s var(--ease); }
.tab:hover { color: var(--tx-2); }
.tab.is-on { color: #fff; border-bottom-color: var(--amber-500); }
.tabpane { display: none; }
.tabpane.is-on { display: block; }

.rv { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .tape__track { animation: none; }
  .hdr__stat i { animation: none; }
}

/* ---------- 27. Edge-to-edge (viewport-fit=cover) ---------- */
/* Only applied where env() exists, so older browsers keep the plain layout. */
@supports (padding: env(safe-area-inset-top)) {
  .hdr {
    height: calc(var(--nav-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .drawer { top: calc(var(--nav-h) + env(safe-area-inset-top)); }
  html { scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 16px); }
  .wrap {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .ftr { padding-bottom: env(safe-area-inset-bottom); }
  .term__bar { padding-top: env(safe-area-inset-top); height: auto; min-height: 48px; }
  .term { padding-bottom: env(safe-area-inset-bottom); }
  .tape, .drawer { padding-left: env(safe-area-inset-left); }
}
@supports (height: 100dvh) {
  .term { min-height: 100dvh; }
}

/* ---------- 28. Responsive ---------- */
@media (max-width: 1180px) {
  .trust__in { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(2) { border-right: 0; }
  .trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--line-1); }
}
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: block; }
  .hdr__actions .btn { display: none; }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .split, .split--wide { grid-template-columns: 1fr; gap: 32px; }
  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .ftr__about { grid-column: 1 / -1; }
  .phead__in.phead__grid { grid-template-columns: 1fr; gap: 28px; max-width: 860px; }
  .phead__side { max-width: 420px; }
}
@media (max-width: 760px) {
  .section { padding: 52px 0; }
  .hero { padding: 46px 0 40px; }
  .phead { padding: 36px 0 30px; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .plans, .stats { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .specs { grid-template-columns: 1fr; }
  .trust__in { grid-template-columns: 1fr; }
  .trust__item { border-right: 0; border-bottom: 1px solid var(--line-1); }
  .trust__item:last-child { border-bottom: 0; }
  .kv__row { grid-template-columns: 1fr; gap: 4px; }
  .step { grid-template-columns: 1fr; gap: 7px; }
  .chain__node { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--line-1); }
  .chain__node:last-child { border-bottom: 0; }
  .chain__node::after { display: none; }
  .ftr__grid { grid-template-columns: 1fr; }
  .tbl-wrap { overflow-x: auto; }
  .tbl { min-width: 600px; }
  .board__row { grid-template-columns: 1.3fr .9fr .9fr; }
  .board__row .spark { display: none; }
  .wrap { padding-inline: 18px; }
}

/* ---------- 29. Legal body ---------- */
.legal-body { display: grid; gap: 15px; }
.legal-body h3 { font-size: 1rem; margin-top: 8px; }
.legal-body p { font-size: .89rem; line-height: 1.78; color: var(--tx-3); }
.legal-body p:first-child { color: var(--tx-2); }
.legal-body ul { display: grid; gap: 8px; margin: 4px 0; }
.legal-body li { display: flex; gap: 10px; font-size: .89rem; line-height: 1.72; color: var(--tx-3); }
.legal-body li::before { content: "—"; color: var(--amber-500); flex-shrink: 0; }
.legal-body strong { color: var(--tx-2); font-weight: 650; }

/* ---------- 30. Terminal preview shell ---------- */
.term { background: #000; min-height: 100vh; min-height: 100dvh; color: var(--tx-3); }
.term__bar { height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--bg-1); border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 40; }
.term__logo { display: flex; align-items: center; gap: 8px; }
.term__logo .logo__name { font-size: .82rem; color: #fff; }
.term__nav { display: flex; gap: 1px; margin-left: 10px; }
.term__nav a { padding: 5px 10px; border-radius: var(--radius-xs); font-size: .78rem; color: var(--tx-4); }
.term__nav a:hover { color: #fff; background: rgba(255,255,255,.05); }
.term__nav a.is-on { color: var(--amber-400); background: var(--amber-dim); }
.term__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.term__user { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .72rem; color: var(--tx-3); }
.term__avatar { width: 24px; height: 24px; border-radius: var(--radius-xs); background: linear-gradient(135deg, var(--amber-500), #6b4a10); display: grid; place-items: center; font-size: .63rem; font-weight: 700; color: #000; }

.term__body { display: grid; grid-template-columns: 210px 1fr; min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px); }
.term__side { background: var(--bg-1); border-right: 1px solid var(--line-1); padding: 16px 11px; }
.term__grp { font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--tx-5); padding: 13px 9px 6px; }
.term__grp:first-child { padding-top: 2px; }
.term__item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius-xs); font-size: .81rem; color: var(--tx-3); margin-bottom: 1px; }
.term__item:hover { background: rgba(255,255,255,.04); color: #fff; }
.term__item.is-on { background: var(--amber-dim); color: var(--amber-400); }
.term__item svg { width: 14px; height: 14px; flex-shrink: 0; }

.term__main { padding: 20px 24px 46px; overflow-x: hidden; }
.term__h1 { font-size: 1.15rem; font-weight: 630; color: #fff; letter-spacing: -.02em; }
.term__sub { font-size: .78rem; color: var(--tx-4); margin-top: 4px; }

.tgrid { display: grid; gap: 11px; }
.tgrid-4 { grid-template-columns: repeat(4, 1fr); }
.tgrid-3 { grid-template-columns: repeat(3, 1fr); }
.tgrid-2 { grid-template-columns: 1.6fr 1fr; }

.tcard { background: var(--panel); border: 1px solid var(--line-1); border-radius: var(--radius); padding: 14px; box-shadow: var(--lift); }
.tcard__lbl { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-4); }
.tcard__val { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: #fff; margin-top: 6px; letter-spacing: -.02em; }
.tcard__meta { font-family: var(--font-mono); font-size: .68rem; margin-top: 4px; }

.tpanel { background: var(--panel); border: 1px solid var(--line-1); border-radius: var(--radius); overflow: hidden; }
.tpanel__hd { padding: 10px 14px; border-bottom: 1px solid var(--line-1); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel-2); }
.tpanel__ttl { font-size: .81rem; font-weight: 620; color: #fff; }
.tpanel__bd { padding: 12px 14px; overflow-x: auto; }

.trow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-1); font-size: .79rem; }
.trow:last-child { border-bottom: 0; }
.tsym { font-family: var(--font-mono); font-weight: 600; color: #fff; font-size: .77rem; }
.tsub { font-family: var(--font-mono); font-size: .65rem; color: var(--tx-4); margin-top: 1px; }
.tpx { font-family: var(--font-mono); color: var(--tx-2); text-align: right; }
.tchg { font-family: var(--font-mono); font-size: .74rem; text-align: right; min-width: 60px; }

.tchart { position: relative; height: 230px; padding: 10px 0 0; }
.tchart svg { width: 100%; height: 100%; }
.tchart__grid { stroke: var(--line-1); stroke-width: 1; }

.tpos { width: 100%; font-size: .77rem; }
.tpos th { text-align: left; padding: 7px 10px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-4); font-weight: 600; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.tpos td { padding: 9px 10px; border-bottom: 1px solid var(--line-1); color: var(--tx-3); white-space: nowrap; }
.tpos td:last-child, .tpos th:last-child { text-align: right; }
.tpos tbody tr:hover { background: rgba(255,255,255,.022); }

.tmeter { height: 5px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 7px; }
.tmeter i { display: block; height: 100%; }

.tchat { display: flex; flex-direction: column; gap: 12px; }
.tmsg { display: flex; gap: 10px; font-size: .82rem; line-height: 1.6; }
.tmsg__av { width: 23px; height: 23px; border-radius: var(--radius-xs); flex-shrink: 0; display: grid; place-items: center; font-size: .59rem; font-weight: 700; }
.tmsg--ai .tmsg__av { background: var(--amber-dim); color: var(--amber-400); border: 1px solid rgba(255,160,40,.28); }
.tmsg--me .tmsg__av { background: rgba(255,255,255,.06); color: var(--tx-3); }
.tmsg__bd { flex: 1; }
.tmsg__nm { font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-4); margin-bottom: 3px; }
.tmsg__txt { color: var(--tx-2); }
.tmsg__prov { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-1); display: flex; gap: 13px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .63rem; color: var(--tx-4); }

.tinput { display: flex; gap: 8px; margin-top: 14px; }
.tinput input { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: var(--radius-xs); padding: 9px 12px; color: #fff; font-size: .82rem; }
.tinput input::placeholder { color: var(--tx-5); }
.tinput input:focus { outline: none; border-color: rgba(255,160,40,.55); }

@media (max-width: 1080px) {
  .term__body { grid-template-columns: 1fr; }
  .term__side { display: none; }
  .tgrid-4 { grid-template-columns: repeat(2, 1fr); }
  .tgrid-2, .tgrid-3 { grid-template-columns: 1fr; }
  .term__nav { display: none; }
}
@media (max-width: 760px) {
  .term__user .nowrap { display: none; }
  .term__right { gap: 8px; }
}
@media (max-width: 620px) {
  .tgrid-4 { grid-template-columns: 1fr; }
  .term__main { padding: 14px 12px 40px; }
  .term__bar { gap: 10px; padding: 0 12px; }
}

/* ---------- 31. Print ---------- */
@media print {
  .hdr, .drawer, .cta, .burger, .tape { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .section--raise, .section--sunken, .phead, .ftr { background: #fff !important; border-color: #ccc !important; }
  .card, .prod, .tbl-wrap, .console, .plan, .asset, .panel { background: #fff !important; border-color: #ccc !important; }
  h1, h2, h3, h4 { color: #000 !important; }
  p, li, td { color: #222 !important; }
}
