/* ---------- Reset (per spec) ---------- */
html, body {
  width: 100%;
  height: 100%;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  display: block;
}

/* ---------- Theme tokens ---------- */
:root {
  --bg: #0b0c0f;
  --bg-alt: #111318;
  --card: #171a20;
  --card-border: rgba(255, 255, 255, 0.08);
  --text: #eceef1;
  --text-dim: #9aa0aa;
  --accent: #f2a900;
  --accent-2: #ffcf5c;
  --accent-dark: #b57e00;
  --pos: #33c17a;
  --neg: #e0524b;
  --radius: 1.1rem;
  --container: 120rem;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ---------- Base ---------- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

p { margin: 0 0 1.6rem; color: var(--text-dim); }

a {
  color: inherit;
  text-decoration: none;
}

ul { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2.4rem;
}

.accent { color: var(--accent); }

.section {
  padding: 8rem 0;
  background: var(--section-bg, transparent);
  color: var(--text);
  scroll-margin-top: 22rem;
}

/* Light section themes — alternated with the default dark sections to break
   up the black background. Overriding the custom properties here means every
   child component (cards, tables, buttons) picks up the right colors for
   free, since they're all already built on var(--text)/var(--card)/etc. */
.theme-white {
  --section-bg: #f7f9f8;
  --text: #181b1e;
  --text-dim: #5a6068;
  --card: #ffffff;
  --card-border: rgba(15, 18, 20, 0.08);
  --accent: var(--accent-dark);
  --pos: #1f8a54;
  --neg: #c23a32;
}
.theme-green {
  --section-bg: #eaf5ee;
  --text: #12201a;
  --text-dim: #4c5c52;
  --card: #ffffff;
  --card-border: rgba(18, 32, 26, 0.1);
  --accent: var(--accent-dark);
  --pos: #1f8a54;
  --neg: #c23a32;
}
.theme-yellow {
  --section-bg: #fff6db;
  --text: #241d08;
  --text-dim: #6d5c30;
  --card: #ffffff;
  --card-border: rgba(34, 26, 6, 0.1);
  --accent: var(--accent-dark);
  --pos: #1f8a54;
  --neg: #c23a32;
}

.section-title {
  font-size: clamp(2.4rem, 5.5vw, 3rem);
  text-align: center;
  text-transform: uppercase;
}
.section-title.left { text-align: left; }

.section-sub {
  text-align: center;
  max-width: 60rem;
  margin: 0 auto 5rem;
  color: var(--text-dim);
}
.section-sub.left { text-align: left; margin: 0 0 2rem; }

.grid { display: grid; gap: 3rem; }
.grid-2 { grid-template-columns: 1fr 1fr; align-items: center; gap: 6rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 3.2rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 1.4rem 3rem;
  min-height: 4.8rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #1a1200;
}
.btn-primary:hover { background: var(--accent); box-shadow: 0 0 3.2rem rgba(242, 169, 0, 0.45); }

.btn-ghost {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-outline {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-outline:hover { background: var(--accent); color: #1a1200; }

.btn.full { display: block; text-align: center; width: 100%; }

/* ---------- Header ----------
   Two permanent rows, both part of the sticky header: a top row (logo +
   CTA) and a nav row that's always visible and wraps onto extra lines on
   narrow screens instead of collapsing behind a hamburger toggle. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(11, 12, 15, 0.92);
  backdrop-filter: blur(0.8rem);
  border-bottom: 1px solid var(--card-border);
}
main { padding-top: var(--header-h, 22rem); }
.header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0 3.2rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
}
.logo-mark {
  display: block;
  height: 8.8rem;
  width: auto;
}
.logo-text {
  display: block;
  height: 5.2rem;
  width: auto;
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem 2.4rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.2rem 2.4rem 1.6rem;
  border-top: 1px solid var(--card-border);
}
.nav-divider {
  width: 1px;
  height: 1.6rem;
  background: var(--card-border);
  flex: none;
}
.main-nav a {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--accent); }

.header-cta {
  padding: 0.8rem 2.2rem;
  text-align: center;
  line-height: 1.3;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 14rem 0 16rem;
  min-height: 72rem;
  display: flex;
  align-items: center;
}
.hero.hero-condensed {
  padding: 5.6rem 0 4.8rem;
  min-height: auto;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0b0c0f;
}
.hero-overlay {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(60rem 40rem at 15% 20%, rgba(242, 169, 0, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(11, 12, 15, 0.55) 0%, rgba(11, 12, 15, 0.72) 55%, rgba(11, 12, 15, 0.95) 100%);
  animation: mesh-drift 18s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero-overlay { animation: none; }
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 76rem;
}
.eyebrow {
  color: var(--accent);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
  text-shadow: 0 0 20px color-mix(in srgb, currentColor 55%, transparent);
}
.hero h1 {
  font-size: clamp(3.4rem, 9vw, 6.4rem);
  margin-bottom: 2rem;
}
.hero-h1-line1 { white-space: nowrap; }
.hero-sub {
  font-size: clamp(1.5rem, 2.6vw, 1.8rem);
  max-width: 60rem;
  margin-bottom: 3.2rem;
}
.hero-actions { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.hero-actions .btn { flex: 1 1 auto; text-align: center; }

/* ---------- Hero ticker ---------- */
.hero-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  height: 5.4rem;
  background: rgba(11, 12, 15, 0.8);
  backdrop-filter: blur(0.6rem);
  border-top: 1px solid var(--card-border);
}
.ticker-live {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 2.4rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--pos);
  border-right: 1px solid var(--card-border);
}
.live-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--pos);
  animation: ticker-pulse 1.6s ease-in-out infinite;
}
@keyframes ticker-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.ticker-viewport {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 4.8rem;
  padding-left: 4.8rem;
  animation: ticker-scroll 32s linear infinite;
}
.hero-ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
  font-size: 1.4rem;
}
.ticker-symbol { font-weight: 800; letter-spacing: 0.04em; }
.ticker-price { color: var(--text-dim); }
.ticker-change.pos { color: var(--pos); font-weight: 700; }
.ticker-change.neg { color: var(--neg); font-weight: 700; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Category selector — 3D flip cards ---------- */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}
.flip-card {
  display: block;
  perspective: 100rem;
  height: 34rem;
  cursor: pointer;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-inner { transform: rotateY(180deg); }

.flip-front, .flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  padding: 3.2rem 2.8rem;
  display: flex;
  flex-direction: column;
}
.flip-front {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--panel-accent, var(--accent));
}
.flip-front .icon-circle { margin-bottom: 2rem; }
.flip-front .icon-circle { background: color-mix(in srgb, var(--panel-accent, var(--accent)) 15%, transparent); }
.flip-front .icon-circle svg { stroke: var(--panel-accent, var(--accent)); }

