/* STORM — component library
   Buttons, badges, cards, nav, footer, tabs, forms, leaderboard, debate UI. */

/* ============ Skip link ============ */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 300;
  background: var(--storm-yellow);
  color: var(--storm-black);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 18px;
  transition: top var(--dur-base) var(--ease-punch);
}
.skip-link:focus { top: 12px; }

/* ============ Bolt mark ============ */
.bolt {
  display: inline-block;
  flex: none;
  background: var(--storm-yellow);
  clip-path: polygon(62% 0, 20% 56%, 46% 56%, 32% 100%, 82% 40%, 52% 40%);
}
.bolt--on-black { background: var(--storm-yellow); }
.bolt--on-yellow { background: var(--storm-black); }
.bolt--nav { width: 16px; height: 26px; }
.bolt--nav-sm { width: 12px; height: 20px; }
.bolt--hero { width: 18px; height: 30px; }
.bolt--sm { width: 14px; height: 24px; }
.bolt--md { width: 22px; height: 36px; }
.bolt--lg { width: 30px; height: 52px; }
.bolt--empty { width: 26px; height: 36px; opacity: 0.6; }
.bolt--giant {
  position: absolute;
  opacity: 0.5;
  background: rgba(241, 213, 62, 0.18);
}

/* ============ STORM logo lock-up ============ */
.storm-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--storm-white);
  font-family: var(--font-display);
  line-height: 1;
}
.storm-logo__part { font-size: 26px; letter-spacing: 0.02em; }
.storm-logo--sm .storm-logo__part { font-size: 20px; }
.storm-logo--lg .storm-logo__part { font-size: 52px; }
.storm-logo--on-yellow { color: var(--storm-black); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 28px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--storm-white);
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear, border-color var(--dur-fast) linear;
  white-space: nowrap;
}

.btn--primary {
  background: var(--storm-yellow);
  color: var(--text-on-yellow);
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 12px) 100%, 0 100%);
}
.btn--primary:hover, .btn--primary:focus-visible { background: var(--storm-white); color: var(--text-on-yellow); }

.btn--secondary {
  border-color: var(--border-strong);
  color: var(--storm-white);
}
.btn--secondary:hover, .btn--secondary:focus-visible { border-color: var(--storm-yellow); color: var(--storm-yellow); }

.btn--accent {
  border-color: var(--border-yellow);
  color: var(--storm-yellow);
  min-height: auto;
  padding: 12px 20px;
  font-size: 12px;
}

.btn--dark {
  background: var(--storm-black);
  color: var(--storm-white);
}
.btn--dark:hover, .btn--dark:focus-visible { background: #1c1c21; }

.btn--outline-dark {
  border-color: rgba(9, 9, 11, 0.4);
  color: var(--text-on-yellow);
}
.btn--outline-dark:hover, .btn--outline-dark:focus-visible { border-color: var(--storm-black); }

.btn--disabled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
}

.btn--lg { font-size: 15px; padding: 19px 38px; }
.btn--sm { min-height: 40px; font-size: 12px; padding: 11px 20px; }
.btn--xs { min-height: 40px; font-size: 11px; padding: 10px 16px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--storm-yellow);
  border-bottom: 1px solid var(--storm-yellow);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--storm-white); border-color: var(--storm-white); }

/* ============ Badges ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  white-space: nowrap;
}
.badge--live { background: var(--storm-yellow); color: var(--text-on-yellow); }
.badge--live-outline {
  border: 1px solid var(--border-yellow);
  color: var(--storm-yellow);
  font-weight: 400;
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.badge--upcoming { background: rgba(9, 9, 11, 0.8); color: var(--storm-white); }
.badge--format { background: rgba(9, 9, 11, 0.72); color: rgba(255, 255, 255, 0.78); font-weight: 400; }
.badge--ticketed { border: 1px solid var(--border-yellow); color: var(--storm-yellow); background: transparent; font-weight: 400; }
.badge--rank { background: var(--storm-yellow); color: var(--text-on-yellow); }
.badge--champion { background: var(--storm-black); color: var(--storm-yellow); }
.badge--muted { border: 1px solid var(--border-medium); color: var(--text-tertiary); background: transparent; font-weight: 400; }

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: stormPulse 1.3s infinite;
  flex: none;
}
.badge--live .pulse-dot { background: var(--text-on-yellow); }
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; opacity: 1; }
}

/* ============ Tags / chips ============ */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--border-medium);
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-fast) linear;
}
.tag--active, .tag[aria-pressed="true"] {
  border-color: var(--storm-yellow);
  background: var(--storm-yellow);
  color: var(--text-on-yellow);
}
.tag:hover:not(.tag--active) { border-color: rgba(255, 255, 255, 0.4); }

