/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS & THEME
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Light Theme (default) ── */
  --bg-primary: #faf9f7;
  --bg-secondary: #f1efe9;
  --bg-card: #ffffff;
  --bg-card-hover: #fdfcfa;
  --text-primary: #1a1814;
  --text-secondary: #6b6560;
  --text-muted: #9e9891;
  --accent: #c8a245;
  --accent-hover: #b8922e;
  --accent-subtle: rgba(200, 162, 69, 0.1);
  --accent-glow: rgba(200, 162, 69, 0.25);
  --border: #e5e2dc;
  --border-light: #eceae5;
  --header-bg: rgba(250, 249, 247, 0.88);
  --shadow-sm: 0 1px 3px rgba(26, 24, 20, 0.04);
  --shadow-md: 0 4px 20px rgba(26, 24, 20, 0.06);
  --shadow-lg: 0 12px 40px rgba(26, 24, 20, 0.08);
  --hero-glow: radial-gradient(ellipse 600px 400px at 50% 40%, rgba(200, 162, 69, 0.08), transparent);
  --grid-color: rgba(26, 24, 20, 0.04);
  --tag-bg: #f1efe9;
  --tag-text: #6b6560;
  --footer-bg: #1a1814;
  --footer-text: #b8b3ac;
  --footer-heading: #faf9f7;
  /* Hero ambient flow (canvas) — channel triplets so the script can set its
     own per-streak alpha. Dark ink on the cream ground, damped hard so the
     light theme never reads as smudged. */
  --hero-flow-rgb: 26, 24, 20;
  --hero-flow-accent-rgb: 200, 162, 69;
  --hero-flow-intensity: 0.62;
}

[data-theme="dark"] {
  --bg-primary: #0e0d0b;
  --bg-secondary: #161513;
  --bg-card: #1c1a17;
  --bg-card-hover: #222019;
  --text-primary: #f0ede7;
  --text-secondary: #9e9891;
  --text-muted: #6b6560;
  --accent: #d4ad4a;
  --accent-hover: #e0be5e;
  --accent-subtle: rgba(212, 173, 74, 0.1);
  --accent-glow: rgba(212, 173, 74, 0.2);
  --border: #2a2723;
  --border-light: #222019;
  --header-bg: rgba(14, 13, 11, 0.9);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
  --hero-glow: radial-gradient(ellipse 600px 400px at 50% 40%, rgba(212, 173, 74, 0.06), transparent);
  --grid-color: rgba(240, 237, 231, 0.03);
  --tag-bg: #222019;
  --tag-text: #9e9891;
  --footer-bg: #0a0908;
  --footer-text: #6b6560;
  --footer-heading: #f0ede7;
  --hero-flow-rgb: 240, 237, 231;
  --hero-flow-accent-rgb: 212, 173, 74;
  --hero-flow-intensity: 1;
}

/* ═══════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: hidden; /* pair with body overflow-x:hidden — iOS Safari needs both */
}

body {
  font-family: Satoshi, ui-sans-serif, system-ui, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}

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

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

button {
  font-family: inherit; /* Satoshi inherited from body */
  cursor: pointer;
  border: none;
  background: none;
}

/* The hidden attribute must beat component display rules (e.g. .btn is inline-flex) */
[hidden] {
  display: none !important;
}

/* ── Container ── */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ═══════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.header__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand */
.header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand__icon {
  color: var(--accent);
  display: flex;
}

.brand__text {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

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

.brand-logo {
  display: block;
  height: 52px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.footer__brand .brand-logo {
  height: 62px;
}

/* The footer logo links back to the top, like the header brand. Inline-block
   so the anchor wraps the image exactly — no extra spacing, same position. */
.footer__brand-link {
  display: inline-block;
}

.footer__brand-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .brand-logo {
    height: 46px;
  }
}


/* Desktop Nav */
.header__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav__link {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--text-secondary);
  border-radius: 8px;
  transition: color 0.2s, background-color 0.2s;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--text-primary);
  background-color: var(--accent-subtle);
}

