*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',Arial,sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:#ffffff;
    color:#1d1d1f;
    line-height:1.6;

}


.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}


/* ================= HEADER ================= */


header{

    position:sticky;
    top:0;
    z-index:999;

    background:rgba(255,255,255,0.85);

    backdrop-filter:blur(20px);

    border-bottom:1px solid #e5e7eb;

}


.nav{

    height:80px;

    display:flex;
    align-items:center;
    justify-content:space-between;

}


.logo{

    font-size:32px;
    font-weight:800;
    color:#0071e3;
    letter-spacing:-1px;

}


nav a{

    text-decoration:none;
    color:#333;

    margin-left:35px;

    font-size:16px;
    font-weight:500;

    transition:.3s;

}


nav a:hover{

    color:#0071e3;

}


.menu{

    display:none;

}



/* ================= HERO ================= */


.hero{

    min-height:90vh;

    display:flex;
    align-items:center;

    background:

    radial-gradient(
        circle at top right,
        #dff3ff,
        transparent 35%
    ),

    linear-gradient(
        180deg,
        #ffffff,
        #f5faff
    );

}



.hero-content{

    display:grid;

    grid-template-columns:1fr 400px;

    gap:70px;

    align-items:center;

}



.hero h1{

    font-size:64px;

    line-height:1.1;

    letter-spacing:-2px;

    font-weight:800;

    background:

    linear-gradient(
        90deg,
        #0071e3,
        #00b4ff
    );

    -webkit-background-clip:text;

    color:transparent;

}



.hero p{

    margin-top:25px;

    font-size:20px;

    color:#555;

    max-width:650px;

}



.hero-buttons{

    margin-top:40px;

    display:flex;

    gap:20px;

}



.primary-btn,
.secondary-btn{

    padding:15px 35px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.primary-btn{

    background:#0071e3;

    color:white;

}



.secondary-btn{

    border:2px solid #0071e3;

    color:#0071e3;

}



.primary-btn:hover,
.secondary-btn:hover{

    transform:translateY(-5px);

}



.hero-card{


    padding:50px 30px;

    border-radius:35px;


    background:

    rgba(255,255,255,.7);


    backdrop-filter:blur(20px);


    border:1px solid #e5e7eb;


    box-shadow:

    0 25px 60px rgba(0,0,0,.08);


    text-align:center;

}



.hero-card h3{

    font-size:28px;

    color:#0071e3;

}




/* ================= COMMON SECTION ================= */


section{

    padding:100px 0;

}



section h2{

    width:100%;

    text-align:center;

    font-size:48px;

    font-weight:700;

    letter-spacing:-1px;

    color:#0071e3;

    margin-bottom:30px;

}



.center-text{

    max-width:850px;

    margin:auto;

    text-align:center;

    font-size:18px;

    color:#555;

}





/* ================= ABOUT ================= */



.about-grid{

    margin-top:60px;

    display:grid;

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

    gap:30px;

}



.info-box{


    padding:40px;


    background:white;


    border-radius:25px;


    border:1px solid #e5e7eb;


    box-shadow:

    0 20px 40px rgba(0,0,0,.06);


    transition:.4s;


}



.info-box:hover{

    transform:translateY(-8px);

}



.info-box h3{

    color:#0071e3;

    margin-bottom:15px;

}







/* ================= SOLUTIONS ================= */


.light{

    background:#f7fbff;

}



.cards{

    margin-top:60px;

    display:grid;

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

    gap:30px;

}



.card{


    background:white;


    padding:40px 25px;


    border-radius:30px;


    text-align:center;


    border:1px solid #e5e7eb;


    box-shadow:

    0 15px 40px rgba(0,0,0,.05);


    transition:.4s;

}



.card:hover{

    transform:translateY(-10px);

}



.icon{

    font-size:45px;

    margin-bottom:20px;

}



.card h3{

    color:#0071e3;

    margin-bottom:15px;

}





/* ================= PRODUCTS ================= */



.products{


    margin-top:60px;


    display:grid;

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


    gap:30px;

}



.product{


    padding:35px;


    background:white;


    border-radius:25px;


    border:1px solid #e5e7eb;


    box-shadow:

    0 15px 35px rgba(0,0,0,.06);


    transition:.3s;

}



.product:hover{

    transform:scale(1.04);

}



.product h3{

    color:#0071e3;

    margin-bottom:15px;

}





/* ================= WHY CHOOSE ================= */



.dark{


    background:#f8fbff;

    color:#111;

}



.dark h2{

    color:#0071e3;

}



.stats{


    margin-top:60px;


    display:grid;


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


    gap:30px;

}



.stats div{


    background:white;


    padding:45px 25px;


    text-align:center;


    border-radius:30px;


    border:1px solid #e5e7eb;


    box-shadow:

    0 20px 40px rgba(0,0,0,.06);


    transition:.4s;


}



.stats div:hover{

    transform:translateY(-10px);

}



.stats h3{


    font-size:38px;

    color:#0071e3;

    margin-bottom:15px;


}



.stats p{

    color:#555;

}






/* ================= FOOTER ================= */


footer{


    background:#050505;


    color:white;


    text-align:center;


    padding:80px 0;


}



footer h2{

    color:white;

}


footer p{

    margin:10px;

}




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


.card,
.product,
.info-box,
.stats div{


    animation:fade .7s ease;

}



@keyframes fade{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}


}





/* ================= MOBILE ================= */


@media(max-width:900px){


.hero-content{

    grid-template-columns:1fr;

}


.hero h1{

    font-size:42px;

}


.cards,
.products{

    grid-template-columns:1fr 1fr;

}


.about-grid{

    grid-template-columns:1fr;

}


.stats{

    grid-template-columns:1fr 1fr;

}


}



@media(max-width:600px){


nav{

    display:none;

}


.menu{

    display:block;

}


.hero h1{

    font-size:34px;

}


.cards,
.products,
.stats{

    grid-template-columns:1fr;

}


section{

    padding:70px 0;

}


}