/* ═════════════════════════════════════════════════════════════════════════
   NodeBar — Global design system (v1)
   ─────────────────────────────────────────────────────────────────────────
   Namespaced under .nb-* so it coexists with the legacy teal system on
   pages that haven't been migrated yet (docs, pricing, blog, backtest...).
   Future sessions will migrate those pages and eventually retire the old
   `--accent` / `.card-lift` / etc. tokens.

   Cache-bust: bump the ?v= query in base.html when this file changes.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────── */
  --nb-bg:        #0F1620;
  --nb-bg-card:   #1A2330;
  --nb-bg-lift:   #212C3C;
  --nb-border:    #2A3644;
  --nb-border-hi: #3A4858;

  /* ── Text ─────────────────────────────────────────────────────────── */
  --nb-text:      #E8EDF2;
  --nb-text-dim:  #B6C2D2;
  --nb-muted:     #8A9BAE;
  --nb-muted-dim: #65788D;

  /* ── Brand accents ────────────────────────────────────────────────── */
  --nb-orange:    #E85D2C;
  --nb-orange-hi: #FF7A45;
  --nb-orange-lo: #B8451D;
  --nb-slate:     #4A6B85;
  --nb-slate-hi:  #7BA0C2;
  --nb-slate-lo:  #34495E;

  /* ── Category reserves (kept from legacy palette) ─────────────────── */
  --nb-macro:     #7DD3FC;
  --nb-ai:        #A882FF;

  /* ── Radii ────────────────────────────────────────────────────────── */
  --nb-r-sm: 6px;
  --nb-r:    10px;
  --nb-r-lg: 14px;
  --nb-r-xl: 20px;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --nb-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --nb-ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --nb-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --nb-dur-fast:  180ms;
  --nb-dur:       240ms;
  --nb-dur-slow:  420ms;

  /* ── Typography ──────────────────────────────────────────────────── */
  --nb-font: "Geist", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nb-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ═════════════════════════════════════════════════════════════════════
   1 · Surfaces & layout helpers
   ═════════════════════════════════════════════════════════════════════ */
.nb-bg-deep { background: var(--nb-bg); }
.nb-bg-card { background: var(--nb-bg-card); }

/* Subtle 8x8 chart-paper grid for hero / decorative panels */
.nb-grid-bg {
  background-image:
    linear-gradient(rgba(74,107,133,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,107,133,.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Radial spotlight from top — useful behind hero */
.nb-spotlight {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(74,107,133,.10) 0%, transparent 70%),
    var(--nb-bg);
}

/* ═════════════════════════════════════════════════════════════════════
   2 · Typography
   ═════════════════════════════════════════════════════════════════════ */
.nb-font      { font-family: var(--nb-font); }
.nb-font-mono { font-family: var(--nb-font-mono); }

.nb-h1 {
  font-family: var(--nb-font);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--nb-text);
}
.nb-h2 {
  font-family: var(--nb-font);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--nb-text);
}
.nb-h3 {
  font-family: var(--nb-font);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nb-text);
}
.nb-lede {
  font-family: var(--nb-font);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--nb-muted);
}
.nb-eyebrow {
  font-family: var(--nb-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nb-slate-hi);
  font-weight: 500;
}
.nb-mono-num {
  font-family: var(--nb-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ═════════════════════════════════════════════════════════════════════
   3 · Wordmark
   ═════════════════════════════════════════════════════════════════════ */
.nb-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nb-text);
  text-decoration: none;
  font-family: var(--nb-font);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.nb-wordmark-icon {
  height: 34px;
  width: auto;
  flex-shrink: 0;
  transition: transform var(--nb-dur) var(--nb-ease-out);
}
.nb-wordmark:hover .nb-wordmark-icon {
  transform: rotate(2deg);
}
.nb-wordmark-text {
  font-size: 24px;
}

/* hero size variant */
.nb-wordmark-hero .nb-wordmark-icon { height: 68px; }
.nb-wordmark-hero .nb-wordmark-text { font-size: clamp(40px, 6.5vw, 64px); }

/* ═════════════════════════════════════════════════════════════════════
   4 · Buttons / CTAs
   ═════════════════════════════════════════════════════════════════════ */
.nb-cta {
  --p-y: 11px;
  --p-x: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nb-font);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  padding: var(--p-y) var(--p-x);
  background: linear-gradient(180deg, var(--nb-orange-hi) 0%, var(--nb-orange) 100%);
  border: 0;
  text-decoration: none;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
  transition:
    transform var(--nb-dur) var(--nb-ease-out),
    box-shadow var(--nb-dur) var(--nb-ease-out),
    filter var(--nb-dur);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 18px -6px rgba(232,93,44,.45);
  letter-spacing: -0.005em;
  white-space: nowrap;
  position: relative;
}
.nb-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 14px 26px -10px rgba(232,93,44,.62);
}
.nb-cta:active {
  transform: translateY(0);
  filter: brightness(0.95);
}
.nb-cta:focus-visible {
  outline: 2px solid var(--nb-orange-hi);
  outline-offset: 3px;
}
.nb-cta-lg {
  --p-y: 14px;
  --p-x: 26px;
  font-size: 15px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.nb-cta .nb-arrow {
  display: inline-block;
  transition: transform var(--nb-dur) var(--nb-ease-snap);
}
.nb-cta:hover .nb-arrow {
  transform: translate(3px, -1px);
}

/* Ghost / secondary */
.nb-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nb-font);
  font-weight: 500;
  font-size: 14px;
  color: var(--nb-text);
  text-decoration: none;
  padding: 11px 20px;
  background: transparent;
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-sm);
  cursor: pointer;
  transition:
    border-color var(--nb-dur) var(--nb-ease-out),
    background var(--nb-dur),
    transform var(--nb-dur);
  white-space: nowrap;
}
.nb-cta-ghost:hover {
  border-color: var(--nb-slate-hi);
  background: rgba(123,160,194,0.06);
  transform: translateY(-1px);
}
.nb-cta-ghost:focus-visible {
  outline: 2px solid var(--nb-slate-hi);
  outline-offset: 3px;
}

/* ═════════════════════════════════════════════════════════════════════
   5 · Links
   ═════════════════════════════════════════════════════════════════════ */
.nb-link {
  color: var(--nb-text);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  font-weight: 500;
  transition: color var(--nb-dur);
}
.nb-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--nb-slate-hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nb-dur) var(--nb-ease-out);
}
.nb-link:hover::after { transform: scaleX(1); }
.nb-link:hover { color: var(--nb-text); }

/* Nav link variant — muted by default, brightens on hover */
.nb-nav-link {
  color: var(--nb-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  transition: color var(--nb-dur);
}
.nb-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--nb-slate-hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nb-dur) var(--nb-ease-out);
}
.nb-nav-link:hover { color: var(--nb-text); }
.nb-nav-link:hover::after { transform: scaleX(1); }
.nb-nav-link.nb-active {
  color: var(--nb-text);
}
.nb-nav-link.nb-active::after {
  background: var(--nb-orange);
  transform: scaleX(1);
}

/* ═════════════════════════════════════════════════════════════════════
   6 · Cards
   ═════════════════════════════════════════════════════════════════════ */
.nb-card {
  background: var(--nb-bg-card);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  padding: 24px;
  transition:
    transform var(--nb-dur) var(--nb-ease-out),
    border-color var(--nb-dur),
    box-shadow var(--nb-dur);
  position: relative;
  overflow: hidden;
}
.nb-card:hover {
  transform: translateY(-3px);
  border-color: var(--nb-border-hi);
  box-shadow:
    0 18px 40px -18px rgba(0,0,0,.55),
    0 0 0 1px rgba(232,93,44,.06);
}
/* Featured card — has the lit edge in orange (echoes logo's lit face) */
.nb-card-featured {
  position: relative;
}
.nb-card-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--nb-r-lg);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--nb-orange) 0%, transparent 35%, transparent 65%, rgba(74,107,133,.4) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════════
   7 · Signal ticker — NodeBar twist on the classic price tape
   Each item shows SYMBOL · FEATURE · VALUE · SIGNAL_BADGE (not price/Δ%).
   Left side has a fixed "Live signals" label with a pulsing dot.
   ═════════════════════════════════════════════════════════════════════ */
