/* === All-Starz_ltd — Glitch Rock // Lo‑Fi theme === */
:root{
  --bg:#0a0a0a; --fg:#e9e9e9; --muted:#9a9a9a; --accent:#ff1e6e; --accent2:#8df3ff;
  --card:#131313; --line:#222; --fontA:'Chivo',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --fontM:'Space Mono', ui-monospace,Menlo,Monaco,Consolas,'Courier New',monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--fontA); line-height:1.5;
  overflow-x:hidden;
}

/* Ambient noise & scanlines */
.noise, .scanlines{position:fixed; inset:0; pointer-events:none; z-index:0}
.noise{
  opacity:.07; background-image:url('assets/noise.png'); background-size:300px 300px; mix-blend-mode:overlay;
}
.scanlines{
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px);
  opacity:.3;
}

.container{width:min(1100px,93vw); margin-inline:auto; position:relative; z-index:1}
.section{padding:72px 0; border-top:1px solid var(--line)}
.section.alt{background:#0f0f0f}

.site-header{
  position:sticky; top:0; z-index:10; background:rgba(10,10,10,.9); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-family:var(--fontM); font-weight:700; letter-spacing:.06em; font-size:1.2rem}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--fg); text-decoration:none; opacity:.88; transition:.2s}
.nav a:hover{opacity:1; text-shadow:0 0 12px var(--accent2)}
.btn{display:inline-block; background:var(--accent); color:white; padding:10px 16px; border-radius:6px; text-decoration:none; font-weight:700}
.btn:hover{filter:brightness(1.08)}
.btn-outline{background:transparent; border:1px solid var(--fg); color:var(--fg)}
.burger{display:none; background:transparent; color:var(--fg); border:0; font-size:22px}

.hero{padding:120px 0 80px; position:relative}
.hero-title{font-size:clamp(32px,6vw,64px); margin:0 0 10px; font-weight:900}
.hero-tag{color:var(--muted); margin:0 0 22px}
.cta-group{display:flex; gap:12px; flex-wrap:wrap}

.section-title{font-size:28px; margin:0 0 6px; font-weight:900}
.section-sub{color:var(--muted); margin:0 0 24px}

.grid{display:grid; gap:20px}
.products{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column}
.card-img{display:block; width:100%; aspect-ratio:16/10; background:#0b0b0b}
.card-body{padding:16px}
.price-row{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
.price{font-family:var(--fontM); font-weight:700}
.muted{color:var(--muted)}
.small{font-size:.92rem}

.flex{display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap}
.col{flex:1 1 320px}
.tracklist{list-style:none; padding:0; margin:10px 0 18px}
.tracklist li{padding:6px 0; border-bottom:1px dashed #2a2a2a}

.album-cover{
  width:100%; aspect-ratio:1/1; border-radius:14px; border:2px solid var(--line);
  background: radial-gradient(120px 100px at 30% 25%, rgba(255,30,110,.25), transparent 60%),
              radial-gradient(120px 100px at 70% 70%, rgba(141,243,255,.25), transparent 60%),
              #0b0b0b;
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.album-cover::after{
  content:''; position:absolute; inset:0; background:linear-gradient(transparent, rgba(255,30,110,.05));
}
.cover-title{font-size:52px; font-weight:900; letter-spacing:.08em}
.cover-sub{position:absolute; bottom:14px; right:16px; font-family:var(--fontM); color:var(--muted)}

/* Services */
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.service{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px}
.tag{display:inline-block; margin-top:8px; padding:4px 8px; border:1px dashed var(--accent2); color:var(--accent2); font-family:var(--fontM); border-radius:999px}

/* Events */
.events{list-style:none; padding:0; margin:10px 0}
.events li{padding:8px 0; border-bottom:1px dashed #2a2a2a}

/* About */
.socials{display:flex; gap:10px; margin-top:10px}
.socials a{display:inline-grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:8px; color:var(--fg); text-decoration:none}
.socials a:hover{border-color:var(--accent); box-shadow:0 0 16px inset rgba(255,30,110,.35)}

/* Contact */
.contact .row{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:12px}
input, textarea{
  width:100%; padding:10px 12px; background:#0b0b0b; color:var(--fg);
  border:1px solid var(--line); border-radius:8px; font-family:var(--fontA)
}
label span{display:block; margin-bottom:6px; color:var(--muted)}

/* Footer */
.site-footer{padding:26px 0; border-top:1px solid var(--line); color:var(--muted)}

/* Glitch effect */
.glitch{position:relative; display:inline-block}
.glitch::before, .glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; clip-path:inset(0 0 0 0);
}
.glitch::before{transform:translate(2px,-1px); color:var(--accent); mix-blend-mode:screen; filter:blur(.4px)}
.glitch::after{transform:translate(-2px,1px); color:var(--accent2); mix-blend-mode:screen; filter:blur(.4px)}

/* Responsive */
@media (max-width:840px){
  .nav{display:none}
  .burger{display:block}
  .hero{padding-top:90px}
}