/* ============================================
   eResonate — The First Live Music Social Network
   Dark & Electric — Concert Energy
   ============================================ */

:root {
  --bg: #070B18;
  --bg-card: #0D1428;
  --bg-dark: #040812;
  --bg-light: #F6F4FB;
  --bg-light-card: #ECE9F7;
  /* ── BRAND ACCENT — Poly Blue, taken straight from the logo ───────────────
     Two tokens, not one, and the reason is measured contrast on our own
     backgrounds. Raw Poly Blue is a DARK blue: as text on #070B18 it scores
     3.82:1 and fails WCAG AA. As a fill with white type on it, it scores
     5.13:1 — better than the violet it replaces, which was failing at 3.96:1.
     So: --accent fills things, --accent-text writes on things.

         #2E5CFF   3.82:1 on #070B18   4.71:1 on #F6F4FB
         #5B8CFF   6.21:1 on #070B18   2.90:1 on #F6F4FB

     Note the inversion on the last column — the lifted blue is illegible on
     the light sections. .section-light therefore re-scopes --accent-text back
     to the true brand blue further down, so accent text stays legible on both
     without auditing a single selector. */
  --accent: #2E5CFF;
  --accent-text: #5B8CFF;
  --accent-hover: #1E44D8;
  --accent-glow: rgba(46, 92, 255, 0.30);

  /* ── ATMOSPHERE ONLY — never UI, never text ───────────────────────────────
     Violet and fuchsia stay, but only as large decorative washes: hero
     gradients, background glows, photographic overlays. They are what keeps
     the site feeling like a room with stage lights rather than a SaaS
     dashboard. They must not come back as buttons, links or labels. */
  /* Keep these as literal hexes. The bulk recolour pass classified lines by
     context, and a bare `--atmos: #A855F7;` in :root is indistinguishable from
     any other UI declaration — so it rewrote both of these to var(--accent),
     quietly aliasing the atmosphere tokens to blue and flattening every
     gradient that referenced them. The hardcoded rgba() washes survived, which
     is what made it hard to spot. If the palette is ever swept again, exclude
     the :root block. */
  --atmos: #A855F7;
  --accent2: #D946EF;

  --money: #3EE08C;   /* artist + venue revenue — the logo green */
  --live: #FF4438;    /* on air. Broadcast convention, and it frees --money
                         to mean only one thing: the artist gets paid. */
  --text: #F5F4FB;
  --text-dark: #181820;
  --text-muted: #8D91B8;
  --text-muted-dark: #555566;
  --text-dim: #4A4F78;
  --border: rgba(255, 255, 255, 0.07);
  --border-light: rgba(0, 0, 0, 0.08);
  --border-accent: rgba(46, 92, 255, 0.35);
  /* These two were named after the logo but held colours the logo has never
     used (#28A064 / #28A0DC — a duller green and a cyan). --logo-green turned
     out to be dead: .nav-logo-text is overridden to off-white further down, so
     it rendered nothing. --logo-blue was NOT dead — .footer-logo .logo-resonate
     outranks that override, so the footer wordmark was shipping in the wrong
     cyan, a few pixels from a mark drawn in the right blue. */
  --logo-green: #3EE08C;
  --logo-blue: #2E5CFF;
  --radius: 12px;
  --radius-lg: 20px;
  --nav-h: 72px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}

.accent { color: var(--accent-text); }
.section { padding: 7rem 0; }
.section-dark {
  background:
    radial-gradient(ellipse 70% 50% at 85% 0%, rgba(168, 85, 247, 0.07), transparent 60%),
    radial-gradient(ellipse 60% 45% at 10% 100%, rgba(217, 70, 239, 0.05), transparent 60%),
    var(--bg-dark);
}

