:root{
  --primary: 189 100% 52%;
  --secondary: 316 100% 54%;
}
*{box-sizing:border-box}
.bg-primary\/30 { background-color: hsl(var(--primary) / .30); }
.border-primary\/30 { border-color: hsl(var(--primary) / .30); }
.text-secondary{ color: hsl(var(--secondary)); }

/* Fancy nav pills */
.nav-pill{
  position:relative; padding:.55rem .9rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); color:#dbe7ff; text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 30px rgba(0,0,0,.25);
  margin:.2rem;
}
.nav-pill:hover{ color:white; border-color:rgba(255,255,255,.25) }
.nav-pill.is-active{
  color:white; border-color:transparent;
  background: radial-gradient(80% 120% at 20% 0%, rgba(0,255,255,.18), rgba(255,255,255,.04));
  box-shadow: 0 0 20px rgba(0,255,255,.15), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Glass cards */
.card-glass{
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border-radius: 1rem;
}

/* Slider */
.slider-wrap{ position: relative; overflow: hidden; border-radius: 1rem; }
.slider-track{ display: flex; transition: transform .5s ease; }
.slide{ position: relative; min-width: 100%; display:block; }
.slide img{ width:100%; height:420px; object-fit: cover; display:block; filter:saturate(1.1) contrast(1.05); }
.slide .overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg,rgba(4,7,12,.80), rgba(4,7,12,.35), rgba(4,7,12,0));
  display:flex; align-items:center; padding:2rem;
}
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2);
  width:44px; height:44px; border-radius:.75rem; display:grid; place-items:center;
}
.slider-btn.left{ left:10px } .slider-btn.right{ right:10px }
.dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; gap:.4rem; justify-content:center }
.dots button{ width:8px; height:8px; border-radius:999px; background:#8b8b8b; border:none }
.dots button[aria-current="true"]{ background:white }
@media (max-width:768px){
  .slide img{ height:260px }
}

/* Champion cards */
.champ-card{
  display:flex; gap:1rem; align-items:center; padding:1rem;
  border-radius:1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
}
.champ-card img{ width:72px; height:72px; object-fit:contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
.badge{ font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .5rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.25); color:#9ee3ff }