/* ============================================================
   QUANT X — site.css
   "Obsidian terminal" — deep space navy, electric cyan signal,
   gold for execution, mint/coral for bull/bear.
   Display: Space Grotesk · Body: Inter · Data: JetBrains Mono
   ============================================================ */

:root {
  --bg:        #06080F;
  --bg-2:      #090D18;
  --surface:   #0E1322;
  --surface-2: #141B2E;
  --surface-3: #1A2238;
  --line:        rgba(125,145,190,0.12);
  --line-bright: rgba(130,170,230,0.26);

  --text:       #E7EBF6;
  --text-dim:   #98A2BC;
  --text-faint: #8089A5;

  --cyan:      #45E2EA;
  --cyan-deep: #17AEC0;
  --gold:      #F4B740;
  --mint:      #36E0A0;
  --coral:     #FF5C73;
  --violet:    #8C7DF7;

  --glow-cyan: 0 0 0 1px rgba(69,226,234,0.30), 0 0 36px -4px rgba(69,226,234,0.45);
  --glow-gold: 0 0 0 1px rgba(244,183,64,0.30), 0 0 36px -6px rgba(244,183,64,0.40);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --maxw: 1200px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

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

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ambient gradient field.
   Turned down on request — "make the background more light so it doesn't
   disturb the front end". The base stays near-black: the brand is dark/neon,
   and raising the base luminance would move the contrast ratio of every piece
   of copy on the estate, including the risk disclosure, which is not
   decoration and may not be traded against a mood. What changes is the weight
   of the decoration painted over that base, which is what was competing with
   the foreground. Roughly halved across the board. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 78% -5%, rgba(69,226,234,0.05), transparent 60%),
    radial-gradient(800px 600px at 12% 8%, rgba(140,125,247,0.04), transparent 55%),
    radial-gradient(700px 500px at 50% 100%, rgba(244,183,64,0.025), transparent 60%);
}
/* Fine grid overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(125,145,190,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,145,190,0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- typography helpers ---------- */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--cyan);
  opacity: 0.7;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; }
.section-title { font-size: clamp(28px, 4vw, 46px); margin-bottom: 18px; }
.section-intro { color: var(--text-dim); max-width: 640px; font-size: 17px; }
.grad-cyan { background: linear-gradient(120deg, var(--cyan), #7FF0F5 60%, var(--cyan-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-gold { background: linear-gradient(120deg, var(--gold), #FFD98A); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  color: #021016;
  box-shadow: var(--glow-cyan);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(69,226,234,0.5), 0 0 50px -6px rgba(69,226,234,0.7); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,0.02); border-color: var(--line-bright); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--cyan); color: var(--cyan); }