/* Gradient display numbers — stage-light drama */
.stat-num, .big-num, .tour-num, .raise-num, .earnings-y2-num, .disconnect-stat {
  background: linear-gradient(120deg, var(--accent) 20%, var(--accent2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  max-width: 800px;
}

.section-sub {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 640px;
  margin-bottom: 3rem;
}

/* About — two-column: copy left, product screenshot right */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 4rem;
  align-items: center;
}
.about-copy .section-sub:last-child { margin-bottom: 0; }
.about-visual { position: relative; }
.about-shot {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(46, 92, 255, 0.28);
  background: var(--card, #0D1428);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7), 0 0 60px -20px rgba(168, 85, 247, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-shot:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.75), 0 0 80px -20px rgba(46, 92, 255, 0.7);
}
.about-shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.6rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ash-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.ash-dot:nth-child(1) { background: #FF5F57; }
.ash-dot:nth-child(2) { background: #FEBC2E; }
.ash-dot:nth-child(3) { background: #28C840; }
.about-shot-url {
  margin-left: 0.6rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--text-dim, #7A80A8);
}
.about-shot img { display: block; width: 100%; height: auto; }
.about-shot-media { position: relative; line-height: 0; }
.about-shot-vid { display: block; width: 100%; height: auto; background: #0A0E1A; }
.about-overlay {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 8px; align-items: center; line-height: 1;
}
.about-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(92deg, var(--accent), var(--accent-hover));
  color: #fff; font-family: 'Outfit', sans-serif;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  box-shadow: 0 2px 12px rgba(46, 92, 255, 0.55);
}
.about-live-badge i {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: aboutLivePulse 1.4s ease-in-out infinite;
}
@keyframes aboutLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
.about-live-count {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(10, 14, 26, 0.72); backdrop-filter: blur(6px);
  color: #F0F1F8; font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.7rem; font-weight: 600;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* WebGL virtual backstage room */
.room3d-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.6;
  border-radius: var(--radius);
  overflow: hidden;
  background: #05060d;
  border: 1px solid rgba(46, 92, 255, 0.2);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85), 0 0 70px -30px rgba(168, 85, 247, 0.45);
}
#room3d { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#room3d:active { cursor: grabbing; }
.room3d-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  color: #B0B4CC; font-family: 'Outfit', sans-serif; font-size: 0.9rem;
  background: #05060d; transition: opacity 0.6s ease;
}
.room3d-loading.hide { opacity: 0; pointer-events: none; }
.r3d-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(46, 92, 255, 0.3); border-top-color: var(--accent);
  animation: r3dSpin 0.8s linear infinite;
}
@keyframes r3dSpin { to { transform: rotate(360deg); } }
@media (max-width: 620px) { .room3d-wrap { aspect-ratio: 4 / 3.4; } }
.room3d-vr-btn {
  position: absolute; top: 14px; right: 14px; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
  color: #fff; background: linear-gradient(92deg, var(--accent), var(--accent-hover));
  border: none; border-radius: 999px; padding: 0.5rem 0.9rem; cursor: pointer;
  box-shadow: 0 4px 18px rgba(46, 92, 255, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.room3d-vr-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(46, 92, 255, 0.7); }
.room3d-vr-btn b { font-size: 0.72rem; }
.room3d-vr-btn.is-unsupported { opacity: 0.75; }
.room3d-vr-hint {
  position: absolute; top: 56px; right: 14px; z-index: 6;
  max-width: min(340px, calc(100% - 28px));
  background: rgba(10, 14, 26, 0.94); border: 1px solid rgba(46, 92, 255, 0.4);
  border-radius: 12px; padding: 0.7rem 0.9rem;
  color: #D8DCF0; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.8rem; line-height: 1.45;
  opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.room3d-vr-hint.show { opacity: 1; transform: translateY(0); }
.room3d-meet {
  position: absolute; top: 14px; left: 14px; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 600; color: #E7E3F6;
  background: rgba(10, 14, 26, 0.72); border: 1px solid rgba(46, 92, 255, 0.3);
  border-radius: 999px; padding: 0.4rem 0.8rem; backdrop-filter: blur(6px);
}
.room3d-meet b { font-size: 0.9rem; }
.room3d-meet span { color: #3EE08C; font-weight: 800; }
.apply-onboard-cta {
  display: block; margin: -0.2rem 0 1rem; padding: 0.6rem 0.85rem;
  background: rgba(46, 92, 255, 0.1); border: 1px solid var(--border-accent);
  border-radius: 10px; color: var(--accent-text); font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: 0.86rem; text-decoration: none; transition: background 0.15s, transform 0.15s;
}
.apply-onboard-cta:hover { background: rgba(46, 92, 255, 0.18); transform: translateY(-1px); }
.account-cta { text-align: center; padding: 0.5rem 0 0.25rem; }
.account-cta-ico { font-size: 2.4rem; display: block; margin-bottom: 0.6rem; }
.account-cta h3 { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 800; margin-bottom: 0.6rem; }
.account-cta p { color: var(--text-muted); max-width: 52ch; margin: 0 auto 1.4rem; line-height: 1.6; }
.account-cta .btn { max-width: 340px; margin: 0 auto; }
.account-cta .apply-onboard-cta { max-width: 420px; margin: 1rem auto 0; text-align: center; }
.room3d-live {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Outfit', sans-serif; font-size: 0.76rem; font-weight: 700; color: #C9F5DE;
  background: rgba(10, 22, 18, 0.78); border: 1px solid rgba(62, 224, 140, 0.45);
  border-radius: 999px; padding: 0.38rem 0.85rem; backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(62, 224, 140, 0.18); white-space: nowrap;
}
.r3d-livedot {
  width: 8px; height: 8px; border-radius: 50%; background: #3EE08C;
  box-shadow: 0 0 0 0 rgba(62, 224, 140, 0.7); animation: r3dpulse 1.6s infinite;
}
@keyframes r3dpulse {
  0% { box-shadow: 0 0 0 0 rgba(62, 224, 140, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(62, 224, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 224, 140, 0); }
}
.room3d-wave-btn {
  position: absolute; bottom: 14px; right: 14px; z-index: 6;
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 700; color: #fff;
  background: rgba(10, 14, 26, 0.8); border: 1px solid rgba(46, 92, 255, 0.5);
  border-radius: 999px; padding: 0.5rem 0.9rem; cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.room3d-wave-btn:hover { transform: translateY(-1px); background: rgba(46, 92, 255, 0.35); }
.room3d-joy {
  position: absolute; bottom: 16px; left: 16px; z-index: 6;
  width: 104px; height: 104px; border-radius: 50%;
  background: rgba(10, 14, 26, 0.55); border: 1px solid rgba(46, 92, 255, 0.35);
  touch-action: none; display: flex; align-items: center; justify-content: center;
}
.room3d-joy-knob {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(92deg, var(--accent), var(--accent-hover)); box-shadow: 0 2px 12px rgba(46, 92, 255, 0.6);
  pointer-events: none; transition: transform 0.05s linear;
}
.room3d-view-btn, .room3d-cust-btn {
  position: absolute; right: 14px; z-index: 6;
  font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 700; color: #fff;
  background: rgba(10, 14, 26, 0.8); border: 1px solid rgba(46, 92, 255, 0.5);
  border-radius: 999px; padding: 0.45rem 0.8rem; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
}
.room3d-view-btn { top: 54px; }
.room3d-cust-btn { bottom: 58px; }
.room3d-view-btn:hover, .room3d-cust-btn:hover { background: rgba(46, 92, 255, 0.35); transform: translateY(-1px); }
.room3d-cust-panel {
  position: absolute; bottom: 100px; right: 14px; z-index: 7;
  width: min(244px, calc(100% - 28px));
  background: rgba(10, 13, 24, 0.96); border: 1px solid rgba(46, 92, 255, 0.4);
  border-radius: 14px; padding: 0.85rem; display: none; font-family: 'DM Sans', system-ui, sans-serif;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
}
.room3d-cust-panel.open { display: block; }
.room3d-cust-panel h4 { font-family: 'Outfit', sans-serif; font-size: 0.85rem; color: #fff; margin: 0 0 0.4rem; }
.room3d-cust-panel .cp-label { font-size: 0.62rem; color: #9aa0bf; text-transform: uppercase; letter-spacing: 0.09em; margin: 0.55rem 0 0.3rem; }
.room3d-cust-panel .cp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.room3d-cust-panel .cp-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.room3d-cust-panel .cp-sw.sel { border-color: #fff; }
.room3d-cust-panel .cp-btn {
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 700; color: #fff;
  background: rgba(46, 92, 255, 0.25); border: 1px solid rgba(46, 92, 255, 0.5);
  border-radius: 8px; padding: 0.35rem 0.6rem; cursor: pointer;
}
.room3d-cust-panel .cp-btn:hover { background: rgba(46, 92, 255, 0.5); }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  box-shadow: 0 0 28px var(--accent-glow), 0 4px 20px rgba(46, 92, 255, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #5B8CFF, #3B6BFF);
  box-shadow: 0 0 44px rgba(46, 92, 255, 0.55), 0 6px 28px rgba(46, 92, 255, 0.35);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}
.btn-nav {
  padding: 0.6rem 1.4rem;
  font-size: 0.875rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 0 18px var(--accent-glow);
}
.btn-nav:hover { background: linear-gradient(135deg, #5B8CFF, #3B6BFF); }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.875rem; }
.nav-login { position: relative; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); text-decoration: none; margin-right: 1.1rem; padding-left: 1.6rem; white-space: nowrap; transition: color 0.15s; }
.nav-login::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: rgba(255, 255, 255, 0.16); }
.nav-login:hover { color: #fff; }
@media (max-width: 940px) { .nav-login { display: none; } }
.btn-large { padding: 1rem 2.5rem; font-size: 1.05rem; }
.btn-full { width: 100%; justify-content: center; }

/* ============================================ NAV */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(7, 7, 15, 0.9);
  backdrop-filter: blur(20px);
  border-color: var(--border);
}
.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.nav-logo-img {
  height: 36px;
  width: auto;
  display: block;
}
.nav-logo-text { color: var(--logo-green); }
.logo-resonate { color: var(--logo-blue); }
.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0;
  background: rgba(7, 7, 15, 0.97);
  border-top: 1px solid var(--border);
  padding: 1rem 2rem 1.5rem;
}
.nav-mobile a {
  padding: 0.75rem 0;
  font-size: 1rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.nav-mobile a:last-child { border-bottom: none; margin-top: 0.5rem; }
.nav-mobile a.nm-login { border-bottom: none; margin-top: 0.85rem; font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--text); }
.nav-mobile.open { display: flex; }

/* ============================================ HERO */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);
  background:
    radial-gradient(ellipse 75% 55% at 75% 15%, rgba(168, 85, 247, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 15% 85%, rgba(217, 70, 239, 0.12), transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(80, 150, 255, 0.06), transparent 70%),
    var(--bg);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#waveCanvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0.6;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, transparent 30%, var(--bg) 80%),
              linear-gradient(to bottom, transparent 50%, var(--bg) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.hero-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 600;
  margin-bottom: 1.25rem;
  transition-delay: 0.1s;
}
.hero-headline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  transition-delay: 0.2s;
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-muted);
  max-width: 540px;
  margin-bottom: 2.5rem;
  transition-delay: 0.3s;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  transition-delay: 0.4s;
}
.hero-quotes {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  transition-delay: 0.5s;
}
.hero-quotes blockquote {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  max-width: 400px;
  flex: 1;
  min-width: 280px;
}
.hero-quotes p {
  font-size: 0.95rem;
  font-style: italic;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.hero-quotes cite {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: normal;
}
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
  color: var(--text-dim);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.1); }
}

/* ============================================ OPPORTUNITY */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: border-color 0.3s, transform 0.3s;
}
.stat-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 44px rgba(46, 92, 255, 0.18);
}
.stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--accent-text);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.stat-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.opportunity-cta {
  text-align: center;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(46, 92, 255, 0.08) 0%, transparent 100%);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
}
.opportunity-cta p {
  font-size: 1.35rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}

/* ============================================ PROBLEM */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.problem-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
}
.problem-card--center {
  border-color: var(--border-accent);
  background: rgba(46, 92, 255, 0.05);
}
.problem-icon {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.problem-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.problem-card li {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.problem-card li::before {
  content: '—';
  color: var(--accent-text);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.ad-problem {
  display: flex;
  gap: 3rem;
  align-items: center;
  padding: 2.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.ad-problem-text { flex: 2; min-width: 240px; }
.ad-problem-text h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.ad-problem-text p { color: var(--text-muted); font-size: 0.95rem; }
.ad-problem-stat { flex: 1; text-align: center; min-width: 180px; }
.big-num {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--accent-text);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.ad-problem-stat p { font-size: 0.85rem; color: var(--text-muted); }

/* ============================================ SOLUTION */
.solution-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.solution-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: border-color 0.3s, transform 0.3s;
}
.solution-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
}
.solution-icon { font-size: 1.75rem; margin-bottom: 1rem; }
.solution-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.solution-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }

/* ============================================ HOW IT WORKS */
.how-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}
.how-step {
  flex: 1;
  min-width: 180px;
  padding: 2rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.step-num {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-text);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.how-step h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.how-step p { font-size: 0.875rem; color: var(--text-muted); }
.how-arrow {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: 1.5rem;
  color: var(--accent-text);
  opacity: 0.5;
  align-self: center;
  flex-shrink: 0;
}

/* ============================================ PLATFORM TABS */
.platform-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.2s;
}
.tab-btn.active, .tab-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
}
.tab-content { min-height: 420px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.tab-text h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}
.tab-sub { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
.feature-list { margin-bottom: 2rem; }
.feature-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.feature-icon { color: var(--accent-text); flex-shrink: 0; margin-top: 1px; }
.venue-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(46, 92, 255, 0.07);
  border-radius: 8px;
  border: 1px solid var(--border-accent);
}

