/* ═══ THEME TOKENS ═══════════════════════════════════════════════════════
   LIGHT is the default (no attribute needed). Clicking the TZ logo toggles
   html[data-theme="dark"]. All structural colors go through these tokens. */
:root {
  color-scheme: light;

  /* gold accents — darkened in light mode so text stays readable on paper */
  --gold: #755511;        /* gold ink: labels, borders, small caps */
  --gold-light: #755511;  /* emphasis ink on cream */
  --gold-pale: #7E5E10;   /* hover accent, still lighter than --gold */
  --gold-dark: #6A4E10;   /* deep gold ink */
  --gold-fill: #9A7618;   /* solid gold backgrounds under --on-gold text */

  /* surfaces */
  --black: #F7F2E6;
  --black2: #EFE7D3;
  --black3: #FDFAF1;
  --black4: #E7DDC7;
  --black5: #DCD0B4;

  /* text */
  --gray: #C9BFA6;
  --gray2: #5F5645;
  --gray3: #5A5142;
  --white: #1A160D;
  --white2: #3C3425;

  /* text that sits on a gold fill — always dark, both themes */
  --on-gold: #080808;

  /* loader chart up/down readouts — dark enough to read on paper */
  --up: #166534;
  --down: #B91C1C;

  /* theme-aware overlays */
  --nav-bg: linear-gradient(to bottom, rgba(247,242,230,0.95), transparent);
  --nav-solid: rgba(247,242,230,0.97);
  --drawer-bg: rgba(247,242,230,0.98);
  --overlay: rgba(26,22,13,0.45);
  --ticker-bg: rgba(255,252,244,0.55);
  --ghost-1: rgba(110,82,16,0.32);
  --ghost-2: rgba(110,82,16,0.58);
  --ghost-3: rgba(110,82,16,0.7);
  --ghost-num: rgba(117,85,17,0.78);   /* big ghost numerals, readable on cream */
  --ghost-caps: rgba(117,85,17,0.9);   /* tiny ghost caps, readable on cream */
  --axis-label: rgba(90,81,66,0.9);   /* loader chart price labels, legible on cream */
}

html[data-theme="dark"] {
  color-scheme: dark;

  --gold: #C9A84C;
  --gold-light: #E8C96D;
  --gold-pale: #F5E6B8;
  --gold-dark: #A9862F;   /* lifted so small gold caps stay legible on black */
  --gold-fill: #C9A84C;

  --black: #080808;
  --black2: #0E0E0E;
  --black3: #151515;
  --black4: #1C1C1C;
  --black5: #252525;

  --gray: #3A3A3A;
  --gray2: #8A8A8A;
  --gray3: #888;
  --white: #F0EAD6;
  --white2: #D4C89A;

  --on-gold: #080808;

  --up: #4ADE80;
  --down: #F87171;

  --nav-bg: linear-gradient(to bottom, rgba(8,8,8,0.95), transparent);
  --nav-solid: rgba(8,8,8,0.97);
  --drawer-bg: rgba(8,8,8,0.98);
  --overlay: rgba(0,0,0,0.6);
  --ticker-bg: rgba(0,0,0,0.4);
  --ghost-1: rgba(201,168,76,0.12);
  --ghost-2: rgba(201,168,76,0.4);
  --ghost-3: rgba(201,168,76,0.5);
  --ghost-num: rgba(201,168,76,0.22);
  --ghost-caps: rgba(201,168,76,0.45);
  --axis-label: rgba(160,160,160,0.85); /* loader chart price labels, legible on black */
}

/* ═══ CHRISTMAS EASTER EGG ═══════════════════════════════════════════════
   Clicking "Monggi" in the hero eyebrow puts html.xmas on the page: an
   evergreen-night palette that sits on top of whichever base theme is
   active, plus falling snow and the discounted floating join button.
   Placed after the dark block so it wins the cascade at equal specificity. */
html.xmas {
  color-scheme: dark;

  --gold: #E8C96D;
  --gold-light: #F6E3A1;
  --gold-pale: #FFF3C4;
  --gold-dark: #C9A84C;
  --gold-fill: #D8B24A;

  --black: #06130D;
  --black2: #0A1B13;
  --black3: #0E2419;
  --black4: #143020;
  --black5: #1B3D2A;

  --gray: #2B4433;
  --gray2: #9CB6A4;
  --gray3: #A9C2AF;
  --white: #F5EDD8;
  --white2: #E0D3AE;

  --on-gold: #10200F;

  --up: #7BE3A0;
  --down: #FF8A8A;

  /* brand red & green for the logo and hero title */
  --xmas-green: #4CB874;
  --xmas-red: #E04A4A;

  --nav-bg: linear-gradient(to bottom, rgba(6,19,13,0.95), transparent);
  --nav-solid: rgba(6,19,13,0.97);
  --drawer-bg: rgba(6,19,13,0.98);
  --overlay: rgba(0,0,0,0.65);
  --ticker-bg: rgba(0,0,0,0.35);
  --ghost-1: rgba(232,201,109,0.10);
  --ghost-2: rgba(232,201,109,0.32);
  --ghost-3: rgba(232,201,109,0.45);
  --ghost-num: rgba(232,201,109,0.18);
  --ghost-caps: rgba(232,201,109,0.4);
  --axis-label: rgba(190,205,190,0.85);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Space Mono', monospace;
  overflow-x: hidden;
  cursor: none;
}