/* ============ Tab groups ============ */
.tab-group {
  display: inline-flex;
  gap: 1px;
  background: var(--border-default);
  border: 1px solid var(--border-default);
}
.tab {
  background: var(--storm-black);
  color: rgba(255, 255, 255, 0.65);
  padding: 13px 22px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.tab--active, .tab[aria-selected="true"] { background: var(--storm-yellow); color: var(--text-on-yellow); }

/* ============ Forms / search ============ */
.field {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-medium);
  background: var(--surface-02);
  padding: 14px 16px;
  transition: border-color var(--dur-fast) linear;
}
.field:focus-within { border-color: var(--storm-yellow); box-shadow: 0 0 0 3px rgba(241, 213, 62, 0.22); }
.field--active { border-color: var(--border-yellow-strong); }
.field__icon {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  flex: none;
}
.field__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--storm-white);
  font-family: var(--font-body);
  font-size: 15px;
}
.field__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.field__clear {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--storm-yellow);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 4px;
}
.field__clear:hover { color: var(--storm-white); }

/* ============ Avatars ============ */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--charcoal);
  border: 1px solid var(--border-medium);
  font-family: var(--font-display);
  color: var(--storm-white);
  overflow: hidden;
  border-radius: var(--radius-max);
}
.avatar--xl { width: 64px; height: 64px; font-size: 22px; }
.avatar--lg { width: 52px; height: 52px; font-size: 18px; }
.avatar--md { width: 44px; height: 44px; font-size: 16px; }
.avatar--sm { width: 34px; height: 34px; font-size: 13px; }
.avatar--xs { width: 26px; height: 26px; font-size: 12px; }
.avatar--2xs { width: 22px; height: 22px; font-size: 10px; font-weight: 700; }
.avatar--rank1 { border-color: var(--border-yellow-strong); color: var(--storm-yellow); }
.avatar--on-yellow { background: rgba(9, 9, 11, 0.12); border-color: rgba(9, 9, 11, 0.4); color: var(--text-on-yellow); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============ Voting meter ============ */
.meter {
  display: flex;
  height: 10px;
  background: rgba(255, 255, 255, 0.12);
}
.meter--sm { height: 8px; }
.meter--lg { height: 14px; }
.meter__fill {
  background: var(--storm-yellow);
  transition: width var(--dur-meter) var(--ease-punch);
}
.meter__rest { flex: 1; background: rgba(255, 255, 255, 0.35); }
.meter-caption {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin-top: 7px;
}

/* ============ Stat / KPI blocks ============ */
.stat-grid { display: grid; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.stat-block { background: var(--surface-02); padding: 16px; }
.stat-block__value { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--storm-white); }
.stat-block__value--accent { color: var(--storm-yellow); }
.stat-block__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-label); margin-top: 4px; }