/* Mock UI visuals */
.mock-screen {
  background: #0A1020;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.mock-bar {
  height: 36px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 6px;
}
.mock-bar::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
  box-shadow: 16px 0 0 rgba(62,224,140,0.6), 32px 0 0 rgba(0,255,100,0.4);
}
.mock-content { padding: 1rem; }
.mock-stage {
  width: 100%;
  aspect-ratio: 16/7;
  background: linear-gradient(135deg, #1a0a2e 0%, #240a38 50%, #0a1a2e 100%);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  position: relative;
  overflow: hidden;
}
.mock-stage::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 40%; height: 50%;
  background: radial-gradient(ellipse, rgba(168,85,247,0.4) 0%, transparent 70%);
}
.mock-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; }
.mock-subs { font-size: 0.75rem; color: var(--accent-text); margin-bottom: 0.75rem; }
.mock-chat { display: flex; flex-direction: column; gap: 0.25rem; }
.mock-msg {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  width: fit-content;
}

.artist-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.artist-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  margin-bottom: 1rem;
}
.artist-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; }
.artist-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.artist-rev {
  font-size: 0.875rem;
  color: var(--money);
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  background: rgba(62, 224, 140, 0.1);
  border-radius: 6px;
  display: inline-block;
}
.venue-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 2;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.venue-stats-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.vs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.vs-row:last-child { border-bottom: none; }
.vs-row span:first-child { color: var(--text-muted); }
.vs-row span:last-child { font-weight: 600; }

