:root {

    color-scheme:
        dark;

    --bg:
        #080c12;

    --panel:
        #101720;

    --panel-soft:
        #0b1118;

    --panel-hover:
        #131c26;

    --border:
        #273342;

    --border-strong:
        #334253;

    --text:
        #f4f7fb;

    --soft:
        #dce6f1;

    --muted:
        #8e9baa;

    --muted-dark:
        #687787;

    --success:
        #9ef0bd;

}


*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    margin:
        0;

    scroll-behavior:
        smooth;

    background:
        var(--bg);

}


body {

    margin:
        0;

    min-width:
        0;

    min-height:
        100dvh;

    overflow-x:
        hidden;

    background:
        var(--bg);

    color:
        var(--text);

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

    -webkit-font-smoothing:
        antialiased;

}


a {

    color:
        inherit;

}


button {

    font:
        inherit;

}


[hidden] {

    display:
        none !important;

}


::selection {

    background:
        #334253;

    color:
        #fff;

}


.site-shell {

    width:
        min(100%, 1500px);

    margin:
        0 auto;

}


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


.site-header {

    position:
        relative;

    z-index:
        50;

    height:
        86px;

    display:
        grid;

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

    align-items:
        center;

    padding:
        0 clamp(22px, 5vw, 72px);

}


.brand {

    width:
        max-content;

    color:
        var(--text);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        850;

    letter-spacing:
        .24em;

}


.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

}


.desktop-nav a,
.header-link {

    color:
        var(--muted);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        650;

    transition:
        color .15s ease;

}


.desktop-nav a:hover,
.header-link:hover {

    color:
        var(--text);

}


.header-actions {

    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        18px;

}


.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    border:
        1px solid transparent;

    border-radius:
        11px;

    text-decoration:
        none;

    font-weight:
        730;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .12s ease;

}


.button:hover {

    transform:
        translateY(-1px);

}


.button-small {

    min-height:
        38px;

    padding:
        0 16px;

    font-size:
        10px;

}


.button-large {

    min-height:
        49px;

    padding:
        0 21px;

    font-size:
        11px;

}


.button-light {

    background:
        var(--text);

    color:
        var(--bg);

}


.button-light:hover {

    background:
        #ffffff;

}


.button-dark {

    border-color:
        var(--border-strong);

    background:
        var(--panel-soft);

    color:
        var(--soft);

}


.button-dark:hover {

    border-color:
        #52657a;

    background:
        var(--panel-hover);

}


.mobile-menu-button {

    display:
        none;

}



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


.hero {

    position:
        relative;

    min-height:
        760px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(480px, .9fr);

    align-items:
        center;

    gap:
        clamp(40px, 6vw, 95px);

    padding:
        80px
        clamp(22px, 6vw, 92px)
        120px;

}


.hero-glow {

    position:
        absolute;

    left:
        12%;

    top:
        15%;

    width:
        420px;

    height:
        420px;

    pointer-events:
        none;

    border-radius:
        50%;

    background:
        rgba(65, 94, 121, .10);

    filter:
        blur(100px);

}


.hero-content {

    position:
        relative;

    z-index:
        2;

}


.environment-badge {

    width:
        max-content;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        28px;

    padding:
        7px 10px;

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

    border-radius:
        999px;

    color:
        var(--muted);

    background:
        var(--panel-soft);

    font-size:
        8px;

    font-weight:
        780;

    letter-spacing:
        .15em;

}


.environment-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--success);

}


.hero h1 {

    max-width:
        720px;

    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(50px, 6.3vw, 90px);

    font-weight:
        720;

    line-height:
        .98;

    letter-spacing:
        -.055em;

}


.hero h1 span {

    display:
        block;

    color:
        var(--muted);

}


.hero-description {

    max-width:
        570px;

    margin:
        30px 0 0;

    color:
        var(--muted);

    font-size:
        clamp(14px, 1.4vw, 17px);

    line-height:
        1.75;

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        34px;

}


.hero-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        23px;

    color:
        var(--muted-dark);

    font-size:
        9px;

}


.trust-divider {

    color:
        var(--border-strong);

}



/* ============================================================
   PRODUCT PREVIEW
   ============================================================ */


.hero-preview {

    position:
        relative;

    z-index:
        2;

}


.preview-window {

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        var(--panel);

    box-shadow:
        0 45px 120px rgba(0,0,0,.38);

}


.preview-topbar {

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 17px;

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

}


.preview-brand {

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .2em;

}


.preview-status {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--muted);

    font-size:
        7px;

}


.preview-status span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--success);

}


.preview-body {

    min-height:
        450px;

    display:
        grid;

    grid-template-columns:
        170px minmax(0,1fr);

}


.preview-sidebar {

    padding:
        24px 12px;

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

    background:
        #0d141c;

}


.preview-sidebar-title {

    margin:
        0 9px 15px;

    color:
        var(--muted-dark);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.preview-conversation {

    margin-bottom:
        5px;

    padding:
        11px 10px;

    border:
        1px solid transparent;

    border-radius:
        9px;

}


.preview-conversation.active {

    border-color:
        var(--border);

    background:
        var(--panel-soft);

}


.preview-conversation strong {

    display:
        block;

    color:
        var(--soft);

    font-size:
        8px;

}


.preview-conversation span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted-dark);

    font-size:
        6px;

}