/* CUSTOM CURSOR — GOLD GLOWING TZ ONLY */

.cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--gold);
  text-shadow:
    0 0 6px rgba(201,168,76,1),
    0 0 14px rgba(201,168,76,0.8),
    0 0 30px rgba(201,168,76,0.5),
    0 0 60px rgba(201,168,76,0.2);
  user-select: none;
  line-height: 1;
}

/* NAV */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px;
  background: var(--nav-bg);
  backdrop-filter: blur(4px);
}

.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 6px;
  color: var(--gold);
  text-decoration: none;
}

.nav-logo span { color: var(--white); }

/* the T and Z take the accent; the dot stays light */
.nav-logo .logo-t,
.nav-logo .logo-z {
  color: var(--gold);
  transition: color 0.45s ease;
}
.nav-logo .logo-dot { color: var(--white); }

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  position: relative;
  color: var(--gray3);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: color 0.3s;
  white-space: nowrap;
}

/* Gold underline for hover + the section you're currently in */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active { color: var(--gold); }

.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* Sections sit below the fixed nav when jumped to */
section[id] { scroll-margin-top: 96px; }

/* Tablet landscape: tighten the row before the drawer takes over */
@media (min-width: 769px) and (max-width: 1180px) {
nav { padding: 20px 28px; }
.nav-links { gap: 16px; }
.nav-links a { font-size: 10px; letter-spacing: 2px; }
.nav-cta { font-size: 9px; letter-spacing: 2px; padding: 9px 16px; }
}

.nav-cta {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  padding: 10px 24px;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s;
}

.nav-cta:hover {
  background: var(--gold-fill);
  color: var(--on-gold);
}

/* HERO */

#hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(201,168,76,0.04) 0%, transparent 60%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black, transparent);
}

/* LIVE TICKER */

.ticker-bar {
  position: absolute;
  top: 80px;
  left: 0; right: 0;
  border-top: 1px solid rgba(201,168,76,0.15);
  border-bottom: 1px solid rgba(201,168,76,0.15);
  background: var(--ticker-bg);
  z-index: 10;
  overflow: hidden;
}

.tradingview-widget-container {
  width: 100%;
  height: 46px;
}

.tradingview-widget-container__widget {
  width: 100%;
  height: 100%;
}

.hero-eyebrow {
  font-size: 10px;
  letter-spacing: 6px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 1s ease 0.3s forwards;
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 14vw, 160px);
  line-height: 0.9;
  letter-spacing: 4px;
  color: var(--white);
  opacity: 0;
  animation: fadeUp 1s ease 0.5s forwards;
}

.hero-title .gold { color: var(--gold); }

.hero-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 26px);
  color: var(--white2);
  margin-top: 24px;
  letter-spacing: 2px;
  opacity: 0;
  animation: fadeUp 1s ease 0.7s forwards;
}

.hero-instruments {
  display: flex;
  gap: 24px;
  margin-top: 48px;
  opacity: 0;
  animation: fadeUp 1s ease 0.9s forwards;
}

.instrument-pill {
  font-size: 10px;
  letter-spacing: 3px;
  padding: 8px 20px;
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold-light);
  background: rgba(201,168,76,0.05);
}

.hero-cta {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 48px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 0.3s, color 0.3s;
  opacity: 0;
  animation: fadeUp 1s ease 1.1s forwards;
  position: relative;
  z-index: 2;
}

.hero-cta:hover {
  background: var(--gold-fill);
  color: var(--on-gold);
}

.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUpScroll 1s ease 1.2s forwards;
}

@keyframes fadeUpScroll {
  from { opacity: 0; transform: translateX(-50%) translateY(30px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.hero-scroll span {
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--gray3);
  text-transform: uppercase;
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s ease infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* CHART ANIMATION */

.hero-chart {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 280px;
  opacity: 0.12;
  pointer-events: none;
}

.hero-chart svg { width: 100%; height: 100%; }

/* SECTION COMMON */

section { padding: 120px 48px; }

.section-label {
  font-size: 10px;
  letter-spacing: 6px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 3px;
  color: var(--white);
  line-height: 1;
}

.section-title .dim { color: var(--gold); }

/* STATS BAR */

#stats {
  background: var(--black2);
  border-top: 1px solid rgba(201,168,76,0.15);
  border-bottom: 1px solid rgba(201,168,76,0.15);
  padding: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
}

.stat-item {
  padding: 56px 40px;
  border-right: 1px solid rgba(201,168,76,0.1);
  position: relative;
  overflow: hidden;
}

.stat-item:last-child { border-right: none; }

.stat-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.stat-item:hover::before { transform: translateX(0); }

.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: var(--gold);
  letter-spacing: 2px;
  line-height: 1;
}

.stat-suffix {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--gold-dark);
}

.stat-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gray3);
  text-transform: uppercase;
  margin-top: 8px;
}

.stat-sub {
  font-size: 11px;
  color: var(--gray2);
  margin-top: 4px;
}

/* INSTRUMENTS */

/* ── BENEFITS SECTION ── */

#benefits {
  background: var(--black);
}

.benefits-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.benefits-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 72px;
  gap: 48px;
}

.benefits-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--white2);
  max-width: 360px;
  line-height: 1.8;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each row */

.benefit-row {
  display: grid;
  grid-template-columns: 64px 64px 1fr;
  align-items: center;
  gap: 32px;
  padding: 36px 40px;
  border: 1px solid rgba(201,168,76,0.1);
  border-bottom: none;
  position: relative;
  overflow: hidden;
  transition: background 0.4s, border-color 0.5s;
  cursor: default;
}

.benefit-row:last-child {
  border-bottom: 1px solid rgba(201,168,76,0.1);
}

.benefit-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s ease;
}

.benefit-row:hover::before {
  transform: scaleY(1);
}

.benefit-row:hover {
  background: rgba(201,168,76,0.04);
  border-color: rgba(201,168,76,0.25);
}

/* Animated background shimmer on hover */

.benefit-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(201,168,76,0.05), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.benefit-row:hover .benefit-glow {
  opacity: 1;
}

/* Number */

.benefit-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  color: var(--ghost-num);
  line-height: 1;
  letter-spacing: -2px;
  transition: color 0.4s;
  position: relative;
  z-index: 1;
}

.benefit-row:hover .benefit-num {
  color: var(--gold);
}

/* Icon */

.benefit-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(201,168,76,0.2);
  background: rgba(201,168,76,0.04);
  flex-shrink: 0;
  transition: border-color 0.4s, background 0.4s;
  position: relative;
  z-index: 1;
}

.benefit-row:hover .benefit-icon-wrap {
  border-color: rgba(201,168,76,0.5);
  background: rgba(201,168,76,0.1);
}

.benefit-icon-svg {
  width: 28px;
  height: 28px;
  color: var(--gold);
  transition: transform 0.4s ease, color 0.3s;
}

.benefit-row:hover .benefit-icon-svg {
  transform: scale(1.1);
  color: var(--gold-light);
}

/* Text block */

.benefit-body {
  position: relative;
  z-index: 1;
}

.benefit-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 10px;
  transition: color 0.3s;
}

.benefit-row:hover .benefit-title {
  color: var(--gold-pale);
}

.benefit-from-scratch {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--gold);
  letter-spacing: 1px;
}

.benefit-desc {
  font-size: 12px;
  line-height: 1.85;
  color: var(--gray3);
  letter-spacing: 0.3px;
  max-width: 640px;
}

.benefit-highlight {
  color: var(--gold-light);
  font-style: italic;
}

/* CTA block */

.benefits-cta {
  text-align: center;
  margin-top: 80px;
  padding: 64px 40px;
  border: 1px solid rgba(201,168,76,0.12);
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(201,168,76,0.04), transparent);
  position: relative;
  overflow: hidden;
}

.benefits-cta::before {
  content: 'LEARN · APPLY · GROW · REPEAT';
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 6px;
  color: var(--ghost-caps);
  white-space: nowrap;
}

.benefits-cta-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--gray3);
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.benefits-cta-main {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 4px;
  color: var(--gold);
  line-height: 1;
}

@media (max-width: 900px) {
.benefits-header { flex-direction: column; align-items: flex-start; gap: 24px; }
.benefit-row { grid-template-columns: 48px 48px 1fr; gap: 16px; padding: 28px 20px; }
.benefit-num { font-size: 36px; }
}

/* TEAM */

#team { background: var(--black2); }

.team-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 64px;
}

.team-card {
  background: var(--black2);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
  /* hairlines live on the cards themselves so an incomplete last row
     leaves plain page background instead of a tinted empty cell.
     Rules sit on top of rows 2+ so the grid never draws a closing
     bottom edge, whatever the card count. */
  border-right: 2px solid rgba(201,168,76,0.06);
  border-top: 2px solid rgba(201,168,76,0.06);
}
/* first row sits flush with the grid top */
.team-card:nth-child(-n+3) { border-top: 0; }
/* never rule the outer right edge or the final card */
.team-card:nth-child(3n),
.team-card:last-child { border-right: 0; }

.team-card:hover { background: var(--black3); }

.team-avatar {
  width: 64px; height: 64px;
  background: var(--black4);
  border: 1px solid rgba(201,168,76,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 2px;
}

.team-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--white);
  margin-bottom: 4px;
}

.team-role {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.team-bio {
  font-size: 11px;
  line-height: 1.9;
  color: var(--gray3);
}

.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

.team-tag {
  font-size: 9px;
  letter-spacing: 2px;
  padding: 4px 10px;
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--gold-dark);
  text-transform: uppercase;
}

/* CONTACT */

#contact {
  background: var(--black);
  text-align: center;
}

.contact-inner {
  max-width: 700px;
  margin: 0 auto;
}

.contact-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--white2);
  margin: 24px 0 56px;
  line-height: 1.6;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.form-input {
  background: var(--black2);
  border: none;
  border-bottom: 1px solid rgba(201,168,76,0.15);
  padding: 20px 24px;
  color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}