.greenroom-card {
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(168,85,247,0.08);
}
.gr-header {
  background: rgba(46, 92, 255, 0.1);
  padding: 1rem 1.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-accent);
}
.gr-body { padding: 1.5rem; }
.gr-artist-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.gr-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  flex-shrink: 0;
}
.gr-fans {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.gr-fan {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-accent);
  margin-right: -8px;
}
.gr-merch {
  font-size: 0.85rem;
  color: var(--money);
  font-weight: 600;
  padding: 0.5rem 1rem;
  background: rgba(62,224,140,0.08);
  border-radius: 8px;
  border: 1px solid rgba(62,224,140,0.2);
  text-align: center;
}

/* Differentiators */
.differentiators {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}
.differentiators h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
.diff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.diff-item {
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.diff-icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
.diff-item h4 {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.diff-item p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.5; }

/* ============================================ TOUR */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.tour-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
}
.tour-card--highlight {
  border-color: var(--border-accent);
  background: rgba(46, 92, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tour-center-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.3;
}
.tour-num {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--accent-text);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.tour-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.tour-card p { font-size: 0.875rem; color: var(--text-muted); }
.tour-sponsor {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.platform-proof {
  background: rgba(46, 92, 255, 0.05);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  padding: 2rem;
}
.platform-proof h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.platform-proof p { font-size: 0.9rem; color: var(--text-muted); }

/* ============================================ GROWTH */
.growth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.growth-item {
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.3s, transform 0.3s;
}
.growth-item:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
}
.growth-item h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--accent-text);
}
.growth-item p { font-size: 0.875rem; color: var(--text-muted); }