.btn-gold { background: linear-gradient(180deg, var(--gold), #D99A28); color: #1A1203; box-shadow: var(--glow-gold); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ---------- top ticker tape ---------- */
/* .ticker / .ticker-track / .tick / .up / .down styled the fake market tape and
   went with it. `.up` and `.down` had no other user on the estate — they were
   the green and red of the invented percentage moves. world.html keeps its own
   news ticker, which is scoped under `.wt` and reads from a real feed.
   @keyframes scrollx stays: world.html's tape uses it. */
@keyframes scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  /* Was `top: 37px`, the exact height of the market tape that used to stick
     above it. With the tape gone that offset left a 37px gap of scrolling page
     above the sticky header. */
  top: 0;
  z-index: 55;
  background: rgba(7,9,16,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; color: #04121a; font-size: 16px;
  box-shadow: var(--glow-cyan);
}
.brand .mark span { transform: skewX(-8deg); }

/* The logo mark. Lived as an identical 17-line <style> block copied into 37 of
   the 38 pages, which is why token.html silently had none of it. One copy now.

   mix-blend-mode is load-bearing, not decoration: assets/tradex-mark.png is an
   opaque PNG — IHDR colour-type 2, no alpha channel, no tRNS chunk — carrying a
   baked-in #00020B background. Painted normally it put a hard-edged black tile
   on the nav, which is what "the logo is broken" looked like. `lighten` keeps the
   brighter of artwork and backdrop per channel, and #00020B is darker than every
   surface the mark sits on, so the background resolves to exactly the bar behind
   it and disappears while the glyph survives untouched. `screen` also removes the
   tile but adds the background back as a faint blue lift; lighten does not.
   Delete this line the day the mark is re-exported with real transparency.

   The shimmer is a single sweep on load, not a loop — a nav that pulses forever
   competes with the page for attention. It sweeps the whole anchor, wordmark
   included; an earlier comment here claimed it was masked to the mark, and it
   never was. */
.brand .mark-img {
  height: 29px; width: auto; display: inline-block; vertical-align: middle;
  margin-right: 8px; mix-blend-mode: lighten;
  animation: tx-mark-in .55s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes tx-mark-in { from { opacity: 0; transform: translateY(3px) scale(.94) } to { opacity: 1; transform: none } }
/* `overflow: hidden` is here so the sheen above is clipped to the brand box.
   It has a second, unintended effect that broke the company's name on every
   mobile page: a flex item whose overflow is not `visible` has its automatic
   minimum size resolve to 0 instead of its content width. `.brand` is a flex
   item of `.nav-inner`, so it was free to shrink to nothing, and the CTA
   cluster next to it took the space — at 360px the brand measured 7px wide
   against a 92px content width, rendering "Trade X" as "Trac" hard against
   the next nav item. `flex: none` restores the intent: the wordmark is not
   the element that gives way. */
.brand { position: relative; overflow: hidden; flex: 0 0 auto; white-space: nowrap; }
.brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform: translateX(-120%); animation: tx-sheen 1.5s ease .5s 1 both;
}
@keyframes tx-sheen { to { transform: translateX(120%) } }
/* drop-shadow on an opaque rectangle haloed the tile, not the X. Brightness
   lifts the glyph the mark already carries. */
.brand:hover .mark-img { filter: brightness(1.2); transition: filter .25s; }
@media (prefers-reduced-motion: reduce) {
  .brand .mark-img { animation: none }
  .brand::after { display: none }
}

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14.5px; color: var(--text-dim); transition: color .15s ease; position: relative; }
.nav-links a:hover { color: var(--text); }
.nav-links a .tag {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
  color: var(--gold); border: 1px solid rgba(244,183,64,0.4);
  padding: 1px 4px; border-radius: 4px; margin-left: 5px; vertical-align: middle;
}
.nav-links a .tag.new { color: var(--cyan); border-color: rgba(69,226,234,0.4); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-signin { font-size: 14.5px; color: var(--text-dim); }
.nav-signin:hover { color: var(--cyan); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-bright); color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer;
  /* Measured 33px at 390px wide — the one control on the site under the 44px
     touch minimum. A thumb is blunter than a cursor, and this is the button
     that opens navigation on a phone, so a mis-tap costs the whole menu. */
  min-width: 44px; min-height: 44px; display: none; align-items: center; justify-content: center; }

/* The header on a phone -------------------------------------------------
   With `.brand` no longer able to shrink, the row must be made to fit rather
   than allowed to crush something. At 360px the bar has 312px of usable
   width; the wordmark takes ~120px and the CTA cluster wanted 305px.

   `Dashboard` is the item that goes. It is a signed-in destination shown to
   everyone, it is duplicated in the footer's Account column, and dropping it
   is the only removal here that costs a visitor nothing — `Sign in` and
   `Start free` are the two things a first-time visitor on a phone is there
   to press, and neither is reachable from the `≡` menu, whose contents are
   the product menu only. Nothing is hidden that has no other route. */
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .nav-cta { gap: 10px; flex: 0 1 auto; min-width: 0; }
  .nav-cta .nav-dash { display: none; }
  .nav-signin { white-space: nowrap; font-size: 14px; }
  .nav-cta .btn { padding: 10px 14px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 380px) {
  /* Last resort before the row would have to wrap: the button keeps its
     label, the sign-in link is the one that can afford to be smaller. */
  .nav-cta { gap: 8px; }
  .nav-signin { font-size: 13px; }
  .nav-cta .btn { padding: 10px 12px; font-size: 13px; }
}

/* ---------- hero ---------- */
.hero { padding: 70px 0 60px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.4vw, 66px); margin: 22px 0 22px; }
.hero-sub { font-size: 18px; color: var(--text-dim); max-width: 540px; margin-bottom: 30px; }
.hero-sub b { color: var(--text); font-weight: 600; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-trust { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.hero-stats { display: flex; gap: 30px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero-stat .n { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--text); }
.hero-stat .n .grad-cyan { font-weight: 700; }
.hero-stat .l { font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); letter-spacing: .03em; }

/* Council telemetry strip on the home page. Centred and bordered like the hero
   stats it borrows, but it is allowed to render nothing: when the server has
   too few runs it sends a reason instead of numbers, and the reason is a
   sentence, not a dial. */
.tele { margin: 6px 0 26px; }
.tele-stats { justify-content: center; flex-wrap: wrap; gap: 34px; border-top: none; padding-top: 0; margin-top: 0; }
.tele-stats:empty { display: none; }
.tele-note { margin-top: 14px; text-align: center; font-size: 12.5px; line-height: 1.7;
  color: var(--text-faint); font-family: var(--font-mono); max-width: 70ch;
  margin-left: auto; margin-right: auto; }

/* ---------- cockpit (hero signature) ---------- */
.cockpit {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-bright);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.04);
}
.cockpit::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(140deg, rgba(69,226,234,0.5), transparent 40%, transparent 70%, rgba(140,125,247,0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.cockpit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cockpit-head .pair { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); }
.cockpit-head .pair b { color: var(--text); }
.live-dot { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--mint); }
.live-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: pulse 5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform: scale(1);} 50%{ opacity:.62; transform: scale(.9);} }

/* The hero panel's honesty label. It replaces a `.live-dot` reading "LIVE
   COUNCIL": deliberately unlit and unanimated, because the whole point is that
   it must not read as a status light. */
.sim-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--text-dim); border: 1px solid var(--line-bright);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}

/* .price-row / .price / .price-chg were deleted with the markup they styled —
   a 40px XAU/USD print that ticker.js random-walked. Nothing on this origin
   serves a quote, so there is no honest version of that row to restyle. */

.council {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 14px;
}
.council-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: .1em; }
.agents { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.agent {
  text-align: center;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.015);
  transition: all .3s ease;
  position: relative;
}
.agent .ico { font-family: var(--font-mono); font-size: 15px; font-weight: 700; margin-bottom: 5px; color: var(--text-faint); transition: color .3s ease; }
.agent .nm { font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; color: var(--text-faint); text-transform: uppercase; }
.agent.active { border-color: var(--cyan); background: rgba(69,226,234,0.07); box-shadow: 0 0 22px -8px var(--cyan); }
.agent.active .ico, .agent.active .nm { color: var(--cyan); }
.agent.done .ico { color: var(--mint); }
.agent.bull.done .ico { color: var(--mint); }
.agent.bear.done .ico { color: var(--coral); }

.consensus { display: flex; align-items: center; gap: 14px; }
.gauge { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.gauge svg { transform: rotate(-90deg); }
.gauge .val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.consensus-meta { flex: 1; }
.consensus-meta .lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--text-faint); text-transform: uppercase; }
.consensus-meta .verdict { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 2px 0 6px; }
.vote-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.vote-bar i { display: block; height: 100%; width: 80%; background: linear-gradient(90deg, var(--cyan), var(--mint)); border-radius: 3px; transition: width .6s ease; }

