/* =========================================================
   VAERO ENGINE — WELCOME SCREEN
   PREMIUM PORTAL / AUTH EXPERIENCE
   FINAL CONSOLIDATED EDITION

   STRUCTURE
   ---------------------------------------------------------
   • Fixed onboarding viewport
   • No body/document scroll dependency
   • Internal mobile scroll only when required
   • Desktop split experience
   • VAERO gold + deep atmospheric identity
   • Portal entrance transition
   • Safe-area support
   • Existing HTML / JS class names preserved
========================================================= */


/* =========================================================
   01. TOKENS
========================================================= */

:root{
    --welcome-bg:#030914;
    --welcome-bg-deep:#01050b;

    --welcome-text:#f4f1e9;

    --welcome-muted:
        rgba(224,229,237,.58);

    --welcome-muted-soft:
        rgba(224,229,237,.38);

    --welcome-gold:#e6c16f;
    --welcome-gold-light:#f4dda5;
    --welcome-gold-dark:#b9873c;

    --welcome-blue:#67adf5;

    --welcome-border:
        rgba(255,255,255,.09);

    --welcome-border-strong:
        rgba(255,255,255,.13);

    --welcome-surface:
        rgba(7,11,19,.74);

    --welcome-radius-lg:28px;
    --welcome-radius-md:18px;
    --welcome-radius-sm:10px;

    --welcome-ease:
        cubic-bezier(.22,.8,.2,1);

    --welcome-ease-portal:
        cubic-bezier(.55,.05,.85,.35);
}


/* =========================================================
   02. SCREEN
========================================================= */

.vaero-welcome-screen{
    position:fixed;

    inset:0;

    z-index:100000;

    width:100%;
    height:100dvh;

    min-width:0;
    min-height:0;

    overflow:hidden;

    color:
        var(--welcome-text);

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(36,55,78,.18),
            transparent 43%
        ),
        linear-gradient(
            180deg,
            #02060d 0%,
            var(--welcome-bg) 100%
        );

    opacity:1;

    overscroll-behavior:none;

    isolation:isolate;

    transition:
        opacity .5s ease,
        transform .8s var(--welcome-ease);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}


/* =========================================================
   03. BOX MODEL
========================================================= */

.vaero-welcome-screen,
.vaero-welcome-screen *,
.vaero-welcome-screen *::before,
.vaero-welcome-screen *::after{
    box-sizing:border-box;
}


/* =========================================================
   04. GLOBAL OVERLAY
========================================================= */

.vaero-welcome-screen::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 32%,
            transparent 0%,
            transparent 40%,
            rgba(0,4,10,.12) 72%,
            rgba(0,3,8,.38) 100%
        );
}

.vaero-welcome-screen::after{
    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,3,8,.08),
            rgba(0,3,8,.18) 58%,
            rgba(0,3,8,.42)
        );
}


/* =========================================================
   05. BACKGROUND SCENE
========================================================= */

.welcome-scene{
    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            #030914,
            #06101c
        );
}

.welcome-scene picture,
.welcome-scene img{
    display:block;

    width:100%;
    height:100%;
}

.welcome-scene img{
    object-fit:cover;
    object-position:center bottom;

    transform:
        scale(1);

    transform-origin:
        50% 54%;

    filter:
        brightness(.72)
        saturate(.9);

    transition:
        transform 1.15s
        var(--welcome-ease),

        filter .75s ease;
}


/* =========================================================
   06. STARS
========================================================= */

.welcome-stars{
    position:absolute;

    inset:-113px 0 0;

    z-index:1;

    pointer-events:none;

    opacity:.27;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.72)
            0
            .7px,
            transparent 1.2px
        ),
        radial-gradient(
            circle,
            rgba(230,193,111,.52)
            0
            .6px,
            transparent 1.1px
        );

    background-size:
        113px 113px,
        173px 173px;

    background-position:
        18px 24px,
        67px 91px;

    animation:
        welcomeStarsDrift
        36s
        linear
        infinite;
}


/* =========================================================
   07. MOBILE-FIRST LAYOUT
========================================================= */

.welcome-layout{
    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    padding:
        calc(
            22px +
            env(
                safe-area-inset-top,
                0px
            )
        )
        20px
        calc(
            22px +
            env(
                safe-area-inset-bottom,
                0px
            )
        );

    gap:24px;

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior-y:contain;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}

.welcome-layout::-webkit-scrollbar{
    display:none;
}


/* =========================================================
   08. LEFT / RIGHT
========================================================= */

.welcome-left,
.welcome-right{
    width:100%;

    min-width:0;
}

.welcome-left{
    display:flex;

    flex-direction:column;
}

.welcome-right{
    display:flex;

    align-items:flex-end;

    margin-top:auto;
}


/* =========================================================
   09. BRAND
========================================================= */

.welcome-brand{
    position:relative;

    margin-top:8px;

    color:
        var(--welcome-gold);

    text-align:center;

    user-select:none;
}

.welcome-brand strong{
    display:block;

    margin:0;

    color:transparent;

    background:
        linear-gradient(
            120deg,
            #aa8036 0%,
            var(--welcome-gold-light) 47%,
            #b88b3f 100%
        );

    -webkit-background-clip:text;
    background-clip:text;

    font-size:38px;
    font-weight:650;

    line-height:1;

    letter-spacing:.22em;
    text-indent:.22em;

    text-shadow:
        0 0 28px
        rgba(230,193,111,.06);
}