.flip-back {
  background: linear-gradient(160deg, var(--panel-accent, var(--accent)), color-mix(in srgb, var(--panel-accent, var(--accent)) 35%, var(--bg)));
  color: #fff;
  transform: rotateY(180deg);
  justify-content: flex-end;
}
.flip-back .panel-kicker { color: rgba(255, 255, 255, 0.85); text-shadow: none; }
.flip-back .panel-link { color: #fff; }
.flip-back p { color: rgba(255, 255, 255, 0.9); }

/* Per-card accent colors */
.flip-grid .flip-card:nth-child(1) { --panel-accent: #4f8ef7; }
.flip-grid .flip-card:nth-child(2) { --panel-accent: #2dd4a0; }
.flip-grid .flip-card:nth-child(3) { --panel-accent: #f2a900; }

.panel-kicker {
  display: block;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--panel-accent, var(--accent));
  margin-bottom: 0.6rem;
  text-shadow: 0 0 16px color-mix(in srgb, var(--panel-accent, var(--accent)) 45%, transparent);
}
.flip-front h3, .flip-back h3 { font-size: 2.2rem; margin-bottom: 1rem; }
.flip-front p, .flip-back p { font-size: 1.4rem; margin-bottom: 1.2rem; }
.flip-back p { max-width: 32ch; }
.panel-link {
  display: inline-block;
  margin-top: auto;
  color: var(--panel-accent, var(--accent));
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.category-kicker {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.4rem;
  text-shadow: 0 0 20px color-mix(in srgb, currentColor 55%, transparent);
}

/* ---------- Category page title bar ---------- */
.category-header {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt, #111318);
  padding: 4.4rem 0 4rem;
  color: var(--text, #eceef1);
  border-bottom: 1px solid rgba(242, 169, 0, 0.2);
}
.category-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80rem 18rem at 0% 100%, rgba(242, 169, 0, 0.09), transparent 55%),
    radial-gradient(50rem 14rem at 100% 0%,  rgba(242, 169, 0, 0.06), transparent 50%);
  pointer-events: none;
  animation: mesh-drift 18s ease-in-out infinite alternate;
}
.category-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.6;
}
@keyframes mesh-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-2%, 2%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .category-header::before { animation: none; }
}
.category-header .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.category-header .category-kicker {
  display: inline-flex;
  align-items: center;
  background: rgba(242, 169, 0, 0.10);
  border: 1px solid rgba(242, 169, 0, 0.30);
  color: var(--accent-2, #ffcf5c);
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 0 10px rgba(242,169,0,0.35);
  white-space: nowrap;
  flex-shrink: 0;
}
.category-header-text { flex: 1; min-width: 0; }
.category-header h1, .category-header h2 {
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
  color: var(--text, #eceef1);
  text-shadow: 0 0 40px rgba(242, 169, 0, 0.18), 0 2px 4px rgba(0,0,0,0.4);
  line-height: 1.05;
}
.category-header p {
  color: var(--text-dim, #9aa0aa);
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 52ch;
}
@media (max-width: 600px) {
  .category-header .container { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ---------- Timeframes ---------- */
.timeframe-flip .flip-front, .timeframe-flip .flip-back { gap: 0.8rem; }
.timeframe-flip .flip-front .tag, .timeframe-flip .flip-back .tag { align-self: flex-start; }
.timeframe-sample {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.analysis-result[hidden] { display: none; }

/* ---------- Apex Analysis terminal ----------
   A deliberately distinct visual system, scoped entirely to .apex-terminal,
   to signal "this is a different, more clinical tool" than AlphaTrade Desk's
   recommendation-card style. Content here is strictly fundamental + technical
   data — no scores, tiers, signals, or trade levels. */
.apex-terminal {
  position: relative;
  overflow: hidden;
  background: #050810;
  font-family: 'Rajdhani', sans-serif;
}
.apex-scanlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.35) 2px, rgba(0, 0, 0, 0.35) 4px);
  pointer-events: none;
}
.apex-gridlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(0, 150, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 150, 255, 0.06) 1px, transparent 1px);
  background-size: 5rem 5rem;
  pointer-events: none;
}
.apex-terminal .section { position: relative; z-index: 2; }

.apex-eyebrow {
  font-family: 'Orbitron', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: #f0b429;
  text-align: center;
  margin-bottom: 1.6rem;
}
.apex-heading {
  font-family: 'Orbitron', monospace;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 24px rgba(0, 200, 255, 0.35);
  margin-bottom: 1.6rem;
}
.apex-sub {
  text-align: center;
  max-width: 60rem;
  margin: 0 auto 4rem;
  color: #8090aa;
  font-size: 1.6rem;
}

.apex-form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 60rem;
  margin: 0 auto 4rem;
}
.apex-form #ticker-input {
  padding: 1.4rem 2rem;
  border-radius: 0.2rem;
  border: 1px solid #1a2a4a;
  background: #0a1020;
  color: #c8d8f0;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}
.apex-form #ticker-input::placeholder { color: #4a6080; }
.apex-form #ticker-input:focus {
  outline: none;
  border-color: #00c8ff;
  box-shadow: 0 0 0 1px #00c8ff, 0 0 16px rgba(0, 200, 255, 0.3);
}