.nav__link.active {
  color: var(--accent);
  background-color: var(--accent-subtle);
}

/* Header Actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Theme Toggle */
.theme-toggle {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--text-secondary);
  transition: color 0.2s, background-color 0.2s;
}

.theme-toggle:hover {
  color: var(--text-primary);
  background-color: var(--accent-subtle);
}

/* Show/hide sun/moon */
[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }

/* Dashboard Button */
.btn--dashboard {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  font-size: 0.85rem;
  font-weight: 550;
  color: #1a1814;
  background: linear-gradient(135deg, var(--accent), #d4b84a);
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 0 0 var(--accent-glow);
  white-space: nowrap;
}

.btn--dashboard:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--accent-glow);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  gap: 5px;
  border-radius: 10px;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

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

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

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ═══════════════════════════════════════════════════════
   MOBILE NAV
   ═══════════════════════════════════════════════════════ */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

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

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mobile-nav__link {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 12px;
  transition: color 0.2s;
  opacity: 0;
  transform: translateY(20px);
}

.mobile-nav.open .mobile-nav__link {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation for mobile links */
.mobile-nav.open .mobile-nav__link:nth-child(1) { transition: opacity 0.3s 0.05s, transform 0.3s 0.05s, color 0.2s; }
.mobile-nav.open .mobile-nav__link:nth-child(2) { transition: opacity 0.3s 0.1s, transform 0.3s 0.1s, color 0.2s; }
.mobile-nav.open .mobile-nav__link:nth-child(3) { transition: opacity 0.3s 0.15s, transform 0.3s 0.15s, color 0.2s; }
.mobile-nav.open .mobile-nav__link:nth-child(4) { transition: opacity 0.3s 0.2s, transform 0.3s 0.2s, color 0.2s; }
.mobile-nav.open .btn--mobile-cta { transition: opacity 0.3s 0.25s, transform 0.3s 0.25s ease, box-shadow 0.2s; opacity: 1; transform: translateY(0); }

.mobile-nav__link:hover {
  color: var(--accent);
}

.btn--mobile-cta {
  margin-top: 16px;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(20px);
}


/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 550;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}

.btn--lg {
  padding: 14px 28px;
  font-size: 0.95rem;
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent), #d4b84a);
  color: #1a1814;
  box-shadow: 0 0 0 0 var(--accent-glow);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--accent-glow);
}

.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}

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


/* ═══════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  overflow: hidden;
}

/* Background effects */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  inset: 0;
  background: var(--hero-glow);
}

.hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}

/* Depth field — one canvas, painted by script.js (section 9). The motion,
   the depth grading and the reduced-motion fallback all live in that one
   place, so there is no CSS rule that can silently stop the animation. */
.hero__flow {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero__badge {
  display: inline-block;
  padding: 6px 18px;
  font-size: 0.78rem;
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-glow);
  border-radius: 100px;
  margin-bottom: 24px;
}

/* Trust badge — ★★★★★ 4.9 / 5 | Trusted by Traders */
.trust-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  padding: 7px 16px;
  margin-bottom: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  font-size: 0.82rem;
  line-height: 1;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.trust-badge__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--accent);
}

