*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
body{background:#05060f;color:white;overflow-x:hidden}

/* animated background */
.bg-lines{
position:fixed;inset:0;z-index:-1;
background:
radial-gradient(circle at 50% 40%, rgba(140,0,255,.25), transparent 40%),
linear-gradient(120deg,transparent 48%, rgba(255,255,255,.05) 50%, transparent 52%),
linear-gradient(60deg,transparent 48%, rgba(255,255,255,.05) 50%, transparent 52%);
background-size:100% 100%,800px 800px,700px 700px;
animation:move 18s linear infinite;
}
@keyframes move{0%{background-position:0 0,0 0,0 0}100%{background-position:0 0,800px 800px,-700px 700px}}

/* floating particles */
.dot{position:fixed;width:6px;height:6px;border-radius:50%;background:#4ddcff;box-shadow:0 0 12px #4ddcff;animation:float 6s linear infinite}
@keyframes float{0%{transform:translateY(0);opacity:.2}50%{opacity:1}100%{transform:translateY(-900px);opacity:.2}}

/* menu */
.menu{position:fixed;right:30px;top:30px;width:55px;height:55px;border-radius:50%;background:linear-gradient(135deg,#00d4ff,#ff00ff);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 25px rgba(255,0,255,.5)}
.menu span,.menu span:before,.menu span:after{width:22px;height:2px;background:#000;display:block;position:relative;content:""}
.menu span:before{position:absolute;top:-6px}.menu span:after{position:absolute;top:6px}

.panel{position:fixed;top:95px;right:30px;width:200px;background:#0c0f22;border-radius:18px;padding:15px 0;display:flex;flex-direction:column;gap:5px;opacity:0;transform:translateY(-15px);pointer-events:none;transition:.25s;box-shadow:0 0 30px rgba(255,0,255,.25)}
.panel.open{opacity:1;transform:translateY(0);pointer-events:auto}
.panel a{color:#cfd3ff;text-decoration:none;padding:12px 20px}
.panel a:hover{background:linear-gradient(90deg,#00d4ff22,#ff00ff22);color:white}

/* hero */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}
.avatar{
  width:150px;
  height:150px;
  margin:auto;
  border-radius:50%;
  padding:6px;
  background:linear-gradient(135deg,#00d4ff,#ff00ff);
  /* box-shadow:0 0 60px rgba(160,0,255,.9); */
     box-shadow:
    0 0 10px #8fd3ff,
    0 0 25px #6bbcff,
    0 0 50px #4aa3ff,
    0 0 90px rgba(74,163,255,.4),
    0 0 140px rgba(74,163,255,.40),
    0 0 220px rgba(74,163,255,.20);
   
}
.avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}
.title{
  margin-top:30px;
  font-size:64px;
  font-weight:800;
  background:linear-gradient(90deg,#3fd0ff,#ff00ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.subtitle{
  margin-top:18px;
  font-size:20px;
  color:#b9b9c9;
  font-weight: bold;
   
}


.buttons{margin-top:40px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.btn{
  padding:25px 32px;
  border-radius:40px;
  font-weight:700;
  border:none;
  color:white;
  background:linear-gradient(135deg,#0f3b4f,#4d1c5c);
  box-shadow:0 0 20px rgba(255,0,255,.3);
  cursor:pointer;
  transition:.25s;
  font-size: 18px;
  
} 
i{
  font-size: 20px;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(255,0,255,.7)}

/* stats */
.stats{
  display:flex;
  justify-content:center;
  padding:120px 20px;
}
.stats-box{
  width:1100px;
  max-width:95%;
  background:rgba(18,20,40,.55);
  border-radius:28px;
  padding:70px 80px;
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-columns:repeat(3,1fr);gap:70px 60px;
}
.stat{
  text-align:center;
}
.stat h2{
  font-size:64px;
  font-weight:800;
  background:linear-gradient(90deg,#b3ff4a,#3cffd0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.stat p{
  margin-top:12px;
  font-size:20px;
  color:#a4a7c3;
}
.stat:nth-child(4){
  grid-column:1/4;
}

/* about */
.about{
  padding:90px 20px;
  text-align:center;
  max-width:1100px;
  margin:auto;
}
.about-title{
  font-size:50px;
  font-weight:800;
  background:linear-gradient(90deg,#3fd0ff,#b86cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.about-text{
  margin-top:30px;
  color:white;
  font-size:20px;
  line-height:1.8;
}
.growth-title{
  margin-top:90px;
  font-size:45px;
  font-weight:800;
  background:linear-gradient(90deg,#35d0ff,#b86cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.growth-grid{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.growth-card{
  background:rgba(18,20,40,.55);
  border-radius:22px;
  padding:28px 30px;
  text-align:left;
  font-size:20px;
  color:#e5e8ff;
  border-left:4px solid #39d5ff;
  transition:.25s;
}
.growth-card:hover{
  transform:translateY(-6px);
  box-shadow:0 0 30px rgba(0,255,255,.2);
}
.spicfic-color{
  font-weight: bold;
  color: white;
}

/* results */
.results{
  /* padding:140px 20px; */
  text-align:center;
  max-width:1200px;
  margin:auto;
}
.results-title{
  font-size:44px;
  font-weight:700;
  margin-bottom:70px;
  background:linear-gradient(90deg,#2bbcff 0%,
#5f7cff 25%,#9c7cff 50%,
#d7ff4f 100%);-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;}
.results-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}
.result-card{
  background:rgba(18,20,40,.55);
  border-radius:28px;
  padding:60px 40px;
  border:1px solid rgba(255,255,255,.08);
  transition:.3s;
}
.result-card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 40px rgba(0,255,255,.18);
}
.result-card .icon{
  font-size:40px;
  margin-bottom:20px;
}
.result-card h3{
  color:#35d0ff;
  font-size:28px;
  margin-bottom:15px;
}
.result-card p{
  color:#cfd3ff;
  font-size:20px;
  line-height:1.7;
}
.result-card:nth-child(3){grid-column:1/3}
/* CTA SECTION */
.cta{
  padding:160px 20px 80px;
  text-align:center;
}

.cta-box{
  max-width:1100px;
  margin:auto;
  padding:80px 40px;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(0,170,255,.15),rgba(255,0,200,.15));
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 60px rgba(100,0,255,.15);
}

.cta-title{
  font-size:64px;
  font-weight:800;
  margin-bottom:25px;
}
.cta-title span{
  background:linear-gradient(90deg,#3fd0ff,#ff00ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.cta-text{
  color:#d2d6ff;
  font-size:20px;
  line-height:2;
  max-width:800px;
  margin:20px auto 50px;
}

.cta-buttons{
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
}

.cta-btn{
  padding:18px 38px;
  border-radius:40px;
  text-decoration:none;
  color:white;
  font-weight:600;
  background:linear-gradient(135deg,#123b54,#5b1d6a);
  box-shadow:0 0 25px rgba(255,0,255,.25);
  transition:.25s;
  font-size: 20px;
}
.cta-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 0 40px rgba(255,0,255,.6);
}

.footer{
  margin-top:60px;
  color:#8b8fb3;
  font-size:16px;
}




/* responsive */
@media(max-width:900px){
.stats-box,.growth-grid,.results-grid{grid-template-columns:1fr}
.stat:nth-child(4),.result-card:nth-child(3){grid-column:auto}
.title{font-size:42px}
@media(max-width:900px){
  .cta-title{font-size:42px}
}
}
/* ===== STATS RESPONSIVE ===== */

/* tablet */
@media (max-width:1024px){

  .stats{
    padding:80px 18px;
  }

  .stats-box{
    grid-template-columns:repeat(2,1fr);
    gap:50px 30px;
    padding:50px 35px;
  }

  .stat:nth-child(4){
    grid-column:1/3;
  }

  .stat h2{
    font-size:48px;
  }

  .stat p{
    font-size:18px;
  }
}


/* mobile */
@media (max-width:600px){

  .stats{
    padding:70px 15px;
  }

  .stats-box{
    grid-template-columns:1fr;
    padding:40px 22px;
    gap:38px;
    border-radius:22px;
  }

  .stat{
    padding:10px 0;
  }

  .stat:nth-child(4){
    grid-column:auto;
  }

  .stat h2{
    font-size:38px;
    line-height:1.2;
  }

  .stat p{
    font-size:16px;
    margin-top:8px;
  }

}