/* =====================================================================
   RERPS. Oxblood, bone, chrome.
   =====================================================================
   The palette comes off the brand plate and it is disciplined: a deep
   oxblood that carries the identity, a warm bone that carries the reading,
   and a real chrome ramp for anything that should feel machined. Jade is
   the ONLY hue that is not in that set, and it exists for exactly one
   reason: a trading screen has to say up and down, and saying it in two
   shades of the brand colour would be pretty and unreadable.

   So: blood means down and means the brand. Jade means up. Chrome means
   structure. Nothing else gets a colour.
   ===================================================================== */

:root {
  /* ---- oxblood, the identity ---- */
  --blood:      #a31324;
  --blood-hi:   #c8182d;
  --blood-lo:   #6d0b18;
  --blood-deep: #3d060e;
  --blood-ink:  #240409;

  /* ---- bone, the reading surface ---- */
  --bone:       #f4f1eb;
  --bone-2:     #e9e4db;
  --bone-3:     #d8d1c5;

  /* ---- chrome, the machined ramp ---- */
  --chrome-1:   #ffffff;
  --chrome-2:   #d7dbe0;
  --chrome-3:   #a8aeb6;
  --chrome-4:   #6f757e;
  --chrome-5:   #444a52;

  /* ---- the dark ground, warm because the brand is warm ---- */
  --void:       #0d0809;
  --ground:     #130c0e;
  --surface:    #1a1114;
  --raised:     #221619;
  --line:       #2e1e22;
  --line-hi:    #43292f;

  --ink:        #f2ece9;
  --ink-dim:    #a2938f;
  --ink-faint:  #6b5b58;

  /* ---- the one non brand hue, and what it is for ---- */
  --jade:       #10a97a;
  --jade-hi:    #1ad39a;

  --blood-rgb:  163, 19, 36;
  --jade-rgb:   16, 169, 122;
  --bone-rgb:   244, 241, 235;
  --ink-rgb:    242, 236, 233;
  --chrome-rgb: 215, 219, 224;

  /* ---- type ---- */
  --display: "Anton", "Archivo", Impact, sans-serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s8: 48px; --s10: 64px; --s12: 96px; --s16: 140px;

  --radius: 3px;
  --wrap: 1480px;

  /* ---- motion. Every duration and curve is named, so the whole system
     can be retimed from one place and nothing drifts. ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --spring: cubic-bezier(.16, 1.1, .3, 1);
  --snap: cubic-bezier(.2, .9, .2, 1);
  --t-fast: .18s;
  --t-med: .38s;
  --t-slow: .72s;

  /* The brand angle. Every diagonal on the page uses this one value, which
     is what makes the shards read as a system rather than as decoration. */
  --shear: 6deg;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.num, .mono, input, table, .tabular {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

::selection { background: var(--blood); color: var(--bone); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }

/* =====================================================================
   BACKGROUND
   ===================================================================== */
.plane { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.plane-glow {
  background:
    radial-gradient(1100px 640px at 12% -8%, rgba(var(--blood-rgb), .22), transparent 62%),
    radial-gradient(900px 700px at 92% 4%, rgba(var(--blood-rgb), .12), transparent 60%),
    radial-gradient(1200px 900px at 50% 108%, rgba(0, 0, 0, .6), transparent 60%);
}

/* The measuring lattice, sheared to the brand angle so even the grid is
   part of the identity rather than a default. */
.plane-grid {
  background-image:
    linear-gradient(to right, rgba(var(--bone-rgb), .026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--bone-rgb), .026) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: skewY(calc(var(--shear) * -0.25));
  transform-origin: top left;
  mask-image: radial-gradient(ellipse 130% 85% at 50% 0%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 130% 85% at 50% 0%, #000 18%, transparent 76%);
}

/* A spotlight that follows the pointer. Driven by two custom properties the
   motion layer writes, so the only thing changing per frame is a gradient
   position and never layout. */
.plane-spot {
  background: radial-gradient(520px 520px at var(--mx, 50%) var(--my, 30%), rgba(var(--blood-rgb), .10), transparent 70%);
  transition: opacity .5s var(--ease);
  opacity: 0;
}
body[data-pointer="fine"] .plane-spot { opacity: 1; }

/* =====================================================================
   CHROME TEXT. A real metal ramp with a specular band that travels.
   ===================================================================== */
.chrome {
  background: linear-gradient(
    100deg,
    var(--chrome-4) 0%, var(--chrome-2) 18%, var(--chrome-1) 30%,
    var(--chrome-3) 42%, var(--chrome-5) 56%, var(--chrome-2) 72%,
    var(--chrome-1) 84%, var(--chrome-4) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 7s linear infinite;
}
.bloodchrome {
  background: linear-gradient(
    100deg,
    var(--blood-lo) 0%, var(--blood) 20%, var(--blood-hi) 32%,
    #e8506a 40%, var(--blood-hi) 50%, var(--blood) 66%, var(--blood-lo) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}
@keyframes sheen { to { background-position: -260% 0; } }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.nav[data-stuck="true"] {
  background: rgba(13, 8, 9, .86);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--line);
}
.nav-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 12px var(--s5);
  display: flex; align-items: center; gap: var(--s5);
}

.brand { display: flex; align-items: baseline; gap: 9px; }
.brand-mark {
  font-family: var(--display);
  font-size: 25px; letter-spacing: .012em;
  transform: skewX(-9deg);
  line-height: 1;
}
.brand-sub {
  font-size: 8.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}

.nav-links { display: flex; gap: 1px; margin-left: var(--s5); }
.nav-links a {
  padding: 8px 15px; position: relative;
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: color var(--t-fast) var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 2px; height: 2px;
  background: var(--blood); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--snap);
}
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

.chainpill {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-dim);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.dot.live { background: var(--jade); animation: pulse 2.6s infinite; }
.dot.bad { background: var(--blood-hi); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--jade-rgb), .55); }
  70% { box-shadow: 0 0 0 6px rgba(var(--jade-rgb), 0); }
}

/* =====================================================================
   BUTTONS. Sheared to the brand angle, with a specular wipe on hover and
   a real press. The wipe is a pseudo element so it costs no extra node.
   ===================================================================== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid var(--line-hi); color: var(--ink);
  background: var(--raised);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition: transform var(--t-fast) var(--spring), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast);
  overflow: hidden; white-space: nowrap;
}
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.16) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease);
}
.btn:hover:not(:disabled)::before { transform: translateX(130%); }
.btn:hover:not(:disabled) { border-color: var(--chrome-5); }
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--blood-hi); outline-offset: 2px; }

.btn-blood {
  background: linear-gradient(170deg, var(--blood-hi), var(--blood) 45%, var(--blood-lo));
  border-color: var(--blood-hi); color: var(--bone);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-blood:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 26px -10px rgba(var(--blood-rgb), .8); }

.btn-bone { background: var(--bone); color: var(--blood-ink); border-color: var(--bone); }
.btn-bone:hover:not(:disabled) { background: var(--chrome-1); border-color: var(--chrome-1); }

.btn-ghost { background: transparent; border-color: var(--line-hi); color: var(--ink-dim); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--chrome-5); }

.btn-long  { background: linear-gradient(170deg, rgba(var(--jade-rgb), .28), rgba(var(--jade-rgb), .1)); border-color: rgba(var(--jade-rgb), .5); color: var(--jade-hi); }
.btn-short { background: linear-gradient(170deg, var(--blood-hi), var(--blood-lo)); border-color: var(--blood-hi); color: var(--bone); }
.btn-lg { padding: 15px 30px; font-size: 12.5px; }
.btn-block { width: 100%; }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); position: relative; z-index: 1; }
[id] { scroll-margin-top: 78px; }

.view { display: none; }
.view.active { display: block; animation: viewIn var(--t-slow) var(--ease); }
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }

.card {
  background: linear-gradient(178deg, var(--surface), var(--ground));
  box-shadow: inset 0 1px 0 rgba(var(--bone-rgb), .03);
  border: 1px solid var(--line);
  position: relative;
}
/* A corner notch on every panel, cut to the brand angle. One rule, and the
   whole interface stops looking like default rounded rectangles. */
.card::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 12px; height: 12px;
  background: linear-gradient(225deg, var(--line) 50%, transparent 50%);
}
.card-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 12px var(--s4); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--blood-rgb), .1), transparent);
}
.card-t { font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }
.card-b { padding: var(--s4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow .rule { width: 42px; height: 1px; background: var(--line-hi); }

h1, h2, h3 { margin: 0; }
h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 58px); line-height: .96; letter-spacing: .006em;
  transform: skewX(-4deg);
}
h3 { font-size: 15px; font-weight: 800; letter-spacing: -.005em; margin-bottom: var(--s2); }
p { margin: 0 0 var(--s3); color: var(--ink-dim); }
.lede { font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.62; color: var(--ink-dim); max-width: 58ch; }