.nb-ticker {
  height: 36px;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--nb-border);
  border-bottom: 1px solid var(--nb-border);
  background: rgba(74,107,133,.04);
  font-family: var(--nb-font-mono);
  font-size: 12px;
  user-select: none;
  /* Soft fade-out on the right edge so items dissolve into the chrome */
  mask-image: linear-gradient(to right, transparent 0, black 8%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 96%, transparent 100%);
}

/* Fixed label on the left, sits on top of the scrolling track */
.nb-ticker-label {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 0 20px;
  background: linear-gradient(90deg, var(--nb-bg) 70%, rgba(15,22,32,0));
  font-family: var(--nb-font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nb-orange-hi);
  font-weight: 600;
  white-space: nowrap;
}
.nb-ticker-label .nb-tk-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nb-orange);
  box-shadow: 0 0 8px rgba(232,93,44,.6);
  animation: nb-pulse 2s ease-in-out infinite;
}

.nb-ticker-track {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-left: 140px;   /* room for the label */
  height: 100%;
  white-space: nowrap;
  animation: nb-ticker-scroll 90s linear infinite;
  will-change: transform;
}
.nb-ticker:hover .nb-ticker-track { animation-play-state: paused; }

.nb-ticker .nb-tk-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.nb-ticker .nb-tk-sym  { color: var(--nb-text); font-weight: 600; letter-spacing: .02em; }
.nb-ticker .nb-tk-feat { color: var(--nb-muted); font-size: 11px; }
.nb-ticker .nb-tk-val  { color: var(--nb-text); font-variant-numeric: tabular-nums; }

.nb-ticker .nb-tk-badge {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.nb-ticker .nb-tk-long  { color: var(--nb-orange-hi); border-color: rgba(232,93,44,.40); background: rgba(232,93,44,.07); }
.nb-ticker .nb-tk-short { color: var(--nb-slate-hi);  border-color: rgba(123,160,194,.40); background: rgba(123,160,194,.07); }
.nb-ticker .nb-tk-flat  { color: var(--nb-muted);     border-color: var(--nb-border); background: transparent; }

@keyframes nb-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .nb-ticker { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   8 · Sparkline
   ═════════════════════════════════════════════════════════════════════ */
.nb-spark {
  width: 100%;
  height: 48px;
  overflow: visible;
}
.nb-spark .nb-spark-line {
  fill: none;
  stroke: var(--nb-slate-hi);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.6s var(--nb-ease-out);
}
.nb-spark.nb-drawn .nb-spark-line { stroke-dashoffset: 0; }
.nb-spark .nb-spark-tip {
  r: 3;
  fill: var(--nb-orange);
  opacity: 0;
  transition: opacity 0.4s var(--nb-ease-out) 0.5s;
}
.nb-spark.nb-drawn .nb-spark-tip { opacity: 1; }
.nb-spark .nb-spark-area {
  fill: url(#nb-spark-grad);
  opacity: 0;
  transition: opacity 0.6s var(--nb-ease-out) 0.4s;
}
.nb-spark.nb-drawn .nb-spark-area { opacity: 0.7; }

/* ═════════════════════════════════════════════════════════════════════
   9 · Counter / KPIs
   ═════════════════════════════════════════════════════════════════════ */
.nb-counter {
  font-family: var(--nb-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--nb-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.nb-counter-label {
  font-family: var(--nb-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-muted);
  margin-top: 8px;
}
.nb-counter-block + .nb-counter-block {
  border-left: 1px solid var(--nb-border);
  padding-left: 28px;
}

/* ═════════════════════════════════════════════════════════════════════
   10 · Faceted section divider
   ═════════════════════════════════════════════════════════════════════ */
.nb-divider {
  height: 14px;
  margin: 64px 0;
  position: relative;
  background:
    linear-gradient(to right,
      transparent 0,
      var(--nb-border) 12%,
      var(--nb-border) 88%,
      transparent 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: center;
}
.nb-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--nb-bg);
  border-right: 1px solid var(--nb-border);
  border-bottom: 1px solid var(--nb-border);
}

/* ═════════════════════════════════════════════════════════════════════
   11 · Scroll progress bar (top of page)
   ═════════════════════════════════════════════════════════════════════ */
.nb-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}
.nb-scroll-progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--nb-orange) 0%, var(--nb-orange-hi) 100%);
  transition: width 60ms linear;
  box-shadow: 0 0 8px rgba(232,93,44,.5);
}

/* ═════════════════════════════════════════════════════════════════════
   12 · Cursor halo (hero only — opt-in via .nb-halo on parent)
   ═════════════════════════════════════════════════════════════════════ */
.nb-halo {
  position: relative;
  isolation: isolate;
}
.nb-halo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    220px circle at var(--nb-mx, 50%) var(--nb-my, 50%),
    rgba(232,93,44,.07),
    transparent 70%
  );
  z-index: 0;
  transition: opacity var(--nb-dur);
}
@media (max-width: 768px) {
  .nb-halo::before { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   13 · Entry animations (stagger on load + reveal on scroll)
   ═════════════════════════════════════════════════════════════════════ */
.nb-rise {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 480ms var(--nb-ease-out),
    transform 480ms var(--nb-ease-out);
}
.nb-rise.nb-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero stagger: child :nth-child(N) delays applied via inline style or these */
.nb-stagger > * { transition-delay: 0ms; }
.nb-stagger > *:nth-child(1) { transition-delay: 40ms; }
.nb-stagger > *:nth-child(2) { transition-delay: 100ms; }
.nb-stagger > *:nth-child(3) { transition-delay: 160ms; }
.nb-stagger > *:nth-child(4) { transition-delay: 220ms; }
.nb-stagger > *:nth-child(5) { transition-delay: 280ms; }
.nb-stagger > *:nth-child(6) { transition-delay: 340ms; }

/* ═════════════════════════════════════════════════════════════════════
   14 · Pricing bar (animated rising bars for plan comparison)
   ═════════════════════════════════════════════════════════════════════ */
.nb-bar {
  height: 8px;
  background: var(--nb-bg-lift);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.nb-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--nb-orange-lo) 0%, var(--nb-orange) 50%, var(--nb-orange-hi) 100%);
  border-radius: 999px;
  transition: width 1.1s var(--nb-ease-out);
}
.nb-bar.nb-in > i { width: var(--nb-w, 50%); }

/* ═════════════════════════════════════════════════════════════════════
   15 · Pills / badges / chips
   ═════════════════════════════════════════════════════════════════════ */
.nb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nb-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--nb-border);
  background: rgba(74,107,133,.06);
  color: var(--nb-slate-hi);
  font-weight: 500;
}
.nb-pill-orange {
  border-color: rgba(232,93,44,.3);
  background: rgba(232,93,44,.07);
  color: var(--nb-orange-hi);
}
.nb-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: nb-pulse 2s ease-in-out infinite;
}
@keyframes nb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ═════════════════════════════════════════════════════════════════════
   16 · Code chip — for inline endpoints / commands
   ═════════════════════════════════════════════════════════════════════ */
.nb-code {
  font-family: var(--nb-font-mono);
  font-size: 12.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(74,107,133,.10);
  border: 1px solid var(--nb-border);
  color: var(--nb-text);
}

