@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800;900&family=Space+Mono:wght@400;700&family=Archivo:wght@400;500;600;700&display=swap');

/* Shared by the marketing pages (index/about/faq/terms) — a self-contained
   dark-first theme independent of the app's own theme.css/dashboard.css,
   since these are public pages meant to work without any account.

   --accent-a/--accent-b are sampled directly from icons/icon128.png (the
   actual logo mark's gradient ring), not picked independently: #8376fa at
   the ring's top, #a85ef3 at its bottom, confirmed by reading pixel values
   off the real PNG. Keeps the marketing site's palette literally the same
   gradient as the brand mark instead of a color scheme invented alongside
   it. Unbounded's blocky geometry (headings) echoes Roblox's own voxel
   character models without touching Roblox's actual brand colors (this
   project is explicitly unaffiliated); Space Mono carries UI-chrome
   (buttons, badges, labels) for a data-readout feel fitting a stats
   tracker. */
:root {
  --font-display: "Unbounded", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace;
  --bg: #0a0812;
  --surface-1: #15111f;
  --surface-2: #1d1830;
  --text-primary: #f5f2fc;
  --text-secondary: #b3a9cf;
  --muted: #6f6489;
  --border: rgba(139, 118, 250, 0.14);
  --gridline: rgba(139, 118, 250, 0.09);
  --accent-a: #8376fa;
  --accent-b: #b25cf0;
  --good: #3ddc84;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #faf9fc;
    --surface-1: #ffffff;
    --surface-2: #f1eef9;
    --text-primary: #17111f;
    --text-secondary: #564d6b;
    --muted: #8a8098;
    --border: rgba(90, 60, 150, 0.10);
    --gridline: rgba(90, 60, 150, 0.08);
    --accent-a: #6a55e0;
    --accent-b: #9333c9;
    --good: #1f8a4c;
  }
}
/* Explicit overrides from the simple theme-toggle.js switch — win over the
   prefers-color-scheme rule above regardless of OS setting, same
   light/dark-independent-of-OS convention theme.css uses for the dashboard. */
:root[data-theme="light"] {
  --bg: #faf9fc;
  --surface-1: #ffffff;
  --surface-2: #f1eef9;
  --text-primary: #17111f;
  --text-secondary: #564d6b;
  --muted: #8a8098;
  --border: rgba(90, 60, 150, 0.10);
  --gridline: rgba(90, 60, 150, 0.08);
  --accent-a: #6a55e0;
  --accent-b: #9333c9;
  --good: #1f8a4c;
}
:root[data-theme="dark"] {
  --bg: #0a0812;
  --surface-1: #15111f;
  --surface-2: #1d1830;
  --text-primary: #f5f2fc;
  --text-secondary: #b3a9cf;
  --muted: #6f6489;
  --border: rgba(139, 118, 250, 0.14);
  --gridline: rgba(139, 118, 250, 0.09);
  --accent-a: #8376fa;
  --accent-b: #b25cf0;
}

