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

body{
  font-family:'Inter',sans-serif;
  background:#050505;
  color:white;
  overflow-x:hidden;
}

.noise{
  position:fixed;
  inset:0;
  background-image:url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
  opacity:0.08;
  pointer-events:none;
}

.hero{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:
    radial-gradient(circle at top, rgba(255,0,0,0.25), transparent 40%),
    linear-gradient(to bottom, #0a0a0a, #000000);
}

.overlay{
  position:absolute;
  inset:0;
  backdrop-filter:blur(1px);
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  width:min(900px,90%);
}

.genre{
  color:#ff4d4d;
  letter-spacing:4px;
  font-size:0.85rem;
  margin-bottom:20px;
}

h1{
  font-size:clamp(4rem,10vw,8rem);
  font-weight:800;
  letter-spacing:8px;
  text-shadow:0 0 30px rgba(255,0,0,0.5);
}

.subtitle{
  margin:25px auto;
  max-width:650px;
  color:#cfcfcf;
  line-height:1.7;
  font-size:1.1rem;
}

.buttons{
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:35px;
}

.buttons a{
  text-decoration:none;
  color:white;
  border:1px solid rgba(255,255,255,0.15);
  padding:14px 28px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  transition:0.3s ease;
  backdrop-filter:blur(10px);
}

.buttons a:hover{
  transform:translateY(-3px);
  border-color:#ff2d2d;
  box-shadow:0 0 25px rgba(255,0,0,0.4);
}

.about{
  padding:120px 20px;
  display:flex;
  justify-content:center;
}

.card{
  width:min(850px,100%);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:30px;
  padding:50px;
  backdrop-filter:blur(12px);
}

.card h2{
  margin-bottom:20px;
  font-size:2rem;
}

.card p{
  color:#c6c6c6;
  line-height:1.8;
}

.tracks{
  padding:0 20px 120px;
}

.tracks h2{
  text-align:center;
  margin-bottom:50px;
  font-size:2.2rem;
}

.track-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  width:min(1200px,100%);
  margin:auto;
}

.track-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  padding:20px;
  transition:0.3s ease;
}

.track-card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 35px rgba(255,0,0,0.25);
  border-color:#ff2b2b;
}

.cover{
  height:250px;
  border-radius:18px;
  background:
    radial-gradient(circle at top, rgba(255,0,0,0.45), transparent 40%),
    linear-gradient(135deg,#141414,#050505);
  margin-bottom:20px;
}

.track-card h3{
  margin-bottom:10px;
}

.track-card p{
  color:#b5b5b5;
}

footer{
  padding:40px;
  text-align:center;
  color:#7c7c7c;
  border-top:1px solid rgba(255,255,255,0.05);
}

@media(max-width:768px){
  .card{
    padding:35px;
  }

  h1{
    letter-spacing:4px;
  }
}