/* ═════════════════════════════════════════════════════════════════════
   17 · Aurora background blobs (hero, always-on)
   ═════════════════════════════════════════════════════════════════════ */
.nb-aurora-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.nb-aurora-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(120px);
  will-change: transform, opacity;
}
.nb-aurora-1 {
  width: 760px; height: 760px;
  background: rgba(74,107,133,.65);
  top: -260px; left: -260px;
  animation: nb-aurora-drift-1 14s ease-in-out infinite;
}
.nb-aurora-2 {
  width: 680px; height: 680px;
  background: rgba(232,93,44,.38);
  bottom: -260px; right: -180px;
  animation: nb-aurora-drift-2 13s ease-in-out infinite;
}
.nb-aurora-3 {
  width: 560px; height: 560px;
  background: rgba(168,130,255,.24);
  top: 30%; right: 18%;
  animation: nb-aurora-drift-3 17s ease-in-out infinite;
}
@keyframes nb-aurora-drift-1 {
  0%,100% { transform: translate(-12%, -10%) scale(1);    opacity: .32; }
  50%     { transform: translate(10%, 8%)    scale(1.12);  opacity: .55; }
}
@keyframes nb-aurora-drift-2 {
  0%,100% { transform: translate(10%, 8%)   scale(1.05);  opacity: .28; }
  50%     { transform: translate(-10%, -8%) scale(.92);   opacity: .48; }
}
@keyframes nb-aurora-drift-3 {
  0%,100% { transform: translate(0%, 12%)   scale(1);     opacity: .18; }
  50%     { transform: translate(0%, -10%)  scale(1.18);  opacity: .35; }
}

/* Wandering light point (extra subtle motion in hero) */
.nb-light-point {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nb-orange-hi);
  box-shadow: 0 0 24px var(--nb-orange-hi);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: nb-wander 18s ease-in-out infinite;
}
@keyframes nb-wander {
  0%   { transform: translate(8vw, 12vh);  opacity: 0; }
  10%  { opacity: .55; }
  50%  { transform: translate(82vw, 36vh); opacity: .45; }
  90%  { opacity: .15; }
  100% { transform: translate(8vw, 12vh);  opacity: 0; }
}
@media (max-width: 767px) { .nb-light-point { display: none; } }
@media (max-width: 767px) {
  .nb-aurora-blob {
    animation: none !important;
    opacity: .15 !important;
    filter: blur(80px);
  }
}

/* ═════════════════════════════════════════════════════════════════════
   18 · Signal tape (hero hero-piece) — live LONG/SHORT/FLAT stream
   ═════════════════════════════════════════════════════════════════════ */
.nb-signal-tape {
  background: rgba(15,22,32,.62);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.03);
}
.nb-signal-tape-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--nb-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, rgba(74,107,133,.06), transparent);
  flex-wrap: wrap;
  gap: 8px;
}
.nb-signal-tape-head .nb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nb-signal-tape-head .nb-pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nb-orange);
  box-shadow: 0 0 8px rgba(232,93,44,.6);
  animation: nb-pulse 2s ease-in-out infinite;
}
.nb-signal-tape-rows {
  display: flex;
  flex-direction: column;
}
.nb-signal-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--nb-border);
  font-family: var(--nb-font-mono);
  font-size: 13px;
  transition: background var(--nb-dur) var(--nb-ease-out);
  position: relative;
  overflow: hidden;
}
.nb-signal-row:last-child { border-bottom: none; }
.nb-signal-row.nb-flash {
  background: rgba(232,93,44,.08);
}
.nb-signal-row.nb-flash::before {
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(232,93,44,.20), transparent);
  animation: nb-flash-sweep .6s ease-out;
  pointer-events: none;
}
@keyframes nb-flash-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.nb-signal-row.nb-enter {
  animation: nb-row-enter .55s var(--nb-ease-out);
}
@keyframes nb-row-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nb-signal-cells {
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--nb-text-dim);
  min-width: 0;
  flex-wrap: wrap;
}
.nb-signal-sym {
  color: var(--nb-text);
  font-weight: 600;
  letter-spacing: .02em;
  min-width: 76px;
}
.nb-signal-feat {
  color: var(--nb-muted);
  min-width: 130px;
}
.nb-signal-value {
  color: var(--nb-text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 56px;
}
.nb-signal-meta {
  color: var(--nb-muted-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.nb-signal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  border: 1px solid;
  white-space: nowrap;
  font-family: var(--nb-font-mono);
}
.nb-sig-long  { color: var(--nb-orange-hi);
                border-color: rgba(232,93,44,.4);
                background: rgba(232,93,44,.07); }
.nb-sig-short { color: var(--nb-slate-hi);
                border-color: rgba(123,160,194,.4);
                background: rgba(123,160,194,.07); }
.nb-sig-flat  { color: var(--nb-muted);
                border-color: var(--nb-border);
                background: transparent; }
.nb-sig-alert { color: var(--nb-orange-hi);
                border-color: rgba(232,93,44,.55);
                background: rgba(232,93,44,.12);
                box-shadow: 0 0 14px -4px rgba(232,93,44,.35); }
.nb-sig-arrow { font-size: 11px; line-height: 1; }
@media (max-width: 640px) {
  .nb-signal-feat { display: none; }
  .nb-signal-meta { display: none; }
  .nb-signal-cells { gap: 10px; }
  .nb-signal-row { padding: 10px 14px; font-size: 12px; }
}

/* ═════════════════════════════════════════════════════════════════════
   19 · Five-outputs grid (per-feature breakdown)
   ═════════════════════════════════════════════════════════════════════ */
.nb-output-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(74,107,133,.04);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r);
  font-family: var(--nb-font-mono);
  transition: border-color var(--nb-dur), background var(--nb-dur);
}
.nb-output-chip:hover {
  border-color: var(--nb-border-hi);
  background: rgba(74,107,133,.07);
}
.nb-output-chip .nb-output-key {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nb-muted);
}
.nb-output-chip .nb-output-val {
  font-size: 17px;
  font-weight: 600;
  color: var(--nb-text);
}
.nb-output-chip .nb-output-desc {
  font-family: var(--nb-font);
  font-size: 12.5px;
  color: var(--nb-muted);
  line-height: 1.45;
  margin-top: 4px;
}
.nb-output-chip {
  /* lift + glow on hover for liveliness */
  transition:
    transform var(--nb-dur) var(--nb-ease-out),
    border-color var(--nb-dur),
    background var(--nb-dur),
    box-shadow var(--nb-dur);
}
.nb-output-chip:hover {
  transform: translateY(-2px);
  background: rgba(74,107,133,.10);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.5);
}
.nb-output-chip.nb-emph {
  border-color: rgba(232,93,44,.30);
  background: rgba(232,93,44,.04);
  animation: nb-emph-breathe 4s ease-in-out infinite;
}
.nb-output-chip.nb-emph .nb-output-val { color: var(--nb-orange-hi); }
.nb-output-chip.nb-emph:hover {
  background: rgba(232,93,44,.08);
}
@keyframes nb-emph-breathe {
  0%,100% { border-color: rgba(232,93,44,.30);
            box-shadow: 0 0 0 0 rgba(232,93,44,0); }
  50%     { border-color: rgba(232,93,44,.55);
            box-shadow: 0 0 28px -8px rgba(232,93,44,.32); }
}

/* Live value cell inside chip — flash on update */
.nb-output-val {
  display: inline-block;
  transition: color var(--nb-dur);
}
.nb-output-val.nb-cell-flash-up {
  color: var(--nb-orange-hi) !important;
  text-shadow: 0 0 14px rgba(232,93,44,.5);
  transition: color 60ms, text-shadow 60ms;
}

/* ═════════════════════════════════════════════════════════════════════
   20 · Breathing glow on highlighted words (the "signal" focus piece)
   ═════════════════════════════════════════════════════════════════════ */