/* ============ Leaderboard ============ */
.lb-table { display: flex; flex-direction: column; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.lb-head {
  background: var(--surface-01);
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 90px 100px 110px 90px 90px;
  gap: 16px;
  padding: 12px 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-label);
}
.lb-row {
  background: var(--storm-black);
  color: var(--storm-white);
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 90px 100px 110px 90px 90px;
  gap: 16px;
  padding: 20px 22px;
  align-items: center;
  transition: background var(--dur-fast) linear;
}
.lb-row--top { background: var(--storm-yellow); color: var(--text-on-yellow); }
.lb-row:hover:not(.lb-row--top) { background: #111114; }
.lb-rank { font-family: var(--font-display); font-size: 34px; line-height: 0.9; }
.lb-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lb-namewrap { min-width: 0; }
.lb-name { display: block; font-family: var(--font-subhead); font-weight: 700; font-size: 21px; text-transform: uppercase; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tag { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-stats { display: contents; }
.lb-cell-label { display: none; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--text-label); text-transform: uppercase; margin-bottom: 2px; }
.lb-row--top .lb-cell-label { color: rgba(9, 9, 11, 0.75); }
.lb-cell { font-family: var(--font-display); font-size: 21px; }
.lb-cell--dim { opacity: 0.75; }
/* .lb-cell--dim's own opacity compounds with the label's colour alpha,
   so the label needs extra headroom here to still clear 4.5:1. */
.lb-cell--dim .lb-cell-label { color: rgba(255, 255, 255, 0.78); }
.lb-row--top .lb-cell--dim .lb-cell-label { color: rgba(9, 9, 11, 0.92); }
.lb-streak { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; }
.lb-move { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; white-space: nowrap; }
.lb-move--is-up { color: var(--storm-yellow); }
.lb-move--is-down { color: rgba(255, 255, 255, 0.6); }
.lb-move--is-flat { color: rgba(255, 255, 255, 0.45); }
.lb-row--top .lb-move--is-up,
.lb-row--top .lb-move--is-down,
.lb-row--top .lb-move--is-flat { color: var(--text-on-yellow); }
.lb-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-faint); margin-top: 20px; }

/* ============ Podium ============ */
.podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.podium__card { position: relative; border: 1px solid var(--border-default); background: var(--surface-03); overflow: hidden; }
.podium__card--champion { border-color: var(--storm-yellow); background: var(--storm-yellow); color: var(--text-on-yellow); margin-top: 0; }
.podium__card--runner { margin-top: 26px; }
.podium__media { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(128, 128, 128, 0.14), rgba(0, 0, 0, 0.25)); }
.podium__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.podium__media-scrim { position: absolute; inset: 0; }
.podium__rank { position: absolute; left: 14px; top: 14px; font-family: var(--font-display); line-height: 0.85; }
.podium__champion-badge { position: absolute; right: 14px; top: 14px; background: var(--storm-black); color: var(--storm-yellow); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; padding: 6px 10px; }
.podium__media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(32px, 12cqw, 72px);
  color: rgba(255, 255, 255, 0.5);
}
.podium__media { container-type: inline-size; }
.podium__card--champion .podium__media-fallback { background: rgba(9, 9, 11, 0.15); color: rgba(9, 9, 11, 0.5); }
.podium__body { padding: 20px; }
.podium__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.podium__name { font-family: var(--font-display); text-transform: uppercase; line-height: 1; }
.podium__move { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; opacity: 0.65; white-space: nowrap; }
.podium__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; opacity: 0.6; margin-top: 4px; }
.podium__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.podium__stat-value { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1; }
.podium__stat-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; opacity: 0.6; }

/* ============ Debate cards ============ */
.card-debate {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  background: var(--surface-03);
  transition: border-color var(--dur-fast) linear;
}
a.card-debate, .card-debate[role="button"] { cursor: pointer; }
.card-debate:hover { border-color: var(--storm-yellow); }
.card-debate__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(150deg, #17171c, #0a0a0c); }
.card-debate__media--split { display: grid; grid-template-columns: 1fr 1fr; }
.card-debate__media--split::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.card-debate__portrait { position: relative; overflow: hidden; container-type: inline-size; }
.card-debate__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-debate__portrait--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(22px, 20cqw, 52px);
  color: rgba(255, 255, 255, 0.5);
}
.card-debate__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9, 9, 11, 0.35), rgba(9, 9, 11, 0) 55%); }
.card-debate__badge-live { position: absolute; left: 10px; top: 10px; }
.card-debate__badge-fmt { position: absolute; right: 10px; top: 10px; }
.card-debate__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; display: flex; background: rgba(255, 255, 255, 0.15); }
.card-debate__progress-fill { background: var(--storm-yellow); }
.card-debate__body { padding: 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-debate__cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--storm-yellow); }
.card-debate__title { font-family: var(--font-subhead); font-weight: 700; font-size: 20px; line-height: 1.12; text-transform: uppercase; }
.card-debate__people { font-size: 13px; color: var(--text-tertiary); }
.card-debate__meta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}
.card-debate__meta span:last-child { white-space: nowrap; }
.card-debate__meta .is-ticketed { color: var(--storm-yellow); }

