/* ══════════════════════════════════════════════════════════════════
   PlayFusion — Premium Landing Page CSS
   2026 Design System · Yellow (#fdf903) & Black Brand Theme
   Full Dark + Light Theme Support
   THERABApps
══════════════════════════════════════════════════════════════════ */

/* ─── DARK THEME TOKENS (default) ──────────────────────────────── */
:root {
  /* ── Backgrounds ── */
  --bg-primary:      #000000;
  --bg-secondary:    #0a0a0a;
  --bg-card:         rgba(253,249,3,0.04);
  --bg-card-solid:   #0d0d00;
  --bg-glass:        rgba(0,0,0,0.85);
  --bg-icon:         rgba(253,249,3,0.10);
  --bg-icon-neutral: rgba(255,255,255,0.06);
  --bg-input:        rgba(255,255,255,0.04);
  --bg-toggle-off:   rgba(255,255,255,0.10);
  --bg-sidebar:      rgba(0,0,0,0.20);

  /* ── Borders ── */
  --border:          rgba(253,249,3,0.12);
  --border-glow:     rgba(253,249,3,0.45);
  --border-subtle:   rgba(255,255,255,0.07);
  --border-icon:     rgba(253,249,3,0.15);

  /* ── Text ── */
  --text-primary:    #ffffff;
  --text-secondary:  #c8c8b4;
  --text-muted:      #6b6b50;
  --text-on-accent:  #000000;   /* text placed ON yellow buttons */
  --text-download:   #ffffff;   /* text inside download section */
  --text-download-sub: rgba(240,244,255,0.75);
  --text-download-note: rgba(240,244,255,0.50);

  /* ── Brand Accents ── */
  --accent-yellow:   #fdf903;
  --accent-yellow2:  #f5e800;
  --accent-yellow3:  #ffe566;
  --accent-green:    #39d98a;
  /* legacy aliases */
  --accent-purple:   #fdf903;
  --accent-blue:     #fdf903;
  --accent-cyan:     #fdf903;
  --accent-magenta:  #fdf903;

  /* ── Gradients ── */
  --grad-primary:    linear-gradient(135deg, #fdf903 0%, #f5e800 50%, #ffe566 100%);
  --grad-hero:       linear-gradient(135deg, #000000 0%, #0a0a0a 60%, #111100 100%);
  --grad-download:   linear-gradient(135deg, #000 0%, #111100 50%, #000 100%);
  --grad-download-overlay: linear-gradient(135deg, rgba(253,249,3,0.12) 0%, rgba(253,249,3,0.06) 100%);
  --grad-album:      linear-gradient(135deg, #fdf903, #ffe566);

  /* ── Shadows ── */
  --shadow-glow:     0 0 60px rgba(253,249,3,0.18);
  --shadow-card:     0 8px 32px rgba(0,0,0,0.50);
  --shadow-float:    0 8px 24px rgba(0,0,0,0.30);
  --shadow-nav:      0 4px 24px rgba(0,0,0,0.30);
  --shadow-phone:    0 40px 80px rgba(253,249,3,0.30);
  --shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.10);
  --shadow-chat:     0 20px 60px rgba(0,0,0,0.40);
  --shadow-device:   0 24px 60px rgba(253,249,3,0.12);
  --shadow-download: 0 12px 48px rgba(253,249,3,0.30);

  /* ── Phone-specific ── */
  --phone-notch-bg:  rgba(255,255,255,0.10);
  --phone-progress-track: rgba(255,255,255,0.08);
  --phone-bar-track:      rgba(255,255,255,0.08);

  /* ── Radii ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition:        all 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-bounce: all 0.4s cubic-bezier(0.34,1.56,0.64,1);

  /* ── Fonts ── */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  --nav-h: 72px;
}

/* ─── LIGHT THEME TOKENS ────────────────────────────────────────── */
[data-theme="light"] {
  /* ── Backgrounds ── */
  --bg-primary:      #fffef0;
  --bg-secondary:    #ffffff;
  --bg-card:         rgba(0,0,0,0.04);
  --bg-card-solid:   #fffde8;
  --bg-glass:        rgba(255,254,240,0.93);
  --bg-icon:         rgba(184,166,0,0.10);
  --bg-icon-neutral: rgba(0,0,0,0.05);
  --bg-input:        rgba(0,0,0,0.04);
  --bg-toggle-off:   rgba(0,0,0,0.10);
  --bg-sidebar:      rgba(0,0,0,0.04);

  /* ── Borders ── */
  --border:          rgba(0,0,0,0.09);
  --border-glow:     rgba(184,166,0,0.40);
  --border-subtle:   rgba(0,0,0,0.07);
  --border-icon:     rgba(184,166,0,0.18);

  /* ── Text ── */
  --text-primary:    #0a0a00;
  --text-secondary:  #3a3a20;
  --text-muted:      #8a8a60;
  --text-on-accent:  #000000;
  --text-download:   #0a0a00;
  --text-download-sub: rgba(20,20,0,0.65);
  --text-download-note: rgba(20,20,0,0.45);

  /* ── Brand Accents (deeper for contrast on white/cream) ── */
  --accent-yellow:   #b8a600;
  --accent-yellow2:  #a09200;
  --accent-yellow3:  #c8b800;
  --accent-green:    #1a9b5c;
  --accent-purple:   #b8a600;
  --accent-blue:     #b8a600;
  --accent-cyan:     #b8a600;
  --accent-magenta:  #b8a600;

  /* ── Gradients ── */
  --grad-primary:    linear-gradient(135deg, #b8a600 0%, #a09200 50%, #c8b800 100%);
  --grad-hero:       linear-gradient(135deg, #fffde0 0%, #fff9a0 50%, #fffef0 100%);
  --grad-download:   linear-gradient(135deg, #fffce0 0%, #fff9c0 50%, #fffef0 100%);
  --grad-download-overlay: linear-gradient(135deg, rgba(184,166,0,0.08) 0%, rgba(184,166,0,0.04) 100%);
  --grad-album:      linear-gradient(135deg, #b8a600, #c8b800);

  /* ── Shadows ── */
  --shadow-glow:     0 0 60px rgba(184,166,0,0.15);
  --shadow-card:     0 4px 20px rgba(0,0,0,0.10);
  --shadow-float:    0 6px 20px rgba(0,0,0,0.12);
  --shadow-nav:      0 4px 24px rgba(0,0,0,0.08);
  --shadow-phone:    0 24px 60px rgba(184,166,0,0.18);
  --shadow-inset:    inset 0 1px 0 rgba(0,0,0,0.04);
  --shadow-chat:     0 12px 40px rgba(0,0,0,0.10);
  --shadow-device:   0 16px 48px rgba(184,166,0,0.12);
  --shadow-download: 0 12px 48px rgba(184,166,0,0.20);

  /* ── Phone-specific ── */
  --phone-notch-bg:       rgba(0,0,0,0.08);
  --phone-progress-track: rgba(0,0,0,0.08);
  --phone-bar-track:      rgba(0,0,0,0.08);
}

/* ─── RESET & BASE ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
img { max-width:100%; display:block; }

/* ─── CUSTOM SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--accent-yellow); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-yellow3); }

/* ─── SELECTION ─────────────────────────────────────────────────── */
::selection { background: rgba(184,166,0,0.28); color: var(--text-primary); }

/* ─── FOCUS VISIBLE ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent-yellow);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── SR ONLY ───────────────────────────────────────────────────── */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap;
}

/* ─── UTILITIES ─────────────────────────────────────────────────── */
.gradient-text {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════════════════════════════ */
.pf-preloader {
  position:fixed; inset:0; z-index:9999;
  background: var(--bg-primary);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.pf-preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner { display:flex; flex-direction:column; align-items:center; gap:20px; }
.preloader-logo {
  width:64px; height:64px; border-radius: var(--radius-lg);
  background: var(--accent-yellow);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color: var(--text-on-accent);
  animation: preloaderPulse 1.5s ease-in-out infinite;
}
.preloader-logo img.pf-logo-img { width:42px; height:42px; border-radius:10px; object-fit:cover; }
@keyframes preloaderPulse {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(184,166,0,0.5); }
  50%      { transform:scale(1.08); box-shadow:0 0 0 16px rgba(184,166,0,0); }
}
.preloader-bar-wrap { width:200px; height:3px; background: var(--border); border-radius:2px; overflow:hidden; }
.preloader-bar { height:100%; background: var(--grad-primary); border-radius:2px; animation: preloaderFill 1.6s ease-out forwards; }
@keyframes preloaderFill { 0%{width:0%} 100%{width:100%} }
.preloader-text { font-family: var(--font-display); font-size:14px; color: var(--text-secondary); letter-spacing:1px; }

/* ══════════════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════════════════════════════════════════ */
.pf-scroll-progress {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: var(--grad-primary); z-index:9998; transition:width 0.1s linear;
}

/* ══════════════════════════════════════════════════════════════════
   CUSTOM CURSOR
══════════════════════════════════════════════════════════════════ */
.cursor-dot, .cursor-ring {
  pointer-events:none; position:fixed; z-index:9997;
  border-radius:50%; transform:translate(-50%,-50%); transition:opacity 0.3s;
}
.cursor-dot  { width:8px;  height:8px;  background: var(--accent-yellow); }
.cursor-ring { width:36px; height:36px; border:1.5px solid rgba(184,166,0,0.55); background:transparent; }
@media (hover:none),(pointer:coarse) { .cursor-dot,.cursor-ring { display:none; } }

/* ══════════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════════ */
.pf-nav {
  position:fixed; top:0; left:0; right:0;
  z-index:1000; height:var(--nav-h); transition:var(--transition);
}
.pf-nav.scrolled {
  background: var(--bg-glass);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow-nav);
}
.nav-container {
  max-width:1280px; margin:0 auto; padding:0 32px;
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo    { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-logo-icon {
  width:36px; height:36px; background: var(--accent-yellow);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  color: var(--text-on-accent); font-size:16px;
}
.nav-logo-icon img.pf-logo-img { width:22px; height:22px; border-radius:5px; object-fit:cover; display:block; }
.nav-logo-text {
  font-family: var(--font-display); font-size:20px; font-weight:800;
  letter-spacing:-0.5px; color: var(--text-primary);
}
.nav-links   { display:flex; align-items:center; gap:8px; }
.nav-link {
  font-size:14px; font-weight:500; color: var(--text-secondary);
  padding:8px 14px; border-radius: var(--radius-full); transition:var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--accent-yellow); background: var(--bg-icon); }
.nav-right   { display:flex; align-items:center; gap:12px; }
.theme-toggle {
  width:38px; height:38px; border-radius:50%;
  background: var(--bg-card); border:1px solid var(--border);
  color: var(--text-secondary); display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:var(--transition);
}
.theme-toggle:hover { border-color: var(--accent-yellow); color: var(--accent-yellow); }
.nav-cta {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px; background: var(--accent-yellow); color: var(--text-on-accent);
  border-radius: var(--radius-full); font-size:13px; font-weight:800;
  letter-spacing:0.2px; transition:var(--transition-bounce);
  box-shadow:0 4px 20px rgba(184,166,0,0.35);
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(184,166,0,0.55); background: var(--accent-yellow3); }
.hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:38px; height:38px; background: var(--bg-card);
  border:1px solid var(--border); border-radius: var(--radius-sm); padding:0 8px;
}
.hamburger span { display:block; width:18px; height:2px; background: var(--text-primary); border-radius:1px; transition:var(--transition); }

/* ── Mobile Drawer ── */
.mobile-drawer {
  position:fixed; inset:0; z-index:1001; background: var(--bg-primary);
  display:flex; align-items:center; justify-content:center;
  transform:translateX(100%); transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.mobile-drawer.open { transform:translateX(0); }
.drawer-inner { display:flex; flex-direction:column; align-items:center; gap:32px; width:100%; padding:40px; }
.drawer-close {
  position:absolute; top:20px; right:24px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background: var(--bg-card); border:1px solid var(--border);
  color: var(--text-primary); font-size:18px; transition:var(--transition);
}
.drawer-close:hover { background: var(--bg-icon); }
.drawer-links { display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.drawer-link {
  font-family: var(--font-display); font-size:28px; font-weight:700; color: var(--text-primary);
  padding:10px 0; display:block; text-align:center;
  transform:translateX(40px); opacity:0; transition:var(--transition);
}
.mobile-drawer.open .drawer-link              { transform:translateX(0); opacity:1; }
.mobile-drawer.open .drawer-link:nth-child(1) { transition-delay:0.08s; }
.mobile-drawer.open .drawer-link:nth-child(2) { transition-delay:0.14s; }
.mobile-drawer.open .drawer-link:nth-child(3) { transition-delay:0.20s; }
.mobile-drawer.open .drawer-link:nth-child(4) { transition-delay:0.26s; }
.mobile-drawer.open .drawer-link:nth-child(5) { transition-delay:0.32s; }
.drawer-link:hover { color: var(--accent-yellow); }
.drawer-cta {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 36px; background: var(--accent-yellow); color: var(--text-on-accent);
  border-radius: var(--radius-full); font-weight:800; font-size:16px; margin-top:8px;
}

/* ══════════════════════════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════════════════════════ */
.hero-section {
  position:relative; min-height:100vh; background: var(--grad-hero);
  overflow:hidden; display:flex; align-items:center;
}
.hero-blobs { position:absolute; inset:0; pointer-events:none; z-index:0; }
.blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.55; }
.blob-1 { width:600px; height:600px; top:-150px; left:-150px;
  background:radial-gradient(circle, rgba(184,166,0,0.35), transparent 70%);
  animation:blobFloat 12s ease-in-out infinite; }
.blob-2 { width:500px; height:500px; bottom:-100px; right:-100px;
  background:radial-gradient(circle, rgba(184,166,0,0.28), transparent 70%);
  animation:blobFloat 14s ease-in-out infinite reverse; }
.blob-3 { width:400px; height:400px; top:-80px; right:10%;
  background:radial-gradient(circle, rgba(184,166,0,0.15), transparent 70%);
  animation:blobFloat 10s ease-in-out infinite 2s; }
.blob-4 { width:350px; height:350px; bottom:10%; left:5%;
  background:radial-gradient(circle, rgba(184,166,0,0.10), transparent 70%);
  animation:blobFloat 16s ease-in-out infinite 1s; }
@keyframes blobFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(30px,-20px) scale(1.05); }
  66%      { transform:translate(-20px,20px) scale(0.95); }
}
.hero-dotgrid {
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(184,166,0,0.12) 1px, transparent 1px);
  background-size:32px 32px; pointer-events:none; z-index:0;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.particles-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.hero-container {
  position:relative; z-index:2; max-width:1280px; margin:0 auto;
  padding:calc(var(--nav-h) + 60px) 32px 80px;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; width:100%;
}
.hero-content { display:flex; flex-direction:column; gap:28px; }
.pf-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; background: var(--bg-icon); border:1px solid rgba(184,166,0,0.35);
  border-radius: var(--radius-full); font-size:13px; font-weight:600;
  color: var(--accent-yellow); width:fit-content;
}
.pf-badge i { color: var(--accent-yellow); }
.hero-title {
  font-family: var(--font-display); font-size:clamp(40px,5.5vw,72px);
  font-weight:900; line-height:1.08; letter-spacing:-2px; color: var(--text-primary);
}
.hero-sub { font-size:clamp(15px,1.8vw,18px); color: var(--text-secondary); max-width:480px; line-height:1.75; }
.hero-ctas { display:flex; flex-wrap:wrap; gap:14px; }

/* ── CTAs ── */
.pf-btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 36px; background: var(--accent-yellow); color: var(--text-on-accent);
  border-radius: var(--radius-full); font-weight:800; font-size:16px;
  font-family: var(--font-body); transition:var(--transition-bounce);
  box-shadow:0 8px 32px rgba(184,166,0,0.40); white-space:nowrap;
  -webkit-text-fill-color: var(--text-on-accent);
}
.pf-btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 48px rgba(184,166,0,0.55); background: var(--accent-yellow3); }
.pf-btn-secondary {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 36px; background: var(--bg-card); color: var(--text-primary);
  border:1px solid var(--border); border-radius: var(--radius-full);
  font-weight:600; font-size:16px; font-family: var(--font-body);
  backdrop-filter:blur(10px); transition:var(--transition-bounce); white-space:nowrap;
}
.pf-btn-secondary:hover { border-color: var(--accent-yellow); color: var(--accent-yellow); transform:translateY(-3px); }

/* ── Stats ── */
.hero-stats  { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.stat-item   { display:flex; flex-direction:column; gap:2px; }
.stat-value  { font-family: var(--font-display); font-size:22px; font-weight:800; color: var(--text-primary); display:flex; align-items:center; }
.stat-label  { font-size:12px; color: var(--text-muted); font-weight:500; }
.stat-divider { width:1px; height:36px; background: var(--border); flex-shrink:0; }

/* ── Phone Mockup ── */
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; padding:60px 40px; }
.pf-phone-wrap { animation:phoneFloat 4s ease-in-out infinite; position:relative; z-index:3; }
@keyframes phoneFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
.pf-phone {
  width:280px; height:560px; background: var(--bg-secondary);
  border-radius:40px; border:2px solid var(--border-glow);
  box-shadow: var(--shadow-phone), var(--shadow-inset);
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center;
}
.phone-notch-bar {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px 6px; flex-shrink:0;
}
.phone-notch        { width:80px; height:6px; background: var(--phone-notch-bg); border-radius:3px; }
.phone-status-icons { display:flex; gap:6px; font-size:9px; color: var(--text-muted); }
.phone-header       { width:100%; display:flex; align-items:center; justify-content:space-between; padding:4px 18px 8px; flex-shrink:0; }
.phone-header-text  { font-family: var(--font-display); font-size:13px; font-weight:700; color: var(--text-primary); }
.phone-menu-dots    { font-size:12px; color: var(--text-muted); }
.phone-album-art    { position:relative; margin:8px auto 12px; width:130px; height:130px; flex-shrink:0; }
.album-circle {
  width:130px; height:130px; border-radius:50%;
  background: var(--grad-album);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; animation:albumPulse 3s ease-in-out infinite;
}
@keyframes albumPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(184,166,0,0.50); }
  50%      { box-shadow:0 0 0 18px rgba(184,166,0,0); }
}
.album-icon   { font-size:40px; color: var(--text-on-accent); }
.album-glow   {
  position:absolute; inset:-12px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,166,0,0.30), transparent 70%);
  z-index:1; animation:albumPulse 3s ease-in-out infinite;
}
.phone-song-info   { text-align:center; padding:0 16px; flex-shrink:0; }
.song-title        { font-family: var(--font-display); font-size:14px; font-weight:700; color: var(--text-primary); }
.song-artist       { font-size:11px; color: var(--text-muted); margin-top:2px; }
.phone-equalizer   { display:flex; align-items:flex-end; gap:3px; height:32px; margin:10px 0 4px; flex-shrink:0; }
.eq-bar {
  width:4px; border-radius:2px; background: var(--grad-primary);
  animation:eq 0.8s ease-in-out infinite;
}
.eq-bar:nth-child(1){--h:32px;animation-delay:0s;height:14px;}
.eq-bar:nth-child(2){--h:48px;animation-delay:0.1s;height:22px;}
.eq-bar:nth-child(3){--h:40px;animation-delay:0.2s;height:18px;}
.eq-bar:nth-child(4){--h:56px;animation-delay:0.15s;height:28px;}
.eq-bar:nth-child(5){--h:36px;animation-delay:0.05s;height:16px;}
@keyframes eq { 0%,100%{height:8px;} 50%{height:var(--h);} }
.phone-progress-wrap { width:calc(100% - 32px); margin:6px 0; flex-shrink:0; }
.phone-progress-bar  {
  width:100%; height:3px; background: var(--phone-progress-track);
  border-radius:2px; position:relative; overflow:visible;
}
.phone-progress-fill  { height:100%; background: var(--grad-primary); border-radius:2px; position:relative; }
.phone-progress-thumb {
  position:absolute; top:50%; right:-1px; transform:translate(50%,-50%);
  width:8px; height:8px; background: var(--accent-yellow); border-radius:50%;
  box-shadow:0 0 6px rgba(184,166,0,0.80);
}
.phone-time-row   { display:flex; justify-content:space-between; font-size:9px; color: var(--text-muted); margin-top:5px; }
.phone-controls   { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:4px 10px 0; flex-shrink:0; }
.ctrl-btn         { display:flex; align-items:center; justify-content:center; color: var(--text-secondary); border-radius:50%; transition:var(--transition); }
.ctrl-btn:hover   { color: var(--text-primary); }
.ctrl-sm  { width:28px; height:28px; font-size:12px; }
.ctrl-md  { width:34px; height:34px; font-size:16px; }
.ctrl-play {
  width:46px; height:46px; background: var(--grad-primary);
  color: var(--text-on-accent); font-size:18px; box-shadow:0 4px 20px rgba(184,166,0,0.50);
}
.ctrl-play:hover { transform:scale(1.08); }
.phone-bottom-nav {
  width:100%; display:flex; justify-content:space-around;
  padding:10px 8px 14px; margin-top:auto; border-top:1px solid var(--border); flex-shrink:0;
}
.phone-nav-btn        { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color: var(--text-muted); transition:var(--transition); flex:1; }
.phone-nav-btn.active { color: var(--accent-yellow); }
.phone-nav-btn i      { font-size:14px; }
.phone-nav-btn span   { font-size:8px; }