.trust-badge__score {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.trust-badge__sep {
  width: 1px;
  height: 12px;
  background: var(--border);
}

.trust-badge__text {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.hero__title {
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  text-wrap: balance;
}

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

.hero__subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 40px;
}

.hero__cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Stats */
.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-light);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat__number {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.stat__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.stat__divider {
  width: 1px;
  height: 36px;
  background: var(--border);
}


/* ═══════════════════════════════════════════════════════
   SECTIONS (SHARED)
   ═══════════════════════════════════════════════════════ */

.section {
  padding: 100px 0;
  transition: background-color 0.4s ease;
}

.section--alt {
  background-color: var(--bg-secondary);
}

.section__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.section__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.section__title {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 16px;
  /* Evens out the last line instead of dropping a single orphan word.
     No effect where the heading already fits one line, so desktop is unchanged. */
  text-wrap: balance;
}

/* Wider measure for headings that should hold one line on desktop */
.section__header--wide {
  max-width: 900px;
}

/* Let the supporting line breathe too, so it does not drop one word alone */
.section__header--wide .section__desc {
  max-width: 760px;
}

/* Scales down just enough to stay on one line between 900px and 1140px,
   instead of breaking a single word onto its own line */
.section__title--tight {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  letter-spacing: -0.02em;
}

.section__desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════════════════
   INDICATOR CARDS
   ═══════════════════════════════════════════════════════ */

/* Indicator Suite — four equal tools, 2x2. No card outweighs another:
   same padding, same radius, same icon treatment, same hover, equal heights
   (grid stretch), so they read as one product family. */
.suite-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* One-line product positioning, sits between the name and the detail */
.card__lede {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 32px 28px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background-color 0.4s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-glow);
}

.card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--accent-subtle);
  color: var(--accent);
  margin-bottom: 20px;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.card__text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════════
   MENTORSHIP
   ═══════════════════════════════════════════════════════ */

.mentorship-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.benefit {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background-color 0.4s;
}

.benefit:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-glow);
}

.benefit__number {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
}

.benefit__title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.benefit__text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════════
   SOCIAL TILES
   ─────────────────────────────────────────────────────
   Socials is navigation, not content, so this grid stays
   deliberately lighter than the Indicator Suite and Edge
   card grids: four compact tiles in one row on desktop,
   2x2 below that. Same tokens as the cards (card surface,
   subtle border, gold accent, existing type ramp) at a
   smaller scale — no new colours and no second system.
   ═══════════════════════════════════════════════════════ */

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.social-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 22px 20px;
  min-width: 0;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, background-color 0.4s ease;
}

.social-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Same icon treatment as the rest of the site, one step smaller */
.social-tile__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.25s, border-color 0.25s,
              background-color 0.25s, transform 0.25s ease;
}

.social-tile__name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

/* margin-top:auto + a shared min-height pins the bottom row of all four
   tiles to the same line, whether it holds a gold CTA or the Discord badge */
.social-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  min-height: 24px;
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--accent);
  white-space: nowrap;
}

.social-tile__cta svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

/* Discord has no destination yet — muted badge instead of a live CTA.
   Compound selector so it beats .badge-soon, which is defined further down. */
.badge-soon.social-tile__soon {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  margin-bottom: 0;
  min-height: 24px;
  line-height: 1;
}

.social-tile--soon {
  cursor: default;
}

/* Entrance: shorter travel and a quicker curve than the section-level
   .anim-fade-up, so four small tiles resolve fast instead of drifting. */
.social-tile.anim-fade-up {
  transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}

.badge-soon {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  margin-bottom: 14px;
}


/* ═══════════════════════════════════════════════════════
   ABOUT — homepage block
   ─────────────────────────────────────────────────────
   Deliberately quieter than the product sections: one
   centred column, no card, no border. It is an intro, and
   the full story lives on /about.
   ═══════════════════════════════════════════════════════ */

.about-brief {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.about-brief__text {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* The four beats: short enough to scan, wider measure than the intro so
   they sit on one line each on desktop. */
.about-beats {
  list-style: none;
  max-width: 880px;
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  text-align: left;
}

.about-beats li {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.about-beats li span {
  display: block;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.about-brief__more {
  text-align: center;
}

.about-brief__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 34px;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--accent);
  transition: gap 0.2s ease;
}

.about-brief__cta svg {
  transition: transform 0.2s ease;
}

.about-brief__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .about-brief__cta:hover svg {
    transform: translateX(3px);
  }
}

@media (max-width: 900px) {
  .about-beats { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
}

@media (max-width: 767px) {
  .about-brief__text { font-size: 0.97rem; }
  .about-beats { margin-top: 28px; font-size: 0.85rem; }
}

@media (max-width: 420px) {
  .about-beats { grid-template-columns: 1fr; gap: 16px; }
}


/* ═══════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════ */

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.faq__item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s, background-color 0.4s;
}

.faq__item.faq--open {
  border-color: var(--accent-glow);
}

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  text-align: left;
  color: var(--text-primary);
}