/* ============ Creator cards ============ */
.card-creator {
  border: 1px solid var(--border-default);
  background: var(--surface-03);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--dur-fast) linear;
}
.card-creator--rank1 { border-color: var(--border-yellow); }
.card-creator:hover { border-color: var(--storm-yellow); }
.card-creator__head { display: flex; align-items: center; gap: 14px; }
.card-creator__name { display: block; font-family: var(--font-subhead); font-weight: 700; font-size: 21px; text-transform: uppercase; line-height: 1.1; }
.card-creator__tag { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--text-label); }
.card-creator__stats { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--text-tertiary); }
.card-creator__follow {
  min-height: 44px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--storm-white);
  text-align: center;
  padding: 11px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-fast) linear;
}
.card-creator__follow:hover { background: var(--storm-yellow); color: var(--text-on-yellow); border-color: var(--storm-yellow); }

/* ============ Empty state ============ */
.empty-state {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: var(--surface-01);
  padding: 80px 30px;
  text-align: center;
}
.empty-state__title { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 52px); margin-top: 22px; text-transform: uppercase; }
.empty-state__body { margin: 12px auto 0; max-width: 420px; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.empty-state__actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* ============ Ticker / marquee ============ */
.ticker { background: var(--storm-yellow); color: var(--text-on-yellow); overflow: hidden; contain: paint; max-width: 100%; }
.ticker__track {
  display: flex;
  width: max-content;
  animation: stormMarquee 26s linear infinite;
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 14px 0;
}
.ticker__track--sm { font-size: 26px; padding: 12px 0; animation-duration: 24s; }
.ticker__set { display: flex; gap: 34px; padding-right: 34px; align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker { overflow-x: auto; }
}

/* ============ Video / broadcast feed panel ============ */
.video-feed { position: relative; overflow: hidden; background: linear-gradient(160deg, #18181d, #0a0a0c); }
.video-feed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-feed__scrim { position: absolute; inset: 0; }
.video-feed__tag { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; background: rgba(9, 9, 11, 0.72); padding: 6px 10px; font-weight: 700; font-size: 12px; color: var(--storm-white); }
.video-feed__status { position: absolute; left: 12px; bottom: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; }
.video-feed__badge { position: absolute; right: 12px; top: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-tertiary); border: 1px solid var(--border-medium); padding: 4px 8px; }
.video-feed__waveform { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.video-feed__waveform span { width: 3px; background: var(--storm-yellow); }

/* ============ Arena / VS hero card ============ */
.arena-card { position: relative; background: var(--surface-03); border: 1px solid var(--border-default); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); }
.arena-card__topline { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--storm-yellow), transparent); }
.arena-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-tertiary);
}
.arena-card__head-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.arena-card__clock { flex: none; color: var(--storm-yellow); }
.arena-card__body { display: grid; grid-template-columns: 1fr 74px 1fr; }
.arena-card__side { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.arena-card__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arena-card__side-scrim { position: absolute; inset: 0; }
.arena-card__side--a { border-left: 3px solid var(--storm-yellow); }
.arena-card__side--b { border-right: 3px solid rgba(255, 255, 255, 0.5); }
.arena-card__side-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(9, 9, 11, 0.92));
}
.arena-card__side-info--right { text-align: right; }
.arena-card__side-name { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; line-height: 1; }
.arena-card__side-stance { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; margin-top: 4px; }
.arena-card__side-pct { font-family: var(--font-display); font-size: 44px; line-height: 1; margin-top: 6px; }
.arena-card__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--storm-black);
  border-left: 1px solid var(--border-hairline);
  border-right: 1px solid var(--border-hairline);
}
.arena-card__vs-label { font-family: var(--font-display); font-size: 30px; letter-spacing: -0.02em; }
.arena-card__vs-round { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-label); writing-mode: vertical-rl; }
.arena-card__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-tertiary); flex-wrap: wrap; gap: 10px; }
.arena-card__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.arena-card__actions .is-accent { color: var(--storm-yellow); }

