/* ============================================================================
   STARFALL TERMINAL — terminal.css
   ----------------------------------------------------------------------------
   Total rebuild: a from-scratch design system for the trading-terminal landing
   page. Nothing here depends on the legacy sheets (Starfall.css / luxury.css /
   index.css) — this file is the entire visual language of the new index.html.

   01. Tokens & fonts          10. Floating HUD cards
   02. Reset & base            11. Section shell
   03. Background layers       12. Market tape table
   04. Boot sequence           13. Signal engine
   05. Cursor / toast          14. Performance panels
   06. Header + nav            15. Capability bento
   07. Buttons & chips         16. Funding tiers / plans
   08. Hero                    17. Members, FAQ, affiliate, CTA
   09. Terminal component      18. Footer · motion · responsive
   ========================================================================== */

/* ==========================================================================
   01. TOKENS & FONTS
   ========================================================================== */
:root {
  /* surfaces */
  --bg: #04060c;
  --bg-2: #070b14;
  --bg-3: #0b111d;
  --panel: rgba(12, 18, 30, 0.72);
  --panel-2: rgba(9, 13, 22, 0.86);
  --glass: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-gold: rgba(var(--accent-rgb), 0.34);

  /* ink */
  --ink: #eaeffb;
  --ink-2: #b9c6dd;
  --muted: #7f90ad;
  /* 5.09:1 on the #04060c shell -- see the note at the top of css/fonts.css.
     It was #4c5b75, which measures 2.95:1 and is the single most repeated
     value on this site: every 9-11px mono label, every rail number, every
     `／ SECTION` eyebrow. Secondary still reads as secondary at 5.1:1; at
     2.95:1 it reads as "the screenshot is blurry".
     The shell is not the only surface it labels. The footer sits on #171615
     and the chat's system lines on #0e121a, and on those the previous
     #6b7c99 measured 4.28:1 and 4.45:1 -- under the bar for text a reader
     reads. #6f80a0 clears 4.5:1 on the lightest of them (4.54:1 on #171615)
     while staying clearly below --muted, so the hierarchy holds. */
  --faint: #6f80a0;

  /* accents */
  --accent: #ffbb00;
  --accent-2: #ff9500;
  --accent-rgb: 255, 187, 0;
  --up: #22d3a5;
  --up-rgb: 34, 211, 165;
  --down: #ff5d73;
  --down-rgb: 255, 93, 115;
  --cyan: #38bdf8;
  --violet: #8b5cf6;

  /* shape & motion */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --maxw: 1320px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-2: cubic-bezier(0.65, 0.05, 0.36, 1);

  /* type */
  --display: 'Tektur', 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --ui: 'Rajdhani', 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow-1: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --shadow-2: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  --glow: 0 0 0 1px rgba(var(--accent-rgb), 0.16), 0 24px 70px -34px rgba(var(--accent-rgb), 0.65);
}

/* accent presets (the switcher flips data-accent on <html>) */
html[data-accent='cyan'] { --accent: #38bdf8; --accent-2: #22d3a5; --accent-rgb: 56, 189, 248; }
html[data-accent='violet'] { --accent: #a78bfa; --accent-2: #8b5cf6; --accent-rgb: 167, 139, 250; }
html[data-accent='ember'] { --accent: #ff7a45; --accent-2: #ff3d71; --accent-rgb: 255, 122, 69; }

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clip (not hidden) keeps position:sticky working while still killing any
     accidental horizontal overflow from off-canvas chrome */
  overflow-x: clip;
  /* every in-page anchor lands clear of the sticky header */
  scroll-padding-top: 96px;
  scrollbar-color: rgba(var(--accent-rgb), 0.5) rgba(255, 255, 255, 0.05);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(var(--accent-rgb), 0.32); color: #0a0d14; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.7), rgba(var(--accent-rgb), 0.25));
  border-radius: 20px;
  border: 2px solid var(--bg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 8px; left: 50%;
  transform: translate(-50%, -200%);
  z-index: 200;
  padding: 10px 18px;
  background: var(--accent);
  color: #0a0d14;
  font: 700 13px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  transition: transform 0.25s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.wrap {
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
}

/* animated gradient text used for headline accents */
.grad-text {
  background: linear-gradient(100deg, #fff 0%, var(--accent) 42%, var(--accent-2) 72%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}
@keyframes sheen { to { background-position: 220% 0; } }

/* ==========================================================================
   03. BACKGROUND LAYERS
   ========================================================================== */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(46% 38% at 18% 8%, rgba(var(--accent-rgb), 0.14), transparent 62%),
    radial-gradient(40% 34% at 88% 12%, rgba(56, 189, 248, 0.1), transparent 60%),
    radial-gradient(60% 50% at 50% 108%, rgba(139, 92, 246, 0.12), transparent 65%);
  filter: blur(10px);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

.bg__grid {
  position: absolute;
  inset: -40% -10% -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  transform: perspective(700px) rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent 42%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 78%, transparent 100%);
  animation: gridpan 26s linear infinite;
}
@keyframes gridpan { to { background-position: 0 680px, 680px 0; } }

.bg__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 68%, rgba(var(--accent-rgb), 0.7), transparent 60%),
    radial-gradient(1px 1px at 62% 18%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 54%, rgba(56, 189, 248, 0.55), transparent 62%),
    radial-gradient(1.1px 1.1px at 88% 82%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 22% 88%, rgba(255, 255, 255, 0.4), transparent 60%);
  background-size: 420px 420px;
  animation: starpan 90s linear infinite;
  opacity: 0.85;
}
@keyframes starpan { to { background-position: -420px 420px; } }

.bg__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.6;
}

.bg__vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.72) 100%);
}

.bg__beam {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 60%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.06), transparent);
  transform: rotate(14deg);
  animation: beam 14s ease-in-out infinite;
}
@keyframes beam {
  0%, 100% { transform: translateX(-10%) rotate(14deg); opacity: 0.5; }
  50% { transform: translateX(90%) rotate(14deg); opacity: 1; }
}

/* the page content sits above the background shell */
.layer { position: relative; z-index: 1; }

/* ==========================================================================
   04. BOOT SEQUENCE
   ========================================================================== */
.boot {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(var(--accent-rgb), 0.1), transparent 70%),
    #03050a;
  transition: opacity 0.55s var(--ease) 0.62s, visibility 0.55s var(--ease) 0.62s;
}
/* The screen does not fade away — it opens. The two curtain halves slide out
   of the seam first, the beam flashes in the gap, and only then does the
   overlay itself fade, so the desk underneath is revealed rather than exposed. */
.boot.is-done { opacity: 0; visibility: hidden; }
.boot__curtain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.boot__curtain i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: linear-gradient(90deg, #03050a 70%, rgba(3, 5, 10, 0.86));
  transition: transform 0.78s cubic-bezier(0.66, 0, 0.34, 1);
}
.boot__curtain i:first-child { left: 0; border-right: 1px solid rgba(var(--accent-rgb), 0.28); }
.boot__curtain i:last-child { right: 0; background: linear-gradient(270deg, #03050a 70%, rgba(3, 5, 10, 0.86)); border-left: 1px solid rgba(var(--accent-rgb), 0.28); }
.boot.is-done .boot__curtain i:first-child { transform: translateX(-100%); }
.boot.is-done .boot__curtain i:last-child { transform: translateX(100%); }
.boot__beam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 4;
  width: 2px;
  margin-left: -1px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent, var(--accent), #fff 50%, var(--accent), transparent);
}
.boot.is-done .boot__beam { animation: bootBeam 0.8s ease-out both; }
@keyframes bootBeam {
  0% { opacity: 0; transform: scaleY(0.2); }
  22% { opacity: 0.95; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1) scaleX(6); }
}

/* the gold dust that drifts up through the panel while it boots */
.boot__sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.boot__sparks i {
  position: absolute;
  bottom: -8px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.85);
  opacity: 0;
  animation: bootSpark linear infinite;
}
@keyframes bootSpark {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  12% { opacity: 0.9; }
  70% { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-52vh) scale(1.1); }
}

/* one slow scan bar, like a terminal redrawing its screen */
.boot__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.07) 48%, rgba(var(--accent-rgb), 0.16) 50%, rgba(var(--accent-rgb), 0.07) 52%, transparent);
  animation: bootScan 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes bootScan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* the four phases the boot line count is walking through */
.boot__phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.boot__phases li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.3);
  transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease);
}
.boot__phases li i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.35s, box-shadow 0.35s;
}
.boot__phases li b {
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--faint);
  transition: color 0.35s;
}
.boot__phases li.is-on {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(0, 0, 0, 0.2));
  transform: translateY(-2px);
}
.boot__phases li.is-on i { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.boot__phases li.is-on b { color: var(--ink-2); }
.boot__phases li.is-done { border-color: rgba(34, 211, 165, 0.35); }
.boot__phases li.is-done i { background: var(--up); box-shadow: 0 0 8px var(--up); }
.boot__phases li.is-done b { color: var(--muted); }

.boot__inner {
  width: min(520px, calc(100% - 48px));
  text-align: left;
}

.boot__mark {
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  color: var(--accent);
  filter: drop-shadow(0 0 22px rgba(var(--accent-rgb), 0.6));
  animation: markSpin 6s linear infinite;
}
@keyframes markSpin { to { transform: rotate(360deg); } }

.boot__title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.boot__log {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--muted);
  min-height: 7.6em;
}
.boot__log b { color: var(--up); font-weight: 700; }
.boot__log i { color: var(--accent); font-style: normal; }

.boot__bar {
  margin-top: 22px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.boot__fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.7);
  transition: width 0.4s linear;
}
.boot__pct {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--faint);
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
   05. CURSOR / TOAST / ACCENT SWITCHER
   ========================================================================== */
