:root {

    --navy:
        #071b34;

    --navy-2:
        #0a2a52;

    --blue:
        #087cff;

    --cyan:
        #00bde8;

    --green:
        #0dcc70;

    --ink:
        #101828;

    --text:
        #475467;

    --muted:
        #667085;

    --line:
        #e4e7ec;

    --soft:
        #f6f8fb;

    --white:
        #ffffff;
}


* {

    box-sizing:
        border-box;
}


html {

    scroll-behavior:
        smooth;
}


body {

    margin:
        0;

    color:
        var(--ink);

    background:
        #ffffff;

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

    line-height:
        1.5;
}


a {

    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
select,
textarea {

    font:
        inherit;
}


.public-container {

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

    margin:
        0 auto;
}


/* HEADER */

.public-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    border-bottom:
        1px solid
        rgba(
            228,
            231,
            236,
            .75
        );

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

    backdrop-filter:
        blur(14px);
}


.header-inner {

    min-height:
        74px;

    display:
        flex;

    align-items:
        center;

    gap:
        28px;
}


.public-brand {

    display:
        flex;

    align-items:
        center;

    flex:
        0 0 auto;
}


.public-brand img {

    display:
        block;

    width:
        170px;

    height:
        54px;

    object-fit:
        contain;

    object-position:
        left center;
}


.public-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        26px;

    margin-left:
        auto;
}


.public-nav a {

    color:
        #475467;

    font-size:
        13px;

    font-weight:
        700;
}


.public-nav a:hover {

    color:
        var(--blue);
}


.header-actions {

    display:
        flex;

    gap:
        9px;
}


.mobile-nav-button {

    display:
        none;
}


/* BUTTON */

.btn {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        9px 16px;

    border:
        1px solid transparent;

    border-radius:
        9px;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .18s ease;
}


.btn:hover {

    transform:
        translateY(-1px);
}


.btn-primary {

    border-color:
        var(--blue);

    background:
        var(--blue);

    color:
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(
            8,
            124,
            255,
            .16
        );
}


.btn-secondary {

    border-color:
        #d0d5dd;

    background:
        #ffffff;

    color:
        #344054;
}


.btn-large {

    min-height:
        48px;

    padding:
        12px 20px;

    font-size:
        13px;
}


.btn-white {

    background:
        #ffffff;

    color:
        var(--blue);
}


.full {

    width:
        100%;
}


/* HERO */

.hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        100px 0 90px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 100%
        );
}


.hero::before {

    content:
        "";

    position:
        absolute;

    width:
        620px;

    height:
        620px;

    top:
        -300px;

    right:
        -220px;

    border-radius:
        50%;

    background:
        rgba(
            8,
            124,
            255,
            .07
        );

    filter:
        blur(1px);
}


.hero-grid {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1.03fr .97fr;

    align-items:
        center;

    gap:
        68px;
}


.hero-badge {

    width:
        fit-content;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        19px;

    padding:
        7px 11px;

    border:
        1px solid #b2ddff;

    border-radius:
        999px;

    background:
        #eff8ff;

    color:
        #175cd3;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}


.hero-badge span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 0 4px
        rgba(
            13,
            204,
            112,
            .10
        );
}


.hero h1 {

    max-width:
        700px;

    margin:
        0;

    color:
        #0c1b33;

    font-size:
        clamp(
            42px,
            5.4vw,
            68px
        );

    line-height:
        1.04;

    letter-spacing:
        -.045em;
}


.hero-description {

    max-width:
        630px;

    margin:
        24px 0 0;

    color:
        #667085;

    font-size:
        17px;

    line-height:
        1.75;
}


.hero-actions {

    display:
        flex;

    gap:
        11px;

    margin-top:
        30px;
}


.hero-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        17px;

    margin-top:
        27px;

    color:
        #475467;

    font-size:
        11px;

    font-weight:
        750;
}


/* HERO DASHBOARD MOCK */

.hero-dashboard {

    position:
        relative;

    overflow:
        hidden;

    padding:
        20px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .11
        );

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            var(--navy) 0%,
            #0a3260 58%,
            #087cff 140%
        );

    box-shadow:
        0 36px 80px
        rgba(
            7,
            27,
            52,
            .23
        );
}


.hero-dashboard::after {

    content:
        "";

    position:
        absolute;

    width:
        230px;

    height:
        230px;

    right:
        -100px;

    top:
        -90px;

    border-radius:
        50%;

    background:
        rgba(
            0,
            189,
            232,
            .15
        );
}


.mock-header {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        17px;

    color:
        #ffffff;
}


.mock-logo {

    font-size:
        17px;

    font-weight:
        900;
}


.mock-status {

    display:
        flex;

    gap:
        7px;

    align-items:
        center;

    padding:
        6px 9px;

    border-radius:
        999px;

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

    font-size:
        9px;
}


