/* ====================================== */
/* Reset */
/* ====================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:
        "Segoe UI",
        "Yu Gothic",
        sans-serif;

    background:#f7f7f4;
    color:#333;

}

/* ====================================== */
/* Header */
/* ====================================== */

.site-header{

    background:#2f4858;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.header-inner{

    max-width:1100px;

    margin:0 auto;

    padding:18px 24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo a{

    color:white;

    text-decoration:none;

    font-size:32px;

    font-weight:bold;

}

.global-nav{

    display:flex;

    gap:36px;

}

.global-nav a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}

.global-nav a:hover{

    opacity:.7;

}

/* ====================================== */
/* Main */
/* ====================================== */

main{

    max-width:1100px;

    margin:0 auto;

    padding:70px 24px;

}

.hero{

    margin-bottom:70px;

}

.eyebrow{

    color:#888;

    font-size:14px;

    letter-spacing:.2em;

    margin-bottom:18px;

}

.hero h1{

    font-size:72px;

    line-height:1.15;

    margin-bottom:30px;

}

.lead{

    font-size:20px;

    line-height:1.8;

    max-width:700px;

    color:#555;

}

/* ====================================== */
/* Cards */
/* ====================================== */

.grid{

    display:grid;

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

    gap:28px;

}

.card{

    display:block;

    background:white;

    padding:36px;

    border-radius:22px;

    text-decoration:none;

    color:#333;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.25s;

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:0 16px 40px rgba(0,0,0,.12);

}

.card h2{

    font-size:24px;

    margin-bottom:18px;

}

.card p{

    color:#666;

    line-height:1.8;

}

/* ====================================== */
/* Smartphone */
/* ====================================== */

@media (max-width:768px){

    .header-inner{

        flex-direction:column;

        gap:20px;

    }

    .global-nav{

        gap:20px;

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero h1{

        font-size:48px;

    }

    .lead{

        font-size:18px;

    }

}