/* =====================================================================
   LOADER. Not a spinner. The wordmark draws itself while the shader
   compiles and the fonts land, then the whole panel wipes away on the
   brand diagonal. It is the first thing anyone sees, so it is the first
   place the identity appears.
   ===================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 300;
  background: var(--void);
  display: grid; place-content: center; gap: var(--s5);
  transition: clip-path 1s var(--ease-io), opacity .4s .55s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.loader.done { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 0; pointer-events: none; }
.loader-mark {
  font-family: var(--display); font-size: clamp(38px, 7vw, 90px);
  letter-spacing: .02em; transform: skewX(-9deg);
  color: transparent;
  background: linear-gradient(100deg, var(--blood-deep) 0%, var(--blood) 40%, var(--blood-hi) 50%, var(--blood) 60%, var(--blood-deep) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: sheen 1.6s linear infinite;
}
.loader-bar { display: block; width: min(240px, 50vw); height: 2px; background: var(--line); justify-self: center; overflow: hidden; }
.loader-bar b { display: block; height: 100%; width: 0%; background: var(--blood-hi); transition: width .3s var(--ease); }

/* =====================================================================
   HERO. A shader field, a veil that keeps the type readable over it, and
   nothing else. No panels, no gauge, no illustration standing in for an
   idea. The motion is in the material.
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* The veil is what makes type over a moving field legible. Weighted to the
   left and the bottom, where the copy is, so the field stays bright on the
   right where it is only ever being looked at. */
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(13,8,9,.94) 0%, rgba(13,8,9,.78) 34%, rgba(13,8,9,.18) 62%, rgba(13,8,9,.42) 100%),
    linear-gradient(180deg, rgba(13,8,9,.7) 0%, transparent 22%, transparent 58%, rgba(13,8,9,.92) 100%);
}
.hero-in {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto; width: 100%;
  padding: var(--s12) var(--s5) var(--s10);
}