/* ============================================ TEAM */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: border-color 0.3s;
}
.team-card:hover { border-color: var(--border-accent); }
.team-card--featured {
  grid-column: span 1;
  border-color: var(--border-accent);
  background: rgba(46, 92, 255, 0.04);
}
img.team-avatar, img.tl-avatar, img.advisor-avatar {
  object-fit: cover;
  object-position: center top;
}
.team-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(217,70,239,0.3));
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-text);
  margin-bottom: 1rem;
}
.team-avatar--ceo {
  background: linear-gradient(135deg, rgba(168,85,247,0.5), rgba(217,70,239,0.3));
}
.team-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.team-title {
  font-size: 0.75rem;
  color: var(--accent-text);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.team-creds { padding: 0; }
.team-creds li {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}
.team-bio { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }

.advisors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.advisor-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
}
.advisor-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.advisor-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.advisor-title {
  font-size: 0.75rem;
  color: var(--accent-text);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.advisor-card p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1rem; }
.advisor-quote {
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  font-size: 0.83rem;
  font-style: italic;
  color: var(--text);
}

/* ============================================ RAISE */
.raise-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.raise-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-content: start;
}
.raise-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}
.raise-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--accent-text);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.raise-label { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.raise-comparables h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.comparable {
  padding: 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.comp-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--money);
}
.comp-detail { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; }
.raise-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 1rem;
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
}
.raise-cta { text-align: center; }