.ticket {
  margin-top: 14px;
  border: 1px dashed rgba(244,183,64,0.35);
  background: rgba(244,183,64,0.05);
  border-radius: var(--r);
  padding: 13px 15px;
  display: flex; align-items: center; justify-content: space-between;
  opacity: 0.35;
  transition: opacity .4s ease, border-color .4s ease;
}
.ticket.live { opacity: 1; border-color: rgba(244,183,64,0.6); box-shadow: 0 0 30px -10px var(--gold); }
.ticket .side { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gold); }
/* .lvls held "SL 4,521 · TP 4,554 · RR 1:1.75 · 0.10 lot" in mono, because it
   was pretending to be a fill. It now carries a sentence about where levels
   come from, so it is set as prose and given room to wrap on a phone. */
.ticket .lvls { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); text-align: right; max-width: 60%; }
@media (max-width: 720px) {
  .ticket { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ticket .lvls { text-align: left; max-width: 100%; }
}
.cockpit-foot { margin-top: 14px; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); text-align: center; letter-spacing: .04em; }

/* ---------- generic section ---------- */
.section { padding: 84px 0; position: relative; }
.section-head { margin-bottom: 46px; }
.section-head.center { text-align: center; }
.section-head.center .section-intro { margin: 0 auto; }

/* compatibility strip */
.compat { padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compat-inner { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; }
.compat .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--text-faint); text-transform: uppercase; }
.compat .prov { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--text-dim); transition: color .2s; }
.compat .prov:hover { color: var(--text); }

/* ---------- product cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
  transition: border-color .25s ease, transform .25s ease;
  display: flex; flex-direction: column;
}
.card:hover { border-color: var(--line-bright); transform: translateY(-3px); }
.card.feature { border-color: rgba(69,226,234,0.35); box-shadow: 0 0 50px -22px var(--cyan); }
.card-badge {
  position: absolute; top: -10px; right: 22px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 20px;
  background: var(--cyan); color: #03161a; font-weight: 700;
}
.card-status { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.card-status .d { width: 6px; height: 6px; border-radius: 50%; }
.d.live { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.d.soon { background: var(--gold); }
.d.free { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.card h3 { font-size: 23px; margin-bottom: 8px; }
.card .price-tag { font-family: var(--font-display); font-weight: 700; font-size: 28px; margin-bottom: 14px; }
.card .price-tag small { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); font-weight: 400; }
.card p { color: var(--text-dim); font-size: 14.5px; margin-bottom: 18px; flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.chip { font-family: var(--font-mono); font-size: 10.5px; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); color: var(--text-dim); }
.card-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card-meta .m .v { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.card-meta .m .k { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- pipeline ---------- */
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: stage; }
.stage {
  padding: 26px 20px;
  border-left: 1px solid var(--line);
  position: relative;
  transition: background .25s ease;
}
.stage:first-child { border-left: none; }
.stage:hover { background: rgba(69,226,234,0.03); }
.stage .num { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); letter-spacing: .1em; margin-bottom: 16px; display: block; }
.stage h3 { font-size: 19px; margin-bottom: 10px; }
.stage p { font-size: 13.5px; color: var(--text-dim); }
.stage .arrow { position: absolute; top: 30px; right: -7px; color: var(--text-faint); font-size: 13px; z-index: 2; background: var(--bg); padding: 0 2px; }

/* ---------- terminal feed ---------- */
.terminal {
  background: #05070D;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-family: var(--font-mono);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9);
}
.term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.015); }
.term-bar .dots { display: flex; gap: 6px; }
.term-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); }
.term-bar .dots i:nth-child(1){ background:#FF5C73; } .term-bar .dots i:nth-child(2){ background:#F4B740; } .term-bar .dots i:nth-child(3){ background:#36E0A0; }
.term-bar .path { font-size: 12px; color: var(--text-faint); margin-left: 8px; }
.term-bar .stat { margin-left: auto; font-size: 11px; color: var(--mint); display: flex; align-items: center; gap: 6px; }
.term-body { padding: 18px 20px; font-size: 13px; line-height: 1.9; min-height: 320px; }
.term-line { color: var(--text-dim); }
.term-line .t { color: var(--text-faint); }
.term-line .tag-a { color: var(--cyan); } .term-line .tag-b { color: var(--violet); } .term-line .tag-c { color: var(--gold); }
.term-line .ok { color: var(--mint); }
.term-line .arr { color: var(--gold); }
.cursor { display: inline-block; width: 8px; height: 15px; background: var(--cyan); vertical-align: text-bottom; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .15; } }

.flow { display: grid; gap: 10px; }
.flow-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.flow-step .fn { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); width: 22px; }
.flow-step .ft { flex: 1; }
.flow-step .ft b { font-family: var(--font-display); font-size: 15px; }
.flow-step .ft span { font-size: 12.5px; color: var(--text-dim); display: block; }
.flow-step .fv { font-family: var(--font-mono); font-size: 12px; color: var(--mint); }

/* ---------- risk grid ---------- */
.risk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.risk {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
  overflow: hidden;
}
.risk::after { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--coral), transparent); }
.risk .rk { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--coral); text-transform: uppercase; margin-bottom: 12px; }
.risk h3 { font-size: 20px; margin-bottom: 10px; }
.risk p { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; }
.risk .tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 880px; margin: 0 auto; }
.plan {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
}
.plan.pro { border-color: rgba(244,183,64,0.4); box-shadow: 0 0 60px -26px var(--gold); }
.plan-badge { position: absolute; top: -11px; left: 32px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; padding: 4px 12px; border-radius: 20px; background: var(--gold); color: #1a1203; font-weight: 700; }
.plan .tier { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 14px; }
.plan h3 { font-size: 24px; margin-bottom: 6px; }
.plan .pr { font-family: var(--font-display); font-weight: 700; font-size: 46px; margin: 10px 0 4px; }
.plan .pr small { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); font-weight: 400; }
.plan .blurb { color: var(--text-dim); font-size: 14px; margin-bottom: 22px; }
.plan ul { list-style: none; margin-bottom: 24px; display: grid; gap: 11px; }
.plan li { font-size: 14px; color: var(--text-dim); display: flex; gap: 10px; align-items: flex-start; }
.plan li::before { content: "▸"; color: var(--cyan); flex-shrink: 0; }
.plan li.no { color: var(--text-faint); }
.plan li.no::before { content: "×"; color: var(--text-faint); }