.cursor { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.cursor__ring,
.cursor__dot {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  will-change: transform;
}
.cursor__ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(var(--accent-rgb), 0.65);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), margin 0.25s var(--ease), opacity 0.2s;
  mix-blend-mode: screen;
}
.cursor__dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9);
}
.cursor__label {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%) scale(0.8);
  padding: 4px 10px;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0d14;
  background: var(--accent);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.2s, transform 0.3s var(--ease);
  white-space: nowrap;
}
.cursor.is-hot .cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: rgba(var(--accent-rgb), 0.9); }
.cursor.is-hot .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 145;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-width: 230px;
  background: var(--panel-2);
  border: 1px solid var(--line-gold);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
  font-size: 13.5px;
  transform: translateX(20px) scale(0.98);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.4s;
}
.toast.is-in { transform: none; opacity: 1; }
.toast b { color: var(--accent); font-family: var(--mono); font-size: 12px; }

.accent-switch {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 130;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
}
.accent-switch button {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.accent-switch button:hover { transform: scale(1.18); }
.accent-switch button.is-on { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65); }
.accent-switch [data-accent-btn='gold'] { background: linear-gradient(135deg, #ffdd44, #ff9500); }
.accent-switch [data-accent-btn='cyan'] { background: linear-gradient(135deg, #7dd3fc, #0ea5e9); }
.accent-switch [data-accent-btn='violet'] { background: linear-gradient(135deg, #c4b5fd, #7c3aed); }
.accent-switch [data-accent-btn='ember'] { background: linear-gradient(135deg, #ffb37a, #ff3d71); }

/* ==========================================================================
   06. HEADER + NAV
   ========================================================================== */
.head {
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: linear-gradient(180deg, rgba(4, 6, 12, 0.94), rgba(4, 6, 12, 0.72));
  border-bottom: 1px solid var(--line);
}

/* --- bar ------------------------------------------------------------- */
.head__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
  width: min(100% - 32px, var(--maxw));
  margin-inline: auto;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line-gold);
  background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.22), rgba(255, 255, 255, 0.02));
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.brand__mark svg,
.brand__mark img { width: 22px; height: 22px; display: block; object-fit: contain; }
.brand__text {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.05;
}
.brand__text em {
  display: block;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: var(--accent);
}
.brand__tag {
  display: none;
  padding: 3px 8px;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav__link {
  position: relative;
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border-radius: 999px;
  transition: color 0.25s, background 0.25s;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  width: 0; height: 1px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.35s var(--ease);
}
.nav__link:hover { color: #fff; background: var(--glass); }
.nav__link.is-on { color: #fff; }
.nav__link.is-on::after { width: 18px; }

.head__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 10px var(--up);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.75); } }
.chip--live { border-color: rgba(var(--up-rgb), 0.3); color: var(--up); }
.chip--live span { color: var(--up); }

.burger {
  display: none;
  width: 40px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--glass);
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 18px; height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 18px; }
.burger span:nth-child(3) { top: 23px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.userchip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 5px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  background: rgba(var(--accent-rgb), 0.08);
  position: relative;
  cursor: pointer;
}
.userchip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.userchip b {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--accent);
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.userchip__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  display: none;
  flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
}
.userchip__menu.is-open { display: flex; }
.userchip__menu button,
.userchip__menu a {
  padding: 9px 12px;
  border-radius: 9px;
  text-align: left;
  font-size: 13px;
  color: var(--ink-2);
}
.userchip__menu button:hover,
.userchip__menu a:hover { background: var(--glass); color: #fff; }
.userchip__menu [data-logout] { color: var(--down); }

.head__prog { height: 2px; background: rgba(255, 255, 255, 0.05); }
.head__prog i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.8);
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 84px 22px 40px;
  background: linear-gradient(180deg, rgba(4, 6, 12, 0.99), rgba(4, 6, 12, 0.94));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateY(-102%);
  transition: transform 0.55s var(--ease);
  overflow-y: auto;
}
.drawer.is-open { transform: none; }
/* The closed drawer is parked at translateY(-102%), NOT at display:none, so
   that it can slide. That also left all eleven of its links in the tab order:
   a keyboard user could tab into a menu sitting 102% above the viewport, and a
   screen reader read a menu the page had already marked aria-hidden.
   `visibility: hidden` takes the subtree out of both, and the delayed
   transition keeps the open and close animations exactly as they were. */
.drawer {
  visibility: hidden;
  transition: transform 0.55s var(--ease), visibility 0s linear 0.55s;
}
.drawer.is-open {
  visibility: visible;
  transition: transform 0.55s var(--ease), visibility 0s;
}
/* and if anything ever does set the attribute, believe it */
.drawer[hidden] { display: none; }
.drawer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.04em;
}
.drawer a span { font: 600 11px/1 var(--mono); color: var(--faint); letter-spacing: 0.16em; }
.drawer .btn { margin-top: 20px; justify-content: center; }

/* ==========================================================================
   07. BUTTONS & CHIPS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, background 0.3s, border-color 0.3s, color 0.3s;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--gold {
  color: #0a0d14;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px -12px rgba(var(--accent-rgb), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn--gold:hover { box-shadow: 0 16px 40px -14px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn--gold::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: sheenSweep 4.6s ease-in-out infinite;
}
@keyframes sheenSweep {
  0%, 55% { left: -60%; }
  85%, 100% { left: 130%; }
}

.btn--line {
  color: var(--ink);
  border-color: var(--line-2);
  background: var(--glass);
}
.btn--line:hover { border-color: var(--line-gold); color: #fff; background: rgba(var(--accent-rgb), 0.08); }

.btn--ghost { color: var(--ink-2); border-color: var(--line); }
.btn--ghost:hover { color: #fff; border-color: var(--line-gold); background: var(--glass); }

.btn--lg { height: 52px; padding: 0 26px; font-size: 14px; border-radius: 14px; }
.btn--sm { height: 34px; padding: 0 14px; font-size: 11.5px; }
.btn--block { width: 100%; }

.btn--live b {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--up-rgb), 0.16);
  color: var(--up);
}

.pill {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all 0.25s var(--ease);
}
.pill:hover { color: #fff; border-color: var(--line-2); }
.pill.is-on {
  color: #0a0d14;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 8px 22px -12px rgba(var(--accent-rgb), 0.9);
}

/* ==========================================================================
   08. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: 74px 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 44px;
  align-items: center;
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  background: rgba(var(--accent-rgb), 0.07);
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

.hero__title {
  margin: 22px 0 20px;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.hero__title span { display: block; }
.hero__title .thin {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.2vw, 0.95rem);
  letter-spacing: 0.3em;
  color: var(--muted);
  margin-bottom: 16px;
  font-weight: 500;
}
.hero__lead {
  max-width: 52ch;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  color: var(--ink-2);
}
.hero__lead b { color: var(--ink); font-weight: 700; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 30px; }

.hero__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.hero__kpis li { display: flex; flex-direction: column; gap: 3px; }
.hero__kpis b {
  font-family: var(--mono);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.hero__kpis b i { font-style: normal; color: var(--accent); }
.hero__kpis span {
  font: 600 9.5px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag {
  padding: 6px 11px;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   09. TERMINAL COMPONENT
   ========================================================================== */
.hero__stage { position: relative; }

.term {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(11, 17, 29, 0.95), rgba(6, 9, 16, 0.98));
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(var(--accent-rgb), 0.06), 0 0 90px -50px rgba(var(--accent-rgb), 0.8);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.term::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 90% at var(--mx, 20%) var(--my, 0%), rgba(var(--accent-rgb), 0.1), transparent 60%);
  opacity: 0.9;
  transition: opacity 0.3s;
}
.term::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}

.term__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
}
.term__dots { display: flex; gap: 5px; }
.term__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.term__dots i:nth-child(1) { background: rgba(255, 93, 115, 0.75); }
.term__dots i:nth-child(2) { background: rgba(var(--accent-rgb), 0.8); }
.term__dots i:nth-child(3) { background: rgba(var(--up-rgb), 0.8); }