.mock-status span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #19df81;
}


.mock-stats {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        9px;
}


.mock-stats > div {

    padding:
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            .07
        );
}


.mock-stats small {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #bfd4e9;

    font-size:
        8px;
}


.mock-stats strong {

    color:
        #ffffff;

    font-size:
        22px;
}


.mock-stats strong.online {

    color:
        #43e99a;

    font-size:
        12px;
}


.mock-device {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        10px;

    padding:
        14px;

    border-radius:
        12px;

    background:
        #ffffff;
}


.mock-device-icon {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        #ecfdf3;

    color:
        #039855;
}


.mock-device strong {

    display:
        block;

    font-size:
        11px;
}


.mock-device span {

    display:
        block;

    margin-top:
        3px;

    color:
        #667085;

    font-size:
        9px;
}


.mock-connected {

    color:
        #039855;

    font-size:
        8px;

    font-weight:
        900;
}


.mock-message {

    position:
        relative;

    z-index:
        2;

    margin-top:
        10px;

    padding:
        14px;

    border-radius:
        12px;

    background:
        rgba(
            0,
            0,
            0,
            .22
        );
}


.mock-message-head {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        12px;

    color:
        #d5e4f3;

    font-size:
        9px;
}


.mock-message-head strong {

    color:
        #43e99a;
}


.mock-code {

    margin:
        5px 0;

    color:
        #c8d9ea;

    font-family:
        ui-monospace,
        monospace;

    font-size:
        9px;
}


.mock-code.success {

    color:
        #43e99a;
}


/* SECTIONS */

.section {

    padding:
        92px 0;
}


.section-soft {

    background:
        var(--soft);
}


.section-heading {

    max-width:
        680px;

    margin:
        0 auto 44px;

    text-align:
        center;
}


.section-heading.align-left {

    margin:
        0;

    text-align:
        left;
}


.section-heading > span {

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.section-heading h2 {

    margin:
        9px 0 0;

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

    line-height:
        1.12;

    letter-spacing:
        -.035em;
}


.section-heading p {

    margin:
        15px auto 0;

    color:
        #667085;

    font-size:
        15px;

    line-height:
        1.7;
}


.feature-grid {

    display:
        grid;

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

    gap:
        16px;
}


.feature-card {

    padding:
        24px;

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

    border-radius:
        14px;

    background:
        #ffffff;

    transition:
        .18s ease;
}


.feature-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(
            16,
            24,
            40,
            .07
        );
}


.feature-icon {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        #eff8ff;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        900;
}


.feature-card h3 {

    margin:
        17px 0 8px;

    font-size:
        16px;
}


.feature-card p {

    margin:
        0;

    color:
        #667085;

    font-size:
        12px;

    line-height:
        1.65;
}


.solution-grid {

    display:
        grid;

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

    gap:
        14px;
}


.solution-grid article {

    padding:
        22px;

    border-radius:
        13px;

    background:
        #ffffff;
}


.solution-grid strong {

    font-size:
        14px;
}


.solution-grid p {

    margin:
        9px 0 0;

    color:
        #667085;

    font-size:
        11px;

    line-height:
        1.65;
}


.integration-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        70px;
}


.integration-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        25px;
}


.integration-tags span {

    padding:
        7px 10px;

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

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        #475467;

    font-size:
        10px;

    font-weight:
        800;
}


.api-card {

    overflow:
        hidden;

    border-radius:
        16px;

    background:
        #071b34;

    box-shadow:
        0 26px 60px
        rgba(
            7,
            27,
            52,
            .18
        );
}


.api-card-head {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        13px 17px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    color:
        #d8e7f5;

    font-size:
        9px;

    font-weight:
        850;
}


.api-card pre {

    margin:
        0;

    padding:
        24px;

    overflow:
        auto;

    color:
        #bcd2e7;

    font-size:
        11px;

    line-height:
        1.8;
}


/* PRICING */

.section-pricing {

    background:
        #f8fbff;
}


.pricing-grid {

    display:
        grid;

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

    gap:
        17px;

    align-items:
        stretch;
}


.pricing-card {

    position:
        relative;

    padding:
        27px;

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

    border-radius:
        16px;

    background:
        #ffffff;
}


.pricing-card.featured {

    border-color:
        #84caff;

    box-shadow:
        0 20px 50px
        rgba(
            8,
            124,
            255,
            .11
        );
}


.pricing-popular {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    padding:
        5px 7px;

    border-radius:
        999px;

    background:
        #eff8ff;

    color:
        #175cd3;

    font-size:
        8px;

    font-weight:
        900;
}


.pricing-name {

    color:
        #667085;

    font-size:
        11px;

    font-weight:
        850;
}