.hero-kicker {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 9.5px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 var(--s5);
}
.hero-kicker i { width: 28px; height: 1px; background: var(--line-hi); }

.hero-mark {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(58px, 15.5vw, 250px);
  line-height: .8; letter-spacing: .002em;
  transform: skewX(-9deg);
  margin: 0 0 var(--s5);
  color: var(--bone);
  text-shadow: 0 0 90px rgba(var(--blood-rgb), .5);
}
/* Kinetic type. Each character rises out of its own mask, so the line
   assembles rather than appearing. The mask is per character but the WORD
   never breaks, which is the detail that stops it looking scripted. */
.kw { display: inline-block; white-space: nowrap; }
.kc { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kc > span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
}
/* Any element carrying `in` reveals its characters. Listing the specific
   classes here was a trap: adding a fourth kinetic element meant remembering
   to extend this selector, and the first time that was forgotten the tagline
   rendered at zero opacity and simply was not on the page. */
.in > .kw > .kc > span,
.in .kw > .kc > span {
  animation: charUp .92s var(--ease) forwards;
}
@keyframes charUp { to { transform: none; opacity: 1; } }

/* The tagline. Set in the display face at a size that reads as a statement
   rather than as a subtitle, with a rule under it lifted off the brand plate. */
.hero-tag {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 3.1vw, 46px); line-height: 1;
  letter-spacing: .01em; transform: skewX(-6deg); transform-origin: left;
  color: var(--bone); margin: 0 0 var(--s4);
  position: relative; display: inline-block; padding-bottom: 12px;
}
.hero-tag::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--blood-hi), transparent);
  transform: scaleX(0); transform-origin: left;
  animation: ruleIn 1.1s .7s var(--ease) forwards;
}
@keyframes ruleIn { to { transform: scaleX(1); } }