/* ============================================ JOIN */
.join-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.join-tab-btn {
  padding: 0.65rem 2rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.2s;
}
.join-tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.join-tab-btn:hover:not(.active) {
  border-color: rgba(255,255,255,0.2);
  color: var(--text);
}
.join-forms { max-width: 680px; }
.join-form { display: none; }
.join-form.active { display: block; }
.form h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.form > p {
  color: var(--text-muted);
  margin-bottom: 1.75rem;
  font-size: 0.95rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.2s;
  outline: none;
  appearance: none;
  margin-bottom: 1rem;
}
.form select { cursor: pointer; }
.form input::placeholder,
.form textarea::placeholder { color: var(--text-dim); }
.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--accent); }
.form textarea { resize: vertical; min-height: 100px; }
.form-row + .btn-full,
.form select + .btn-full,
.form input + .btn-full,
.form textarea + .btn-full { margin-top: 0.5rem; }

/* ============================================ FOOTER */
#footer {
  background: #030610;
  border-top: 1px solid var(--border);
  padding: 4rem 0 2rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-bottom: 3rem;
}
.footer-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.footer-logo > span { color: var(--logo-green); }
.footer-logo .logo-resonate { color: var(--logo-blue); }
.footer-brand > p {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.footer-taglines {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-taglines span {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-text);
  opacity: 0.6;
  letter-spacing: 0.05em;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer-col h4 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  font-size: 0.875rem;
  color: var(--text-dim);
  padding: 0.3rem 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-legal a { color: var(--text-dim); margin: 0 0.25rem; }
.footer-legal a:hover { color: var(--text); }

/* ============================================ LIGHT SECTIONS */
/* Re-scope the accent text colour for light sections. The lifted blue that
   makes accent text legible on the dark background (6.21:1) drops to 2.90:1
   on #F6F4FB, while the true brand blue does the opposite. Overriding the
   custom property here means every descendant using var(--accent-text) picks
   up the right one automatically — no per-selector auditing, and any new
   light section added later inherits the fix for free. */
.section-light { background: var(--bg-light); --accent-text: #2E5CFF; }
.section-title.dark { color: var(--text-dark); }
.section-sub.dark { color: var(--text-muted-dark); }
.section-label.dark { color: var(--accent-text); }

/* ============================================ DISCONNECT */
.disconnect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.disconnect-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
/* pin the stat block to the bottom so all three cards' numbers align */
.disconnect-card .disconnect-stat { margin-top: auto; }
/* problem stats read stark/serious; the opportunity stat ($207M) stays violet */
.disconnect-card:not(.disconnect-card--highlight) .disconnect-stat {
  background: none;
  -webkit-text-fill-color: var(--text-dark);
  color: var(--text-dark);
}
.disconnect-card--highlight {
  border-color: var(--accent);
  background: #fff;
  position: relative;
}
.disconnect-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}
.disconnect-card p { font-size: 0.9rem; color: var(--text-muted-dark); line-height: 1.6; }
.disconnect-stat {
  font-family: 'Outfit', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent-text);
  line-height: 1;
  margin-top: 1.25rem;
}
.disconnect-stat-label { font-size: 0.8rem; color: var(--text-muted-dark); margin-top: 0.4rem; min-height: 2.9em; }
.disconnect-solution {
  text-align: center;
  padding: 2rem;
  background: rgba(46, 92, 255, 0.06);
  border: 1px solid rgba(46, 92, 255, 0.2);
  border-radius: var(--radius-lg);
  font-size: 1.2rem;
  font-family: 'Outfit', sans-serif;
  color: var(--text-dark);
}

/* ============================================ WHY MUSIC FIRST */
.gtm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.gtm-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 2rem;
}
.gtm-num {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--accent-text);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.gtm-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.6rem;
}
.gtm-card p { font-size: 0.875rem; color: var(--text-muted-dark); line-height: 1.6; margin-bottom: 0.75rem; }
.gtm-note {
  font-size: 0.8rem;
  color: var(--accent-text);
  font-style: italic;
  font-weight: 500;
}

