:root{
  --bg:#0d0d10;
  --card:#17171d;
  --text:#f5f5f7;
  --muted:#b8b8c0;
  --line:#2a2a33;
  --accent:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at top, #282833 0%, var(--bg) 48%, #050507 100%);
  color:var(--text);
  line-height:1.55;
}
a {
  color: inherit !important;
  text-decoration: none !important;
}

.legal a {
  text-decoration: underline !important;
  color: #ffffff !important;
  opacity: 0.85;
}
.wrap{width:min(1120px, calc(100% - 32px)); margin:0 auto}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background:rgba(10,10,12,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{font-weight:800; letter-spacing:.04em}
.navlinks{display:flex; gap:16px; align-items:center; font-size:14px; color:var(--muted)}
.navlinks a{text-decoration:none}
.hero{
  min-height:78vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
  padding:72px 0 48px;
}
.kicker{color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:13px}
h1{font-size:clamp(42px, 7vw, 84px); line-height:.95; margin:10px 0 18px}
.lead{font-size:clamp(18px, 2vw, 23px); color:var(--muted); max-width:680px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-weight:700;
}
.btn.primary{background:var(--accent); color:#08080a}
.cover{
  background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  border-radius:30px;
  padding:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.cover img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:22px;
  display:block;
  background:#222;
}
.placeholder{
  width:100%;
  aspect-ratio:1/1;
  border-radius:22px;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--muted);
  background:linear-gradient(135deg,#20202a,#0f0f12);
  border:1px dashed rgba(255,255,255,.22);
  padding:24px;
}
section{padding:58px 0}
h2{font-size:clamp(28px,4vw,44px); margin:0 0 18px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  padding:22px;
}
.card p{color:var(--muted)}
.music-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.platform{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:20px;
  padding:18px;
  text-decoration:none;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.platform span{color:var(--muted); font-size:14px}
.embed{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:#121218;
  overflow:hidden;
}
.embed-placeholder{
  padding:24px;
  min-height:180px;
  display:grid;
  gap:14px;
  align-content:center;
}
.embed-placeholder p{margin:0; color:var(--muted)}
.embed iframe{width:100%; border:0; display:block}
.footer{
  border-top:1px solid rgba(255,255,255,.09);
  color:var(--muted);
  padding:28px 0;
  font-size:14px;
}
.footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer a{color:var(--muted); margin-left:14px}
.legal{
  padding:56px 0 80px;
  max-width:880px;
}
.legal h1{font-size:42px; line-height:1.1}
.legal h2{font-size:26px; margin-top:36px}
.legal p,.legal li{color:var(--muted)}
.notice{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:16px 18px;
  color:var(--muted);
}
@media(max-width:820px){
  .hero{grid-template-columns:1fr; padding-top:44px}
  .grid,.music-grid{grid-template-columns:1fr}
  .navlinks{display:none}
}
.music-grid.upgraded {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.platform-card {
  min-height: 150px;
  padding: 22px;
  border-radius: 24px;
  text-decoration: none;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.platform-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}

.platform-card strong {
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
}

.platform-card span {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.platform-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.16);
  font-weight: 800;
  font-size: 22px;
}

@media(max-width: 900px) {
  .music-grid.upgraded {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 560px) {
  .music-grid.upgraded {
    grid-template-columns: 1fr;
  }
}
.release-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

/* Spotify */
.btn.spotify {
  background: #1DB954;
  color: white;
  border: none;
}

/* Apple */
.btn.apple {
  background: #000000;
  color: white;
  border: none;
}

/* Amazon */
.btn.amazon {
  background: #232F3E;
  color: white;
  border: none;
}

/* YouTube */
.btn.youtube {
  background: #FF0000;
  color: white;
  border: none;
}
.release-upgrade {
  margin: 28px 0 34px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.14);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  align-items: center;
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
}

.release-cover-small img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

.release-content h3 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  margin: 8px 0 12px;
}

.release-content p {
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 680px;
}

.release-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media(max-width: 760px) {
  .release-upgrade {
    grid-template-columns: 1fr;
  }

  .release-cover-small {
    max-width: 260px;
  }
}
.release-upgrade {
  margin-bottom: 60px;
}
#about {
  margin-top: 40px;
}
.hero-title {
  margin-bottom: 18px;
}

.hero-main {
  font-size: 24px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0 0 6px;
  max-width: 640px;
}

.hero-sub {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 560px;
}

.actions {
  margin-top: 30px;
}

.cover {
  transform: rotate(1.2deg);
}

.cover img {
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}