/* The asset classes, as a slash separated row like the plate. */
.hero-classes {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0; margin: 0 0 var(--s5); padding: 0;
}
.hero-classes li {
  font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-dim); padding: 0 14px;
}
.hero-classes li:first-child { padding-left: 0; }
.hero-classes li + li { border-left: 1px solid var(--blood); }

.hero-lede {
  font-size: clamp(14.5px, 1.55vw, 19px); line-height: 1.6;
  color: var(--ink-dim); max-width: 46ch; margin: 0 0 var(--s6);
}
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s10); }

.hero-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-hi);
  max-width: 880px;
}
.hs { padding: var(--s4) var(--s4) 0 0; }
.hs b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3vw, 42px); line-height: 1; letter-spacing: .01em;
  transform: skewX(-6deg); transform-origin: left; color: var(--bone);
}
.hs span {
  display: block; margin-top: 8px;
  font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}

.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  width: 22px; height: 36px; border: 1px solid var(--line-hi);
  transform: translateX(-50%);
  display: grid; place-items: start center; padding-top: 7px;
}
.hero-scroll span { width: 2px; height: 7px; background: var(--blood-hi); animation: drop 1.9s var(--ease-io) infinite; }
@keyframes drop { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* =====================================================================
   PITCH
   ===================================================================== */
.pitch { padding-bottom: var(--s10); }
.pitch h2 { max-width: 20ch; margin: var(--s4) 0 var(--s8); }
.pitch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pg { background: var(--ground); padding: var(--s6) var(--s5); position: relative; overflow: hidden; transition: background var(--t-med) var(--ease); }
.pg:hover { background: var(--surface); }
.pg::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--blood); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--snap);
}
.pg:hover::before { transform: scaleX(1); }
.pg b {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  color: var(--blood-hi); margin-bottom: var(--s4);
}
.pg h3 { font-size: 16px; margin-bottom: 10px; }
.pg p { font-size: 13px; line-height: 1.65; margin: 0; color: var(--ink-dim); }

/* =====================================================================
   MARQUEE. One track duplicated, translated by exactly minus fifty
   percent, which is the only way an infinite scroll has no seam. The
   duplicate is aria-hidden so a screen reader reads the row once.
   ===================================================================== */