/* ============================================ TECH LEADERSHIP */
.tech-leadership {
  margin-bottom: 3rem;
  padding: 2.5rem;
  background: rgba(46, 92, 255, 0.04);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
}
.tl-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.5rem;
}
.tl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.tl-card {
  display: flex;
  gap: 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.tl-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168,85,247,0.5), rgba(217,70,239,0.3));
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-text);
  flex-shrink: 0;
}
.tl-info h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.tl-title {
  font-size: 0.72rem;
  color: var(--accent-text);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.tl-info p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; }
.tl-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  line-height: 1.6;
}

/* ============================================ EARNINGS COMPARISON */
.earnings-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: start;
}
.earnings-other, .earnings-er {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.earnings-er {
  border-color: var(--accent);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.08);
}
.earnings-other h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}
.earnings-er h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.earnings-sub { font-size: 0.83rem; color: var(--text-muted-dark); margin-bottom: 1.25rem; }
.earnings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
}
.earnings-row:last-child { border-bottom: none; }
.earnings-platform { color: var(--text-muted-dark); }
.earnings-amount { font-weight: 700; font-family: 'Outfit', sans-serif; }
.earnings-amount.low { color: var(--text-muted-dark); font-size: 1rem; }
.earnings-amount.high { color: var(--accent-text); font-size: 1.25rem; }
.er-row { border-color: rgba(46, 92, 255, 0.1); }
.earnings-breakdown {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: rgba(46, 92, 255, 0.04);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-muted-dark);
  line-height: 1.8;
}
.earnings-year2 {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--accent);
  text-align: center;
}
.earnings-y2-num {
  font-family: 'Outfit', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--accent-text);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.earnings-y2-label { font-size: 0.8rem; color: var(--text-muted-dark); line-height: 1.4; }
.earnings-vs {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent-text);
  align-self: center;
  opacity: 0.5;
}

/* ============================================ RESPONSIVE */
@media (max-width: 1024px) {
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .earnings-layout { grid-template-columns: 1fr; }
  .earnings-vs { display: none; }
}