/* ---------- founder ---------- */
.founder { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: start; }
.founder-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; position: sticky; top: 120px; }
.founder-portrait {
  /* Square. I had tried 3:2 to avoid upscaling the 540x360 source, but the
     card is built around a square portrait and a short wide image reads wrong
     in it. Filling the square costs some sharpness; the layout matters more,
     and the source is dark, textured artwork that carries the scale well. */
  width: 100%; aspect-ratio: 1; border-radius: var(--r); margin-bottom: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(69,226,234,0.25), transparent 60%),
    linear-gradient(160deg, var(--surface-3), var(--bg));
  display: grid; place-items: center;
  font-family: var(--font-mono); color: var(--text-faint); font-size: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
}
/* cover fills the square by cropping the sides rather than squashing the
   image. Anchored slightly above centre so the crop keeps the face, which
   sits in the upper half of the frame. */
.founder-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  display: block;
}
.founder-card .who { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.founder-card .role { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); margin-bottom: 14px; }
.founder-card blockquote { font-size: 14.5px; color: var(--text-dim); font-style: italic; line-height: 1.7; border-left: 2px solid var(--cyan); padding-left: 14px; }
.timeline { display: grid; gap: 8px; }
.tl-item { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.tl-item .yr { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); letter-spacing: .04em; }
.tl-item h3 { font-size: 18px; margin-bottom: 8px; }
.tl-item p { font-size: 14px; color: var(--text-dim); }
.tl-item p b { color: var(--text); }

/* The .metrics / .metric block that lived here styled the five invented engine
   figures on index.html and nothing else in the estate. The figures are gone,
   so the styling is too — leaving it would be an invitation to fill it again. */

/* ---------- testimonials ----------
   The .quotes / .quote / .av / .nm / .rl block went with the four invented
   testimonials it styled (index.html; it had no other user on the estate).
   Same reasoning as the deleted telemetry styling above: leaving the styling
   in place is an invitation to fill it again, and the next person filling it
   would have no idea the last four were made up. Real testimonials, when there
   are some, can bring their own markup and their own consent record. */

/* ---------- contact / cta band ---------- */
.cta-band {
  background: linear-gradient(140deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--line-bright);
  border-radius: var(--r-lg);
  padding: 54px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0%, rgba(69,226,234,0.12), transparent 70%); }
.cta-band h2 { font-size: clamp(26px, 3.5vw, 40px); margin-bottom: 14px; position: relative; }
.cta-band p { color: var(--text-dim); max-width: 540px; margin: 0 auto 28px; position: relative; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

/* contact form */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.channels { display: grid; gap: 14px; }
.channel { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .2s; }
.channel:hover { border-color: var(--line-bright); }
.channel .ci { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(69,226,234,0.08); color: var(--cyan); font-family: var(--font-mono); font-weight: 700; flex-shrink: 0; }
.channel h4 { font-family: var(--font-display); font-size: 15px; }
.channel .handle { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); }
.channel p { font-size: 13px; color: var(--text-dim); margin-top: 4px; }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.field { margin-bottom: 16px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; display: block; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(69,226,234,0.12); }
.field textarea { resize: vertical; min-height: 96px; }
.form-msg { font-size: 13px; margin-top: 6px; min-height: 18px; }
.form-msg.ok { color: var(--mint); }
.form-msg.err { color: var(--coral); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0; overflow: hidden; }
.faq summary { padding: 20px 22px; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cyan); font-size: 20px; font-family: var(--font-mono); }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .ans { padding: 18px 22px; color: var(--text-dim); font-size: 14.5px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 56px 0 30px; margin-top: 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 40px; }
.footer .brand { margin-bottom: 14px; }
.footer-tagline { color: var(--text-dim); font-size: 14px; max-width: 300px; }
.footer-links { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--text-dim); margin-bottom: 10px; transition: color .15s; }
.footer-col a:hover { color: var(--cyan); }
/* This used to hold a #6E7896 override, because --text-faint was #5B6480 and
   measured 3.41:1 on the page base — under AA. The note here argued that was
   "tolerable for an eyebrow or a units label" and lifted only the disclosure.
   Two things were wrong with that. WCAG 1.4.3 exempts INCIDENTAL text —
   decorative, inactive, invisible — not small text that carries meaning, and an
   eyebrow or a units label carries meaning. And --text-faint sits on raised
   surfaces too, where it measured 2.69:1, failing even the 3:1 large-text
   floor. The token is now #8089A5: 5.76:1 on the base, 4.54:1 on the deepest
   panel, hue preserved, and still a clear step below --text-dim at 7.84:1, so
   the hierarchy the old note wanted to protect survives. The override is gone
   because it would now make the disclosure DARKER than the text around it. */
.disclosure { font-size: 12px; color: var(--text-faint); line-height: 1.7; border-top: 1px solid var(--line); padding-top: 24px; }
.disclosure b { color: var(--text-dim); }
.footer-base { display: flex; justify-content: space-between; margin-top: 24px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); flex-wrap: wrap; gap: 12px; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .cockpit { max-width: 520px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .pipeline { grid-template-columns: 1fr 1fr; }
  .stage .arrow { display: none; }
  .founder { grid-template-columns: 1fr; }
  .founder-card { position: static; }
}
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  /* The dropdown that used to live here is gone; the sidebar further down owns
     the mobile menu now. It was a second copy of the same implementation, and
     because `.nav.open .nav-links` outranks the sidebar's plain `.nav-links`
     selector, its position:absolute survived and pinned the panel 335px off the
     right edge of a 390px screen — open, visible, and almost entirely off the
     display. Two rules for one component is how that happens quietly. */
  .cards, .pricing, .risk-grid, .contact-grid, .pipeline { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .footer-top { flex-direction: column; }
  /* Four link columns sharing a 60px gap left each one 93px wide on a phone,
     which is narrower than "AI Chart Analysis" needs — every second entry
     wrapped. Two columns, tighter gap: nothing wraps. */
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  .tl-item { grid-template-columns: 1fr; gap: 6px; }
  .cta-band { padding: 34px 22px; }
}