.marquee {
  position: relative; overflow: hidden; max-width: 100vw;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  padding: 11px 0;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: slide 64s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.tick {
  display: flex; align-items: baseline; gap: 9px;
  padding: 0 var(--s5); border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; white-space: nowrap;
}
.tick .s { font-family: var(--sans); font-weight: 800; letter-spacing: .1em; font-size: 10.5px; color: var(--ink); }
.tick .p { color: var(--ink-dim); }

/* =====================================================================
   ODOMETER. A price that changes should MOVE, not blink. Each digit is a
   strip of the ten glyphs translated by exactly its own height, so the
   roll is one transform per digit and nothing reflows.
   ===================================================================== */
.odo { display: inline-flex; overflow: hidden; line-height: 1.05; }
.odo-d { position: relative; overflow: hidden; height: 1.05em; }
.odo-strip {
  display: flex; flex-direction: column;
  transition: transform .52s var(--spring);
  will-change: transform;
}
.odo-strip > i { font-style: normal; height: 1.05em; display: block; }
.odo-sep { padding: 0 .02em; }

/* =====================================================================
   REVEALS. A mask wipe, not a fade. The line sits inside a clipped
   wrapper and rises into it, which reads as typesetting rather than as
   something appearing out of fog.
   ===================================================================== */
.rv { display: block; overflow: hidden; }
.rv > * {
  display: block;
  transform: translateY(112%) rotate(1.2deg);
  opacity: 0;
  transition: transform .96s var(--ease), opacity .7s var(--ease);
}
.rv.in > * { transform: none; opacity: 1; }

.fade { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.fade.in { opacity: 1; transform: none; }

/* A group that arrives in sequence. The delay is set inline by the motion
   layer so the stagger survives elements being added at runtime. */
.stagger > * { opacity: 0; transform: translateY(22px); }
.stagger.in > * { animation: riseIn .78s var(--ease) forwards; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

/* =====================================================================
   STATS
   ===================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--ground); padding: var(--s5); position: relative; overflow: hidden; }
.stat::after {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%;
  background: var(--blood); transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s var(--snap);
}
.stat:hover::after { transform: scaleY(1); }
.stat .k { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.stat .v { font-family: var(--display); font-size: 34px; letter-spacing: .01em; margin-top: 8px; line-height: 1; transform: skewX(-5deg); transform-origin: left; }
.stat .s { font-size: 10.5px; color: var(--ink-faint); margin-top: 6px; letter-spacing: .04em; }

/* =====================================================================
   TERMINAL
   ===================================================================== */
.term { display: grid; grid-template-columns: 244px minmax(0, 1fr) 328px; gap: var(--s3); padding: var(--s6) 0 var(--s12); align-items: start; }

.filters { display: flex; gap: 1px; padding: 8px var(--s3); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.filters button {
  padding: 4px 9px; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid transparent;
  transition: all var(--t-fast) var(--ease);
}
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--bone); background: var(--blood); border-color: var(--blood-hi); }

.mkt-list { display: flex; flex-direction: column; max-height: 620px; overflow-y: auto; }
.mkt-list::-webkit-scrollbar { width: 4px; }
.mkt-list::-webkit-scrollbar-thumb { background: var(--line-hi); }
.mkt {
  display: grid; grid-template-columns: 1fr auto; gap: 1px var(--s2);
  padding: 10px var(--s4); cursor: pointer; position: relative;
  border-left: 2px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mkt:hover { background: rgba(var(--bone-rgb), .03); }
.mkt[aria-selected="true"] { background: rgba(var(--blood-rgb), .1); border-left-color: var(--blood); }
.mkt .sym { font-weight: 800; font-size: 12.5px; letter-spacing: .07em; }
.mkt .nm { font-size: 10px; color: var(--ink-faint); grid-column: 1; letter-spacing: .03em; }
.mkt .px { font-family: var(--mono); font-size: 12px; text-align: right; }
.mkt .ch { font-family: var(--mono); font-size: 10px; text-align: right; }

.up { color: var(--jade-hi); }
.down { color: var(--blood-hi); }
.flat { color: var(--ink-faint); }

@keyframes flashUp   { 0% { background: rgba(var(--jade-rgb), .3); }  100% { background: transparent; } }
@keyframes flashDown { 0% { background: rgba(var(--blood-rgb), .38); } 100% { background: transparent; } }
.tick-up   { animation: flashUp .7s var(--ease); }
.tick-down { animation: flashDown .7s var(--ease); }

.chart-head { display: flex; align-items: center; gap: var(--s6); padding: var(--s4) var(--s5); flex-wrap: wrap; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--blood-rgb), .09), transparent); }
.chart-price { display: flex; align-items: baseline; gap: var(--s3); }
.chart-price .sym { font-family: var(--display); font-size: 24px; transform: skewX(-6deg); letter-spacing: .02em; }
.chart-price .p { font-family: var(--mono); font-size: 27px; font-weight: 500; letter-spacing: -.02em; }
.chart-price .c { font-family: var(--mono); font-size: 13px; }
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric .k { font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.metric .v { font-family: var(--mono); font-size: 13px; }

.tf-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 7px var(--s5); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tf { display: flex; gap: 1px; }
.tf button {
  padding: 5px 13px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-faint); border: 1px solid transparent;
  transition: all var(--t-fast) var(--ease);
}
.tf button:hover { color: var(--ink); }
.tf button[aria-pressed="true"] { color: var(--bone); background: var(--blood); border-color: var(--blood-hi); }
.ohlc { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); min-height: 16px; letter-spacing: .03em; }
.ohlc b { font-weight: 500; color: var(--ink); }

