:root{
  --gold:#f6c343;
  --gold-soft:#ffd978;
  --gold2:#a66b00;
  --dark:#050505;
  --panel:rgba(10,10,10,.86);
}
body{background:#030303;overflow-x:hidden}
.pt-20{padding-top:92px}
.gold-text{background:linear-gradient(90deg,#fff2b8,#f6c343,#b77700,#fff1a3);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass-nav{background:rgba(0,0,0,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(246,195,67,.25)}
.gold-grid{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 8%,rgba(246,195,67,.18),transparent 28%),radial-gradient(circle at 85% 18%,rgba(246,195,67,.12),transparent 26%),linear-gradient(rgba(246,195,67,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(246,195,67,.035) 1px,transparent 1px);background-size:auto,auto,42px 42px,42px 42px;z-index:-2}
.brand-mark{width:42px;height:42px;object-fit:contain;border-radius:10px;box-shadow:0 0 14px rgba(246,195,67,.35)}
.brand-word{letter-spacing:.02em}
.hero{min-height:90vh;display:flex;align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.82)),url('img/hero-background.png') center/cover no-repeat;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 25%,rgba(0,0,0,.25) 62%,rgba(0,0,0,.55) 100%)}
.hero > .container{position:relative;z-index:1}
.hero-card,.pc-card,.page-banner,.role-card{background:linear-gradient(145deg,rgba(22,19,12,.88),rgba(0,0,0,.92));border:1px solid rgba(246,195,67,.28);box-shadow:0 20px 90px rgba(0,0,0,.55),inset 0 0 40px rgba(246,195,67,.05);border-radius:28px}
.hero-card{backdrop-filter:blur(8px)}
.page-banner{overflow:hidden}
.hero-promo{overflow:hidden}
.hero-promo img{width:100%;height:auto;display:block;border-radius:22px}
.promo-copy{padding:1rem .25rem .25rem}
.btn-gold{background:linear-gradient(135deg,#fff0a0,#f6c343,#9f6500);color:#080808!important;border:0;font-weight:900;box-shadow:0 0 28px rgba(246,195,67,.25)}
.btn-outline-gold{border:1px solid rgba(246,195,67,.7);color:#f6c343!important;background:rgba(0,0,0,.25);font-weight:800}
.btn-outline-gold:hover{background:#f6c343;color:#000!important}
.wave{height:70px;background:repeating-linear-gradient(90deg,transparent 0 8px,rgba(246,195,67,.95) 9px 12px,transparent 13px 20px);mask:linear-gradient(0deg,transparent 0%,#000 15% 85%,transparent 100%);filter:drop-shadow(0 0 15px rgba(246,195,67,.6));animation:pulse 1.8s infinite alternate}
@keyframes pulse{to{opacity:.5;transform:scaleY(.75)}}
.title-xl{font-size:clamp(3.2rem,9vw,8.5rem);line-height:.85;font-weight:1000;letter-spacing:-.06em;text-transform:uppercase;text-shadow:0 8px 0 rgba(0,0,0,.8),0 0 40px rgba(246,195,67,.25)}
.section-title{font-size:clamp(2rem,5vw,4rem);font-weight:1000;letter-spacing:-.04em}
.track-card,.artist-card,.role-card{transition:.25s;overflow:hidden}
.track-card:hover,.artist-card:hover,.role-card:hover{transform:translateY(-6px);border-color:rgba(246,195,67,.75)}
.cover{aspect-ratio:1/1;object-fit:cover;width:100%}
.cover-wide{aspect-ratio:16/8;object-fit:cover;width:100%}
.feature-card{height:100%}
.feature-icon,.metric-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(246,195,67,.11);border:1px solid rgba(246,195,67,.3);color:var(--gold);font-size:1.45rem;font-weight:900}
.metric-card{display:flex;align-items:center;gap:1rem;padding:1.25rem}
.metric-value{font-size:1.9rem;font-weight:1000;line-height:1}
.role-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.role-copy{padding:1.25rem}
.role-meta{font-size:.93rem;color:rgba(255,255,255,.70)}
.page-hero-copy{padding:2rem 2rem 2rem 2rem}
.page-hero-image{height:100%;min-height:320px;object-fit:cover;width:100%}
.form-control,.form-select,textarea{background:#0b0b0b!important;color:white!important;border:1px solid rgba(246,195,67,.25)!important}
.form-control:focus,.form-select:focus,textarea:focus{box-shadow:0 0 0 .25rem rgba(246,195,67,.15)!important}
.badge-gold{background:rgba(246,195,67,.14);border:1px solid rgba(246,195,67,.4);color:#ffd56b}
.audio-bar{position:sticky;bottom:0;z-index:50;background:rgba(0,0,0,.92);border-top:1px solid rgba(246,195,67,.35);backdrop-filter:blur(16px)}
.feedback-pill{background:#111;border:1px solid rgba(246,195,67,.25);border-radius:999px;padding:.55rem .85rem;color:#f7d77c}
a{color:#f6c343}
.table{--bs-table-bg:transparent;--bs-table-color:#fff;--bs-table-border-color:rgba(246,195,67,.18)}
.nav-pills .nav-link{color:#f6c343;border:1px solid rgba(246,195,67,.25);margin-right:.4rem}
.nav-pills .nav-link.active{background:linear-gradient(135deg,#fff0a0,#f6c343,#9f6500);color:#050505;font-weight:900}
.mt-n5{margin-top:-55px}
code{color:#ffd76b}
.fw-black{font-weight:1000}
.border-warning\/20{border-color:rgba(246,195,67,.2)!important}
.footer-links a{color:#fff;text-decoration:none;opacity:.8}.footer-links a:hover{opacity:1;color:#f6c343}
.small-kicker{letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;color:#ffd978}

@media(max-width:992px){
  .hero{min-height:auto;padding:7rem 0 3rem}
}
@media(max-width:768px){
  .hero{padding:6rem 0 2rem}
  .title-xl{font-size:3.7rem}
  .pc-card,.hero-card,.page-banner,.role-card{border-radius:20px}
  .section-title{font-size:2.5rem}
  .navbar-brand{font-size:1rem}
  .lead.fs-3{font-size:1.2rem!important}
  .page-hero-copy{padding:1.4rem}
  .metric-card{padding:1rem}
  .metric-value{font-size:1.5rem}
}