.welcome-brand span{
    display:block;

    margin-top:9px;

    color:
        var(--welcome-gold);

    font-size:10px;
    font-weight:600;

    line-height:1;

    letter-spacing:.48em;
    text-indent:.48em;

    opacity:.92;
}


/* =========================================================
   10. LEGACY MOBILE MESSAGE
========================================================= */

.welcome-message{
    width:100%;
    max-width:540px;

    margin:
        30px
        auto
        0;

    text-align:center;
}

.welcome-message h1{
    margin:0;

    color:
        var(--welcome-text);

    font-size:
        clamp(
            33px,
            9vw,
            43px
        );

    font-weight:690;

    line-height:1.06;

    letter-spacing:-.04em;

    text-wrap:balance;
}

.welcome-message h1 span{
    display:block;

    margin-top:5px;

    color:transparent;

    background:
        linear-gradient(
            100deg,
            #c99b4d,
            var(--welcome-gold-light),
            #b78539
        );

    -webkit-background-clip:text;
    background-clip:text;
}

.welcome-message p{
    width:
        min(
            100%,
            420px
        );

    margin:
        16px
        auto
        0;

    color:
        var(--welcome-muted);

    font-size:14px;

    line-height:1.55;
}


/* =========================================================
   11. DESKTOP INTRO — BASE
========================================================= */

.welcome-intro{
    width:100%;

    min-width:0;
}

.welcome-eyebrow{
    margin:
        0
        0
        18px;

    color:
        var(--welcome-gold);

    font-size:10px;
    font-weight:720;

    line-height:1.2;

    letter-spacing:.23em;

    text-transform:uppercase;
}

.welcome-intro h1{
    margin:0;

    color:
        var(--welcome-text);

    font-weight:620;

    letter-spacing:-.045em;

    text-wrap:balance;
}

.welcome-intro h1 span{
    display:block;

    color:
        var(--welcome-gold);
}

.welcome-description{
    color:
        rgba(236,232,223,.68);
}


/* =========================================================
   12. FEATURES
========================================================= */

.welcome-features{
    min-width:0;
}

.welcome-feature{
    min-width:0;
}

.welcome-feature-icon{
    color:
        var(--welcome-gold);
}

.welcome-feature strong{
    color:
        rgba(247,243,235,.94);
}

.welcome-feature p{
    color:
        rgba(228,224,216,.48);
}


/* =========================================================
   13. COPYRIGHT
========================================================= */

.welcome-copyright{
    color:
        rgba(233,228,218,.34);
}


/* =========================================================
   14. LEGACY ACTION CARD
========================================================= */

.welcome-actions{
    position:relative;

    z-index:3;

    width:100%;
    max-width:520px;

    margin:
        0
        auto;

    padding:21px;

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

    border-radius:24px;

    background:
        rgba(6,10,17,.72);

    box-shadow:
        0
        24px
        60px
        rgba(0,0,0,.28),

        inset
        0
        1px
        0
        rgba(255,255,255,.02);

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


/* =========================================================
   15. COMMON BUTTONS
========================================================= */

.welcome-primary,
.welcome-secondary{
    width:100%;
    min-height:55px;

    border-radius:16px;

    outline:none;

    font:inherit;

    font-size:16px;
    font-weight:650;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform .18s
        var(--welcome-ease),

        opacity .18s ease,

        background .18s ease,

        border-color .18s ease,

        box-shadow .18s ease;
}

.welcome-primary{
    border:0;

    color:#17120a;

    background:
        linear-gradient(
            100deg,
            #d2a958,
            #f2d895,
            #c89743
        );

    box-shadow:
        0
        12px
        34px
        rgba(203,153,67,.18),

        inset
        0
        1px
        0
        rgba(255,255,255,.46);
}

.welcome-primary:hover{
    filter:
        brightness(1.035);
}

.welcome-secondary{
    border:
        1px solid
        rgba(230,193,111,.5);

    color:
        var(--welcome-text);

    background:
        rgba(5,10,18,.46);

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

.welcome-secondary:hover{
    border-color:
        rgba(230,193,111,.66);

    background:
        rgba(230,193,111,.075);
}

.welcome-primary:active,
.welcome-secondary:active{
    transform:
        scale(.985);
}

.welcome-primary:focus-visible,
.welcome-secondary:focus-visible{
    outline:
        2px solid
        rgba(230,193,111,.58);

    outline-offset:3px;
}


/* =========================================================
   16. DIVIDER
========================================================= */

.welcome-divider{
    display:grid;

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

    align-items:center;

    gap:14px;

    margin:
        13px
        0;

    color:#7f8792;
}

.welcome-divider span{
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18)
        );
}

.welcome-divider span:last-child{
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.18),
            transparent
        );
}

.welcome-divider small{
    font-size:12px;
}


/* =========================================================
   17. SECURITY
========================================================= */

.welcome-security{
    margin:
        14px
        0
        0;

    color:
        rgba(214,220,229,.46);

    font-size:12px;

    line-height:1.5;

    text-align:center;
}


/* =========================================================
   18. AUTH PANEL BASE
========================================================= */

