/* -----------------------------------------------------
   AudioZone landing — matches app theme
   Base:    #0B0B0D   Accent: #14DC23
   Font:    Inter, Space Grotesk fallback system stack
   Motion:  smooth IntersectionObserver reveals
   ----------------------------------------------------- */

:root {
  --bg: #0B0B0D;
  --surface: #121216;
  --surface-hi: #1A1A20;
  --surface-higher: #24242C;
  --text: #F3F3F5;
  --text-dim: #A0A0A8;
  --text-mute: #6D6D76;
  --divider: rgba(255, 255, 255, 0.08);
  --accent: #14DC23;
  --accent-dim: #0FA41B;
  --accent-glow: rgba(20, 220, 35, 0.28);
  --radius-card: 18px;
  --radius-chip: 10px;
  --radius-pill: 999px;
  --max-w: 1240px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Lock pinch-zoom + disable iOS double-tap-to-zoom so the
     layout stays calibrated at all times. `manipulation` keeps
     fast-tap response without the 300ms iOS click delay. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  min-height: 100dvh;
  /* Absolutely belt-and-braces against any child escaping the
     viewport horizontally on mobile. Any element that would
     otherwise push past `vw` (a stray shadow, an over-wide
     canvas) gets clipped here instead of triggering horizontal
     rubber-band scroll. */
  max-width: 100vw;
}

a { color: inherit; text-decoration: none; transition: color 180ms var(--ease); }
a:hover { color: var(--accent); }

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

::selection { background: var(--accent); color: #000; }

/* Background layers */
.bg-grid {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(20, 220, 35, 0.12), transparent 60%),
    linear-gradient(#0B0B0D, #0B0B0D);
}
.bg-grid::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
  opacity: .7;
}
.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 400px at 15% 20%, var(--accent-glow), transparent 70%),
    radial-gradient(500px 350px at 85% 60%, rgba(20, 220, 35, 0.12), transparent 70%);
  animation: glow-drift 18s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-4%, 2%, 0) scale(1.06); }
}

/* Nav — top-attached pill with rounded BOTTOM corners so it reads
   as a glass drawer descending from the top of the viewport.
   Top corners stay square because they meet the edge of the
   screen. */
.nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: 100%;
  max-width: 1100px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 14px 22px;
  border-radius: 0 0 22px 22px;
  background: rgba(18, 18, 22, 0.72);
  backdrop-filter: saturate(200%) blur(22px);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  transition: background 200ms var(--ease),
              border-color 200ms var(--ease);
}
.nav.scrolled {
  background: rgba(18, 18, 22, 0.88);
  border-color: rgba(255, 255, 255, 0.12);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text);
  font-family: 'Space Grotesk', inherit;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
}
.brand:hover { color: var(--accent); }
.brand-icon {
  /* iOS-style squircle corner. Slightly inset shadow adds depth
     without competing with the rest of the surface. */
  border-radius: 7px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.brand:hover .brand-icon {
  transform: rotate(-4deg) scale(1.05);
  box-shadow:
    0 0 0 1px rgba(20, 220, 35, 0.3),
    0 10px 22px rgba(20, 220, 35, 0.25);
}
.brand-icon.sm { border-radius: 5px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; color: var(--text-dim); font-weight: 500; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #000 !important;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(20, 220, 35, 0.28);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(20, 220, 35, 0.4);
}

/* Section layout */
section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 120px 28px;
  position: relative;
}
.section-head {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}
.section-kicker {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: var(--accent);
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(20, 220, 35, 0.3);
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
  background: rgba(20, 220, 35, 0.06);
}
.section-head h2 {
  font-family: 'Space Grotesk', inherit;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.section-head p {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 620px;
  margin: 0 auto;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  /* Nav is `position: fixed` so it no longer takes layout space.
     Pad the hero down below the floating pill. */
  padding: 120px 28px 120px;
  min-height: 100vh;
  min-height: 100dvh;
}
.hero-sub {
  margin: 32px 0 0;
  color: var(--text-mute);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.hero h1 {
  font-family: 'Space Grotesk', inherit;
  font-size: clamp(48px, 8vw, 92px);
  line-height: 0.98;
  margin: 0 0 20px;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.accent-gradient {
  background: linear-gradient(120deg, var(--accent) 0%, #4CFF5B 35%, var(--accent) 100%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: sheen 6s linear infinite;
}
@keyframes sheen {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.hero-lede {
  color: var(--text-dim);
  font-size: 19px; line-height: 1.55;
  max-width: 520px;
  margin: 0 0 36px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(20, 220, 35, 0.08);
  border: 1px solid rgba(20, 220, 35, 0.2);
  font-size: 13px; color: var(--accent);
  font-weight: 600; letter-spacing: 0.01em;
  margin-bottom: 24px;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(20, 220, 35, 0.6);
  animation: pulse-dot 1.6s infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(20, 220, 35, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(20, 220, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 220, 35, 0); }
}

.hero-ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 48px;
}
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  border-radius: 14px;
  background: #fff; color: #000;
  font-weight: 600;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.store-badge.big { padding: 16px 26px; }
.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  color: #000;
}
.store-badge.store-google { background: #0E0E10; color: #fff; border: 1px solid var(--divider); }
.store-badge.store-google:hover { color: #fff; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.05; }
.store-kicker { font-size: 11px; opacity: .7; font-weight: 500; }
.store-name { font-family: 'Space Grotesk', inherit; font-size: 17px; font-weight: 700; }
.store-badge.big .store-name { font-size: 20px; }

.hero-stats {
  display: flex; gap: 32px; flex-wrap: wrap;
}
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value {
  font-family: 'Space Grotesk', inherit;
  font-size: 22px; font-weight: 700;
  color: var(--accent);
}
.stat-label { font-size: 13px; color: var(--text-dim); }

/* Hero visual: device + waveform canvas */
.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  /* Contain glows + the float-rotation keyframe so nothing from
     the hero visual can bleed past the viewport edge on mobile.
     Without this, the device's 60px accent drop-shadow + its
     small rotation could push pixels off the left/right on a
     narrow screen and (per bug-report) read as the iPhone being
     "clipped". */
  max-width: 100%;
}
#waveform-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: blur(0.5px) drop-shadow(0 0 20px var(--accent-glow));
  opacity: .7;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* Device frame — CSS-only iPhone */
.hero-device {
  position: relative;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 60px var(--accent-glow));
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}
.device-frame {
  width: 300px;
  aspect-ratio: 300 / 620;
  background: linear-gradient(145deg, #2A2A30, #0F0F14);
  /* Slimmer outer radius + larger inner padding so screenshots
     sit with visible bezel on every side instead of clipping
     right up against the frame's rounded inner edge. */
  border-radius: 42px;
  padding: 10px;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 20px rgba(255, 255, 255, 0.02);
}
.device-frame-small { width: 240px; border-radius: 36px; padding: 8px; }
.device-notch {
  position: absolute; top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 22px;
  background: #000;
  border-radius: var(--radius-pill);
  z-index: 2;
}
.device-frame-small .device-notch {
  top: 11px; width: 72px; height: 18px;
}
/* Hide the fake notch the moment a real screenshot lands - the
   screenshot already contains the iOS Dynamic Island / notch,
   and having two stacked reads as a bug. */
.device-frame:has(.device-screen.has-screenshot) .device-notch {
  display: none;
}
.device-screen {
  background: var(--bg);
  /* Screen radius = frame radius (42) − padding (10) so the screen
     corners sit flush inside the bezel instead of poking into the
     rounded frame edge (previous 34px was 2px too tight against
     the bezel interior, which read as a clipping artifact on the
     gallery phones). */
  border-radius: 32px;
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
}
.device-frame-small .device-screen { border-radius: 28px; }

/* Inline mockup: Library */
.mock-app { padding: 42px 16px 16px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.mock-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
}
.mock-title {
  font-family: 'Space Grotesk', inherit;
  font-size: 22px; font-weight: 700;
  color: var(--text);
}
.mock-accent-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.mock-search {
  height: 34px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--divider);
}
.mock-groups {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1; overflow: hidden;
}
.mock-group {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 3px;
  transition: transform 300ms var(--ease), background 300ms var(--ease);
}
.mock-group.accent {
  background: rgba(20, 220, 35, 0.08);
  border-color: rgba(20, 220, 35, 0.3);
}
.mock-group-title { font-size: 13px; font-weight: 600; color: var(--text); }
.mock-group-sub { font-size: 11px; color: var(--text-dim); }

/* Mini player inside the library mock */
.mock-mini-player {
  background: var(--surface-hi);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.mock-mini-bar {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 40%, var(--divider) 40%);
}
.mock-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mock-mini-track { display: flex; flex-direction: column; min-width: 0; }
.mock-mini-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-mini-sub { font-size: 10px; color: var(--text-dim); }
.mock-mini-play {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent); color: #000;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-mute);
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: .7;
  grid-column: 1 / -1;
}

/* Features */
.features { padding-top: 140px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: transform 300ms var(--ease),
              border-color 300ms var(--ease),
              background 300ms var(--ease);
}
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 220, 35, 0.25);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-hi) 100%);
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(20, 220, 35, 0.1);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  transition: transform 300ms var(--ease);
}
.feature:hover .feature-icon { transform: scale(1.08); }
.feature h3 {
  font-family: 'Space Grotesk', inherit;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.feature p {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}
/* Soft tier hints used once on the cloud feature card. These are
   deliberately quiet - they inform without shouting. No full
   pricing section, no prices, just a breadcrumb so users know
   iCloud backup is free and Cloud Sync is a paid option. */
.feature-tag-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 12px;
}
.feature-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--divider);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.02);
}
.feature-tag.pro {
  color: var(--accent);
  border-color: rgba(20, 220, 35, 0.3);
  background: rgba(20, 220, 35, 0.06);
}