.form-input:focus {
  border-color: var(--gold);
  background: var(--black3);
}

.form-input::placeholder { color: var(--gray2); }

textarea.form-input { resize: none; height: 120px; }

.form-submit {
  background: transparent;
  border: 1px solid var(--gold);
  padding: 20px 48px;
  color: var(--gold);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: none;
  transition: all 0.3s;
  margin-top: 16px;
  align-self: center;
}

.form-submit:hover {
  background: var(--gold-fill);
  color: var(--on-gold);
}

/* FOOTER */

footer {
  background: var(--black2);
  border-top: 1px solid rgba(201,168,76,0.1);
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 5px;
  color: var(--gold);
}

.footer-text {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gray2);
}

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer-links a {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gray3);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover { color: var(--gold); }

/* SCROLL REVEAL ANIMATIONS */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Team cards keep the staggered reveal but also fade their hover tint.
   The inline transition-delay lists end with 0s so hover stays instant. */
.team-card.reveal {
  transition: opacity 0.8s ease, transform 0.8s ease, background 0.3s ease;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* GOLD DIVIDER */

.gold-divider {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 24px 0;
}

/* COUNTER ANIMATION */

.count-up { display: inline; }

/* RESPONSIVE */

@media (max-width: 900px) {
nav { padding: 20px 24px; }
.nav-links { display: none; }
section { padding: 80px 24px; }
.stats-grid,
.instruments-grid,
.team-grid { grid-template-columns: 1fr; }
.team-card { border-right: 0; }
/* one column: divider above every card after the first */
.team-card:nth-child(n+2) { border-top: 2px solid rgba(201,168,76,0.06); }
.team-card:first-child { border-top: 0; }
footer { flex-direction: column; gap: 16px; text-align: center; }
.form-row { grid-template-columns: 1fr; }
}

.comment-header {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
  margin-bottom: 10px;
}

.comment-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray3);
}

/* ── SOCIAL LINKS (Contact section) ── */

.social-links {
  margin-top: 48px;
  text-align: center;
}

.social-label {
  font-size: 9px;
  letter-spacing: 5px;
  color: var(--gray2);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.social-icon-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid rgba(201,168,76,0.25);
  color: var(--gray3);
  text-decoration: none;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--black2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.social-icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(201,168,76,0.06);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.social-icon-btn:hover::before {
  transform: scaleX(1);
}

.social-icon-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.social-icon-btn svg {
  flex-shrink: 0;
  transition: color 0.3s;
}

/* ═══════════════════════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════════════════════ */

#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  overflow: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loader.loader-exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(201,168,76,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 20%, rgba(201,168,76,0.03) 0%, transparent 60%);
}

.loader-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
  animation: loaderGridPulse 3s ease infinite;
}

@keyframes loaderGridPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

.loader-content {
  position: relative;
  z-index: 2;
  width: min(580px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* ── Ticker row ── */

.loader-ticker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  opacity: 0;
  animation: loaderFadeUp 0.6s ease 0.2s forwards;
}

.loader-ticker-symbol {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 5px;
  color: var(--gold);
}

.loader-ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74,222,128,0.6);
  animation: loaderBlink 1.2s ease infinite;
}

@keyframes loaderBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

.loader-ticker-price {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  color: var(--white);
  letter-spacing: 2px;
}

.loader-ticker-change {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--up);
  letter-spacing: 1px;
}

/* ── Chart canvas area ── */

.loader-chart-wrap {
  width: 100%;
  height: 220px;
  position: relative;
  border: 1px solid rgba(201,168,76,0.15);
  border-bottom: none;
  opacity: 0;
  animation: loaderFadeUp 0.6s ease 0.4s forwards;
  overflow: hidden;
}

#loaderCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Moving vertical scanline */

.loader-scanline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.5), transparent);
  pointer-events: none;
  left: 0;
}

/* Crosshair dot at tip */

.loader-crosshair {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
  top: 0; left: 0;
}

.loader-crosshair-ring {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: loaderRingPulse 1.2s ease infinite;
}

.loader-crosshair-dot {
  position: absolute;
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@keyframes loaderRingPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%       { transform: translate(-50%, -50%) scale(1.8); opacity: 0.2; }
}

/* Y-axis labels */

.loader-yaxis {
  position: absolute;
  right: 8px;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0;
  pointer-events: none;
}

.loader-yaxis-label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--axis-label);
  letter-spacing: 1px;
}

/* ── Stats row ── */

.loader-stats-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(201,168,76,0.15);
  border-top: none;
  margin-bottom: 24px;
  opacity: 0;
  animation: loaderFadeUp 0.5s ease 0.7s forwards;
}

.loader-stat {
  padding: 10px 14px;
  border-right: 1px solid rgba(201,168,76,0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.loader-stat:last-child { border-right: none; }

.loader-stat-l {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--gray2);
  letter-spacing: 1px;
}

.loader-stat-v {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--white);
  letter-spacing: 0.5px;
}

.loader-high { color: var(--up) !important; }

.loader-low { color: var(--down) !important; }

/* ── Progress bar ── */

