/* =========================================================
   NIMCO TOOLS — GLOBAL LANDING COMPONENTS
   Navbar / Menu / Footer
========================================================= */

:root {
    --landing-green: #00e887;
    --landing-green-light: #69f6aa;
}


/* =========================================================
   GLOBAL LANDING CONTAINER
========================================================= */

.landing-container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   NAVIGATION
========================================================= */

.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;

    background: rgba(4, 7, 13, 0.88);

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

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    will-change: transform;
}


.landing-nav + main {
    padding-top: 0;
}


.landing-nav .nav-inner {
    width:
        min(1180px, calc(100% - 32px));

    min-height:
        76px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}


/* =========================================================
   BRAND
========================================================= */

.landing-nav .brand,
.landing-footer .brand {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

    text-decoration:
        none;
}


.landing-nav .brand-logo,
.landing-footer .brand-logo {

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border-radius:
        12px;

    background:
        rgba(0,232,135,.08);

    border:
        1px solid
        rgba(0,232,135,.18);

    box-shadow:
        0 0 24px
        rgba(0,232,135,.12);
}


.landing-nav .brand-logo img,
.landing-footer .brand-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.landing-nav .brand-name,
.landing-footer .brand-name {

    color:
        #fff;

    font-size:
        15px;

    font-weight:
        800;

    letter-spacing:
        -.25px;
}


.landing-nav .brand-sub,
.landing-footer .brand-sub {

    display:
        block;

    margin-top:
        1px;

    color:
        rgba(255,255,255,.38);

    font-size:
        8px;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


/* =========================================================
   DESKTOP NAV LINKS
========================================================= */

.nav-links {

    display:
        none;

    align-items:
        center;

    gap:
        28px;
}


.nav-links a {

    color:
        rgba(255,255,255,.58);

    font-size:
        12px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        .2s ease;
}


.nav-links a:hover {

    color:
        var(--landing-green-light);
}


/* =========================================================
   NAV ACTIONS
========================================================= */

.nav-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.nav-login {

    padding:
        9px 11px;

    color:
        rgba(255,255,255,.72);

    font-size:
        11px;

    font-weight:
        650;

    border-radius:
        10px;

    text-decoration:
        none;

    transition:
        .2s ease;
}


.nav-login:hover {

    color:
        #fff;
}


.nav-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    min-height:
        36px;

    padding:
        0 13px;

    color:
        #03140c;

    background:
        var(--landing-green);

    border-radius:
        10px;

    font-size:
        10px;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 0 22px
        rgba(0,232,135,.22);

    transition:
        .25s ease;
}


.nav-cta:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 0 30px
        rgba(0,232,135,.38);
}


/* =========================================================
   MENU TOGGLE
========================================================= */

.landing-menu-toggle {

    width:
        42px;

    height:
        42px;

    display:
        none;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

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

    border-radius:
        12px;

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

    color:
        #f5f7fa;

    cursor:
        pointer;

    transition:
        .22s ease;
}


.landing-menu-toggle span {

    width:
        17px;

    height:
        1.5px;

    border-radius:
        999px;

    background:
        currentColor;

    transition:
        transform .22s ease,
        opacity .22s ease;
}


.landing-menu-toggle:hover {

    color:
        var(--landing-green);

    border-color:
        rgba(0,232,135,.25);

    background:
        rgba(0,232,135,.07);
}


/* =========================================================
   MENU OVERLAY
========================================================= */

.landing-menu-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        11000;

    background:
        rgba(0,0,0,.68);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.landing-menu-open .landing-menu-overlay {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* =========================================================
   SIDE MENU
========================================================= */

.landing-menu {

    position:
        fixed;

    top:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        11010;

    width:
        min(410px, 92vw);

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

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

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(0,232,135,.10),
            transparent 35%
        ),

        linear-gradient(
            160deg,
            #0b1421 0%,
            #060c15 52%,
            #04070d 100%
        );

    box-shadow:
        -25px 0 80px
        rgba(0,0,0,.55);

    transform:
        translate3d(100%,0,0);

    visibility:
        hidden;

    transition:
        transform .28s cubic-bezier(.22,.8,.25,1),
        visibility .28s ease;
}


.landing-menu-open .landing-menu {

    transform:
        translate3d(0,0,0);

    visibility:
        visible;
}


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

.landing-menu-header {

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        27px 22px 21px;

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


.landing-menu-heading {

    min-width:
        0;
}


.landing-menu-eyebrow {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--landing-green);

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}


.landing-menu-heading h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        25px;

    line-height:
        1.1;

    font-weight:
        750;

    letter-spacing:
        -.6px;
}


.landing-menu-heading p {

    margin:
        6px 0 0;

    color:
        #8997a7;

    font-size:
        11px;

    line-height:
        1.45;
}


/* =========================================================
   MENU CLOSE
========================================================= */

.landing-menu-close {

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        11px;

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

    color:
        #b8c3cf;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.landing-menu-close svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;
}


.landing-menu-close:hover {

    color:
        var(--landing-green);

    border-color:
        rgba(0,232,135,.24);

    background:
        rgba(0,232,135,.07);
}


/* =========================================================
   MENU CONTENT
========================================================= */

.landing-menu-content {

    flex:
        1;

    min-height:
        0;

    overflow-y:
        auto;

    padding:
        16px 18px 20px;

    overscroll-behavior:
        contain;
}


/* =========================================================
   MENU CARDS
========================================================= */

.landing-menu-card {

    position:
        relative;

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        9px;

    padding:
        13px;

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

    border-radius:
        16px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035),

        0 9px 25px
        rgba(0,0,0,.18);

    color:
        inherit;

    text-decoration:
        none;

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


.landing-menu-card:hover {

    transform:
        translateX(-2px);

    border-color:
        rgba(0,232,135,.20);

    background:

        linear-gradient(
            145deg,
            rgba(0,232,135,.085),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.25),

        0 0 22px
        rgba(0,232,135,.05);
}


.landing-menu-card:active {

    transform:
        scale(.985);
}


/* =========================================================
   MENU ICON
========================================================= */

.landing-menu-icon {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(0,232,135,.14);

    border-radius:
        13px;

    background:
        rgba(0,232,135,.065);

    color:
        var(--landing-green);
}


.landing-menu-icon svg {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   MENU TEXT
========================================================= */

.landing-menu-card-text {

    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.landing-menu-card-text strong {

    color:
        #f5f7fa;

    font-size:
        13px;

    font-weight:
        700;
}


.landing-menu-card-text small {

    color:
        #7f8d9c;

    font-size:
        10px;

    line-height:
        1.4;
}


.landing-menu-arrow {

    flex-shrink:
        0;

    color:
        #536273;

    font-size:
        17px;

    transition:
        .2s ease;
}


.landing-menu-card:hover
.landing-menu-arrow {

    color:
        var(--landing-green);

    transform:
        translateX(2px);
}


/* =========================================================
   ACCOUNT CARD
========================================================= */

.landing-menu-account {

    margin-top:
        17px;

    padding:
        17px;

    border:
        1px solid
        rgba(0,232,135,.14);

    border-radius:
        17px;

    background:

        linear-gradient(
            145deg,
            rgba(0,232,135,.075),
            rgba(255,255,255,.025)
        );
}


.landing-menu-account-heading {

    display:
        flex;

    flex-direction:
        column;
}


.landing-menu-account-heading
.landing-menu-eyebrow {

    margin-bottom:
        4px;
}


.landing-menu-account-heading strong {

    color:
        #f5f7fa;

    font-size:
        13px;

    font-weight:
        700;
}


.landing-menu-account-actions {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;

    margin-top:
        13px;
}


.landing-menu-signin,
.landing-menu-signup {

    min-height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    font-size:
        11px;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        .2s ease;
}


.landing-menu-signin {

    color:
        #dce5ed;

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

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


.landing-menu-signin:hover {

    border-color:
        rgba(0,232,135,.25);

    color:
        var(--landing-green);
}


.landing-menu-signup {

    color:
        #02130b;

    background:

        linear-gradient(
            135deg,
            #00e887,
            #00bd70
        );

    box-shadow:
        0 0 20px
        rgba(0,232,135,.16);
}


.landing-menu-signup:hover {

    box-shadow:
        0 0 28px
        rgba(0,232,135,.30);

    transform:
        translateY(-1px);
}


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

.landing-menu-footer {

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        13px 20px
        calc(13px + env(safe-area-inset-bottom));

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

    background:
        rgba(4,7,13,.65);
}


.landing-menu-footer span:first-child {

    color:
        rgba(245,247,250,.58);

    font-size:
        9px;

    font-weight:
        700;
}


.landing-menu-footer span:last-child {

    color:
        rgba(0,232,135,.55);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.landing-menu-open {
    overflow:
        hidden;
}


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

.landing-footer {

    padding:
        70px 0 25px;

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


.footer-grid {

    display:
        grid;

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

    gap:
        50px;
}


.footer-description {

    max-width:
        330px;

    margin:
        16px 0 0;

    color:
        rgba(255,255,255,.34);

    font-size:
        10px;

    line-height:
        1.7;
}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.footer-column h4 {

    margin:
        0 0 14px;

    color:
        rgba(255,255,255,.75);

    font-size:
        10px;

    font-weight:
        750;
}


.footer-column a {

    display:
        block;

    width:
        fit-content;

    margin:
        8px 0;

    color:
        rgba(255,255,255,.35);

    font-size:
        9px;

    text-decoration:
        none;

    transition:
        .2s ease;
}


.footer-column a:hover {

    color:
        var(--landing-green-light);
}


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

.footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        50px;

    padding-top:
        18px;

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

    color:
        rgba(255,255,255,.23);

    font-size:
        8px;
}


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

@media (min-width: 901px) {

    .nav-links {
        display:
            flex;
    }

}


@media (max-width: 900px) {

    .landing-menu-toggle {
        display:
            flex;
    }


    .nav-actions .nav-login,
    .nav-actions .nav-cta {
        display:
            none;
    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 640px) {

    .landing-nav .nav-inner {

        min-height:
            62px;

    }


    .landing-container {

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

    }


    .landing-footer {

        padding:
            45px 0
            25px;

    }


    .footer-grid {

        gap:
            30px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }


    .footer-description {

        max-width:
            330px;

        margin-top:
            10px;

        font-size:
            9px;

    }


    .footer-bottom {

        align-items:
            flex-start;

        flex-wrap:
            wrap;

        margin-top:
            35px;

    }

}


@media (max-width: 480px) {

    .landing-nav .nav-inner {

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

    }


    .landing-nav .brand-logo,
    .landing-footer .brand-logo {

        width:
            35px;

        height:
            35px;

        border-radius:
            10px;

    }


    .landing-nav .brand-name,
    .landing-footer .brand-name {

        font-size:
            14px;

    }


    .landing-nav .brand-sub,
    .landing-footer .brand-sub {

        font-size:
            7px;

    }


    .landing-menu {

        width:
            94vw;

    }


    .landing-menu-header {

        padding:
            23px 17px 18px;

    }


    .landing-menu-content {

        padding:
            13px 13px 18px;

    }


    .landing-menu-card {

        min-height:
            72px;

        padding:
            11px;

        border-radius:
            14px;

    }


    .landing-menu-icon {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

    }


    .landing-menu-card-text strong {

        font-size:
            12px;

    }


    .landing-menu-card-text small {

        font-size:
            9px;

    }

}