/* ============================================================
   Additions: terminal line colors, gradient coral,
   nav scrolled state, contact msg reveal
   ============================================================ */
.tline { font-family: var(--font-mono); white-space: pre-wrap; word-break: break-word; opacity: 0; animation: tlineIn .25s ease forwards; }
.tline .ts { color: var(--text-faint); margin-right: 12px; opacity: .8; }
@keyframes tlineIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.c-cyan   { color: var(--cyan); }
.c-gold   { color: var(--gold); }
.c-mint   { color: var(--mint); }
.c-coral  { color: var(--coral); }
.c-violet { color: var(--violet); }
.c-dim    { color: var(--text-dim); }
.c-faint  { color: var(--text-faint); }

.grad-coral { background: linear-gradient(120deg, var(--coral), #FF93A4); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav.scrolled { background: rgba(6,8,15,0.86); border-bottom-color: var(--line-bright); box-shadow: 0 10px 40px -20px rgba(0,0,0,0.9); }

.form-msg { opacity: 0; transition: opacity .3s ease; }
.form-msg.show { opacity: 1; }

/* ============================================================
   QUANTUM + VIVID NEON LAYER
   ============================================================ */
@property --qa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --neon-cyan:   0 0 10px rgba(69,226,234,.65), 0 0 28px rgba(69,226,234,.4);
  --neon-violet: 0 0 10px rgba(140,125,247,.6), 0 0 30px rgba(140,125,247,.4);
  --neon-gold:   0 0 10px rgba(244,183,64,.6),  0 0 28px rgba(244,183,64,.4);
  --neon-mint:   0 0 10px rgba(54,224,160,.6),  0 0 26px rgba(54,224,160,.38);
}

/* ---- backdrop layering: gradient < tron-grid < qubit canvas < fine grid < content ---- */
.qfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: block; }
/* Scrim between the field and the page. The animation is decoration; the words
   are the product. Without this, readability depends on where a drawn shape
   happens to be at the moment someone reads. pointer-events:none so it never
   eats a click. Pages needing a fainter field set data-qx-tint on body. */
.page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(6,8,15,.80) 0%, rgba(6,8,15,.52) 45%, rgba(6,8,15,0) 100%),
    linear-gradient(180deg, rgba(6,8,15,.42) 0%, rgba(6,8,15,.20) 40%, rgba(6,8,15,.42) 100%);
}

body::before {
  z-index: -4;
  background:
    radial-gradient(1000px 680px at 80% -6%, rgba(69,226,234,0.18), transparent 60%),
    radial-gradient(880px 660px at 8% 6%, rgba(140,125,247,0.16), transparent 56%),
    radial-gradient(760px 560px at 52% 104%, rgba(244,183,64,0.09), transparent 60%),
    radial-gradient(620px 520px at 100% 60%, rgba(54,224,160,0.07), transparent 60%);
}
body::after { z-index: -1; }

/* Tron-style perspective grid floor */
.quantum-grid {
  position: fixed; left: -10%; right: -10%; bottom: 0; height: 46vh; z-index: -3; pointer-events: none;
  background-image:
    linear-gradient(rgba(69,226,234,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,125,247,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(440px) rotateX(75deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.45) 22%, transparent 62%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.45) 22%, transparent 62%);
  animation: gridflow 120s linear infinite;
  opacity: .16;
}
@keyframes gridflow { from { background-position: 0 0, 0 0; } to { background-position: 0 48px, 0 48px; } }

/* ---- vivid neon headline ---- */
.hero h1 .grad-cyan {
  filter: drop-shadow(0 0 16px rgba(69,226,234,0.55));
  animation: neonflicker 16s ease-in-out infinite;
}
@keyframes neonflicker {
  0%, 100%   { filter: drop-shadow(0 0 16px rgba(69,226,234,0.55)); }
  43%        { filter: drop-shadow(0 0 16px rgba(69,226,234,0.55)); }
  45%        { filter: drop-shadow(0 0 6px rgba(69,226,234,0.30)); }
  47%        { filter: drop-shadow(0 0 22px rgba(69,226,234,0.75)); }
  49%        { filter: drop-shadow(0 0 9px rgba(69,226,234,0.35)); }
  51%        { filter: drop-shadow(0 0 18px rgba(69,226,234,0.6)); }
}

/* ---- brighter eyebrow / dots ---- */
.eyebrow { color: var(--cyan); text-shadow: var(--neon-cyan); }
.eyebrow::before { box-shadow: var(--neon-cyan); height: 2px; }
.hero-trust span::before { box-shadow: var(--neon-cyan); }

/* ---- buttons: stronger glow + moving sheen ---- */
.btn-primary { box-shadow: var(--neon-cyan); position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); animation: sheen 11s ease-in-out infinite;
}
@keyframes sheen { 0%, 70% { left: -60%; } 100% { left: 140%; } }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(69,226,234,0.6), 0 0 26px rgba(69,226,234,0.7), 0 0 60px -4px rgba(69,226,234,0.7); }
.btn-gold { box-shadow: var(--neon-gold); }