.loader-progress-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  animation: loaderFadeUp 0.5s ease 0.9s forwards;
}

.loader-progress-track {
  width: 100%;
  height: 2px;
  background: rgba(201,168,76,0.1);
  position: relative;
  overflow: hidden;
}

.loader-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  width: 0%;
  transition: width 0.3s ease;
}

/* Shimmer effect on the bar */

.loader-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: -20px; bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: loaderShimmer 1s ease infinite;
}

@keyframes loaderShimmer {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

.loader-progress-label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--gray2);
  text-transform: uppercase;
}

/* ── Brand ── */

.loader-brand {
  margin-top: 32px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 8vw, 64px);
  letter-spacing: 8px;
  color: var(--ghost-1);
  line-height: 1;
  opacity: 0;
  animation: loaderFadeUp 0.8s ease 0.3s forwards;
  transition: color 0.6s ease;
  align-self: center;
}

.loader-brand span {
  color: var(--ghost-2);
}

.loader-brand.lit {
  color: var(--ghost-3);
}

.loader-brand.lit span {
  color: var(--gold);
}

@keyframes loaderFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Prevent scroll while loading */

body.is-loading {
  overflow: hidden;
}

/* ── FREE COMMUNITY ROW ── */

.free-community-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.free-community-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gray2);
  text-transform: uppercase;
  position: relative;
}

.free-community-label::before,
.free-community-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: rgba(201,168,76,0.2);
}

.free-community-label::before { right: calc(100% + 12px); }

.free-community-label::after { left:  calc(100% + 12px); }

.free-community-icons {
  display: flex;
  gap: 16px;
}

.free-icon-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border: 1px solid rgba(201,168,76,0.25);
  color: var(--gray3);
  text-decoration: none;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--black2);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
  position: relative;
  overflow: hidden;
}

.free-icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(201,168,76,0.06);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.free-icon-btn:hover::before { transform: scaleX(1); }

.free-icon-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.free-icon-btn svg { flex-shrink: 0; transition: color 0.3s; }

/* ═══ PASSERS TAPE ══════════════════════════════════════════════════════════ */

#passers-tape {
  width: 100%;
  overflow: hidden;
  background: rgba(201,168,76,0.06);
  border-top: 1px solid rgba(201,168,76,0.2);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  padding: 10px 0;
  position: relative;
  z-index: 10;
}

.passers-tape-track {
  display: inline-flex;
  gap: 0;
  white-space: nowrap;
  animation: passersTapeScroll 30s linear infinite;
}

.passers-tape-track:hover { animation-play-state: paused; }

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

.passer-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 48px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--white2);
  border-right: 1px solid rgba(201,168,76,0.15);
}

.passer-badge {
  font-size: 8px;
  letter-spacing: 3px;
  padding: 3px 8px;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.35);
  color: var(--gold);
}

.passer-name {
  color: var(--white);
  font-weight: 700;
}

.passer-amount {
  color: var(--gold);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
}

.passer-congrats {
  color: var(--gray3);
  font-size: 10px;
}

.panel-join-btn {
  display: inline-block;
  padding: 11px 24px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s, color 0.3s;
}

.panel-join-btn:hover {
  background: var(--gold-fill);
  color: var(--on-gold);
}

@media (max-width: 600px) {
.passer-item { padding: 0 28px; }
}

/* ─── PRESS TO START PROMPT ──────────────────────────────────────────────── */

#loaderPressPrompt {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.6s ease;
  white-space: nowrap;
  pointer-events: none;
  animation: none;
}

#loaderPressPrompt.visible {
  opacity: 1;
  animation: pressPromptPulse 1.4s ease-in-out infinite;
}

@keyframes pressPromptPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.9; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERHAUL
   Breakpoints: 768px (tablet), 480px (mobile), 360px (small)
═══════════════════════════════════════════════════════════════ */

/* ── NAV MOBILE ── */

@media (max-width: 768px) {
nav {
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
.nav-logo { font-size: 24px; letter-spacing: 4px; }
.nav-links { display: none; }
.nav-cta {
    font-size: 9px;
    letter-spacing: 2px;
    padding: 8px 16px;
  }
}

/* ── HERO MOBILE ── */

@media (max-width: 768px) {
#hero {
    padding-top: 80px;
    min-height: 100svh;
  }
.hero-eyebrow {
    font-size: 8px;
    letter-spacing: 4px;
    margin-bottom: 20px;
  }
.hero-title {
    font-size: clamp(64px, 18vw, 96px);
    letter-spacing: 2px;
  }
.hero-subtitle {
    font-size: clamp(14px, 4vw, 20px);
    margin-top: 16px;
  }
.hero-instruments {
    gap: 10px;
    margin-top: 28px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
  }
.instrument-pill {
    font-size: 9px;
    letter-spacing: 2px;
    padding: 6px 14px;
  }
.hero-cta {
    margin-top: 28px;
    padding: 14px 36px;
    font-size: 10px;
    letter-spacing: 3px;
  }
.ticker-bar { top: 56px; }
/* keep the scroll cue clear of the fixed join button and its levitation */
.hero-scroll { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.scroll-line { height: 32px; }
}

/* ── PASSERS TAPE MOBILE ── */

@media (max-width: 768px) {
.passer-item {
    padding: 0 24px;
    font-size: 10px;
    gap: 8px;
  }
.passer-amount { font-size: 13px; }
}

/* ── STATS MOBILE ── */

@media (max-width: 768px) {
.stats-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
.stat-item {
    padding: 32px 24px;
    border-right: 1px solid rgba(201,168,76,0.1);
    border-bottom: 1px solid rgba(201,168,76,0.1);
  }
.stat-item:nth-child(2n) { border-right: none; }
.stat-item:nth-child(3),
.stat-item:nth-child(4) { border-bottom: none; }
.stat-num { font-size: 40px; }
.stat-suffix { font-size: 20px; }
}

@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr 1fr; }
.stat-num { font-size: 34px; }
}