/* ============ Phone mock (decorative in-page mockups) ============ */
.phone-mock { aspect-ratio: 9 / 16; background: var(--storm-black); border: 1px solid var(--border-default); display: flex; flex-direction: column; overflow: hidden; }
.phone-mock__feed { position: relative; overflow: hidden; }
.phone-mock__feed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============ Bar charts ============ */
.bar-chart { display: flex; align-items: flex-end; gap: 6px; }
.bar-chart__bar { flex: 1; background: rgba(255, 255, 255, 0.22); }
.bar-chart__bar--accent { background: var(--storm-yellow); }
.bar-chart__bar--hoverable:hover { background: var(--storm-yellow); }
.bar-chart-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-faint); margin-top: 10px; }

/* ============ Chat rail ============ */
.chat-rail { border: 1px solid var(--border-default); background: var(--surface-03); }
.chat-rail__head { padding: 12px 14px; border-bottom: 1px solid var(--border-hairline); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-tertiary); display: flex; justify-content: space-between; }
.chat-rail__list { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.chat-rail__msg { display: flex; gap: 9px; align-items: flex-start; }
.chat-rail__text { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }
.chat-rail__user { color: var(--storm-yellow); font-weight: 600; }
.chat-rail__input { border-top: 1px solid var(--border-hairline); padding: 11px 14px; font-size: 13px; color: var(--text-faint); }

/* ============ Waveform (format cards) ============ */
.waveform { display: flex; align-items: center; gap: 3px; }
.waveform span { flex: 1; background: var(--storm-yellow); }
.waveform span.is-dim { background: rgba(255, 255, 255, 0.28); }

/* ============ Sample-data / disclosure note ============ */
.sample-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ============ Modal (Join / Sign in placeholder) ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 11, 0.86);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 500;
}
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--surface-02);
  border: 1px solid var(--border-yellow);
  padding: 36px 32px 32px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.modal__close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--storm-white);
  font-size: 18px;
  cursor: pointer;
}
.modal__close:hover { border-color: var(--storm-yellow); color: var(--storm-yellow); }
.modal__eyebrow { margin-bottom: 14px; }
.modal__title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 36px); text-transform: uppercase; line-height: 1.05; }
.modal__body { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.modal__actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* ============ Site nav ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(9, 9, 11, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.nav__inner {
  height: 74px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__link {
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}
.nav__link:hover { color: var(--storm-white); }
.nav__link[aria-current="page"] {
  color: var(--storm-white);
  border-bottom-color: var(--storm-yellow);
}
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.nav__signin {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  border: none;
  cursor: pointer;
}
.nav__signin:hover { color: var(--storm-white); }
.nav__menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  cursor: pointer;
}
.nav__menu-btn span { width: 18px; height: 2px; background: var(--storm-white); transition: transform var(--dur-base) var(--ease-punch), opacity var(--dur-fast) linear; }
.nav__menu-btn span:first-child { background: var(--storm-yellow); }
.nav__menu-btn[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); background: var(--storm-white); }
.nav__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--storm-black);
  padding: 26px 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav__mobile-panel[hidden] { display: none; }
.nav__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--font-display);
  font-size: 30px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.nav__mobile-link:hover { color: var(--storm-white); }
.nav__mobile-link[aria-current="page"] { color: var(--storm-white); }
.nav__mobile-link[aria-current="page"] .nav__mobile-index { color: var(--storm-yellow); }
.nav__mobile-index { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--storm-yellow); }
.nav__mobile-actions { display: flex; gap: 10px; margin-top: 22px; }
.nav__mobile-actions .btn { flex: 1; }
.nav__mobile-tagline {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-label);
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .nav__links, .nav__signin { display: none; }
  .nav__menu-btn { display: flex; }
}

/* Body lock while mobile menu is open */
body.nav-open { overflow: hidden; }

/* ============ Site footer ============ */
.footer { border-top: 1px solid var(--border-subtle); background: var(--storm-black); }
.footer__grid {
  padding-top: 70px;
  padding-bottom: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 40px;
}
.footer__brand-logo { margin-bottom: 16px; }
.footer__tagline { max-width: 280px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.footer__heading { margin-bottom: 16px; }
.footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer__link { color: rgba(255, 255, 255, 0.75); }
.footer__link:hover { color: var(--storm-yellow); }
.footer__static { color: rgba(255, 255, 255, 0.75); }
.footer__bottom {
  border-top: 1px solid var(--border-hairline);
  padding-top: 22px;
  padding-bottom: 50px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-label);
  text-transform: uppercase;
}

