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


body {

    min-height:100vh;
    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

    color:white;
}



header {

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

    padding:30px 10%;

}


.logo {

    font-size:28px;
    font-weight:bold;
    color:#38bdf8;

}



nav a {

    color:white;
    text-decoration:none;
    margin-left:25px;

}


.hero {

    text-align:center;
    padding:100px 20px;

}


.hero h1 {

    font-size:60px;
    margin-bottom:20px;

}


.hero span {

    color:#38bdf8;

}


.hero p {

    max-width:650px;
    margin:auto;

    font-size:20px;
    color:#cbd5e1;

}



.buttons {

    margin-top:40px;

}



.btn {

    display:inline-block;
    padding:14px 30px;

    border-radius:30px;

    text-decoration:none;

    margin:10px;

}



.primary {

    background:#38bdf8;
    color:#0f172a;

}



.secondary {

    border:1px solid white;
    color:white;

}



.cards {

    display:flex;

    justify-content:center;

    gap:25px;

    padding:40px 10%;

}



.card {

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

    padding:30px;

    border-radius:15px;

    width:300px;

    text-align:center;

}



.card p {

    color:#cbd5e1;
    margin-top:15px;

}



footer {

    text-align:center;

    padding:30px;

    color:#94a3b8;

}



@media(max-width:700px){

    .hero h1 {

        font-size:40px;

    }


    .cards {

        flex-direction:column;
        align-items:center;

    }

}