*{

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

}



body{

    font-family:"Roboto Thin", sans-serif;


    background:
            #020617;


    color:white;


    overflow-x:hidden;


}



body:before{

    content:"";

    position:fixed;

    width:700px;

    height:700px;


    background:
            radial-gradient(
                    circle,
                    #6366f1,
                    transparent 60%
            );


    filter:blur(120px);


    top:-300px;

    left:-200px;

    opacity:.5;

    z-index:-1;


}





nav{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:0 8%;


}



.logo{

    font-size:22px;

    font-weight:800;

}



.nav-btn{


    padding:12px 22px;

    border-radius:30px;


    background:white;

    color:black;

    text-decoration:none;


    font-weight:700;

}




.hero{

    min-height:90vh;

    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:60px 8%;


}



.hero-content{

    max-width:650px;

}




.badge{


    display:inline-block;

    padding:8px 18px;


    border-radius:30px;


    background:
            rgba(255,255,255,.1);


    margin-bottom:30px;

}




h1{

    font-size:

            clamp(45px,6vw,80px);


    line-height:1;


}



h1 span{


    background:
            linear-gradient(
                    90deg,
                    #38bdf8,
                    #818cf8,
                    #ec4899
            );


    -webkit-background-clip:text;

    color:transparent;


}



.hero p{

    font-size:20px;

    color:#94a3b8;

    margin:30px 0;


    line-height:1.6;

}



.buttons{

    display:flex;

    gap:15px;

}



.primary,
.secondary{


    padding:15px 30px;

    border-radius:15px;

    text-decoration:none;

    font-weight:700;


}



.primary{


    background:

            linear-gradient(
                    135deg,
                    #6366f1,
                    #ec4899
            );


    color:white;


}



.secondary{

    border:
            1px solid #334155;

    color:white;


}





.mockup{


    width:350px;

}



.window{


    background:

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


    backdrop-filter:blur(20px);


    padding:20px;

    border-radius:25px;


    box-shadow:
            0 30px 80px rgba(0,0,0,.5);


}




.top span{


    display:inline-block;

    width:10px;

    height:10px;

    background:white;

    border-radius:50%;

    margin-right:5px;

    opacity:.5;


}




.picker-preview{


    height:160px;

    border-radius:20px;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:25px;


    margin:20px 0;


    background:#6366f1;


}



.colors{

    display:flex;

    gap:10px;

}



.colors div{


    height:45px;

    width:45px;

    border-radius:12px;


}



.window button{


    width:100%;

    margin-top:20px;

    padding:14px;

    border:0;

    border-radius:15px;


    background:#fff;

    font-weight:bold;


}





section{

    padding:100px 8%;

    text-align:center;

}




h2{

    font-size:45px;

    margin-bottom:50px;

}



.cards{


    display:grid;

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


    gap:30px;


}



.card{


    padding:35px;


    border-radius:25px;


    background:
            rgba(255,255,255,.07);


    text-align:left;


}



.card p{

    color:#94a3b8;

    margin-top:15px;

    line-height:1.5;


}




.steps{


    display:flex;

    justify-content:center;

    gap:40px;


}



.steps div{


    padding:25px;

    background:#111827;

    border-radius:20px;

}



.steps span{


    display:block;

    font-size:40px;

    color:#818cf8;


}





footer{


    padding:50px;

    text-align:center;

    background:#020617;

}


footer a{

    display:inline-block;

    margin-top:20px;

    color:white;

}




@media(max-width:900px){


    .hero{

        flex-direction:column;

        text-align:center;

        gap:50px;

    }


    .cards{

        grid-template-columns:1fr;

    }



    .buttons{

        justify-content:center;

    }



}
/* ===========================
   Privacy Policy
=========================== */

.policy{

    display:flex;

    justify-content:center;

    padding:80px 20px;

}


.policy-card{

    max-width:900px;

    width:100%;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

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

    border-radius:30px;

    padding:50px;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}


.policy-card h1{

    margin:20px 0;

    font-size:clamp(40px,5vw,64px);

}


.policy-card h1 span{

    background:linear-gradient(
            90deg,
            #38bdf8,
            #818cf8,
            #ec4899
    );

    -webkit-background-clip:text;

    color:transparent;

}


.last-update{

    color:#94a3b8;

    margin-bottom:40px;

}


.policy-content{

    margin-top:40px;

}


.policy-content h2{

    text-align:left;

    font-size:28px;

    margin:45px 0 15px;

}


.policy-content p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:20px;

}


.policy-content ul{

    margin-left:25px;

    margin-bottom:25px;

}


.policy-content li{

    color:#cbd5e1;

    margin:10px 0;

    line-height:1.7;

}


@media(max-width:768px){

    .policy-card{

        padding:30px;

    }

}
.footer-links{

    margin-top:20px;

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.footer-links a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#ffffff;

}