/* ---- animated neon gradient border (cockpit + featured cards) ---- */
.cockpit { position: relative; }
.cockpit::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.4px;
  background: conic-gradient(from var(--qa), var(--cyan), var(--violet), var(--gold), var(--mint), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinborder 18s linear infinite; pointer-events: none; opacity: .85;
}
.card.feature { position: relative; box-shadow: 0 0 60px -26px var(--cyan); }
.card.feature::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.3px;
  background: conic-gradient(from var(--qa), var(--cyan), var(--violet), var(--gold), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinborder 20s linear infinite; pointer-events: none; opacity: .8;
}
@keyframes spinborder { to { --qa: 360deg; } }

/* ---- agent chips glow when active ---- */
.agent.active { box-shadow: 0 0 24px -6px var(--cyan), inset 0 0 14px -8px var(--cyan); }
.agent.active .ico { text-shadow: var(--neon-cyan); }
.live-dot i { box-shadow: var(--neon-mint); }

/* ---- neon section divider ---- */
.section + .section::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(680px, 80%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(69,226,234,0.55), rgba(140,125,247,0.4), transparent);
  box-shadow: 0 0 14px rgba(69,226,234,0.4);
}

/* ---- mark / brand glow ---- */
.brand .mark { box-shadow: var(--neon-cyan); }

/* ---- quantum circuit divider strip ---- */
.qcircuit { display: block; width: 100%; height: 54px; margin: 0 auto; opacity: .55; }
.qcircuit .wire { stroke: rgba(125,145,190,0.35); stroke-width: 1.4; }
.qcircuit .gate { fill: rgba(14,19,34,0.9); stroke: var(--cyan); stroke-width: 1.4; }
.qcircuit .gate.v { stroke: var(--violet); }
.qcircuit .gate.g { stroke: var(--gold); }
.qcircuit .glab { fill: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }
.qcircuit .q { fill: var(--cyan); }
.qcircuit .q.v { fill: var(--violet); }
.qcircuit .flow { stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--cyan));
  stroke-dasharray: 6 240; animation: qflow 9s linear infinite; }
@keyframes qflow { from { stroke-dashoffset: 246; } to { stroke-dashoffset: 0; } }

@media (max-width: 720px) {
  .quantum-grid { height: 32vh; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .quantum-grid, .hero h1 .grad-cyan, .btn-primary::after,
  .cockpit::after, .card.feature::after, .qcircuit .flow { animation: none !important; }
}

/* ============================================================
   TECH HUD OVERLAY + HEADLINE GLITCH
   ============================================================ */
.tech-hud { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.hud-c { position: fixed; width: 22px; height: 22px; border: 0 solid rgba(69,226,234,0.26); box-shadow: 0 0 10px rgba(69,226,234,0.16); }
.hud-c.tl { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; }
.hud-c.tr { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; }
.hud-c.bl { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; }
.hud-c.br { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; }
.hud-tag { position: fixed; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(69,226,234,0.26); text-shadow: 0 0 8px rgba(69,226,234,0.16); }
.hud-tl { top: 17px; left: 46px; }
.hud-br { bottom: 17px; right: 46px; }
.hud-scan { position: fixed; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(69,226,234,0.5), rgba(140,125,247,0.4), transparent);
  box-shadow: 0 0 14px rgba(69,226,234,0.5); animation: hudscan 60s linear infinite; opacity: .3; }
@keyframes hudscan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .55; } 92% { opacity: .55; } 100% { transform: translateY(100vh); opacity: 0; } }

/* RGB-split glitch on the hero headline (brief, periodic) */
.hero h1 { position: relative; animation: glitch 14s ease-in-out infinite; }
@keyframes glitch {
  0%, 95.5%, 100% { text-shadow: none; transform: translate(0, 0); }
  96%   { text-shadow: -2px 0 var(--coral), 2px 0 var(--cyan); transform: translate(1px, 0); }
  97.5% { text-shadow: 2px 0 var(--coral), -2px 0 var(--cyan); transform: translate(-1px, 0); }
  99%   { text-shadow: -1px 0 var(--cyan), 1px 0 var(--coral); transform: translate(0, 0); }
}

@media (max-width: 640px) { .hud-tag { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hud-scan, .hero h1 { animation: none !important; }
}

/* ── expanded header: full page nav (10 links) ─────────────────── */
.nav-links { gap: 17px; }
.nav-links a { font-size: 13.5px; white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 1001px){
  .nav-links { gap: 13px; }
  .nav-links a { font-size: 13px; }
  .nav-links a .tag { display: none; }
}
@media (max-width: 1000px){
  .nav-toggle { display: inline-flex; }
  /* The header cannot filter its backdrop while it contains a fixed panel.
     backdrop-filter makes an element a containing block for fixed-position
     descendants, exactly as transform and filter do. With blur(14px) on .nav,
     the sidebar below resolved position:fixed against the 66px header instead
     of the viewport: it computed top:0 bottom:0 correctly and still came out
     104px tall, pinned inside the header, unable to slide onto the screen no
     matter what the transform said. Nothing in the sidebar's own rules was
     wrong, which is what made it hard to see.

     So the blur comes off below this width and the background goes opaque to
     compensate. On a phone the blur was decorative; a menu that opens is not. */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none;
         background: rgba(7,9,16,0.96); }

  /* Mobile navigation is a side panel, not a dropdown.

     It was an absolutely-positioned strip below the header spanning the full
     width. With five top-level sections, each opening an accordion of three or
     four links, it grew taller than the viewport and shoved the page around as
     it expanded. A panel pinned to the right edge has a fixed frame, scrolls on
     its own, and leaves the page visibly intact underneath — which is what
     tells someone this is a layer they can dismiss, not a navigation they have
     already committed to.

     It stays in the DOM when closed, translated off-canvas rather than
     display:none, so opening can animate. visibility:hidden keeps it out of the
     tab order and the accessibility tree while off-screen; display:none would
     do that too but cannot be transitioned. */
  .nav-links{
    display:flex; position:fixed; top:0; right:0; bottom:0; left:auto;
    width:min(86vw, 340px);
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--bg-2); border-left:1px solid var(--line-bright);
    padding:76px 20px 28px; margin:0;
    max-height:100vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); visibility:hidden;
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
    box-shadow:-18px 0 46px -24px rgba(0,0,0,.85);
    z-index:60;
  }
  .nav.open .nav-links{
    transform:translateX(0); visibility:visible;
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  /* Backdrop. Dimming the page is what makes the panel read as a layer, and it
     gives a large obvious target for dismissing it — on a phone, tapping beside
     a menu is the reflex, not hunting for a close control. */
  .nav.open::after{
    content:""; position:fixed; inset:0; z-index:55;
    background:rgba(4,7,14,.62); backdrop-filter:blur(2px);
    animation:navFade .28s ease;
  }
  @keyframes navFade{ from{opacity:0} to{opacity:1} }
  /* The toggle must sit above both, or the control that opened the panel is
     buried by it and cannot close it. */
  .nav.open .nav-toggle{ position:relative; z-index:65; }
  @media (prefers-reduced-motion: reduce){
    .nav-links{ transition:none; }
    .nav.open::after{ animation:none; }
  }
  .nav.open .nav-links a { font-size: 15px; }
  .nav.open .nav-links a .tag { display: inline-block; }
}
.footer-legal a { color: var(--text-faint); margin: 0 9px; }
.footer-legal a:first-child { margin-left: 0; }
.footer-legal a:hover { color: var(--cyan); }