.welcome-auth-panel{
    position:relative;

    width:100%;

    min-width:0;

    overflow:hidden;

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

    background:
        var(--welcome-surface);

    backdrop-filter:
        blur(24px)
        saturate(115%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(115%);
}

.welcome-auth-panel::before{
    content:"";

    position:absolute;

    top:0;
    left:14%;

    width:72%;
    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.1),
            transparent
        );
}


/* =========================================================
   19. AUTH LOGO
========================================================= */

.welcome-auth-logo{
    color:
        var(--welcome-gold);
}


/* =========================================================
   20. AUTH HEADING
========================================================= */

.welcome-auth-heading{
    min-width:0;
}

.welcome-auth-heading > p{
    color:
        var(--welcome-gold);

    text-transform:uppercase;
}

.welcome-auth-heading h2{
    color:
        var(--welcome-text);
}

.welcome-auth-heading span{
    color:
        rgba(232,228,219,.48);
}


/* =========================================================
   21. AUTH FORM
========================================================= */

.welcome-auth-form{
    display:grid;

    min-width:0;
}

.welcome-auth-form label{
    display:grid;

    min-width:0;
}

.welcome-auth-form label > span{
    color:
        rgba(243,239,231,.72);
}


/* =========================================================
   22. INPUT WRAP
========================================================= */

