:root {

    --blue-dark: #082c4c;

    --blue: #0d5c91;

    --blue-light: #2aa9e8;

    --sky: #eaf7fd;

    --dark: #071a2a;

    --text: #304354;

    --muted: #71808e;

    --white: #ffffff;

    --border: #dce7ee;

    --light: #f7fafc;

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    color:
        var(--text);

    line-height:
        1.6;

    background:
        var(--white);

}


.container {

    width:
        min(
            1120px,
            calc(100% - 40px)
        );

    margin:
        auto;

}


.header {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    backdrop-filter:
        blur(10px);

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

}


.header-content {

    min-height:
        74px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.logo {

    color:
        var(--blue-dark);

    text-decoration:
        none;

    font-weight:
        800;

    font-size:
        20px;

}


.logo span {

    display:
        block;

    font-size:
        10px;

    color:
        var(--muted);

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.header-link {

    color:
        var(--blue);

    text-decoration:
        none;

    font-weight:
        700;

}


.hero {

    padding:
        110px 0;

    background:
        linear-gradient(
            135deg,
            #f8fcff,
            #eaf7fd
        );

}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;

}


.eyebrow {

    display:
        inline-block;

    color:
        var(--blue-light);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    margin-bottom:
        16px;

}


.hero h1 {

    color:
        var(--dark);

    font-size:
        clamp(
            40px,
            5vw,
            62px
        );

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        25px;

}


.hero-content > p {

    max-width:
        650px;

    color:
        var(--muted);

    font-size:
        18px;

    margin-bottom:
        30px;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        14px 24px;

    border-radius:
        8px;

    text-decoration:
        none;

    font-weight:
        800;

    transition:
        .2s;

}


.btn-primary {

    background:
        var(--blue-dark);

    color:
        white;

}


.btn-secondary {

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

    color:
        var(--blue-dark);

    background:
        white;

}


.btn:hover {

    transform:
        translateY(-2px);

}


.hero-features {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        20px;

    color:
        var(--muted);

    font-size:
        13px;

}


.hero-visual {

    perspective:
        1000px;

}


.browser-window {

    background:
        white;

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

    border-radius:
        14px;

    overflow:
        hidden;

    box-shadow:
        0 30px 80px
        rgba(
            7,
            42,
            70,
            .16
        );

    transform:
        rotateY(
            -3deg
        );

}


.browser-bar {

    height:
        38px;

    display:
        flex;

    gap:
        6px;

    align-items:
        center;

    padding:
        0 15px;

    background:
        #edf3f7;

}


.browser-bar span {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #9fb1bf;

}


.browser-content {

    padding:
        60px 45px;

    min-height:
        420px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf8fd
        );

}


.browser-content small {

    color:
        var(--blue-light);

    font-weight:
        800;

    letter-spacing:
        2px;

}


.browser-content h2 {

    color:
        var(--dark);

    font-size:
        34px;

    line-height:
        1.1;

    margin:
        20px 0;

}


.browser-content p {

    color:
        var(--muted);

}


.fake-button {

    display:
        inline-block;

    margin-top:
        25px;

    padding:
        10px 18px;

    color:
        white;

    background:
        var(--blue-dark);

    border-radius:
        6px;

    font-size:
        13px;

    font-weight:
        700;

}


.fake-cards {

    display:
        grid;

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

    gap:
        10px;

    margin-top:
        50px;

}


.fake-cards div {

    height:
        60px;

    border-radius:
        7px;

    background:
        #dcecf5;

}


.section {

    padding:
        100px 0;

}


.section-light {

    background:
        var(--light);

}


.section-title {

    max-width:
        720px;

    margin:
        0 auto 60px;

    text-align:
        center;

}


.section-title h2 {

    color:
        var(--dark);

    font-size:
        42px;

    line-height:
        1.15;

    margin-bottom:
        18px;

}


.section-title p {

    color:
        var(--muted);

}


.steps {

    display:
        grid;

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

    gap:
        30px;

}


.step {

    padding:
        28px;

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

    border-radius:
        12px;

}


.step-number {

    color:
        var(--blue-light);

    font-size:
        28px;

    font-weight:
        900;

    margin-bottom:
        15px;

}