/* ============================================================
   Category dropdown header (Product · Platform · Systems · Pricing · Resources)
   ============================================================ */
.nav-links { gap: 26px; }
.nav-links .nav-item { position: relative; display: flex; align-items: center; }
.nav-links .nav-top {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 0; margin: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500;
  color: var(--text-dim); white-space: nowrap; text-decoration: none;
  transition: color .15s ease;
}
.nav-links .nav-top:hover,
.nav-links .nav-item:hover > .nav-top,
.nav-links .nav-item.open > .nav-top { color: var(--text); }
.nav-links .nav-top .cv { font-size: 9px; opacity: .6; transition: transform .2s ease; }
.nav-links .nav-item:hover > .nav-top .cv,
.nav-links .nav-item.open > .nav-top .cv { transform: rotate(180deg); }

.nav-links .nav-pop {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 292px; padding: 8px;
  background: var(--surface-2); border: 1px solid var(--line-bright);
  border-radius: 14px; box-shadow: 0 28px 70px -26px rgba(0,0,0,.9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .17s ease, transform .17s ease, visibility .17s;
  z-index: 70;
}
.nav-links .nav-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-links .nav-item:hover > .nav-pop,
.nav-links .nav-item.open > .nav-pop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(9px);
}
.nav-links .nav-pop a {
  display: block; padding: 10px 12px; border-radius: 10px;
  color: var(--text); white-space: normal; transition: background .14s ease;
}
.nav-links .nav-pop a:hover { background: rgba(125,145,190,.1); }
.nav-links .nav-pop a b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.nav-links .nav-pop a span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.45; }
.nav-dash { color: var(--cyan) !important; }

/* mobile: the dropdowns become accordions inside the open panel */
@media (max-width: 1000px){
  .nav.open .nav-links { gap: 2px; align-items: stretch; }
  .nav.open .nav-links .nav-item { width: 100%; flex-direction: column; align-items: stretch; }
  .nav.open .nav-links .nav-top {
    width: 100%; justify-content: space-between; font-size: 16px;
    padding: 14px 2px; border-bottom: 1px solid var(--line);
  }
  .nav.open .nav-links a.nav-top.solo { border-bottom: 1px solid var(--line); }
  .nav.open .nav-links .nav-top .cv { opacity: .9; }
  .nav.open .nav-links .nav-pop {
    position: static; transform: none; min-width: 0; padding: 4px 0 12px 8px;
    opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; background: transparent; display: none;
  }
  .nav.open .nav-links .nav-pop::before { display: none; }
  .nav.open .nav-links .nav-item.open > .nav-pop { display: block; }
  .nav.open .nav-links .nav-item.open > .nav-top { color: var(--cyan); }
  .nav.open .nav-links .nav-pop a { padding: 9px 8px; }
  .nav.open .nav-links .nav-pop a b { font-size: 15px; }
}

/* ==========================================================================
   Motion — restrained on purpose.

   The site already had hover states on .btn-primary and .btn-ghost and none
   on .btn-gold, which is the primary call to action on the pricing cards. The
   one button a visitor is most likely to reach for was the only one that did
   not respond to being reached for.

   Everything here is hover- or scroll-triggered. Nothing loops: perpetual
   motion on a page about money reads as a slot machine, and it competes with
   the numbers the reader is trying to weigh.
   ========================================================================== */

/* The missing state, matched to how the other two behave. */
.btn-gold:hover {
  box-shadow: 0 0 0 1px rgba(230,178,63,.55), 0 0 50px -6px rgba(230,178,63,.75);
  transform: translateY(-1px);
}

/* A single sheen crossing the face on hover. Clipped to the button, and it
   travels once per hover rather than cycling. */
.btn-primary, .btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
  transform: translateX(-130%);
}
.btn-primary:hover::after, .btn-gold:hover::after {
  transform: translateX(130%);
  transition: transform .62s cubic-bezier(.25,.6,.3,1);
}

/* Ghost buttons get the border, not a wash — they sit next to a primary and
   two competing glows read as noise. */
.btn-ghost:hover { transform: translateY(-1px); }

/* Pricing and feature cards lift toward the pointer. Small: a card that jumps
   makes the page feel unstable while someone is comparing prices across it. */
.plan, .card, .feature {
  transition: transform .22s cubic-bezier(.25,.6,.3,1), box-shadow .28s ease,
              border-color .22s ease;
}
.plan:hover, .card:hover, .feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.75);
}
.plan.featured:hover { transform: translateY(-4px); }