.preview-chat {

    min-width:
        0;

    display:
        grid;

    grid-template-rows:
        auto 1fr auto;

    background:
        var(--bg);

}


.preview-chat-header {

    min-height:
        61px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        0 18px;

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

}


.preview-chat-header strong {

    font-size:
        9px;

}


.preview-chat-header span {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        6px;

}


.preview-messages {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        10px;

    padding:
        25px;

}


.preview-message {

    max-width:
        75%;

    padding:
        10px 12px;

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

    border-radius:
        12px;

    color:
        var(--soft);

    background:
        var(--panel);

    font-size:
        7px;

    line-height:
        1.55;

}


.preview-message.sent {

    align-self:
        flex-end;

    background:
        #16202b;

}


.preview-composer {

    min-height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin:
        12px;

    padding:
        7px 7px 7px 12px;

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

    border-radius:
        12px;

    color:
        var(--muted-dark);

    background:
        var(--panel-soft);

    font-size:
        7px;

}


.preview-composer strong {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 34px;

    border-radius:
        9px;

    background:
        var(--text);

    color:
        var(--bg);

}



/* ============================================================
   SHARED SECTION
   ============================================================ */


.section {

    padding:
        145px
        clamp(22px, 8vw, 125px);

}


.section-centered {

    text-align:
        center;

}


.section-label {

    margin-bottom:
        17px;

    color:
        var(--muted-dark);

    font-size:
        8px;

    font-weight:
        820;

    letter-spacing:
        .17em;

}


.section-centered h2,
.security-heading h2,
.final-cta h2 {

    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(36px, 5vw, 65px);

    font-weight:
        680;

    line-height:
        1.05;

    letter-spacing:
        -.045em;

}


.section-centered h2 {

    max-width:
        850px;

    margin-left:
        auto;

    margin-right:
        auto;

}


.section-lead {

    max-width:
        680px;

    margin:
        25px auto 0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.8;

}



/* ============================================================
   PRODUCT GRID
   ============================================================ */


.product-grid {

    display:
        grid;

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

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

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

}


.product-card {

    position:
        relative;

    min-height:
        430px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        42px;

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

    background:
        var(--panel-soft);

    transition:
        background .18s ease;

}


.product-card:last-child {

    border-right:
        0;

}


.product-card:hover {

    background:
        var(--panel);

}


.product-number {

    color:
        var(--muted-dark);

    font-size:
        8px;

    font-weight:
        750;

}


.product-icon {

    width:
        47px;

    height:
        47px;

    display:
        grid;

    place-items:
        center;

    margin-top:
        55px;

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

    border-radius:
        13px;

    color:
        var(--success);

}


.product-card h3 {

    margin:
        26px 0 0;

    font-size:
        23px;

}


.product-card p {

    max-width:
        340px;

    margin:
        12px 0 0;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.7;

}


.product-card > a {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    width:
        max-content;

    margin-top:
        auto;

    color:
        var(--soft);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        720;

}



/* ============================================================
   SECURITY SECTION
   ============================================================ */


.security-section {

    display:
        grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        clamp(60px, 8vw, 130px);

    padding:
        150px
        clamp(22px, 8vw, 125px);

}


.security-heading {

    position:
        sticky;

    top:
        80px;

    align-self:
        start;

}


.security-heading p {

    max-width:
        480px;

    margin:
        25px 0 0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.75;

}


.security-list {

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

}


.security-item {

    display:
        grid;

    grid-template-columns:
        45px 1fr;

    gap:
        22px;

    padding:
        27px 0;

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

}


.security-index {

    color:
        var(--muted-dark);

    font-size:
        8px;

}


.security-item strong {

    color:
        var(--soft);

    font-size:
        13px;

}


.security-item p {

    max-width:
        540px;

    margin:
        7px 0 0;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.65;

}



/* ============================================================
   PRINCIPLE
   ============================================================ */


.principle-section {

    min-height:
        500px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        100px 24px;

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

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

    text-align:
        center;

    background:
        var(--panel-soft);

}


.principle-mark {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        14px;

    color:
        var(--success);

}


.principle-section blockquote {

    max-width:
        920px;

    margin:
        38px auto 0;

    color:
        var(--text);

    font-size:
        clamp(30px, 4.5vw, 58px);

    font-weight:
        600;

    line-height:
        1.12;

    letter-spacing:
        -.04em;

}


.principle-section p {

    margin:
        28px 0 0;

    color:
        var(--muted-dark);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .16em;

}



/* ============================================================
   FINAL CTA
   ============================================================ */


.final-cta {

    padding:
        125px
        clamp(22px, 8vw, 125px);

}


.final-cta-inner {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        50px;

    padding:
        60px;

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

    border-radius:
        22px;

    background:
        var(--panel);

}


.final-actions {

    display:
        flex;

    gap:
        9px;

    flex-shrink:
        0;

}



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


