/* ==========================
 GLOBAL STYLE
========================== */


*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:'Inter',sans-serif;

scroll-behavior:smooth;

}



body{

background:#0f0c29;

color:white;

overflow-x:hidden;

}



img{

max-width:100%;

display:block;

}



section{

position:relative;

}




/* ==========================
 TRUSTED BRANDS
========================== */


.trusted{

padding:80px 5%;

text-align:center;

background:#0b0920;

}



.trusted h3{

font-size:20px;

color:#bdbdbd;

margin-bottom:40px;

font-weight:500;

}



.brand-list{


max-width:1000px;

margin:auto;

display:flex;

justify-content:space-around;

align-items:center;

gap:30px;

flex-wrap:wrap;


}



.brand-list div{


font-size:22px;

font-weight:700;

color:#ffffff;

opacity:.6;

transition:.6s;


}



.brand-list div:hover{


opacity:0;

transform:translateY(-8px);


color:#6c63ff;


}


.trusted .brand-list{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
}

.trusted .brand-list div{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    color:#f5f0f0 !important;
}




/* ==========================
 STATS SECTION
========================== */


.stats{


padding:90px 5%;


max-width:1200px;

margin:auto;


display:grid;

grid-template-columns:repeat(4,1fr);


gap:30px;


}




.stat-box{


padding:40px 25px;


text-align:center;


background:

rgba(255,255,255,.08);


border:1px solid rgba(255,255,255,.15);


backdrop-filter:blur(20px);


border-radius:25px;


transition:.4s;


}



.stat-box:hover{


transform:translateY(-10px);


background:

rgba(255,255,255,.12);


}




.stat-box h2{


font-size:50px;

font-weight:800;


background:

linear-gradient(
90deg,
#6c63ff,
#00d4ff
);


-webkit-background-clip:text;

color:transparent;


}



.stat-box p{


margin-top:10px;

color:#ccc;

font-size:15px;


}







/* ==========================
 ANIMATION HELPERS
========================== */


.fade-up{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}



.fade-up.active{


opacity:1;

transform:translateY(0);


}





.hidden{

display:none;

}



/* SCROLL ANIMATION */

.hero-content,
.dashboard-card,
.floating-card,
.stat-box,
.brand-list div{


opacity:0;

transform:translateY(40px);

transition:0.8s ease;


}


.show{


opacity:1;

transform:translateY(0);


}



/* MOBILE MENU ACTIVE */


@media(max-width:992px){


.nav-menu.active{


display:flex;

position:absolute;

top:90px;

left:0;

width:100%;


flex-direction:column;

align-items:center;


padding:30px;


background:rgba(15,12,41,.95);


border-radius:20px;


}



}
/* ==========================
 CARD REVEAL ANIMATION
========================== */


.service-card,
.project-card{


opacity:0;

transform:translateY(50px);


transition:

opacity .8s ease,

transform .8s ease;


}



.service-card.show,
.project-card.show{


opacity:1;

transform:translateY(0);


}






/* STAGGER EFFECT */


.service-card:nth-child(2){

transition-delay:.1s;

}


.service-card:nth-child(3){

transition-delay:.2s;

}


.service-card:nth-child(4){

transition-delay:.3s;

}


.service-card:nth-child(5){

transition-delay:.4s;

}


.service-card:nth-child(6){

transition-delay:.5s;

}
/* ==========================
 GLOBAL REVEAL EFFECT
========================== */


.about-image,
.about-content,
.mission-box div,
.feature-card,
.process-item{


opacity:0;

transform:translateY(50px);


transition:.8s ease;


}



.about-image.show,
.about-content.show,
.mission-box div.show,
.feature-card.show,
.process-item.show{


opacity:1;

transform:translateY(0);


}




/* DELAY EFFECT */


.feature-card:nth-child(2){

transition-delay:.15s;

}


.feature-card:nth-child(3){

transition-delay:.3s;

}


.process-item:nth-child(2){

transition-delay:.15s;

}


.process-item:nth-child(3){

transition-delay:.3s;

}


.process-item:nth-child(4){

transition-delay:.45s;

}