.faq__question {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s;
}

.faq__trigger:hover .faq__question {
  color: var(--accent);
}

.faq__trigger:hover .faq__icon {
  color: var(--accent);
  border-color: var(--accent-glow);
  background-color: var(--accent-subtle);
}

.faq__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: color 0.25s, border-color 0.25s, background-color 0.25s, transform 0.35s ease;
}

.faq--open .faq__icon {
  color: var(--accent);
  border-color: var(--accent-glow);
  background-color: var(--accent-subtle);
  transform: rotate(180deg);
}

.faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq--open .faq__answer {
  max-height: 480px;
}

.faq__answer-inner {
  padding: 16px 28px 24px;
  border-top: 1px solid var(--border-light);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.faq__answer-inner p {
  margin: 0 0 10px;
}

.faq__answer-inner p:last-child {
  margin-bottom: 0;
}

.faq__answer-inner ul {
  margin: 6px 0 10px;
  padding-left: 18px;
}

.faq__answer-inner li {
  margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */

.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-top: 64px;
  transition: background-color 0.4s;
}

.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__brand .brand__text {
  font-size: 1.5rem;
  color: var(--footer-heading);
}

.footer__tagline {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--footer-text);
}

.footer__links-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--footer-heading);
  margin-bottom: 16px;
}

.footer__links a {
  display: block;
  font-size: 0.88rem;
  color: var(--footer-text);
  padding: 4px 0;
  transition: color 0.2s;
}

.footer__links a:hover {
  color: var(--accent);
}

.footer__social-icons {
  display: flex;
  gap: 12px;
}

.social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--footer-text);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.social-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: rgba(200, 162, 69, 0.08);
}

.footer__bottom {
  padding: 20px 0;
  font-size: 0.78rem;
  color: var(--footer-text);
}

.footer__bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

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

.footer__bottom nav a {
  font-size: 0.78rem;
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.2s;
}

.footer__bottom nav a:hover {
  color: var(--accent);
}


/* ═══════════════════════════════════════════════════════
   CONCEPTS WE COVER — TWO-ROW INFINITE MARQUEE
   ─────────────────────────────────────────────────────
   Structure:
     .marquee            overflow:hidden viewport (clips everything)
       .marquee__row     one row — nowrap, cannot ever wrap
         .marquee__track flex line holding 4 copies of the sequence
           .marquee__seq one full 23-term sequence

   The track is translated by exactly -25% — one of its four copies.
   Because every copy is identical, the frame at 100% is pixel-identical
   to the frame at 0%, so the loop point is invisible. The three spare
   copies keep the row full-bleed at any viewport width.

   Vertical room for the hover state: .marquee clips the HORIZONTAL
   overflow, and its padding-block pushes that clip edge away from the
   pills so a lifted/shadowed pill is never sliced. The rows themselves
   do NOT clip.

   Row count is fixed at two by markup, and nowrap guarantees no
   viewport can ever introduce a third.
   ═══════════════════════════════════════════════════════ */

/* Compact band — deliberately shorter than a standard .section so the two
   rows read as a single animated strip, not a full-height section. */
.section--marquee {
  overflow: hidden; /* full-bleed rows never widen the page */
  padding: 48px 0;  /* 48 + the marquee's 8px padding-block = the previous 56 */
}

.section--marquee .section__header {
  margin-bottom: 26px;
}

