* {
    box-sizing: border-box;
}

body {
    margin:0;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background:#f7f9fc;
    color:#222;
}


header {
    height:70px;
    background:white;

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

    padding:0 10%;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}


.logo {
    font-size:24px;
    font-weight:700;
    color:#2563eb;
}


nav a {
    margin-left:30px;
    color:#555;
    text-decoration:none;
}


.hero {

    height:420px;

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

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    color:white;
}


.content {
    text-align:center;
    max-width:700px;
}


h1 {
    font-size:48px;
    margin-bottom:20px;
}


.content p {
    font-size:18px;
    line-height:1.8;
}


button {

    margin-top:25px;

    padding:
    12px 35px;

    border:0;
    border-radius:8px;

    background:white;
    color:#2563eb;

    font-size:16px;
}


.cards {

    display:flex;

    gap:30px;

    padding:60px 10%;
}


.card {

    flex:1;

    background:white;

    padding:30px;

    border-radius:12px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.06);

}


footer {

    text-align:center;

    padding:30px;

    color:#888;

}