/* Screen gallery */
.screens { padding-top: 80px; }
.screen-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 28px;
  align-items: start;
}
.screen {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 20px;
}
.screen-caption { text-align: center; max-width: 280px; }
.screen-caption h4 {
  font-family: 'Space Grotesk', inherit;
  font-size: 17px; margin: 0 0 4px;
}
.screen-caption p {
  font-size: 13.5px; color: var(--text-dim);
  margin: 0;
}
.gallery-hint {
  text-align: center;
  color: var(--text-mute);
  font-size: 12px;
  margin-top: 60px;
}
.gallery-hint code {
  background: var(--surface);
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--divider);
  color: var(--accent);
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
}

/* Device-mock painters via CSS background (no PNGs required) */
[data-mock="library"]  { background: linear-gradient(180deg, #0B0B0D 0%, #121216 100%); }
[data-mock="player"]   { background: linear-gradient(180deg, #0B0B0D 0%, rgba(20, 220, 35, 0.08) 100%); }
[data-mock="effects"]  { background: linear-gradient(180deg, #0F0F14 0%, #0B0B0D 100%); }
[data-mock="notes"]    { background: linear-gradient(180deg, #121216 0%, #0B0B0D 100%); }

/* Dynamic mock overlays drawn in script.js */

/* Showcase */
.showcase {
  padding-top: 80px;
}
.showcase-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px 44px;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(18, 18, 22, 0.7) 100%);
  border: 1px solid var(--divider);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}
.showcase-inner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(500px 300px at 100% 50%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.showcase-copy h2 {
  font-family: 'Space Grotesk', inherit;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  margin: 10px 0 16px;
  letter-spacing: -0.02em;
}
.showcase-copy p {
  color: var(--text-dim);
  margin: 0 0 20px;
  font-size: 15.5px;
}
.bullet-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.bullet-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--text);
}
.bullet-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  flex-shrink: 0;
}

.showcase-waveform {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-hi);
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 20px;
  overflow: hidden;
}
#showcase-canvas {
  width: 100%; height: 100%;
}
.showcase-markers {
  position: absolute; inset: 20px;
  pointer-events: none;
}
.marker {
  position: absolute; top: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', inherit;
  font-weight: 700; font-size: 11px;
  box-shadow: 0 0 20px var(--accent-glow);
}
.marker.a { left: 24%; }
.marker.b { left: 68%; }
.marker-line {
  position: absolute; top: 20px; bottom: 20px;
  left: 24%; width: 44%;
  border-left: 1px dashed var(--accent);
  border-right: 1px dashed var(--accent);
  background: rgba(20, 220, 35, 0.04);
}

/* Download section */
.download {
  text-align: center;
  padding: 140px 28px;
}
.download-inner {
  max-width: 680px; margin: 0 auto;
  padding: 60px 40px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-hi) 100%);
  border: 1px solid var(--divider);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
.download-inner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(600px 400px at 50% -50%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}
.download h2 {
  font-family: 'Space Grotesk', inherit;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.download p {
  color: var(--text-dim);
  margin: 0 0 32px;
  font-size: 17px;
}
.download-badges {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  position: relative;
}

/* Footer */
.footer {
  border-top: 1px solid var(--divider);
  padding: 40px 28px;
  background: rgba(11, 11, 13, 0.5);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer-brand {
  display: flex; align-items: center; gap: 18px;
}
.footer-brand p {
  margin: 0;
  font-size: 13px;
  color: var(--text-mute);
}
.footer-links {
  display: flex; gap: 24px;
}
.footer-links a {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
}
.footer-links a:hover { color: var(--text); }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }

/* Responsive */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 120px;
  }
  .hero-visual { min-height: 520px; order: 2; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-inner { grid-template-columns: 1fr; padding: 36px 28px; }
}
@media (max-width: 720px) {
  section { padding: 80px 20px; }
  .nav {
    padding: 10px 14px 10px 16px;
    border-radius: 0 0 18px 18px;
  }
  .nav-links { gap: 14px; }
  /* On phones keep only the download CTA visible in the pill to
     leave room for the wordmark; the secondary links drop off
     (the page content links them inline anyway). */
  .nav-links a:not(.nav-cta) { display: none; }
  .feature-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 100px; }
  .hero h1 { font-size: clamp(40px, 12vw, 72px); }
  .hero-lede { font-size: 16px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .device-frame { width: 260px; }
  .device-frame-small { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

[data-mock="library"]  { background: #000 url('assets/screenshots/library.png')  center/cover; }
[data-mock="player"]   { background: #000 url('assets/screenshots/player.png')   center/cover; }
[data-mock="effects"]  { background: #000 url('assets/screenshots/effects.png')  center/cover; }
[data-mock="notes"]    { background: #000 url('assets/screenshots/notes.png')    center/cover; }