.marquee {
  --marquee-gap: 16px;
  /* One cycle travels exactly ONE sequence (-25% of the 4-copy track).
     Slightly different durations so the rows never sync up.
     row 1: 2727px / 42s = ~65px/s   row 2: 2727px / 48s = ~57px/s  */
  --marquee-duration-1: 42s;
  --marquee-duration-2: 48s;
  position: relative;
  width: 100%;
  /* Clips the tracks horizontally. padding-block keeps that clip edge clear of
     the pills so the hover lift + box-shadow render in full. */
  overflow: hidden;
  padding-block: 8px;
  /* Soft edge fade so chips dissolve into the band instead of being cut */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* One row. Never wraps, never becomes two.
   Deliberately NOT overflow:hidden — that was slicing the hover state.
   Horizontal clipping is .marquee's job. */
.marquee__row {
  white-space: nowrap;
}

.marquee__row + .marquee__row {
  margin-top: 14px;
}

.marquee__track {
  display: flex;
  flex-direction: row;   /* explicit: never a column, so content can only grow sideways */
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  will-change: transform;
  animation-timing-function: linear;   /* constant speed — no easing at the loop seam */
  animation-iteration-count: infinite;
  animation-play-state: running;
}

/* Row 1 — travels right → left */
.marquee__track--rtl {
  animation-name: marqueeRTL;
  animation-duration: var(--marquee-duration-1);
}

/* Row 2 — travels left → right */
.marquee__track--ltr {
  animation-name: marqueeLTR;
  animation-duration: var(--marquee-duration-2);
}

/* -25% of a 4-copy track == exactly one full sequence. Because every copy is
   identical, the end frame is pixel-identical to the start frame, and the three
   remaining copies still cover the viewport — no seam, no gap. */
@keyframes marqueeRTL {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

@keyframes marqueeLTR {
  from { transform: translate3d(-25%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.marquee__seq {
  display: flex;
  flex-direction: row;   /* explicit: sequences lay out horizontally, never as a column */
  flex-wrap: nowrap;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-right: var(--marquee-gap); /* gap on the item keeps every copy exactly equal width */
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease,
              transform 0.25s ease;
}

/* Restrained hover: a little more contrast and a 1px lift.
   Pointer devices only, so it can never stick on touch. */
@media (hover: hover) and (pointer: fine) {
  .marquee__item:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-glow);
    color: var(--text-primary);
    transform: translateY(-1px);
  }
}

.marquee__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.8;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .section--marquee {
    padding: 36px 0; /* + the marquee's 8px padding-block = the previous 44 */
  }

  .section--marquee .section__header {
    margin-bottom: 20px;
  }

  .marquee {
    --marquee-gap: 12px;
  }

  .marquee__row + .marquee__row {
    margin-top: 10px;
  }

  /* Kept readable — chips shrink slightly, never to the point of illegibility */
  .marquee__item {
    padding: 9px 16px;
    font-size: 0.85rem;
  }
}


/* ═══════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════ */

.anim-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}

.anim-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* Tablet (768-1023): keeps the desktop composition but eases the desktop
   spacing, which is tuned for 1280px+ and feels heavy on an iPad. */
@media (min-width: 768px) and (max-width: 1023px) {
  .section {
    padding: 80px 0;
  }

  .section__header {
    margin-bottom: 32px;
  }

  .section__title {
    font-size: 2.1rem;
  }

  .hero {
    padding: 110px 0 72px;
  }

  .card,
  .benefit {
    padding: 28px 24px;
  }
}

/* Tablet — footer 2-col, tighter gap */
@media (max-width: 900px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .header__nav {
    display: none;
  }

  .btn--dashboard:not(.btn--mobile-cta) {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 140px 0 72px;
  }

  .hero__title {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  .hero__subtitle {
    font-size: 0.95rem;
  }

  .hero__stats {
    gap: 20px;
    margin-top: 48px;
    padding-top: 32px;
  }

  .stat__number {
    font-size: 1.35rem;
  }

  .section {
    padding: 60px 0;
  }

  .section__header {
    margin-bottom: 28px;
  }

  .section__title {
    font-size: 1.9rem;
  }

  .container {
    padding: 0 20px;
  }

  /* Tighter cards on phones: the same hierarchy, less dead space */
  .card,
  .benefit {
    padding: 24px 20px;
  }

  .benefit {
    gap: 16px;
  }

  .footer {
    padding-top: 40px;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 32px;
  }

  .footer__bottom .container {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .hero__cta-group {
    flex-direction: column;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
  }

  .hero__cta-group .btn--lg {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .btn--lg {
    width: 100%;
    justify-content: center;
  }
}

/* Short viewports (landscape phones, landscape tablets) — a full-height hero
   would push everything else off-screen, so let it size to its content. */
@media (max-height: 620px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: 104px;
    padding-bottom: 56px;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .hero {
    min-height: auto;
  }
}

/* Below 640px a two-column card grid gets too narrow to read comfortably,
   so every card grid drops to a single column. Between 640 and 767 (large
   phones in landscape, small tablets) two columns still work. */
@media (max-width: 639px) {
  .suite-grid,
  .mentorship-grid {
    grid-template-columns: 1fr;
  }
}

/* Social tiles get their own breakpoints rather than following the big card
   grids: 4-up through iPad landscape, 2x2 from iPad portrait down. The tiles
   stay small enough that 2x2 still reads on a 360px Android, so nothing has
   to drop to one column. Below 480px the padding, icon and CTA step down one
   notch and the CTA keeps only its verb, so no label can wrap or overflow. */
@media (max-width: 1023px) {
  .social-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .social-grid {
    gap: 12px;
  }

  .social-tile {
    padding: 18px 16px;
    gap: 12px;
  }

  .social-tile__icon {
    width: 38px;
    height: 38px;
  }

  .social-tile__name {
    font-size: 0.9rem;
  }

  .social-tile__cta {
    font-size: 0.78rem;
  }

  /* keeps 'Coming Soon' on one line down to a 320px viewport, so the
     bottom row of every tile stays on the same baseline */
  .badge-soon.social-tile__soon {
    font-size: 0.62rem;
    padding: 3px 8px;
    white-space: nowrap;
  }

  .social-tile__cta-long {
    display: none;
  }
}

/* Small-medium mobile — stack stats on all common phone widths (up to 430px CSS pixels) */
@media (max-width: 560px) {
  .hero__stats {
    flex-direction: column;
    gap: 16px;
  }

  .stat__divider {
    width: 40px;
    height: 1px;
  }
}

/* Mobile footer — Navigate + Socials side by side */
@media (max-width: 640px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    align-items: start;
    padding-left: 4px;
    padding-right: 4px;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__links {
    padding-left: 4px;
  }

  .footer__links a:last-child {
    margin-bottom: 12px;
  }

  .footer__social-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

/* Small mobile — tighter container padding */
@media (max-width: 400px) {
  .container {
    padding: 0 16px;
  }
}

/* Touch devices — bring the small controls up to a comfortable tap size.
   Scoped to coarse pointers so the approved desktop header is untouched. */
@media (pointer: coarse) {
  .theme-toggle,
  .hamburger {
    width: 44px;
    height: 44px;
  }

  /* inline-flex + min-height reaches a full 44px target without
     changing the pill padding the desktop design uses */
  .nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer__links a,
  .footer__bottom nav a {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* Touch devices — prevent hover lift and color states from sticking on tap */
@media (hover: none) {
  .card:hover,
  .benefit:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-light);
  }

  .card::after,
  .benefit::after {
    display: none;
  }

  .faq__trigger:hover .faq__question {
    color: var(--text-primary);
  }

  .faq__trigger:hover .faq__icon {
    color: var(--text-muted);
    border-color: var(--border);
    background-color: transparent;
  }
}


/* ═══════════════════════════════════════════════════════
   ANIMATED CARD BORDER RING
   Rotating conic-gradient sweep — pointer devices only.
   ═══════════════════════════════════════════════════════ */

/* Animatable CSS custom property for the conic-gradient start angle */
@property --card-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes cardBorderSpin {
  to { --card-border-angle: 360deg; }
}

/* Shared ring pseudo-element — hidden by default */
.card::after,
.benefit::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;               /* defines the ring width */
  border-radius: inherit;
  background: conic-gradient(
    from var(--card-border-angle),
    transparent  0%,
    transparent 25%,
    var(--accent-glow) 40%,
    var(--accent)      50%,
    var(--accent-glow) 60%,
    transparent 75%,
    transparent 100%
  );
  /* Mask: visible only in the 1px padding ring, inner area cut out */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Activate on true pointer (mouse) devices only — no touch stuck-states */
@media (hover: hover) and (pointer: fine) {
  .card:hover::after,
  .benefit:hover::after {
    opacity: 0.5;
    animation: cardBorderSpin 5s linear infinite;
  }
}

/* Reduced motion: keep static gold ring visible, disable rotation */
@media (prefers-reduced-motion: reduce) {
  .card::after,
  .benefit::after {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION — marquee
   ─────────────────────────────────────────────────────
   Stop the movement, change nothing else. Both rows stay,
   still nowrap, still clipped — so reduced-motion users see
   exactly TWO static rows, never a wrapped third.
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .marquee {
    /* Roughly half speed (~32px/s and ~28px/s) rather than a hard stop.
       A hard stop is what made the rows look broken on a machine that has
       "reduce motion" enabled at OS level — the marquee is the point of the
       section, so it keeps a slow, constant, linear drift with no parallax,
       no scaling and no flashing. Hover still pauses it on pointer devices.

       To restore a full stop instead, replace the two lines below with:
         .marquee__track { animation: none; transform: none; } */
    --marquee-duration-1: 84s;
    --marquee-duration-2: 96s;
  }
}


/* ═══════════════════════════════════════════════════════
   SOCIAL TILES — INTERACTION
   ─────────────────────────────────────────────────────
   Kept at the end with the other hover / reduced-motion
   overrides: the lift has to land after .anim-fade-up.visible,
   which also writes transform.
   ═══════════════════════════════════════════════════════ */

/* Hover is an enhancement for real pointers only: nothing here carries
   information, and it never arms on touch, so nothing can stick on tap. */
@media (hover: hover) and (pointer: fine) {
  .social-tile:hover {
    transform: translateY(-3px);
    border-color: var(--accent-glow);
    background: var(--bg-card-hover);
    box-shadow: var(--shadow-md);
  }

  .social-tile:hover .social-tile__icon {
    color: var(--accent);
    border-color: var(--accent-glow);
    background-color: var(--accent-subtle);
    transform: scale(1.04);
  }

  .social-tile:hover .social-tile__cta svg {
    transform: translateX(3px);
  }

  /* the Discord tile is not a link — it stays flat */
  .social-tile--soon:hover {
    transform: none;
    border-color: var(--border-light);
    background: var(--bg-card);
    box-shadow: none;
  }

  .social-tile--soon:hover .social-tile__icon {
    color: var(--text-muted);
    border-color: var(--border);
    background-color: transparent;
    transform: none;
  }
}

/* Reduced motion: tiles are simply present, and hover stops moving them */
@media (prefers-reduced-motion: reduce) {
  .social-tile.anim-fade-up,
  .social-tile.anim-fade-up.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .social-tile:hover {
    transform: none;
  }

  .social-tile:hover .social-tile__icon,
  .social-tile:hover .social-tile__cta svg {
    transform: none;
  }
}