/* Focus must stay visible and must not be the hover treatment — someone
   tabbing needs to see where they are, and a glow alone is easy to lose. */
.btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .plan, .card, .feature { transition: none !important; }
  .btn-primary::after, .btn-gold::after { display: none; }
  .btn-primary:hover, .btn-gold:hover, .btn-ghost:hover,
  .plan:hover, .card:hover, .feature:hover { transform: none; }
}


/* Background motion is atmosphere, not information — the first thing to stop
   when someone has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
  .quantum-grid, .ticker-track, .live-dot i, .cursor { animation: none; }
  /* Everything decorative, not just the four found first time round. */
  [class*="neon"], [class*="sheen"], [class*="spin"], [class*="scan"],
  [class*="glitch"], [class*="qflow"] { animation: none !important; }
}

/* Platform switch -------------------------------------------------------
   Sits beside the wordmark in the nav, not on its own strip above it. Trade X
   is three platforms on two domains and this is the only control that says so,
   so it belongs with the brand rather than in a band people scroll past.
   Labels are shortened here — "Charts" and "Quant X" beside a "Trade X"
   wordmark read correctly without repeating the brand three times in one row. */
.platform-switch {
  display: flex; align-items: center; gap: 2px; margin-left: 14px;
  padding: 3px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); flex: none;
}
.platform-switch a {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint); text-decoration: none;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.platform-switch a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.platform-switch a[aria-current="page"] { background: var(--cyan); color: #04141a; font-weight: 700; }
/* Below the nav's own breakpoint the row would push the CTAs off screen. */
@media (max-width: 1100px) { .platform-switch { display: none; } }
@media (prefers-reduced-motion: reduce) { .platform-switch a { transition: none; } }

/* Two-column feature blocks (terminal + step cards) ----------------------
   One pattern, two users: the inference log and the Prompt Forge preset. Both
   pair a monospace pane with a column of numbered steps.

   The columns live here rather than in a `style=` attribute on the element,
   which is how the previous version broke: an inline `grid-template-columns`
   cannot be overridden by a media query, so at 390px both blocks stayed
   side-by-side and Chrome resolved them to 97px/197px and 25px/295px — the
   terminal squeezed to a fifth of a phone screen with its content shredded
   four characters to a line.

   `minmax(0, …)` matters. A bare `1.3fr 0.7fr` is floored by each column's
   min-content width, so the step cards' longest word pushed the terminal
   below its own share no matter what ratio was asked for. */
.split-2 { display: grid; gap: 22px; align-items: stretch; }
.inference-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.forge-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* The preset file, rendered as the file it is. */
.term-body-preset { min-height: auto; }
.preset-src {
  margin: 0; font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text-dim); line-height: 1.8; white-space: pre;
}

/* Below 900px both blocks stack, terminal first. Asked for directly: "put
   them below not side by side so it is easy to see".

   The pane that carries monospace content then scrolls horizontally inside
   its own box instead of wrapping. A log line or a preset key=value pair has
   no safe break point — `word-break: break-word` on `.tline` is what turned
   "quant-x engine" into "qua" + "nt-x engine" — so below the width where a
   line fits, the honest answer is a scrollbar, not a hyphen-less shred. */
@media (max-width: 900px) {
  .split-2 { grid-template-columns: 1fr; gap: 18px; }
  .inference-grid > .terminal, .forge-grid > .terminal { order: -1; }
  .term-body { overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 11.5px; }
  .term-body .tline { white-space: pre; word-break: normal; }
  .term-body-preset { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------- brand word
   "Trade X" beside the mark, lit in the mark's own blues. The stops are sampled
   from assets/tradex-mark.png (#0040C0 through #00A0F0) plus the highlight the
   glyph carries at its crossing, so the word and the image read as one object
   rather than a picture next to some text.

   The gradient is clipped to the glyphs and slid, which animates colour without
   animating opacity or size — nothing reflows, and it stays cheap because only
   background-position changes. The glow is a drop-shadow on the element, not a
   text-shadow: text-shadow paints behind transparent glyphs and would show
   through the clip as a grey smear.

   Note this deliberately breaks the "single sweep, never a loop" rule set for
   .brand::after above. A perpetual animation in the nav does compete with the
   page, so the cycle is slow (9s) and low-contrast at its dimmest. */
.brand-word,
.ax-brand .brand-word {
  background-image: linear-gradient(100deg,
      #0A46C8 0%, #0040C0 18%, #35B6FF 42%, #DCF3FF 50%,
      #35B6FF 58%, #00A0F0 78%, #0A46C8 100%);
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px rgba(53, 182, 255, .40));
  animation: tx-brand-sweep 9s linear infinite;
  will-change: background-position;
}
@keyframes tx-brand-sweep {
  from { background-position:   0% 50%; }
  to   { background-position: 260% 50%; }
}

/* --------------------------------------------------------------- page loader
   Shown while the page paints, then removed. Two rules make it safe rather than
   decorative: it is inert to pointer events the moment it starts fading, and
   site.js removes it on a timer as well as on load — an overlay that outlives a
   failed script is a site that looks down. */
.tx-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: #00020B;
  transition: opacity .45s ease;
}
.tx-loader.is-done { opacity: 0; pointer-events: none; }
.tx-loader-mark {
  width: 96px; height: auto;
  mix-blend-mode: lighten;           /* same reason as .brand .mark-img */
  animation: tx-loader-pulse 1.6s ease-in-out infinite;
}
.tx-loader-ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #35B6FF; border-right-color: rgba(10, 70, 200, .55);
  animation: tx-loader-spin 1.1s linear infinite;
}
@keyframes tx-loader-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(53,182,255,.35)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 22px rgba(53,182,255,.85)); transform: scale(1.06); }
}
@keyframes tx-loader-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .brand-word { animation: none; background-position: 42% 50%; }
  .tx-loader-mark, .tx-loader-ring { animation: none; }
}