/* ============================================================
   Reactive Score — Adaptive Music Engine Marketing Site
   Design source: Figma BVGIFhoL5BLWK4A7z6liBv (brand style guide)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Poppins:wght@400;500;700&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --primary:    #121422;
  --secondary:  #232531;
  --outline:    #2e303b;
  --paragraph:  #d9dde6;
  --accent:     #ffffff;
  --error:      #e97777;
  --alert:      #ecb527;
  --success:    #57b548;
  --black:      #171925;

  /* Pulled directly from Figma's actual gradient fill (pricing section, brand style guide) */
  --grad-purple: #8b5cf6;
  --grad-purple-a11y: #a78bfa;
  --grad-pink:   #ec4899;
  --grad-accent: #be10ec;
  --gradient-brand: linear-gradient(90deg, #986fff 25%, #c74fff 44%, #d57bff 58%, #e3a7ff 72%, #f1d3ff 86%, #ffffff 100%);
  --gradient-brand-simple: linear-gradient(120deg, var(--grad-purple), var(--grad-pink));

  --font-display: "Manrope", system-ui, sans-serif;
  --font-ui:      "Poppins", system-ui, sans-serif;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --radius: 12px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Updated by site.js on scroll — drives the slow gradient hue shift below */
  --scroll-progress: 0;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  position: relative;
  font-family: var(--font-display);
  background: var(--primary);
  color: var(--paragraph);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Sitewide purple/pink gradient wash — faded blobs behind every section so
   the page reads as one continuous surface instead of a flat single colour. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 12% 8%,  rgba(139,92,246,0.10) 0%, transparent 70%),
    radial-gradient(32% 26% at 88% 18%, rgba(236,72,153,0.08) 0%, transparent 70%),
    radial-gradient(40% 32% at 18% 60%, rgba(236,72,153,0.07) 0%, transparent 70%),
    radial-gradient(36% 30% at 84% 78%, rgba(139,92,246,0.09) 0%, transparent 70%),
    radial-gradient(30% 26% at 50% 98%, rgba(139,92,246,0.06) 0%, transparent 70%);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--accent); }
h1 { font-size: 64px; font-weight: 700; }
h2 { font-size: 48px; font-weight: 700; }
h3 { font-size: 32px; font-weight: 700; }
h4 { font-size: 28px; font-weight: 800; }
h5 { font-size: 24px; font-weight: 500; }
h6 { font-size: 18px; font-weight: 700; }
p { font-size: 14px; line-height: 1.6; }
@media (max-width: 768px) {
  h1 { font-size: 40px; } h2 { font-size: 30px; } h3 { font-size: 26px; }
}

.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: hue-rotate(calc(var(--scroll-progress) * 40deg));
}

/* Hero H1 sits over the animated wave-bar canvas — the gradient clip reads
   illegibly against that busy background, so this instance stays solid white. */
.hero h1 .text-gradient {
  background: none;
  color: #ffffff;
  filter: none;
}


