:root {

    --primary-blue: #0D6EFD;
    --dark-blue: #082B66;
    --green: #28C76F;
    --light-green: #EAF9F0;

    --text-dark: #172B4D;
    --text-light: #64748B;

    --background: #FFFFFF;
    --soft-background: #F7FAFF;

    --border: #E5EAF2;

    --radius: 18px;

    --shadow:
        0 15px 40px rgba(15, 45, 90, .08);

}


* {

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

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:
        "Poppins",
        "Inter",
        Arial,
        sans-serif;

    color:var(--text-dark);

    background:
        var(--background);

    line-height:1.7;

}




.container {

    width:min(1180px, 92%);

    margin:auto;

}





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


header {

    position:sticky;

    top:0;

    background:white;

    z-index:100;

    border-bottom:
    1px solid var(--border);

}



.nav {

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.brand {

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:var(--dark-blue);

    font-size:24px;

    font-weight:700;

}



.brand img {

    width:45px;

    height:45px;

}



nav {

    display:flex;

    gap:28px;

}



nav a {

    text-decoration:none;

    color:var(--text-light);

    font-weight:500;

}


nav a:hover {

    color:var(--primary-blue);

}







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


.hero {

    padding:

    100px 0 80px;

    background:

    linear-gradient(
        135deg,
        #FFFFFF,
        #EEF7FF
    );

}


.hero-grid {

    display:grid;

    grid-template-columns:

    1fr 1fr;

    align-items:center;

    gap:60px;

}



.hero h1 {


    font-size:

    clamp(42px,5vw,64px);


    line-height:

    1.15;

    margin-bottom:25px;

}


.hero h1 span {

    color:var(--green);

}



.hero p {


    font-size:19px;

    color:var(--text-light);

    max-width:560px;

    margin-bottom:35px;

}



.hero-buttons {

    display:flex;

    gap:18px;

    margin-bottom:35px;

}



.btn {


    display:inline-block;

    padding:

    15px 30px;


    border-radius:50px;


    text-decoration:none;


    font-weight:600;

    transition:.3s;

}



.primary {

    background:

    var(--primary-blue);

    color:white;

}



.primary:hover {

    background:

    var(--dark-blue);

}




.secondary {

    border:

    2px solid var(--primary-blue);

    color:var(--primary-blue);

}



.secondary:hover {

    background:

    var(--primary-blue);

    color:white;

}




.trust-items {


    display:flex;

    flex-wrap:wrap;

    gap:15px;


}


.trust-items div {


    background:white;

    padding:

    10px 18px;


    border-radius:50px;


    box-shadow:var(--shadow);


    font-size:14px;

}




.hero-image img {


    width:100%;

    max-width:560px;


    animation:

    float 6s infinite ease-in-out;


}




@keyframes float {


    50% {

        transform:translateY(-15px);

    }


}







/* ==========================
SECTIONS
========================== */


section {


    padding:

    90px 0;


}




section h2 {


    text-align:center;


    font-size:

    clamp(30px,4vw,42px);


    margin-bottom:25px;


}



section p {


    color:

    var(--text-light);


}






/* ==========================
PROBLEM
========================== */


.problem {


    background:

    var(--soft-background);

}



.problem p {


    max-width:850px;

    text-align:center;

    margin:auto;

    font-size:20px;

}







/* ==========================
FEATURES
========================== */


.feature-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


    margin-top:50px;


}



.card {


    background:white;


    padding:35px;


    border-radius:var(--radius);


    box-shadow:var(--shadow);


    text-align:center;


    border:

    1px solid var(--border);


    transition:.3s;


}




.card:hover {


    transform:

    translateY(-8px);


}




.card img {


    width:100px;


    height:100px;


    margin-bottom:25px;


}



.card h3 {


    margin-bottom:15px;


    font-size:22px;


}






/* ==========================
STEPS
========================== */


.steps {


    background:

    #F8FBFF;


}



.steps-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:40px;


    margin-top:50px;


}



.steps-grid div {


    text-align:center;


}



.steps-grid span {


    width:60px;


    height:60px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:auto;


    background:

    var(--primary-blue);


    color:white;


    border-radius:50%;


    font-size:25px;


    font-weight:bold;


}





/* ==========================
PRIVACY
========================== */


.privacy {


    background:

    linear-gradient(
    135deg,
    #082B66,
    #0D6EFD
    );


    color:white;


}




.privacy h2 {


    color:white;


}



.privacy p {


    color:#E6EFFC;


    text-align:center;


    max-width:800px;


    margin:auto;


}



.privacy ul {


    margin:

    35px auto;


    max-width:500px;


    list-style:none;


}



.privacy li {


    padding:12px;


    font-size:18px;


}



.privacy li::before {


    content:"✓ ";

    color:#8DFFB5;


}





/* ==========================
DOWNLOAD
========================== */


.stores {


    display:flex;


    justify-content:center;


    gap:25px;


    margin-top:30px;


}



.stores img {


    height:55px;


}







/* ==========================
SUPPORT
========================== */


.support {


    text-align:center;


    background:

    var(--soft-background);


}








/* ==========================
CONTACT
========================== */


.social {


    display:flex;


    justify-content:center;


    gap:20px;


    margin-top:30px;


}



.social a {


    color:var(--primary-blue);


    text-decoration:none;


    font-weight:600;


}






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


footer {


    background:

    #061B3A;


    color:white;


    padding:35px 0;


}



footer .container {


    display:flex;


    justify-content:space-between;


}



footer a {


    color:white;


    margin-left:20px;


}






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


@media(max-width:900px){



.nav {

    flex-direction:column;

    height:auto;

    padding:20px;

}



nav {

    display:none;

}



.hero-grid {


    grid-template-columns:1fr;


    text-align:center;


}



.hero p {


    margin:auto auto 35px;


}



.hero-buttons {


    justify-content:center;


}



.feature-grid,


.steps-grid {


    grid-template-columns:1fr;


}



footer .container {


    flex-direction:column;

    gap:20px;

    text-align:center;


}



}