* {
    box-sizing:border-box;
}


body {

    margin:0;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    sans-serif;


    background:
    linear-gradient(
        135deg,
        #07111f,
        #102a43
    );


    color:#e8f1ff;

    min-height:100vh;

}



.container {

    max-width:1100px;

    margin:auto;

    padding:30px;

}



header {

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo {

    font-size:32px;

    font-weight:800;

    letter-spacing:6px;

    color:white;

}



nav a {

    color:#b8c7dc;

    text-decoration:none;

    margin-left:30px;

}


nav a:hover {

    color:white;

}



.hero {

    padding-top:120px;

    padding-bottom:80px;

}



.tag {

    color:#7dd3fc;

    font-size:14px;

    letter-spacing:3px;

}



h1 {

    font-size:60px;

    line-height:1.2;

    margin:25px 0;

}



.hero p {

    max-width:650px;

    color:#cbd5e1;

    font-size:20px;

    line-height:1.8;

}



.line {

    margin-top:50px;

    width:100px;

    height:4px;

    background:#38bdf8;

}



.card {

    background:

    rgba(255,255,255,0.08);


    border-radius:20px;

    padding:35px;

    backdrop-filter:blur(10px);

}



.card h2 {

    margin-top:0;

}



.card p {

    color:#cbd5e1;

    line-height:1.8;

}



.grid {

    margin-top:30px;

    display:grid;

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

    gap:25px;

}



.item {

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


    padding:30px;

    border-radius:18px;

}



.item h3 {

    color:#7dd3fc;

}



.item p {

    color:#cbd5e1;

    line-height:1.7;

}



footer {

    text-align:center;

    margin-top:80px;

    color:#94a3b8;

    font-size:14px;

}

footer a {

    color:#94a3b8;

    text-decoration:none;

}

footer a:hover {

    color:#7dd3fc;

}



@media(max-width:800px){

    h1 {

        font-size:40px;

    }


    .grid {

        grid-template-columns:1fr;

    }


    nav {

        display:none;

    }

}