/* ── BENEFITS MOBILE ── */

@media (max-width: 768px) {
#benefits { padding: 60px 16px; }
.benefits-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 16px;
  }
.benefits-tagline {
    font-size: 15px;
    max-width: 100%;
  }
.benefit-row {
    grid-template-columns: 40px 40px 1fr;
    gap: 12px;
    padding: 20px 16px;
  }
.benefit-num { font-size: 28px; }
.benefit-icon-wrap {
    width: 40px;
    height: 40px;
  }
.benefit-icon-svg { width: 22px; height: 22px; }
.benefit-title { font-size: 16px; letter-spacing: 2px; }
.benefit-desc {
    font-size: 11px;
    line-height: 1.75;
  }
.benefits-cta {
    padding: 40px 20px;
    margin-top: 48px;
  }
.benefits-cta-main { font-size: clamp(28px, 8vw, 48px); }
.free-community-icons {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
  }
.free-icon-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
.benefit-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 14px;
  }
.benefit-num { display: none; }
.benefit-icon-wrap { width: 38px; height: 38px; }
}

/* ── STRATEGY / PROP FIRM PASSES MOBILE ── */

@media (max-width: 768px) {
.comment-text { font-size: 11px; }
}

/* ── TEAM MOBILE ── */

@media (max-width: 768px) {
#team { padding: 60px 16px; }
.team-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 40px;
  }
.team-card { padding: 32px 24px; }
.team-avatar { width: 52px; height: 52px; font-size: 16px; }
.team-name { font-size: 18px; }
}

/* ── CONTACT MOBILE ── */

@media (max-width: 768px) {
#contact { padding: 60px 16px; }
.contact-inner { max-width: 100%; }
.contact-tagline {
    font-size: 20px;
    margin: 16px 0 36px;
  }
.form-row { grid-template-columns: 1fr; }
.social-icons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
.social-icon-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* ── FOOTER MOBILE ── */

@media (max-width: 768px) {
footer {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 32px 20px;
  }
.footer-text { font-size: 9px; line-height: 1.7; }
.footer-links { justify-content: center; }
}

/* ── LOADER MOBILE ── */

@media (max-width: 768px) {
.loader-content {
    width: min(calc(100vw - 32px), 420px);
  }
.loader-chart-wrap { height: 160px; }
.loader-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
.loader-stat:nth-child(2) { border-right: none; }
.loader-stat:nth-child(3) {
    border-top: 1px solid rgba(201,168,76,0.1);
  }
.loader-stat:nth-child(4) {
    border-right: none;
    border-top: 1px solid rgba(201,168,76,0.1);
  }
.loader-brand {
    font-size: clamp(28px, 10vw, 48px);
    letter-spacing: 5px;
  }
}

/* ── SECTION PADDING GLOBAL MOBILE ── */

@media (max-width: 768px) {
section { padding: 60px 16px; }
}

@media (max-width: 480px) {
section { padding: 48px 14px; }
}

/* ── CUSTOM CURSOR — disable on touch ── */

@media (hover: none) {
.cursor { display: none; }
body { cursor: auto; }
.form-submit { cursor: pointer; }
}

/* ── SECTION TITLES MOBILE ── */

@media (max-width: 480px) {
.section-title {
    font-size: clamp(32px, 10vw, 48px);
  }
}

/* ── LOADER PRESS PROMPT MOBILE ── */

@media (max-width: 480px) {
#loaderPressPrompt {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    bottom: 40px;
  }
}

/* ── HAMBURGER & MOBILE DRAWER ── */

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 200;
  position: relative;
}

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: left center;
}

.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translateY(-1px); width: 100%; }

.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }

.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translateY(1px); width: 100%; }

/* Drawer */

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 80vw);
  height: 100vh;
  background: var(--drawer-bg);
  border-left: 1px solid rgba(201,168,76,0.2);
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: 96px 32px 48px;
  gap: 4px;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-drawer.open { transform: translateX(0); }

.nav-drawer-link {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--gray3);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201,168,76,0.07);
  transition: color 0.25s, padding-left 0.25s;
}

.nav-drawer-link:hover,
.nav-drawer-link.active {
  color: var(--gold);
  padding-left: 8px;
}

.nav-drawer-link.active { border-bottom-color: rgba(201,168,76,0.35); }

.nav-drawer-cta {
  margin-top: 24px;
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s, color 0.3s;
}