/* ── Floating Cards ── */
.float-card {
  position:absolute; display:flex; align-items:center; gap:8px;
  padding:10px 16px; background: var(--bg-glass); border:1px solid var(--border);
  backdrop-filter:blur(12px); border-radius: var(--radius-md);
  font-size:12px; font-weight:600; color: var(--text-primary); white-space:nowrap;
  z-index:4; box-shadow: var(--shadow-float); animation:floatCard 4s ease-in-out infinite;
}
.float-card i { font-size:16px; }
.float-card-1 { top:30px;   left:-10px;  animation-delay:0s;   }
.float-card-2 { top:30px;   right:-10px; animation-delay:0.8s; }
.float-card-3 { bottom:80px;left:-20px;  animation-delay:1.6s; }
.float-card-4 { bottom:80px;right:-20px; animation-delay:2.4s; }
.float-card-1 i,.float-card-2 i,.float-card-3 i,.float-card-4 i { color: var(--accent-yellow); }
@keyframes floatCard { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

/* ══════════════════════════════════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════════════════════════════════ */
.section-container { max-width:1280px; margin:0 auto; padding:0 32px; width:100%; }
.section-header    { text-align:center; margin-bottom:64px; }
.section-eyebrow {
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color: var(--text-on-accent); background: var(--accent-yellow);
  padding:5px 14px; border-radius: var(--radius-full); margin-bottom:16px;
}
.section-eyebrow--light {
  background: var(--bg-icon); color: var(--accent-yellow); border:1px solid var(--border-icon);
}
.section-title {
  font-family: var(--font-display); font-size:clamp(32px,4.5vw,56px);
  font-weight:900; line-height:1.1; letter-spacing:-1.5px; color: var(--text-primary); margin-bottom:16px;
}
.section-sub { font-size:17px; color: var(--text-secondary); max-width:520px; margin:0 auto; }

/* ══════════════════════════════════════════════════════════════════
   MEDIA ECOSYSTEM / FEATURES
══════════════════════════════════════════════════════════════════ */
.section-features { padding:100px 0; background: var(--bg-secondary); position:relative; }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.pf-media-card {
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:32px; display:flex; flex-direction:column; gap:16px;
  position:relative; overflow:hidden; transition:var(--transition); cursor:default;
}
.pf-media-card::before {
  content:''; position:absolute; inset:0; border-radius: var(--radius-lg);
  background:linear-gradient(135deg, rgba(184,166,0,0.05), transparent);
  opacity:0; transition:var(--transition);
}
.pf-media-card:hover              { transform:translateY(-8px); border-color: var(--border-glow); box-shadow: var(--shadow-glow); }
.pf-media-card:hover::before      { opacity:1; }
.card-icon-wrap {
  width:60px; height:60px; border-radius: var(--radius-md);
  background: var(--bg-icon); border:1px solid var(--border-icon);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color: var(--accent-yellow); transition:var(--transition-bounce); flex-shrink:0;
}
.pf-media-card:hover .card-icon-wrap { transform:rotate(-8deg) scale(1.1); }
.card-title       { font-family: var(--font-display); font-size:20px; font-weight:800; color: var(--text-primary); }
.card-features    { display:flex; flex-direction:column; gap:9px; flex:1; }
.card-features li { display:flex; align-items:center; gap:9px; font-size:13.5px; color: var(--text-secondary); }
.card-features li i { color: var(--accent-yellow); font-size:11px; flex-shrink:0; }
.card-learn-more  { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color: var(--accent-yellow); margin-top:4px; transition:var(--transition); }
.card-learn-more:hover { gap:10px; }
.pf-media-card--ai { background:linear-gradient(135deg, rgba(57,217,138,0.05), rgba(6,182,212,0.03)); border-color:rgba(57,217,138,0.12); }

/* ══════════════════════════════════════════════════════════════════
   WHY PLAYFUSION
══════════════════════════════════════════════════════════════════ */
.section-why { padding:100px 0; background: var(--bg-primary); position:relative; }
.why-row      { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-bottom:80px; }
.why-row:last-child      { margin-bottom:0; }
.why-row--visual-left    { direction:rtl; }
.why-row--visual-left>*  { direction:ltr; }
.why-content { display:flex; flex-direction:column; gap:20px; }
.why-icon-wrap {
  width:56px; height:56px; border-radius: var(--radius-md);
  background: var(--bg-icon); border:1px solid var(--border-icon);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color: var(--wi-color, var(--accent-yellow));
}
.why-title { font-family: var(--font-display); font-size:clamp(24px,3vw,36px); font-weight:800; letter-spacing:-0.8px; color: var(--text-primary); }
.why-desc  { font-size:16px; color: var(--text-secondary); line-height:1.75; }
.why-chips { display:flex; flex-wrap:wrap; gap:10px; }
.why-chip  {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; background: var(--bg-icon); border:1px solid var(--border-icon);
  border-radius: var(--radius-full); font-size:12px; font-weight:600; color: var(--accent-yellow);
}
.why-visual      { display:flex; align-items:center; justify-content:center; }
.why-visual-card {
  background: var(--bg-secondary); border:1px solid var(--border); border-radius: var(--radius-xl);
  padding:40px; width:100%; max-width:400px; min-height:220px;
  display:flex; align-items:center; justify-content:center;
}
.unified-ui { width:100%; display:flex; flex-direction:column; gap:12px; }
.uni-row    { display:flex; align-items:center; gap:12px; }
.uni-row i  { width:18px; text-align:center; color: var(--accent-yellow); font-size:14px; }
.uni-bar    { height:6px; background: var(--grad-primary); border-radius:3px; opacity:0.7; }

/* Big Equalizer */
.big-equalizer { display:flex; align-items:flex-end; gap:6px; height:100px; }
.big-eq-bar { flex:1; border-radius:4px; background: var(--grad-primary); animation:bigEq 0.9s ease-in-out infinite; }
.big-eq-bar:nth-child(1){--bh:60px;animation-delay:0s;}
.big-eq-bar:nth-child(2){--bh:90px;animation-delay:0.08s;}
.big-eq-bar:nth-child(3){--bh:70px;animation-delay:0.16s;}
.big-eq-bar:nth-child(4){--bh:100px;animation-delay:0.06s;}
.big-eq-bar:nth-child(5){--bh:50px;animation-delay:0.20s;}
.big-eq-bar:nth-child(6){--bh:80px;animation-delay:0.12s;}
.big-eq-bar:nth-child(7){--bh:65px;animation-delay:0.04s;}
.big-eq-bar:nth-child(8){--bh:95px;animation-delay:0.18s;}
.big-eq-bar:nth-child(9){--bh:55px;animation-delay:0.10s;}
.big-eq-bar:nth-child(10){--bh:85px;animation-delay:0.14s;}
@keyframes bigEq { 0%,100%{height:12px;} 50%{height:var(--bh);} }

/* AI Visual */
.ai-visual-grid { position:relative; width:160px; height:160px; display:flex; align-items:center; justify-content:center; }
.ai-vis-node    { width:60px; height:60px; background: var(--grad-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; color: var(--text-on-accent); z-index:2; box-shadow:0 0 30px rgba(184,166,0,0.45); position:relative; }
.ai-vis-orbit   { position:absolute; inset:0; animation:orbitSpin 8s linear infinite; }
@keyframes orbitSpin { to{transform:rotate(360deg);} }
.ai-orb {
  position:absolute; width:36px; height:36px; background: var(--bg-card);
  border:1px solid var(--border-glow); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px; color: var(--accent-yellow);
}
.ai-orb:nth-child(1){top:0;left:50%;transform:translateX(-50%);}
.ai-orb:nth-child(2){right:0;top:50%;transform:translateY(-50%);}
.ai-orb:nth-child(3){bottom:0;left:50%;transform:translateX(-50%);}
.ai-orb:nth-child(4){left:0;top:50%;transform:translateY(-50%);}

/* Radio waves */
.radio-waves { position:relative; width:160px; height:160px; display:flex; align-items:center; justify-content:center; }
.wave-center { width:56px; height:56px; background: var(--grad-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color: var(--text-on-accent); position:relative; z-index:2; }
.wave-ring   { position:absolute; border-radius:50%; border:2px solid rgba(184,166,0,0.40); animation:radioWave 2.4s ease-out infinite; }
.wave-ring-1 { width:80px;  height:80px;  animation-delay:0s;   }
.wave-ring-2 { width:120px; height:120px; animation-delay:0.7s; }
.wave-ring-3 { width:160px; height:160px; animation-delay:1.4s; }
@keyframes radioWave { 0%{transform:scale(0.6);opacity:0.8;} 100%{transform:scale(1);opacity:0;} }

/* ══════════════════════════════════════════════════════════════════
   NOW PLAYING SHOWCASE
══════════════════════════════════════════════════════════════════ */
.section-nowplaying { padding:100px 0; background: var(--bg-secondary); position:relative; overflow:hidden; }
.section-nowplaying::before {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,166,0,0.10), transparent 70%); pointer-events:none;
}
.nowplaying-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.np-player       { display:flex; flex-direction:column; align-items:center; gap:20px; }
.np-album-wrap   { position:relative; width:260px; height:260px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.np-album        { width:240px; height:240px; border-radius:50%; background: var(--grad-album); display:flex; align-items:center; justify-content:center; animation:albumPulse 3s ease-in-out infinite; position:relative; z-index:2; }
.np-album-icon   { font-size:80px; color: var(--text-on-accent); }
.np-album-glow   { position:absolute; inset:-20px; border-radius:50%; background:radial-gradient(circle, rgba(184,166,0,0.25), transparent 70%); animation:albumPulse 3s ease-in-out infinite; }
.np-meta         { text-align:center; }
.np-song         { font-family: var(--font-display); font-size:24px; font-weight:800; color: var(--text-primary); }
.np-artist       { font-size:14px; color: var(--text-muted); margin-top:4px; }
.np-progress-wrap { width:100%; max-width:340px; }
.np-progress-bar  { width:100%; height:4px; background: var(--phone-progress-track); border-radius:2px; position:relative; }
.np-progress-fill { height:100%; background: var(--grad-primary); border-radius:2px; }
.np-progress-thumb { position:absolute; top:50%; right:-1px; transform:translate(50%,-50%); width:12px; height:12px; background: var(--accent-yellow); border-radius:50%; box-shadow:0 0 8px rgba(184,166,0,0.80); }
.np-time-row   { display:flex; justify-content:space-between; font-size:11px; color: var(--text-muted); margin-top:7px; }
.np-controls   { display:flex; align-items:center; gap:14px; }
.np-ctrl       { display:flex; align-items:center; justify-content:center; border-radius:50%; color: var(--text-secondary); transition:var(--transition); }
.np-ctrl:hover { color: var(--text-primary); }
.np-ctrl-sm    { width:36px; height:36px; font-size:14px; }
.np-ctrl-md    { width:44px; height:44px; font-size:20px; }
.np-ctrl-play  { width:60px; height:60px; background: var(--grad-primary); color: var(--text-on-accent); font-size:22px; box-shadow:0 8px 30px rgba(184,166,0,0.45); }
.np-ctrl-play:hover { transform:scale(1.08); }
.np-visualizer { display:flex; align-items:flex-end; gap:3px; height:50px; width:100%; max-width:340px; justify-content:center; }
.vis-bar { flex:1; max-width:10px; border-radius:2px; background: var(--grad-primary); opacity:0.6; animation:visBar 0.8s ease-in-out infinite; }
.vis-bar:nth-child(odd){animation-duration:0.7s;} .vis-bar:nth-child(3n){animation-duration:0.9s;}
@keyframes visBar { 0%,100%{height:6px;} 50%{height:calc(10px + var(--vb,30px));} }
.vis-bar:nth-child(1){--vb:20px;animation-delay:0s;} .vis-bar:nth-child(2){--vb:38px;animation-delay:0.05s;}
.vis-bar:nth-child(3){--vb:28px;animation-delay:0.10s;} .vis-bar:nth-child(4){--vb:44px;animation-delay:0.15s;}
.vis-bar:nth-child(5){--vb:22px;animation-delay:0.20s;} .vis-bar:nth-child(6){--vb:36px;animation-delay:0.08s;}
.vis-bar:nth-child(7){--vb:18px;animation-delay:0.12s;} .vis-bar:nth-child(8){--vb:42px;animation-delay:0.18s;}
.vis-bar:nth-child(9){--vb:30px;animation-delay:0.03s;} .vis-bar:nth-child(10){--vb:48px;animation-delay:0.22s;}
.vis-bar:nth-child(11){--vb:24px;animation-delay:0.07s;} .vis-bar:nth-child(12){--vb:40px;animation-delay:0.14s;}
.vis-bar:nth-child(13){--vb:20px;animation-delay:0.19s;} .vis-bar:nth-child(14){--vb:34px;animation-delay:0.02s;}
.vis-bar:nth-child(15){--vb:26px;animation-delay:0.16s;} .vis-bar:nth-child(16){--vb:46px;animation-delay:0.11s;}
.vis-bar:nth-child(17){--vb:32px;animation-delay:0.06s;} .vis-bar:nth-child(18){--vb:38px;animation-delay:0.17s;}
.vis-bar:nth-child(19){--vb:22px;animation-delay:0.13s;} .vis-bar:nth-child(20){--vb:44px;animation-delay:0.09s;}
.np-info  { display:flex; flex-direction:column; gap:24px; }
.np-desc  { font-size:17px; color: var(--text-secondary); line-height:1.75; }
.np-pills { display:flex; flex-wrap:wrap; gap:10px; }
.np-pill  {
  display:inline-flex; align-items:center; gap:7px; padding:10px 18px;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-full);
  font-size:13px; font-weight:600; color: var(--text-secondary); transition:var(--transition);
}
.np-pill:hover { border-color: var(--accent-yellow); color: var(--accent-yellow); }
.np-pill i     { color: var(--accent-yellow); }

/* ══════════════════════════════════════════════════════════════════
   AI EXPERIENCE
══════════════════════════════════════════════════════════════════ */
.section-ai { padding:100px 0; background: var(--bg-primary); position:relative; overflow:hidden; }
.ai-particles-canvas { position:absolute; inset:0; z-index:0; }
.section-ai .section-container { position:relative; z-index:1; }
.ai-chat-wrap  { display:flex; justify-content:center; margin-bottom:64px; }
.ai-chat-card  {
  background: var(--bg-secondary); border:1px solid var(--border); border-radius: var(--radius-xl);
  padding:32px; width:100%; max-width:560px;
  box-shadow: var(--shadow-chat), var(--shadow-glow);
}
.ai-chat-header {
  display:flex; align-items:center; gap:14px; margin-bottom:28px;
  padding-bottom:20px; border-bottom:1px solid var(--border);
}
.ai-avatar { width:44px; height:44px; border-radius:50%; background: var(--grad-primary); display:flex; align-items:center; justify-content:center; font-size:20px; color: var(--text-on-accent); flex-shrink:0; }
.ai-chat-name   { font-family: var(--font-display); font-size:15px; font-weight:700; color: var(--text-primary); }
.ai-chat-status { display:flex; align-items:center; gap:5px; font-size:12px; color: var(--accent-yellow); }
.ai-dot         { width:7px; height:7px; border-radius:50%; background: var(--accent-yellow); animation:aiDotPulse 2s ease-in-out infinite; }
@keyframes aiDotPulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.ai-messages    { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.ai-bubble {
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  background: var(--bg-icon); border:1px solid var(--border-icon);
  border-radius: var(--radius-md); font-size:14px; font-weight:500; color: var(--text-primary);
  opacity:0; transform:translateY(12px); transition:opacity 0.5s ease, transform 0.5s ease;
}
.ai-bubble.visible { opacity:1; transform:translateY(0); }
.ai-bubble i    { font-size:18px; color: var(--accent-yellow); flex-shrink:0; width:22px; text-align:center; }
.ai-input-row   { display:flex; gap:10px; align-items:center; }
.ai-input-fake  {
  flex:1; padding:12px 16px; background: var(--bg-card); border:1px solid var(--border);
  border-radius: var(--radius-full); font-size:14px; color: var(--text-muted);
}
.ai-send-btn {
  width:42px; height:42px; border-radius:50%; background: var(--grad-primary);
  color: var(--text-on-accent); display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0; transition:var(--transition-bounce);
}
.ai-send-btn:hover { transform:scale(1.1); }
.ai-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ai-feature-card {
  background: var(--bg-secondary); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:32px 28px; text-align:center; transition:var(--transition);
}
.ai-feature-card:hover { border-color: var(--border-glow); transform:translateY(-6px); box-shadow: var(--shadow-glow); }
.ai-feat-icon {
  width:56px; height:56px; border-radius: var(--radius-md);
  background: var(--bg-icon); border:1px solid var(--border-icon);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  color: var(--accent-yellow); margin:0 auto 16px;
}
.ai-feature-card h4 { font-family: var(--font-display); font-size:17px; font-weight:700; color: var(--text-primary); margin-bottom:10px; }
.ai-feature-card p  { font-size:14px; color: var(--text-secondary); line-height:1.65; }

/* ══════════════════════════════════════════════════════════════════
   PERSONALIZATION
══════════════════════════════════════════════════════════════════ */
.section-personal { padding:100px 0; background: var(--bg-secondary); }
.personal-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.personal-card {
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:16px; transition:var(--transition);
}
.personal-card:hover { border-color: var(--border-glow); box-shadow: var(--shadow-glow); }
.personal-card-icon {
  width:44px; height:44px; border-radius: var(--radius-md); background: var(--bg-icon);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; color: var(--pi-color, var(--accent-yellow));
}
.personal-card h4     { font-family: var(--font-display); font-size:16px; font-weight:700; color: var(--text-primary); }
.personal-card-sub    { font-size:12px; color: var(--text-muted); }

/* Mini Track List */
.mini-track-list { display:flex; flex-direction:column; gap:8px; }
.mini-track      { display:flex; align-items:center; gap:10px; font-size:12.5px; color: var(--text-secondary); }
.mini-track-art  { width:24px; height:24px; border-radius:6px; background: var(--tc, var(--accent-yellow)); opacity:0.7; flex-shrink:0; }

/* Favourites */
.fav-icons-row { display:flex; flex-direction:column; gap:8px; }
.fav-item      { display:flex; align-items:center; gap:8px; font-size:13px; color: var(--text-secondary); }

/* Smart Playlists */
.smart-playlist-list { display:flex; flex-direction:column; gap:8px; }
.sp-item { display:flex; justify-content:space-between; align-items:center; font-size:13px; color: var(--text-secondary); }
.ai-chip {
  font-size:9px; font-weight:700; letter-spacing:0.5px; padding:2px 7px;
  background: var(--bg-icon); color: var(--accent-yellow);
  border-radius: var(--radius-full); border:1px solid var(--border-icon);
}

/* History Timeline */
.history-timeline { display:flex; flex-direction:column; gap:10px; }
.ht-item  { display:flex; gap:10px; align-items:baseline; }
.ht-time  { font-size:10px; color: var(--text-muted); min-width:40px; flex-shrink:0; }
.ht-label { font-size:12.5px; color: var(--text-secondary); }

/* Continue Listening */
.continue-list { display:flex; flex-direction:column; gap:12px; }
.cl-item  { display:flex; align-items:center; gap:10px; }
.cl-label { font-size:12px; color: var(--text-secondary); min-width:90px; flex-shrink:0; }
.cl-progress { flex:1; height:4px; background: var(--phone-bar-track); border-radius:2px; }
.cl-fill     { height:100%; background: var(--grad-primary); border-radius:2px; }
.cl-pct      { font-size:10px; color: var(--text-muted); flex-shrink:0; }

/* Preferences Toggles */
.pref-toggles    { display:flex; flex-direction:column; gap:12px; }
.pref-toggle-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; color: var(--text-secondary); }
.toggle-pill {
  width:36px; height:20px; border-radius:10px; background: var(--bg-toggle-off);
  border:1px solid var(--border); position:relative; cursor:pointer; transition:var(--transition);
}
.toggle-pill::after {
  content:''; position:absolute; top:3px; left:3px; width:12px; height:12px;
  border-radius:50%; background: var(--text-muted); transition:var(--transition);
}
.toggle-pill.toggle-on              { background: var(--bg-icon); border-color: var(--accent-yellow); }
.toggle-pill.toggle-on::after       { left:calc(100% - 15px); background: var(--accent-yellow); }

/* ══════════════════════════════════════════════════════════════════
   PERFORMANCE
══════════════════════════════════════════════════════════════════ */
.section-perf   { padding:100px 0; background: var(--bg-primary); }
.perf-metrics   { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:64px; }
.perf-metric    {
  background: var(--bg-secondary); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:32px 24px; text-align:center; transition:var(--transition);
}
.perf-metric:hover { border-color: var(--border-glow); box-shadow: var(--shadow-glow); }
.metric-value   { display:block; font-family: var(--font-display); font-size:40px; font-weight:900; letter-spacing:-1px; margin-bottom:8px; }
.metric-label   { font-size:14px; color: var(--text-secondary); font-weight:500; }
.perf-feature-rows { display:flex; flex-direction:column; gap:0; }
.perf-row       { display:flex; align-items:flex-start; gap:24px; padding:28px 0; border-bottom:1px solid var(--border); }
.perf-row:last-child { border-bottom:none; }
.perf-row-icon  {
  width:48px; height:48px; border-radius: var(--radius-md); background: var(--bg-icon);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  color: var(--pri, var(--accent-yellow)); flex-shrink:0;
}
.perf-row-text h4 { font-family: var(--font-display); font-size:17px; font-weight:700; color: var(--text-primary); margin-bottom:6px; }
.perf-row-text p  { font-size:14px; color: var(--text-secondary); line-height:1.65; }

/* ══════════════════════════════════════════════════════════════════
   DEVICE SHOWCASE
══════════════════════════════════════════════════════════════════ */
.section-devices { padding:100px 0; background: var(--bg-secondary); overflow:hidden; }
.devices-row     { display:flex; align-items:flex-end; justify-content:center; gap:40px; flex-wrap:wrap; }
.device-wrap     { display:flex; flex-direction:column; align-items:center; gap:16px; }
.device-label    { font-size:13px; font-weight:600; color: var(--text-muted); letter-spacing:1px; text-transform:uppercase; }
.device-mockup   {
  background: var(--bg-primary); border-radius: var(--radius-xl);
  border:2px solid var(--border-glow); box-shadow: var(--shadow-device); overflow:hidden;
}
.device-phone   { width:200px; height:400px; border-radius:30px; }
.device-tablet  { width:360px; height:240px; border-radius:20px; }
.device-large   { width:480px; height:300px; border-radius:16px; }
.device-screen  { width:100%; height:100%; background: var(--bg-secondary); display:flex; flex-direction:column; padding:16px; gap:12px; }
.dmini-header   { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color: var(--accent-yellow); font-family: var(--font-display); }
.dmini-art      { width:80px; height:80px; border-radius:16px; background: var(--grad-album); margin:0 auto; animation:albumPulse 3s ease-in-out infinite; }
.dmini-title    { text-align:center; font-size:11px; font-weight:600; color: var(--text-primary); }
.dmini-bar      { height:3px; background: var(--phone-bar-track); border-radius:2px; overflow:hidden; }
.dmini-bar-fill { height:100%; background: var(--grad-primary); border-radius:2px; }
.dmini-controls { display:flex; justify-content:center; gap:16px; font-size:13px; color: var(--text-secondary); }
.dmini-play     { color: var(--accent-yellow); }
.dmini-nav      { display:flex; justify-content:space-around; font-size:13px; color: var(--text-muted); border-top:1px solid var(--border); padding-top:8px; margin-top:auto; }

/* Tablet device */
.device-screen--tablet { flex-direction:row; padding:12px; gap:12px; }
.dtab-sidebar {
  width:44px; background: var(--bg-sidebar); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:14px 0; font-size:14px; color: var(--text-muted);
}
.dtab-sidebar i:first-child { color: var(--accent-yellow); }
.dtab-content  { flex:1; display:flex; gap:12px; align-items:center; }
.dtab-art      { width:70px; height:70px; border-radius:14px; background: var(--grad-album); flex-shrink:0; }
.dtab-info     { flex:1; display:flex; flex-direction:column; gap:6px; }
.dtab-song     { font-size:12px; font-weight:700; color: var(--text-primary); }
.dtab-artist   { font-size:10px; color: var(--text-muted); }
.dtab-bar      { height:3px; background: var(--phone-bar-track); border-radius:2px; }
.dtab-bar-fill { height:100%; background: var(--grad-primary); border-radius:2px; }
.dtab-controls { display:flex; gap:12px; font-size:12px; color: var(--text-secondary); align-items:center; }
.dtab-play     { color: var(--accent-yellow); font-size:16px; }

/* Large screen device */
.device-screen--large { flex-direction:column; padding:0; gap:0; }
.dlg-nav        { background: var(--bg-primary); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.dlg-logo       { font-family: var(--font-display); font-size:13px; font-weight:800; color: var(--accent-yellow); }
.dlg-nav-items  { display:flex; gap:14px; font-size:10px; color: var(--text-muted); }
.dlg-body       { flex:1; display:flex; overflow:hidden; }
.dlg-sidebar    { width:130px; background: var(--bg-sidebar); border-right:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.dlg-sb-art     { width:80px; height:80px; border-radius:12px; background: var(--grad-album); }
.dlg-sb-title   { font-size:10px; font-weight:700; color: var(--text-primary); text-align:center; }
.dlg-sb-artist  { font-size:9px; color: var(--text-muted); text-align:center; }
.dlg-main       { flex:1; padding:12px; }
.dlg-track-list { display:flex; flex-direction:column; gap:4px; }
.dlg-track      { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; font-size:11px; color: var(--text-secondary); transition:var(--transition); }
.dlg-track i    { font-size:10px; color: var(--text-muted); }
.dlg-track-active { background: var(--bg-icon); color: var(--accent-yellow); }
.dlg-track-active i { color: var(--accent-yellow); }

/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════════════ */
.section-reviews { padding:100px 0; background: var(--bg-primary); }
.testi-grid      { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pf-testi-card {
  background: var(--bg-secondary); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:32px; display:flex; flex-direction:column; gap:16px; transition:var(--transition);
  position:relative; overflow:hidden;
}
.pf-testi-card::before {
  content:'"'; position:absolute; top:16px; right:24px; font-size:80px;
  font-family: var(--font-display); color: var(--bg-icon); line-height:1; pointer-events:none;
}
.pf-testi-card:hover { border-color: var(--border-glow); box-shadow: var(--shadow-glow); transform:translateY(-4px); }
.testi-top    { display:flex; align-items:center; gap:14px; }
.testi-avatar {
  width:48px; height:48px; border-radius:50%; background: var(--av-color, var(--accent-yellow));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:16px; font-weight:800;
  color: var(--text-on-accent); flex-shrink:0;
}
.testi-name  { font-family: var(--font-display); font-size:15px; font-weight:700; color: var(--text-primary); }
.testi-sub   { font-size:12px; color: var(--text-muted); }
.testi-stars { color: var(--accent-yellow); font-size:13px; display:flex; gap:3px; }
.testi-text  { font-size:15px; color: var(--text-secondary); line-height:1.7; font-style:italic; }

/* ══════════════════════════════════════════════════════════════════
   DOWNLOAD CTA — adapts fully to both themes
══════════════════════════════════════════════════════════════════ */
.section-download {
  padding:120px 0; background: var(--grad-download);
  position:relative; overflow:hidden; text-align:center;
}
.section-download::before {
  content:''; position:absolute; inset:0;
  background: var(--grad-download-overlay); pointer-events:none;
}
.download-bg-overlay {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:800px; height:800px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,166,0,0.16), rgba(184,166,0,0.08) 40%, transparent 70%);
  pointer-events:none;
}
.section-download .section-container { position:relative; z-index:1; }
.download-content { display:flex; flex-direction:column; align-items:center; gap:24px; }
.download-title   {
  font-family: var(--font-display); font-size:clamp(40px,6vw,80px);
  font-weight:900; letter-spacing:-2px; line-height:1.05; color: var(--text-download);
}
.download-sub  { font-size:18px; color: var(--text-download-sub); max-width:500px; line-height:1.7; }
.download-ctas { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.download-btn-primary {
  display:inline-flex; align-items:center; gap:14px; padding:18px 40px;
  background: var(--accent-yellow); color: var(--text-on-accent);
  border-radius: var(--radius-full); font-weight:800; font-size:16px;
  transition:var(--transition-bounce); box-shadow: var(--shadow-download);
}
.download-btn-primary i      { font-size:24px; color: var(--text-on-accent); }
.download-btn-primary span   { display:flex; flex-direction:column; color: var(--text-on-accent); -webkit-text-fill-color: var(--text-on-accent); }
.download-btn-primary small  { font-size:11px; font-weight:400; opacity:0.7; line-height:1; }
.download-btn-primary strong { font-size:18px; line-height:1.2; }
.download-btn-primary:hover  { transform:translateY(-4px); box-shadow:0 20px 60px rgba(184,166,0,0.45); background: var(--accent-yellow3); }
.download-note { font-size:14px; color: var(--text-download-note); display:flex; align-items:center; gap:8px; justify-content:center; }
.download-note i { color: var(--text-download-note); }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════ */
.pf-footer { background: var(--bg-secondary); border-top:1px solid var(--border); padding:80px 0 0; }
.footer-container { max-width:1280px; margin:0 auto; padding:0 32px; }
.footer-grid {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.5fr; gap:48px;
  padding-bottom:64px; border-bottom:1px solid var(--border);
}
.footer-logo      { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-logo-icon {
  width:34px; height:34px; background: var(--accent-yellow); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-on-accent); font-size:15px;
}
.footer-logo-icon img.pf-logo-img { width:20px; height:20px; border-radius:5px; object-fit:cover; display:block; }
.footer-logo span { font-family: var(--font-display); font-size:18px; font-weight:800; color: var(--text-primary); }
.footer-tagline   { font-size:14px; color: var(--text-muted); margin-bottom:20px; line-height:1.6; }
.footer-socials   { display:flex; gap:10px; }
.social-link {
  width:36px; height:36px; border-radius:50%; background: var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  color: var(--text-muted); transition:var(--transition);
}
.social-link:hover { border-color: var(--accent-yellow); color: var(--accent-yellow); transform:translateY(-2px); }
.footer-col-title {
  font-family: var(--font-display); font-size:13px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color: var(--text-primary); margin-bottom:20px;
}
.footer-links   { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:14px; color: var(--text-muted); transition:var(--transition); }
.footer-links a:hover { color: var(--accent-yellow); padding-left:4px; }
.footer-newsletter-sub { font-size:14px; color: var(--text-muted); margin-bottom:16px; line-height:1.6; }
.newsletter-form {
  display:flex; gap:0; border-radius: var(--radius-full); overflow:hidden;
  border:1px solid var(--border); background: var(--bg-card);
}
.newsletter-form:focus-within { border-color: var(--border-glow); }
.newsletter-input {
  flex:1; padding:12px 18px; background:transparent; border:none;
  color: var(--text-primary); font-family: var(--font-body); font-size:14px; outline:none;
}
.newsletter-input::placeholder { color: var(--text-muted); }
.newsletter-btn  { padding:0 18px; background: var(--grad-primary); color: var(--text-on-accent); font-size:14px; transition:var(--transition); flex-shrink:0; }
.newsletter-btn:hover { opacity:0.9; }
.footer-bottom   { display:flex; justify-content:space-between; align-items:center; padding:24px 0; flex-wrap:wrap; gap:12px; }
.footer-copy     { font-size:13px; color: var(--text-muted); }
.footer-heart    { font-size:13px; color: var(--text-muted); display:flex; align-items:center; gap:4px; }

/* ── App logo image helper ── */
.pf-logo-img { border-radius:10px; object-fit:cover; display:block; }

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  html { scroll-behavior:auto; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 1200px
══════════════════════════════════════════════════════════════════ */
@media (max-width:1200px) {
  .hero-container { gap:40px; }
  .hero-title     { font-size:clamp(36px,5vw,60px); }
  .float-card-1   { left:-30px; }
  .float-card-2   { right:-30px; }
  .why-row        { gap:48px; }
  .perf-metrics   { grid-template-columns:repeat(2,1fr); }
  .footer-grid    { grid-template-columns:1fr 1fr; gap:32px; }
  .device-large   { width:380px; height:240px; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .nav-links  { display:none; }
  .hamburger  { display:flex; }
  .hero-container { grid-template-columns:1fr; text-align:center; padding:calc(var(--nav-h) + 40px) 32px 60px; }
  .hero-content   { align-items:center; }
  .hero-sub       { max-width:100%; }
  .hero-ctas      { justify-content:center; }
  .hero-stats     { justify-content:center; }
  .hero-visual    { padding:20px; }
  .float-card-1,.float-card-3 { left:0; }
  .float-card-2,.float-card-4 { right:0; }
  .nowplaying-grid { grid-template-columns:1fr; gap:48px; }
  .np-info         { text-align:center; align-items:center; }
  .testi-grid      { grid-template-columns:1fr 1fr; }
  .why-row         { grid-template-columns:1fr; gap:32px; }
  .why-row--visual-left { direction:ltr; }
  .ai-feature-grid { grid-template-columns:1fr 1fr; }
  .personal-grid   { grid-template-columns:1fr 1fr; }
  .devices-row     { gap:24px; }
  .device-large    { display:none; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 768px
══════════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .section-container    { padding:0 20px; }
  .nav-container        { padding:0 20px; }
  .hero-container       { padding:calc(var(--nav-h) + 30px) 20px 50px; }
  .hero-title           { letter-spacing:-1px; }
  .pf-btn-primary,.pf-btn-secondary { padding:14px 24px; font-size:14px; }
  .hero-stats           { gap:12px; }
  .stat-value           { font-size:18px; }
  .media-grid           { grid-template-columns:1fr 1fr; }
  .testi-grid           { grid-template-columns:1fr; }
  .ai-feature-grid      { grid-template-columns:1fr; }
  .personal-grid        { grid-template-columns:1fr 1fr; }
  .perf-metrics         { grid-template-columns:repeat(2,1fr); }
  .footer-grid          { grid-template-columns:1fr 1fr; gap:28px; }
  .float-card           { display:none; }
  .pf-phone-wrap        { transform:scale(0.88); }
  .section-features, .section-why, .section-nowplaying, .section-ai,
  .section-personal, .section-perf, .section-devices, .section-reviews,
  .section-download     { padding:72px 0; }
  .devices-row          { flex-direction:column; align-items:center; }
  .device-tablet        { width:100%; max-width:380px; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 480px
══════════════════════════════════════════════════════════════════ */
@media (max-width:480px) {
  .hero-ctas { flex-direction:column; width:100%; }
  .pf-btn-primary,.pf-btn-secondary { width:100%; justify-content:center; }
  .media-grid           { grid-template-columns:1fr; }
  .personal-grid        { grid-template-columns:1fr; }
  .perf-metrics         { grid-template-columns:repeat(2,1fr); }
  .footer-grid          { grid-template-columns:1fr; }
  .footer-bottom        { flex-direction:column; text-align:center; }
  .pf-phone             { width:260px; height:520px; }
  .np-album             { width:180px; height:180px; }
  .np-album-icon        { font-size:60px; }
  .section-title        { font-size:30px; letter-spacing:-0.8px; }
  .download-title       { font-size:clamp(32px,8vw,60px); }
  .ai-chat-card         { padding:22px 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — 360px
══════════════════════════════════════════════════════════════════ */
@media (max-width:360px) {
  .pf-phone        { width:240px; height:480px; }
  .nav-logo-text   { font-size:17px; }
  .nav-cta         { padding:8px 14px; font-size:12px; }
  .hero-stats      { flex-direction:column; gap:8px; }
  .stat-divider    { width:60px; height:1px; }
}