.site-footer {

    display:
        grid;

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

    align-items:
        end;

    gap:
        30px;

    padding:
        55px
        clamp(22px, 5vw, 72px);

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

}


.footer-brand p {

    margin:
        12px 0 0;

    color:
        var(--muted-dark);

    font-size:
        9px;

}


.footer-links {

    display:
        flex;

    gap:
        24px;

}


.footer-links a {

    color:
        var(--muted);

    text-decoration:
        none;

    font-size:
        9px;

}


.footer-links a:hover {

    color:
        var(--text);

}


.footer-meta {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        7px;

    color:
        var(--muted-dark);

    font-size:
        8px;

}


.footer-dev {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

}


.footer-dev span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--success);

}



/* ============================================================
   MOBILE MENU
   ============================================================ */


.mobile-menu {

    position:
        relative;

    z-index:
        40;

    margin:
        0 14px;

    padding:
        12px;

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

    border-radius:
        14px;

    background:
        var(--panel);

}


.mobile-menu > a,
.mobile-account-actions > a:not(.button) {

    display:
        block;

    padding:
        13px;

    color:
        var(--soft);

    text-decoration:
        none;

    font-size:
        11px;

}


.mobile-account-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    margin-top:
        9px;

    padding-top:
        12px;

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

}



/* ============================================================
   TABLET
   ============================================================ */


@media (max-width: 1000px) {

    .site-header {

        grid-template-columns:
            1fr auto;

    }


    .desktop-nav {

        display:
            none;

    }


    .header-actions {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            flex;

        flex-direction:
            column;

        gap:
            5px;

        width:
            39px;

        height:
            39px;

        align-items:
            center;

        justify-content:
            center;

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

        border-radius:
            10px;

        background:
            var(--panel-soft);

    }


    .mobile-menu-button span {

        width:
            15px;

        height:
            1px;

        background:
            var(--soft);

    }


    .hero {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        padding-top:
            100px;

    }


    .hero-content {

        text-align:
            center;

    }


    .environment-badge {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero h1,
    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-actions,
    .hero-trust {

        justify-content:
            center;

    }


    .hero-preview {

        width:
            min(100%, 720px);

        margin:
            45px auto 0;

    }


    .security-section {

        grid-template-columns:
            1fr;

    }


    .security-heading {

        position:
            static;

    }


    .final-cta-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .site-footer {

        grid-template-columns:
            1fr;

    }


    .footer-links {

        order:
            2;

    }


    .footer-meta {

        order:
            3;

        align-items:
            flex-start;

    }

}



/* ============================================================
   MOBILE
   ============================================================ */


@media (max-width: 700px) {

    .site-header {

        height:
            72px;

        padding:
            0 18px;

    }


    .hero {

        gap:
            60px;

        padding:
            85px 18px 90px;

    }


    .hero h1 {

        font-size:
            clamp(45px, 14vw, 66px);

    }


    .hero-description {

        font-size:
            13px;

    }


    .hero-actions {

        display:
            grid;

        grid-template-columns:
            1fr;

    }


    .hero-actions .button {

        width:
            100%;

    }


    .hero-trust {

        font-size:
            8px;

    }


    .preview-window {

        border-radius:
            17px;

    }


    .preview-body {

        min-height:
            360px;

        grid-template-columns:
            1fr;

    }


    .preview-sidebar {

        display:
            none;

    }


    .preview-chat-header {

        min-height:
            55px;

    }


    .section {

        padding:
            100px 20px;

    }


    .section-centered h2,
    .security-heading h2,
    .final-cta h2 {

        font-size:
            39px;

    }


    .product-grid {

        grid-template-columns:
            1fr;

    }


    .product-card {

        min-height:
            340px;

        padding:
            30px 22px;

        border-right:
            0;

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

    }


    .product-card:last-child {

        border-bottom:
            0;

    }


    .product-icon {

        margin-top:
            38px;

    }


    .security-section {

        gap:
            60px;

        padding:
            100px 20px;

    }


    .security-item {

        grid-template-columns:
            35px 1fr;

        gap:
            14px;

    }


    .principle-section {

        min-height:
            420px;

        padding:
            80px 20px;

    }


    .principle-section blockquote {

        font-size:
            34px;

    }


    .final-cta {

        padding:
            80px 14px;

    }


    .final-cta-inner {

        padding:
            35px 24px;

        border-radius:
            17px;

    }


    .final-actions {

        width:
            100%;

        display:
            grid;

        grid-template-columns:
            1fr;

    }


    .site-footer {

        padding:
            45px 20px;

    }


    .footer-links {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            14px;

    }

}



/* ============================================================
   SMALL MOBILE
   ============================================================ */


@media (max-width: 390px) {

    .hero {

        padding-left:
            14px;

        padding-right:
            14px;

    }


    .hero h1 {

        font-size:
            47px;

    }


    .preview-messages {

        padding:
            18px;

    }


    .preview-message {

        max-width:
            88%;

    }

}



/* ============================================================
   REDUCED MOTION
   ============================================================ */


@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        transition-duration:
            .01ms !important;

    }

}