.chart-wrap { position: relative; height: 440px; }
.chart-wrap > div { position: absolute; inset: 0; }

/* ---- ticket ---- */
.ticket { position: sticky; top: 76px; }
.side-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: var(--s5); background: var(--line); border: 1px solid var(--line); }
.side-toggle button {
  padding: 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--ground);
  transition: all var(--t-fast) var(--ease);
}
.side-toggle button:hover { color: var(--ink); }
.side-toggle button[aria-pressed="true"].long  { background: linear-gradient(170deg, rgba(var(--jade-rgb), .3), rgba(var(--jade-rgb), .12)); color: var(--jade-hi); }
.side-toggle button[aria-pressed="true"].short { background: linear-gradient(170deg, var(--blood), var(--blood-lo)); color: var(--bone); }

.field { margin-bottom: var(--s5); }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.field label .hint { text-transform: none; letter-spacing: .02em; font-family: var(--mono); font-size: 11px; font-weight: 400; }
/* The funding link sits inside the collateral label because that is where
   somebody looks the moment their balance is not enough. */
.field label .hint-btn {
  margin-left: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-family: var(--mono); font-size: 11px; font-weight: 400;
  text-transform: none; letter-spacing: .02em; color: var(--blood-hi);
  border-bottom: 1px solid color-mix(in srgb, var(--blood-hi) 40%, transparent);
  transition: color .15s ease, border-color .15s ease;
}
.field label .hint-btn:hover { color: var(--ink); border-bottom-color: var(--ink); }
.field label .hint-btn:focus-visible { outline: 2px solid var(--blood-hi); outline-offset: 2px; }

.input-wrap {
  display: flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--line); padding: 0 13px; background: var(--void);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input-wrap:focus-within { border-color: var(--blood); box-shadow: 0 0 0 3px rgba(var(--blood-rgb), .16); }
.input-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 12px 0; font-size: 16px; font-family: var(--mono); }
.input-wrap .suffix { color: var(--ink-faint); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; }

