@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Heavenly palette */
  --bg: #FBF6E9;
  --bg-warm: #FAF1D6;
  --bg-card: #FFFFFF;
  --bg-card-soft: #FFFCF1;
  --border: #E8D391;
  --border-soft: #F1E2B0;
  --text: #2B1F0B;
  --text-dim: #7B6A47;
  --accent: #B8860B;          /* deep gold */
  --accent-bright: #DCA73B;   /* warm gold */
  --accent-light: #F2C95C;
  --accent-pale: #FFE7A0;
  --accent-shadow: rgba(184, 134, 11, 0.28);
  --halo: rgba(255, 215, 110, 0.55);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 32px rgba(184, 134, 11, 0.12);
  --discord: #5865f2;
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  position: relative;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255, 220, 130, 0.7), transparent 65%),
    radial-gradient(ellipse 60% 40% at 12% 35%, rgba(255, 200, 90, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 80%, rgba(255, 220, 130, 0.18), transparent 70%),
    linear-gradient(180deg, #FAF1D6 0%, #FBF6E9 50%, #F5E8C5 100%);
  background-attachment: fixed;
}

/* Soft sun-ray halo at the top */
body::before {
  content: '';
  position: fixed;
  top: -250px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 800px;
  background:
    conic-gradient(from 270deg at 50% 100%,
      transparent 0deg,
      rgba(255, 220, 130, 0.18) 8deg,
      transparent 16deg,
      rgba(255, 220, 130, 0.12) 30deg,
      transparent 45deg,
      rgba(255, 220, 130, 0.18) 60deg,
      transparent 78deg,
      rgba(255, 220, 130, 0.10) 95deg,
      transparent 115deg,
      rgba(255, 220, 130, 0.16) 135deg,
      transparent 160deg,
      rgba(255, 220, 130, 0.10) 180deg);
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at 50% 100%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, black 0%, transparent 70%);
}

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

/* Top nav — iOS frosted glass */
.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  position: sticky;
  top: 0;
  background: rgba(251, 246, 233, 0.65);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  z-index: 100;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.2px;
  color: var(--text);
}

.duck {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px var(--halo));
  transform: translate(6px, 4px);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-brand img {
  object-fit: contain;
}

.brand-name {
  background: linear-gradient(180deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { color: var(--text-dim); font-weight: 500; transition: color 0.15s; }
.nav-links a:hover { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
}

.btn-primary {
  position: relative;
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-bright) 45%, var(--accent) 100%);
  color: #FFFEF5 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  box-shadow:
    0 8px 24px var(--accent-shadow),
    0 0 0 1px rgba(184, 134, 11, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08),
    0 0 30px rgba(255, 220, 130, 0.25);
  border: none;
  overflow: hidden;
}

