:root{
  color-scheme:dark;
  --bg:#0a0420;
  --bg2:#13072e;
  --card:#1a0d3a;
  --card2:#221050;
  --card-h:#2a1660;
  --line:rgba(255,255,255,.08);
  --ink:#fff;
  --muted:#a89dc4;
  --muted2:#7d6fa8;
  --pink:#ff2e8a;
  --pink2:#ff5fb0;
  --cyan:#22d3ee;
  --lime:#c5ff3d;
  --orange:#ff9a3d;
  --gold:#ffd23d;
  --purple:#a855f7;
  --purple2:#7c3aed;
  --blue:#3b82f6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
html,body{overflow-x:hidden}
body{
  font-family:'Sora',sans-serif;color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(ellipse 70% 40% at 80% 5%, rgba(255,46,138,.15), transparent 60%);
  min-height:100vh;
  letter-spacing:-.01em;
  -webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.wrap{max-width:1600px;margin:0 auto;padding:0 28px}

/* ====================================================
   TOP NAVIGATIE - FIXED + RESPONSIVE
   ==================================================== */
.topbar{
  position:sticky;top:0;z-index:100;
  padding:14px 28px;max-width:1600px;margin:0 auto;
  display:flex;align-items:center;gap:30px;
  background:rgba(10,4,32,.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.topbar::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.45rem;letter-spacing:-.5px;line-height:1}
.logo-icon{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  display:grid;place-items:center;color:#fff;
  position:relative;
  box-shadow:0 0 24px rgba(255,46,138,.5);
}
.logo-icon::after{
  content:"👑";position:absolute;top:-12px;right:-8px;font-size:1rem;transform:rotate(20deg);
}
.logo-text{display:flex;flex-direction:column;line-height:.95}
.logo-text .l1{color:#fff;font-size:1rem}
.logo-text .l2{color:var(--lime);font-size:1.35rem;letter-spacing:0}

.nav-menu{display:flex;align-items:center;gap:28px;margin-left:30px;flex:1}
.nav-link{
  font-size:.92rem;font-weight:700;color:var(--muted);padding:8px 2px;
  position:relative;letter-spacing:.02em;text-transform:uppercase;
}
.nav-link:hover{color:#fff}
.nav-link.active{color:#fff}
.nav-link.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--purple));border-radius:2px;
}
.nav-actions{display:flex;align-items:center;gap:14px}
.icon-btn{
  width:38px;height:38px;border-radius:50%;background:transparent;border:none;
  color:#fff;cursor:pointer;display:grid;place-items:center;font-size:1.1rem;
}
.icon-btn:hover{background:rgba(255,255,255,.06)}
.login-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--lime);color:#0a0420;
  font-weight:800;font-size:.85rem;padding:10px 18px;border-radius:50px;
  border:none;cursor:pointer;letter-spacing:.02em;
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(197,255,61,.3)}

/* Stemmen CTA - opvallende roze/paarse gradient knop */
.vote-cta-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;
  font-weight:800;font-size:.85rem;padding:10px 18px;border-radius:50px;
  border:none;cursor:pointer;letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(255,46,138,.3);
  position:relative;
  animation:pulse-glow 2.5s ease-in-out infinite;
}
.vote-cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(255,46,138,.5);
  color:#fff;
}
@keyframes pulse-glow{
  0%, 100%{box-shadow:0 4px 16px rgba(255,46,138,.3)}
  50%{box-shadow:0 4px 24px rgba(255,46,138,.6), 0 0 0 4px rgba(255,46,138,.08)}
}

.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer}

/* ====================================================
   HERO
   ==================================================== */
.hero{
  display:grid;grid-template-columns:1fr 320px;gap:24px;margin-top:14px;align-items:stretch;
}
.hero-main{
  position:relative;border-radius:24px;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(168,85,247,.4),rgba(255,46,138,.2) 50%,rgba(124,58,237,.5)),
    #1a0d3a;
  padding:50px 40px;min-height:440px;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-main::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 60px,rgba(255,255,255,.025) 60px 62px);
  pointer-events:none;
}
.hero-content{position:relative;z-index:2;max-width:440px}
.hero-content h1{
  font-family:'Sora';font-weight:900;
  font-size:clamp(2.4rem,4.8vw,3.5rem);line-height:1;letter-spacing:-.03em;
  margin-bottom:18px;
}
.hero-content h1 .green{color:var(--lime)}
.hero-content p{color:#d9d0f0;font-size:1.05rem;line-height:1.5;margin-bottom:28px}
.hero-content p .bolt{display:inline-block;animation:bolt 1.5s ease-in-out infinite}
@keyframes bolt{0%,100%{transform:rotate(0)}50%{transform:rotate(15deg)}}
.hero-buttons{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--lime);color:#0a0420;
  font-weight:800;font-size:.95rem;padding:14px 28px;border-radius:50px;
  border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(197,255,61,.35)}
.btn-primary .arrow{
  background:rgba(0,0,0,.15);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:1rem;
}
.btn-play{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:#fff;font-weight:700;font-size:.95rem;cursor:pointer;border:none;
  text-transform:uppercase;letter-spacing:.05em;
}
.btn-play .play-circle{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);
  display:grid;place-items:center;backdrop-filter:blur(8px);
}
.btn-play:hover .play-circle{background:rgba(255,255,255,.2)}

/* hero artist photo */
.hero-artist{
  position:absolute;right:-30px;bottom:0;top:0;width:55%;
  background-image:url("https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=800&q=80");
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(270deg,#000 60%,transparent);
  mask-image:linear-gradient(270deg,#000 60%,transparent);
  pointer-events:none;
}
.hero-notes{position:absolute;font-size:1.6rem;animation:float 4s ease-in-out infinite}
.hero-notes.n1{top:14%;right:48%;animation-delay:0s}
.hero-notes.n2{top:30%;right:30%;animation-delay:.8s}
.hero-notes.n3{bottom:25%;right:40%;animation-delay:1.6s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-14px) rotate(10deg)}}

/* hero side card (#1 deze week) */
.hero-side{
  background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px;
  display:flex;flex-direction:column;
}
.hero-side-badge{
  background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;
  font-weight:800;font-size:.72rem;padding:6px 14px;border-radius:50px;
  align-self:flex-start;text-transform:uppercase;letter-spacing:.05em;
}
.hero-side-video{
  position:relative;margin-top:14px;border-radius:14px;overflow:hidden;aspect-ratio:16/10;
  background:linear-gradient(135deg,#8b3a2b,#3a1d18);
}
.hero-side-video img{width:100%;height:100%;object-fit:cover}
.play-btn-large{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.95);color:#0a0420;
  display:grid;place-items:center;font-size:1.3rem;
  border:none;cursor:pointer;padding-left:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.hero-side h3{font-weight:800;font-size:1.15rem;margin-top:14px;letter-spacing:-.02em}
.hero-side .artist{color:var(--muted);font-size:.88rem;margin-top:2px}
.hero-side-btn{
  margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--card2);color:#fff;font-weight:700;font-size:.85rem;
  padding:10px 16px;border-radius:50px;border:1px solid var(--line);cursor:pointer;
}
.hero-side-btn:hover{background:var(--card-h)}

/* ====================================================
   CATEGORIE-KNOPPEN
   ==================================================== */
.cats{
  display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:24px;
}
.cat{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:18px 8px;text-align:center;cursor:pointer;transition:.18s;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.cat:hover{background:var(--card-h);transform:translateY(-3px)}
.cat-icon{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-size:1.2rem;color:#fff;
}
.cat-icon.gold{background:rgba(255,210,61,.15);color:var(--gold)}
.cat-icon.orange{background:rgba(255,154,61,.15);color:var(--orange)}
.cat-icon.blue{background:rgba(59,130,246,.15);color:var(--blue)}
.cat-icon.yellow{background:rgba(255,210,61,.15);color:var(--gold)}
.cat-icon.cyan{background:rgba(34,211,238,.15);color:var(--cyan)}
.cat-icon.purple{background:rgba(168,85,247,.15);color:var(--purple)}
.cat-icon.pink{background:rgba(255,46,138,.15);color:var(--pink)}
.cat-label{font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* ====================================================
   GRID: TOP 20 + STEM-MODULE
   ==================================================== */
.grid-main{display:grid;grid-template-columns:1fr 320px;gap:20px;margin-top:24px}

/* Top 20 card */
.top20-card{
  background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px;
}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card-title{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase}
.card-title-icon{
  width:30px;height:30px;border-radius:8px;background:rgba(168,85,247,.15);color:var(--purple);
  display:grid;place-items:center;font-size:.9rem;
}
.card-link{color:var(--cyan);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:5px}
.card-link:hover{color:#fff}

.top20-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(5,auto);
  grid-auto-flow:column;
  gap:8px;
}
.tr{
  display:grid;grid-template-columns:42px 44px 1fr auto;gap:12px;align-items:center;
  padding:9px 10px;border-radius:12px;cursor:pointer;transition:.15s;
  position:relative;
}
.tr:hover{background:rgba(255,255,255,.04)}
.tr.active{background:rgba(168,85,247,.12);outline:1.5px solid rgba(168,85,247,.5)}
.tr-rank{
  font-family:'Sora';font-weight:900;font-size:1.5rem;
  font-variant-numeric:tabular-nums;text-align:center;line-height:1;
}
.tr-rank.c1{color:var(--gold)}
.tr-rank.c2{color:var(--cyan)}
.tr-rank.c3{color:var(--pink)}
.tr-rank.c4{color:var(--lime)}
.tr-rank.c5{color:var(--orange)}
.tr-rank.c6{color:var(--purple)}
.tr-rank.c7{color:var(--cyan)}
.tr-rank.c8{color:var(--pink)}
.tr-rank.c9{color:var(--lime)}
.tr-rank.c10{color:var(--purple)}
.tr-cover-wrap{
  position:relative;width:42px;height:42px;flex-shrink:0;
  border-radius:8px;overflow:hidden;
}
.tr-cover{width:42px;height:42px;border-radius:8px;object-fit:cover;display:block}
.tr-play{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);border-radius:8px;color:#fff;border:none;
  opacity:0;transition:opacity .18s;text-decoration:none;cursor:pointer;
  font-size:1.2rem;padding:0;z-index:3;
}
.tr-play .bi{line-height:1}
.tr-play.spotify{color:#1ed760}
.tr-play.spotify:hover{color:#1fdf64;background:rgba(0,0,0,.85)}
.tr-play.youtube{color:#fff}
.tr-cover-wrap:hover .tr-play, .tr.playing .tr-play{opacity:1}
.tr.playing .tr-play{background:#1ed760;color:#0a0420}
.tr-info{min-width:0}
.tr-title{font-weight:700;font-size:.92rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-artist{color:var(--muted);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-active-wave{
  position:absolute;right:48px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:2px;
}
.tr-active-wave span{
  width:2px;background:var(--pink);border-radius:1px;
  animation:wave 1.1s ease-in-out infinite;
}
.tr-active-wave span:nth-child(1){height:8px;animation-delay:0s}
.tr-active-wave span:nth-child(2){height:14px;animation-delay:.15s}
.tr-active-wave span:nth-child(3){height:10px;animation-delay:.3s}
.tr-active-wave span:nth-child(4){height:16px;animation-delay:.45s}
.tr-active-wave span:nth-child(5){height:8px;animation-delay:.6s}
@keyframes wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.heart-btn{
  background:transparent;border:none;color:var(--muted2);font-size:1.1rem;cursor:pointer;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;transition:.15s;
}
.heart-btn:hover{background:rgba(255,46,138,.12);color:var(--pink)}
.heart-btn.liked{color:var(--pink)}

/* === Spotify sticky bottom player === */
.tr.playing{
  background:rgba(30,215,96,.08);
  outline:1.5px solid rgba(30,215,96,.4);
}
.tr.playing .tr-play{opacity:1;background:#1ed760;color:#0a0420}

#ksc-sticky-player{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(120%);
  width:min(560px, calc(100% - 28px));
  z-index:1000;
  background:#0a0420;border:1px solid rgba(30,215,96,.35);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
  opacity:0;
  overflow:hidden;
}
#ksc-sticky-player.is-open{transform:translateX(-50%) translateY(0);opacity:1}
#ksc-sticky-player .ksp-inner{position:relative;padding:10px 50px 10px 10px}
#ksc-sticky-player .ksp-iframe-wrap{border-radius:10px;overflow:hidden;background:#1a0d3a;min-height:80px}
#ksc-sticky-player iframe{display:block;width:100%;border:0;min-height:80px}
#ksc-sticky-player .ksp-close{
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;
  cursor:pointer;display:grid;place-items:center;
  font-size:.85rem;transition:.15s;
}
#ksc-sticky-player .ksp-close:hover{background:rgba(255,46,138,.2);border-color:rgba(255,46,138,.4);color:#ff2e8a}

@media(max-width:520px){
  #ksc-sticky-player{bottom:14px;width:calc(100% - 24px)}
}

.top20-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--line);
}
.foot-arrow{
  background:transparent;border:1px solid var(--line);color:#fff;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:1rem;
}
.foot-arrow:hover{background:var(--card-h)}
.foot-cta{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;
  font-weight:800;font-size:.82rem;padding:13px 18px;border-radius:50px;
  border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;
}
.foot-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(255,46,138,.4)}

/* ====== SIDE COLUMN ====== */
.side-col{display:flex;flex-direction:column;gap:16px}

/* stem-module */
.vote-card{
  background:var(--card);border:1px solid rgba(255,46,138,.25);border-radius:20px;padding:20px;
}
.vote-card h3{font-weight:900;font-size:.95rem;color:var(--pink);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.vote-card .sub{color:var(--muted);font-size:.82rem;margin-bottom:16px}

.vote-row{
  display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;
  padding:8px 0;
}
.vote-play{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;cursor:pointer;border:none;
  font-size:.85rem;padding-left:2px;transition:.15s;
}
.vote-play:hover{background:rgba(255,255,255,.15)}
.vote-info .t{font-weight:700;font-size:.88rem;line-height:1.1}
.vote-info .a{color:var(--muted);font-size:.75rem;margin-top:1px}
.vote-btn{
  font-weight:800;font-size:.72rem;padding:7px 14px;border-radius:50px;
  border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;
}
.vote-btn.lime{background:var(--lime);color:#0a0420}
.vote-btn.purple{background:var(--purple);color:#fff}
.vote-btn.cyan{background:var(--cyan);color:#0a0420}
.vote-btn:hover{transform:translateY(-1px)}

/* jij bepaalt card */
.jij-card{
  background:var(--card);border:2px solid var(--lime);border-radius:20px;padding:20px;
  position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(197,255,61,.2),0 0 30px rgba(197,255,61,.1);
}
.jij-card h3{
  font-weight:900;font-size:1.4rem;color:var(--orange);
  text-transform:uppercase;letter-spacing:.04em;
  text-shadow:0 0 10px rgba(255,154,61,.3);
}
.jij-card p{color:#d9d0f0;font-size:.82rem;margin:4px 0 14px;line-height:1.4}
.jij-btn{
  background:transparent;border:1.5px solid var(--lime);color:var(--lime);
  font-weight:800;font-size:.78rem;padding:9px 18px;border-radius:50px;
  cursor:pointer;text-transform:uppercase;letter-spacing:.04em;
}
.jij-btn:hover{background:var(--lime);color:#0a0420}
.jij-trophy{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:3rem;filter:drop-shadow(0 0 10px rgba(255,154,61,.5));
}

/* ====================================================
   NIEUWSTE CLIPS + DANCE CHALLENGE
   ==================================================== */
.row-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;margin-top:20px}

.clips-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px}
.clips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}
.clip{cursor:pointer;transition:.18s}
.clip:hover{transform:translateY(-3px)}
.clip-thumb{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;
  background:linear-gradient(135deg,#3a1d5a,#1a0d3a);
}
.clip-thumb img{width:100%;height:100%;object-fit:cover}
.clip-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#0a0420;
  display:grid;place-items:center;font-size:.95rem;padding-left:3px;
}
.clip-info{margin-top:10px}
.clip-t{font-weight:700;font-size:.88rem;line-height:1.15}
.clip-a{color:var(--muted);font-size:.76rem;margin-top:2px}
.clips-arrows{position:relative}
.clip-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;
  border:none;cursor:pointer;display:grid;place-items:center;font-size:.9rem;
}
.clip-nav.prev{left:-6px}.clip-nav.next{right:-6px}
.clip-nav:hover{background:rgba(0,0,0,.8)}

/* dance challenge */
.challenge-card{
  border-radius:24px;padding:24px;position:relative;overflow:hidden;
  background:
    linear-gradient(135deg,rgba(168,85,247,.5),rgba(255,46,138,.3) 60%),
    #2a1660;
  min-height:280px;display:flex;flex-direction:column;justify-content:space-between;
}
.challenge-card::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 50px,rgba(255,255,255,.04) 50px 52px);
  pointer-events:none;
}
.challenge-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.challenge-eyebrow{font-weight:900;font-size:.78rem;color:var(--orange);letter-spacing:.05em;text-transform:uppercase}
.challenge-eyebrow div:last-child{color:#fff;margin-top:2px}
.challenge-new{
  background:rgba(255,255,255,.15);color:#fff;font-weight:800;font-size:.65rem;
  padding:4px 10px;border-radius:50px;letter-spacing:.05em;text-transform:uppercase;
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);
}
.challenge-mid{position:relative;z-index:2;margin-top:12px}
.challenge-mid h2{font-family:'Sora';font-weight:900;font-size:2.2rem;letter-spacing:-.03em;margin-bottom:6px}
.challenge-mid p{color:#e0d4f5;font-size:.85rem;line-height:1.4;max-width:200px}
.challenge-mid .tag{color:var(--cyan);font-weight:700}
.challenge-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--lime);color:#0a0420;font-weight:800;font-size:.82rem;
  padding:11px 22px;border-radius:50px;border:none;cursor:pointer;
  text-transform:uppercase;letter-spacing:.05em;align-self:flex-start;
  position:relative;z-index:2;margin-top:14px;
}
.challenge-btn:hover{transform:translateY(-1px)}
.challenge-img{
  position:absolute;right:-30px;bottom:0;top:0;width:55%;
  background-image:url("https://images.unsplash.com/photo-1535525153412-5a42439a210d?w=600&q=80");
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(270deg,#000 60%,transparent);
  mask-image:linear-gradient(270deg,#000 60%,transparent);
}
.challenge-note{position:absolute;font-size:1.4rem;animation:float 4s ease-in-out infinite}
.challenge-note.c1{bottom:30%;right:40%;animation-delay:.3s}
.challenge-note.c2{bottom:45%;right:30%;animation-delay:1.2s}

/* ====================================================
   ONDERSTE 3 KAARTEN
   ==================================================== */
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}

.mini-card{
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;
  position:relative;overflow:hidden;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;
}
.mini-card h3{font-weight:900;font-size:1.4rem;letter-spacing:-.02em;text-transform:uppercase}
.mini-card.quiz h3{color:var(--lime)}
.mini-card.badges h3{color:var(--pink)}
.mini-card.reacties h3{color:var(--cyan)}
.mini-card p{color:#d9d0f0;font-size:.82rem;margin-top:6px;line-height:1.4}
.mini-btn{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-weight:800;font-size:.78rem;padding:9px 18px;border-radius:50px;
  border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;align-self:flex-start;
}
.mini-btn.lime{background:var(--lime);color:#0a0420}
.mini-btn.pink{background:transparent;border:1.5px solid var(--pink);color:var(--pink)}
.mini-btn:hover{transform:translateY(-1px)}

.mini-deco{
  position:absolute;right:-10px;top:50%;transform:translateY(-50%);
  font-size:5rem;opacity:.4;filter:drop-shadow(0 0 14px currentColor);
}
.mini-card.quiz .mini-deco{color:var(--cyan);right:14px;font-size:4rem;opacity:.8}
.mini-card.badges .mini-deco{font-size:4.5rem;right:8px;opacity:.9}

.reactions{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap}
.rx{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:.15s}
.rx:hover{transform:translateY(-3px) scale(1.1)}
.rx-emoji{font-size:1.7rem}
.rx-count{font-weight:800;font-size:.78rem;color:var(--muted)}

/* ====================================================
   FOOTER
   ==================================================== */
.site-footer{
  margin-top:50px;padding:24px 20px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;
  max-width:1100px;margin-left:auto;margin-right:auto;
}
.footer-socials{display:flex;align-items:center;gap:12px}
.footer-socials .label{color:var(--muted);font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-right:6px}
.social-ico{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  font-size:1rem;color:#fff;
}
.social-ico.tt{background:#000;border:1px solid rgba(255,255,255,.15)}
.social-ico.ig{background:linear-gradient(135deg,#fa7e1e,#d62976,#962fbf)}
.social-ico.yt{background:#ff0000}
.social-ico.sn{background:#fffc00;color:#000}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{color:var(--muted);font-size:.82rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.footer-links a:hover{color:#fff}
.footer-copy{color:var(--muted2);font-size:.78rem;font-weight:600}

/* ====================================================
   RESPONSIVE
   ==================================================== */

/* Tablet: 1100-1600px */
@media(max-width:1600px){
  .wrap, .topbar{max-width:100%}
}

/* Tablet small: 980px */
@media(max-width:980px){
  .nav-menu{
    display:none;
    position:fixed;top:62px;left:0;right:0;
    background:rgba(10,4,32,.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    flex-direction:column;
    gap:0;
    margin:0;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 16px 40px rgba(0,0,0,.5);
    max-height:calc(100vh - 62px);
    overflow-y:auto;
    z-index:99;
  }
  .nav-menu.is-open{display:flex;animation:slideDown .2s ease-out}
  @keyframes slideDown{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
  }
  .nav-link{
    width:100%;padding:14px 24px;font-size:1rem;
    border-bottom:1px solid rgba(255,255,255,.04);
    text-transform:none;letter-spacing:.01em;
  }
  .nav-link.active{background:rgba(255,46,138,.1);color:var(--lime)}
  .nav-link.active::after{display:none}
  .menu-toggle{
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    color:#fff;font-size:1.4rem;cursor:pointer;
    width:42px;height:42px;border-radius:12px;
    transition:.15s;margin-left:auto;
  }
  .menu-toggle:hover{background:rgba(255,255,255,.1)}
  .menu-toggle.is-open{background:rgba(255,46,138,.15);color:var(--pink);border-color:rgba(255,46,138,.3)}

  .hero{grid-template-columns:1fr}
  .grid-main{grid-template-columns:1fr}
  .row-grid{grid-template-columns:1fr}
  .three-grid{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(4,1fr)}
  .top20-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .clips-grid{grid-template-columns:repeat(2,1fr)}
  .hero-artist{width:45%;opacity:.55}
  .nav-actions{margin-left:auto}
  .topbar{gap:14px}
}
@media(max-width:520px){
  .topbar{padding:12px 14px;gap:10px}
  .wrap{padding:0 12px}
  .nav-menu{top:58px}
  .logo{font-size:1.1rem}
  .logo-icon{width:32px;height:32px;font-size:.8rem}
  .logo-text .l1{font-size:.85rem}
  .logo-text .l2{font-size:1.1rem}
  .login-btn{padding:8px 12px;font-size:.78rem}
  .vote-cta-btn{padding:8px 14px;font-size:.78rem;animation:none}
  .vote-cta-btn .label-long{display:none}
  .cats{grid-template-columns:repeat(2,1fr);gap:8px}
  .clips-grid{grid-template-columns:1fr}
  .hero-main{padding:30px 20px;min-height:auto}
  .hero-content h1{font-size:1.8rem}
  .hero-content p{font-size:.95rem}
  .challenge-mid h2{font-size:1.6rem}
  .challenge-img{width:50%;opacity:.6}
  .site-footer{flex-direction:column;align-items:flex-start;text-align:left}
}