/* Brand gradient surfaces beyond headings also drift hue as you scroll */
.nav-brand-accent,
.hero::before,
.btn-primary,
.nav-cta,
.video-thumb-play {
  filter: hue-rotate(calc(var(--scroll-progress) * 40deg));
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.page-wrap { width: 100%; position: relative; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 var(--s5); }
.section { padding: var(--s9) 0; position: relative; }

/* ── NAV ─────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) var(--s7);
  background: rgba(18,20,34,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--outline);
}
.nav-logo-wrap { display: flex; align-items: center; gap: var(--s2); }
.nav-logo-img { display: block; border-radius: 8px; }

/* Logo ring (1c: logo-pulse-ring) — orbiting gradient spikes framing the brand mark */
.logo-mark { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-mark .nav-logo-img { position: relative; z-index: 1; }
.logo-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 0; display: block; pointer-events: none;
}
.logo-mark--header .logo-ring { width: 174px; height: 174px; }
.logo-mark--footer .logo-ring { width: 86px; height: 86px; }
.logo-mark--card .logo-ring { width: 150px; height: 150px; }
.nav-brand-name { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.04em; color: var(--accent); font-size: 15px; }
.nav-brand-accent { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; gap: var(--s6); }
.nav-link { font-family: var(--font-ui); font-size: 14px; color: var(--paragraph); transition: color var(--dur-fast, 140ms) var(--ease); }
.nav-link:hover, .nav-link--active { color: var(--accent); }
.nav-cta {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  padding: var(--s3) var(--s5);
  border-radius: 999px;
  background: var(--gradient-brand-simple);
  color: var(--accent);
  white-space: nowrap;
}
.nav-hamburger { display: none; flex-direction: column; gap: 4px; }
.nav-hamburger span { width: 22px; height: 2px; background: var(--accent); }
.nav-mobile { display: none; flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--s5) var(--s7); background: var(--secondary); }
.nav-mobile.is-open { display: flex; }
.nav-mobile .nav-cta { align-self: flex-start; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .site-nav { padding: var(--s4) var(--s5); }
  .site-nav > .nav-cta { display: none; }
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  padding: var(--s9) 0 var(--s8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: -20% -10% auto -10%; height: 600px;
  background: radial-gradient(ellipse at top, rgba(139,92,246,0.35), transparent 60%),
              radial-gradient(ellipse at 70% 20%, rgba(236,72,153,0.25), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.hero h1 { margin-bottom: var(--s4); }
.hero-sub { font-size: 18px; color: var(--paragraph); margin-bottom: var(--s6); }
.hero-actions { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  padding: var(--s3) var(--s6);
  border-radius: 999px;
  transition: transform var(--dur-fast, 140ms) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gradient-brand-simple); color: var(--accent); }
.btn-secondary { background: var(--secondary); border: 1px solid var(--outline); color: var(--accent); }
.btn-disabled { background: var(--secondary); border: 1px solid var(--outline); color: var(--paragraph); opacity: 0.6; cursor: not-allowed; }

/* ── SECTION HEADER ──────────────────────────────────────── */
.section-eyebrow {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #e7dcff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  padding: var(--s2) var(--s5);
  border-radius: 999px;
  margin-bottom: var(--s3);
}
.section-title { margin-bottom: var(--s3); }
.section-lede { max-width: 640px; color: var(--paragraph); margin-bottom: var(--s7); }
.section-center { text-align: center; }
.section-center .section-lede { margin-left: auto; margin-right: auto; }

/* ── CARD ────────────────────────────────────────────────── */
.card {
  background: var(--secondary);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: var(--s6);
}

/* ── FEATURE GRID ────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.feature-card-icon { display: block; margin-bottom: var(--s3); color: var(--grad-purple-a11y); }
.feature-card h6 { margin-bottom: var(--s2); }
.feature-card p { color: var(--paragraph); }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }

/* ── LITE PROMO ──────────────────────────────────────────── */
.lite-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: center;
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(236,72,153,0.08));
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: var(--s7);
}
.lite-panel-visual {
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  background: var(--secondary);
  border: 1px solid var(--outline);
  display: flex; align-items: center; justify-content: center;
  color: var(--paragraph);
  font-family: var(--font-ui); font-size: 13px;
}
@media (max-width: 800px) { .lite-panel { grid-template-columns: 1fr; } }

/* ── NEWSLETTER ──────────────────────────────────────────── */
.newsletter-panel {
  text-align: center;
  background: var(--secondary);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: var(--s6) var(--s7);
}
.newsletter-embed-slot {
  margin-top: var(--s4);
  padding: var(--s5);
  border: 1px dashed var(--outline);
  border-radius: var(--radius);
  color: var(--paragraph);
  font-family: var(--font-ui);
  font-size: 13px;
}

/* ── PRICING ─────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}
.pricing-card { text-align: left; }
.pricing-card-tier { font-family: var(--font-ui); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grad-purple-a11y); margin-bottom: var(--s2); }
.pricing-card-price { margin-bottom: var(--s4); }
.pricing-card ul { list-style: none; margin-bottom: var(--s5); }
.pricing-card li { padding: var(--s2) 0; border-top: 1px solid var(--outline); font-size: 14px; }
.pricing-card li:first-child { border-top: none; }
@media (max-width: 700px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ── TESTIMONIALS PLACEHOLDER ────────────────────────────── */
.testimonial-placeholder {
  text-align: center;
  border: 1px dashed var(--outline);
  border-radius: var(--radius);
  padding: var(--s7);
  color: var(--paragraph);
}

