:root{
  --bg: #08080b;
  --surface: rgba(20,19,26,0.55);
  --surface-solid: #141319;
  --text: #f5f3ef;
  --muted: #c7c4cf;
  --accent: #5ef2c0;
  --accent-2: #ff4d8d;
  --accent-soft: rgba(94,242,192,0.16);
  --line: rgba(245,243,239,0.16);
  --line-strong: rgba(245,243,239,0.28);
  --ig: #E1306C;
  --x-brand: #1DA1F2;
  --tiktok: #FE2C55;
  --fb: #1877F2;
  --yt: #FF0000;
  --sp: #1DB954;
  --am: #FA243C;
  --dz: #A056FF;
  --fz: #00C2CB;
  --md: #8B5CF6;
  --display: 'Bricolage Grotesque', sans-serif;
  --body: 'Manrope', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#08080b; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }

/* ================= FIXED SINGLE BACKGROUND ================= */
.bg-fixed{
  position:fixed;
  inset:0;
  z-index:-3;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.bg-scrim{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(to bottom,
      rgba(8,8,11,0.55) 0%,
      rgba(8,8,11,0.25) 18%,
      rgba(8,8,11,0.35) 55%,
      rgba(8,8,11,0.65) 85%,
      rgba(8,8,11,0.92) 100%);
}
.grain{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================= FIXED WORDMARK ================= */
.wordmark{
  position:fixed;
  top:24px; left:32px;
  z-index:40;
  font-family:var(--display);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.02em;
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(8,8,11,0.35);
  backdrop-filter: blur(10px);
}
.wordmark:hover{ border-color:var(--accent); color:var(--accent); }

/* ================= FIXED ICON DOCKS ================= */
.dock{
  position:fixed;
  bottom:24px;
  z-index:40;
  display:flex;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(8,8,11,0.4);
  backdrop-filter: blur(12px) saturate(140%);
}
.dock-left{ left:24px; }
.dock-right{ right:24px; }
.dock a{
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--icon-brand);
  border:1px solid transparent;
  transition: color .2s ease, border-color .2s ease, transform .3s var(--ease), background .2s ease;
}
.dock a svg{ width:20px; height:20px; }
.dock a:hover{ border-color:var(--icon-brand); background:color-mix(in srgb, var(--icon-brand) 15%, transparent); transform:translateY(-2px) scale(1.06); }
@media (max-width:640px){
  .wordmark{ top:16px; left:16px; font-size:0.8rem; padding:7px 12px; }
  .dock{ bottom:14px; gap:6px; padding:7px; }
  .dock-left{ left:14px; }
  .dock-right{ right:14px; }
  .dock a{ width:34px; height:34px; }
  .dock a svg{ width:17px; height:17px; }
}
@media (max-width:480px){
  .dock{ gap:4px; padding:5px; }
  .dock-left{ left:10px; }
  .dock-right{ right:10px; }
  .dock a{ width:26px; height:26px; }
  .dock a svg{ width:13px; height:13px; }
}

/* Per-brand colors (dock + contact grid) */
.ic.ig{ --icon-brand: var(--ig); }
.ic.x{ --icon-brand: var(--x-brand); }
.ic.tiktok{ --icon-brand: var(--tiktok); }
.ic.fb{ --icon-brand: var(--fb); }
.ic.yt{ --icon-brand: var(--yt); }
.ic.sp{ --icon-brand: var(--sp); }
.ic.am{ --icon-brand: var(--am); }
.ic.dz{ --icon-brand: var(--dz); }
.ic.fz{ --icon-brand: var(--fz); }
.ic.md{ --icon-brand: var(--md); }

/* ================= HERO ================= */
.hero-plain{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  text-align:right;
  padding:120px 6vw 100px;
}
.hero-plain-content{
  max-width:850px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-top:-60px;
}
.hero-eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:22px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.hero-eyebrow::before{
  content:'';
  width:7px; height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
.title-lg{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.2rem, 6.2vw, 5.5rem);
  line-height:1;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
  white-space:nowrap;
  margin-bottom:24px;
}
.hero-sub{
  margin:28px auto 36px;
  max-width:52ch;
  font-size:1.05rem;
  color:var(--muted);
}
.hero-sub strong{ color:var(--text); }

.btn{
  font-family:var(--mono);
  font-size:0.8rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  padding:14px 26px;
  border-radius:999px;
  border:1px solid var(--line);
  transition: all .25s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn.primary{
  background:var(--accent);
  color:#08080b;
  border-color:var(--accent);
  font-weight:600;
}
.btn.primary:hover{ box-shadow:0 0 28px rgba(94,242,192,0.5); transform:translateY(-1px); }
.btn.ghost{ background:rgba(8,8,11,0.35); backdrop-filter:blur(8px); }
.btn.ghost:hover{ border-color:var(--text); }

.scroll-cue{
  position:absolute;
  left:50%; bottom:24px;
  transform:translateX(-50%);
  width:26px; height:42px;
  border:1px solid rgba(245,243,239,0.4);
  border-radius:14px;
}
.scroll-cue span{
  position:absolute;
  top:8px; left:50%;
  width:4px; height:8px;
  margin-left:-2px;
  background:var(--accent);
  border-radius:2px;
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{ opacity:1; transform:translateY(0); }
  70%{ opacity:0; transform:translateY(14px); }
  100%{ opacity:0; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue span{ animation:none; }
  html{ scroll-behavior:auto; }
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* ================= PANELS (content over background) ================= */
.panel{ padding:110px 0; position:relative; }
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem, 4.5vw, 3.1rem);
  letter-spacing:-0.01em;
  text-transform:uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ================= Shows ================= */
.shows-empty{
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  backdrop-filter: blur(14px);
  padding:52px 40px;
  text-align:center;
}
.shows-empty p{ font-family:var(--display); font-weight:600; font-size:1.35rem; text-transform:uppercase; }
.shows-empty p.muted{ font-family:var(--body); font-weight:400; text-transform:none; font-size:0.95rem; color:var(--muted); margin-top:8px; margin-bottom:26px; }

/* ================= Players ================= */
.players{ display:grid; grid-template-columns:1fr; gap:22px; max-width:520px; margin:0 auto; }
.player-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  backdrop-filter: blur(14px);
}
.player-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.player-label{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); display:flex; align-items:center; gap:8px; }
.player-label .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.player-card iframe{ width:100%; border:none; border-radius:12px; display:block; }
.am-songlist{ display:flex; flex-direction:column; gap:2px; }
.am-song{
  display:flex; align-items:center; gap:14px;
  padding:10px 8px;
  border-radius:12px;
  transition: background .2s ease;
}
.am-song:hover{ background:rgba(245,243,239,0.05); }
.am-song img{ width:52px; height:52px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.am-song-info{ display:flex; flex-direction:column; min-width:0; flex:1; }
.am-song-name{ font-family:var(--display); font-weight:600; font-size:0.98rem; text-transform:uppercase; letter-spacing:-0.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-song-sub{ font-family:var(--body); font-size:0.78rem; color:var(--muted); margin-top:2px; }
.am-song-play{
  width:32px; height:32px; flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:0.7rem;
  transition: all .2s ease;
}
.am-song:hover .am-song-play{ background:var(--accent); border-color:var(--accent); color:#08080b; }
.platform-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--mono);
  transition: all .2s ease;
}
.platform-chip:hover{ border-color:var(--accent); color:var(--accent); }
.platform-row{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }

/* ================= About ================= */
.about-grid{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:48px; align-items:start; }
@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; } }
.about-text{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px;
  backdrop-filter: blur(14px);
}
.about-text p{ font-size:1.05rem; color:var(--text); margin-bottom:18px; max-width:56ch; }
.about-text p:last-child{ margin-bottom:0; }
.stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px;
  backdrop-filter: blur(14px);
}
.stat-num{ font-family:var(--mono); font-size:2.4rem; color:var(--accent); line-height:1; }
.stat-label{ margin-top:10px; color:var(--muted); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em; }