.nb-glow-pulse {
  display: inline-block;
  position: relative;
  animation: nb-glow-breath 4s ease-in-out infinite;
}
@keyframes nb-glow-breath {
  0%,100% { text-shadow: 0 0 14px rgba(232,93,44,.35); }
  50%     { text-shadow: 0 0 28px rgba(232,93,44,.65),
                          0 0 48px rgba(232,93,44,.30); }
}

/* ═════════════════════════════════════════════════════════════════════
   21 · Light scan — diagonal sweep across hero every 12s
   ═════════════════════════════════════════════════════════════════════ */
.nb-light-scan {
  position: relative;
  overflow: hidden;
}
.nb-light-scan::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 200%; height: 100%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(232,93,44,.05) 47%,
    rgba(255,255,255,.06) 50%,
    rgba(232,93,44,.05) 53%,
    transparent 65%
  );
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  animation: nb-scan-sweep 12s ease-in-out infinite;
}
@keyframes nb-scan-sweep {
  0%   { transform: translateX(-50%); }
  18%  { transform: translateX(50%); }
  100% { transform: translateX(50%); }
}

/* ═════════════════════════════════════════════════════════════════════
   22 · Mouse 3D parallax wrapper for hero panels
   ═════════════════════════════════════════════════════════════════════ */
.nb-tilt-wrap {
  perspective: 1500px;
  perspective-origin: 50% 50%;
}
.nb-tilt {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ═════════════════════════════════════════════════════════════════════
   23 · Cell shimmer on value tick (signal tape)
   ═════════════════════════════════════════════════════════════════════ */
.nb-signal-value {
  position: relative;
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background var(--nb-dur);
}
.nb-signal-value.nb-cell-flash {
  background: rgba(123,160,194,.18);
  color: var(--nb-slate-hi) !important;
}
.nb-signal-value.nb-cell-flash-up {
  background: rgba(232,93,44,.18);
  color: var(--nb-orange-hi) !important;
}

/* Cascading entry on initial render */
.nb-signal-row.nb-cascade {
  opacity: 0;
  transform: translateY(8px);
  animation: nb-cascade-in .55s var(--nb-ease-out) forwards;
  animation-delay: calc(var(--nb-i, 0) * 65ms);
}
@keyframes nb-cascade-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ═════════════════════════════════════════════════════════════════════
   24 · Signal tape tabs (Live signals | Sample backtest)
   ═════════════════════════════════════════════════════════════════════ */
.nb-tape-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(15,22,32,.55);
  border-radius: 8px;
  border: 1px solid var(--nb-border);
}
.nb-tape-tab {
  font-family: var(--nb-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--nb-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--nb-dur), background var(--nb-dur);
}
.nb-tape-tab:hover { color: var(--nb-text); }
.nb-tape-tab.nb-active {
  background: var(--nb-bg-card);
  color: var(--nb-orange);
  box-shadow: inset 0 0 0 1px rgba(232,93,44,.25);
}
.nb-tape-tab .nb-tab-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.nb-tape-panel { display: none; }
.nb-tape-panel.nb-active { display: block; animation: nb-fade-in .35s ease-out; }
@keyframes nb-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═════════════════════════════════════════════════════════════════════
   25 · Mini backtest panel (inside tab 2 of tape)
   ═════════════════════════════════════════════════════════════════════ */
.nb-mini-bt {
  padding: 18px 20px;
}
.nb-mini-bt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.nb-mini-bt-name {
  font-family: var(--nb-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--nb-text);
  letter-spacing: .04em;
  transition: opacity .35s;
}
.nb-mini-bt-ret {
  font-family: var(--nb-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--nb-orange-hi);
}
.nb-mini-bt-curve {
  width: 100%;
  height: 120px;
  border-radius: var(--nb-r-sm);
  background:
    linear-gradient(180deg, rgba(74,107,133,.04), transparent),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(74,107,133,.06) 23px 24px);
  position: relative;
  overflow: hidden;
}
.nb-mini-bt-curve svg { width: 100%; height: 100%; display: block; }
.nb-mini-bt-curve .nb-bt-line {
  fill: none;
  stroke: var(--nb-orange);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: nb-bt-draw 1.6s var(--nb-ease-out) forwards;
}
.nb-mini-bt-curve .nb-bt-area {
  fill: url(#nb-mini-bt-grad);
  opacity: 0;
  animation: nb-bt-fill 1.2s var(--nb-ease-out) .4s forwards;
}
@keyframes nb-bt-draw { to { stroke-dashoffset: 0; } }
@keyframes nb-bt-fill { to { opacity: .85; } }
.nb-mini-bt-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 14px;
  background: var(--nb-border);
  border-radius: var(--nb-r-sm);
  overflow: hidden;
}
.nb-mini-bt-kpi {
  background: var(--nb-bg-card);
  padding: 10px 6px;
  text-align: center;
}
.nb-mini-bt-kpi .nb-kpi-label {
  font-family: var(--nb-font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nb-muted);
}
.nb-mini-bt-kpi .nb-kpi-val {
  font-family: var(--nb-font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--nb-text);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.nb-mini-bt-kpi.nb-kpi-positive .nb-kpi-val { color: var(--nb-orange-hi); }
.nb-mini-bt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--nb-border);
  flex-wrap: wrap;
  gap: 8px;
}
.nb-mini-bt-link {
  font-family: var(--nb-font-mono);
  font-size: 12px;
  color: var(--nb-orange-hi);
  text-decoration: none;
  letter-spacing: .04em;
  transition: gap var(--nb-dur);
}
.nb-mini-bt-link:hover { color: var(--nb-orange); }

/* ═════════════════════════════════════════════════════════════════════
   26 · Explainer ribbon (compact, single-line on desktop)
   ═════════════════════════════════════════════════════════════════════ */
.nb-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 20px auto 0;
  flex-wrap: wrap;
}
.nb-ribbon-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  background: rgba(15,22,32,.55);
  border: 1px solid var(--nb-border);
  border-radius: 999px;
  font-family: var(--nb-font-mono);
  font-size: 11px;
  color: var(--nb-text-dim);
  transition: border-color var(--nb-dur), background var(--nb-dur);
  white-space: nowrap;
}
.nb-ribbon-step:hover {
  border-color: var(--nb-slate-hi);
  background: rgba(123,160,194,.06);
}
.nb-ribbon-step .nb-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--nb-slate);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.nb-ribbon-step:last-child .nb-step-num { background: var(--nb-orange); }
.nb-ribbon-arrow {
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: var(--nb-muted-dim);
  font-size: 12px;
  user-select: none;
}
@media (max-width: 720px) {
  .nb-ribbon { gap: 6px; }
  .nb-ribbon-arrow { display: none; }
  .nb-ribbon-step { font-size: 10.5px; padding: 6px 10px; }
}

/* ═════════════════════════════════════════════════════════════════════
   27b · Backtester card (4th pillar, distinct BETA visual)
   ═════════════════════════════════════════════════════════════════════ */