.step h3 {

    color:
        var(--dark);

    margin-bottom:
        10px;

}


.step p {

    color:
        var(--muted);

}


.feature-grid {

    display:
        grid;

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

    gap:
        25px;

}


.feature {

    padding:
        35px;

    background:
        white;

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

    border-radius:
        12px;

}


.feature-icon {

    color:
        var(--blue-light);

    font-weight:
        900;

    margin-bottom:
        20px;

}


.feature h3 {

    color:
        var(--dark);

    margin-bottom:
        10px;

}


.feature p {

    color:
        var(--muted);

}


.resources {

    background:
        var(--dark);

}


.section-title.light h2 {

    color:
        white;

}


.section-title.light p {

    color:
        #b9c9d6;

}


.resource-card {

    background:
        white;

    padding:
        30px;

    border-radius:
        12px;

    margin-top:
        25px;

}


.resource-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        25px;

    margin-bottom:
        20px;

}


.resource-tag {

    display:
        inline-block;

    color:
        var(--blue-light);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1px;

    margin-bottom:
        8px;

}


.resource-header h3 {

    color:
        var(--dark);

}


.resource-header p {

    color:
        var(--muted);

    margin-top:
        5px;

}


.copy-button {

    border:
        none;

    background:
        var(--blue-dark);

    color:
        white;

    padding:
        12px 20px;

    border-radius:
        7px;

    cursor:
        pointer;

    font-weight:
        800;

    white-space:
        nowrap;

}


.copy-button:hover {

    background:
        var(--blue);

}


textarea {

    display:
        block;

    width:
        100%;

    min-height:
        280px;

    padding:
        18px;

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

    border-radius:
        7px;

    background:
        #f7fafc;

    color:
        var(--text);

    font-family:
        monospace;

    font-size:
        12px;

    line-height:
        1.6;

    resize:
        vertical;

}


.copy-message {

    display:
        none;

    margin-top:
        10px;

    color:
        #16864c;

    font-size:
        13px;

    font-weight:
        700;

}


.copy-message.show {

    display:
        block;

}


.info-box {

    max-width:
        800px;

    margin:
        auto;

    padding:
        45px;

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

    border-radius:
        14px;

    text-align:
        center;

}


.info-box h2 {

    color:
        var(--dark);

    font-size:
        36px;

    margin-bottom:
        15px;

}


.info-box p {

    color:
        var(--muted);

}


.final-cta {

    padding:
        100px 0;

    text-align:
        center;

}


.final-cta h2 {

    max-width:
        700px;

    margin:
        auto auto 20px;

    color:
        var(--dark);

    font-size:
        42px;

    line-height:
        1.15;

}


.final-cta p {

    max-width:
        700px;

    margin:
        0 auto 30px;

    color:
        var(--muted);

}


.footer {

    padding:
        50px 0;

    background:
        #061522;

    color:
        white;

    text-align:
        center;

}


.footer p {

    color:
        #a8bbc8;

    margin:
        10px 0 20px;

}


.footer-links {

    display:
        flex;

    justify-content:
        center;

    gap:
        20px;

    margin-bottom:
        25px;

}


.footer-links a {

    color:
        #c7d8e3;

    text-decoration:
        none;

}


.footer small {

    color:
        #8298a8;

}


@media
(max-width: 900px) {


    .hero-grid {

        grid-template-columns:
            1fr;

    }


    .steps {

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

    }


    .feature-grid {

        grid-template-columns:
            1fr;

    }


}


@media
(max-width: 650px) {


    .container {

        width:
            calc(
                100% - 28px
            );

    }


    .hero {

        padding:
            70px 0;

    }


    .hero h1 {

        font-size:
            40px;

    }


    .section {

        padding:
            70px 0;

    }


    .section-title h2,
    .final-cta h2 {

        font-size:
            32px;

    }


    .steps {

        grid-template-columns:
            1fr;

    }


    .resource-header {

        flex-direction:
            column;

    }


    .copy-button {

        width:
            100%;

    }


    .browser-content {

        padding:
            40px 25px;

    }


    .browser-content h2 {

        font-size:
            28px;

    }


}