/* ============ Generic tile (steps / reasons / pillars / money cards) ============ */
.tile {
  background: var(--surface-02);
  padding: 24px 20px 26px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.tile--bordered { border: 1px solid var(--border-default); }
.tile--hover:hover { background: #151519; }
.tile--border-hover { border: 1px solid var(--border-default); }
.tile--border-hover:hover { border-color: var(--storm-yellow); }
.tile--tall { min-height: 230px; }
.tile--yellow { background: var(--storm-yellow); color: var(--text-on-yellow); }
.tile__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--storm-yellow); }
.tile--yellow .tile__eyebrow { color: rgba(9, 9, 11, 0.65); }
.tile__title { font-family: var(--font-display); font-size: 26px; line-height: 1.05; text-transform: uppercase; margin: 0; }
.tile__desc { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-top: auto; }
.tile--yellow .tile__desc { color: rgba(9, 9, 11, 0.72); }
.tile__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border-hairline); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-label); }

/* ============ Numbered step row ============ */
.step-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(0, 360px);
  gap: 36px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--border-hairline);
}
.step-row__num {
  font-family: var(--font-display);
  font-size: 100px;
  line-height: 0.8;
  letter-spacing: -0.04em;
}
.step-row__title { font-family: var(--font-display); font-size: 34px; line-height: 1; text-transform: uppercase; }
.step-row__desc { margin-top: 12px; font-size: 16px; color: var(--text-secondary); max-width: 480px; line-height: 1.55; }
.step-row__aside { border: 1px solid var(--border-default); background: var(--surface-02); }
.step-row__aside-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-label);
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}
.step-row__aside-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.step-row__chip {
  border: 1px solid var(--border-default);
  background: var(--surface-02);
  padding: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-label);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}

/* ============ Key/value row (used inside step-row asides) ============ */
.kv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-default);
  padding: 11px 13px;
}
.kv-row__label { font-family: var(--font-subhead); font-weight: 700; font-size: 17px; text-transform: uppercase; color: var(--storm-white); }
.kv-row__value { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-tertiary); text-transform: uppercase; }
.kv-row--accent { border-color: var(--border-yellow-strong); background: rgba(241, 213, 62, 0.12); }
.kv-row--accent .kv-row__label,
.kv-row--accent .kv-row__value { color: var(--storm-yellow); }

/* ============ Round timeline chip (How It Works) ============ */
.round-chip { flex: 1 1 180px; background: var(--surface-02); color: var(--storm-white); padding: 20px 18px; }
.round-chip--active { background: var(--storm-yellow); color: var(--text-on-yellow); }
.round-chip__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; opacity: 0.65; text-transform: uppercase; }
.round-chip__title { font-family: var(--font-display); font-size: 32px; line-height: 1.05; text-transform: uppercase; margin-top: 6px; }
.round-chip__desc { font-size: 13px; line-height: 1.45; opacity: 0.7; margin-top: 6px; }
.round-chip__bar { height: 4px; background: rgba(255, 255, 255, 0.12); margin-top: 14px; }
.round-chip--active .round-chip__bar { background: rgba(9, 9, 11, 0.2); }
.round-chip__bar-fill { height: 4px; background: rgba(255, 255, 255, 0.5); }
.round-chip--active .round-chip__bar-fill { background: var(--text-on-yellow); }

/* ============ Format card (Choose your arena) ============ */
.format-card {
  position: relative;
  border: 1px solid var(--border-default);
  background: var(--surface-02);
  padding: 26px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--dur-fast) linear;
}
.format-card:hover { border-color: var(--storm-yellow); }
.format-card__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--storm-yellow); text-transform: uppercase; }
.format-card__title { font-family: var(--font-display); font-size: 46px; margin: 10px 0 6px; text-transform: uppercase; line-height: 1; }
.format-card__sub { color: var(--text-tertiary); font-size: 15px; }
.format-card__footer { margin-top: auto; padding-top: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-label); text-transform: uppercase; display: flex; justify-content: space-between; }