.pricing-card h3 {

    margin:
        8px 0;

    font-size:
        28px;
}


.pricing-card p {

    min-height:
        42px;

    color:
        #667085;

    font-size:
        11px;

    line-height:
        1.55;
}


.pricing-card ul {

    padding:
        0;

    margin:
        20px 0 24px;

    list-style:
        none;
}


.pricing-card li {

    position:
        relative;

    margin:
        10px 0;

    padding-left:
        20px;

    color:
        #475467;

    font-size:
        11px;
}


.pricing-card li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        #12b76a;

    font-weight:
        900;
}


/* FAQ */

.faq-list {

    max-width:
        780px;

    margin:
        0 auto;
}


.faq-list details {

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


.faq-list summary {

    padding:
        20px 0;

    cursor:
        pointer;

    font-size:
        13px;

    font-weight:
        800;
}


.faq-list p {

    margin:
        -6px 0 20px;

    color:
        #667085;

    font-size:
        12px;

    line-height:
        1.7;
}


/* CTA */

.cta {

    padding:
        55px 0;

    background:
        linear-gradient(
            120deg,
            #073c70 0%,
            #087cff 100%
        );
}


.cta-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;
}


.cta span {

    color:
        #b9e6fe;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.cta h2 {

    max-width:
        650px;

    margin:
        8px 0 0;

    color:
        #ffffff;

    font-size:
        32px;

    line-height:
        1.15;
}


/* FOOTER */

.public-footer {

    padding:
        55px 0 22px;

    background:
        #06172d;

    color:
        #b7c9dc;
}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.6fr 1fr 1fr 1fr;

    gap:
        35px;
}


.footer-brand img {

    width:
        185px;

    height:
        58px;

    object-fit:
        contain;

    object-position:
        left center;

    filter:
        brightness(0)
        invert(1);
}


.footer-brand p {

    max-width:
        310px;

    color:
        #91aac2;

    font-size:
        11px;

    line-height:
        1.65;
}


.footer-grid > div:not(
    .footer-brand
) {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.footer-grid strong {

    margin-bottom:
        5px;

    color:
        #ffffff;

    font-size:
        11px;
}


.footer-grid a,
.footer-grid span {

    color:
        #91aac2;

    font-size:
        10px;
}


.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        42px;

    padding-top:
        19px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    color:
        #7893ad;

    font-size:
        9px;
}


/* RESPONSIVE */

@media(max-width:980px) {

    .public-nav {

        display:
            none;

        position:
            absolute;

        top:
            74px;

        left:
            20px;

        right:
            20px;

        padding:
            14px;

        flex-direction:
            column;

        align-items:
            stretch;

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

        border-radius:
            12px;

        background:
            #ffffff;

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


    .public-nav.open {

        display:
            flex;
    }


    .mobile-nav-button {

        display:
            block;

        margin-left:
            auto;

        border:
            0;

        background:
            transparent;

        font-size:
            22px;
    }


    .header-actions {

        display:
            none;
    }


    .hero-grid,
    .integration-grid {

        grid-template-columns:
            1fr;
    }


    .hero-grid {

        gap:
            48px;
    }


    .feature-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .solution-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;
    }
}


@media(max-width:680px) {

    .public-container {

        width:
            min(
                100% - 28px,
                1180px
            );
    }


    .public-brand img {

        width:
            145px;
    }


    .hero {

        padding:
            68px 0 58px;
    }


    .hero h1 {

        font-size:
            41px;
    }


    .hero-description {

        font-size:
            14px;
    }


    .hero-actions {

        display:
            grid;

        grid-template-columns:
            1fr;
    }


    .hero-actions .btn {

        width:
            100%;
    }


    .mock-stats {

        grid-template-columns:
            1fr;
    }


    .mock-device {

        grid-template-columns:
            auto 1fr;
    }


    .mock-connected {

        grid-column:
            1 / -1;
    }


    .feature-grid,
    .solution-grid,
    .pricing-grid,
    .footer-grid {

        grid-template-columns:
            1fr;
    }


    .section {

        padding:
            68px 0;
    }


    .cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .footer-bottom {

        flex-direction:
            column;
    }
}



/*
 * =========================================================
 * V1015B8B3 PRICING V2
 * =========================================================
 */

.pricing-controls {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin:
        -16px 0 16px;
}


.pricing-filter-group {

    display:
        flex;

    padding:
        4px;

    border:
        1px solid #e4e7ec;

    border-radius:
        10px;

    background:
        #ffffff;
}


.pricing-filter {

    padding:
        7px 13px;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        #667085;

    font-size:
        10px;

    font-weight:
        800;
}


.pricing-filter.active {

    background:
        #087cff;

    color:
        #ffffff;
}