/* Glass highlight overlay on top of golden button */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 1px 1px 50% 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  border-radius: inherit;
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 40px var(--accent-shadow),
    0 0 0 1px rgba(184, 134, 11, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08),
    0 0 60px rgba(255, 220, 130, 0.6);
  filter: brightness(1.06);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    0 4px 14px var(--accent-shadow),
    0 0 0 1px rgba(184, 134, 11, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ghost button — frosted glass */
.btn-ghost {
  background: var(--glass-bg);
  color: var(--text);
  border-color: var(--glass-border);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow:
    0 4px 16px rgba(184, 134, 11, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.btn-ghost:hover {
  background: var(--glass-bg-strong);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.btn-big { padding: 17px 30px; font-size: 17px; border-radius: 14px; }

/* Big premium hero CTA */
.btn-hero {
  padding: 26px 56px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.2px;
  border-radius: 20px;
  position: relative;
}

.btn-hero::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255, 220, 130, 0.4), transparent 70%);
  z-index: -1;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.3s;
}

.btn-hero:hover::after { opacity: 1; }

/* Hero */
.hero {
  padding: 100px 40px 80px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-inner { max-width: 820px; margin: 0 auto; position: relative; }

.duck-big {
  width: 220px;
  height: 220px;
  display: block;
  margin: 0 auto 24px;
  border-radius: 50%;
  object-fit: cover;
  filter:
    drop-shadow(0 12px 40px var(--halo))
    drop-shadow(0 0 80px rgba(255, 220, 130, 0.55));
}

.hero h1 {
  font-family: inherit;
  font-size: 92px;
  font-weight: 800;
  letter-spacing: -3.5px;
  line-height: 1;
  background: linear-gradient(180deg, #6B4A11 0%, var(--accent) 45%, var(--accent-light) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 25px var(--accent-shadow));
}

.tagline {
  font-size: 19px;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto 42px;
  line-height: 1.6;
}

.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Sections */
.section {
  padding: 70px 40px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.section h2 {
  font-family: inherit;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 32px;
  color: var(--text);
  position: relative;
  display: inline-block;
}

/* Decorative gold filigree under h2 */
.section h2::after {
  content: '';
  display: block;
  width: 100px;
  height: 3px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 50%, transparent 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px var(--halo);
}

/* Counters — glass cards */
.counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.counter-card {
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 34px 22px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

.counter-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  opacity: 0.65;
}

.counter-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  background: var(--glass-bg-strong);
  box-shadow:
    0 18px 42px var(--accent-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.counter-value {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -2px;
  color: transparent;
  background: linear-gradient(180deg, var(--accent-bright) 10%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
  margin-bottom: 12px;
}

.counter-label {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}

/* Tracks list — glass */
.tracks-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }

.tracks-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  transition: all 0.2s;
  box-shadow:
    0 4px 14px rgba(184, 134, 11, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.tracks-list li:hover {
  background: var(--glass-bg-strong);
  border-color: var(--accent);
  transform: translateX(6px);
  box-shadow: 0 12px 30px var(--accent-shadow);
}

.tracks-list .rank {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  color: #fff;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.tracks-list .thumb {
  width: 50px; height: 50px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--border-soft);
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.tracks-list .info { flex: 1; min-width: 0; }
.tracks-list .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tracks-list .title a { color: inherit; }
.tracks-list .title a:hover { color: var(--accent); }
.tracks-list .meta { color: var(--text-dim); font-size: 13px; margin-top: 3px; }
.tracks-list .plays {
  font-weight: 800;
  color: var(--accent);
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(255, 220, 130, 0.25), rgba(184, 134, 11, 0.12));
  border: 1px solid rgba(184, 134, 11, 0.22);
  border-radius: 9px;
  font-size: 14px;
  flex-shrink: 0;
}

.track-skeleton {
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
  justify-content: center;
}

/* Features — glass */
.features { padding-bottom: 110px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature {
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 32px;
  transition: all 0.3s;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

.feature::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255, 220, 130, 0.35), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.feature:hover {
  border-color: var(--accent);
  background: var(--glass-bg-strong);
  transform: translateY(-5px);
  box-shadow: 0 24px 48px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,0.95);
}

.feature:hover::before { opacity: 1; }

.feature-icon {
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 220, 130, 0.55), rgba(184, 134, 11, 0.15));
  color: var(--accent);
  box-shadow:
    inset 0 0 22px rgba(255, 220, 130, 0.4),
    0 3px 10px var(--accent-shadow);
  border: 1px solid rgba(184, 134, 11, 0.22);
}

.feature-icon svg { width: 28px; height: 28px; }
.feature-icon.icon-text { font-size: 30px; font-weight: 800; line-height: 1; }

.feature h3 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text);
  letter-spacing: -0.3px;
}

.feature p { color: var(--text-dim); font-size: 15px; line-height: 1.55; }

/* Footer — glass */
footer {
  border-top: 1px solid var(--glass-border);
  padding: 32px 40px;
  color: var(--text-dim);
  background: rgba(255, 252, 241, 0.45);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  position: relative;
  z-index: 1;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links { display: flex; gap: 22px; }
.footer-links a:hover { color: var(--accent); }

/* ===== Contact / Support chat ===== */
.contact-section { max-width: 760px; }
.contact-intro {
  color: var(--text-dim);
  font-size: 16px;
  margin-bottom: 28px;
  line-height: 1.6;
}

.chat {
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.9);
}

.chat-log {
  height: 440px;
  overflow-y: auto;
  padding: 8px 4px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

.chat-empty {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  padding: 40px 20px;
}

.chat-msg { display: flex; flex-direction: column; max-width: 80%; }
.chat-msg-user { align-self: flex-end; align-items: flex-end; }
.chat-msg-dev { align-self: flex-start; align-items: flex-start; }

.chat-bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.08);
}

.chat-msg-user .chat-bubble {
  background: linear-gradient(180deg, var(--accent-light), var(--accent-bright));
  color: #fff;
  border-bottom-right-radius: 4px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.chat-msg-dev .chat-bubble {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}

.chat-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  padding: 0 6px;
}

.chat-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.chat-form textarea {
  flex: 1;
  resize: vertical;
  min-height: 50px;
  max-height: 200px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
}
.chat-form button { flex-shrink: 0; }

