:root{
  --bg:#0b0c10;
  --card:#121318;
  --card2:#161820;
  --text:#e8e8e8;
  --muted:rgba(232,232,232,.72);
  --line:rgba(255,255,255,.08);
  --pill:#1d1f27;
  --btn:#1f2230;
  --gold:#e5c07b;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:system-ui,Segoe UI,Arial,sans-serif; }
a{ color:inherit; text-decoration:none; }

.site-header{
  position:relative;
  height:320px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-bg{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.45) contrast(1.05);
  display:block;
}
.header-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 48px;
  z-index:2;
  pointer-events:none;
}

.track-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  text-transform: uppercase;
}


.track.playing .track-title {
  color: #c9a227;
}

.brand, .top-nav{ pointer-events:auto; }

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.4px;
}
.brand-badge{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22);
}
.brand-name{ opacity:.95; }

.top-nav a{
  margin-left:22px;
  opacity:.9;
}
.top-nav a:hover{ opacity:1; }

.container{
  max-width:1200px;
  margin:-120px auto 80px;
  padding:0 24px;
  position:relative;
  z-index:5;
}

/* HERO */
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  display:grid;
  grid-template-columns:260px 1fr 320px;
  gap:28px;
  align-items:start;
  box-shadow:0 25px 80px rgba(0,0,0,.35);
}

.hero-cover{
  border-radius:14px;
  overflow:hidden;
  background:#0f1116;
  border:1px solid rgba(255,255,255,.06);
}
.hero-cover img{
  width:100%;
  height:auto;
  display:block;
}

.eyebrow{
  font-size:12px;
  letter-spacing:1px;
  opacity:.7;
  margin-bottom:6px;
}

.title{
  margin:0 0 6px 0;
  font-size:34px;
  line-height:1.12;
}

.sub{
  opacity:.82;
  margin-bottom:14px;
}

.pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.pill{
  background:var(--pill);
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.06);
}

.desc{
  margin:0;
  max-width:620px;
  color:var(--muted);
}

/* Right column */
.hero-right .platform-box{
  background:var(--card2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:18px;
}

.platform-box h3{ margin:0 0 12px 0; }

.btn{
  display:block;
  text-align:center;
  padding:12px 14px;
  border-radius:999px;
  background:var(--btn);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
  font-weight:650;
}
.btn:hover{ filter:brightness(1.05); }

.btn.primary{
  background:var(--gold);
  color:#090909;
  border-color:rgba(0,0,0,.12);
}

.btn.disabled{
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}

.notes-wrap{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.notes-title{
  font-weight:750;
  margin-bottom:8px;
  font-size:13px;
  opacity:.9;
}

.notes{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  font-size:13px;
}
.notes li{ margin:6px 0; }

.share-link{
  background:none;
  border:none;
  color:var(--gold);
  font-weight:750;
  cursor:pointer;
  padding:0;
}
.share-link:hover{ text-decoration:underline; }

/* LOWER CONTENT */
.lower{
  margin-top:34px;
}
.lower h2{
  margin:22px 0 10px;
  font-size:18px;
}
.lower p, .lower li{
  color:var(--muted);
  line-height:1.5;
}
.lower ul{ margin-top:10px; }

.muted{ color:var(--muted); }

.preview-actions{
  margin:10px 0 10px;
}

.small-btn{
  background:#1f2230;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:650;
}
.small-btn:hover{ filter:brightness(1.08); }

.rule{
  border:0;
  height:1px;
  background:rgba(255,255,255,.08);
  margin:24px 0 14px;
}

.footer-mini{
  color:var(--muted);
  font-size:13px;
}

/* Responsive */
@media (max-width: 980px){
  .header-overlay{ padding:18px 22px; }
  .hero-card{ grid-template-columns:1fr; }
  .hero-cover{ max-width:320px; }
}

/* DARK TRACKLIST (the style you liked) */
.tracklist{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
}

.track{
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.track:last-child{ border-bottom:none; }

.track-num{
  font-size: 13px;
  opacity: .6;
}

.track-title{
  font-weight: 600;
}

.track button{
  background: #1f2230;
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
.track button:hover{ filter: brightness(1.1); }