.chat-bubble { align-self: flex-start; max-width: 85%; padding: 10px 12px; font-size: 13px; line-height: 1.4; background: rgba(241, 213, 62, 0.14); border-left: 2px solid var(--storm-yellow); }
.chat-bubble--b { align-self: flex-end; text-align: right; background: rgba(255, 255, 255, 0.07); border-left: none; border-right: 2px solid rgba(255, 255, 255, 0.5); }
.chat-bubble--typing { max-width: 60%; }

.video-split { margin-top: 26px; display: grid; grid-template-rows: 1fr 1fr; gap: 8px; flex: 1; }
.video-split__feed { position: relative; background: linear-gradient(150deg, #18181d, #0a0a0c); border: 1px solid var(--border-medium); overflow: hidden; }
.video-split__feed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.video-split__label { position: absolute; left: 10px; bottom: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); }

/* ============ Discover results ============ */
.discover-group__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.discover-group + .discover-group { margin-top: 56px; }

/* ============ Final CTA panel ============ */
.cta-panel { position: relative; overflow: hidden; }
.cta-panel__inner { position: relative; text-align: center; }
.cta-panel__lead { font-family: var(--font-display); font-size: clamp(56px, 9vw, 150px); line-height: 0.85; margin: 20px 0 0; text-transform: uppercase; }
.cta-panel__accent-line { font-family: var(--font-display); font-size: clamp(40px, 6vw, 100px); line-height: 0.9; color: var(--storm-yellow); text-transform: uppercase; margin-top: 8px; }
.cta-panel__actions { display: flex; gap: 14px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.cta-panel__tag { margin-top: 40px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--text-tertiary); text-transform: uppercase; }
.cta-panel__glow { position: absolute; inset: 0; background: radial-gradient(700px 520px at 50% 100%, rgba(241, 213, 62, 0.22), transparent 72%); }
.cta-panel__bolt-decor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; height: 520px; background: rgba(241, 213, 62, 0.09); clip-path: polygon(62% 0, 20% 56%, 46% 56%, 32% 100%, 82% 40%, 52% 40%); }

/* ============ Creator hero floating info chips ============ */
.float-card {
  position: absolute;
  background: rgba(9, 9, 11, 0.86);
  border: 1px solid var(--border-default);
  padding: 14px 16px;
}
.float-card--accent { border-color: var(--border-yellow); }
.float-card__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--text-tertiary); text-transform: uppercase; }
.float-card--accent .float-card__label { color: var(--storm-yellow); }
.float-card__value { font-family: var(--font-display); font-size: 28px; color: var(--storm-yellow); line-height: 1.1; margin-top: 2px; }
.float-card__sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-tertiary); margin-top: 2px; }
.float-card__title { font-family: var(--font-subhead); font-weight: 700; font-size: 18px; text-transform: uppercase; margin-top: 2px; }

.stat-strip { position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(9, 9, 11, 0.86); border: 1px solid var(--border-default); padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.stat-strip__item { display: flex; flex-direction: column; }
.stat-strip__value { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.stat-strip__value--accent { color: var(--storm-yellow); }
.stat-strip__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-tertiary); }

/* ============ Reserved-content / disclosure boxes ============ */
.reserved-slot {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: var(--surface-01);
  padding: 34px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.reserved-slot__title { font-family: var(--font-subhead); font-weight: 700; font-size: 24px; text-transform: uppercase; margin-top: 6px; }
.reserved-slot__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-faint); max-width: 360px; line-height: 1.7; text-transform: uppercase; }

.social-proof-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.social-proof-grid { flex: 1; min-width: 280px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.social-proof-empty { border: 1px dashed rgba(255, 255, 255, 0.18); height: 54px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--text-faint); text-transform: uppercase; }

/* ============ Destination rows (streaming) ============ */
.destination-row { border: 1px solid var(--border-yellow); padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.destination-row--empty { border: 1px dashed rgba(255, 255, 255, 0.2); color: var(--text-label); }
.destination-row__name { font-weight: 700; font-size: 15px; }
.destination-row__status { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--storm-yellow); }

/* ============ Keyframes ============ */
@keyframes stormPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
@keyframes stormMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes stormSweep { 0% { transform: translateX(-30%) skewX(-12deg); opacity: 0; } 40% { opacity: 0.5; } 100% { transform: translateX(160%) skewX(-12deg); opacity: 0; } }