.term__id {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--faint);
}
.term__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.term__tabs::-webkit-scrollbar { display: none; }
.term__tab {
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: 700 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: all 0.22s var(--ease);
  white-space: nowrap;
}
.term__tab:hover { color: #fff; background: var(--glass); }
.term__tab.is-on {
  color: var(--accent);
  border-color: var(--line-gold);
  background: rgba(var(--accent-rgb), 0.1);
}
.term__tf { display: flex; gap: 3px; margin-left: auto; padding: 3px; border: 1px solid var(--line); border-radius: 9px; }
.tf {
  padding: 5px 9px;
  border-radius: 7px;
  font: 700 10.5px/1 var(--mono);
  color: var(--muted);
  transition: all 0.2s;
}
.tf:hover { color: #fff; }
.tf.is-on { background: var(--accent); color: #0a0d14; }

.term__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 208px;
  gap: 0;
}

.term__main { padding: 14px 14px 8px; min-width: 0; }

.quote { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.quote__sym { font: 700 15px/1 var(--mono); letter-spacing: 0.06em; }
.quote__sym small { color: var(--muted); font-weight: 500; margin-left: 6px; letter-spacing: 0.08em; }
.quote__px {
  font: 700 clamp(1.4rem, 2.4vw, 2rem) / 1 var(--mono);
  letter-spacing: -0.02em;
  transition: color 0.25s;
}
.quote__chg { font: 700 13px/1 var(--mono); }
.quote__meta {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
}
.quote__meta b { color: var(--ink-2); font-weight: 700; }

.chartbox { position: relative; height: 262px; }
.chartbox canvas { width: 100%; height: 100%; cursor: crosshair; }

.term__legend {
  display: flex;
  gap: 16px;
  padding: 6px 2px 12px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.term__legend i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }
.term__legend .lg-ema20 i { background: var(--accent); }
.term__legend .lg-ema50 i { background: var(--violet); }
.term__legend .lg-pnl { margin-left: auto; }
.term__legend .lg-pnl b { color: var(--up); }

/* order book ------------------------------------------------------------ */
.term__side {
  border-left: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
}
.book { padding: 11px 12px 6px; }
.book__head {
  display: flex;
  justify-content: space-between;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.book__rows { display: flex; flex-direction: column; gap: 1px; }
.brow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 3px 5px;
  font: 600 11px/1.35 var(--mono);
  border-radius: 4px;
  overflow: hidden;
}
.brow__fill {
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  opacity: 0.16;
  transition: width 0.45s var(--ease);
}
.brow--ask .brow__fill { background: var(--down); }
.brow--bid .brow__fill { background: var(--up); }
.brow span:first-child { color: var(--ink-2); position: relative; }
.brow span:last-child { text-align: right; color: var(--faint); position: relative; }
.brow--ask span:first-child { color: var(--down); }
.brow--bid span:first-child { color: var(--up); }

.book__mid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 7px 0;
  padding: 7px 6px;
  border-block: 1px solid var(--line);
  font: 700 12.5px/1 var(--mono);
}
.book__mid em { font: 600 9.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--faint); font-style: normal; }
.book__spread { color: var(--muted); font-weight: 600; }

/* time & sales ---------------------------------------------------------- */
.sales { border-top: 1px solid var(--line); padding: 10px 12px; flex: 1; min-height: 0; }
.sales__head {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 7px;
}
.sales__rows { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.srow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 7px;
  font: 600 10.5px/1.4 var(--mono);
  animation: rowIn 0.5s var(--ease) both;
}
@keyframes rowIn { from { opacity: 0; transform: translateX(10px); } }
.srow span:first-child { color: var(--faint); }
.srow span:last-child { color: var(--muted); }
.srow--buy span:nth-child(2) { color: var(--up); }
.srow--sell span:nth-child(2) { color: var(--down); }

/* footer strip ---------------------------------------------------------- */
.term__foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
}
.term__stat { display: flex; flex-direction: column; gap: 2px; }
.term__stat span { font: 600 9px/1 var(--mono); letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.term__stat b { font: 700 12px/1 var(--mono); color: var(--ink-2); }
.term__stat--pnl { margin-left: auto; text-align: right; }
.term__stat--pnl b { color: var(--up); }

/* ==========================================================================
   10. FLOATING HUD CARDS
   ========================================================================== */
.floater {
  position: absolute;
  z-index: 3;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(16, 22, 36, 0.94), rgba(9, 13, 22, 0.92));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
  animation: floaty 8s ease-in-out infinite;
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
}
@keyframes floaty {
  50% { transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px - 9px), 0); }
}
.floater--a { top: -22px; left: -30px; }
.floater--b { bottom: -26px; right: -18px; animation-delay: 1.6s; }
.floater--c { bottom: 40%; left: -46px; animation-delay: 3.1s; }
.floater__label {
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--faint);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.floater__value { font: 700 17px/1 var(--mono); }
.floater__sub { font: 600 10px/1.4 var(--mono); color: var(--muted); margin-top: 4px; }
.floater__bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 7px; }
.floater__bars i {
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), 0.2));
  animation: eq 1.6s ease-in-out infinite;
}
.floater__bars i:nth-child(1) { height: 40%; animation-delay: 0s; }
.floater__bars i:nth-child(2) { height: 70%; animation-delay: 0.13s; }
.floater__bars i:nth-child(3) { height: 52%; animation-delay: 0.26s; }
.floater__bars i:nth-child(4) { height: 88%; animation-delay: 0.39s; }
.floater__bars i:nth-child(5) { height: 64%; animation-delay: 0.52s; }
.floater__bars i:nth-child(6) { height: 96%; animation-delay: 0.65s; }
@keyframes eq { 50% { transform: scaleY(0.45); } }

/* ==========================================================================
   11. SECTION SHELL
   ========================================================================== */
.sec {
  position: relative;
  padding: 82px 0 10px;
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
}
.sec--tight { padding-top: 56px; }

.sec__head { max-width: 74ch; margin-bottom: 34px; }
.sec__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.sec__kicker i { width: 22px; height: 1px; background: var(--accent); display: inline-block; }
.sec__kicker em {
  font-style: normal;
  color: var(--faint);
  letter-spacing: 0.1em;
}
.sec__title {
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  margin-bottom: 14px;
}
.sec__title u { text-decoration: none; color: var(--accent); }
.sec__sub { color: var(--muted); font-size: 1.02rem; max-width: 62ch; }
.sec__sub b { color: var(--ink-2); }

.divider {
  position: relative;
  height: 1px;
  margin: 64px auto 0;
  width: min(100% - 40px, var(--maxw));
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, rgba(var(--accent-rgb), 0.5) 50%, var(--line-2) 80%, transparent);
}
.divider::after {
  content: '◆';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  color: var(--accent);
  background: var(--bg);
  padding: 0 8px;
}

/* ==========================================================================
   12. PANELS (shared card)
   ========================================================================== */
.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px;
  overflow: hidden;
  transition: border-color 0.35s, transform 0.4s var(--ease), box-shadow 0.4s;
}
.panel:hover {
  border-color: var(--line-gold);
  transform: translateY(-3px);
  box-shadow: 0 30px 70px -40px rgba(var(--accent-rgb), 0.7);
}
.panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.panel__title {
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.panel__hint { margin-left: auto; font: 600 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; }

/* ==========================================================================
   13. SIGNAL ENGINE
   ========================================================================== */
.sigwrap {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.98fr);
  gap: 20px;
  /* stretch, not start: the panel column is the same height as the call feed
     next to it and its last panel absorbs the slack, so a long feed never
     leaves an empty half-column */
  align-items: stretch;
}

.feed { display: flex; flex-direction: column; gap: 12px; }

.sig {
  display: grid;
  /* the last column carries the pip figure, so it is sized for a five-figure
     number instead of a two-character R multiple */
  grid-template-columns: 62px minmax(0, 1.2fr) minmax(0, 1.4fr) 150px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006));
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s var(--ease), opacity 0.4s;
}
.sig::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--up);
}
.sig--short::before { background: var(--down); }
.sig:hover { border-color: var(--line-2); transform: translateX(4px); }
.sig.is-new { animation: sigIn 0.7s var(--ease) both; }
@keyframes sigIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.99); }
}

.sig__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sig__dir {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.1em;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(var(--up-rgb), 0.14);
  color: var(--up);
}
.sig--short .sig__dir { background: rgba(var(--down-rgb), 0.14); color: var(--down); }
.sig__tf { font: 600 9.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--faint); }

.sig__id { min-width: 0; }
.sig__id b { display: block; font: 700 14px/1.2 var(--mono); }
.sig__id span { font: 600 10.5px/1.4 var(--mono); color: var(--faint); letter-spacing: 0.06em; }
.sig__id em {
  display: inline-block;
  margin-top: 5px;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--cyan);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 7px;
  border-radius: 6px;
  font-style: normal;
}

.sig__levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.lvl { display: flex; flex-direction: column; gap: 2px; }
.lvl span { font: 600 9px/1 var(--mono); letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; }
.lvl b { font: 700 12.5px/1 var(--mono); }
.lvl i { font: 700 10.5px/1.2 var(--mono); font-style: normal; letter-spacing: 0.02em; color: var(--faint); }
.lvl--tp b { color: var(--up); }
.lvl--tp i { color: rgba(var(--up-rgb), 0.85); }
.lvl--sl b { color: var(--down); }
.lvl--sl i { color: rgba(var(--down-rgb), 0.85); }

.sig__meta { text-align: right; min-width: 0; }
.sig__meta b { display: block; font: 700 16px/1 var(--mono); color: var(--accent); }
.sig__meta span { font: 600 9.5px/1.35 var(--mono); letter-spacing: 0.08em; color: var(--faint); }
/* every call is quoted in pips, and the pip count is the loudest number on the
   card: it is the unit the desk sells its levels in */
.sig__meta .sig__pips {
  font: 800 21px/1 var(--mono);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sig__bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.sig__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--up)); }
.sig--short .sig__bar i { background: linear-gradient(90deg, var(--accent), var(--down)); }

.sigside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* panels keep their own height: as flex items they would otherwise be squeezed
   by the column, and a squeezed panel clips its own content (the scorecard's
   last stats row used to disappear under an `overflow: hidden`) */
.sigside > * { flex: 0 0 auto; }

/* The ring canvas is positioned, not a grid item: as a grid item its
   `height: 100%` resolves against an auto-sized row — a circular dependency the
   browser drops back to `auto` for, so the canvas fell back to its intrinsic
   2:1 ratio, grew to twice its box and pushed the stat rows out of the panel.
   Absolute positioning gives it the box' definite height instead. */
.gaugewrap { position: relative; height: 190px; }
.gaugewrap canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.kv { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.kv div { display: flex; justify-content: space-between; gap: 10px; font: 600 12px/1.3 var(--mono); }
.kv span { color: var(--muted); letter-spacing: 0.06em; }
.kv b { color: var(--ink); }

.bars { display: flex; flex-direction: column; gap: 11px; }
.bars__row { display: flex; flex-direction: column; gap: 5px; }
.bars__top { display: flex; justify-content: space-between; font: 600 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.05em; }
.bars__top b { color: var(--ink-2); }
.bars__track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bars__fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--up));
  transition: width 1.1s var(--ease);
}

/* ==========================================================================
   14. PERFORMANCE PANELS
   ========================================================================== */
.grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.kpi {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008));
  transition: border-color 0.3s, transform 0.35s var(--ease);
}
.kpi:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.kpi > span { font: 600 9.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; }
.kpi > b {
  display: block;
  margin: 10px 0 6px;
  font: 700 clamp(1.3rem, 2.2vw, 1.85rem) / 1 var(--mono);
  letter-spacing: -0.02em;
}
.kpi > em { font-style: normal; font: 600 11px/1 var(--mono); color: var(--up); }
.kpi > em.neg { color: var(--down); }
/* a <b> inside the caption is part of the sentence, not a second headline */
.kpi > em b { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: var(--ink); }

.grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.chart-h1 { height: 240px; }
.chart-h2 { height: 190px; }
.chart-h3 { height: 170px; }
.chartbox2 { position: relative; }
.chartbox2 canvas { width: 100%; height: 100%; }