.theme-toggle-btn {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease;
}
.theme-toggle-btn:hover { transform: scale(1.08); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font: 16px/1.6 var(--font-body);
  overflow-x: hidden;
  position: relative;
  /* Sticky footer: a short page (rankings, currently just one card) used
     to leave the footer sitting right under the content instead of
     pinned to the bottom of the viewport, unlike the longer pages where
     content height alone happened to exceed the viewport. min-height +
     flex column here, flex: 1 on <main> below, pins it consistently
     regardless of how much content a given page actually has. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* A faint CRT scanline pass over the whole page — atmosphere pulled from
   an actual reference (terminal/arcade-cabinet phosphor lines) rather
   than a generic soft glow. Fixed + pointer-events: none so it never
   interferes with scrolling or clicks, and it's subtle enough to read as
   texture, not a gimmick. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 2px, color-mix(in oklab, var(--bg) 50%, transparent) 3px, transparent 4px
  );
  opacity: 0.5;
  mix-blend-mode: overlay;
}
main { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3, .brand { font-family: var(--font-display); }
.btn, .eyebrow, .kicker, .step-label, .track-card .tag, .ext-tag, .lb-range-btn, .lb-preview-rank {
  font-family: var(--font-mono);
}

/* ---------- Nav ---------- */
header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
nav.wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.brand .mark { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.nav-links { display: flex; gap: 30px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-actions .signin-link { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.nav-actions .signin-link:hover { color: var(--text-primary); }
.nav-toggle {
  display: none; width: 38px; height: 38px; border-radius: 8px; flex: none;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary);
  cursor: pointer; align-items: center; justify-content: center;
}
.mobile-menu {
  display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px;
  border-top: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 11px 8px; font-size: 14.5px; font-weight: 500; color: var(--text-secondary); border-radius: 8px; }
.mobile-menu a:hover { background: var(--surface-2); color: var(--text-primary); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 6px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; border: none; white-space: nowrap;
}
.btn[hidden] { display: none; }
/* Same gradient direction and stops as the logo mark's own ring
   (icons/icon128.png) — not an invented gradient, the actual brand one. */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: #fff;
  box-shadow: 0 4px 20px -6px color-mix(in oklab, var(--accent-b) 55%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -8px color-mix(in oklab, var(--accent-b) 65%, transparent); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--gridline); }
.btn-lg { padding: 15px 30px; font-size: 14px; border-radius: 7px; }

/* ---------- Hero ---------- */
.hero { padding: 108px 0 74px; text-align: center; position: relative; overflow: hidden; }
/* Background grid + fade live on a pseudo-element behind the content, not
   on .hero itself — a mask-image on .hero directly used to fade out the
   bottom of whatever content sat inside it too (confirmed live: the
   dashboard screenshot's bottom third was fading to transparent along
   with the grid pattern it was actually meant for). This keeps the fade
   scoped to just the decorative background. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center -1px;
  mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  padding: 6px 14px; border-radius: 999px;
  background: color-mix(in oklab, var(--surface-2) 75%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.hero h1 { font-size: 64px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; max-width: 820px; margin: 0 auto 22px; text-wrap: balance; }
.hero h1 .accent {
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub { font-size: 18.5px; color: var(--text-secondary); max-width: 560px; margin: 0 auto 34px; text-wrap: pretty; }
.hero .cta-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fine-print { font-size: 13px; color: var(--muted); }
.fine-print a { text-decoration: underline; }

.badge-row { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin-top: 46px; font-size: 13px; color: var(--text-secondary); }
.badge-row span { display: inline-flex; align-items: center; gap: 7px; }
.badge-row .check { width: 15px; height: 15px; flex: none; }

/* Real product screenshot, not a mockup — framed with breathing room
   (not edge-to-edge) so it reads as a shot of the actual thing rather
   than a banner. No fade-in: visible immediately, not worth the risk of
   it reading as hidden/broken on a slow connection or a bot/crawler that
   doesn't run the reveal JS at all. */
.hero-shot { margin-top: 56px; }
.hero-shot picture { display: block; max-width: 980px; margin: 0 auto; }
.hero-shot img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -20px color-mix(in oklab, var(--accent-b) 35%, transparent), 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

/* ---------- Section shared ---------- */
section { padding: 90px 0; }
.section-head { text-align: center; max-width: 600px; margin: 0 auto 52px; }
.section-head .kicker { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-a); margin-bottom: 10px; }
.section-head h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 12px; text-wrap: balance; }
.section-head p { color: var(--text-secondary); font-size: 16px; text-wrap: pretty; }

/* ---------- Feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card {
  background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 26px 24px; transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover {
  border-color: color-mix(in oklab, var(--accent-a) 35%, var(--border));
  transform: translateY(-2px);
}
.feature-card .icon-chip {
  width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px;
  background: var(--surface-2); color: var(--text-secondary);
}
.feature-card.ext-only .icon-chip { color: var(--accent-b); }
.feature-card .icon-chip svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.feature-card.ext-only .icon-chip { position: relative; }
.ext-tag {
  display: inline-block; margin-top: 12px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in oklab, var(--accent-b) 16%, transparent); color: var(--accent-b);
}

/* ---------- Two ways to track ---------- */
.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.track-card {
  background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 12px; padding: 34px 30px;
}
.track-card.highlight {
  border-color: color-mix(in oklab, var(--accent-a) 40%, var(--border));
}
.track-card .tag {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 16px;
}
.track-card.web .tag { background: color-mix(in oklab, var(--good) 18%, transparent); color: var(--good); }
.track-card.ext .tag { background: color-mix(in oklab, var(--accent-b) 18%, transparent); color: var(--accent-b); }
.track-card h3 { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.track-card > p { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; }
.track-card ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.track-card li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.track-card li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--good); }

