
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{background:#020617;color:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ===== NAVBAR ===== */
/*header{*/
/* position:fixed;top:0;left:0;width:100%;*/
/* background:rgba(10,14,30,.9);*/
/* backdrop-filter:blur(10px);*/
/* z-index:1000;*/
/*}*/
/*.nav{*/
/* display:flex;align-items:center;justify-content:space-between;*/
/* padding:15px 20px;*/
/*}*/
/*.logo{font-size:20px;font-weight:700;color:#00f7ff}*/
/*.menu{*/
/* display:flex;gap:25px;*/
/*}*/
/*.menu a{color:#fff;text-decoration:none;font-size:14px}*/
/*.menu a:hover{color:#38bdf8}*/

/*.menu-btn{display:none;font-size:26px;cursor:pointer}*/
/* nav a:hover{color:#38bdf8} */
/* Mobile */
/*@media(max-width:768px){*/
/* .menu{*/
/*  position:fixed;top:65px;right:-100%;*/
/*  flex-direction:column;*/
/*  background:#0b0f1a;*/
/*  width:250px;height:100vh;*/
/*  padding:30px;transition:.4s;*/
/* }*/
/* .menu.active{right:0}*/
/* .menu-btn{display:block}*/
/*}*/
/*logo*/
/* .ny-btn{*/
/*  margin-top:15px;*/
/*  display:inline-block;*/
/*  padding:10px 22px;*/
/*  background:linear-gradient(45deg,#FFD700,#ffb703);*/
/*  color:#000;*/
/*  font-weight:700;*/
/*  border-radius:30px;*/
/*  text-decoration:none;*/
/*  box-shadow:0 6px 15px rgba(0,0,0,.4);*/
/*}*/
/*.logo img{height:px;background-color: #f8fafc;border-radius:90px;width:50px;*/
/*    height:50px;margin-left: 15px;color:#f8fafc;}*/
/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 20px;background:radial-gradient(circle at 20% 20%,#0ea5e9,transparent 40%),radial-gradient(circle at 80% 80%,#6366f1,transparent 40%),#020617}
.hero-grid{max-width:1200px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:46px;margin-bottom:15px}
.hero h1 span{color:#38bdf8}
.hero p{color:#cbd5f5;margin-bottom:25px}
.btn{display:inline-block;padding:12px 28px;border-radius:30px;border:none;cursor:pointer;font-weight:500;margin-right:10px}
.btn.primary{background:#38bdf8;color:#020617}
.btn.outline{border:1px solid #38bdf8;color:#38bdf8}

/* SECTIONS */
section{padding:80px 20px;max-width:1200px;margin:auto}
h2{text-align:center;font-size:36px;margin-bottom:10px}
.sub{text-align:center;color:#cbd5f5;margin-bottom:50px}

/* TRUST */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.trust-card{background:#020617;border:1px solid #1e293b;padding:30px;border-radius:16px;text-align:center;transition:.3s}
.trust-card:hover{transform:translateY(-10px) scale(1.03);border-color:#38bdf8}
.trust-card i{font-size:32px;color:#38bdf8;margin-bottom:10px}

/* SERVICES */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}
.service{background:#020617;border:1px solid #1e293b;border-radius:18px;padding:25px;text-align:center;transition:.3s}
.service:hover{transform:translateY(-10px);border-color:#38bdf8}
.service i{font-size:30px;color:#38bdf8;margin-bottom:10px}
.service .btn{margin-top:10px}
/* WHY */
.why{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.why ul li{margin:10px 0;color:#cbd5f5}
/* PORTFOLIO */
.portfolio{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.portfolio-card{background:#020617;border-radius:16px;overflow:hidden;border:1px solid #1e293b;text-align:center}
.portfolio-card a{display:inline-block;margin:10px}
/* FORM */
.form{max-width:600px;margin:auto;background:#020617;padding:40px;border-radius:20px}
.form input,.form select{width:100%;padding:12px;margin:10px 0;border-radius:8px;border:none}
/* TESTIMONIAL */
.testimonial{background:#020617;padding:40px;border-radius:20px;text-align:center}
/* FAQ */
.faq details{background:#020617;padding:15px;border-radius:10px;margin-bottom:10px}
@media(max-width:768px){.hero-grid,.why{grid-template-columns:1fr}.hero h1{font-size:34px}}
/* mockup code */
.hero-mockup{
  position: relative;
  display:flex;
  justify-content:center;
}
.laptop{
  width:340px;
  animation: float 4s ease-in-out infinite;
}
.screen{
  background:#000;
  padding:8px;
  border-radius:10px;
}
.screen img{
  width:100%;
  border-radius:6px;
  
  /* max-width: 100%;*/
  /*height: auto;*/
}
.base{
  width:80%;
  height:12px;
  background:#333;
  margin:8px auto 0;
  border-radius:0 0 10px 10px;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.growth{
  position:absolute;
  right:-20px;
  bottom:20px;
  background:rgba(0,0,0,.6);
  padding:12px;
  border-radius:12px;
  text-align:center;
  color:#38bdf8;
}
.growth .bar{
  display:inline-block;
  width:6px;
  margin:0 2px;
  background:#38bdf8;
  animation: grow 2s infinite;
}

.b1{height:10px}
.b2{height:18px;animation-delay:.3s}
.b3{height:26px;animation-delay:.6s}

@keyframes grow{
  0%{transform:scaleY(.4)}
  50%{transform:scaleY(1)}
  100%{transform:scaleY(.4)}
}

.arrow{
  font-size:20px;
}

@media(max-width:768px){
  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-mockup{
    margin-top:30px;
  }
}
/* Animated Growth */
.growth-box{
  background:#38bdf8;
  height:300px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.chart{
  display:flex;
  gap:10px;
  height:120px;
  align-items:flex-end;
}
.chart span{
  width:20px;
  background:#020617;
  height:0;
  border-radius:6px;
  animation: grow 2s ease forwards;
  animation-delay: calc(var(--i) * 0.3s);
}
.chart span:nth-child(1){--i:1}
.chart span:nth-child(2){--i:2}
.chart span:nth-child(3){--i:3}
.chart span:nth-child(4){--i:4}
@keyframes grow{
  to{
    height:var(--h);
  }
}
.arrow{
  position:absolute;
  right:30px;
  top:40px;
  font-size:40px;
  color:#020617;
  animation: updown 1.5s infinite;
}
@keyframes updown{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.growth-text{
  margin-top:20px;
  font-weight:600;
  color:#020617;
  letter-spacing:1px;
}

/*Ai section*/


