
:root{ --bg:#0b0b10; --fg:#f6f6f7; --muted:#b5b7bd; --brand:#3B82F6; --brand-2:#2dd4bf; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; }
a{ color:var(--brand); text-decoration:none; }
.container{ width:min(1100px, 92%); margin:0 auto; }
.site-header{ position:sticky; top:0; z-index:20; background:rgba(11,11,16,.8); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid #111; }
.site-header .container{ display:flex; align-items:center; gap:20px; padding:12px 0; }
.site-title{ font-weight:700; letter-spacing:.5px; color:var(--fg); }
.main-nav ul{ display:flex; flex-wrap:wrap; gap:18px; list-style:none; padding:0; margin:0; }
.main-nav a{ color:var(--fg); opacity:.9; }
.burger{ display:none; background:transparent; color:var(--fg); font-size:24px; border:0; margin-left:auto; }
.hero{ position:relative; min-height:80vh; }
.video-hero{ position:relative; min-height:70vh; overflow:hidden; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.65) saturate(1.25); }
.hero .overlay{ position:relative; z-index:2; text-align:center; padding:80px 16px; }
.custom-logo,.hero-logo{ width:min(60vw, 640px); height:auto; display:block; margin:0 auto 12px; }
.section{ padding:64px 0; background:var(--bg); }
.section.alt{ background:#11131a; }
.section h2{ font-size: clamp(28px, 4vw, 40px); margin:0 0 24px; }
.latest-album{ display:grid; grid-template-columns: 260px 1fr; gap:24px; align-items:start; }
.latest-album .cover img{ width:100%; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.tracklist{ margin-top:8px; padding-left:18px; }
.events-list{ display:grid; gap:12px; }
.event-item{ display:grid; grid-template-columns: 150px 1fr auto; gap:16px; align-items:center; background:#0e1119; border:1px solid #1a1d27; padding:14px 16px; border-radius:12px; }
.event-title{ margin:0; }
.event-meta{ color:var(--muted); }
.event-date{ font-weight:700; }
.album-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:18px; }
.album-card{ background:#0e1119; border:1px solid #1a1d27; padding:12px; border-radius:12px; }
.album-card img{ width:100%; height:auto; border-radius:8px; display:block; }
.gallery-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; border-radius:8px; }
.video-embed{ position:relative; padding-bottom:56.25%; height:0; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.shop-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:18px; }
.product{ background:#0e1119; border:1px solid #1a1d27; padding:12px; border-radius:12px; text-align:center; }
.product img{ width:100%; border-radius:10px; }
.newsletter{ display:flex; gap:10px; }
.newsletter input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid #2a2f3d; background:#0b0d14; color:var(--fg); }
.newsletter button{ border:0; }
.site-footer{ border-top:1px solid #111; padding:28px 0; text-align:center; color:var(--muted); }
.spotify-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.spotify-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.spotify-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
.spotify-card{ background:#0e1119; border:1px solid #1a1d27; padding:12px; border-radius:12px; }
.spotify-card h3{ margin-top:0; }
@media (max-width: 860px){
  .latest-album{ grid-template-columns: 1fr; }
  .event-item{ grid-template-columns: 1fr; text-align:center; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .main-nav{ display:none; }
  .burger{ display:block; }
}