.nb-bt-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(232,93,44,.07) 0%, transparent 55%),
    var(--nb-bg-card);
  border: 1px solid rgba(232,93,44,.35);
  border-radius: var(--nb-r-lg);
  padding: 26px 28px;
  margin-top: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  transition: border-color var(--nb-dur), box-shadow var(--nb-dur);
}
.nb-bt-card:hover {
  border-color: rgba(232,93,44,.55);
  box-shadow:
    0 20px 50px -20px rgba(0,0,0,.5),
    0 0 28px -8px rgba(232,93,44,.20);
}
@media (min-width: 860px) {
  .nb-bt-card { grid-template-columns: 1.3fr 1fr; gap: 36px; }
}
.nb-bt-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  grid-column: 1 / -1;
  flex-wrap: wrap;
}
.nb-bt-title-block h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--nb-text);
}
.nb-bt-title-block p {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--nb-muted);
  line-height: 1.5;
}
.nb-bt-beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: var(--nb-orange);
  color: #fff;
  font-family: var(--nb-font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  border-radius: 999px;
  box-shadow: 0 0 20px -4px rgba(232,93,44,.65);
  flex-shrink: 0;
}
.nb-bt-beta-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: nb-pulse 1.6s ease-in-out infinite;
}
.nb-bt-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
}
.nb-bt-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: var(--nb-text-dim);
  line-height: 1.5;
}
.nb-bt-features li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nb-orange);
  box-shadow: 0 0 8px rgba(232,93,44,.55);
  margin-top: 8px;
  flex-shrink: 0;
}
.nb-bt-features li strong {
  color: var(--nb-text);
  font-weight: 600;
}
.nb-bt-sample {
  padding: 14px 16px;
  background: rgba(15,22,32,.55);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r);
  align-self: start;
}
.nb-bt-sample-name {
  font-family: var(--nb-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--nb-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nb-bt-sample-name::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nb-orange);
  box-shadow: 0 0 8px rgba(232,93,44,.6);
}
.nb-bt-sample-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--nb-border);
  border-radius: var(--nb-r-sm);
  overflow: hidden;
}
.nb-bt-sample-grid > div {
  background: var(--nb-bg-card);
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nb-bt-sample-label {
  font-family: var(--nb-font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nb-muted);
}
.nb-bt-sample-val {
  font-family: var(--nb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--nb-text);
}
.nb-bt-sample-orange { color: var(--nb-orange-hi) !important; }
.nb-bt-card-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid var(--nb-border);
}
.nb-bt-disclaimer {
  font-size: 12px;
  color: var(--nb-muted);
  font-style: italic;
}

/* ═════════════════════════════════════════════════════════════════════
   27c · Backtester section helpers (status banner, capabilities, roadmap)
   ═════════════════════════════════════════════════════════════════════ */
.nb-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 18px;
  background: rgba(232,93,44,.05);
  border: 1px solid rgba(232,93,44,.20);
  border-left: 3px solid var(--nb-orange);
  border-radius: var(--nb-r-sm);
  font-family: var(--nb-font);
  font-size: 13.5px;
  color: var(--nb-text-dim);
  line-height: 1.55;
}
.nb-status-banner-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--nb-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.nb-status-banner strong { color: var(--nb-text); font-weight: 600; }

/* Capability list (compact, with arrow markers) */
.nb-cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.nb-cap-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.5;
}
.nb-cap-list li::before {
  content: "›";
  color: var(--nb-orange);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
}
.nb-cap-list li strong { color: var(--nb-text); font-weight: 600; display:block; }
.nb-cap-list li span { color: var(--nb-muted); }

/* Highlighted spotlight row in leaderboard */
.nb-signal-row.nb-spotlight {
  background: rgba(232,93,44,.08);
  box-shadow: inset 3px 0 0 var(--nb-orange);
}
.nb-signal-row.nb-spotlight .nb-signal-sym,
.nb-signal-row.nb-spotlight .nb-signal-value {
  color: var(--nb-orange-hi);
}

/* Roadmap strip (3 columns: shipped / in progress / v1.0) */
.nb-roadmap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 56px;
  padding: 24px;
  background: rgba(15,22,32,.55);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
}
@media (min-width: 860px) {
  .nb-roadmap {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.nb-roadmap-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--nb-border);
  font-family: var(--nb-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nb-text);
  font-weight: 600;
}
.nb-roadmap-col-head .nb-rm-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.nb-rm-shipped .nb-rm-icon  { background: rgba(74,107,133,.20); color: var(--nb-slate-hi); }
.nb-rm-progress .nb-rm-icon { background: rgba(232,93,44,.18); color: var(--nb-orange-hi); }
.nb-rm-target .nb-rm-icon   { background: rgba(168,130,255,.18); color: var(--nb-ai); }
.nb-roadmap-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.nb-roadmap-col ul li {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12.5px;
  color: var(--nb-text-dim);
  line-height: 1.5;
}
.nb-roadmap-col ul li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-top: 7px;
  background: currentColor;
  opacity: .6;
}
.nb-rm-shipped li::before  { background: var(--nb-slate-hi); }
.nb-rm-progress li::before { background: var(--nb-orange); }
.nb-rm-target li::before   { background: var(--nb-ai); }

/* Version pill — clearer than just BETA */
.nb-version-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(232,93,44,.10);
  border: 1px solid rgba(232,93,44,.40);
  border-radius: 999px;
  font-family: var(--nb-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--nb-orange-hi);
}
.nb-version-pill .nb-version-tag {
  padding: 2px 7px;
  background: var(--nb-orange);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.nb-version-pill .nb-version-arrow { color: var(--nb-muted); }
.nb-version-pill .nb-version-target { color: var(--nb-ai); font-weight: 700; }

/* ═════════════════════════════════════════════════════════════════════
   28a · Pillar sample tile (replaces decorative sparkline in pillar cards)
   Mini live-signal cell — symbol · feature · value · signal badge.
   ═════════════════════════════════════════════════════════════════════ */
.nb-pillar-sample {
  margin-top: auto;        /* pushes tile to bottom of card */
  padding: 11px 13px;
  background: rgba(15,22,32,.55);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-sm);
  transition: border-color var(--nb-dur), background var(--nb-dur);
}
.nb-card:hover .nb-pillar-sample {
  border-color: var(--nb-border-hi);
  background: rgba(74,107,133,.10);
}
.nb-pillar-sample-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
  font-family: var(--nb-font-mono);
  font-size: 11px;
  gap: 8px;
}
.nb-pillar-sample-sym {
  color: var(--nb-text);
  font-weight: 600;
  letter-spacing: .02em;
}
.nb-pillar-sample-feat {
  color: var(--nb-muted);
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nb-pillar-sample-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nb-pillar-sample-val {
  font-family: var(--nb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
  color: var(--nb-text);
  letter-spacing: -0.01em;
}

/* ═════════════════════════════════════════════════════════════════════
   28b · Animated code card (request/response with typing reveal)
   ═════════════════════════════════════════════════════════════════════ */
.nb-code-card {
  position: relative;
}
.nb-code-card .nb-code-pane {
  padding: 16px 20px;
  font-family: var(--nb-font-mono);
  font-size: 13px;
  line-height: 1.55;
  min-height: 132px;
  position: relative;
}
.nb-code-card .nb-code-line {
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity .22s var(--nb-ease-out),
    transform .22s var(--nb-ease-out);
  white-space: pre;
}
.nb-code-card .nb-code-line.nb-typed {
  opacity: 1;
  transform: translateY(0);
}

/* Blinking caret cursor that follows the typing front */
.nb-caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--nb-orange);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: nb-caret-blink 0.85s steps(1) infinite;
}
@keyframes nb-caret-blink {
  50% { opacity: 0; }
}

/* "computing" indicator in the response area */
.nb-computing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nb-font-mono);
  font-size: 12px;
  color: var(--nb-slate-hi);
  opacity: 0;
  transition: opacity .25s var(--nb-ease-out);
  letter-spacing: .04em;
}
.nb-computing.nb-on { opacity: 1; }
.nb-computing-spinner {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--nb-slate-hi);
  border-top-color: transparent;
  animation: nb-spin 0.65s linear infinite;
}
@keyframes nb-spin {
  to { transform: rotate(360deg); }
}
.nb-computing-dots::after {
  content: '...';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: nb-dot-cycle 1s steps(4) infinite;
  letter-spacing: 0;
}
@keyframes nb-dot-cycle {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* Subtle pulse on the request/response status pill when transitioning */
.nb-resp-status {
  font-family: var(--nb-font-mono);
  font-size: 10px;
  color: var(--nb-muted);
  letter-spacing: .08em;
  transition: color var(--nb-dur);
}

/* ═════════════════════════════════════════════════════════════════════
   28c · Section background utilities (aurora soft + grid for non-hero)
   ═════════════════════════════════════════════════════════════════════ */
.nb-section-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.nb-aurora-soft-1 {
  position: absolute;
  width: 540px; height: 540px;
  background: rgba(74,107,133,.22);
  top: 25%; left: -160px;
  border-radius: 9999px;
  filter: blur(110px);
  animation: nb-aurora-drift-1 22s ease-in-out infinite;
  pointer-events: none;
}
.nb-aurora-soft-2 {
  position: absolute;
  width: 480px; height: 480px;
  background: rgba(232,93,44,.10);
  bottom: -120px; right: -140px;
  border-radius: 9999px;
  filter: blur(110px);
  animation: nb-aurora-drift-2 26s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 767px) {
  .nb-aurora-soft-1, .nb-aurora-soft-2 {
    animation: none !important;
    opacity: .15 !important;
    filter: blur(70px);
  }
}

/* ═════════════════════════════════════════════════════════════════════
   29 · Floating feature glyphs (hero bg, thematic motion)
   Real feature names + output keys rising upward, very subtle.
   Reinforces "we are computing features" without competing for attention.
   ═════════════════════════════════════════════════════════════════════ */
.nb-feature-glyphs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.nb-glyph {
  position: absolute;
  bottom: 0;
  font-family: var(--nb-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--nb-slate-hi);
  opacity: 0;
  white-space: nowrap;
  user-select: none;
  animation: nb-glyph-rise 22s linear infinite;
  will-change: transform, opacity;
}
.nb-glyph.nb-glyph-warm { color: var(--nb-orange-hi); }
.nb-glyph.nb-glyph-dim  { color: var(--nb-muted); font-size: 10px; }
@keyframes nb-glyph-rise {
  0%   { transform: translateY(20px); opacity: 0; }
  12%  { opacity: .16; }
  85%  { opacity: .16; }
  100% { transform: translateY(-110vh); opacity: 0; }
}
@media (max-width: 768px) {
  .nb-feature-glyphs { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-glyph { animation: none !important; opacity: 0 !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   27 · Rotating quote (below tape)
   ═════════════════════════════════════════════════════════════════════ */
.nb-quote-rotator {
  height: 28px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.nb-quote-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nb-font);
  font-size: 13.5px;
  color: var(--nb-muted);
  letter-spacing: .005em;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .55s var(--nb-ease-out),
    transform .55s var(--nb-ease-out);
}
.nb-quote-line.nb-on {
  opacity: 1;
  transform: translateY(0);
}
.nb-quote-line strong { color: var(--nb-text); font-weight: 600; }

/* ═════════════════════════════════════════════════════════════════════
   28 · Section background canvases (.nb-bg-host)
   ─────────────────────────────────────────────────────────────────────
   Mounted by nodebar_design.js (initSectionBgs) on sections with
   `data-nb-bg="<id>"`. Sits at z-index 0 behind existing aurora/grid
   decoration, so the new canvas bg coexists with legacy ambient layers
   without touching content. Renderer ids: lowpoly | signal-mesh | vol-ribbon
   ═════════════════════════════════════════════════════════════════════ */
.nb-bg-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.nb-bg-host > * {
  position: absolute;
  inset: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
   30 · v2 additions — NodeBar home redesign continued, 2026-05-31
   ─────────────────────────────────────────────────────────────────────────
   New utilities for the design-proposals migration. Namespaced under .nb-*.
   Visual reference: /static/mocks/design_proposals.html
   ═════════════════════════════════════════════════════════════════════════ */

/* Divider arrow — sits AT the section boundary (zero-height container).
   Line sits at the boundary line, badge straddles it with half in each section. */
.nb-divider-arrow {
  position: relative;
  height: 0;
  margin: 0;
  z-index: 5;
}
.nb-divider-arrow::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0,
    var(--nb-border-hi) 15%,
    var(--nb-border-hi) 85%,
    transparent 100%);
}
.nb-divider-arrow-badge {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 40px; height: 40px;
  background: var(--nb-bg);
  border: 1px solid var(--nb-border-hi);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--nb-orange-hi);
  font-size: 16px; font-weight: 600;
  box-shadow:
    0 0 0 4px var(--nb-bg),
    0 4px 14px -4px rgba(232,93,44,.35);
  transform: translateX(-50%);
  animation: nb-arrow-bounce 2.6s ease-in-out infinite;
}
@keyframes nb-arrow-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 0 0 4px var(--nb-bg), 0 4px 14px -4px rgba(232,93,44,.30);
  }
  50% {
    transform: translateX(-50%) translateY(3px);
    box-shadow: 0 0 0 4px var(--nb-bg), 0 10px 22px -8px rgba(232,93,44,.55);
  }
}

/* Legacy: T5 soft horizon glow (retained for fallback, NOT used on home anymore) */
.nb-section-glow-top {
  position: relative;
}
.nb-section-glow-top::before {
  content: "";
  position: absolute;
  top: -70px; left: 0; right: 0;
  height: 140px;
  background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(232,93,44,.07), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────
   10A V1 — Brushed-plate pillar card (more volume, no sparkline)
   ───────────────────────────────────────────────────────────────────── */
.nb-pillar-plate {
  --mx: 50%; --my: 50%;
  position: relative;
  background: linear-gradient(180deg, #21303F 0%, #1A2330 38%, #16202C 100%);
  border: 1px solid var(--nb-border-hi);
  border-radius: var(--nb-r-lg);
  padding: 22px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform var(--nb-dur) var(--nb-ease-out),
              border-color var(--nb-dur),
              box-shadow var(--nb-dur);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 50px -22px rgba(0,0,0,.6),
    0 0 0 1px rgba(232,93,44,.04);
}
.nb-pillar-plate::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(232,93,44,.10), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--nb-ease-out);
  pointer-events: none;
}
.nb-pillar-plate:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 30px 60px -22px rgba(0,0,0,.65),
    0 0 0 1px rgba(232,93,44,.12);
}
.nb-pillar-plate:hover::after { opacity: 1; }
.nb-pillar-plate[data-color="orange"]:hover { border-color: rgba(232,93,44,.42); }
.nb-pillar-plate[data-color="slate"]:hover  { border-color: rgba(123,160,194,.42); }
.nb-pillar-plate[data-color="macro"]:hover  { border-color: rgba(125,211,252,.42); }
.nb-pillar-plate[data-color="slate"]::after  { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(123,160,194,.10), transparent 60%); }
.nb-pillar-plate[data-color="macro"]::after  { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(125,211,252,.10), transparent 60%); }

.nb-pillar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; position: relative; z-index: 2; }
.nb-pillar-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--nb-text); margin: 0; }
.nb-pillar-kind { font-family: var(--nb-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--nb-muted); margin-top: 6px; }
.nb-pillar-count {
  font-family: var(--nb-font-mono); font-variant-numeric: tabular-nums;
  font-size: 54px; font-weight: 800; line-height: .95; letter-spacing: -0.025em;
}
.nb-pillar-plate[data-color="orange"] .nb-pillar-count { color: var(--nb-orange); }
.nb-pillar-plate[data-color="slate"]  .nb-pillar-count { color: var(--nb-slate-hi); }
.nb-pillar-plate[data-color="macro"]  .nb-pillar-count { color: var(--nb-macro); }