.pricing-category-tabs {

    display:
        flex;

    justify-content:
        center;

    gap:
        7px;

    margin-bottom:
        24px;
}


.pricing-category-tab {

    padding:
        8px 15px;

    border:
        1px solid #d0d5dd;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #475467;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;
}


.pricing-category-tab.active {

    border-color:
        #087cff;

    background:
        #eff8ff;

    color:
        #087cff;
}


.pricing-quota {

    margin-top:
        14px;

    color:
        #344054;

    font-size:
        11px;

    font-weight:
        850;
}


.pricing-period-label {

    margin:
        -5px 0 10px;

    color:
        #98a2b3;

    font-size:
        9px;
}


#landingPublicPricing {

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


@media(max-width:680px) {

    .pricing-controls {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .pricing-category-tabs {

        flex-wrap:
            wrap;
    }
}



/*
 * =========================================================
 * V1015B9D3D_R2_SECTION_BADGES_FEATURE_ICONS
 * =========================================================
 */


/*
 * Section badges
 */

.section-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        34px;

    padding:
        7px 14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .55
        );

    border-radius:
        999px;

    font-size:
        11px !important;

    font-weight:
        900;

    letter-spacing:
        .08em;

    line-height:
        1;

    text-transform:
        uppercase;

    box-shadow:
        0 8px 20px
        rgba(
            16,
            24,
            40,
            .10
        );

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.section-badge::before {

    content:
        '';

    display:
        block;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        currentColor;

    box-shadow:
        0 0 0 4px
        rgba(
            255,
            255,
            255,
            .18
        );
}


.section-badge-blue {

    color:
        #0b65ff;

    background:
        linear-gradient(
            135deg,
            #eaf3ff,
            #d9eaff
        );

    border-color:
        #b8d6ff;
}


.section-badge-green {

    color:
        #079455;

    background:
        linear-gradient(
            135deg,
            #ecfdf3,
            #d9fbe8
        );

    border-color:
        #a6f4c5;
}


.section-badge-purple {

    color:
        #7a5af8;

    background:
        linear-gradient(
            135deg,
            #f4f3ff,
            #ebe9fe
        );

    border-color:
        #d9d6fe;
}


.section-badge-orange {

    color:
        #dc6803;

    background:
        linear-gradient(
            135deg,
            #fff6ed,
            #ffead5
        );

    border-color:
        #fed7aa;
}


.section-badge-cyan {

    color:
        #088ab2;

    background:
        linear-gradient(
            135deg,
            #ecfdff,
            #cff9fe
        );

    border-color:
        #a5f0fc;
}


/*
 * Feature icon card
 */

.feature-icon {

    width:
        56px !important;

    min-width:
        56px !important;

    height:
        56px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .65
        );

    border-radius:
        16px !important;

    font-size:
        21px !important;

    font-weight:
        900;

    line-height:
        1;

    box-shadow:
        0 9px 20px
        rgba(
            16,
            24,
            40,
            .09
        );

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.feature-icon:hover {

    transform:
        translateY(-2px)
        scale(1.03);

    box-shadow:
        0 14px 28px
        rgba(
            16,
            24,
            40,
            .13
        );
}


.feature-icon-blue {

    color:
        #175cd3;

    background:
        linear-gradient(
            135deg,
            #eff8ff,
            #d1e9ff
        );
}


.feature-icon-cyan {

    color:
        #088ab2;

    background:
        linear-gradient(
            135deg,
            #ecfdff,
            #cff9fe
        );
}


.feature-icon-green {

    color:
        #079455;

    background:
        linear-gradient(
            135deg,
            #ecfdf3,
            #d1fadf
        );
}


.feature-icon-purple {

    color:
        #6938ef;

    background:
        linear-gradient(
            135deg,
            #f4f3ff,
            #e9d7fe
        );
}


.feature-icon-orange {

    color:
        #dc6803;

    background:
        linear-gradient(
            135deg,
            #fff6ed,
            #fedf89
        );
}


.feature-icon-red {

    color:
        #d92d20;

    background:
        linear-gradient(
            135deg,
            #fef3f2,
            #fee4e2
        );
}


/*
 * Make cards slightly stronger visually.
 */

.feature-card {

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}


.feature-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #d0d5dd;

    box-shadow:
        0 14px 34px
        rgba(
            16,
            24,
            40,
            .08
        );
}


/*
 * Mobile tuning
 */

@media (
    max-width: 720px
) {

    .section-badge {

        min-height:
            30px;

        padding:
            6px 12px;

        font-size:
            10px !important;
    }


    .feature-icon {

        width:
            50px !important;

        min-width:
            50px !important;

        height:
            50px !important;

        border-radius:
            14px !important;

        font-size:
            19px !important;
    }

}