/* ===== CLASSICIPOFF ULTRA PREMIUM PACK ===== */

:root{
  --primary:#4f5dff;
  --dark:#050505;
  --card:#0b0d16;
}

/* BACKGROUND */
body{
  background:linear-gradient(180deg,#050505,#080b1d,#050505)!important;
  color:white!important;
  overflow-x:hidden;
}

/* GLOW BACKGROUND */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(79,93,255,.18), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(79,93,255,.12), transparent 30%);
  z-index:-1;
}

/* NAVBAR */
nav{
  backdrop-filter:blur(18px);
  background:rgba(5,5,5,.75)!important;
  border-bottom:1px solid rgba(79,93,255,.15);
}

/* HERO */
h1{
  font-size:4rem!important;
  font-weight:900!important;
  text-transform:uppercase;
  background:linear-gradient(90deg,#fff,#6d79ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* CARDS */
.card,
.product-card,
.feature-card{
  background:rgba(11,13,22,.85)!important;
  backdrop-filter:blur(18px);
  border:1px solid rgba(79,93,255,.2)!important;
  border-radius:22px!important;
  transition:.4s ease;
  opacity:0;
  transform:translateY(20px);
  animation:fadeIn .6s forwards;
}

.card:hover,
.product-card:hover,
.feature-card:hover{
  transform:translateY(-10px);
  box-shadow:0 0 35px rgba(79,93,255,.4);
}

/* BUTTONS */
button,
.btn{
  background:linear-gradient(135deg,#4f5dff,#6d79ff)!important;
  border:none!important;
  border-radius:14px!important;
  font-weight:700!important;
  transition:.3s;
}

button:hover,
.btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(79,93,255,.5);
}

/* PRODUCT HOVER LIGHT EFFECT */
.product-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transition:.6s;
}

.product-card:hover::before{
  left:100%;
}

/* BADGE */
.badge-premium{
  position:absolute;
  top:10px;
  right:10px;
  background:var(--primary);
  padding:5px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:bold;
}

/* STATS */
.stats-card{
  background:rgba(79,93,255,.08)!important;
  border-radius:18px;
}

/* FAQ */
details{
  background:rgba(11,13,22,.9);
  padding:15px;
  border-radius:12px;
}

/* FOOTER */
footer{
  border-top:1px solid rgba(79,93,255,.15);
}

/* SCROLLBAR */
::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-thumb{
  background:#4f5dff;
  border-radius:10px;
}

/* ANIMATION */
@keyframes fadeIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* MOBILE */
@media(max-width:768px){
  h1{
    font-size:2.5rem!important;
  }
}
<script>
window.addEventListener("scroll", () => {
  document.querySelectorAll(".card, .product-card, .feature-card").forEach(el => {
    const pos = el.getBoundingClientRect().top;
    if(pos < window.innerHeight - 80){
      el.style.opacity = "1";
      el.style.transform = "translateY(0)";
    }
  });
});
</script>