.welcome-input-wrap{
    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    min-width:0;

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

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

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

.welcome-input-wrap:focus-within{
    border-color:
        rgba(222,181,105,.52);

    background:
        rgba(222,181,105,.035);

    box-shadow:
        0
        0
        0
        3px
        rgba(222,181,105,.055);
}

.welcome-input-wrap > span{
    flex:0 0 auto;

    color:
        rgba(255,255,255,.48);
}


/* =========================================================
   23. INPUTS
========================================================= */

.welcome-input-wrap input,
.welcome-auth-form input{
    min-width:0;

    outline:none;

    color:
        var(--welcome-text);

    caret-color:
        var(--welcome-gold);

    font-family:inherit;
}

.welcome-input-wrap input::placeholder,
.welcome-auth-form input::placeholder{
    color:
        rgba(255,255,255,.28);
}


/* =========================================================
   24. PASSWORD TOGGLE
========================================================= */

.welcome-password-toggle{
    flex:0 0 auto;

    border:0;

    outline:none;

    background:transparent;

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

    font:inherit;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        color .18s ease;
}

.welcome-password-toggle:hover{
    color:
        var(--welcome-gold-light);
}

.welcome-password-toggle:focus-visible{
    outline:
        1px solid
        rgba(230,193,111,.45);

    outline-offset:2px;
}


/* =========================================================
   25. FORGOT PASSWORD
========================================================= */

.welcome-forgot-password{
    border:0;

    outline:none;

    background:transparent;

    color:
        #d2a85e;

    font:inherit;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        color .18s ease,
        opacity .18s ease;
}

.welcome-forgot-password:hover{
    color:
        var(--welcome-gold-light);
}


/* =========================================================
   26. LEARN MORE
========================================================= */

.welcome-learn-more{
    color:
        #d2aa62;

    text-decoration:none;

    transition:
        color .18s ease,
        opacity .18s ease;
}

.welcome-learn-more:hover{
    color:
        var(--welcome-gold-light);
}


/* =========================================================
   27. THEME TOGGLE BASE
========================================================= */

.welcome-theme-toggle{
    z-index:5;
}

.welcome-theme-toggle button{
    outline:none;

    font-family:inherit;

    -webkit-tap-highlight-color:transparent;
}

.welcome-theme-toggle button:focus-visible{
    outline:
        1px solid
        rgba(230,193,111,.55);

    outline-offset:1px;
}


/* =========================================================
   28. ENTERING STATE
========================================================= */

.vaero-welcome-screen.is-entering{
    pointer-events:none;
}

.vaero-welcome-screen.is-entering
.welcome-stars{
    opacity:0;

    transform:
        scale(1.08);

    transition:
        opacity .45s ease,
        transform .8s ease;
}

.vaero-welcome-screen.is-entering
.welcome-layout{
    opacity:0;

    transform:
        translateY(-10px)
        scale(.985);

    pointer-events:none;

    transition:
        opacity .38s ease,
        transform .52s
        var(--welcome-ease);
}

.vaero-welcome-screen.is-entering
.welcome-brand,
.vaero-welcome-screen.is-entering
.welcome-intro,
.vaero-welcome-screen.is-entering
.welcome-auth-panel,
.vaero-welcome-screen.is-entering
.welcome-message,
.vaero-welcome-screen.is-entering
.welcome-actions{
    opacity:0;

    transform:
        translateY(-20px)
        scale(.985);

    transition:
        opacity .38s ease,
        transform .52s
        var(--welcome-ease);
}


/* =========================================================
   29. PORTAL ZOOM
========================================================= */

.vaero-welcome-screen.is-entering
.welcome-scene img{
    transform:
        scale(1.65);

    filter:
        brightness(1.28)
        saturate(1.08);

    transition:
        transform
        1.05s
        var(--welcome-ease-portal),

        filter
        .75s
        ease-in;
}


/* =========================================================
   30. CLOSING STATE
========================================================= */

.vaero-welcome-screen.is-closing{
    opacity:0;

    transform:
        scale(1.02);

    pointer-events:none;
}


/* =========================================================
   31. BRAIN VISIBILITY
========================================================= */

body:has(.vaero-welcome-screen)
.brain-fab,
body:has(.discovery-screen)
.brain-fab{
    display:none;
}


/* =========================================================
   32. MOBILE AUTH SUPPORT
========================================================= */

@media (max-width:768px){

    .welcome-intro,
    .welcome-auth-panel,
    .welcome-theme-toggle,
    .welcome-copyright{
        max-width:100%;
    }

    .welcome-auth-panel{
        border-radius:22px;

        padding:22px;

        box-shadow:
            0
            24px
            58px
            rgba(0,0,0,.32);
    }

    .welcome-auth-logo{
        display:flex;

        align-items:center;
        justify-content:center;

        width:56px;
        height:56px;

        margin:
            0
            auto
            13px;

        font-size:42px;

        line-height:1;

        transform:
            scaleX(1.2);
    }

    .welcome-auth-heading{
        margin:
            0
            0
            22px;

        text-align:center;
    }

    .welcome-auth-heading > p{
        margin:
            0
            0
            9px;

        font-size:9px;

        font-weight:700;

        letter-spacing:.2em;
    }

    .welcome-auth-heading h2{
        margin:0;

        font-size:22px;

        font-weight:560;

        letter-spacing:-.025em;
    }

    .welcome-auth-heading span{
        display:block;

        margin-top:8px;

        font-size:12px;

        line-height:1.5;
    }

    .welcome-auth-form{
        gap:14px;
    }

    .welcome-auth-form label{
        gap:7px;
    }

    .welcome-auth-form label > span{
        font-size:11px;
    }

    .welcome-input-wrap{
        height:48px;

        padding:
            0
            13px;

        border-radius:10px;
    }

    .welcome-input-wrap > span{
        width:20px;

        font-size:13px;
    }

    .welcome-input-wrap input{
        flex:1;

        width:auto;
        height:100%;

        padding:
            0
            7px;

        border:0;

        background:transparent;

        box-shadow:none;

        font-size:16px !important;
    }

    .welcome-password-toggle{
        padding:5px;
    }

    .welcome-forgot-password{
        justify-self:end;

        margin-top:-5px;

        padding:0;

        font-size:11px;
    }

    .welcome-auth-panel
    .welcome-primary,
    .welcome-auth-panel
    .welcome-secondary{
        height:49px;
        min-height:49px;

        border-radius:10px;

        font-size:13px;
    }

    .welcome-auth-panel
    .welcome-divider{
        margin:
            16px
            0;
    }

    .welcome-auth-panel
    .welcome-security{
        margin-top:16px;

        font-size:10px;
    }

}


/* =========================================================
   33. SHORT MOBILE
========================================================= */

@media
(
    max-width:768px
)
and
(
    max-height:720px
){

    .welcome-layout{
        gap:15px;

        padding-top:
            calc(
                14px +
                env(
                    safe-area-inset-top,
                    0px
                )
            );

        padding-bottom:
            calc(
                14px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .welcome-brand{
        margin-top:0;
    }

    .welcome-brand strong{
        font-size:31px;
    }

    .welcome-brand span{
        margin-top:6px;

        font-size:9px;
    }

    .welcome-message{
        margin-top:18px;
    }

    .welcome-message h1{
        font-size:31px;
    }

    .welcome-message p{
        margin-top:10px;

        font-size:13px;

        line-height:1.4;
    }

    .welcome-actions{
        padding:16px;
    }

    .welcome-primary,
    .welcome-secondary{
        min-height:48px;
    }

    .welcome-divider{
        margin:
            9px
            0;
    }

    .welcome-security{
        margin-top:9px;
    }

}


/* =========================================================
   34. VERY SMALL MOBILE
========================================================= */

@media (max-width:390px){

    .welcome-layout{
        padding-left:15px;
        padding-right:15px;
    }

    .welcome-brand strong{
        font-size:28px;

        letter-spacing:.2em;
        text-indent:.2em;
    }

    .welcome-brand span{
        font-size:8px;

        letter-spacing:.4em;
        text-indent:.4em;
    }

    .welcome-message h1{
        font-size:
            clamp(
                29px,
                8.5vw,
                36px
            );
    }

    .welcome-message p{
        font-size:12px;
    }

    .welcome-actions,
    .welcome-auth-panel{
        padding:17px;
    }

}

/* =========================================================
   35. DESKTOP
========================================================= */

@media (min-width:769px){

    .vaero-welcome-screen{
        overflow:hidden;
    }


    /* =====================================================
       DESKTOP SCENE
    ===================================================== */

    .vaero-welcome-screen
    .welcome-scene img{
        object-fit:cover;

        object-position:
            center
            center;

        transform-origin:
            54% 66%;

        filter:
            brightness(.66)
            saturate(.88)
            contrast(1.02);
    }

    .vaero-welcome-screen
    .welcome-stars{
        z-index:1;

        opacity:.18;
    }

    .vaero-welcome-screen::before{
        background:
            linear-gradient(
                90deg,
                rgba(1,5,11,.38) 0%,
                rgba(1,5,11,.07) 46%,
                rgba(1,5,11,.48) 100%
            );
    }

    .vaero-welcome-screen::after{
        background:
            linear-gradient(
                180deg,
                rgba(0,3,8,.13),
                rgba(0,3,8,.19) 50%,
                rgba(0,3,8,.43)
            );
    }


    /* =====================================================
       DESKTOP LAYOUT
    ===================================================== */

    .vaero-welcome-screen
    .welcome-layout{
        position:relative;

        z-index:2;

        display:grid;

        grid-template-columns:
            minmax(0,1.3fr)
            minmax(390px,.75fr);

        align-items:stretch;

        width:100%;
        height:100%;

        min-height:0;

        padding:
            30px
            clamp(
                44px,
                4.5vw,
                76px
            )
            24px;

        gap:
            clamp(
                44px,
                5vw,
                82px
            );

        overflow:hidden;
    }


    /* =====================================================
       DESKTOP LEFT
    ===================================================== */

    .vaero-welcome-screen
    .welcome-left{
        position:relative;

        display:flex;

        flex-direction:column;

        width:100%;
        height:100%;

        min-width:0;
        min-height:0;
    }


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

    .vaero-welcome-screen
    .welcome-brand{
        display:block;

        width:max-content;

        max-width:100%;

        margin:0;

        color:#deb66c;

        text-align:center;
    }

    .vaero-welcome-screen
    .welcome-brand strong{
        display:block;

        margin:0;

        color:#e1ba72;

        background:none;

        -webkit-background-clip:initial;
        background-clip:initial;

        font-size:27px;
        font-weight:650;

        line-height:1;

        letter-spacing:.28em;
        text-indent:.28em;

        text-shadow:
            0
            0
            24px
            rgba(225,186,114,.04);
    }

    .vaero-welcome-screen
    .welcome-brand span{
        display:block;

        margin-top:8px;

        color:#d3ac67;

        font-size:9px;
        font-weight:600;

        line-height:1;

        letter-spacing:.52em;
        text-indent:.52em;
    }


    /* =====================================================
       DESKTOP INTRO
    ===================================================== */

    .vaero-welcome-screen
    .welcome-intro{
        width:
            min(
                100%,
                650px
            );

        margin:
            auto
            0;

        padding:
            24px
            0
            56px
            38px;
    }

    .vaero-welcome-screen
    .welcome-eyebrow{
        display:flex;

        align-items:center;

        gap:10px;

        margin:
            0
            0
            17px;

        color:#d5ad66;

        font-size:9px;
        font-weight:720;

        letter-spacing:.25em;
    }

    .vaero-welcome-screen
    .welcome-eyebrow::before{
        content:"";

        width:22px;
        height:1px;

        background:
            linear-gradient(
                90deg,
                #d6ad65,
                rgba(214,173,101,.16)
            );
    }

    .vaero-welcome-screen
    .welcome-intro h1{
        max-width:580px;

        margin:0;

        color:#f7f4ed;

        font-size:
            clamp(
                43px,
                4.25vw,
                64px
            );

        font-weight:625;

        line-height:1.055;

        letter-spacing:-.045em;

        text-wrap:balance;
    }

    .vaero-welcome-screen
    .welcome-intro h1 span{
        display:block;

        margin-top:4px;

        color:#dfb76f;
    }

    .vaero-welcome-screen
    .welcome-description{
        max-width:500px;

        margin:
            24px
            0
            0;

        color:
            rgba(236,232,223,.68);

        font-size:16px;

        line-height:1.65;

        letter-spacing:-.005em;
    }


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

    .vaero-welcome-screen
    .welcome-features{
        display:grid;

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

        gap:0;

        width:
            min(
                100%,
                590px
            );

        margin-top:42px;
    }

    .vaero-welcome-screen
    .welcome-feature{
        display:block;

        min-width:0;

        padding:
            0
            20px;

        border:0;

        border-right:
            1px solid
            rgba(218,177,103,.14);

        border-radius:0;

        background:none;

        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .vaero-welcome-screen
    .welcome-feature:first-child{
        padding-left:0;
    }

    .vaero-welcome-screen
    .welcome-feature:last-child{
        padding-right:0;

        border-right:0;
    }

    .vaero-welcome-screen
    .welcome-feature-icon{
        display:flex;

        align-items:center;
        justify-content:center;

        width:42px;
        height:42px;

        margin-bottom:14px;

        border:
            1px solid
            rgba(222,181,105,.68);

        border-radius:50%;

        color:#dfb56a;

        font-size:20px;

        line-height:1;

        box-shadow:
            inset
            0
            0
            16px
            rgba(222,181,105,.025);
    }

    .vaero-welcome-screen
    .welcome-feature strong{
        display:block;

        color:#f3eee5;

        font-size:14px;
        font-weight:550;

        line-height:1.2;
    }

    .vaero-welcome-screen
    .welcome-feature p{
        margin:
            8px
            0
            0;

        color:
            rgba(228,224,216,.48);

        font-size:11px;

        line-height:1.5;
    }


    /* =====================================================
       COPYRIGHT
    ===================================================== */

    .vaero-welcome-screen
    .welcome-copyright{
        position:absolute;

        bottom:0;
        left:0;

        margin:0;

        color:
            rgba(233,228,218,.34);

        font-size:10px;

        line-height:1;
    }


    /* =====================================================
       RIGHT
    ===================================================== */

    .vaero-welcome-screen
    .welcome-right{
        position:relative;

        display:flex;

        align-items:center;
        justify-content:flex-end;

        width:100%;
        height:100%;

        min-width:0;
        min-height:0;

        margin:0;
    }


    /* =====================================================
       THEME TOGGLE
    ===================================================== */

    .vaero-welcome-screen
    .welcome-theme-toggle{
        position:absolute;

        top:0;
        right:12px;

        z-index:3;

        display:flex;

        overflow:hidden;

        padding:3px;

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

        border-radius:14px;

        background:
            rgba(5,9,15,.63);

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

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

    .vaero-welcome-screen
    .welcome-theme-toggle button{
        display:flex;

        align-items:center;
        justify-content:center;

        width:34px;
        height:28px;

        margin:0;

        padding:0;

        border:0;

        border-radius:10px;

        background:transparent;

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

        cursor:pointer;

        transition:
            color .18s ease,
            background .18s ease;
    }

    .vaero-welcome-screen
    .welcome-theme-toggle button:hover{
        color:
            rgba(255,255,255,.9);

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

    .vaero-welcome-screen
    .welcome-theme-toggle button:first-child{
        background:
            rgba(219,177,99,.13);

        color:#e0b76e;
    }


    /* =====================================================
       AUTH PANEL
    ===================================================== */

    .vaero-welcome-screen
    .welcome-auth-panel{
        width:100%;
        max-width:450px;

        margin-top:20px;

        padding:
            32px
            34px
            28px;

        overflow:hidden;

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

        border-radius:18px;

        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(219,177,99,.025),
                transparent 30%
            ),
            linear-gradient(
                145deg,
                rgba(16,20,28,.88),
                rgba(7,10,16,.83)
            );

        box-shadow:
            0
            28px
            80px
            rgba(0,0,0,.48),

            inset
            0
            1px
            0
            rgba(255,255,255,.026);

        backdrop-filter:
            blur(24px)
            saturate(115%);

        -webkit-backdrop-filter:
            blur(24px)
            saturate(115%);
    }


    /* =====================================================
       AUTH LOGO
    ===================================================== */

    .vaero-welcome-screen
    .welcome-auth-logo{
        display:flex;

        align-items:center;
        justify-content:center;

        width:66px;
        height:66px;

        margin:
            0
            auto
            14px;

        color:#dfb56d;

        font-size:52px;
        font-weight:300;

        line-height:1;

        transform:
            scaleX(1.25);

        text-shadow:
            0
            0
            24px
            rgba(223,181,109,.12);
    }


    /* =====================================================
       AUTH HEADING
    ===================================================== */

    .vaero-welcome-screen
    .welcome-auth-heading{
        margin:
            0
            0
            25px;

        text-align:center;
    }

    .vaero-welcome-screen
    .welcome-auth-heading > p{
        margin:
            0
            0
            9px;

        color:#d5aa61;

        font-size:9px;
        font-weight:700;

        letter-spacing:.22em;
    }

    .vaero-welcome-screen
    .welcome-auth-heading h2{
        margin:0;

        color:#f4f1ea;

        font-size:22px;
        font-weight:500;

        letter-spacing:-.02em;
    }

    .vaero-welcome-screen
    .welcome-auth-heading span{
        display:block;

        margin-top:9px;

        color:
            rgba(232,228,219,.48);

        font-size:12px;

        line-height:1.5;
    }


    /* =====================================================
       AUTH FORM
    ===================================================== */

    .vaero-welcome-screen
    .welcome-auth-form{
        display:grid;

        gap:15px;
    }

    .vaero-welcome-screen
    .welcome-auth-form label{
        display:grid;

        gap:8px;
    }

    .vaero-welcome-screen
    .welcome-auth-form label > span{
        color:
            rgba(243,239,231,.72);

        font-size:12px;
    }


    /* =====================================================
       INPUT
    ===================================================== */

    .vaero-welcome-screen
    .welcome-input-wrap{
        position:relative;

        display:flex;

        align-items:center;

        width:100%;
        height:47px;

        padding:
            0
            14px;

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

        border-radius:8px;

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

    .vaero-welcome-screen
    .welcome-input-wrap > span{
        flex:0 0 auto;

        width:20px;

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

        font-size:14px;
    }

    .vaero-welcome-screen
    .welcome-input-wrap input{
        flex:1;

        width:auto;
        height:100%;

        min-width:0;

        padding:
            0
            8px;

        border:0;

        outline:0;

        background:transparent;

        box-shadow:none;

        color:#f4f1eb;

        font:inherit;

        font-size:13px !important;
    }

    .vaero-welcome-screen
    .welcome-input-wrap input::placeholder{
        color:
            rgba(255,255,255,.29);
    }


    /* =====================================================
       PASSWORD TOGGLE
    ===================================================== */

    .vaero-welcome-screen
    .welcome-password-toggle{
        flex:0 0 auto;

        padding:5px;

        border:0;

        background:transparent;

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

        cursor:pointer;
    }


    /* =====================================================
       FORGOT PASSWORD
    ===================================================== */

    .vaero-welcome-screen
    .welcome-forgot-password{
        justify-self:end;

        margin-top:-6px;

        padding:0;

        border:0;

        background:transparent;

        color:#d2a85e;

        font-size:11px;

        cursor:pointer;
    }


    /* =====================================================
       PANEL BUTTONS
    ===================================================== */

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-primary,
    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-secondary{
        width:100%;
        height:47px;
        min-height:47px;

        border-radius:8px;

        font:inherit;

        font-size:13px;
        font-weight:600;

        cursor:pointer;
    }

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-primary{
        margin:0;

        border:0;

        background:
            linear-gradient(
                100deg,
                #cda554,
                #f0d28b,
                #c89442
            );

        color:#171108;

        box-shadow:
            0
            12px
            28px
            rgba(203,157,72,.15),

            inset
            0
            1px
            0
            rgba(255,255,255,.34);
    }

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-secondary{
        border:
            1px solid
            rgba(208,166,92,.3);

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

        color:
            rgba(247,242,232,.86);
    }


    /* =====================================================
       PANEL DIVIDER
    ===================================================== */

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-divider{
        display:grid;

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

        align-items:center;

        gap:13px;

        margin:
            17px
            0;
    }

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-divider span{
        height:1px;

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

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-divider small{
        color:
            rgba(255,255,255,.3);

        font-size:11px;
    }


    /* =====================================================
       SECURITY / LEARN MORE
    ===================================================== */

    .vaero-welcome-screen
    .welcome-security{
        margin:
            18px
            0
            0;

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

        font-size:10px;

        letter-spacing:.04em;

        text-align:center;
    }

    .vaero-welcome-screen
    .welcome-learn-more{
        display:flex;

        align-items:center;
        justify-content:center;

        gap:9px;

        margin-top:22px;

        color:#d2aa62;

        font-size:11px;
    }


    /* =====================================================
       REMOVE LEGACY MOBILE BLOCKS ON DESKTOP
    ===================================================== */

    .vaero-welcome-screen
    .welcome-content,
    .vaero-welcome-screen
    .welcome-actions,
    .vaero-welcome-screen
    .welcome-message{
        display:none;
    }


    /* =====================================================
       DESKTOP PORTAL
    ===================================================== */

    .vaero-welcome-screen.is-entering
    .welcome-scene img{
        transform:
            scale(1.5);
    }

}


/* =========================================================
   36. NARROW DESKTOP / TABLET LANDSCAPE
========================================================= */

@media
(
    min-width:769px
)
and
(
    max-width:1100px
){

    .vaero-welcome-screen
    .welcome-layout{
        grid-template-columns:
            minmax(0,1fr)
            minmax(350px,420px);

        padding:
            26px
            32px
            22px;

        gap:34px;
    }

    .vaero-welcome-screen
    .welcome-intro{
        padding-left:12px;
    }

    .vaero-welcome-screen
    .welcome-intro h1{
        font-size:
            clamp(
                38px,
                5vw,
                52px
            );
    }

    .vaero-welcome-screen
    .welcome-description{
        font-size:14px;
    }

    .vaero-welcome-screen
    .welcome-features{
        margin-top:32px;
    }

    .vaero-welcome-screen
    .welcome-feature{
        padding:
            0
            13px;
    }

    .vaero-welcome-screen
    .welcome-auth-panel{
        padding:
            28px
            27px
            25px;
    }

}


/* =========================================================
   37. SHORT DESKTOP HEIGHT
========================================================= */

@media
(
    min-width:769px
)
and
(
    max-height:760px
){

    .vaero-welcome-screen
    .welcome-layout{
        padding-top:18px;
        padding-bottom:16px;
    }

    .vaero-welcome-screen
    .welcome-brand strong{
        font-size:23px;
    }

    .vaero-welcome-screen
    .welcome-brand span{
        margin-top:6px;

        font-size:7px;
    }

    .vaero-welcome-screen
    .welcome-intro{
        padding:
            12px
            0
            26px
            26px;
    }

    .vaero-welcome-screen
    .welcome-eyebrow{
        margin-bottom:11px;
    }

    .vaero-welcome-screen
    .welcome-intro h1{
        font-size:
            clamp(
                34px,
                4vw,
                50px
            );
    }

    .vaero-welcome-screen
    .welcome-description{
        margin-top:14px;

        font-size:13px;

        line-height:1.5;
    }

    .vaero-welcome-screen
    .welcome-features{
        margin-top:22px;
    }

    .vaero-welcome-screen
    .welcome-feature-icon{
        width:34px;
        height:34px;

        margin-bottom:9px;

        font-size:16px;
    }

    .vaero-welcome-screen
    .welcome-feature strong{
        font-size:12px;
    }

    .vaero-welcome-screen
    .welcome-feature p{
        margin-top:5px;

        font-size:9px;
    }

    .vaero-welcome-screen
    .welcome-auth-panel{
        max-width:430px;

        margin-top:10px;

        padding:
            22px
            27px
            20px;
    }

    .vaero-welcome-screen
    .welcome-auth-logo{
        width:48px;
        height:48px;

        margin-bottom:8px;

        font-size:38px;
    }

    .vaero-welcome-screen
    .welcome-auth-heading{
        margin-bottom:17px;
    }

    .vaero-welcome-screen
    .welcome-auth-heading h2{
        font-size:19px;
    }

    .vaero-welcome-screen
    .welcome-auth-heading span{
        margin-top:5px;

        font-size:10px;
    }

    .vaero-welcome-screen
    .welcome-auth-form{
        gap:10px;
    }

    .vaero-welcome-screen
    .welcome-input-wrap{
        height:42px;
    }

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-primary,
    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-secondary{
        height:42px;
        min-height:42px;
    }

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-divider{
        margin:
            11px
            0;
    }

    .vaero-welcome-screen
    .welcome-security{
        margin-top:11px;
    }

    .vaero-welcome-screen
    .welcome-learn-more{
        margin-top:13px;
    }

}


/* =========================================================
   38. VERY SHORT DESKTOP HEIGHT
========================================================= */

@media
(
    min-width:769px
)
and
(
    max-height:650px
){

    .vaero-welcome-screen
    .welcome-layout{
        padding-top:12px;
        padding-bottom:10px;
    }

    .vaero-welcome-screen
    .welcome-brand strong{
        font-size:20px;
    }

    .vaero-welcome-screen
    .welcome-intro{
        padding:
            8px
            0
            18px
            18px;
    }

    .vaero-welcome-screen
    .welcome-eyebrow{
        margin-bottom:8px;

        font-size:7px;
    }

    .vaero-welcome-screen
    .welcome-intro h1{
        font-size:
            clamp(
                30px,
                3.7vw,
                43px
            );
    }

    .vaero-welcome-screen
    .welcome-description{
        margin-top:10px;

        font-size:11px;
    }

    .vaero-welcome-screen
    .welcome-features{
        margin-top:16px;
    }

    .vaero-welcome-screen
    .welcome-feature-icon{
        width:28px;
        height:28px;

        margin-bottom:6px;

        font-size:13px;
    }

    .vaero-welcome-screen
    .welcome-feature strong{
        font-size:10px;
    }

    .vaero-welcome-screen
    .welcome-feature p{
        font-size:8px;
    }

    .vaero-welcome-screen
    .welcome-auth-panel{
        padding:
            17px
            23px
            15px;
    }

    .vaero-welcome-screen
    .welcome-auth-logo{
        width:38px;
        height:38px;

        margin-bottom:5px;

        font-size:30px;
    }

    .vaero-welcome-screen
    .welcome-auth-heading{
        margin-bottom:11px;
    }

    .vaero-welcome-screen
    .welcome-auth-heading h2{
        font-size:17px;
    }

    .vaero-welcome-screen
    .welcome-auth-heading span{
        font-size:9px;
    }

    .vaero-welcome-screen
    .welcome-auth-form{
        gap:7px;
    }

    .vaero-welcome-screen
    .welcome-input-wrap{
        height:37px;
    }

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-primary,
    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-secondary{
        height:37px;
        min-height:37px;
    }

    .vaero-welcome-screen
    .welcome-auth-panel
    .welcome-divider{
        margin:
            8px
            0;
    }

    .vaero-welcome-screen
    .welcome-security{
        display:none;
    }

    .vaero-welcome-screen
    .welcome-learn-more{
        margin-top:9px;
    }

}


/* =========================================================
   39. TOUCH DEVICES
========================================================= */

@media (hover:none){

    .welcome-primary:hover{
        filter:none;
    }

    .welcome-secondary:hover{
        background:
            rgba(5,10,18,.46);
    }

    .welcome-password-toggle:hover{
        color:
            rgba(255,255,255,.5);
    }

}


/* =========================================================
   40. STAR ANIMATION
========================================================= */

@keyframes welcomeStarsDrift{

    from{
        transform:
            translateY(0);
    }

    to{
        transform:
            translateY(113px);
    }

}


/* =========================================================
   41. REDUCED MOTION
========================================================= */

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

    .welcome-stars{
        animation:none;
    }

    .welcome-scene img,
    .vaero-welcome-screen,
    .welcome-layout,
    .welcome-brand,
    .welcome-intro,
    .welcome-auth-panel,
    .welcome-message,
    .welcome-actions,
    .welcome-primary,
    .welcome-secondary{
        transition-duration:.01ms !important;
    }

}


/* =========================================================
   42. HIGH CONTRAST
========================================================= */

@media (prefers-contrast:more){

    .welcome-auth-panel,
    .welcome-actions,
    .welcome-input-wrap{
        border-color:
            rgba(255,255,255,.18);
    }

    .welcome-description,
    .welcome-message p,
    .welcome-auth-heading span{
        color:
            rgba(245,242,235,.72);
    }

}


/* =========================================================
   43. IOS VIEWPORT
========================================================= */

@supports (-webkit-touch-callout:none){

    .vaero-welcome-screen{
        height:100%;

        min-height:
            -webkit-fill-available;
    }

    .welcome-layout{
        min-height:
            -webkit-fill-available;
    }

}


/* =========================================================
   44. DYNAMIC VIEWPORT
========================================================= */

@supports (height:100dvh){

    .vaero-welcome-screen{
        height:100dvh;
    }

}


/* =========================================================
   45. FINAL OVERFLOW SAFETY
========================================================= */

.vaero-welcome-screen,
.welcome-layout,
.welcome-left,
.welcome-right,
.welcome-intro,
.welcome-auth-panel,
.welcome-auth-form,
.welcome-input-wrap{
    min-width:0;
}

.vaero-welcome-screen{
    max-width:100%;
}

.welcome-scene{
    max-width:100%;
}

.welcome-auth-form input{
    max-width:100%;
}


/* =========================================================
   46. FINAL ONBOARDING LAYER SAFETY
========================================================= */

.vaero-welcome-screen{
    touch-action:manipulation;
}

.vaero-welcome-screen button,
.vaero-welcome-screen a{
    -webkit-tap-highlight-color:transparent;
}

.vaero-welcome-screen button{
    font-family:inherit;
}


/* =========================================================
   END — VAERO ENGINE WELCOME SCREEN
========================================================= */