.legend { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.legend div { display: flex; align-items: center; gap: 9px; font: 600 11.5px/1 var(--mono); color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; }
.legend b { margin-left: auto; color: var(--ink-2); }

.statlist { display: flex; flex-direction: column; gap: 1px; }
.statlist div {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  font: 600 12px/1 var(--mono);
}
.statlist div:last-child { border-bottom: 0; }
.statlist span { color: var(--muted); }
.statlist b { color: var(--ink); }

/* the months, written out under the monthly chart: one cell per month so the
   return is readable as a per-month series and not only as bar heights */
.monthgrid {
  display: grid;
  /* auto-fit, not a fixed count: the panel is a third of the row on desktop
     and full width once the grid stacks, and a per-month cell must never be
     narrower than the six characters it has to print */
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
  margin-top: 14px;
}
.monthcell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.monthcell span { font: 600 9.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; }
.monthcell b { font: 700 13px/1 var(--mono); }
.monthcell b.up { color: var(--up); }
.monthcell b.down { color: var(--down); }
@media (max-width: 620px) {
  .monthgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   15. CAPABILITY BENTO
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.bento__card {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008));
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.35s, box-shadow 0.4s;
}
.bento__card:hover {
  transform: translateY(-5px);
  border-color: var(--line-gold);
  box-shadow: 0 34px 70px -42px rgba(var(--accent-rgb), 0.85);
}
.bento__card::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
}
.bento__card:hover::after { opacity: 1; }
.bento__card--wide { grid-column: span 2; }
.bento__icon {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 11px;
  border: 1px solid var(--line-gold);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 17px;
}
.bento__card h3 { font-size: 1.05rem; margin-bottom: 9px; letter-spacing: 0.01em; }
.bento__card p { font-size: 0.93rem; color: var(--muted); line-height: 1.62; }
.bento__tag {
  display: inline-block;
  margin-top: 14px;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}

/* ==========================================================================
   16. FUNDING TIERS / MEMBERSHIP PLANS
   ========================================================================== */
.tiers,
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tier,
.plan {
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.008));
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.35s, box-shadow 0.4s;
}
.tier:hover,
.plan:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: 0 40px 80px -45px rgba(var(--accent-rgb), 0.8); }
.tier--hot,
.plan--hot {
  border-color: var(--line-gold);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent 70%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  box-shadow: var(--glow);
}
.plan--hot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ang, 0deg), rgba(var(--accent-rgb), 0.9), transparent 30%, rgba(var(--accent-rgb), 0.9) 60%, transparent 90%, rgba(var(--accent-rgb), 0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: spinAng 7s linear infinite;
}
@keyframes spinAng { to { --ang: 360deg; } }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.tier__badge,
.plan__badge {
  /* z-index kept explicit: css/terminal-anim.css lifts card content above the
     hover spotlight, and the pill has to stay in front of the card's own
     gradient while it keeps its place in the corner */
  position: absolute;
  z-index: 1;
  top: 20px; right: 20px;
  width: max-content;
  padding: 5px 11px;
  border-radius: 999px;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  color: #0a0d14;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.tier__name,
.plan__name {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.tier__size,
.plan__price {
  font-family: var(--mono);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tier__size small,
.plan__price small { font-size: 0.42em; color: var(--muted); letter-spacing: 0; }
.plan__note { font: 600 11px/1.4 var(--mono); color: var(--faint); margin-top: 8px; letter-spacing: 0.05em; }
.tier__split {
  display: flex;
  gap: 8px;
  margin: 18px 0 6px;
}
.tier__split div {
  flex: 1;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.25);
}
.tier__split span { display: block; font: 600 9px/1 var(--mono); letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; }
.tier__split b { display: block; margin-top: 5px; font: 700 14px/1 var(--mono); }

.ticklist { display: flex; flex-direction: column; gap: 11px; margin: 20px 0 24px; }
.ticklist li {
  display: flex;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.ticklist li::before {
  content: '▸';
  color: var(--accent);
  font-size: 0.9em;
  line-height: 1.6;
  flex-shrink: 0;
}
.ticklist li b { color: var(--ink); }

/* ==========================================================================
   17. MEMBERS / FAQ / AFFILIATE / CTA
   ========================================================================== */
.says { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.say {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008));
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.4s var(--ease), border-color 0.35s;
}
.say:hover { transform: translateY(-5px); border-color: var(--line-gold); }
.say blockquote { margin: 0; font-size: 1rem; color: var(--ink-2); line-height: 1.65; }
.say__who { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.say__ava {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--mono);
  color: #05070c;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
/* The three quotes wear a photograph now, from the same pool the board draws
   from — a tile of the same size and radius, cropped to it, with the gradient
   left underneath as the colour a refused picture falls back onto. */
.say__ava--img {
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, #1a2130, #0a0e14);
}
.say__who b { display: block; font: 700 12.5px/1.3 var(--mono); }
/* The `:not()` pair here is load-bearing, and both halves were found the same
   way. The rule is meant for the role line under the name, but at (0,2,1) it
   outranks every single-class tile inside `.say__who`:
     · `.say__ava` (0,1,0) — the initials were painted --faint at 10.5px/600
       instead of the near-black 12px/700 they were written as, which flattened
       them onto the gold gradient at 2.18:1
     · `.say__pnl` (0,1,0) — the profit pill was painted muted grey at 10.5px
       instead of green 13px/700 on its own green tint, so the one number in the
       card a reader looks for first was the one the card hid
   Excluded rather than raised, because the rule is right and its reach was not. */
.say__who span:not(.say__ava):not(.say__pnl) {
  font: 600 10.5px/1.3 var(--mono);
  color: var(--faint);
  letter-spacing: 0.06em;
}
.say__pnl {
  margin-left: auto;
  font: 700 13px/1 var(--mono);
  color: var(--up);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(var(--up-rgb), 0.12);
}

.faq { display: flex; flex-direction: column; gap: 10px; max-width: 940px; }
/* the two-column variant is what the desk actually ships, and it fills the
   column instead of stopping at 940px and leaving the right side empty */
.faq--grid { max-width: none; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006));
  overflow: hidden;
  transition: border-color 0.3s;
}
.faq__item.is-open { border-color: var(--line-gold); }
.faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.faq__q i {
  margin-left: auto;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 15px;
  color: var(--accent);
  transition: transform 0.35s var(--ease), background 0.3s;
}
.faq__item.is-open .faq__q i { transform: rotate(135deg); background: rgba(var(--accent-rgb), 0.12); }
.faq__q em {
  font: 700 10.5px/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 20px 20px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.72;
  max-width: 82ch;
}

/* partner desk — one grid, three cards ------------------------------------- */
.pgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.006));
  overflow: hidden;
}
.pcard--prem {
  border-color: var(--line-gold);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(var(--accent-rgb), 0.12), transparent 65%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.008));
}
.pcard--stq {
  border-color: rgba(124, 196, 255, 0.26);
  background:
    radial-gradient(72% 58% at 0% 0%, rgba(90, 170, 255, 0.13), transparent 62%),
    linear-gradient(190deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.006));
}
.pcard h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 1.3rem;
  margin-bottom: 9px;
}
.pcard > p { color: var(--muted); font-size: 0.93rem; }

.pcard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pcard__num {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--faint);
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.32);
}
.pcard__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-2);
}
.pcard__tag i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: bootBlink 1.8s ease-in-out infinite;
}
.pcard__tag--stq i { background: #7cc4ff; }
.pcard__tag--app i { background: #a78bfa; }
.pcard__ver {
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--faint);
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.plist { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 0; }
.plist li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  font-size: 0.9rem;
  color: var(--ink-2);
}
/* The row's own marker, and only the marker: the list now also carries a bold
   label inside the sentence (see .plist__label), and a bare `.plist b` rule
   would have caught that one too — 20px wide, 10px mono, in the accent colour,
   which is a label nobody can read. */
.plist > li > b {
  flex: none;
  width: 20px;
  text-align: center;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--accent);
}
.plist--tight li { font-size: 0.87rem; padding: 9px 11px; }
/* the label a line opens with: its own line, in the ink colour, so the three
   jobs on the app card read as a list of three and not as one paragraph */
.plist--tight .plist__label {
  display: block;
  margin-bottom: 3px;
  font: 700 0.93rem/1.35 var(--ui);
  letter-spacing: 0.01em;
  color: var(--ink);
}
.pcard--stq .plist > li > b { color: #7cc4ff; }
.payouts { display: flex; flex-direction: column; gap: 11px; margin: 20px 0 22px; }
.payouts div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.26);
}
.payouts em {
  font-style: normal;
  font-size: 18px;
  width: 30px;
  text-align: center;
}
.payouts span { font: 600 11px/1.3 var(--mono); color: var(--muted); letter-spacing: 0.05em; }
.payouts b { margin-left: auto; font: 700 15px/1 var(--mono); color: var(--accent); }
.payouts-link { color: var(--accent); border-bottom: 1px dashed rgba(var(--accent-rgb), 0.5); }

.appcard__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 20px;
}
.appcard__meta i {
  font-style: normal;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.1em;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
}
.pcard--prem .partner__acts { margin-top: auto; }
.pcard--prem > .btn:last-child { margin-top: auto; }

/* final CTA -------------------------------------------------------------- */
.cta {
  position: relative;
  margin: 80px auto 0;
  width: min(100% - 40px, var(--maxw));
  padding: clamp(34px, 5vw, 62px);
  border: 1px solid var(--line-gold);
  border-radius: 34px;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(var(--accent-rgb), 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.005));
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(60% 70% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.cta h2 { position: relative; font-size: clamp(1.9rem, 4.4vw, 3.4rem); margin-bottom: 16px; }
.cta p { position: relative; color: var(--ink-2); max-width: 60ch; margin: 0 auto 26px; }
.cta__row { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta__note { position: relative; margin-top: 18px; font: 600 11px/1.5 var(--mono); color: var(--faint); letter-spacing: 0.06em; }

/* ==========================================================================
   18. FOOTER · MOTION · RESPONSIVE
   ========================================================================== */
.foot {
  margin-top: 80px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75));
}
.foot__inner {
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
  padding: 46px 0 26px;
  display: grid;
  /* brand + four link columns (desk, circle, access, legal). The legal column
     was added when the terms section landed, so the template is written to
     keep working with either four or five children. */
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
  gap: 26px 30px;
}
.foot__brand p { color: var(--muted); font-size: 0.92rem; max-width: 40ch; margin-top: 14px; }
/* the footer columns are h3: the heading before them is an h2, and jumping
   to an h4 put a hole in the outline for anyone navigating by headings.
   h4 stays in the selector so a page that still ships one is not unstyled. */
.foot__col h3,
.foot__col h4 {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.foot__col a,
.foot__col span {
  display: block;
  padding: 7px 0;
  font-size: 0.93rem;
  color: var(--muted);
  transition: color 0.25s, transform 0.25s;
}
.foot__col a:hover { color: #fff; transform: translateX(4px); }
.foot__bar {
  border-top: 1px solid var(--line);
}
.foot__barbox {
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
  padding: 18px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  font: 600 11px/1.5 var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
}
.foot__legal {
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
  padding-bottom: 34px;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--faint);
  opacity: 0.85;
}

/* reveal-on-scroll ------------------------------------------------------- */
.rv {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), filter 0.85s var(--ease);
}
.rv.is-in { opacity: 1; transform: none; filter: none; }

/* respect a user who does not want movement ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; filter: none; }
  .cursor { display: none; }
}

body.is-lite .bg__grid,
body.is-lite .bg__stars,
body.is-lite .bg__scan { display: none; }

/* ------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .nav { display: none; }
  .brand__tag { display: inline-block; }
  .burger { display: block; }
  .hero { grid-template-columns: 1fr; gap: 56px; }
  .hero__stage { max-width: 100%; }
  .floater--c { display: none; }
  .sig { grid-template-columns: 58px minmax(0, 1.2fr) minmax(0, 1.3fr) 138px; }
  /* two partner cards side by side become a stack before they get cramped */
  .pgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1040px) {
  .sigwrap { grid-template-columns: 1fr; }
  .sigside { position: static; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2,
  .grid3 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers,
  .plans { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .pcard--prem { grid-column: auto; }
  .says { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .head__bar { height: 58px; gap: 10px; }
  .chip--live span,
  .brand__text em { display: none; }
  .head__actions .btn--ghost { display: none; }
  .hero { padding-top: 44px; }
  .hero__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .term__body { grid-template-columns: 1fr; }
  .term__side {
    border-left: 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .sales { border-top: 0; border-left: 1px solid var(--line); }
  .chartbox { height: 220px; }
  .floater--a { top: -14px; left: 6px; }
  .floater--b { bottom: -14px; right: 6px; }
  .sig { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .sig__side { flex-direction: row; align-items: center; gap: 8px; }
  .sig__meta { text-align: right; }
  .sig__levels { grid-column: 1 / -1; }
  .sec { padding-top: 62px; }
  .sec__head { margin-bottom: 24px; }
  .accent-switch { left: 12px; bottom: 12px; }
  .toasts { right: 12px; left: 12px; bottom: 68px; }
  .toast { width: 100%; }
}

@media (max-width: 560px) {
  .wrap,
  .sec,
  .divider,
  .cta,
  .foot__inner,
  .foot__barbox,
  .foot__legal { width: min(100% - 26px, var(--maxw)); }
  .hero { width: min(100% - 26px, var(--maxw)); }
  .grid4 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento__card--wide { grid-column: span 1; }
  .foot__inner { grid-template-columns: 1fr; gap: 24px; }
  .term__id,
  .lang { display: none; }
  .quote__meta { width: 100%; margin-left: 0; gap: 10px; }
  .chartbox { height: 190px; }
  .book { padding: 10px 10px 4px; }
  .brow { font-size: 10px; }
  .btn--lg { height: 48px; width: 100%; }
  .hero__cta { flex-direction: column; }
  .sig { padding: 12px 14px; }
}

/* keep the sticky rail from colliding with the sticky header on tall UIs */
@supports (height: 100dvh) {
  .drawer { max-height: 100dvh; }
}

/* ==========================================================================
   19. COMMAND PALETTE
   ========================================================================== */
.pal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: min(16vh, 150px) 18px 40px;
  background: rgba(3, 5, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: palIn 0.25s var(--ease) both;
}
@keyframes palIn { from { opacity: 0; } }
.pal[hidden] { display: none; }

.pal__box {
  width: min(620px, 100%);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(13, 19, 32, 0.98), rgba(7, 11, 19, 0.99));
  box-shadow: var(--shadow-2), 0 0 90px -40px rgba(var(--accent-rgb), 0.8);
  overflow: hidden;
  animation: palBox 0.35s var(--ease) both;
}
@keyframes palBox { from { transform: translateY(-14px) scale(0.985); opacity: 0; } }

.pal__top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.pal__top span {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.pal__top input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: var(--ink);
  font: 500 15px/1.4 var(--mono);
}
.pal__top input::placeholder { color: var(--faint); }
.pal__top button {
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
}
.pal__top button:hover { color: #fff; border-color: var(--line-gold); }

.pal__list {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pal__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 11px;
  font: 600 13.5px/1.3 var(--mono);
  color: var(--ink-2);
}
.pal__item span {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.pal__item:hover,
.pal__item.is-on {
  background: rgba(var(--accent-rgb), 0.12);
  color: #fff;
}
.pal__item.is-on span { color: var(--accent); }
.pal__empty { padding: 18px 14px; color: var(--muted); font: 600 12px/1.5 var(--mono); }
.pal__foot {
  display: flex;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--faint);
}
.pal__foot b { color: var(--muted); }

/* ==========================================================================
   19. V11 — BOOT · DRAWER · STQUANT · LOCKED SIGNALS · GALLERY · TIERS
   ------------------------------------------------------------------------
   Added with the STQuant rename. Everything here is additive: the design
   tokens, type scale and spacing rhythm are the ones already in this sheet.
   ========================================================================== */

/* ---- 19a. boot screen --------------------------------------------------- */
.boot { overflow: hidden; }

.boot__aurora {
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.55;
}
.boot__aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.boot__aurora i:nth-child(1) {
  width: 46vw; height: 46vw; left: 4%; top: 6%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.55), transparent 65%);
  animation: bootDrift 17s ease-in-out infinite;
}
.boot__aurora i:nth-child(2) {
  width: 38vw; height: 38vw; right: 2%; top: 22%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.45), transparent 65%);
  animation: bootDrift 23s ease-in-out infinite reverse;
}
.boot__aurora i:nth-child(3) {
  width: 40vw; height: 40vw; left: 30%; bottom: -6%;
  background: radial-gradient(circle, rgba(34, 211, 165, 0.34), transparent 65%);
  animation: bootDrift 29s ease-in-out infinite;
}
@keyframes bootDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(5%, -7%, 0) scale(1.14); }
}

.boot__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 78%);
}

.boot__inner { position: relative; z-index: 2; }

.boot__brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.boot__mark {
  position: relative;
  width: 74px;
  height: 74px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  animation: none;
  filter: none;
  color: inherit;
  margin-bottom: 0;
}
.boot__mark img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 34px -6px rgba(var(--accent-rgb), 0.85);
  animation: bootPulse 3.4s ease-in-out infinite;
}
@keyframes bootPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.boot__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: bootSpin 5s linear infinite;
}
.boot__ring--2 {
  inset: -9px;
  border-color: rgba(255, 255, 255, 0.12);
  border-left-color: rgba(var(--accent-rgb), 0.75);
  animation-duration: 8s;
  animation-direction: reverse;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
.boot__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 76%, rgba(var(--accent-rgb), 0.5) 92%, transparent 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  animation: bootSpin 2.6s linear infinite;
}

.boot__brandtxt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.boot__brandtxt b {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, #fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.boot__brandtxt em {
  font: 600 10.5px/1.4 var(--mono);
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.boot__log {
  min-height: 9.4em;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.boot__bar { height: 5px; }
.boot__fill { position: relative; }
.boot__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: bootShine 1.5s linear infinite;
}
@keyframes bootShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.boot__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.boot__strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.3);
}
.boot__strip i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 8px var(--up);
  animation: bootBlink 1.8s ease-in-out infinite;
}
.boot__strip span:nth-child(2) i { animation-delay: 0.3s; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.boot__strip span:nth-child(3) i { animation-delay: 0.6s; }
.boot__strip span:nth-child(4) i { animation-delay: 0.9s; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
@keyframes bootBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.boot__skip {
  margin-top: 16px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

/* ---- 19b. hero artwork -------------------------------------------------- */
.hero__art {
  position: absolute;
  inset: -6% -8% auto;
  height: 82%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.17;
  mix-blend-mode: screen;
  filter: blur(1.2px) saturate(1.25) contrast(1.05);
  mask-image: radial-gradient(90% 76% at 50% 24%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(90% 76% at 50% 24%, #000 12%, transparent 76%);
}
.hero__art img {
  position: absolute;
  display: block;
  width: min(1080px, 58%);
  border-radius: 18px;
}
.hero__art img:first-child { left: 2%; top: 4%; opacity: 0.95; }
.hero__art img:last-child { right: 1%; top: 42%; width: min(860px, 46%); opacity: 0.8; }
.hero__copy,
.hero__stage { position: relative; z-index: 1; }

/* ---- 19c. STQuant section ---------------------------------------------- */
.stq__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}
.stq__chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.07);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.stq__chips i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
}

.ai__shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #05080f;
  transition: border-color 0.35s, transform 0.5s var(--ease), box-shadow 0.5s;
}
.ai__shot:hover { border-color: var(--line-gold); transform: translateY(-4px); box-shadow: var(--glow); }
.ai__shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 0.8s var(--ease), opacity 0.5s;
}
.ai__shot:hover img { transform: scale(1.05); opacity: 1; }
.ai__shot-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 40%, rgba(4, 6, 12, 0.88)),
    radial-gradient(60% 50% at 80% 0%, rgba(var(--accent-rgb), 0.22), transparent 70%);
}
.ai__shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai__shot figcaption b { font-family: var(--display); font-size: 15px; letter-spacing: 0.01em; }
.ai__shot figcaption span { font: 600 10.5px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.06em; }