@media (max-width: 768px) {
  .disconnect-grid { grid-template-columns: 1fr; }
  .gtm-grid { grid-template-columns: 1fr; }
  .tl-grid { grid-template-columns: 1fr; }
  .tl-card { flex-direction: column; }
  .earnings-layout { grid-template-columns: 1fr; }
  .earnings-vs { display: none; }
  .nav-links { display: none; }
  .btn-nav { display: none; }
  .nav-toggle { display: flex; }
  .section { padding: 4rem 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-grid { grid-template-columns: 1fr; }
  .solution-cards { grid-template-columns: 1fr; }
  .how-steps { flex-direction: column; }
  .how-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 2rem; }
  .tab-layout { grid-template-columns: 1fr; }
  .tour-grid { grid-template-columns: 1fr; }
  .tour-card--highlight { min-height: 200px; }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .advisors-grid { grid-template-columns: 1fr; }
  .raise-layout { grid-template-columns: 1fr; }
  .raise-metrics { grid-template-columns: repeat(2, 1fr); }
  .growth-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .ad-problem { flex-direction: column; padding: 1.75rem 1.25rem; gap: 1.75rem; }
  .ad-problem-text { min-width: 0; }
  .ad-problem-text p { font-size: 1rem; line-height: 1.65; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .growth-grid { grid-template-columns: 1fr; }
  .raise-metrics { grid-template-columns: 1fr 1fr; }
  .hero-headline { font-size: 2.5rem; }
  .footer-links { grid-template-columns: 1fr; }
}

/* ============================================ NAV DROPDOWN (Demos) */
.nav-drop {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--nav-h);
}
.nav-drop-toggle { cursor: pointer; }
.nd-caret {
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.2s;
}
.nav-drop:hover .nd-caret, .nav-drop:focus-within .nd-caret { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute;
  top: calc(var(--nav-h) - 10px);
  left: -1rem;
  min-width: 225px;
  background: rgba(10, 16, 34, 0.97);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(168, 85, 247, 0.08);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 120;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-drop-menu li { display: block; }
.nav-drop-menu a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-drop-menu a:hover { background: rgba(46, 92, 255, 0.12); color: var(--text); }
.nav-drop-menu a.active { color: var(--accent-text); }

/* Nav: never wrap; hand off to the hamburger earlier (tablet widths) */
.nav-links { flex-wrap: nowrap; white-space: nowrap; gap: 1.6rem; }
@media (max-width: 940px) {
  .nav-links { display: none; }
  #nav .btn-nav { display: none; }
  .nav-toggle { display: flex; }
}
.nav-links { align-items: center; }

/* ============================================ FOLLOW THE MONEY */
.mf-wrap { margin-top: 1rem; }
.mf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mf-svg { display: block; width: 100%; min-width: 680px; height: auto; }
.mf-lane { fill: none; stroke-width: 2; stroke-dasharray: 6 7; opacity: 0.55; }
.mf-lane--perf { stroke: #3EE08C; }
.mf-lane--plat { stroke: var(--accent); }
.mf-lanelabel { font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; }
.mf-lanelabel--perf { fill: #3EE08C; }
.mf-lanelabel--plat { fill: #5B8CFF; }
.mf-forknote { font-family: 'DM Sans', sans-serif; font-size: 12px; fill: #7A80A8; font-style: italic; }
.mf-node rect { fill: rgba(255,255,255,0.035); stroke: #34406B; stroke-width: 1; }
.mf-node--money rect { stroke: rgba(62,224,140,0.55); }
.mf-node--plat rect { stroke: rgba(46, 92, 255, 0.6); }
.mf-node-emoji { font-size: 20px; }
.mf-node-title { font-family: 'Outfit', sans-serif; font-size: 15.5px; font-weight: 800; fill: #F0F1F8; }
.mf-node-sub { font-family: 'DM Sans', sans-serif; font-size: 11.5px; fill: #9AA0BF; }
.mf-node-money { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; fill: #3EE08C; }
.mf-badge rect { fill: rgba(62,224,140,0.12); stroke: rgba(62,224,140,0.55); stroke-width: 1; }
.mf-badge text { font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 800; fill: #3EE08C; text-anchor: middle; }
.mf-particle--perf { fill: #3EE08C; filter: drop-shadow(0 0 4px rgba(62,224,140,0.9)); }
.mf-particle--plat { fill: #5B8CFF; filter: drop-shadow(0 0 4px rgba(46,92,255,0.9)); }
.mf-legend { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; margin-top: 1.1rem; font-size: 0.84rem; color: var(--text-muted); }
.mf-legend b { color: #3EE08C; }
.mf-legend a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.mf-legend a:hover { text-decoration: underline; }
.mf-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.mf-dot--perf { background: #3EE08C; box-shadow: 0 0 8px rgba(62,224,140,0.8); }
.mf-dot--plat { background: var(--accent); box-shadow: 0 0 8px rgba(46,92,255,0.8); }

/* Earnings breakdown footnote — inventory basis for the per-show figures */
.earnings-breakdown .eb-note {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ==== ONCE LOGO TRIAL (remove this block + swap logo/favicon refs to revert) ==== */
.nav-logo-text, .logo-resonate { color: #F5F4FB; }
.nav-logo-img { border-radius: 0; }
/* ==== /ONCE LOGO TRIAL ==== */

/* Screen-reader-only text — used for page headings that the visual design
   doesn't call for but assistive tech and search engines still need. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Product-tour CTA closing the platform section. The platform tabs describe
   what the product does; this is the one place on the homepage that offers to
   SHOW it, so it sits at the end of that argument rather than in a nav menu. */
.platform-tour-cta {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.platform-tour-cta p {
  color: var(--text-muted);
  max-width: 46rem;
  margin: 0 auto 1.25rem;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* nav balance (2026-09-02) */
/* The "Go to the product" button is gone; the link row now sits centred between
   the logo and the single eResonate.com link instead of hugging the logo. */
.nav-inner { justify-content: space-between; }
.nav-logo  { margin-right: 0; }
.nav-links { flex: 1; justify-content: center; gap: 2.4rem; }
.nav-login { margin-right: 0; padding-left: 0; color: var(--text); }
.nav-login::before { display: none; }
@media (max-width: 1100px) { .nav-links { gap: 1.6rem; } }