:root {
    --primary: #800080;
    --bg: #000;
    --text: #fff;
    --accent-light: rgba(128,0,128,0.1);
  }
  
  /* RESET & BASE */
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    background:var(--bg);
    color:var(--text);
    font-family:'Segoe UI',sans-serif;
    line-height:1.5;
  }
  
  /* NAVIGATION */
  .site-nav {
    position:fixed; top:0; left:0; right:0;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(6px);
    z-index:1000;
  }
  .nav-container {
    max-width:1200px; margin:auto;
    display:flex; align-items:center;
    justify-content:space-between;
    padding:1rem 2rem;
    gap:1rem;
  }
  .site-nav .logo img {
    height:40px; width:auto; object-fit:contain;
  }
  .nav-links {
    list-style:none; display:flex; gap:1.5rem;
  }
  .nav-links a {
    color:var(--text); text-decoration:none;
    font-weight:500; transition:color .2s;
  }
  .nav-links a:hover { color:var(--primary); }
  .nav-btn {
    background:var(--primary); color:#fff;
    padding:.5rem 1rem; border-radius:6px;
    text-decoration:none;font-weight:600;
  }
  
  /* HERO */
  .hero {
    position:relative; height:100vh;
    background:url('../assets/hero.jpg') center/cover no-repeat fixed;
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding:0 2rem;
  }
  .hero-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,0.5);
  }
  .hero-content {
    position:relative; max-width:800px;
  }
  .hero-content h1 {
    font-size:2.5rem; margin-bottom:1rem;
  }
  .hero-ctas .btn {
    margin:.5rem; padding:.8rem 1.5rem;
    border-radius:6px; font-size:1rem;
    text-decoration:none; font-weight:600;
    transition:background .2s,color .2s;
  }
  .hero-ctas .btn:first-child {
    background:var(--primary); color:#fff;
  }
  .hero-ctas .outline {
    background:transparent;
    border:2px solid var(--primary);
    color:var(--primary);
  }
  .hero-ctas .btn:hover {
    background:var(--text); color:var(--bg);
  }
  
  /* STATS */
  .stats { padding:4rem 2rem; }
  .stats-container {
    max-width:1000px; margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:2rem; text-align:center;
  }
  .stat-card {
    background:var(--accent-light);
    border-radius:8px; padding:2rem 1rem;
    backdrop-filter:blur(6px);
  }
  .stat-value {
    font-size:2.5rem; font-weight:bold;
    color:var(--primary);
  }
  .stat-label { margin-top:.5rem; font-size:1rem; }
  
  /* ARTISTS */
  .artists { padding:4rem 2rem; text-align:center; }
  .artists h2 { font-size:2rem; margin-bottom:2rem; }
  .artists-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:1.5rem; max-width:1000px; margin:auto;
  }
  .artist-card {
    background:var(--accent-light);
    border-radius:8px; overflow:hidden;
    transition:transform .3s,filter .3s;
    filter:grayscale(80%);
  }
  .artist-card img {
    width:100%; display:block;
    object-fit:cover; aspect-ratio:1;
  }
  .artist-card:hover {
    filter:grayscale(0%); transform:scale(1.05);
  }
  
  /* FOOTER */
  .site-footer {
    background:#111; text-align:center;
    padding:1.5rem 2rem; font-size:.9rem;
    color:#666;
  }
  
  /* RESPONSIVE */
  @media(max-width:600px){
    .nav-container{ flex-direction:column; }
    .hero-content h1{ font-size:2rem; }
  }