.nb-pillar-groups { list-style: none; padding: 0; margin: 18px 0 16px; display: grid; gap: 6px; position: relative; z-index: 2; }
.nb-pillar-groups li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: var(--nb-text-dim);
}
.nb-pillar-groups li::before { content: "›"; flex-shrink: 0; margin-top: 1px; }
.nb-pillar-plate[data-color="orange"] .nb-pillar-groups li::before { color: var(--nb-orange); }
.nb-pillar-plate[data-color="slate"]  .nb-pillar-groups li::before { color: var(--nb-slate-hi); }
.nb-pillar-plate[data-color="macro"]  .nb-pillar-groups li::before { color: var(--nb-macro); }

.nb-pillar-plate .nb-pillar-sample {
  margin-top: auto; padding: 11px 13px;
  background: rgba(15,22,32,.65);
  border: 1px solid var(--nb-border-hi);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  position: relative; z-index: 2;
}
.nb-pillar-plate .nb-pillar-sample-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--nb-font-mono); font-size: 11px; gap: 8px;
}
.nb-pillar-plate .nb-pillar-sample-sym  { color: var(--nb-text); font-weight: 600; }
.nb-pillar-plate .nb-pillar-sample-feat { color: var(--nb-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-pillar-plate .nb-pillar-sample-row {
  margin-top: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.nb-pillar-plate .nb-pillar-sample-val {
  font-family: var(--nb-font-mono); font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 700; color: var(--nb-text);
  transition: color .2s, text-shadow .2s;
}
.nb-pillar-plate .nb-pillar-sample-val.nb-cell-flash-up { color: var(--nb-orange-hi); text-shadow: 0 0 14px rgba(232,93,44,.5); }
.nb-pillar-plate[data-color="slate"]  .nb-pillar-sample-val.nb-cell-flash-up { color: var(--nb-slate-hi); text-shadow: 0 0 14px rgba(123,160,194,.5); }
.nb-pillar-plate[data-color="macro"]  .nb-pillar-sample-val.nb-cell-flash-up { color: var(--nb-macro); text-shadow: 0 0 14px rgba(125,211,252,.5); }

/* ─────────────────────────────────────────────────────────────────────
   10C V2 — Output chips: solid bg + backdrop blur (no wrapper)
   Overrides the very-transparent default that let mesh bleed through.
   ───────────────────────────────────────────────────────────────────── */
.nb-output-chip {
  background: rgba(26,35,48,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--nb-border-hi);
}
.nb-output-chip:hover {
  background: rgba(26,35,48,.92);
}
.nb-output-chip.nb-emph {
  background: rgba(26,35,48,.85);
  border-color: rgba(232,93,44,.35);
}
.nb-output-chip.nb-emph:hover {
  background: rgba(26,35,48,.92);
}

/* ─────────────────────────────────────────────────────────────────────
   B3 — SVG cable connector from chip to response line
   ───────────────────────────────────────────────────────────────────── */
.nb-cable-svg { position: absolute; inset: 0; pointer-events: none; z-index: 1; width: 100%; height: 100%; }
.nb-cable-path { stroke: var(--nb-orange); stroke-width: 1.2; fill: none; opacity: .45; }
.nb-cable-particle { fill: var(--nb-orange-hi); filter: drop-shadow(0 0 6px rgba(232,93,44,.7)); }

/* ─────────────────────────────────────────────────────────────────────
   10B V3 — Engine grid 2x2 (Backtester anchor)
   ───────────────────────────────────────────────────────────────────── */
.nb-engine-grid {
  background: rgba(15,22,32,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--nb-border-hi);
  border-radius: var(--nb-r-lg);
  padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 24px 50px -22px rgba(0,0,0,.55);
  max-width: 520px;
  margin: 28px auto 0;
}
.nb-engine-grid-eyebrow {
  font-family: var(--nb-font-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--nb-muted); text-align: center; margin-bottom: 14px;
}
.nb-engine-grid-cells {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--nb-border); border-radius: 8px; overflow: hidden;
}
.nb-engine-cell { background: rgba(26,35,48,.92); padding: 14px; }
.nb-engine-cell-label {
  font-family: var(--nb-font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--nb-orange-hi); font-weight: 600;
}
.nb-engine-cell-body { font-size: 12.5px; color: var(--nb-text-dim); margin-top: 5px; line-height: 1.5; }
.nb-engine-grid-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--nb-border); text-align: center;
  font-family: var(--nb-font-mono); font-size: 10.5px; color: var(--nb-muted);
}

/* ─────────────────────────────────────────────────────────────────────
   BT2 — Status banner soft
   ───────────────────────────────────────────────────────────────────── */
.nb-status-soft {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(74,107,133,.08);
  border: 1px solid var(--nb-border);
  border-left: 2px solid var(--nb-slate-hi);
  border-radius: var(--nb-r-sm);
  font-size: 13px; color: var(--nb-muted); line-height: 1.55;
}
.nb-status-soft strong { color: var(--nb-text); font-weight: 600; }
.nb-status-soft .nb-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nb-orange);
  box-shadow: 0 0 6px rgba(232,93,44,.6);
  flex-shrink: 0;
  animation: nb-pulse 2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   BT3 — Version pill simplified
   ───────────────────────────────────────────────────────────────────── */
.nb-version-simple {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px;
  background: rgba(232,93,44,.08);
  border: 1px solid rgba(232,93,44,.30);
  border-radius: 999px;
  font-family: var(--nb-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--nb-orange-hi);
}
.nb-version-simple .nb-v-tag {
  padding: 2px 7px; background: var(--nb-orange); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; border-radius: 4px;
}
.nb-version-simple .nb-v-sep { color: var(--nb-muted); }
.nb-version-simple .nb-v-bar {
  width: 60px; height: 3px;
  background: rgba(232,93,44,.18);
  border-radius: 999px; overflow: hidden; display: inline-block;
}
.nb-version-simple .nb-v-bar i { display: block; width: 90%; height: 100%; background: var(--nb-orange-hi); }

/* ─────────────────────────────────────────────────────────────────────
   Pricing extras — growth-tier connector, multiplier ribbon, founder ribbon
   ───────────────────────────────────────────────────────────────────── */
.nb-growth-line {
  position: absolute; top: -8px; left: 0; right: 0;
  height: 40px; pointer-events: none; z-index: 0;
}
.nb-growth-line svg { width: 100%; height: 100%; display: block; }
.nb-mult-ribbon {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 14px;
  font-family: var(--nb-font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  max-width: 1024px; margin-left: auto; margin-right: auto;
}
.nb-mult-ribbon span { text-align: center; color: var(--nb-muted); }
.nb-mult-ribbon span b { color: var(--nb-orange-hi); font-weight: 700; }

.nb-founder-ribbon {
  position: absolute; top: 14px; right: -36px;
  transform: rotate(35deg);
  background: linear-gradient(135deg, var(--nb-orange-hi), var(--nb-orange));
  color: #fff;
  padding: 3px 36px;
  font-family: var(--nb-font-mono);
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  box-shadow: 0 4px 10px -2px rgba(232,93,44,.45);
  z-index: 5;
}

/* Founder pill clickeable (orange, was purple — restore purple when AI builder returns) */
.nb-founder-pill {
  font-family: var(--nb-font-mono);
  font-size: 10px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: .08em;
  background: rgba(232,93,44,.18);
  color: var(--nb-orange-hi);
  border: 1px solid rgba(232,93,44,.40);
  cursor: pointer;
  transition: background var(--nb-dur), transform var(--nb-dur-fast);
  user-select: none;
}
.nb-founder-pill:hover { background: rgba(232,93,44,.28); }
.nb-founder-pill:active { transform: scale(0.97); }
.nb-founder-pill.nb-copied {
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.5);
  color: #10b981;
}