.chips { display: flex; gap: 1px; margin-top: 8px; background: var(--line); border: 1px solid var(--line); }
.chip {
  flex: 1; padding: 6px; background: var(--ground);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { color: var(--bone); background: var(--blood); }

.lev { position: relative; padding: 8px 0 2px; }
.lev-rail { position: relative; height: 3px; background: var(--line); }
.lev-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(var(--jade-rgb), .35), var(--jade)); transition: width var(--t-fast) var(--ease); }
.lev[data-side="short"] .lev-fill { background: linear-gradient(90deg, var(--blood-lo), var(--blood-hi)); }
.lev input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: pointer; height: 24px; top: -10px; }
.lev-knob {
  position: absolute; top: 50%; width: 13px; height: 13px;
  background: var(--chrome-1); border: 2px solid var(--void);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
  transition: left var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
  box-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.lev:hover .lev-knob { transform: translate(-50%, -50%) rotate(45deg) scale(1.25); }
.lev-ticks { display: flex; justify-content: space-between; margin-top: 11px; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.lev-ticks button:hover { color: var(--blood-hi); }

/* ---- take profit and stop loss ---- */
.tpsl { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s2); }
.tpsl-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); transition: color var(--t-fast) var(--ease);
}
.tpsl-toggle:hover { color: var(--ink); }
.tpsl-toggle .box {
  width: 14px; height: 14px; border: 1.5px solid var(--line-hi); flex: none;
  display: grid; place-items: center; transition: all var(--t-fast) var(--spring);
}
.tpsl-toggle .box svg { width: 9px; height: 9px; opacity: 0; transform: scale(.4); transition: all var(--t-fast) var(--spring); color: var(--bone); }
.tpsl-toggle[aria-expanded="true"] { color: var(--ink); }
.tpsl-toggle[aria-expanded="true"] .box { background: var(--blood); border-color: var(--blood-hi); }
.tpsl-toggle[aria-expanded="true"] .box svg { opacity: 1; transform: none; }
.tpsl-body { margin-top: var(--s3); animation: tpslIn .34s var(--ease); }
@keyframes tpslIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tpsl-row { margin-bottom: var(--s2); }
.tpsl-row label { display: block; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.tpsl-row .input-wrap input { padding: 9px 0; font-size: 13.5px; }
.tpsl-row .suffix { font-size: 11px; }
.tpsl-note { font-size: 11px; line-height: 1.5; color: var(--ink-faint); margin: var(--s2) 0 0; }

/* ---- partial close ---- */
.closer { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.closer button {
  padding: 4px 8px; background: var(--ground);
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  transition: all var(--t-fast) var(--ease);
}
.closer button:hover { color: var(--bone); background: var(--blood); }

.rows { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s4); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 6px 0; }
.row .k { color: var(--ink-faint); font-size: 11.5px; letter-spacing: .02em; }
.row .v { font-family: var(--mono); font-size: 12.5px; text-align: right; }
.row.emph .v { font-size: 14px; }

.note {
  margin-top: var(--s4); padding: 11px 13px;
  font-size: 12px; line-height: 1.5;
  border-left: 2px solid var(--line-hi); background: rgba(var(--bone-rgb), .02); color: var(--ink-dim);
}
.note.warn { border-left-color: #d99a2b; background: rgba(217, 154, 43, .07); color: #eccb8e; }
.note.bad  { border-left-color: var(--blood-hi); background: rgba(var(--blood-rgb), .1); color: #f0a6b1; }
.note.good { border-left-color: var(--jade); background: rgba(var(--jade-rgb), .08); color: #8fe3c4; }

/* =====================================================================
   TABLES
   ===================================================================== */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  text-align: left; padding: 10px var(--s4); font-size: 9px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl td { padding: 13px var(--s4); border-bottom: 1px solid rgba(var(--bone-rgb), .04); font-family: var(--mono); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--t-fast); }
.tbl tbody tr:hover { background: rgba(var(--bone-rgb), .03); }
.tbl .r { text-align: right; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.pill.long  { color: var(--jade-hi); background: rgba(var(--jade-rgb), .14); }
.pill.short { color: var(--bone); background: var(--blood); }
.pill.mut   { color: var(--ink-faint); background: var(--raised); }

.bar { height: 3px; background: var(--line); overflow: hidden; min-width: 70px; }
.bar i { display: block; height: 100%; transition: width .6s var(--ease), background .4s; }

/* =====================================================================
   PROSE
   ===================================================================== */
.prose { max-width: 74ch; }
.prose p { font-size: 15px; line-height: 1.75; }
.prose h3 { margin-top: var(--s8); font-size: 17px; letter-spacing: .01em; }
.prose code { font-family: var(--mono); font-size: 12.5px; background: rgba(var(--bone-rgb), .06); padding: 2px 6px; color: #f0b7bf; }
.formula {
  font-family: var(--mono); font-size: 13px; line-height: 1.95;
  padding: var(--s5) var(--s6); margin: var(--s5) 0;
  border-left: 2px solid var(--blood); background: rgba(var(--blood-rgb), .07);
  color: var(--ink); overflow-x: auto;
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s3); }
.feature { padding: var(--s6); }
.feature h3 { font-size: 15.5px; }
.feature p { font-size: 13px; line-height: 1.65; margin: 0; }

/* =====================================================================
   TOASTS, MODAL, TERMS, SKELETON
   ===================================================================== */
.toasts { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 200; display: flex; flex-direction: column; gap: var(--s2); max-width: 380px; }
.toast {
  padding: 13px var(--s4);
  background: rgba(26, 17, 20, .97); border: 1px solid var(--line-hi); border-left: 2px solid var(--chrome-4);
  font-size: 12.5px; line-height: 1.5; color: var(--ink);
  box-shadow: 0 18px 46px -14px rgba(0,0,0,.9);
  animation: toastIn .55s var(--spring);
  backdrop-filter: blur(12px);
}
.toast.out { animation: toastOut .35s var(--ease) forwards; }
.toast.good { border-left-color: var(--jade); }
.toast.bad  { border-left-color: var(--blood-hi); }
.toast .t { font-weight: 800; margin-bottom: 3px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.toast .d { color: var(--ink-dim); font-size: 12.5px; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }

.modal { position: fixed; inset: 0; z-index: 150; display: none; align-items: center; justify-content: center; padding: var(--s5); }
.modal.on { display: flex; }
.modal-bg { position: absolute; inset: 0; background: rgba(6, 3, 4, .84); backdrop-filter: blur(7px); animation: fade .35s var(--ease); }
.modal-in {
  position: relative; width: min(430px, 100%);
  background: var(--surface); border: 1px solid var(--line-hi);
  box-shadow: 0 30px 76px -18px rgba(0,0,0,.94);
  animation: modalIn .48s var(--spring);
}
@keyframes fade { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

.wallet-opt {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 14px var(--s4); border: 1px solid var(--line); margin-bottom: var(--s2); text-align: left;
  transition: all var(--t-fast) var(--ease);
}
.wallet-opt:hover { border-color: var(--blood); background: rgba(var(--blood-rgb), .1); transform: translateX(4px); }
.wallet-opt img { width: 28px; height: 28px; flex: none; }
.wallet-opt .n { font-weight: 700; font-size: 13.5px; }

.term {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4); border: 1px solid var(--line); margin-bottom: var(--s2); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.term:hover { border-color: var(--line-hi); }
.term[data-on="true"] { border-color: var(--blood); background: rgba(var(--blood-rgb), .08); }
.term .box {
  width: 16px; height: 16px; border: 1.5px solid var(--line-hi); flex: none; margin-top: 2px;
  display: grid; place-items: center; transition: all var(--t-fast) var(--spring);
}
.term[data-on="true"] .box { background: var(--blood); border-color: var(--blood-hi); }
.term .box svg { width: 10px; height: 10px; opacity: 0; transform: scale(.4); transition: all var(--t-fast) var(--spring); color: var(--bone); }
.term[data-on="true"] .box svg { opacity: 1; transform: none; }
.term .t { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.term .d { font-size: 12px; line-height: 1.55; color: var(--ink-dim); }

.skel { display: inline-block; background: linear-gradient(90deg, var(--line) 25%, var(--line-hi) 50%, var(--line) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; color: transparent !important; min-width: 48px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.empty { padding: var(--s10) var(--s5); text-align: center; color: var(--ink-faint); font-size: 12.5px; letter-spacing: .03em; }

footer { border-top: 1px solid var(--line); margin-top: var(--s16); padding: var(--s8) 0 var(--s10); }
.foot { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1240px) {
  .term { grid-template-columns: 210px minmax(0, 1fr); }
  .ticket { grid-column: 1 / -1; position: static; }
}
@media (max-width: 960px) {
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-in { padding: var(--s10) var(--s4) var(--s8); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .term { grid-template-columns: 1fr; }
  .mkt-list { max-height: 300px; }
  .nav-links { display: none; }
  .chart-wrap { height: 320px; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .toasts { left: var(--s4); right: var(--s4); max-width: none; }
  .hero-strip { grid-template-columns: 1fr 1fr; }
}

/* Motion is decoration. Anyone who asked for less of it gets the whole
   content and none of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rv > *, .fade, .stagger > *, .kc > span { opacity: 1 !important; transform: none !important; }
  .loader { display: none; }
  .marquee-track { animation: none !important; }
}


/* Where the line on the chart came from, and how far back it goes. Small,
   permanent, and never hidden: a chart with two hours of history behind it
   looks exactly like one with two years until somebody says which it is. */
.chart-src {
  padding: 8px var(--s4) 10px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
  color: var(--ink-faint); line-height: 1.5;
}
.chart-src:empty { display: none; }


/* What is left of today's deposit limit, under the note in the funding
   dialog. Quiet, because it is a fact rather than a warning until it binds. */
.dep-limit {
  margin-top: 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .02em; color: var(--ink-faint); line-height: 1.5;
}
.dep-limit:empty { display: none; }