/* ============================================
   R.I.T.H.M - Landing Page Styles
   Hero, feature cards, benefits, resources, CTA.
   ============================================ */

/* ── Hero ────────────────────────────────── */

.hero {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  position: relative;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.hero .subtitle {
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  font-weight: 400;
}

.hero .subtext {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ── CTA Buttons ─────────────────────────── */

.cta-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

.cta-buttons .btn {
  padding: 0.875rem 1.75rem;
  font-size: 1.05rem;
}

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

.btn-secondary-outline:hover {
  background: var(--input-bg);
  border-color: var(--primary);
  color: var(--text-primary);
}

/* ── Hero Two-Column Layout (Desktop) ───── */

@media (min-width: 1024px) {
  .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    text-align: left;
  }

  .hero .cta-buttons {
    justify-content: flex-start;
  }

  .hero .stats-row {
    justify-content: flex-start;
  }
}

/* ── Hero Demo Window ─────────────────────── */

.hero-demo {
  display: flex;
  justify-content: center;
}

.hero-demo-window {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.hero-demo-titlebar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.875rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.hero-demo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-color);
}

.hero-demo-dot:nth-child(1) { background: #ec6a5e; }
.hero-demo-dot:nth-child(2) { background: #f4bf4f; }
.hero-demo-dot:nth-child(3) { background: #61c554; }

.hero-demo-title {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.hero-staff-svg {
  display: block;
  width: 100%;
  height: auto;
  padding: 1rem 0.5rem;
}

/* ── Hero Demo Slideshow ─────────────────── */

.hero-demo-content {
  position: relative;
  aspect-ratio: 380 / 252;
}

.hero-demo-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.hero-demo-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.hero-demo-slide.fading-out {
  opacity: 0;
}

.hero-demo-title {
  transition: opacity 0.3s ease;
}

.hero-demo-title.fading {
  opacity: 0;
}

/* ── Demo Navigation Arrows ───────────── */

.hero-demo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  padding: 0;
}

.hero-demo-content:hover .hero-demo-arrow {
  opacity: 1;
}

.hero-demo-arrow:hover {
  background: rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
}

.hero-demo-arrow-prev { left: 6px; }
.hero-demo-arrow-next { right: 6px; }

@media (hover: none) {
  .hero-demo-arrow {
    opacity: 1;
  }
}

/* ── Note Reading Animations ────────────── */

.hero-demo-slide.active .hero-note {
  opacity: 0;
}

.hero-demo-slide.active .hero-note-1 {
  animation: heroFadeIn 0.4s ease forwards 0.3s;
}

.hero-demo-slide.active .hero-note-2 {
  animation: heroFadeIn 0.4s ease forwards 0.9s;
}

.hero-demo-slide.active .hero-note-3 {
  animation: heroFadeIn 0.4s ease forwards 1.5s;
}

.hero-demo-slide.active .hero-note-label {
  opacity: 0;
}

.hero-demo-slide.active .hero-note-1 .hero-note-label {
  animation: heroFadeIn 0.4s ease forwards 0.6s;
}

.hero-demo-slide.active .hero-note-2 .hero-note-label {
  animation: heroFadeIn 0.4s ease forwards 1.2s;
}

.hero-demo-slide.active .hero-note-3 .hero-note-label {
  animation: heroFadeIn 0.4s ease forwards 1.8s;
}

.hero-cursor {
  opacity: 0;
  animation: heroCursorMove 4.5s ease forwards 0.3s;
}

.hero-demo-slide:not(.active) .hero-cursor {
  animation: none;
  opacity: 0;
}

@keyframes heroCursorMove {
  0%   { transform: translate(0, 0);        opacity: 0; }
  5%   { transform: translate(0, 0);        opacity: 0.08; }
  30%  { transform: translate(0, 0);        opacity: 0.08; }
  35%  { transform: translate(0, 0);        opacity: 0; }
  38%  { transform: translate(70px, -30px); opacity: 0; }
  43%  { transform: translate(70px, -30px); opacity: 0.08; }
  63%  { transform: translate(70px, -30px); opacity: 0.08; }
  68%  { transform: translate(70px, -30px); opacity: 0; }
  71%  { transform: translate(140px, -68px); opacity: 0; }
  76%  { transform: translate(140px, -68px); opacity: 0.08; }
  95%  { transform: translate(140px, -68px); opacity: 0.08; }
  100% { transform: translate(140px, -68px); opacity: 0; }
}

@keyframes heroFadeIn {
  to { opacity: 1; }
}

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

/* ── Chord Reading Animations ───────────── */

.hero-demo-slide.active .hero-chord-note {
  opacity: 0;
}

.hero-demo-slide.active .hero-chord-note-1 {
  animation: heroFadeIn 0.4s ease forwards 0.3s;
}

.hero-demo-slide.active .hero-chord-note-2 {
  animation: heroFadeIn 0.4s ease forwards 0.7s;
}

.hero-demo-slide.active .hero-chord-note-3 {
  animation: heroFadeIn 0.4s ease forwards 1.1s;
}

.hero-demo-slide.active .hero-chord-bracket {
  opacity: 0;
  animation: heroFadeIn 0.4s ease forwards 1.6s;
}

.hero-demo-slide.active .hero-chord-read-label {
  opacity: 0;
  animation: heroFadeIn 0.5s ease forwards 2s;
}

.hero-demo-slide.active .hero-chord-read-root {
  opacity: 0;
  animation: heroFadeIn 0.5s ease forwards 2.5s;
}

/* ── Scale Reading Animations ───────────── */

.hero-demo-slide.active .hero-scale-read-note {
  opacity: 0;
}

.hero-demo-slide.active .hero-scale-read-note-1 { animation: heroFadeIn 0.3s ease forwards 0.2s; }
.hero-demo-slide.active .hero-scale-read-note-2 { animation: heroFadeIn 0.3s ease forwards 0.45s; }
.hero-demo-slide.active .hero-scale-read-note-3 { animation: heroFadeIn 0.3s ease forwards 0.7s; }
.hero-demo-slide.active .hero-scale-read-note-4 { animation: heroFadeIn 0.3s ease forwards 0.95s; }
.hero-demo-slide.active .hero-scale-read-note-5 { animation: heroFadeIn 0.3s ease forwards 1.2s; }
.hero-demo-slide.active .hero-scale-read-note-6 { animation: heroFadeIn 0.3s ease forwards 1.45s; }
.hero-demo-slide.active .hero-scale-read-note-7 { animation: heroFadeIn 0.3s ease forwards 1.7s; }
.hero-demo-slide.active .hero-scale-read-note-8 { animation: heroFadeIn 0.3s ease forwards 1.95s; }

.hero-demo-slide.active .hero-scale-read-label {
  opacity: 0;
  animation: heroFadeIn 0.6s ease forwards 2.5s;
}

/* ── Duration Reading Animations ────────── */

.hero-demo-slide.active .hero-dur-symbol {
  opacity: 0;
}

.hero-demo-slide.active .hero-dur-symbol-1 { animation: heroFadeInUp 0.5s ease forwards 0.3s; }
.hero-demo-slide.active .hero-dur-symbol-2 { animation: heroFadeInUp 0.5s ease forwards 0.9s; }
.hero-demo-slide.active .hero-dur-symbol-3 { animation: heroFadeInUp 0.5s ease forwards 1.5s; }
.hero-demo-slide.active .hero-dur-symbol-4 { animation: heroFadeInUp 0.5s ease forwards 2.1s; }

.hero-demo-slide.active .hero-dur-progress {
  animation: heroDurProgress 5s ease forwards 0.3s;
}

@keyframes heroDurProgress {
  0% { width: 0; }
  100% { width: 270px; }
}

.hero-demo-slide.active .hero-dur-label {
  opacity: 0;
  animation: heroFadeIn 0.5s ease forwards 0.1s;
}

/* ── Reduced motion ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-demo-slide,
  .hero-demo-title {
    transition: none;
  }
  .hero-note,
  .hero-note-label,
  .hero-cursor,
  .hero-chord-note,
  .hero-chord-bracket,
  .hero-chord-read-label,
  .hero-chord-read-root,
  .hero-scale-read-note,
  .hero-scale-read-label,
  .hero-dur-symbol,
  .hero-dur-progress,
  .hero-dur-label {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ── Hero Stats Row ──────────────────────── */

.hero .stats-row {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.hero .stat-item {
  text-align: center;
}

.hero .stat-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary);
}

.hero .stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Feature Cards ───────────────────────── */

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.75rem;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.feature-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: inherit;
}

/* ── Card Animation Panel ──────────────── */

.card-animation {
  border-radius: 8px;
  margin: -1.75rem -1.75rem 1.25rem -1.75rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-animation svg {
  width: 100%;
  height: 100%;
  max-height: 100px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Staff lines shared across multiple cards */
.card-animation .staff-line {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.4;
}

/* ── Per-card animation colors ─────────── */

.feature-card.note .card-animation       { background: rgba(74, 158, 111, 0.1); color: var(--primary); }
.feature-card.interval .card-animation   { background: rgba(212, 197, 160, 0.08); color: var(--secondary); }
.feature-card.chord .card-animation      { background: rgba(138, 154, 106, 0.1); color: var(--olive); }
.feature-card.chordread .card-animation  { background: rgba(110, 126, 82, 0.1); color: var(--olive-dark); }
.feature-card.scale .card-animation      { background: rgba(91, 163, 201, 0.1); color: #5ba3c9; }
.feature-card.scaleread .card-animation  { background: rgba(74, 154, 138, 0.1); color: #4a9a8a; }
.feature-card.pitch .card-animation      { background: rgba(212, 197, 160, 0.08); color: var(--accent); }
.feature-card.duration .card-animation   { background: rgba(184, 144, 64, 0.1); color: #b89040; }
.feature-card.duration-reading .card-animation { background: rgba(138, 106, 74, 0.1); color: #8a6a4a; }
.feature-card.synth .card-animation      { background: rgba(90, 173, 122, 0.1); color: var(--success); }
.feature-card.metronome .card-animation  { background: rgba(229, 107, 111, 0.1); color: var(--danger); }
.feature-card.leaderboard .card-animation { background: rgba(212, 197, 160, 0.08); color: var(--accent); }

/* ── Note Reading Animation ────────────── */

.anim-note ellipse { fill: currentColor; stroke: none; }
.anim-note line { stroke: currentColor; }
.anim-note { opacity: 0; animation: noteAppear 3s ease-in-out infinite; }
.anim-note-1 { animation-delay: 0s; }
.anim-note-2 { animation-delay: 0.5s; }
.anim-note-3 { animation-delay: 1s; }
.anim-note-4 { animation-delay: 1.5s; }

@keyframes noteAppear {
  0%, 10% { opacity: 0; transform: translateY(6px); }
  20%, 70% { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* ── Interval Training Animation ───────── */

.anim-interval-low ellipse, .anim-interval-high ellipse { fill: currentColor; stroke: none; }
.anim-interval-low line, .anim-interval-high line { stroke: currentColor; }
.anim-interval-arc { stroke: currentColor; stroke-dasharray: 120; stroke-dashoffset: 120; animation: arcDraw 3s ease-in-out infinite; }
.anim-interval-label { fill: currentColor; font-size: 14px; font-weight: 700; opacity: 0; animation: labelFade 3s ease-in-out infinite; animation-delay: 1s; }
.anim-interval-low { animation: notePulse 3s ease-in-out infinite; }
.anim-interval-high { animation: notePulse 3s ease-in-out infinite; animation-delay: 0.6s; }

@keyframes arcDraw {
  0%, 15% { stroke-dashoffset: 120; }
  50%, 75% { stroke-dashoffset: 0; }
  90%, 100% { stroke-dashoffset: -120; }
}

@keyframes labelFade {
  0%, 5% { opacity: 0; }
  20%, 55% { opacity: 1; }
  75%, 100% { opacity: 0; }
}

@keyframes notePulse {
  0%, 15% { opacity: 0.4; transform: scale(0.95); }
  30%, 65% { opacity: 1; transform: scale(1); }
  80%, 100% { opacity: 0.4; transform: scale(0.95); }
}

/* ── Chord Identification Animation ────── */

.anim-chord-stack ellipse { fill: currentColor; stroke: none; }
.anim-chord-stack line { stroke: currentColor; }
.anim-chord-stack { animation: chordPulse 2.5s ease-in-out infinite; }
.anim-wave { stroke: currentColor; }
.anim-wave-1 { animation: wavePulse 2.5s ease-out infinite; animation-delay: 0.3s; }
.anim-wave-2 { animation: wavePulse 2.5s ease-out infinite; animation-delay: 0.6s; }
.anim-wave-3 { animation: wavePulse 2.5s ease-out infinite; animation-delay: 0.9s; }

@keyframes chordPulse {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.04); }
  30% { transform: scale(1); }
}

@keyframes wavePulse {
  0% { opacity: 0; transform: translateX(0); }
  20% { opacity: 0.8; }
  80% { opacity: 0; transform: translateX(8px); }
  100% { opacity: 0; transform: translateX(8px); }
}

/* ── Chord Reading Animation ───────────── */

.anim-chordread-1 ellipse, .anim-chordread-2 ellipse { fill: currentColor; stroke: none; }
.anim-chordread-1 line, .anim-chordread-2 line { stroke: currentColor; }
.anim-chordread-1 { opacity: 0; animation: chordreadAppear 4s ease-in-out infinite; }
.anim-chordread-2 { opacity: 0; animation: chordreadAppear 4s ease-in-out infinite; animation-delay: 1.5s; }

@keyframes chordreadAppear {
  0%, 8% { opacity: 0; transform: translateY(5px); }
  18%, 55% { opacity: 1; transform: translateY(0); }
  70%, 100% { opacity: 0; }
}

/* ── Scale Identification Animation ────── */

.anim-scale-dot { fill: currentColor; stroke: none; opacity: 0; }
.anim-scale-path { stroke: currentColor; }
.anim-scale-dot-1 { animation: scaleDotAppear 3.5s ease-in-out infinite; animation-delay: 0s; }
.anim-scale-dot-2 { animation: scaleDotAppear 3.5s ease-in-out infinite; animation-delay: 0.3s; }
.anim-scale-dot-3 { animation: scaleDotAppear 3.5s ease-in-out infinite; animation-delay: 0.6s; }
.anim-scale-dot-4 { animation: scaleDotAppear 3.5s ease-in-out infinite; animation-delay: 0.9s; }
.anim-scale-dot-5 { animation: scaleDotAppear 3.5s ease-in-out infinite; animation-delay: 1.2s; }
.anim-scale-dot-6 { animation: scaleDotAppear 3.5s ease-in-out infinite; animation-delay: 1.5s; }

@keyframes scaleDotAppear {
  0%, 8% { opacity: 0; r: 2; }
  18%, 60% { opacity: 1; r: 5; }
  78%, 100% { opacity: 0; r: 2; }
}

/* ── Scale Reading Animation ───────────── */

.anim-scaleread-dot { fill: currentColor; stroke: none; opacity: 0; }
.anim-scaleread-dot-1 { animation: scaleDotAppear 4s ease-in-out infinite; animation-delay: 0s; }
.anim-scaleread-dot-2 { animation: scaleDotAppear 4s ease-in-out infinite; animation-delay: 0.25s; }
.anim-scaleread-dot-3 { animation: scaleDotAppear 4s ease-in-out infinite; animation-delay: 0.5s; }
.anim-scaleread-dot-4 { animation: scaleDotAppear 4s ease-in-out infinite; animation-delay: 0.75s; }
.anim-scaleread-dot-5 { animation: scaleDotAppear 4s ease-in-out infinite; animation-delay: 1s; }
.anim-scaleread-dot-6 { animation: scaleDotAppear 4s ease-in-out infinite; animation-delay: 1.25s; }
.anim-scaleread-dot-7 { animation: scaleDotAppear 4s ease-in-out infinite; animation-delay: 1.5s; }
.anim-scaleread-dot-8 { animation: scaleDotAppear 4s ease-in-out infinite; animation-delay: 1.75s; }

/* ── Ear Training (Pitch) Animation ────── */

.anim-ear { stroke: currentColor; }
.anim-ear-inner { stroke: currentColor; }
.anim-sound { stroke: currentColor; }
.anim-sound-1 { animation: soundWave 2s ease-out infinite; animation-delay: 0s; }
.anim-sound-2 { animation: soundWave 2s ease-out infinite; animation-delay: 0.3s; }
.anim-sound-3 { animation: soundWave 2s ease-out infinite; animation-delay: 0.6s; }

@keyframes soundWave {
  0% { opacity: 0; transform: scaleX(0.7); }
  30% { opacity: 0.8; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.2); }
}

/* ── Duration Hearing Animation ────────── */

.anim-dur-whole, .anim-dur-half, .anim-dur-quarter, .anim-dur-eighth { opacity: 0.4; }
.anim-dur-whole ellipse, .anim-dur-half ellipse { stroke: currentColor; fill: none; }
.anim-dur-quarter ellipse, .anim-dur-eighth ellipse { fill: currentColor; stroke: none; }
.anim-dur-half line, .anim-dur-quarter line, .anim-dur-eighth line { stroke: currentColor; }
.anim-dur-eighth path { stroke: currentColor; }
.anim-dur-label { fill: currentColor; font-size: 12px; opacity: 0.5; }

.anim-dur-whole { animation: durHighlight 6s ease-in-out infinite; animation-delay: 0s; }
.anim-dur-half { animation: durHighlight 6s ease-in-out infinite; animation-delay: 1.5s; }
.anim-dur-quarter { animation: durHighlight 6s ease-in-out infinite; animation-delay: 3s; }
.anim-dur-eighth { animation: durHighlight 6s ease-in-out infinite; animation-delay: 4.5s; }

@keyframes durHighlight {
  0%, 8% { opacity: 0.4; transform: scale(1); }
  14%, 22% { opacity: 1; transform: scale(1.08); }
  30%, 100% { opacity: 0.4; transform: scale(1); }
}

/* ── Duration Reading Animation ────────── */

.anim-durread-1 ellipse { stroke: currentColor; fill: none; }
.anim-durread-2 ellipse { stroke: currentColor; fill: none; }
.anim-durread-2 line { stroke: currentColor; }
.anim-durread-3 ellipse { fill: currentColor; stroke: none; }
.anim-durread-3 line { stroke: currentColor; }
.anim-durread-4 ellipse { fill: currentColor; stroke: none; }
.anim-durread-4 line, .anim-durread-4 path { stroke: currentColor; }

.anim-durread-1 { opacity: 0; animation: durreadAppear 5s ease-in-out infinite; animation-delay: 0s; }
.anim-durread-2 { opacity: 0; animation: durreadAppear 5s ease-in-out infinite; animation-delay: 0.8s; }
.anim-durread-3 { opacity: 0; animation: durreadAppear 5s ease-in-out infinite; animation-delay: 1.6s; }
.anim-durread-4 { opacity: 0; animation: durreadAppear 5s ease-in-out infinite; animation-delay: 2.4s; }

@keyframes durreadAppear {
  0%, 5% { opacity: 0; }
  15%, 55% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* ── Synth (Piano) Animation ───────────── */

.anim-white-key { fill: var(--text-primary); stroke: currentColor; stroke-width: 1; opacity: 0.15; }
.anim-black-key { fill: currentColor; stroke: none; opacity: 0.6; }
.anim-key-press { fill: currentColor; stroke: none; opacity: 0; }
.anim-key-press-1 { animation: keyPress 3s ease-in-out infinite; animation-delay: 0s; }
.anim-key-press-2 { animation: keyPress 3s ease-in-out infinite; animation-delay: 0.8s; }
.anim-key-press-3 { animation: keyPress 3s ease-in-out infinite; animation-delay: 1.6s; }

@keyframes keyPress {
  0%, 10% { opacity: 0; }
  20%, 35% { opacity: 0.3; }
  50%, 100% { opacity: 0; }
}

/* ── Metronome Animation ───────────────── */

.anim-metro-body { stroke: currentColor; }
.anim-metro-pivot { fill: currentColor; stroke: none; }
.anim-metro-arm { stroke: currentColor; transform-origin: 100px 78px; animation: pendulum 1.5s ease-in-out infinite alternate; }
.anim-metro-tick { stroke: currentColor; }

@keyframes pendulum {
  0% { transform: rotate(-25deg); }
  100% { transform: rotate(25deg); }
}

/* ── Leaderboard Animation ─────────────── */

.anim-podium { fill: currentColor; opacity: 0.35; stroke: none; }
.anim-podium-1 { animation: podiumRise 4s ease-out infinite; animation-delay: 0.3s; }
.anim-podium-2 { animation: podiumRise 4s ease-out infinite; animation-delay: 0s; }
.anim-podium-3 { animation: podiumRise 4s ease-out infinite; animation-delay: 0.6s; }
.anim-podium-rank { fill: currentColor; font-size: 14px; font-weight: 700; opacity: 0; }
.anim-podium-crown { font-size: 18px; }
.anim-podium-rank { animation: rankAppear 4s ease-out infinite; }
.anim-podium-crown { animation: rankAppear 4s ease-out infinite; animation-delay: 0.5s; }

@keyframes podiumRise {
  0%, 10% { opacity: 0; transform: translateY(10px); }
  25%, 70% { opacity: 0.45; transform: translateY(0); }
  85%, 100% { opacity: 0; }
}

@keyframes rankAppear {
  0%, 15% { opacity: 0; }
  30%, 65% { opacity: 0.9; }
  80%, 100% { opacity: 0; }
}

/* ── Reduced Motion ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .card-animation * {
    animation: none !important;
    opacity: 1 !important;
  }
  .anim-note { opacity: 1 !important; }
  .anim-scale-dot { opacity: 1 !important; }
  .anim-scaleread-dot { opacity: 1 !important; }
  .anim-dur-whole, .anim-dur-half, .anim-dur-quarter, .anim-dur-eighth { opacity: 1 !important; }
  .anim-durread-1, .anim-durread-2, .anim-durread-3, .anim-durread-4 { opacity: 1 !important; }
  .anim-chordread-1, .anim-chordread-2 { opacity: 1 !important; }
  .anim-interval-low, .anim-interval-high { opacity: 1 !important; }
  .anim-interval-arc { stroke-dashoffset: 0 !important; }
  .anim-interval-label { opacity: 1 !important; }
  .anim-sound-1 { opacity: 0.8 !important; }
  .anim-sound-2 { opacity: 0.5 !important; }
  .anim-sound-3 { opacity: 0.3 !important; }
  .anim-podium { opacity: 0.2 !important; }
  .anim-podium-rank { opacity: 0.9 !important; }
  .anim-key-press { opacity: 0 !important; }
  .anim-metro-arm { transform: rotate(0deg) !important; }
}

.feature-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.6;
}

.feature-card .arrow {
  margin-top: 1.25rem;
  color: var(--text-muted);
  transition: color 0.15s ease;
  font-weight: 500;
  font-size: 0.9rem;
}

.feature-card:hover .arrow {
  color: var(--primary);
}

.feature-tutorial-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.15s ease;
}

.feature-card:hover .feature-tutorial-link {
  color: var(--secondary);
}

/* ── Lesson Plan Section ─────────────────── */

.lesson-plan-section {
  padding: 4.5rem 2rem;
  background: var(--bg-secondary);
}

.lesson-plan-section h2 {
  text-align: center;
  margin-bottom: 0.75rem;
  font-size: 2.25rem;
}

.lesson-plan-section .section-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.phases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.phase-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}

.phase-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.phase-card.phase-1::before { background: var(--primary); }
.phase-card.phase-2::before { background: var(--secondary); }
.phase-card.phase-3::before { background: var(--olive); }
.phase-card.phase-4::before { background: var(--accent); }

.phase-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: inherit;
}

.phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.phase-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.phase-card.phase-1 .phase-label { color: var(--primary); }
.phase-card.phase-2 .phase-label { color: var(--secondary); }
.phase-card.phase-3 .phase-label { color: var(--olive); }
.phase-card.phase-4 .phase-label { color: var(--accent); }

.phase-weeks {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.phase-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.875rem;
  color: var(--text-primary);
}

.phase-topics {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
}

.phase-topics li {
  padding: 0.35rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  position: relative;
  padding-left: 1.25rem;
}

.phase-topics li::before {
  content: '\f054';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.55rem;
  position: absolute;
  left: 0;
  top: 0.6rem;
  color: var(--text-muted);
}

.phase-card .arrow {
  color: var(--text-muted);
  transition: color 0.15s ease;
  font-weight: 500;
  font-size: 0.9rem;
}

.phase-card:hover .arrow {
  color: var(--primary);
}

.section-cta {
  text-align: center;
  margin-top: 2rem;
}

/* ── Tutorials Section ──────────────────── */

.tutorials-section {
  padding: 4.5rem 2rem;
}

.tutorials-section h2 {
  text-align: center;
  margin-bottom: 0.75rem;
  font-size: 2.25rem;
}

.tutorials-section .section-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.tutorial-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0.75rem;
  max-width: 1400px;
  margin: 0 auto;
}

.tutorial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  transition: border-color 0.15s ease;
}

.tutorial-card:hover {
  border-color: var(--primary);
  text-decoration: none;
  color: inherit;
}

.tutorial-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #ffffff;
}

.tutorial-icon.note       { background: var(--primary); }
.tutorial-icon.interval   { background: var(--secondary); color: #1a1d1b; }
.tutorial-icon.chord      { background: var(--olive); }
.tutorial-icon.chordread  { background: var(--olive-dark); }
.tutorial-icon.scale      { background: #5ba3c9; }
.tutorial-icon.scaleread  { background: #4a9a8a; }
.tutorial-icon.pitch      { background: var(--accent); color: #1a1d1b; }
.tutorial-icon.duration   { background: #b89040; }
.tutorial-icon.duration-reading { background: #8a6a4a; }
.tutorial-icon.metronome  { background: var(--danger); }
.tutorial-icon.synth      { background: var(--success); }

.tutorial-info {
  flex: 1;
  min-width: 0;
}

.tutorial-info h4 {
  font-size: 1rem;
  margin-bottom: 0.125rem;
  color: var(--text-primary);
}

.tutorial-info p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.4;
}

.tutorial-actions {
  flex-shrink: 0;
}

.tutorial-link {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.tutorial-card:hover .tutorial-link {
  color: var(--primary);
}

/* ── Games Section ──────────────────────── */

.games-section {
  padding: 3.5rem 2rem 4.5rem;
  background: var(--bg-secondary);
  text-align: center;
}

.games-section h2 {
  margin-bottom: 0.75rem;
  font-size: 2.25rem;
}

.games-section .section-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Benefits Section ────────────────────── */

.benefits-section {
  padding: 4.5rem 2rem;
  background: var(--bg-secondary);
}

.benefits-section h2 {
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 2.25rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2rem;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.benefit-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}

.benefit-content h4 {
  margin-bottom: 0.375rem;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.benefit-content p {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.9rem;
}

/* ── Resources Section ───────────────────── */

.resources-section {
  padding: 3rem 2rem 4rem;
}

.resources-section h2 {
  text-align: center;
  margin-bottom: 0.75rem;
  font-size: 2.25rem;
}

.resources-section .section-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.resource-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.resource-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  transition: border-color 0.15s ease;
}

.resource-card:hover {
  border-color: var(--primary);
  text-decoration: none;
  color: inherit;
}

.resource-card .resource-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
}

.resource-card h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
}

.resource-card p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

/* ── CTA Section ─────────────────────────── */

.cta-section {
  padding: 3.5rem 2rem;
  text-align: center;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.cta-section h2 {
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.cta-section p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Responsive ──────────────────────────── */

@media (max-width: 768px) {
  .hero h1 { font-size: 2.25rem; }
  .hero .subtitle { font-size: 1.05rem; }
  .hero .stats-row { gap: 2rem; }
  .hero .stat-number { font-size: 1.75rem; }
  .phases-grid { grid-template-columns: 1fr; }
  .lesson-plan-section h2,
  .games-section h2 { font-size: 1.75rem; }
  .hero-demo-window { max-width: 340px; }
}