.apex-form #ticker-question {
  padding: 1.4rem 2rem;
  border-radius: 0.2rem;
  border: 1px solid #1a2a4a;
  background: #0a1020;
  color: #c8d8f0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 7rem;
}
.apex-form #ticker-question::placeholder { color: #4a6080; }
.apex-form #ticker-question:focus {
  outline: none;
  border-color: #00c8ff;
  box-shadow: 0 0 0 1px #00c8ff, 0 0 16px rgba(0, 200, 255, 0.3);
}

.apex-btn {
  display: inline-block;
  padding: 1.4rem 3.2rem;
  min-height: 4.8rem;
  border-radius: 0.2rem;
  border: 1px solid #00c8ff;
  background: rgba(0, 200, 255, 0.08);
  color: #00c8ff;
  font-family: 'Orbitron', monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.apex-btn:hover { background: rgba(0, 200, 255, 0.18); box-shadow: 0 0 16px rgba(0, 200, 255, 0.3); }

/* Result header */
.apex-result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 2.4rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid #1a2a4a;
}
.apex-result-label {
  font-family: 'Orbitron', monospace;
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: #00c8ff;
  margin-bottom: 0.8rem;
}
.apex-result-ticker {
  font-family: 'Orbitron', monospace;
  font-size: 3.6rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
  line-height: 1;
}
.apex-result-meta { font-size: 1.3rem; color: #8090aa; margin-top: 0.6rem; letter-spacing: 0.03em; }
.apex-result-price-block { text-align: right; }
.apex-result-price-label { font-size: 1.1rem; letter-spacing: 0.15em; color: #4a6080; text-transform: uppercase; margin-bottom: 0.4rem; }
.apex-result-price { font-family: 'Orbitron', monospace; font-size: 2.6rem; font-weight: 900; color: #fff; }
.apex-result-change {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.3rem;
  margin-top: 0.6rem;
  padding: 0.3rem 1rem;
  border-radius: 0.2rem;
  display: inline-block;
}
.apex-result-change.pos { color: #00e676; background: rgba(0, 230, 118, 0.08); border: 1px solid rgba(0, 230, 118, 0.25); }
.apex-result-change.neg { color: #ff3d57; background: rgba(255, 61, 87, 0.08); border: 1px solid rgba(255, 61, 87, 0.25); }

.apex-demo-note {
  text-align: center;
  font-size: 1.2rem;
  font-style: italic;
  color: #4a6080;
  margin-top: 2.4rem;
}

/* Agent panels */
.apex-panel {
  background: #0a1020;
  border: 1px solid #1a2a4a;
  border-radius: 0.3rem;
  overflow: hidden;
  margin-bottom: 2rem;
}
.apex-panel-header {
  padding: 1.8rem 2.2rem;
  border-bottom: 1px solid #1a2a4a;
  border-top: 3px solid #00c8ff;
}
.apex-panel-id {
  display: block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: #00c8ff;
  margin-bottom: 0.6rem;
}
.apex-panel-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.02em;
}
.apex-panel-body { padding: 2rem 2.2rem; }

.apex-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; }
.apex-kv {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(26, 42, 74, 0.6);
  font-size: 1.3rem;
}
.apex-kv span { color: #8090aa; }
.apex-kv strong { font-family: 'Share Tech Mono', monospace; color: #c8d8f0; font-weight: 600; text-align: right; }

.apex-verdict {
  margin-top: 1.6rem;
  padding: 1.4rem 1.8rem;
  background: rgba(0, 200, 255, 0.05);
  border-left: 3px solid #00c8ff;
  font-size: 1.3rem;
  color: #8090aa;
  line-height: 1.6;
}
.apex-question-text {
  margin: 0;
  font-size: 1.6rem;
  font-style: italic;
  color: #c8d8f0;
  line-height: 1.6;
}

/* Static feature list (shown before a search is run) */
.apex-list { display: flex; flex-direction: column; gap: 1.2rem; }
.apex-list li { position: relative; padding-left: 2.2rem; font-size: 1.4rem; color: #8090aa; }
.apex-list li::before { content: "\25B8"; position: absolute; left: 0; color: #00c8ff; }

.apex-features .grid-2 { gap: 3rem; align-items: stretch; }

/* Real report example gallery */
.apex-example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 76rem;
  margin: 0 auto;
}
.apex-example-card {
  margin: 0;
  background: #0a1020;
  border: 1px solid #1a2a4a;
  border-radius: 0.3rem;
  overflow: hidden;
}
.apex-example-card img {
  width: 100%;
  height: auto;
  display: block;
}
.apex-example-card figcaption {
  padding: 1.6rem 1.8rem;
  font-size: 1.3rem;
  color: #8090aa;
  border-top: 1px solid #1a2a4a;
  text-align: center;
}

/* ---------- Pricing category tags ---------- */
.pricing-tag { display: inline-block; margin-bottom: 1.6rem; }

/* ---------- Steps ---------- */
.step-card { text-align: center; }
.icon-circle {
  width: 6rem;
  height: 6rem;
  margin: 0 auto 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 169, 0, 0.12);
}
.icon-circle svg {
  width: 2.8rem;
  height: 2.8rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step-card h3 { font-size: 1.9rem; }

/* ---------- Weekly market events ---------- */
.events-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}
.event-day {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.event-day.is-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(242, 169, 0, 0.3);
}
.event-day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--card-border);
}
.event-day-label {
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 1.4rem;
}
.event-day-date { font-size: 1.2rem; color: var(--text-dim); }

.event-list { display: flex; flex-direction: column; gap: 1.6rem; }
.event-item { padding-bottom: 1.6rem; border-bottom: 1px solid var(--card-border); }
.event-item:last-child { border-bottom: none; padding-bottom: 0; }

.event-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.impact-dot { width: 0.9rem; height: 0.9rem; border-radius: 50%; flex: none; }
.impact-high { background: var(--neg); }
.impact-medium { background: var(--accent); }
.event-time { font-size: 1.2rem; color: var(--text-dim); }
.event-title { font-size: 1.4rem; font-weight: 600; color: var(--text); margin: 0 0 0.8rem; }
.event-meta { display: flex; gap: 1.6rem; font-size: 1.2rem; color: var(--text-dim); }
.event-meta strong { color: var(--text); }
.event-empty { color: var(--text-dim); font-size: 1.3rem; font-style: italic; }

/* ---------- Live alert feed ---------- */
.feed-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3.2rem;
}
.feed-filter {
  padding: 0.9rem 2rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text-dim);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.feed-filter:hover { border-color: var(--accent); color: var(--text); }
.feed-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1200;
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 76rem;
  margin: 0 auto;
}
.feed-item {
  display: flex;
  gap: 1.8rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2rem 2.4rem;
}
.feed-item[hidden] { display: none; }
.feed-item.is-autobot {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(242, 169, 0, 0.3);
}
.feed-avatar {
  flex: none;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  background: rgba(242, 169, 0, 0.1);
  color: var(--accent);
  font-weight: 900;
  font-size: 1.6rem;
}
.feed-item.is-autobot .feed-avatar {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #1a1200;
}
.feed-body { flex: 1; min-width: 0; }
.feed-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.feed-name { font-weight: 800; font-size: 1.5rem; }
.feed-time { font-size: 1.2rem; color: var(--text-dim); }
.feed-tag { margin-left: auto; }
.feed-text { margin: 0; }
.feed-mirror-note {
  display: block;
  margin-top: 1rem;
  font-size: 1.2rem;
  color: var(--text-dim);
  font-style: italic;
}
.feed-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-dim);
  font-size: 1.4rem;
  font-style: italic;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius);
}