/* ── HELP CARDS ──────────────────────────────────────────── */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.pricing-card-includes { font-size: 12px; color: var(--paragraph); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--s3); }
.help-card { text-align: center; }
.help-card-icon { display: block; margin: 0 auto var(--s3); color: var(--grad-purple-a11y); }
svg.discord-icon { color: #5865F2; }
@media (max-width: 700px) { .help-grid { grid-template-columns: 1fr; } }

/* ── DEVLOG POST NAV (prev/next) ─────────────────────────── */
.devlog-post-nav {
  display: flex; justify-content: space-between; gap: var(--s5);
  margin-top: var(--s7); padding-top: var(--s6);
  border-top: 1px solid var(--outline);
}
.devlog-post-nav-link {
  display: flex; flex-direction: column; gap: var(--s2);
  max-width: 46%;
  color: var(--paragraph);
}
.devlog-post-nav-link:hover .devlog-post-nav-title { color: var(--accent); }
.devlog-post-nav-link--next { text-align: right; margin-left: auto; }
.devlog-post-nav-label {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  color: var(--grad-purple-a11y); text-transform: uppercase; letter-spacing: 0.04em;
}
.devlog-post-nav-title { font-size: 14px; }
@media (max-width: 600px) { .devlog-post-nav-link { max-width: 100%; } }

/* ── LEGAL BODY ──────────────────────────────────────────── */
.legal-body h3 { margin-top: var(--s7); margin-bottom: var(--s3); }
.legal-body h3:first-of-type { margin-top: 0; }
.legal-body p { margin-bottom: var(--s4); }
.legal-body ul { margin: 0 0 var(--s4) var(--s6); padding-left: var(--s3); }
.legal-body li { margin-bottom: var(--s2); }

/* ── FOOTER ──────────────────────────────────────────────── */
/* footer-bg-peek sits just before <footer> and overlaps down into it by more
   than its own height (negative margin) — the footer's own opaque background,
   painted after it in document order, covers the overlapped portion. Only the
   sliver above the footer's top edge stays visible: the wave-bar strands read
   as peeking up from behind the footer rather than running through its content. */
.footer-bg-peek {
  position: relative;
  height: 140px;
  margin-bottom: -98px;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.footer-bg-peek .bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--primary);
  border-top: 1px solid var(--outline);
  padding: var(--s7) 0 var(--s5);
}
.footer-inner,
.footer-bottom { position: relative; z-index: 1; }
.footer-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 var(--s5);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s6);
  flex-wrap: wrap;
}
.footer-logo-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.footer-tagline { font-size: 13px; color: var(--paragraph); max-width: 320px; }
.footer-newsletter-slot {
  margin-top: var(--s4);
  max-width: 320px;
}
.footer-newsletter-label {
  color: var(--paragraph);
  font-family: var(--font-ui);
  font-size: 12px;
  margin-bottom: var(--s2);
}
.footer-newsletter-row { display: flex; gap: var(--s2); }
.footer-newsletter-input {
  flex: 1; min-width: 0;
  background-color: var(--primary);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--font-ui); font-size: 13px;
  padding: var(--s2) var(--s3);
}
.footer-newsletter-input::placeholder { color: var(--paragraph); }
.footer-newsletter-submit {
  background: var(--gradient-brand-simple);
  border: 0; border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  padding: var(--s2) var(--s4);
  cursor: pointer;
  transition: transform var(--dur-fast, 140ms) var(--ease);
}
.footer-newsletter-submit:hover { transform: translateY(-2px); }
.footer-nav-row { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.footer-nav-link { font-family: var(--font-ui); font-size: 13px; color: var(--paragraph); }
.footer-nav-link:hover { color: var(--accent); }
.footer-nav-sep { width: 1px; height: 16px; background: var(--outline); }
.footer-social-icon { color: var(--paragraph); }
.footer-social-icon:hover { color: var(--accent); }
.footer-bottom {
  max-width: 1140px; margin: var(--s6) auto 0; padding: var(--s5) var(--s5) 0;
  border-top: 1px solid var(--outline);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paragraph);
}
.footer-bottom-legal { display: flex; gap: var(--s4); }
.footer-bottom-legal a:hover { color: var(--accent); }

.hero, .section-divider { position: relative; }
.hero > .container, .hero-inner { position: relative; z-index: 1; }
.section-divider {
  height: 100px;
  overflow: hidden;
}

/* ── REACTIVE BACKGROUND CANVAS (1a hero-wave-bar / 1b section-terrain) ── */
.bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}


/* ── CHECKLIST ───────────────────────────────────────────── */
.checklist { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }
.checklist li { display: flex; align-items: flex-start; gap: var(--s3); font-size: 14px; color: var(--paragraph); }
.checklist li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; }

/* ── SCREENSHOT GRID ─────────────────────────────────────── */
.screenshot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.screenshot-grid-item {
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  background: var(--secondary);
  border: 1px solid var(--outline);
  display: flex; align-items: center; justify-content: center;
  color: var(--paragraph);
  font-family: var(--font-ui); font-size: 11px;
  text-align: center;
  padding: var(--s2);
}

/* ── VIDEO THUMB ─────────────────────────────────────────── */
.video-thumb {
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  background: var(--secondary);
  border: 1px solid var(--outline);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  color: var(--paragraph);
  font-family: var(--font-ui); font-size: 13px;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb-play {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gradient-brand-simple);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  position: absolute;
}

/* ── SUPPORT CARD (Discord-style, matches Athena's Patreon card) ───────── */
.support-card {
  border-top: 2px solid #5865f2;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.support-card-glow {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(88,101,242,0.25) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  align-self: center;
  color: #5865f2;
  margin-bottom: var(--s2);
}
.support-card-tag { color: #5865f2; font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.support-card-link { color: #5865f2; font-weight: 700; }
.support-card-link:hover { color: var(--accent); }

/* ── PLACEHOLDER AUDIT ───────────────────────────────────── */
.placeholder-flag {
  border: 2px dashed var(--error) !important;
  background: rgba(233,119,119,0.08) !important;
  position: relative;
}
.placeholder-flag::before {
  content: attr(data-needed);
  position: absolute;
  top: -11px;
  left: var(--s3);
  background: var(--error);
  color: var(--primary);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 2;
}

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }