*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif;background:#0f0f0f;color:#fff}

nav{position:fixed;top:0;width:100%;display:flex;justify-content:space-between;
padding:1rem 2rem;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);z-index:1000}

nav a{color:#fff;margin:0 1rem;text-decoration:none;transition:.3s}
nav a:hover{color:#f5c16c}

header{height:100vh;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.9)),
url('https://images.unsplash.com/photo-1509042239860-f550ce710b93') center/cover;
display:flex;align-items:center;justify-content:center;text-align:center}

h1{font-size:4rem;color:#f5c16c}

section{padding:5rem 2rem}
.section-title{text-align:center;margin-bottom:2rem}

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

.card{background:#1a1a1a;border-radius:15px;overflow:hidden;
transform:translateY(50px);opacity:0;transition:all .6s ease}

.card.show{transform:translateY(0);opacity:1}

.card:hover{transform:scale(1.05)}

.card img{width:100%;height:200px;object-fit:cover}

.fade-in{opacity:0;transform:translateY(20px);animation:fade 1s forwards}
.delay{animation-delay:.5s}

@keyframes fade{
to{opacity:1;transform:translateY(0)}
}

footer{text-align:center;padding:2rem;background:#000}

audio {
  width: 100%;
  margin-top: 10px;
}