.discord-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
  max-width: 76rem;
  margin: 4rem auto 0;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2.4rem 2.8rem;
}
.discord-strip-copy { display: flex; align-items: center; gap: 1.8rem; }
.discord-strip-copy h3 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.discord-strip-copy p { margin: 0; font-size: 1.3rem; }
.discord-hash {
  flex: none;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  background: rgba(242, 169, 0, 0.1);
  color: var(--accent);
  font-size: 2rem;
  font-weight: 800;
}
.discord-badge-inline {
  color: var(--accent);
  font-weight: 800;
}

/* ---------- Pricing add-on ---------- */
.addon-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  max-width: 90rem;
  margin: 4rem auto 0;
  background: var(--card);
  border: 1px dashed var(--card-border);
  border-radius: var(--radius);
  padding: 3.2rem;
}
.addon-info { flex: 1; min-width: 26rem; }
.addon-info h3 { font-size: 2rem; margin-bottom: 1rem; }
.addon-info p { margin-bottom: 0; }
.addon-note { font-size: 1.2rem; color: var(--text-dim); font-style: italic; margin-top: 1rem !important; }
.addon-action { flex: none; text-align: center; }
.addon-action .price { font-size: 3rem; font-weight: 800; color: var(--text); margin-bottom: 1.6rem; }
.addon-action .price span { font-size: 1.4rem; color: var(--text-dim); font-weight: 400; }

/* ---------- Panel / mockup ---------- */
.panel-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.panel-copy h2 { font-size: clamp(2.6rem, 6vw, 3.6rem); }

.panel-mockup { display: flex; justify-content: center; }
.mockup-card {
  width: 100%;
  max-width: 38rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2.4rem;
}
.mockup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
}
.ticker { font-size: 2rem; font-weight: 800; letter-spacing: 0.05em; }
.tag {
  padding: 0.4rem 1rem;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.tag-a { background: rgba(51, 193, 122, 0.15); color: var(--pos); }
.tag-b { background: rgba(242, 169, 0, 0.15); color: var(--accent); }
.tag-c { background: rgba(224, 82, 75, 0.15); color: var(--neg); }

.mockup-chart svg {
  width: 100%;
  height: 8rem;
}
.mockup-chart polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mockup-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--card-border);
}
.mockup-stats > div { display: flex; flex-direction: column; gap: 0.4rem; }
.mockup-stats .label { font-size: 1.1rem; color: var(--text-dim); text-transform: uppercase; }
.mockup-stats .value { font-size: 1.8rem; font-weight: 700; }

/* ---------- Feature rows ---------- */
.feature-row {
  display: flex;
  align-items: center;
  gap: 5rem;
  padding: 4rem 0;
  border-bottom: 1px solid var(--card-border);
}
.feature-row:last-child { border-bottom: none; }
.feature-row.reverse { flex-direction: row-reverse; text-align: right; }
.feature-row.reverse .feature-icon { margin-left: auto; }

