:root{
  --primary:#ffcc00;
  --secondary:#ff5f6d;
  --accent:#4facfe;
  --bg:#020617;
  --card:#0f172a;
  --text:#ffffff;
  --muted:#94a3b8;
  --radius:22px;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}

body{
  background:radial-gradient(circle at top,var(--accent),transparent 60%),linear-gradient(180deg,#020617,var(--bg));
  color:var(--text);
}

nav{
  position:fixed;top:0;width:100%;height:80px;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 8%;background:rgba(2,6,23,.75);backdrop-filter:blur(14px)
}
nav span{color:var(--primary)}
nav a{color:#fff;text-decoration:none;margin-left:25px}

header{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:120px 8% 60px
}

.hero h1{font-size:4rem;font-weight:800}
.hero span{color:var(--primary)}
.hero p{color:var(--muted);margin-top:15px}
.hero button{margin-top:45px;padding:18px 60px;border:none;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--secondary));font-weight:700}

section{padding:100px 8%}
h2{text-align:center;font-size:2.6rem;margin-bottom:50px}

.player{max-width:900px;margin:auto;background:var(--card);padding:50px;border-radius:22px;text-align:center}
.play-btn{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--primary));font-size:3rem;display:flex;align-items:center;justify-content:center;margin:auto;cursor:pointer}

.now-playing{margin-top:40px;display:flex;gap:25px;justify-content:center;align-items:center}
.now-playing img{width:90px;height:90px;border-radius:14px}

.about-text{text-align:center;color:var(--muted);max-width:900px;margin:auto}

footer{text-align:center;padding:60px;color:var(--muted)}