.nav-drawer-cta:hover {
  background: var(--gold-fill);
  color: var(--on-gold);
}

/* Overlay */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 140;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nav-overlay.open { opacity: 1; pointer-events: all; }

@media (max-width: 768px) {
.nav-hamburger { display: flex; }
nav { grid-template-columns: 1fr auto; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE BUG FIXES
═══════════════════════════════════════════════════════ */

/* ── 1. NAV: hide blurry link text bleeding through on mobile ── */

@media (max-width: 768px) {
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--nav-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
  }
.nav-links {
    display: none !important;
    visibility: hidden;
    width: 0;
    overflow: hidden;
  }
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
.nav-logo {
    font-size: 22px;
    letter-spacing: 4px;
    flex-shrink: 0;
  }
.nav-cta {
    font-size: 9px;
    letter-spacing: 1px;
    padding: 7px 12px;
    white-space: nowrap;
  }
}

/* ── 2. PASSERS TAPE: force single scrolling line, no wrap ── */

#passers-tape {
  overflow: hidden;
  white-space: nowrap;
}

.passers-tape-track {
  white-space: nowrap;
  display: inline-flex;
  flex-wrap: nowrap;
  width: max-content;
}

.passer-item {
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* ── 6. SECTION TITLE overflow fix on small screens ── */

@media (max-width: 480px) {
.section-title {
    font-size: clamp(28px, 9vw, 44px);
    word-break: break-word;
    hyphens: auto;
  }
}

/* ═══ COACH INTRO SECTION ════════════════════════════════════════════════ */

#coach-intro {
  padding: 100px 40px;
  background: var(--black);
  position: relative;
}

#coach-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(201,168,76,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.coach-intro-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
}

.coach-intro-text .section-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.coach-intro-bio {
  margin-top: 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--gray3);
  max-width: 420px;
}

.coach-intro-video {
  width: 100%;
}

.yt-frame-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(201,168,76,0.08);
}

.yt-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}


@media (max-width: 768px) {
.coach-intro-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
.coach-intro-bio { max-width: 100%; }
}

/* ── PAYOUT CERTIFICATES ─────────────────────────────────────────────── */

.payouts {
  max-width: 1100px;
  margin: 72px auto 0;
}

.payouts-label {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.payouts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.payout-card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0B0B0B;
  overflow: hidden;
}

/* the certificate fills the card edge to edge: no mat, no border, no margin.
   All four share the same 1:1 frame; cover crops only ~1-2% of the edges. */
.payout-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.payout-card:hover img {
  transform: scale(1.025);
}

@media (max-width: 900px) {
  .payouts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .payouts { margin-top: 48px; }
  .payouts-grid { gap: 10px; }
}

@media (max-width: 560px) {
  .payouts-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ═══ TESTIMONIALS ═══════════════════════════════════════════════════════ */

#testimonials {
  padding: 100px 40px;
  background: var(--black2);
  border-bottom: 1px solid rgba(201,168,76,0.12);
}

.testimonials-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.testimonials-head { text-align: center; }

.testimonials-head .gold-divider { margin: 24px auto; }

.testimonials-sub {
  margin: 0 auto;
  max-width: 560px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--gray3);
}

/* Two-group wall, so each screenshot gets the size its shape deserves:
   portrait chats keep their old, small size in one centered row; each
   landscape social post takes a full row at near-native width, so its
   text is readable. Borderless, like the payout certificates. */
.testimonials-grid {
  margin-top: 48px;
}

.testimonials-grid--portraits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.testimonials-grid--portraits .testimonial-card {
  width: 265px;
  max-width: 100%;
}

.testimonials-grid--wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

/* the one near-square, lower-resolution source: keep it smaller and centered
   instead of stretching it across the full row */
.testimonials-grid--wide .testimonial-card--square {
  justify-self: center;
  width: 100%;
  max-width: 613px;
}

.testimonial-card {
  position: relative;
  overflow: hidden;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* each screenshot shows at its natural ratio, filling the card width */
.testimonial-card img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
#testimonials { padding: 60px 16px; }
.testimonials-sub { font-size: 1rem; }
.testimonials-grid { margin-top: 32px; }
.testimonials-grid--portraits { gap: 10px; }
.testimonials-grid--portraits .testimonial-card { width: calc(50% - 5px); }
.testimonials-grid--wide { gap: 10px; margin-top: 10px; }
}

/* ═══ FLOATING JOIN BUTTON ═══════════════════════════════════════════════ */
.float-join {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  padding: 11px 40px;
  background: linear-gradient(135deg, #E8C96D 0%, #C9A84C 50%, #A8872F 100%);
  color: var(--on-gold);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 4px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(245,230,184,0.6);
  box-shadow: 0 0 24px rgba(201,168,76,0.45), 0 6px 20px rgba(0,0,0,0.5);
  animation: floatJoinLevitate 3.2s ease-in-out infinite, floatJoinPulse 3.2s ease-in-out infinite;
  transition: filter 0.25s;
}
.float-join:hover {
  filter: brightness(1.12);
}

/* Price tag centered under the join label */
.float-join-price {
  font-size: 0.65em;
  letter-spacing: 2.5px;
  margin: 3px 0 0;
  white-space: nowrap;
}
@keyframes floatJoinLevitate {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-12px); }
}
@keyframes floatJoinPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.35), 0 6px 20px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 36px rgba(232,201,109,0.65), 0 6px 20px rgba(0,0,0,0.5); }
}
body.is-loading .float-join { display: none; }
/* On short desktop viewports sit closer to the bottom edge so the levitation
   cycle stops clipping the hero CTA. */