.feature-icon {
  flex: none;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 169, 0, 0.1);
  border: 1px solid rgba(242, 169, 0, 0.3);
}
.feature-icon svg {
  width: 3.6rem;
  height: 3.6rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-copy { flex: 1; }
.feature-copy h3 { font-size: 2rem; }
.read-more { color: var(--accent); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; }


/* ---------- Testimonial strip ---------- */
.testimonial-strip {
  background: var(--bg-alt);
  border-top: 1px solid rgba(242,169,0,0.18);
  border-bottom: 1px solid rgba(242,169,0,0.18);
  padding: 3.6rem 0;
  text-align: center;
}
.hero-testimonial { margin: 0; padding: 0; }
.hero-testimonial p {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  margin: 0 auto 1rem;
  line-height: 1.45;
  max-width: 70ch;
}
.hero-testimonial p::before { content: '\201C'; color: var(--accent); font-style: normal; }
.hero-testimonial p::after  { content: '\201D'; color: var(--accent); font-style: normal; }
.hero-testimonial cite {
  font-size: 1.25rem;
  font-style: normal;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cancel-note {
  font-size: 1.2rem;
  color: var(--text-dim);
  margin: 0.8rem 0 0;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ---------- Pricing ---------- */
.pricing-card { text-align: center; position: relative; }
.pricing-card h3 { font-size: 3.2rem; text-transform: uppercase; color: var(--text); letter-spacing: 0.05em; margin-bottom: 0.6rem; font-weight: 900; text-shadow: 0 0 24px rgba(255,255,255,0.08); }
.pricing-persona { font-size: 1.35rem; color: var(--text-dim); margin-bottom: 1.6rem; margin-top: -0.4rem; font-style: italic; line-height: 1.5; }
.pricing-card .price { font-size: 4rem; font-weight: 800; color: var(--text); margin-bottom: 2.4rem; }
.pricing-card .price span { font-size: 1.6rem; color: var(--text-dim); font-weight: 400; }
.pricing-card ul { margin-bottom: 2.8rem; }
.pricing-checklist { list-style: none; padding: 0; text-align: left; }
.pricing-checklist li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
}
.pricing-checklist li::before {
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 700;
  width: 1.8rem;
  text-align: center;
}
.pricing-checklist li.check { color: var(--text); }
.pricing-checklist li.check::before { content: '✓'; color: #33c17a; }
.pricing-checklist li.cross { color: var(--text-dim); }
.pricing-checklist li.cross::before { content: '✕'; color: rgba(255,255,255,0.2); }
.pricing-card li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-dim);
  font-size: 1.4rem;
}
.pricing-card li:last-child { border-bottom: none; }
.pricing-card.featured {
  border-color: var(--accent);
  transform: scale(1.03);
}
.badge {
  position: absolute;
  top: -1.3rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #1a1200;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
}

/* ---------- Market table ---------- */
.table-wrap { overflow-x: auto; }
.market-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.market-table th, .market-table td {
  padding: 1.6rem 2rem;
  text-align: left;
  font-size: 1.4rem;
}
.market-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  font-size: 1.2rem;
  border-bottom: 1px solid var(--card-border);
}
.market-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--card-border); }
.ticker-cell { font-weight: 800; }
.pos { color: var(--pos); font-weight: 700; }
.neg { color: var(--neg); font-weight: 700; }

