/* Base theme (same palette) */
:root{
  --black:#0a0a0a; --gray:#111318; --pink:#ff007a; --yellow:#ffd000; --cyan:#00e1ff; --white:#f7f7f7;
  --metal:#2a2e34; --metal-hi:#3b424b; --metal-lo:#16191d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--black);color:var(--white);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--cyan);text-decoration:none}
.container{width:min(1100px,92vw);margin:auto}

/* Header (unchanged) */
.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.6));backdrop-filter:blur(6px);z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-bottom:1px solid #222}
.logo img{height:56px;width:auto}
.nav__toggle{display:none;background:none;border:1px solid #333;color:#fff;padding:.4rem .6rem;border-radius:6px}
.nav__list{list-style:none;display:flex;gap:1rem;align-items:center;margin:0;padding:0}
.nav__list a{padding:.5rem .8rem;border-radius:999px}
.nav__list a:hover{background:#1b1b1b}

/* Buttons */
.btn{display:inline-block;padding:.7rem 1rem;border-radius:999px;background:#222;color:#fff;border:2px solid #333;font-weight:700}
.btn--pink{background:var(--pink);border-color:var(--pink);color:#000}
.btn--yellow{background:var(--yellow);border-color:var(--yellow);color:#000}
.btn--outline{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,0,122,.25)}

/* ===== Retro TV Hero ===== */
.hero{position:relative;min-height:80vh;display:grid;place-items:center;border-bottom:1px solid #1e1e1e}
.hero--retro{padding-top:3rem}
.hero__content--overlay{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);text-align:center;padding:1rem 1.2rem;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.hero h1{font-family:'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size:clamp(2.8rem, 7.5vw, 7.5rem); letter-spacing:.02em; color:#fff; text-shadow:0 6px 0 #000, 0 0 18px rgba(255,208,0,.6)}
.tagline{font-size:1.05rem;max-width:60ch;margin:.3rem auto 1rem;color:#ddd}

/* TV assembly */
.tv{position:relative; width:min(980px,92vw); margin-inline:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));}
.tv__antenna{position:absolute;left:50%;transform:translateX(-50%);top:-90px;width:0;height:0}
.tv__antenna::before, .tv__antenna::after{content:"";position:absolute;width:4px;height:110px;background:linear-gradient(#bbb,#777);top:0;border-radius:3px;box-shadow:0 0 0 2px #000 inset}
.tv__antenna::before{transform:rotate(-18deg);left:-36px}
.tv__antenna::after{transform:rotate(18deg);left:32px}
/* antenna tips */
.tv__antenna em{display:none}

.tv__bezel{display:grid;grid-template-columns:1fr 220px;gap:0;background:linear-gradient(180deg,var(--metal-hi),var(--metal-lo));border:8px solid #050607;border-radius:22px;overflow:hidden;position:relative}
.tv__bezel::before{content:"";position:absolute;inset:-18px; border-radius:28px; background:radial-gradient(80% 50% at 50% 0%, rgba(255,255,255,.08), transparent 60%)}

/* Screen */
.tv__screen{position:relative;background:#000;aspect-ratio:4/3; border-radius:16px; margin:18px; overflow:hidden;border:6px solid #060606; box-shadow: inset 0 0 0 2px #111, inset 0 0 60px rgba(0,0,0,.8)}

/* VHS layers */
.vhs--content{position:absolute;inset:0;background:url('assets/keep-dancing.png') center/contain no-repeat; filter:contrast(1.05) saturate(1.2); animation: jitter 8s infinite steps(60) }
.vhs--scanlines{position:absolute;inset:-2px;background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0px, rgba(0,0,0,.25) 1px, transparent 2px, transparent 3px); opacity:.28; mix-blend-mode:multiply; animation: roll 6s linear infinite}
.vhs--noise{position:absolute;inset:-20%;background:
  radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.10), transparent 40%),
  radial-gradient(1px 1px at 20% 80%, rgba(255,255,255,.08), transparent 40%),
  radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,.10), transparent 40%),
  radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,.08), transparent 40%);
  background-size: 120% 120%; opacity:.12; animation: noise 1.2s steps(6,end) infinite}
.vhs--glare{position:absolute;inset:0;background:linear-gradient(15deg, rgba(255,255,255,.08), transparent 30%, transparent 70%, rgba(255,255,255,.06)); mix-blend-mode:screen}
.vhs--aberration{position:absolute;inset:-1px;background: url('assets/keep-dancing.png') center/contain no-repeat; filter:hue-rotate(10deg) saturate(1.4) contrast(1.15); opacity:.35; transform: translateX(1px); mix-blend-mode:screen; animation: chroma 3s infinite}

/* OSD */
.vhs--osd{position:absolute;inset:0;pointer-events:none;font-family:'VT323', monospace; color:#7dfc00; text-shadow:0 0 6px rgba(125,252,0,.8)}
.osd{position:absolute;font-size:clamp(14px, 2.6vw, 24px); letter-spacing:.06em}
.osd--tl{top:10px;left:12px}
.osd--tr{top:10px;right:14px}
.osd--br{bottom:12px;right:16px}

/* Side panel */
.tv__panel{background:linear-gradient(180deg, #20242a, #14171b); padding:18px 14px; display:grid; gap:16px; align-content:start; border-left:6px solid #0c0e11}
.tv__led{width:10px;height:10px;border-radius:50%;background:#3b0;box-shadow:0 0 10px rgba(0,255,0,.6)}
.tv__dial{position:relative;width:120px;height:120px;border-radius:50%;background:
  radial-gradient(circle at 50% 50%, #0c0e11 40%, #000 41%),
  conic-gradient(from 0deg, #666, #bbb, #666, #bbb, #666);
  border:2px solid #0b0d10; box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.5)}
.tv__dial span{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:.65rem;color:#b9c1cc;letter-spacing:.18em}
.tv__dial--channel{animation: dial-slow 10s linear infinite}
.tv__dial--volume{animation: dial-slow 14s linear infinite reverse}

.tv__speaker{width:160px;height:160px;border-radius:10px;background:
  radial-gradient(circle at 10px 10px, #0a0a0a 2px, transparent 3px) 0 0/12px 12px,
  radial-gradient(circle at 4px 4px, #0a0a0a 2px, transparent 3px) 6px 6px/12px 12px,
  linear-gradient(#0e1014, #0a0c0f);
  border:2px solid #0b0d10; box-shadow: inset 0 0 30px rgba(0,0,0,.7)}

/* Sections (unchanged) */
.section{padding:4rem 0;background:var(--black)}
.section--dark{background:var(--gray)}
.section--grid .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.cols{display:grid;gap:2rem;grid-template-columns:1.2fr .8fr}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.card{background:#121212;border:1px solid #232323;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card__body{padding:1rem}
.card h3{margin:.2rem 0 1rem;font-family:'Bebas Neue', sans-serif;letter-spacing:.5px}
.embed{display:grid;place-items:center;padding:.5rem 0}

/* Shows list */
.shows{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.shows li{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.8rem;align-items:center;background:#121212;border:1px solid #232323;border-radius:10px;padding:.8rem}
.shows time{font-weight:700;color:var(--yellow)}
.shows .venue{color:#fff}
.shows .city{color:#bbb}

/* About */
.badges{display:flex;gap:.5rem;flex-wrap:wrap;padding:0;margin:1rem 0;list-style:none}
.badges li{background:linear-gradient(135deg, var(--pink), var(--yellow));color:#000;padding:.35rem .6rem;border-radius:999px;font-weight:700}
.statbox{background:#101214;border:1px solid #21242c;border-radius:12px;padding:1rem}
.statbox div+div{margin-top:.4rem}

/* Contact */
.contact{display:grid;gap:.8rem}
.contact label{display:grid;gap:.25rem}
.contact input,.contact textarea{background:#0f1117;border:1px solid #222733;border-radius:10px;color:#fff;padding:.7rem}
.contact input:focus,.contact textarea:focus{outline:2px solid var(--pink);border-color:var(--pink)}

/* Footer */
.site-footer{padding:2rem 1rem;text-align:center;border-top:1px solid #1e1e1e;color:#aaa}

/* Responsive */
@media (max-width: 980px){
  .tv__bezel{grid-template-columns:1fr 200px}
  .tv__dial{width:110px;height:110px}
  .tv__speaker{width:140px;height:140px}
}
@media (max-width: 840px){
  .cols{grid-template-columns:1fr}
  .nav__toggle{display:block}
  .nav__list{display:none;flex-direction:column;position:absolute;right:1rem;top:64px;background:#0e0e0f;border:1px solid #232323;border-radius:12px;padding:.6rem}
  .nav__list.open{display:flex}
  .hero__content--overlay{position:static;transform:none;margin-top:1rem;background:transparent;border:none}
}

/* Animations */
@keyframes roll{from{background-position-y:0} to{background-position-y:12px}}
@keyframes noise{0%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(2px,2px)}80%{transform:translate(-1px,0)}100%{transform:translate(0,0)}}
@keyframes jitter{0%{transform:translateX(0) skewX(0)}10%{transform:translateX(1px) skewX(.2deg)}20%{transform:translateX(-1px) skewX(-.2deg)}30%{transform:translateX(0) skewX(0)}40%{transform:translateX(1px) skewX(.1deg)}50%{transform:translateX(-1px) skewX(-.1deg)}60%{transform:translateX(0)}70%{transform:translateX(1px)}80%{transform:translateX(-1px)}90%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes chroma{0%,100%{transform:translateX(1px)}50%{transform:translateX(-1px)}}
@keyframes dial-slow{from{transform:rotate(0)} to{transform:rotate(360deg)}}