*{

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

}


body{

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

    background:#080b12;

    color:white;

    line-height:1.6;

}




.navbar{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8%;

    background:#0c1019;

}



.logo{

    font-size:22px;

    font-weight:800;

    color:#00e676;

}


.logo span{

    color:white;

}



nav a{

    color:#aaa;

    margin-left:30px;

    text-decoration:none;

    transition:.3s;

}


nav a:hover{

    color:#00e676;

}




.hero{

    min-height:650px;

    display:flex;

    align-items:center;

    justify-content:space-around;

    padding:60px 8%;

}



.hero-content{

    max-width:600px;

    animation:slide .8s ease;

}



.hero h1{

    font-size:60px;

    line-height:1.1;

}



.hero h1 span{

    color:#00e676;

}



.hero p{

    color:#aaa;

    margin:25px 0;

    font-size:18px;

}



.buttons{

    display:flex;

    gap:20px;

}



.btn{

    padding:14px 30px;

    border-radius:30px;

    text-decoration:none;

    cursor:pointer;

    transition:.3s;

}



.primary{

    background:#00e676;

    color:#000;

}



.secondary{

    border:1px solid #333;

    color:white;

}



.btn:hover{

    transform:translateY(-5px);

}




.hero-card{

    width:300px;

    height:330px;

    background:#111827;

    border-radius:25px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    box-shadow:
            0 20px 50px #000;

    animation:
            float 4s infinite;

}



.circle{

    font-size:70px;

    background:#18251e;

    padding:30px;

    border-radius:50%;

}



.live{

    margin-top:20px;

    background:#ff1744;

    padding:5px 20px;

    border-radius:20px;

}




.section{

    padding:80px 8%;

    text-align:center;

}



.section h2{

    font-size:40px;

    margin-bottom:50px;

}




.cards{

    display:grid;

    grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}



.card{

    background:#111827;

    padding:35px;

    border-radius:20px;

    transition:.3s;

}


.card:hover{

    transform:
            translateY(-10px);

}



.icon{

    font-size:40px;

}




.steps{

    display:flex;

    justify-content:center;

    gap:40px;

}



.steps span{

    display:inline-flex;

    width:60px;

    height:60px;

    align-items:center;

    justify-content:center;

    background:#00e676;

    color:black;

    border-radius:50%;

    font-size:25px;

    font-weight:bold;

}





.download{

    text-align:center;

    padding:100px;

    background:#0d151f;

}





footer{

    padding:30px;

    text-align:center;

    background:#05070b;

    color:#888;

}



footer a{

    color:#00e676;

}





.privacy{

    max-width:800px;

    margin:auto;

    padding:80px 20px;

}



.privacy h1{

    font-size:45px;

    margin-bottom:30px;

}



.privacy h2{

    margin-top:35px;

    color:#00e676;

}




@keyframes float{


    0%,100%{

        transform:
                translateY(0);

    }


    50%{

        transform:
                translateY(-20px);

    }


}



@keyframes slide{


    from{

        opacity:0;

        transform:
                translateX(-40px);

    }


    to{

        opacity:1;

        transform:
                translateX(0);

    }


}




@media(max-width:700px){


    .hero{

        flex-direction:column;

        text-align:center;

    }


    .hero h1{

        font-size:40px;

    }


    .navbar{

        padding:0 20px;

    }


    nav{

        display:none;

    }


    .steps{

        flex-direction:column;

    }


}