/*
 * ==========================================================
 * SCANO WEB
 * ==========================================================
 */

:root {
    --navy:
        #06284f;

    --navy-deep:
        #031d3b;

    --blue:
        #1976f3;

    --blue-light:
        #36c9f4;

    --background:
        #f6f8fb;

    --surface:
        #ffffff;

    --text:
        #0d1b2c;

    --text-secondary:
        #657183;

    --border:
        #e6eaf0;

    --max-width:
        1180px;
}


/*
 * ==========================================================
 * RESET
 * ==========================================================
 */

* {
    box-sizing:
        border-box;
}

html {
    scroll-behavior:
        smooth;
}

body {
    margin:
        0;

    background:
        var(--background);

    color:
        var(--text);

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

    -webkit-font-smoothing:
        antialiased;
}

a {
    color:
        inherit;

    text-decoration:
        none;
}

img {
    display:
        block;

    max-width:
        100%;
}

.container {
    width:
        min(calc(100% - 48px),
            var(--max-width));

    margin:
        0 auto;
}


/*
 * ==========================================================
 * HEADER
 * ==========================================================
 */

.site-header {
    position:
        sticky;

    top:
        0;

    z-index:
        50;

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

    backdrop-filter:
        blur(16px);

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

.header-inner {
    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        32px;
}

.brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;
}

.brand-logo {
    width:
        48px;

    height:
        48px;

    object-fit:
        contain;
}

.brand-name {
    font-size:
        27px;

    font-weight:
        900;

    letter-spacing:
        -0.8px;
}

.main-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    color:
        var(--text-secondary);

    font-size:
        15px;

    font-weight:
        700;
}

.main-nav a {
    transition:
        color 160ms ease;
}

.main-nav a:hover {
    color:
        var(--blue);
}


/*
 * ==========================================================
 * HERO
 * ==========================================================
 */

.hero {
    padding:
        92px 0 100px;

    overflow:
        hidden;
}

.hero-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr) minmax(360px, 0.95fr);

    gap:
        80px;

    align-items:
        center;
}

.eyebrow,
.section-kicker {
    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1.4px;
}

.hero h1 {
    max-width:
        650px;

    margin:
        18px 0 24px;

    font-size:
        clamp(50px,
            7vw,
            78px);

    line-height:
        0.98;

    letter-spacing:
        -3px;
}

.hero h1 span {
    display:
        block;

    color:
        var(--blue);
}

.hero-description {
    max-width:
        600px;

    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        20px;

    line-height:
        1.65;
}

.hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        34px;
}