/* Plan card row helpers (sync with /pricing partial info density) */
.nb-plan-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px;
  padding: 3px 0;
  gap: 12px;
}
.nb-plan-row-l {
  color: var(--nb-muted);
  white-space: nowrap;
}
.nb-plan-row-r {
  color: var(--nb-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nb-plan-row-r.nb-plan-row-mono { font-family: var(--nb-font-mono); font-weight: 600; }
.nb-plan-row-r.nb-plan-row-accent { color: var(--nb-orange-hi); font-weight: 600; }
.nb-plan-row-r.nb-plan-row-dim { color: var(--nb-muted-dim); }
.nb-plan-row-r.nb-plan-row-small { font-size: 11px; }
.nb-plan-sep {
  height: 1px;
  background: var(--nb-border);
  margin: 8px 0;
  border: 0;
}
.nb-plan-subheader {
  font-family: var(--nb-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nb-orange);
  font-weight: 700;
  margin: 4px 0 4px;
}
.nb-plan-subheader-slate { color: var(--nb-slate-hi); }
.nb-plan-row-link {
  color: var(--nb-orange-hi);
  text-decoration: none;
  font-weight: 500;
  font-size: 11px;
}
.nb-plan-row-link:hover { text-decoration: underline; }

/* Diagonal scan lines bg — 135° repeating scan over dark base.
   Used as the global /pricing page background. Static, no animation, mobile-cheap.
   No top radial: it concentrated under the hero at page scale and created a
   visible "halo" around the headline. Uniform scan keeps the surface even. */
.nb-diagonal-bg {
  background:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 22px,
      rgba(74,107,133,.04) 22px, rgba(74,107,133,.04) 23px),
    var(--nb-bg);
}

/* Pricing bg — static grid + soft slate radial from top.
   No animation. Reads as "engineered surface" without competing with cards. */
.nb-pricing-bg {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(74,107,133,.10), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(232,93,44,.03), transparent 70%),
    linear-gradient(rgba(74,107,133,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,107,133,.045) 1px, transparent 1px),
    var(--nb-bg);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px, 100% 100%;
  background-position: top center, bottom center, 0 0, 0 0, 0 0;
}

/* P7 — Callout tile */
.nb-callout-tile {
  margin-top: 22px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(74,107,133,.10), rgba(15,22,32,.4));
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.nb-callout-tile h4 { font-size: 15px; font-weight: 600; color: var(--nb-text); margin: 0; }
.nb-callout-tile p  { font-size: 12.5px; color: var(--nb-muted); margin: 3px 0 0; }

/* ─────────────────────────────────────────────────────────────────────
   F1 — Pre-footer CTA strip
   ───────────────────────────────────────────────────────────────────── */
.nb-prefooter {
  position: relative;
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(232,93,44,.10) 0%, rgba(15,22,32,.5) 50%, rgba(74,107,133,.12) 100%);
  border-top: 1px solid var(--nb-border);
  border-bottom: 1px solid var(--nb-border);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.nb-prefooter-text { flex: 1; min-width: 220px; }
.nb-prefooter-text h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--nb-text); }
.nb-prefooter-text p  { margin: 0; font-size: 12.5px; color: var(--nb-muted); }
.nb-prefooter-form { display: flex; gap: 8px; flex: 1; min-width: 240px; max-width: 460px; }
.nb-prefooter-form input {
  flex: 1; padding: 10px 12px; font-size: 13px;
  background: rgba(15,22,32,.7);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-sm);
  color: var(--nb-text); font-family: var(--nb-font);
  transition: border-color var(--nb-dur);
}
.nb-prefooter-form input:focus { outline: 0; border-color: var(--nb-orange-hi); }

/* ─────────────────────────────────────────────────────────────────────
   F2 + F3 — Footer enhancements (horizon glow + latency spark)
   ───────────────────────────────────────────────────────────────────── */
.nb-footer-glow { position: relative; }
.nb-footer-glow::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(232,93,44,.04) 0, transparent 100%);
  pointer-events: none; z-index: 0;
}
.nb-latency-spark { display: inline-flex; gap: 1.5px; align-items: flex-end; height: 16px; }
.nb-latency-spark i {
  width: 2px; background: var(--nb-slate-hi); border-radius: 1px;
  animation: nb-spark-bar 4s ease-in-out infinite;
}
@keyframes nb-spark-bar {
  0%, 100% { height: 30%; }
  25%      { height: 65%; }
  50%      { height: 90%; }
  75%      { height: 45%; }
}

/* ─────────────────────────────────────────────────────────────────────
   M2 — KPI bar grouped pill
   ───────────────────────────────────────────────────────────────────── */
.nb-kpi-bar {
  display: inline-flex; align-items: center; gap: 0;
  padding: 14px 8px;
  background: rgba(15,22,32,.55);
  border: 1px solid var(--nb-border);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-wrap: wrap; justify-content: center;
}
.nb-kpi-bar-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 22px;
  position: relative;
}
.nb-kpi-bar-item + .nb-kpi-bar-item::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 20px; background: var(--nb-border);
}
.nb-kpi-bar-num {
  font-family: var(--nb-font-mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; color: var(--nb-text);
}
.nb-kpi-bar-lbl {
  font-family: var(--nb-font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nb-muted);
}

/* ─────────────────────────────────────────────────────────────────────
   M3 — Ribbon flow with pulsing arrows + clickable steps
   ───────────────────────────────────────────────────────────────────── */
a.nb-ribbon-step { text-decoration: none; cursor: pointer; }
.nb-ribbon a.nb-ribbon-step:hover {
  border-color: var(--nb-slate-hi);
  background: rgba(123,160,194,.08);
  transform: translateY(-1px);
}
.nb-ribbon .nb-ribbon-arrow { animation: nb-ribbon-arrow-pulse 5s ease-in-out infinite; }
.nb-ribbon .nb-ribbon-arrow:nth-of-type(2) { animation-delay: .6s; }
.nb-ribbon .nb-ribbon-arrow:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes nb-ribbon-arrow-pulse {
  0%, 100% { transform: translateX(0); opacity: .55; color: var(--nb-muted-dim); }
  30%      { transform: translateX(4px); opacity: 1; color: var(--nb-orange-hi); }
}

/* ─────────────────────────────────────────────────────────────────────
   C1 + C2 + C3 — Cursor halo on cards + warm lift + top highlight
   ───────────────────────────────────────────────────────────────────── */
.nb-card[data-cardhalo] { --mx: 50%; --my: 50%; }
.nb-card[data-cardhalo]::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(232,93,44,.12), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--nb-ease-out);
  pointer-events: none;
  border-radius: inherit;
}
.nb-card[data-cardhalo]:hover {
  transform: translateY(-4px) scale(1.005);
  border-color: rgba(232,93,44,.30);
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,.6),
    0 18px 40px -18px rgba(232,93,44,.18),
    0 0 0 1px rgba(232,93,44,.06);
}
.nb-card[data-cardhalo]:hover::after { opacity: 1; }
/* Permanent top highlight via bg gradient (no ::before to avoid clobbering .nb-card-featured::before lit edge) */
.nb-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025) 0, transparent 35%),
    var(--nb-bg-card);
}

/* ═════════════════════════════════════════════════════════════════════
   29 · Reduced motion override
   ═════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .nb-ticker-track,
  .nb-aurora-blob,
  .nb-pulse-dot,
  .nb-light-point,
  .nb-light-scan::after,
  .nb-glow-pulse { animation: none !important; }
  .nb-bg-host { display: none; }
}

/* ── Ticker + signal tape: feature names link to their docs ─────────── */
a.nb-tk-item { text-decoration: none; }
a.nb-tk-item:hover .nb-tk-feat { color: var(--nb-orange-hi); }
a.nb-signal-feat { text-decoration: none; }
a.nb-signal-feat:hover {
  color: var(--nb-orange-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
}