/* ---------- Leaderboard preview ---------- */
.lb-preview-card {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 12px; padding: 28px 30px;
}
.lb-preview-list { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.lb-preview-status { text-align: center; color: var(--text-secondary); font-size: 14px; padding: 20px 0; }
.lb-preview-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 8px;
}
.lb-preview-row:hover { background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
.lb-preview-rank { width: 24px; flex: none; text-align: center; font-weight: 800; color: var(--text-secondary); font-size: 14px; }
.lb-preview-row:nth-child(1) .lb-preview-rank { color: #f0b854; }
.lb-preview-row:nth-child(2) .lb-preview-rank { color: #c7c7c7; }
.lb-preview-row:nth-child(3) .lb-preview-rank { color: #c98a4e; }
.lb-preview-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
}
.lb-preview-name { flex: 1; font-weight: 600; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-preview-time { flex: none; font-size: 13.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Range toggle on the full /rankings page — the homepage's teaser has no
   equivalent since it's always just "this week." */
.lb-range-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.lb-range-btn {
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lb-range-btn:hover { background: color-mix(in oklab, var(--surface-2) 60%, transparent); color: var(--text-primary); }
.lb-range-btn[aria-pressed="true"] {
  background: color-mix(in oklab, var(--accent-a) 18%, transparent);
  border-color: color-mix(in oklab, var(--accent-a) 45%, var(--border));
  color: var(--accent-a);
}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.step { position: relative; padding-left: 4px; }
.step .num {
  width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); color: #fff;
  margin-bottom: 14px;
}
.step .num svg { width: 20px; height: 20px; }
.step-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; }
.step h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--text-secondary); }

/* ---------- Final CTA ---------- */
.cta-band {
  margin: 0 24px 90px; border-radius: 24px; padding: 64px 40px; text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
}
.cta-band h2 { font-size: 32px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.01em; }
.cta-band p { color: var(--text-secondary); margin-bottom: 28px; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--border); padding: 40px 0; }
footer .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
footer .brand { font-size: 14px; }
footer .foot-links { display: flex; gap: 22px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
footer .foot-links a:hover { color: var(--text-primary); }
footer .copyright { font-size: 12.5px; color: var(--muted); }

/* ---------- Simple content pages (About, Terms) ---------- */
.page-hero { padding: 70px 0 20px; text-align: center; }
.page-hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 12px; text-wrap: balance; }
.page-hero p { color: var(--text-secondary); font-size: 16px; max-width: 560px; margin: 0 auto; text-wrap: pretty; }
.prose { max-width: 720px; margin: 0 auto; padding: 40px 24px 100px; }
.prose h2 { font-size: 20px; font-weight: 700; margin: 36px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 8px; }
.prose ul { padding-left: 20px; margin: 8px 0 16px; }
.prose a { color: var(--accent-a); text-decoration: underline; }
.prose .updated { color: var(--muted); font-size: 13px; margin-top: -4px; }
.about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 32px 0; }
.about-card {
  background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 10px; padding: 22px 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.about-card:hover { border-color: color-mix(in oklab, var(--accent-a) 40%, var(--border)); transform: translateY(-2px); }
.about-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; font-family: var(--font-display); }
.about-card p { font-size: 13.5px; color: var(--text-secondary); margin: 0; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 720px; margin: 0 auto; padding: 40px 24px 100px; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item.open { border-color: color-mix(in oklab, var(--accent-a) 35%, var(--border)); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; font-size: 15px; font-weight: 600;
}
.faq-q .chevron { flex: none; font-size: 13px; color: var(--muted); transition: transform 0.2s ease; }
.faq-item.open .faq-q .chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a p { padding: 0 22px 18px; font-size: 14px; color: var(--text-secondary); line-height: 1.65; }
.faq-a p a { color: var(--accent-a); text-decoration: underline; }

/* ---------- Animations ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--good) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px color-mix(in oklab, var(--good) 0%, transparent); }
}
@keyframes cursor-blink {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

.eyebrow .dot { border-radius: 50%; animation: pulse-dot 2.4s ease-out infinite; }
.hero h1 .cursor {
  display: inline-block; color: var(--accent-a); font-family: var(--font-mono);
  animation: cursor-blink 1.1s step-end infinite;
}

.hero-anim { opacity: 0; animation: rise-in 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.hero-anim:nth-child(1) { animation-delay: 0s; }
.hero-anim:nth-child(2) { animation-delay: 0.08s; }
.hero-anim:nth-child(3) { animation-delay: 0.16s; }
.hero-anim:nth-child(4) { animation-delay: 0.24s; }
.hero-anim:nth-child(5) { animation-delay: 0.32s; }
.hero-anim:nth-child(6) { animation-delay: 0.4s; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.feature-grid .reveal:nth-child(1) { transition-delay: 0s; }
.feature-grid .reveal:nth-child(2) { transition-delay: 0.05s; }
.feature-grid .reveal:nth-child(3) { transition-delay: 0.1s; }
.feature-grid .reveal:nth-child(4) { transition-delay: 0.15s; }
.feature-grid .reveal:nth-child(5) { transition-delay: 0.2s; }
.feature-grid .reveal:nth-child(6) { transition-delay: 0.25s; }
.feature-grid .reveal:nth-child(7) { transition-delay: 0.3s; }
.feature-grid .reveal:nth-child(8) { transition-delay: 0.35s; }
.feature-grid .reveal:nth-child(9) { transition-delay: 0.4s; }
.tracks .reveal:nth-child(2) { transition-delay: 0.1s; }
.steps .reveal:nth-child(2) { transition-delay: 0.1s; }
.steps .reveal:nth-child(3) { transition-delay: 0.2s; }
.about-cards .reveal:nth-child(2) { transition-delay: 0.08s; }
.about-cards .reveal:nth-child(3) { transition-delay: 0.16s; }

.feature-card .icon-chip { transition: transform 0.25s ease; }
.feature-card:hover .icon-chip { transform: scale(1.08) rotate(-4deg); }
.brand .mark { transition: transform 0.2s ease; }
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }
.step .num { transition: transform 0.25s ease; }
.step:hover .num { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .eyebrow .dot, .hero-anim, .hero h1 .cursor { animation: none !important; }
  .hero-anim { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-actions .signin-link { display: none; }
  .nav-toggle { display: flex; }
  .hero h1 { font-size: 38px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .tracks { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .about-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .feature-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
  .cta-band { padding: 44px 24px; }
  .about-cards { grid-template-columns: 1fr; }
}