@media (max-height: 780px) and (min-width: 769px) {
  .float-join {
    bottom: 10px;
  }
}
@media (max-width: 768px) {
  .float-join {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 9px 28px;
    font-size: 16px;
    letter-spacing: 3px;
  }
  /* keep the price readable and the button at its original 51px footprint */
  .float-join-price {
    font-size: 0.75em;
    letter-spacing: 2px;
    margin-top: 3px;
  }
}

/* ═══ TRADINGVIEW TICKER TAPE ════════════════════════════════════════════ */
/* TradingView's loader injects an inline height (58px) on the container, so
   these need !important. 45px + the bar's 1px borders = 47px total, matching
   the passer congratulations tape exactly. */
.ticker-bar .tradingview-widget-container {
  height: 45px !important;
  min-height: 45px !important;
  overflow: hidden;
}
/* In dark mode the page sets color-scheme: dark, and Chrome then paints the
   cross-origin TradingView iframe on a white canvas. Pinning the iframe back
   to light keeps the tape transparent so the bar colour shows through. */
.ticker-bar iframe {
  color-scheme: light;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  /* stops the tape from pausing on hover and stops it hijacking touch-scroll on phones */
  pointer-events: none;
}
/* ═══ CHRISTMAS EASTER EGG — "Monggi" ════════════════════════════════════ */

/* The trigger word in the hero eyebrow */
.monggi-secret {
  cursor: pointer;
  transition: color 0.3s, text-shadow 0.3s;
}
.monggi-secret:hover,
.monggi-secret:focus-visible {
  color: #B91C1C;
  text-shadow: 0 0 14px rgba(185,28,28,0.55);
  outline: none;
}
html.xmas .monggi-secret { color: #E8C96D; text-shadow: 0 0 14px rgba(232,201,109,0.4); }

/* Falling snow, drawn on one fixed canvas above the content */
.snow-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 120;
}

/* Snowy glow + a warm hairline under the nav */
html.xmas body {
  background-image: radial-gradient(1200px 600px at 50% -10%, rgba(232,201,109,0.07), transparent 70%);
}
html.xmas nav { border-bottom: 1px solid rgba(232,201,109,0.16); }
html.xmas .gold-divider {
  background: linear-gradient(90deg, #C0272D, #E8C96D 50%, #2E7D52);
}

/* Discounted floating join button: Santa red, gold trim */
@keyframes xmasJoinPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(192,39,45,0.5), 0 6px 20px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 38px rgba(232,201,109,0.6), 0 6px 20px rgba(0,0,0,0.5); }
}
html.xmas .float-join {
  background: linear-gradient(135deg, #C0272D 0%, #8F1D22 55%, #5E1216 100%);
  color: #FFF6E3;
  border-color: rgba(232,201,109,0.65);
  animation: floatJoinLevitate 3.2s ease-in-out infinite, xmasJoinPulse 3.2s ease-in-out infinite;
}

/* Unlock notice */
.xmas-toast {
  position: fixed;
  top: 150px; /* clears the nav + TradingView ticker tape */
  left: 50%;
  transform: translate(-50%, -14px);
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 22px;
  background: rgba(6,19,13,0.94);
  border: 1px solid rgba(232,201,109,0.55);
  color: #F5EDD8;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 12px 44px rgba(0,0,0,0.5);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.xmas-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.xmas-toast strong { color: #E8C96D; font-weight: 700; }
.xmas-toast-icon { font-size: 16px; line-height: 1; }

@media (max-width: 768px) {
  .xmas-toast {
    top: 112px;
    font-size: 9.5px;
    letter-spacing: 1px;
    padding: 10px 14px;
    white-space: normal;
  }
}

/* Santa hat on the TZ logo — visible only while Christmas mode is on */
.nav-logo { position: relative; }
.nav-santa-hat {
  position: absolute;
  left: 1px;
  top: -22px;
  width: 30px;
  height: auto;
  opacity: 0;
  transform: translateY(7px) rotate(-8deg) scale(0.8);
  transform-origin: 70% 100%;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
html.xmas .nav-santa-hat { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .nav-santa-hat { left: 0; top: -14px; width: 24px; }
}

/* ═══ CHRISTMAS BRAND COLORS — TZ logo and TEAM ZHEN ═════════════════════ */
.hero-title { transition: color 0.45s ease; }

/* T green, Z red */
html.xmas .nav-logo .logo-t { color: var(--xmas-green); }
html.xmas .nav-logo .logo-z { color: var(--xmas-red); }

/* TEAM green, ZHEN red */
html.xmas .hero-title { color: var(--xmas-green); }
html.xmas .hero-title .gold { color: var(--xmas-red); }