.primary-button,
.secondary-button {
    min-height:
        52px;

    padding:
        0 24px;

    border-radius:
        16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        15px;

    font-weight:
        800;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.primary-button {
    background:
        var(--blue);

    color:
        white;

    box-shadow:
        0 14px 35px rgba(25,
            118,
            243,
            0.22);
}

.secondary-button {
    background:
        white;

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

    color:
        var(--text);
}

.primary-button:hover,
.secondary-button:hover {
    transform:
        translateY(-2px);
}

.availability-note {
    margin:
        18px 0 0;

    color:
        var(--text-secondary);

    font-size:
        13px;
}


/*
 * ==========================================================
 * SCANNER VISUAL
 * ==========================================================
 */

.scanner-card {
    position:
        relative;

    min-height:
        540px;

    padding:
        32px;

    overflow:
        hidden;

    border-radius:
        42px;

    background:
        linear-gradient(145deg,
            var(--navy),
            var(--navy-deep));

    color:
        white;

    box-shadow:
        0 38px 80px rgba(3,
            29,
            59,
            0.24);
}

.scanner-glow {
    position:
        absolute;

    border-radius:
        999px;

    pointer-events:
        none;
}

.scanner-glow-one {
    width:
        320px;

    height:
        320px;

    right:
        -100px;

    top:
        70px;

    background:
        rgba(25,
            118,
            243,
            0.22);
}

.scanner-glow-two {
    width:
        180px;

    height:
        180px;

    right:
        40px;

    bottom:
        -80px;

    background:
        rgba(54,
            201,
            244,
            0.15);
}

.scanner-label {
    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    padding:
        8px 13px;

    border-radius:
        999px;

    background:
        rgba(54,
            201,
            244,
            0.14);

    color:
        var(--blue-light);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.1px;
}

.scanner-stage {
    position:
        relative;

    width:
        280px;

    height:
        300px;

    margin:
        42px auto 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.paper {
    position:
        relative;

    width:
        145px;

    height:
        195px;

    padding:
        70px 24px 20px;

    overflow:
        hidden;

    border-radius:
        12px;

    background:
        #f7faff;

    box-shadow:
        0 20px 50px rgba(0,
            0,
            0,
            0.16);
}

.paper-fold {
    position:
        absolute;

    right:
        0;

    top:
        0;

    width:
        48px;

    height:
        48px;

    background:
        #dce7f5;
}

.paper-line {
    width:
        78%;

    height:
        9px;

    margin-bottom:
        16px;

    border-radius:
        10px;

    background:
        #cfdae7;
}

.paper-line-wide {
    width:
        100%;
}

.paper-line-short {
    width:
        56%;
}

.scan-laser {
    position:
        absolute;

    left:
        25px;

    right:
        25px;

    top:
        145px;

    height:
        4px;

    border-radius:
        10px;

    background:
        var(--blue-light);

    box-shadow:
        0 0 20px rgba(54,
            201,
            244,
            0.9);
}

.scan-corner {
    position:
        absolute;

    width:
        46px;

    height:
        46px;

    border-color:
        var(--blue-light);
}

.corner-top-left {
    top:
        12px;

    left:
        10px;

    border-top:
        6px solid;

    border-left:
        6px solid;

    border-radius:
        10px 0 0 0;
}

.corner-top-right {
    top:
        12px;

    right:
        10px;

    border-top:
        6px solid;

    border-right:
        6px solid;

    border-radius:
        0 10px 0 0;
}

.corner-bottom-left {
    bottom:
        12px;

    left:
        10px;

    border-bottom:
        6px solid;

    border-left:
        6px solid;

    border-radius:
        0 0 0 10px;
}

.corner-bottom-right {
    right:
        10px;

    bottom:
        12px;

    border-right:
        6px solid;

    border-bottom:
        6px solid;

    border-radius:
        0 0 10px 0;
}

.scanner-message {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

    text-align:
        center;
}

.scanner-message strong {
    font-size:
        23px;
}

.scanner-message span {
    color:
        #aebdce;

    font-size:
        14px;
}


/*
 * ==========================================================
 * FEATURES
 * ==========================================================
 */

.features-section {
    padding:
        100px 0;

    background:
        white;
}

.section-heading {
    max-width:
        760px;

    margin-bottom:
        52px;
}

.section-heading h2,
.privacy-card h2 {
    margin:
        12px 0 18px;

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

    line-height:
        1.08;

    letter-spacing:
        -1.5px;
}

.section-heading p,
.privacy-card p {
    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        18px;

    line-height:
        1.65;
}

.feature-grid {
    display:
        grid;

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

    gap:
        18px;
}

.feature-card {
    min-height:
        265px;

    padding:
        28px;

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

    border-radius:
        24px;

    background:
        var(--surface);
}

.feature-icon {
    width:
        54px;

    height:
        54px;

    margin-bottom:
        28px;

    border-radius:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(25,
            118,
            243,
            0.09);

    color:
        var(--blue);

    font-size:
        18px;

    font-weight:
        900;
}

.feature-card h3 {
    margin:
        0 0 12px;

    font-size:
        20px;
}

.feature-card p {
    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        15px;

    line-height:
        1.6;
}


/*
 * ==========================================================
 * PRIVACY
 * ==========================================================
 */

.privacy-section {
    padding:
        90px 0;
}

.privacy-card {
    padding:
        50px;

    border-radius:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        50px;

    background:
        var(--navy);

    color:
        white;
}

.privacy-card>div {
    max-width:
        750px;
}

.privacy-card p {
    color:
        #b7c4d4;
}

.light-button {
    flex-shrink:
        0;
}


/*
 * ==========================================================
 * FOOTER
 * ==========================================================
 */

.site-footer {
    padding:
        42px 0 50px;

    background:
        white;

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

.footer-inner {
    display:
        grid;

    grid-template-columns:
        1fr auto auto;

    gap:
        36px;

    align-items:
        center;
}

.footer-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}

.footer-logo {
    width:
        38px;

    height:
        38px;

    object-fit:
        contain;
}

.footer-brand div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}

.footer-brand strong {
    font-size:
        17px;
}

.footer-brand span,
.footer-copy {
    color:
        var(--text-secondary);

    font-size:
        12px;
}

.footer-links {
    display:
        flex;

    gap:
        24px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        700;
}

.footer-links a:hover {
    color:
        var(--blue);
}


/*
 * ==========================================================
 * RESPONSIVE
 * ==========================================================
 */

@media (max-width: 950px) {

    .hero {
        padding-top:
            70px;
    }

    .hero-grid {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }

    .scanner-card {
        max-width:
            600px;

        width:
            100%;

        margin:
            0 auto;
    }

    .feature-grid {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));
    }

    .privacy-card {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .footer-inner {
        grid-template-columns:
            1fr;

        justify-items:
            start;
    }

}


@media (max-width: 620px) {

    .container {
        width:
            min(calc(100% - 30px),
                var(--max-width));
    }

    .header-inner {
        min-height:
            68px;
    }

    .brand-logo {
        width:
            40px;

        height:
            40px;
    }

    .brand-name {
        font-size:
            23px;
    }

    .main-nav {
        gap:
            16px;

        font-size:
            13px;
    }

    .main-nav a:first-child {
        display:
            none;
    }

    .hero {
        padding:
            58px 0 70px;
    }

    .hero h1 {
        letter-spacing:
            -2px;
    }

    .hero-description {
        font-size:
            17px;
    }

    .hero-actions {
        flex-direction:
            column;
    }

    .primary-button,
    .secondary-button {
        width:
            100%;
    }

    .scanner-card {
        min-height:
            500px;

        padding:
            24px 18px;

        border-radius:
            30px;
    }

    .scanner-stage {
        width:
            255px;

        max-width:
            100%;
    }

    .features-section {
        padding:
            75px 0;
    }

    .feature-grid {
        grid-template-columns:
            1fr;
    }

    .feature-card {
        min-height:
            auto;
    }

    .privacy-section {
        padding:
            70px 0;
    }

    .privacy-card {
        padding:
            32px 24px;

        border-radius:
            28px;
    }

    .footer-links {
        flex-wrap:
            wrap;
    }

}