/* ================= Press ================= */
.press-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:700px){ .press-grid{ grid-template-columns:1fr; } }
.press-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  backdrop-filter: blur(14px);
  transition: border-color .25s ease, transform .25s var(--ease), color .25s ease;
}
.press-card:hover{ border-color:var(--accent); color:var(--accent); transform:translateX(4px); }
.press-outlet{ font-family:var(--display); font-weight:600; font-size:1rem; text-transform:uppercase; letter-spacing:-0.005em; }
.press-arrow{ font-family:var(--mono); color:var(--muted); font-size:0.9rem; }
.press-card:hover .press-arrow{ color:var(--accent); }

/* ================= Gallery ================= */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:start; }
@media (max-width:640px){ .gallery{ grid-template-columns:1fr; } }
.gtile{
  border-radius:16px;
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:16px;
  font-family:var(--mono);
  font-size:0.68rem;
  text-transform:uppercase;
  color:rgba(245,243,239,0.9);
  letter-spacing:0.04em;
  background-size:cover;
  background-position:center;
  transition: transform .4s var(--ease), border-color .3s ease;
}
.gtile:hover{ transform:scale(1.02); border-color:var(--line-strong); }

/* ================= Newsletter ================= */
.nl-wrap{ text-align:center; }
.nl-title{ font-family:var(--display); font-weight:800; font-size:clamp(2rem, 5.5vw, 3.4rem); text-transform:uppercase; margin-top:10px; }
.nl-sub{ color:var(--muted); max-width:46ch; margin:14px auto 32px; }
.nl-form{ display:flex; gap:12px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.nl-form input{
  flex:1 1 240px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  padding:14px 20px;
  color:var(--text);
  font-family:var(--body);
  backdrop-filter: blur(14px);
}
.nl-form input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.form-note{ margin-top:14px; font-family:var(--mono); font-size:0.75rem; color:var(--accent); min-height:1.2em; }

/* ================= Contact ================= */
.contact-grid{ display:flex; flex-direction:column; align-items:center; gap:32px; text-align:center; }
.social-matrix{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  width:100%;
}
.social-matrix a{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  padding:16px 12px;
  border-radius:14px;
  color:var(--icon-brand);
  border:1px solid var(--line);
  background:var(--surface);
  backdrop-filter: blur(14px);
  transition: border-color .2s ease, background .2s ease, transform .3s var(--ease);
}
.social-matrix a svg{ width:22px; height:22px; flex-shrink:0; }
.social-matrix a .ic-name{
  font-family:var(--body);
  font-weight:500;
  font-size:22px;
  line-height:1.1;
  letter-spacing:-0.005em;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.social-matrix a:hover{
  border-color:var(--icon-brand);
  background:color-mix(in srgb, var(--icon-brand) 15%, transparent);
  transform:translateY(-3px) scale(1.02);
}
@media (max-width:900px){
  .social-matrix{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .social-matrix a{ padding:12px 10px; gap:8px; }
  .social-matrix a svg{ width:18px; height:18px; }
  .social-matrix a .ic-name{ font-size:15px; }
}
@media (max-width:520px){
  .social-matrix{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:340px){
  .social-matrix{ grid-template-columns:1fr; }
}
.email-link{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.2rem, 3vw, 1.7rem);
  letter-spacing:-0.01em;
  padding:14px 28px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  backdrop-filter: blur(14px);
  transition: border-color .25s ease, color .25s ease, transform .25s var(--ease);
}
.email-link:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ================= Footer ================= */
footer{ padding:60px 0 140px; text-align:center; }
.footer-text{ font-family:var(--mono); font-size:0.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }