*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Poppins",sans-serif;
  background:linear-gradient(180deg,#B400FF,#F7FFFD);
  color:#222;text-align:center;overflow-x:hidden;
}

/* ANIMATION PRESETS */
.fade-in{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}
.slide-down{animation:slideDown 1.2s ease forwards;}
.zoom-in{animation:zoomIn 1.2s ease forwards;}
@keyframes slideDown{0%{transform:translateY(-60px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
@keyframes zoomIn{0%{transform:scale(0.8);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* HEADER */
.header-gradient{
  background:linear-gradient(180deg,#B400FF 0%,#F7FFFD 40%,#ffd6e6 100%);
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  position:relative;
  box-shadow:0 2px 10px rgba(0,0,0,0.2);
  overflow:hidden;
}
.header-gradient::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;
  background:radial-gradient(circle at center,rgba(255,255,255,0.3),transparent 70%);
  animation:pulseGlow 4s infinite ease-in-out;
}
@keyframes pulseGlow{0%,100%{opacity:.5;}50%{opacity:1;}}

/* NAVBAR CENTER */
.navbar{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:25px;
  padding:18px 0;
  z-index:10;
}
.navbar a{
  color:#fff;text-decoration:none;font-weight:600;
  padding:8px 16px;border-radius:10px;
  transition:.3s;opacity:0;animation:fadeInMenu 1.5s ease forwards;
}
.navbar a:nth-child(1){animation-delay:.2s;}
.navbar a:nth-child(2){animation-delay:.3s;}
.navbar a:nth-child(3){animation-delay:.4s;}
.navbar a:nth-child(4){animation-delay:.5s;}
.navbar a:nth-child(5){animation-delay:.6s;}
.navbar a:nth-child(6){animation-delay:.7s;}
.navbar a:nth-child(7){animation-delay:.8s;}
@keyframes fadeInMenu{to{opacity:1;transform:translateY(0);}}
.navbar a:hover{background:rgba(255,255,255,0.3);}

/* LOGO */
.header-logo{
  position:relative;
  top:100px;
  z-index:1;
}
.header-logo img{
  width:240px;
  border-radius:25px;
  filter:drop-shadow(0 0 35px rgba(255,182,193,0.8));
  animation:float 3s ease-in-out infinite;
}

/* SIDEBAR (MOBILE MENU) */
.menu-toggle{
  display:none;
  position:fixed;top:15px;left:15px;font-size:28px;
  background:none;border:none;color:#fff;
  z-index:1100;cursor:pointer;
}
.sidebar{
  position:fixed;top:0;left:-260px;width:240px;height:100%;
  background:linear-gradient(to bottom,#B400FF,#F7FFFD);
  transition:left .3s ease;box-shadow:2px 0 10px rgba(0,0,0,.3);
  z-index:1050;padding-top:60px;
}
.sidebar.show{left:0;}
.sidebar a{
  display:block;color:#fff;padding:15px 25px;text-align:left;
  font-weight:bold;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.2);
}
.sidebar a:hover{background:#ffccff;color:#000;}

/* VIEW RANKS */
.viewranks-section{
  max-width:1200px;width:100%;margin:80px auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.viewranks-section .title{
  font-size:clamp(28px,4vw,42px);font-weight:800;color:#111;margin-bottom:30px;
}
.grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:25px;justify-items:center;transition:all 0.5s ease;
}
.card{
  background:#fff;border-radius:16px;padding:18px;border:1px solid #ddd;
  box-shadow:0 0 15px rgba(0,0,0,0.05);
  transition:transform .4s ease,box-shadow .4s ease;
}
.card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 0 25px rgba(0,0,0,0.15);}
.kit-img{width:100%;border-radius:12px;border:1px solid #eee;}
.rank-name{font-weight:900;margin:10px 0 4px;font-size:20px;}
.feature{
  background:#fafafa;padding:8px 12px;border-radius:8px;
  border:1px solid #eee;margin:6px 0;text-align:left;font-weight:600;
}

/* RANK COLORS */
.vip{box-shadow:0 0 15px #FBFF6C77;border-color:#FBFF6Caa;}
.vip .rank-name,.vip .feature{color:#E1C900;}
.mvp{box-shadow:0 0 15px #00E6FE77;border-color:#00E6FEaa;}
.mvp .rank-name,.mvp .feature{color:#00BFFF;}
.king{box-shadow:0 0 15px #B400FF;border-color:#F7FFFD;}
.king .rank-name,.king .feature{color:#B400FF;}

/* FOOTER */
footer{
  background:linear-gradient(180deg,#B400FF,#F7FFFD);
  color:#fff;text-align:center;padding:30px 10px;
  line-height:1.8;font-size:14px;border-top:2px solid #B400FF;
}
footer a{color:#F7FFFD;text-decoration:none;}
.social-icons{display:flex;justify-content:center;gap:20px;margin:15px 0;}
.social-icons img{width:40px;height:40px;border-radius:50%;transition:.3s;}
.social-icons img:hover{transform:scale(1.2);}

/* RESPONSIVE */
@media(max-width:768px){
  .navbar{display:none;}
  .menu-toggle{display:block;}
  .sidebar{display:block;}
  .grid{grid-template-columns:1fr;width:100%;padding:0 10px;}
  .header-logo{top:80px;}
}