body{
  margin:0;
  font-family:Arial;
  background:#0b0b10;
  color:white;
}

/* blur style Apple Music */
.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, #1db95455, transparent 40%),
    radial-gradient(circle at 80% 30%, #7c3aed55, transparent 45%),
    radial-gradient(circle at 50% 80%, #00d4ff33, transparent 45%);
  filter:blur(90px);
  z-index:-1;
}

.hero{
  text-align:center;
  padding:80px 20px 40px;
}

.logo{
  opacity:0.7;
}

.hero h1{
  font-size:3rem;
  margin:10px 0;
}

.section{
  max-width:1000px;
  margin:auto;
  padding:20px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}

.card{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(20px);
  padding:15px;
  border-radius:18px;
}

iframe{
  width:100%;
  height:352px;
  border:none;
  border-radius:12px;
  margin-top:10px;
}

.btn{
  display:inline-block;
  margin-top:10px;
  padding:10px 14px;
  border-radius:999px;
  background:#1db954;
  color:black;
  text-decoration:none;
  font-weight:bold;
}

footer{
  text-align:center;
  padding:40px;
  opacity:0.6;
}