:root{
  --bg:#0c0c0f; --fg:#e9e9ef; --muted:#a6a6b0; --accent:#e24d4d;
  --card:#15151a; --line:#24242b; --shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg); background:linear-gradient(180deg,#0a0a0d, #0f0f14 60%, #0b0b0d);
}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 16px}

.site-header{border-bottom:1px solid var(--line); position:sticky; top:0; backdrop-filter:blur(8px); background:rgba(10,10,13,.75); z-index:50}
.header-inner{display:flex; align-items:center; gap:16px; padding:14px 0}
.brand{font-weight:800; letter-spacing:.4px; display:flex; align-items:center; gap:8px}
.brand-mark{color:var(--accent); transform:rotate(15deg)}
.nav{display:flex; gap:14px; flex-wrap:wrap}
.nav a{opacity:.85; padding:8px 10px; border-radius:8px}
.nav a.active, .nav a:hover{background:var(--card); opacity:1}

.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--fg); padding:6px 10px; border-radius:8px}
@media (max-width:800px){
  .nav-toggle{display:block; margin-left:auto}
  .nav{display:none; flex-direction:column; background:var(--card); padding:10px; border:1px solid var(--line); border-radius:12px; position:absolute; right:16px; top:56px; box-shadow:var(--shadow)}
  .nav.open{display:flex}
}

.site-main{padding:28px 0 40px}
.hero{
  display:grid; gap:14px; grid-template-columns:1.1fr .9fr; align-items:center;
  padding:22px; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow)
}
.hero h1{margin:0; font-size:clamp(28px,4.2vw,44px); line-height:1.05}
.hero p{color:var(--muted); margin-top:6px}
.hero .cta{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:#151519; cursor:pointer}
.btn.primary{background:var(--accent); border-color:transparent; color:white; font-weight:600}
.card{
  border:1px solid var(--line); background:var(--card);
  border-radius:16px; padding:16px; box-shadow:var(--shadow)
}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .grid.cols-3{grid-template-columns:1fr} }

.release{display:flex; gap:14px; align-items:center}
.cover{width:72px; height:72px; border-radius:12px; background:#222 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"200\" height=\"200\"><rect fill=\"%231d1d24\" width=\"100%\" height=\"100%\"/><circle cx=\"100\" cy=\"100\" r=\"70\" fill=\"%23292935\"/></svg>') center/cover no-repeat; border:1px solid var(--line)}
.release h3{margin:0}
.release small{color:var(--muted)}

.lyrics{white-space:pre-wrap; line-height:1.6; color:#f2f2f7}
.meta{color:var(--muted); font-size:.95rem; margin-bottom:10px}

.site-footer{border-top:1px solid var(--line); margin-top:24px; padding-top:20px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px}
.brand-sm{font-weight:800}
.tagline{color:var(--muted)}
.footer-nav, .footer-social{display:flex; flex-direction:column; gap:8px}
.newsletter label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px}
.newsletter-row{display:flex; gap:8px}
.newsletter input{flex:1; background:#0e0e12; border:1px solid var(--line); color:var(--fg); border-radius:10px; padding:10px}
.newsletter button{background:var(--accent); color:white; border:none; border-radius:10px; padding:10px 14px; cursor:pointer}
.legal{border-top:1px solid var(--line); margin-top:16px; padding:12px 0; text-align:center; color:var(--muted); font-size:.9rem}

.logo-wordmark{ height:56px; display:block }
@media (max-width:900px){ .logo-wordmark{ height:46px } }