:root {

    --background:
        #07111f;

    --background-secondary:
        #0b1728;

    --surface:
        #101d30;

    --surface-hover:
        #15253c;

    --primary:
        #159ee8;

    --primary-light:
        #39b8ff;

    --text:
        #f3f7fb;

    --text-secondary:
        #a7b5c7;

    --border:
        rgba(255,255,255,0.09);

    --container:
        1240px;

    --header-height:
        78px;

}


* {
    box-sizing:
        border-box;
}


html {

    margin:
        0;

    padding:
        0;

    scroll-behavior:
        smooth;

    scroll-padding-top:
        var(--header-height);

}


body {

    margin:
        0;

    padding:
        0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:
        1.6;

}


a {

    color:
        inherit;

}


img {

    display:
        block;

    max-width:
        100%;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


.container {

    width:
        calc(100% - 48px);

    max-width:
        var(--container);

    margin:
        0 auto;

}


.page-main {

    min-height:
        65vh;

}


.page-section {

    padding:
        90px 0;

}


.section-label {

    margin:
        0 0 12px;

    color:
        var(--primary-light);

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.section-title {

    margin:
        0;

    font-size:
        clamp(34px, 5vw, 52px);

    line-height:
        1.1;

}


.section-description {

    max-width:
        720px;

    margin:
        20px 0 0;

    color:
        var(--text-secondary);

    font-size:
        18px;

    line-height:
        1.7;

}


.card-grid {

    display:
        grid;

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

    gap:
        20px;

    margin-top:
        45px;

}


.card {

    padding:
        30px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        14px;

    text-decoration:
        none;

    transition:
        transform .2s,
        border-color .2s,
        background .2s;

}


.card:hover {

    transform:
        translateY(-3px);

    background:
        var(--surface-hover);

    border-color:
        rgba(57,184,255,.3);

}


.card h3 {

    margin:
        0 0 10px;

    font-size:
        20px;

}


.card p {

    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        14px;

    line-height:
        1.7;

}


@media (max-width: 850px) {

    .card-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 600px) {

    .container {

        width:
            calc(100% - 30px);

    }


    .page-section {

        padding:
            60px 0;

    }


    .card-grid {

        grid-template-columns:
            1fr;

    }

}