/* ---- 19d. gallery ------------------------------------------------------ */
.gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.gal__item {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #05080f;
  transition: border-color 0.35s, transform 0.45s var(--ease), box-shadow 0.45s;
}
.gal__item--wide { grid-column: span 2; }
.gal__item:hover { border-color: var(--line-gold); transform: translateY(-5px); box-shadow: var(--glow); }
.gal__item > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  opacity: 0.86;
  transition: transform 0.8s var(--ease), opacity 0.5s;
}
.gal__item--wide > img { aspect-ratio: 32 / 11; object-fit: cover; }
.gal__item:hover > img { transform: scale(1.06); opacity: 1; }
.gal__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 15px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 12, 0.92) 62%);
}
.gal__item figcaption b { font-family: var(--display); font-size: 14px; }
.gal__item figcaption span { font: 600 10px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.06em; }

/* ---- 19e. signal engine: pills, lock, unlock panel --------------------- */
.sighead {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.sighead__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.sighead__pill svg { width: 13px; height: 13px; }
.sighead__pill--live { color: var(--up); border-color: rgba(var(--up-rgb), 0.34); }
.sighead__pill--live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 10px var(--up);
  animation: sigPulse 1.7s ease-in-out infinite;
}
@keyframes sigPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.sighead__pill--lock { color: var(--accent); border-color: var(--line-gold); background: rgba(var(--accent-rgb), 0.08); }

.feedcol { display: flex; flex-direction: column; gap: 16px; }

.sig--locked {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.sig--locked > *:not(.sig__lock):not(.sig__veil) {
  filter: blur(5.5px) saturate(0.7);
  opacity: 0.6;
  user-select: none;
  pointer-events: none;
}
.sig--locked:hover { border-color: var(--line-gold); transform: none; }
.sig--locked:hover > *:not(.sig__lock):not(.sig__veil) { filter: blur(3px) saturate(0.9); opacity: 0.75; }
.sig--locked::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(255, 255, 255, 0.03) 14px 28px);
  mix-blend-mode: overlay;
}
.sig__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(4, 6, 12, 0.1), rgba(4, 6, 12, 0.55));
}
.sig__lock {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: rgba(4, 6, 12, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px -22px rgba(var(--accent-rgb), 0.95);
}
.sig__lock svg { width: 15px; height: 15px; color: var(--accent); }
.sig__lock em {
  font: 700 9.5px/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.sigunlock {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(var(--accent-rgb), 0.13), transparent 68%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.008));
  overflow: hidden;
}
.sigunlock__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid var(--line-gold);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.sigunlock__ico svg { width: 22px; height: 22px; }
.sigunlock b { display: block; font-family: var(--display); font-size: 1.32rem; margin-bottom: 8px; }
.sigunlock p { color: var(--muted); font-size: 0.95rem; line-height: 1.72; }
.ticklist--tight { gap: 8px; margin: 18px 0 20px; }
.ticklist--tight li { font-size: 0.88rem; }
.sigunlock__note {
  display: block;
  margin-top: 12px;
  text-align: center;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--faint);
}

/* ---- 19f. FAQ grid ----------------------------------------------------- */
.faq--grid { display: grid; gap: 12px; }
/* --------------------------------------------------------------------------
   what every seat includes, and what the trading itself costs
   --------------------------------------------------------------------------
   Two strips under the tier table. The first is the five things a seat carries
   at any level; the second is the pricing question a tier table never answers on
   its own — the desk charges no spread of its own and no commission per ticket,
   so the cost of a trade is the venue's spread and nothing else. It is a card
   each rather than a line of badges because the answer is a sentence, and it
   sits beside the price rather than in the FAQ.
   ------------------------------------------------------------------------- */
.access__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.access__strip > div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.004));
  font: 600 12.5px/1.45 var(--ui);
  color: var(--ink-2);
}
.access__strip b {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--up-rgb), 0.14);
  color: var(--up);
  font-size: 12px;
}

/* ---- 19i. the four promises under the tier heading ----------------------
   auto-fit was the wrong track count here: the strip holds four promises (zero
   spread, zero commission, 50% max drawdown, zero evaluation) and auto-fit
   opened as many tracks as the width allowed, so on a 3440px screen four cards
   stretched to 800px each and the sentences ran to ~150 characters a line. It
   is four tracks above 1100px, two below it, and past 1700px the strip stops
   taking width at all and centres instead — extra screen is margin, not a
   wider line. */
.access__terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 2px;
}
@media (min-width: 1100px) {
  .access__terms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1700px) {
  .access__terms { max-width: 1660px; margin-inline: auto; }
}
.access__terms > div {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(var(--accent-rgb), 0.09), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.006));
}
.access__terms b {
  display: block;
  margin-bottom: 7px;
  font-family: var(--display);
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.access__terms span {
  display: block;
  font: 500 12.8px/1.68 var(--ui);
  color: var(--muted);
}

.tiers__note {
  margin-top: 18px;
  font: 600 11.5px/1.7 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: 92ch;
}

/* ---- 19g. partner desk: referral builder + terminal preview ------------- */
.pref {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.3);
}
.pref__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pref__head b {
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--accent);
}
.pref__head em {
  font-style: normal;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.05em;
  color: var(--faint);
}
.pref__build {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 4px 4px 11px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.42);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.pref__build:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}
.pref__host {
  font: 600 11px/1 var(--mono);
  color: var(--faint);
  white-space: nowrap;
}
#refHandle {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.04em;
  outline: none;
}
#refHandle::placeholder { color: rgba(150, 170, 200, 0.4); }
.pref__copy {
  flex: none;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.07));
  color: var(--accent);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.pref__copy:hover { border-color: var(--accent); }
.pref__copy.is-done { color: #57e08a; border-color: rgba(87, 224, 138, 0.5); }
.pref__out {
  display: block;
  margin-top: 10px;
  font: 600 11.5px/1.45 var(--mono);
  color: #cfe6ff;
  word-break: break-all;
}
.pref__note {
  margin-top: 9px;
  font: 600 10px/1.55 var(--mono);
  letter-spacing: 0.04em;
  color: var(--faint);
}

.stqmini {
  margin-top: 18px;
  border: 1px solid rgba(124, 196, 255, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(6, 12, 20, 0.94), rgba(3, 7, 12, 0.97));
  overflow: hidden;
}
.stqmini__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(124, 196, 255, 0.16);
  background: rgba(124, 196, 255, 0.05);
}
.stqmini__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(124, 196, 255, 0.28);
}
.stqmini__bar span {
  margin-left: 5px;
  padding: 3px 6px;
  border: 1px solid rgba(124, 196, 255, 0.18);
  border-radius: 4px;
  font: 600 8.5px/1 var(--mono);
  letter-spacing: 0.12em;
  color: rgba(180, 210, 240, 0.55);
}
.stqmini__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.stqmini__row:last-child { border-bottom: 0; }
.stqmini__row em {
  font-style: normal;
  font: 700 9.5px/1 var(--mono);
  color: rgba(180, 210, 240, 0.45);
}
.stqmini__row span {
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.1em;
  color: #cfe6ff;
}
.stqmini__row b {
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.04em;
  color: rgba(180, 205, 235, 0.5);
}
.stqmini__row b.up { color: #57e08a; }
.pcard--stq > .btn { margin-top: auto; margin-bottom: 0; }

/* the app half of the premium card: same membership, different pocket */
.papp {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.26));
}
.papp__row { display: flex; align-items: center; gap: 12px; }
.papp__badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--line-gold);
  background: rgba(var(--accent-rgb), 0.1);
  font: 800 10px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--accent);
}
.papp__txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.papp__txt b { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 15px; }
.papp__txt em { font-style: normal; font: 600 10px/1 var(--mono); letter-spacing: 0.08em; color: var(--faint); }
.papp .plist { margin-top: 14px; }
.papp__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.papp__foot .appcard__meta { margin: 0; align-items: center; }
.papp__foot .btn { margin-left: auto; width: auto; flex: none; }

/* --- the APK button ------------------------------------------------------
   The app card used to end in a hairline button that read like a footnote, on
   a card whose whole point is that the membership fits in your pocket. Gold,
   full width, with the build number and the source stated under it. */
.papp__cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 15px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 15px;
  overflow: hidden;
  color: #1c1200;
  background: linear-gradient(135deg, #ffd766, var(--accent) 46%, var(--accent-2));
  box-shadow: 0 20px 44px -20px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.papp__cta::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 44%;
  left: -58%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  transform: skewX(-18deg);
  transition: left 0.75s var(--ease);
}
.papp__cta:hover { transform: translateY(-3px); box-shadow: 0 30px 58px -24px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.papp__cta:hover::after { left: 112%; }
.papp__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.papp__cta[aria-disabled='true'] { cursor: not-allowed; filter: grayscale(0.55); }
.papp__cta-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  background: rgba(24, 16, 2, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.papp__cta-ico svg { width: 22px; height: 22px; }
.papp__cta-txt { display: grid; gap: 3px; min-width: 0; }
.papp__cta-txt b { font-family: var(--display); font-size: 15.5px; line-height: 1.2; }
.papp__cta-txt em {
  font: 700 9.5px/1.4 var(--mono);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(28, 18, 0, 0.68);
}
.papp__cta-arrow { width: 18px; height: 18px; margin-left: auto; flex: none; transition: transform 0.3s var(--ease); }
.papp__cta:hover .papp__cta-arrow { transform: translateX(4px); }
.papp__cta-note {
  display: flex;
  gap: 7px;
  margin-top: 10px;
  font: 600 10px/1.65 var(--mono);
  letter-spacing: 0.02em;
  color: var(--faint);
}
.papp__cta-note i {
  flex: none;
  width: 5px; height: 5px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- the transfer row ----------------------------------------------------
   A 57 MB build on a mobile link is the one transfer on this site that can
   take minutes, so the card reports it slice by slice instead of leaving the
   reader with a button that looks like nothing happened. The bar is the same
   accent as the button above it; the cancel is a quiet hairline so it is
   never hit by accident. */
.papp__dl {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 11px;
  padding: 11px 13px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), 0.06);
}
.papp__dl[hidden] { display: none; }
.papp__dl-bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.papp__dl-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.25s linear;
}
.papp__dl-txt { display: grid; gap: 2px; flex: none; min-width: 86px; text-align: right; }
.papp__dl-txt b { font: 800 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink); }
.papp__dl-txt em {
  font: 600 9px/1.4 var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.papp__dl-x {
  flex: none;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: transparent;
  color: var(--faint);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* the always-there way out: a real href on the row, so a browser that refuses
   the scripted hand-off still has one tap to the build */
.papp__dl-save {
  flex: none;
  padding: 6px 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.papp__dl-save[hidden] { display: none; }
.papp__dl-save:hover { background: rgba(var(--accent-rgb), 0.22); color: var(--ink); }
.papp__dl-save:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.papp__dl-x:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.36); }
.papp__dl-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the copy-link affordance next to the note: the direct link is the one path
   that works with no JS, no card and no transfer, so it is worth one tap */
.papp__copy {
  align-self: flex-start;
  flex: none;
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  font: 700 9px/1.5 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.papp__copy:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); }
.papp__copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.papp__copy.is-ok { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.6); }

/* while a transfer is running the button states the job, not the offer */
.papp__cta.is-busy { cursor: progress; }
.papp__cta.is-busy .papp__cta-arrow { opacity: 0; }
.papp__cta.is-ok { cursor: default; }

/* a 320px card cannot hold a bar, a readout and a cancel side by side */
@media (max-width: 420px) {
  .papp__dl { flex-wrap: wrap; }
  .papp__dl-bar { flex: 1 1 100%; order: 2; }
  .papp__dl-txt { order: 1; text-align: left; min-width: 0; }
  .papp__dl-save { order: 3; }
  .papp__dl-x { order: 4; margin-left: auto; }
  .papp__cta-note { flex-wrap: wrap; }
  .papp__copy { margin-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .papp__cta,
  .papp__cta::after,
  .papp__cta-arrow { transition: none; }
  .papp__cta:hover { transform: none; }
  .papp__dl-bar i { transition: none; }
}
.pcard--prem .pcard__top { margin-bottom: 14px; }

/* the eighteen panes, drawn as a chip grid: it also absorbs whatever height is
   left so the two partner cards end at exactly the same line */
/* the picture that fills the card: a generated panel of the desk's own pip
   book, drawn by scripts/gen-art.mjs rather than screenshotted */
.pcard__shot { margin: 16px 0 0; }
.pcard__shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(124, 196, 255, 0.2);
  border-radius: 12px;
  background: #050a13;
}
.pcard__shot figcaption {
  margin-top: 9px;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--faint);
}
/* the verification line above "Register now": one lamp, one bold phrase and
   three facts the reader would otherwise only find out after opening the form */
.partner__verify {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin: 18px 0 14px;
  padding: 13px 15px;
  border: 1px solid rgba(var(--accent-rgb), 0.26);
  border-left-width: 3px;
  border-radius: 13px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    rgba(0, 0, 0, 0.26);
  font: 500 12.2px/1.62 var(--ui);
  color: var(--muted);
}
.partner__verify i {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
  animation: verifyPulse 2.6s ease-in-out infinite;
}
@keyframes verifyPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.partner__verify b {
  display: block;
  margin-bottom: 3px;
  font: 800 10px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .partner__verify i { animation: none; opacity: 1; }
}

.partner__acts { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.partner__note {
  margin-top: 14px;
  font: 600 10.5px/1.5 var(--mono);
  letter-spacing: 0.05em;
  color: var(--faint);
}

/* buttons and notes sit on the bottom edge so the two cards line up */
.pcard--prem .partner__acts { padding-top: 2px; }

/* ---- 19h. tiers: four across + custom mandate -------------------------- */
.tiers--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Four seats in one row means the tallest card sets the row height. The cards
   are columns, the button is pinned to the floor and the feature list takes the
   slack by spacing its own rows out, so no card ends with a hole under it. */
.tier, .plan { display: flex; flex-direction: column; }
/* A panel whose body is a chart grows the chart into the space the row gives
   it, instead of drawing a 190px chart inside a 366px card. `:has()` is what
   keeps this off the panels that are not built that way; where it is missing
   the rule simply does nothing. */
.panel:has(> .chartbox2:last-child) { display: flex; flex-direction: column; }
.panel > .chartbox2:last-child { flex: 1 1 auto; min-height: 150px; }
.panel:has(> .statlist:last-child) { display: flex; flex-direction: column; }
.panel > .statlist:last-child { flex: 1 1 auto; justify-content: space-evenly; }
/* The exposure panel ends on its legend, and the monthly panel beside it is the
   tallest card in the row now that it carries the written-out months — the row
   grows, the legend stays where it was and the panel ends with a 47px hole.
   Growing the donut pushes the legend back down to the floor. */
.panel:has(> .legend:last-child) { display: flex; flex-direction: column; }
.panel:has(> .legend:last-child) > .chartbox2 { flex: 1 1 auto; min-height: 150px; }
.panel:has(> .monthgrid:last-child) > .chartbox2 { flex: 0 0 auto; }
.bento__card:has(> .bento__tag) { display: flex; flex-direction: column; }
.bento__card > .bento__tag { margin-top: auto; }
.tier > .ticklist, .plan > .ticklist { flex: 1 1 auto; justify-content: space-evenly; margin-bottom: 18px; }
.tier > .btn, .plan > .btn { margin-top: auto; }
/* ...but the four-seat row is the exception. One of those seats carries a
   control the others do not, so that card is always the tallest and its bullet
   list is the one with no slack left: at 1600px the four lists read at 37px,
   37px, 37px and 11px — same list, two different rhythms, and the tight one
   looks like content piled up. Here the whole card shares the slack instead,
   so all four lists sit on their natural 11px rhythm and the leftover height
   lands evenly in the gaps between the blocks. */
.tiers--access > .tier { justify-content: space-between; }
.tiers--access > .tier > .ticklist { flex: 0 0 auto; justify-content: flex-start; }
.tiers--access > .tier > .btn { margin-top: 0; }
.tier--custom { border-color: var(--line-2); background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008)); }
.tier--custom:hover { border-color: var(--line-gold); }
.tier__badge--alt { background: linear-gradient(135deg, #eaeffb, #9fb2d0); }
/* The custom seat carries one extra block — the price you name — and nothing
   else. It is the tallest card in the row, so every pixel it spends on small
   print is a pixel the four bullet rows beside it cannot spread into: on a
   3440px screen the other seats breathe at 37px between rows and this one sat
   at 11px. One line for the label, a 38px field and tighter margins take the
   block from ~100px to ~68px, which puts every card in the row back on the same
   rhythm without dropping a word of what the seat includes. */
.tier__amount {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 14px 0 4px;
}
.tier__amount label {
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.tier__amount input {
  width: 100%;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line-gold);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.36);
  color: var(--ink);
  font: 700 16px/1 var(--mono);
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.tier__amount input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); }
.tier__amount span { font: 600 9.5px/1.4 var(--mono); color: var(--faint); letter-spacing: 0.06em; }

/* ---- 19i. mobile drawer (Android first) --------------------------------- */
.drawer {
  gap: 0;
  padding: 0 0 calc(30px + env(safe-area-inset-bottom, 0px));
  max-height: 100vh;
  max-height: 100dvh;
  background:
    radial-gradient(80% 46% at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent 70%),
    linear-gradient(180deg, rgba(5, 8, 14, 0.995), rgba(3, 5, 10, 0.99));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.drawer.is-open { overscroll-behavior: contain; }
.drawer__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 22px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent);
}
/* the Android bottom-sheet grab handle */
.drawer__head::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 11px;
  width: 46px;
  height: 4px;
  margin-left: -23px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}
.drawer.is-open .drawer__head { animation: drawerItem 0.5s var(--ease) both; }
.drawer.is-open .drawer__foot { animation: drawerItem 0.55s var(--ease) 0.26s both; }
.drawer.is-open .drawer__nav a { animation: drawerItem 0.5s var(--ease) both; }
.drawer.is-open .drawer__nav a:nth-child(1) { animation-delay: 0.1s; }
.drawer.is-open .drawer__nav a:nth-child(2) { animation-delay: 0.14s; }
.drawer.is-open .drawer__nav a:nth-child(3) { animation-delay: 0.18s; }
.drawer.is-open .drawer__nav a:nth-child(4) { animation-delay: 0.22s; }
.drawer.is-open .drawer__nav a:nth-child(5) { animation-delay: 0.26s; }
.drawer.is-open .drawer__nav a:nth-child(6) { animation-delay: 0.3s; }
.drawer.is-open .drawer__nav a:nth-child(7) { animation-delay: 0.34s; }
.drawer.is-open .drawer__nav a:nth-child(8) { animation-delay: 0.38s; }
.drawer.is-open .drawer__nav a:nth-child(9) { animation-delay: 0.42s; }
@keyframes drawerItem {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.drawer__mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 26px -6px rgba(var(--accent-rgb), 0.9);
}
.drawer__head-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.drawer__head-txt b {
  font-family: var(--display);
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.drawer__head-txt em {
  font: 600 9.5px/1.3 var(--mono);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.drawer__nav { display: grid; padding: 0 12px; }
.drawer__nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
  padding: 15px 12px;
  border-bottom: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s, transform 0.3s var(--ease);
}
.drawer__nav a:active,
.drawer__nav a:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  transform: translateX(3px);
}
.drawer__nav a:last-child { border-bottom: 0; }
.drawer__nav a span {
  width: 26px;
  flex: none;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--faint);
}
.drawer__foot {
  display: grid;
  gap: 10px;
  padding: 22px 24px 0;
}
.drawer__foot .btn { margin-top: 0; width: 100%; }
.drawer__note {
  text-align: center;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--faint);
}