/* ---------- Stats ---------- */
.stats {
  background: linear-gradient(135deg, #14100a, #0b0c0f);
  padding: 6rem 0;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  background: linear-gradient(100deg, var(--accent-dark, var(--accent)) 0%, var(--accent-2) 30%, #fff6da 50%, var(--accent-2) 70%, var(--accent) 100%);
  background-size: 200% auto;
  background-position: 0 center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: stat-shimmer 5s linear infinite;
}
@keyframes stat-shimmer {
  to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-num { animation: none; }
}
.stat-label {
  color: var(--text-dim);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stats-footnote {
  text-align: center;
  font-size: 1.2rem;
  color: var(--text-dim);
  margin: 3rem 0 0;
}
.stats-footnote a { color: var(--accent); text-decoration: underline; }

/* ---------- Disclosures ---------- */
.disclosures-body { max-width: 80rem; margin: 0 auto; }
.disclosures-body p { font-size: 1.4rem; line-height: 1.7; margin-bottom: 1.8rem; }
.disclosures-body p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { padding: 4rem 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-nav { display: flex; align-items: center; gap: 2.4rem; }
.footer-nav .nav-divider { background: var(--card-border); }
.footer-nav a { color: var(--text-dim); font-size: 1.4rem; }
.footer-nav a:hover { color: var(--accent); }
.footer-copy { color: var(--text-dim); font-size: 1.3rem; width: 100%; text-align: center; }
.footer-disclaimer {
  color: var(--text-dim);
  font-size: 1.2rem;
  width: 100%;
  text-align: center;
  margin: 0;
  opacity: 0.8;
}
.footer-disclaimer a { color: var(--text-dim); text-decoration: underline; }
.footer-disclaimer a:hover { color: var(--accent); }

/* ---------- Signup disclaimer modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 6, 8, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem;
}
.modal-overlay[hidden] { display: none; }
.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 52rem;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--card, #171a20);
  border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius);
  padding: 3.2rem;
  color: var(--text, #eceef1);
}
.modal-dialog h3 { font-size: 2rem; margin-bottom: 2rem; padding-right: 2.4rem; }
.modal-close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 3.6rem;
  height: 3.6rem;
  border: none;
  background: none;
  color: var(--text-dim, #9aa0aa);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--accent, #f2a900); }
.modal-disclaimer p { font-size: 1.4rem; line-height: 1.6; margin-bottom: 1.4rem; }
.modal-disclaimer a { color: var(--accent, #f2a900); }
.modal-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  font-size: 1.4rem;
  color: var(--text-dim, #9aa0aa);
  margin: 2rem 0;
  cursor: pointer;
}
.modal-checkbox input {
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-top: 0.2rem;
  accent-color: var(--accent, #f2a900);
  cursor: pointer;
}
#plan-modal-continue:disabled { opacity: 0.4; cursor: not-allowed; }
#plan-modal-continue:disabled:hover { transform: none; }
.modal-note {
  text-align: center;
  font-size: 1.3rem;
  color: var(--text-dim, #9aa0aa);
  margin: 1.6rem 0 0;
}

/* ---------- Cinematic effects ----------
   Text scramble decode (headlines), 3D flip cards, particle-burst CTAs,
   cursor-tracked spotlight borders, and scroll reveals —
   adapted from the Cinematic Site Modules toolkit to run on the existing
   design tokens, no added dependencies. */

/* Spotlight border — a glowing ring follows the cursor across any card.
   --spot-x/--spot-y are set by main.js on mousemove; the mask trick keeps
   only a thin ring visible so it never occludes card content. */
.card {
  position: relative;
  isolation: isolate;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(22rem circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(242, 169, 0, 0.65), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

/* Scroll / load reveals — headings, subtitles, hero copy, and cards fade
   and rise into place. Gated behind body.fx-ready, which main.js applies —
   if JS never runs, none of this CSS ever hides anything (progressive
   enhancement, not a content-hiding mechanism). */
body.fx-ready .section-title,
body.fx-ready .section-sub,
body.fx-ready .card,
body.fx-ready .flip-grid {
  opacity: 0;
  translate: 0 2.4rem;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
body.fx-ready .in-view { opacity: 1; translate: 0 0; }

body.fx-ready .grid > .card:nth-child(2) { transition-delay: 0.1s; }
body.fx-ready .grid > .card:nth-child(3) { transition-delay: 0.2s; }
body.fx-ready .grid > .card:nth-child(4) { transition-delay: 0.3s; }
body.fx-ready .grid > .card:nth-child(5) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  body.fx-ready .section-title, body.fx-ready .section-sub {
    opacity: 1; transform: none; transition: none;
  }
  body.fx-ready .card, body.fx-ready .flip-grid {
    opacity: 1; translate: 0 0; transition: none;
  }
  .flip-card:hover .flip-inner { transform: none; }
}

/* Text scramble — characters resolve into the final headline on load. */
.scramble-char { color: var(--text-dim); }
.scramble-char.resolved { color: inherit; }


/* Particle-burst CTAs — punchy click feedback on primary buttons. */
.cta-particle {
  position: fixed;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  transform: translate(0, 0) scale(1);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

/* ---------- Responsive ---------- */
/* Nav switches to the hamburger menu well before the other breakpoints —
   the nav row (5 links + divider, two of them multi-word persona labels)
   needs more room than the rest of the layout does before it starts
   crowding the logo. */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .apex-kv-grid { grid-template-columns: 1fr; }
  .apex-example-grid { grid-template-columns: 1fr; max-width: 40rem; }
  .panel-inner { grid-template-columns: 1fr; }
  .feature-row, .feature-row.reverse {
    flex-direction: column;
    text-align: center;
  }
  .feature-row.reverse .feature-icon { margin: 0 auto; }
  .pricing-card.featured { transform: none; }

  .flip-grid { grid-template-columns: 1fr; }
}

/* ---------- Mobile-first tightening ---------- */
@media (max-width: 767px) {
  .container { padding: 0 2rem; }

  /* Skip the YouTube background entirely on phones — no src is ever set
     (see main.js), so drop the wrapper rather than render an empty iframe. */
  .hero-video-wrap { display: none; }

  .hero {
    padding: 11rem 0 13rem;
    min-height: 0;
  }
  .header-top { padding: 2.8rem 0 2rem; }
  .logo-mark { height: 8.4rem; }
  .logo-text { height: 5rem; }
  .main-nav {
    gap: 0.8rem 1.4rem;
    padding: 1rem 2rem 1.2rem;
    justify-content: center;
  }
  .main-nav a:not(.btn) {
    font-size: 1.4rem;
    padding: 0.9rem 1.8rem;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--card);
  }
  .main-nav a:not(.btn):active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(242, 169, 0, 0.1);
  }
  .nav-divider { display: none; }

  .section { padding: 5.6rem 0; scroll-margin-top: 24rem; }
  .category-header { padding: 3.6rem 0; scroll-margin-top: 24rem; }
  .section-sub { margin-bottom: 3.2rem; }

  .card { padding: 2.4rem; }
  .grid { gap: 2rem; }

  /* On mobile the header is tall enough that a ticker anchored to the
     bottom of the hero sits well below the fold — move it to the top of
     the hero instead, so it's visible immediately under the header. */
  .hero-ticker { height: 4.8rem; bottom: auto; top: 0; }
  .ticker-live { padding: 0 1.4rem; font-size: 1.1rem; gap: 0.6rem; }
  .ticker-track { gap: 3.2rem; padding-left: 2.4rem; }
  .ticker-item { font-size: 1.3rem; }

  .apex-result-head { flex-direction: column; }
  .apex-result-price-block { text-align: left; }

  .feed-item { padding: 1.6rem; }
  .feed-tag { margin-left: 0; }
  .discord-strip { flex-direction: column; align-items: stretch; text-align: center; }
  .discord-strip-copy { flex-direction: column; }
  .discord-strip .btn { width: 100%; }
  .addon-card { flex-direction: column; align-items: stretch; text-align: center; padding: 2.4rem; }
  .addon-action .btn { width: 100%; }

  .stats .grid-5 { grid-template-columns: repeat(2, 1fr); gap: 2.8rem 2rem; }
  .stats .grid-5 .stat:last-child { grid-column: 1 / -1; }
  .stat-num { font-size: 3.2rem; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 3.2rem; }
  .hero-h1-line1 { white-space: normal; }
  .section-title { font-size: 2.2rem; }
  .logo-mark { height: 6.6rem; }
  .logo-text { height: 3.9rem; }
}

/* Responsive market table → stacked cards on narrow screens */
@media (max-width: 640px) {
  .market-table thead { display: none; }
  .market-table, .market-table tbody, .market-table tr, .market-table td { display: block; width: 100%; }
  .market-table tr {
    padding: 1.6rem 2rem;
    border-bottom: 1px solid var(--card-border);
  }
  .market-table tr:last-child { border-bottom: none; }
  .market-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    font-size: 1.4rem;
  }
  .market-table td::before {
    content: attr(data-label);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
  }
  .market-table td.ticker-cell {
    display: block;
    padding: 0 0 1rem;
    margin-bottom: 0.6rem;
    font-size: 1.8rem;
    border-bottom: 1px solid var(--card-border);
  }
}