*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial,sans-serif;
  background:#0B1120;
  color:white;
  overflow-x:hidden;
}

.container{
  width:90%;
  max-width:1400px;
  margin:auto;
}

.animated-bg{
  position:fixed;
  width:100%;
  height:100%;
  z-index:-1;
  background:
  radial-gradient(circle at 20% 20%, rgba(165,0,79,.35), transparent 30%),
  radial-gradient(circle at 80% 30%, rgba(255,212,59,.18), transparent 25%),
  radial-gradient(circle at 40% 80%, rgba(100,100,255,.15), transparent 30%),
  #0B1120;
  animation: gradientMove 12s ease infinite alternate;
}

@keyframes gradientMove{
  from{transform:scale(1);}
  to{transform:scale(1.08) translate(-30px,-20px);}
}

header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(15px);
}

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 0;
}

.logo{
  width:140px;
}

nav ul{
  display:flex;
  gap:30px;
  list-style:none;
}

nav a{
  color:white;
  text-decoration:none;
}

button{
  background:linear-gradient(90deg,#A5004F,#D10066);
  border:none;
  padding:14px 24px;
  color:white;
  border-radius:12px;
  cursor:pointer;
}

.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
}

.hero h1{
  font-size:58px;
  margin-bottom:20px;
}

.hero p{
  font-size:20px;
  line-height:1.8;
  margin-bottom:20px;
}

.hero-image img{
  width:80%;
  animation: glowPulse 3s infinite ease-in-out;
}

@keyframes glowPulse{
  0%,100%{
    transform:scale(1);
    filter:drop-shadow(0 0 10px rgba(165,0,79,.4));
  }
  50%{
    transform:scale(1.05);
    filter:drop-shadow(0 0 30px rgba(165,0,79,.9));
  }
}

.services{
  padding:100px 0;
}

.services h2{
  text-align:center;
  font-size:42px;
  margin-bottom:50px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.card{
  position:relative;
  background:rgba(255,255,255,.04);
  padding:30px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  transition:.5s;
}

.card:hover{
  transform:perspective(1000px) rotateX(6deg) rotateY(-6deg) translateY(-10px);
  box-shadow:0 20px 40px rgba(165,0,79,.25);
}

.stats{
  display:flex;
  justify-content:space-around;
  padding:80px 0;
}

.stat{
  text-align:center;
}

.stat h3{
  font-size:50px;
  color:#FFD43B;
}

footer{
  text-align:center;
  padding:60px 0;
  background:rgba(255,255,255,.04);
}

.reveal{
  animation: revealText 1.2s ease forwards;
}

@keyframes revealText{
  from{
    opacity:0;
    transform:translateY(60px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.hidden{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s ease;
}

.show{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:768px){
  .hero{
    grid-template-columns:1fr;
    text-align:center;
  }

  .cards{
    grid-template-columns:1fr;
  }

  nav ul{
    display:none;
  }
}