body{

    font-family:Segoe UI, sans-serif;

    background:#f8fafc;

}

.hero{

    padding:100px 0;

    background:linear-gradient(135deg,#ffffff,#eef5ff);

}

.hero-logo{

    max-width:380px;

}

.system-card{

    transition:.3s;

    border-radius:15px;

}

.system-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.1)!important;

}

.system-logo{

    width:70px;

    height:70px;

    object-fit:contain;

}

.badge{

    font-size:.85rem;

}

.feature-box{

background:#fff;

padding:30px;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

height:100%;

}

.feature-box:hover{

transform:translateY(-8px);

}

.stats-section{

background:#0d6efd;

color:#fff;

}

.counter{

font-size:3rem;

font-weight:bold;

}

.footer{

margin-top:0;

}

.footer a:hover{

color:#0d6efd !important;

}

html{

scroll-behavior:smooth;

}

#topBtn{

position:fixed;

bottom:25px;

right:25px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#0d6efd;

color:white;

display:none;

z-index:999;

}

#topBtn.show{

display:block;

}

.dark{

background:#121212;

color:white;

}

.dark .card{

background:#1f1f1f;

color:white;

}

.dark .navbar{

background:#212529!important;

}

.dark .feature-box{

background:#252525;

color:white;

}

.dark .footer{

background:#000;

}

#loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    transition:opacity .5s ease;
}

#loader.hide{
    opacity:0;
    visibility:hidden;
}

.system-card{

overflow:hidden;

transition:.35s;

cursor:pointer;

}

.system-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.15)!important;

}

.system-card img{

transition:.4s;

}

.system-card:hover img{

transform:scale(1.08);

}