/* reduced motion: keep every new piece of chrome, drop the motion ------ */
@media (prefers-reduced-motion: reduce) {
  .boot__aurora,
  .boot__grid,
  .boot__sweep,
  .boot__fill::after { display: none; }
  .boot__mark img,
  .boot__ring,
  .sighead__pill--live i,
  .pcard__tag i { animation: none; }
  .drawer.is-open .drawer__head,
  .drawer.is-open .drawer__foot,
  .drawer.is-open .drawer__nav a { animation: none; }
}

/* ---- 19i-2. signal engine v2: live card vs closed hit -----------------
   One running call stays locked; every call that already reached target is
   printed in full, because a hit is proof the levels were there first.
   ---------------------------------------------------------------------- */
.sig--win {
  grid-template-columns: 62px minmax(0, 1.2fr) minmax(0, 1.4fr) 150px;
  border-color: rgba(var(--up-rgb), 0.22);
  background:
    radial-gradient(70% 130% at 0% 50%, rgba(var(--up-rgb), 0.1), transparent 64%),
    linear-gradient(100deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006));
}
.sig--win::before {
  background: linear-gradient(180deg, var(--up), rgba(34, 211, 165, 0.22));
  box-shadow: 0 0 14px rgba(var(--up-rgb), 0.7);
}
.sig--win:hover { border-color: rgba(var(--up-rgb), 0.5); }
.sig--win .sig__bar i { background: linear-gradient(90deg, rgba(var(--up-rgb), 0.35), var(--up)); }
.sig--win .lvl--tp span { color: rgba(var(--up-rgb), 0.92); }
.sig__meta .sig__r { color: var(--up); text-shadow: 0 0 18px rgba(var(--up-rgb), 0.4); }
.sig__hit {
  display: block;
  margin-top: 7px;
  padding: 4px 0;
  border: 1px solid rgba(var(--up-rgb), 0.36);
  border-radius: 6px;
  background: rgba(var(--up-rgb), 0.1);
  color: var(--up);
  font: 700 9px/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.12em;
  text-align: center;
}

/* the four figures above the feed, so the section opens on numbers instead of
   a title and a wall of cards */
.sigstat {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 22px;
}
.sigstat__cell {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008));
  overflow: hidden;
}
.sigstat__cell::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.sigstat__cell span {
  display: block;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.sigstat__cell b {
  display: block;
  margin: 9px 0 6px;
  font: 700 clamp(1.24rem, 2vw, 1.7rem) / 1 var(--mono);
  letter-spacing: -0.02em;
}
.sigstat__cell em {
  font-style: normal;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.05em;
  color: var(--muted);
}
.sigstat__cell--live {
  border-color: rgba(var(--up-rgb), 0.3);
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(var(--up-rgb), 0.13), transparent 66%),
    linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008));
}
.sigstat__cell--live::after { background: linear-gradient(180deg, var(--up), transparent); }
.sigstat__cell--live b { color: var(--up); }
.sigstat__cell--live em { display: flex; align-items: center; gap: 7px; color: var(--up); }
.sigstat__cell--live em i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 10px var(--up);
  animation: sigPulse 1.7s ease-in-out infinite;
}

/* the feed gets its own frame and a key, so "blurred" reads as a rule instead
   of a glitch on one card */
.feedbox {
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.004));
}
.feedhead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.feedhead__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.feedhead__title > i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: sigPulse 2.2s ease-in-out infinite;
}
.feedhead__key { display: inline-flex; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.feedhead__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.feedhead__item i { width: 14px; height: 3px; border-radius: 2px; }
.feedhead__item--live { color: var(--accent); }
.feedhead__item--live i { background: var(--accent); }
.feedhead__item--win { color: var(--up); }
.feedhead__item--win i { background: var(--up); }

/* scorecard: the ring is drawn to fit, and the closed calls get a run of dots */
.gaugewrap { height: 200px; }
.gaugewrap__cap {
  margin: 6px 0 0;
  text-align: center;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.ribbon24 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
}
.ribbon24 i {
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--up), rgba(34, 211, 165, 0.32));
  box-shadow: 0 0 8px rgba(var(--up-rgb), 0.26);
  animation: ribbonIn 0.5s var(--ease) both;
}
@keyframes ribbonIn { from { opacity: 0; transform: scaleY(0.2); } }
.ribbon24__cap {
  margin: 10px 0 0;
  text-align: center;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--faint);
}

.bars__top em {
  margin-left: auto;
  margin-right: 10px;
  font-style: normal;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* ---- the scorecard, rebuilt as a stack so nothing crowds ----------------
   The dial used to share a half-width panel with the stat rows, so both were
   squeezed into the same ~200px and the rows ran into the ring. The dial gets
   its own row now and the stats sit under it as a two-column grid of their
   own — six numbers, three even rows, nothing overlapping. */
.panel--score { padding: 18px 20px 20px; }
.panel--score .panel__head { margin-bottom: 10px; }
.score {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.score__dial { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.panel--score .gaugewrap { height: 156px; }
.panel--score .gaugewrap__cap {
  margin: 0;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-align: center;
}
.panel--score .kv {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 0;
}
.panel--score .kv div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 7px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  font-size: 11px;
}
.panel--score .kv div:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 0; }
.panel--score .kv span { min-width: 0; }
.panel--score .kv b { white-space: nowrap; }
.panel--score .ribbon24 { margin-top: 14px; gap: 5px; }
.panel--score .ribbon24 i { height: 8px; }
.panel--score .ribbon24__cap { margin-top: 9px; text-align: left; letter-spacing: 0.06em; }

/* the log at the bottom of the column takes whatever height is left, so the
   column always ends level with the call feed beside it */
.panel--log { display: flex; flex-direction: column; min-height: 190px; }
/* basis 0, not auto: the log's own content is 30 rows tall, and a flex item
   refuses to shrink under its content by default — which is what pushed the
   row taller than the feed beside it and left a 52px hole under the feed. */
.sigside > .panel--log { flex: 1 1 0; }
.enginelog {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  font: 600 10.5px/1 var(--mono);
  -webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0.15));
  mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0.15));
}
.enginelog__row {
  display: grid;
  grid-template-columns: 46px 84px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  color: var(--muted);
  animation: logIn 0.5s var(--ease) both;
}
.enginelog__row:nth-child(odd) { background: rgba(255, 255, 255, 0.022); }
.enginelog__row em { font-style: normal; color: var(--faint); }
.enginelog__row b { font-weight: 700; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enginelog__row i { font-style: normal; font-weight: 700; }
.enginelog__row.is-hit i { color: var(--up); }
.enginelog__row.is-short b { color: #ffb4b4; }
.enginelog__row.is-long b { color: #a9f0d8; }
.enginelog__row.is-open i { color: var(--accent); }
@keyframes logIn { from { opacity: 0; transform: translateX(-8px); } }

/* ---- 19j. responsive sweep for the new blocks ------------------------- */
@media (max-width: 1280px) {
  .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiers--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .sigside { position: static; max-height: none; overflow: visible; padding: 0; }
  /* stacked, there is no column height to fill, so the log keeps its own
     height instead of collapsing to its 190px floor */
  .sigside > .panel--log { flex: 0 0 auto; }
  .enginelog { max-height: 420px; }
}
@media (max-width: 860px) {
  /* The closed call declares its own desktop template further up this file, so
     it out-ranks the mobile `.sig` rule in the cascade and kept four columns.
     Restating the stack here makes both card types fold the same way —
     otherwise a closed call was 330px tall beside a 190px live one. */
  .sig--win { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 900px) {
  .sigstat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* no column override for the win card here: the 1,240-row breakpoints above
     already place both card types, and a win-only template at this width
     fought the mobile stacking rule and left the levels on a row of their own */
}
@media (max-width: 620px) {
  .sigstat { grid-template-columns: minmax(0, 1fr); }
  .feedhead__key { margin-left: 0; }
  .sig--win { grid-template-columns: minmax(0, 1fr) 128px; }
  .sig--win .sig__levels { grid-column: 1 / -1; }
  /* stacked full width, the paired stat cells would be too narrow to read */
  .panel--score .kv { grid-template-columns: minmax(0, 1fr); }
  .panel--score .kv div:nth-last-child(-n + 2) {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
    padding-bottom: 7px;
  }
  .panel--score .kv div:last-child { border-bottom: 0; padding-bottom: 0; }
}
@media (min-width: 1240px) {
  /* nine answers, three rows of three: the grid ends level with the section */
  .faq--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq--grid .faq__item { margin: 0; }
}
@media (min-width: 760px) and (max-width: 1239px) {
  .faq--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq--grid .faq__item { margin: 0; }
}
@media (max-width: 1024px) {
  .sig__lock { right: 12px; padding: 7px 10px; }
  .sig__lock em { display: none; }
}
@media (max-width: 900px) {
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal__item--wide { grid-column: span 2; }
  .hero__art { display: none; }
}
@media (max-width: 620px) {
  .gal { grid-template-columns: minmax(0, 1fr); }
  .gal__item--wide { grid-column: span 1; }
  .gal__item--wide > img { aspect-ratio: 16 / 9; }
  .tiers--four { grid-template-columns: minmax(0, 1fr); }
  .boot__mark { width: 60px; height: 60px; }
  .boot__mark img { width: 46px; height: 46px; }
  .boot__brandtxt b { font-size: 1.2rem; }
  .boot__inner { width: calc(100% - 32px); }
  .drawer__nav a { font-size: 17px; padding: 14px 10px; }
  .sig--locked > *:not(.sig__lock):not(.sig__veil) { filter: blur(6.5px); }
}
@media (max-width: 380px) {
  .boot__strip span:nth-child(n + 3) { display: none; }
}