.chat-status {
  margin-top: 10px;
  min-height: 20px;
  font-size: 13px;
  color: var(--text-dim);
}
.chat-status.ok { color: #2E7D32; }
.chat-status.error { color: #C62828; }

@media (max-width: 768px) {
  .chat-log { height: 360px; }
  .chat-form { flex-direction: column; }
  .chat-form button { width: 100%; }
}

/* Legal pages */
.legal { max-width: 820px; }
.legal h3 {
  font-size: 22px;
  margin: 32px 0 10px;
  color: var(--text);
  font-weight: 700;
}
.legal p { margin-bottom: 14px; color: var(--text-dim); line-height: 1.65; }
.legal ul { margin: 0 0 14px 20px; color: var(--text-dim); line-height: 1.7; }
.legal ul li { margin-bottom: 6px; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(184,134,11,0.4); }
.legal a:hover { text-decoration-color: var(--accent); }
.legal-updated {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(184, 134, 11, 0.1);
  border: 1px solid rgba(184, 134, 11, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* ===== Animations ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes haloPulse {
  0%, 100% { filter: drop-shadow(0 12px 40px var(--halo)) drop-shadow(0 0 80px rgba(255, 220, 130, 0.55)); }
  50% { filter: drop-shadow(0 12px 50px var(--halo)) drop-shadow(0 0 110px rgba(255, 220, 130, 0.8)); }
}
@keyframes shimmer {
  0% { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}

/* Hero animation on load */
.hero .duck-big {
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both, haloPulse 6s ease-in-out 0.9s infinite;
}
.hero h1 {
  animation: fadeUp 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero .tagline {
  animation: fadeUp 0.9s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero .cta-row {
  animation: fadeUp 0.9s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Topnav slides down */
.topnav {
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Reveal-on-scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for grid children */
.feature-grid .feature.reveal,
.counters .counter-card.reveal {
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Primary button — shimmer sweep */
.btn-primary {
  background-image:
    linear-gradient(110deg,
      transparent 30%,
      rgba(255, 255, 255, 0.35) 50%,
      transparent 70%),
    linear-gradient(180deg, var(--accent-light) 0%, var(--accent-bright) 45%, var(--accent) 100%);
  background-size: 200% 100%, 100% 100%;
  background-position: -100% 50%, 0 0;
  background-repeat: no-repeat;
  transition: background-position 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover {
  background-position: 200% 50%, 0 0;
}

/* Halo ring pulse */
.btn-hero::after {
  animation: fadeIn 1s 0.6s both;
}

/* Tracks list reveal */
.tracks-list li.reveal {
  transition-delay: calc(var(--i, 0) * 40ms);
}

/* Counter value count-up — class added by JS when animating */
.counter-value.counting {
  display: inline-block;
  transition: transform 0.2s;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .topnav {
    padding: 14px 16px;
    flex-direction: row;
    gap: 10px;
  }
  .brand { font-size: 19px; gap: 8px; }
  .brand-name { letter-spacing: 0; }
  .duck { width: 32px; height: 32px; }
  .nav-links { gap: 12px; }
  .nav-links a:not(.btn) { display: none; }  /* hide menu links on mobile, keep Invite */
  .nav-links .btn { padding: 8px 14px; font-size: 14px; }

  .hero { padding: 60px 20px 40px; }
  .duck-big { width: 150px; height: 150px; margin-bottom: 16px; }
  .hero h1 {
    font-size: 52px;
    letter-spacing: -2px;
  }
  .tagline { font-size: 16px; margin-bottom: 28px; }
  .btn-hero { padding: 18px 32px; font-size: 18px; border-radius: 16px; }

  .section { padding: 45px 18px; }
  .section h2 { font-size: 28px; letter-spacing: -0.5px; }
  .section h2::after { width: 70px; }

  .counters { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .counter-card { padding: 24px 14px; border-radius: 16px; }
  .counter-value { font-size: 38px; }
  .counter-label { font-size: 11px; letter-spacing: 1px; }

  .feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature { padding: 24px 22px; border-radius: 16px; }
  .feature h3 { font-size: 17px; }
  .feature p { font-size: 14px; }

  .tracks-list li {
    padding: 12px 14px;
    gap: 12px;
    border-radius: 12px;
  }
  .tracks-list li:hover { transform: none; }
  .tracks-list .rank { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
  .tracks-list .thumb { width: 42px; height: 42px; border-radius: 8px; }
  .tracks-list .title { font-size: 14px; }
  .tracks-list .meta { font-size: 12px; }
  .tracks-list .plays { padding: 4px 10px; font-size: 12px; }

  footer { padding: 24px 18px; }
  .footer-inner { gap: 14px; }
  .footer-brand { font-size: 14px; }
  .footer-links { gap: 16px; font-size: 14px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 44px; }
  .duck-big { width: 130px; height: 130px; }
  .section h2 { font-size: 24px; }
  .counter-value { font-size: 32px; }
}

/* Respect user's reduce-motion setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}