/* ==========================================================
   LUMEXA LANDING 2026
   DEVICE SHOWCASE + FAQ + LUMI
   ========================================================== */


/* ==========================================================
   DEVICE SHOWCASE
   ========================================================== */

.lx-product-showcase{
    position:relative;
    min-height:475px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
}

.lx-showcase-glow{
    position:absolute;
    width:520px;
    height:420px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(135,80,237,.24),
            rgba(184,140,255,.10) 44%,
            transparent 72%
        );
    filter:blur(4px);
    z-index:-1;
}


/* NOTEBOOK */

.lx-laptop{
    position:relative;
    width:500px;
    z-index:2;
    filter:
        drop-shadow(
            0 32px 35px rgba(40,17,95,.20)
        );
}

.lx-laptop-screen{
    position:relative;
    width:100%;
    aspect-ratio:16 / 10;
    border:10px solid #1b1531;
    border-bottom-width:14px;
    border-radius:20px 20px 10px 10px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(135,80,237,.15),
            transparent 32%
        ),
        #f7f4fc;
}

.lx-laptop-camera{
    position:absolute;
    z-index:5;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#746d8d;
    top:6px;
    left:50%;
    transform:translateX(-50%);
}

.lx-laptop-bottom{
    width:108%;
    height:16px;
    margin-left:-4%;
    border-radius:2px 2px 18px 18px;
    background:
        linear-gradient(
            180deg,
            #dad7e3,
            #aaa7b5
        );
    box-shadow:
        inset 0 1px #fff;
}

.lx-laptop-bottom::after{
    content:"";
    display:block;
    width:78px;
    height:5px;
    border-radius:0 0 8px 8px;
    background:#93909e;
    margin:auto;
}


/* MOCK LOGIN */

.lx-login-preview{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px 70px;
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(135,80,237,.12),
            transparent 30%
        ),
        #fbfaff;
}

.lx-preview-logo{
    width:150px;
    height:48px;
    object-fit:contain;
    margin-bottom:13px;
}

.lx-preview-title{
    font-size:21px;
    line-height:1.1;
    font-weight:900;
    color:#21184b;
}

.lx-preview-sub{
    margin-top:6px;
    margin-bottom:17px;
    font-size:10px;
    color:#8b82a0;
}

.lx-preview-field{
    width:100%;
    height:39px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 12px;
    margin-bottom:9px;
    border:1px solid #e2dbef;
    border-radius:10px;
    background:#fff;
    color:#a19ab3;
    font-size:9px;
    font-weight:650;
}

.lx-preview-field span{
    color:#6d4ad0;
    font-size:8px;
}

.lx-preview-button{
    width:100%;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:3px;
    border-radius:10px;
    color:#fff;
    font-size:10px;
    font-weight:900;
    background:
        linear-gradient(
            135deg,
            #281078,
            #5425c5,
            #8750ed
        );
}

.lx-preview-trust{
    width:100%;
    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:15px;
    font-size:6px;
    color:#9189a5;
    text-align:center;
}

.lx-preview-trust span{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.lx-preview-trust b{
    color:#51486a;
}


/* PHONE */

.lx-phone{
    position:absolute;
    right:-8px;
    bottom:15px;
    width:158px;
    z-index:4;
    padding:7px;
    border-radius:30px;
    background:
        linear-gradient(
            145deg,
            #22183a,
            #05030d
        );
    box-shadow:
        0 30px 60px rgba(33,14,78,.32);
    transform:
        rotate(3deg);
}

.lx-phone-screen{
    position:relative;
    min-height:325px;
    overflow:hidden;
    padding:30px 13px 18px;
    border-radius:24px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(184,140,255,.25),
            transparent 32%
        ),
        linear-gradient(
            160deg,
            #fdfcff,
            #f3effb
        );
}

.lx-phone-speaker{
    position:absolute;
    z-index:6;
    width:45px;
    height:12px;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    border-radius:0 0 12px 12px;
    background:#090713;
}

.lx-phone-logo{
    display:block;
    width:92px;
    height:30px;
    object-fit:contain;
    margin:0 auto 22px;
}

.lx-phone-welcome{
    font-size:16px;
    font-weight:900;
    color:#21184b;
}

.lx-phone-caption{
    margin-top:4px;
    margin-bottom:14px;
    font-size:8px;
    line-height:1.4;
    color:#746d8d;
}

.lx-phone-card{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:9px;
    padding:12px;
    border:1px solid #e4dcf2;
    border-radius:12px;
    background:#fff;
    box-shadow:
        0 7px 16px rgba(48,22,105,.06);
}

.lx-phone-card span{
    font-size:8px;
    color:#7e7593;
}

.lx-phone-card strong{
    font-size:9px;
    color:#5425c5;
}

.lx-phone-home{
    width:52px;
    height:4px;
    border-radius:999px;
    background:#282035;
    margin:16px auto 0;
}

.lx-device-badge{
    position:absolute;
    left:18px;
    bottom:8px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 13px;
    border:1px solid rgba(93,46,209,.13);
    border-radius:999px;
    background:rgba(255,255,255,.92);
    box-shadow:
        0 10px 25px rgba(48,22,105,.09);
    backdrop-filter:blur(10px);
    color:#625977;
    font-size:10px;
    font-weight:800;
    z-index:6;
}

.lx-device-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#8750ed;
    box-shadow:
        0 0 0 4px rgba(135,80,237,.12);
}


/* ==========================================================
   FAQ
   ========================================================== */

.lx-faq-section{
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(184,140,255,.13),
            transparent 28%
        ),
        #fff;
}

.lx-faq-grid{
    max-width:900px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
}

.lx-faq-item{
    border:1px solid #e4dcf2;
    border-radius:16px;
    background:#fff;
    overflow:hidden;
    box-shadow:
        0 10px 30px rgba(48,22,105,.045);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.lx-faq-item:hover{
    transform:translateY(-2px);
    border-color:#cdb9ef;
    box-shadow:
        0 15px 35px rgba(48,22,105,.08);
}

.lx-faq-item summary{
    position:relative;
    cursor:pointer;
    list-style:none;
    padding:20px 55px 20px 20px;
    color:#332461;
    font-size:14px;
    line-height:1.4;
    font-weight:850;
}

.lx-faq-item summary::-webkit-details-marker{
    display:none;
}

.lx-faq-item summary::after{
    content:"+";
    position:absolute;
    width:28px;
    height:28px;
    right:17px;
    top:50%;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    border-radius:9px;
    background:#f0e9fb;
    color:#5d2ed1;
    font-size:18px;
    font-weight:700;
}

.lx-faq-item[open] summary::after{
    content:"−";
    background:#5d2ed1;
    color:#fff;
}

.lx-faq-item p{
    margin:0;
    padding:0 20px 20px;
    border-top:1px solid #f0ebf7;
    padding-top:16px;
    color:#746d8d;
    font-size:13px;
    line-height:1.65;
}

.lx-faq-item p a{
    color:#5d2ed1;
    font-weight:800;
    text-decoration:none;
}


/* ==========================================================
   LUMI CHATBOT
   ========================================================== */

.lumi-assistant{
    position:fixed;
    z-index:9999;
    right:24px;
    bottom:22px;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}

.lumi-launcher{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:64px;
    padding:7px 16px 7px 8px;
    border:0;
    border-radius:999px;
    cursor:pointer;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #24106f,
            #5d2ed1,
            #8750ed
        );
    box-shadow:
        0 18px 45px rgba(55,25,130,.34);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.lumi-launcher:hover{
    transform:
        translateY(-3px);
    box-shadow:
        0 22px 50px rgba(55,25,130,.40);
}

.lumi-launcher-face{
    position:relative;
    display:block;
    width:50px;
    height:50px;
    flex:0 0 50px;
    border-radius:18px;
    background:
        linear-gradient(
            145deg,
            #fff,
            #e8dcff
        );
    box-shadow:
        inset 0 -4px 8px rgba(93,46,209,.12);
}

.lumi-eye{
    position:absolute;
    top:19px;
    width:7px;
    height:9px;
    border-radius:999px;
    background:#4b25b7;
}

.lumi-eye.left{
    left:13px;
}

.lumi-eye.right{
    right:13px;
}

.lumi-smile{
    position:absolute;
    width:15px;
    height:7px;
    left:50%;
    top:31px;
    transform:translateX(-50%);
    border-bottom:3px solid #8750ed;
    border-radius:0 0 999px 999px;
}

.lumi-antenna{
    position:absolute;
    width:3px;
    height:9px;
    left:50%;
    top:-7px;
    transform:translateX(-50%);
    border-radius:999px;
    background:#fff;
}

.lumi-antenna::before{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    left:-2px;
    top:-4px;
    border-radius:50%;
    background:#b88cff;
    box-shadow:
        0 0 0 4px rgba(184,140,255,.15);
}

.lumi-launcher-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
}

.lumi-launcher-copy strong{
    font-size:12px;
}

.lumi-launcher-copy small{
    margin-top:2px;
    color:rgba(255,255,255,.72);
    font-size:10px;
}


/* CHAT WINDOW */

.lumi-window{
    position:absolute;
    right:0;
    bottom:78px;
    width:360px;
    overflow:hidden;
    border:1px solid #e2daf0;
    border-radius:23px;
    background:#fff;
    box-shadow:
        0 28px 70px rgba(37,17,88,.24);
    opacity:0;
    visibility:hidden;
    transform:
        translateY(16px)
        scale(.97);
    transform-origin:
        right bottom;
    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;
}

.lumi-assistant.open .lumi-window{
    opacity:1;
    visibility:visible;
    transform:
        translateY(0)
        scale(1);
}

.lumi-header{
    display:flex;
    align-items:center;
    gap:11px;
    padding:15px 16px;
    color:#fff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(184,140,255,.35),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #16065c,
            #4820bb,
            #7440e2
        );
}

.lumi-avatar{
    position:relative;
    width:39px;
    height:39px;
    flex:0 0 39px;
    border-radius:14px;
    background:#fff;
}

.lumi-mini-eye{
    position:absolute;
    width:5px;
    height:7px;
    top:16px;
    border-radius:999px;
    background:#5d2ed1;
}

.lumi-mini-eye.left{
    left:10px;
}

.lumi-mini-eye.right{
    right:10px;
}

.lumi-mini-antenna{
    position:absolute;
    width:3px;
    height:7px;
    top:-5px;
    left:50%;
    border-radius:99px;
    transform:translateX(-50%);
    background:#fff;
}

.lumi-header > div:nth-child(2){
    display:flex;
    flex:1;
    flex-direction:column;
}

.lumi-header strong{
    font-size:14px;
}

.lumi-header span{
    margin-top:2px;
    font-size:10px;
    color:rgba(255,255,255,.72);
}

.lumi-close{
    width:31px;
    height:31px;
    border:0;
    border-radius:10px;
    cursor:pointer;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-size:20px;
}

.lumi-messages{
    height:285px;
    overflow-y:auto;
    padding:16px;
    background:
        linear-gradient(
            180deg,
            #faf8fe,
            #fff
        );
}

.lumi-message{
    display:flex;
    margin-bottom:11px;
}

.lumi-message > div{
    max-width:88%;
    padding:11px 13px;
    border-radius:15px;
    font-size:12px;
    line-height:1.55;
}

.lumi-message.bot{
    justify-content:flex-start;
}

.lumi-message.bot > div{
    border:1px solid #e7dff3;
    border-radius:5px 15px 15px 15px;
    background:#fff;
    color:#5e5675;
}

.lumi-message.user{
    justify-content:flex-end;
}

.lumi-message.user > div{
    border-radius:15px 5px 15px 15px;
    background:
        linear-gradient(
            135deg,
            #4820bb,
            #7d47e8
        );
    color:#fff;
}

.lumi-message a{
    color:#5d2ed1;
    font-weight:850;
    text-decoration:none;
}

.lumi-suggestions{
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:10px 13px 4px;
    border-top:1px solid #eee8f6;
    background:#fff;
}

.lumi-suggestions button{
    flex:0 0 auto;
    padding:7px 9px;
    border:1px solid #ded3ef;
    border-radius:999px;
    cursor:pointer;
    background:#faf8fe;
    color:#5b438e;
    font-size:9px;
    font-weight:750;
}

.lumi-suggestions button:hover{
    border-color:#b99ce8;
    background:#f3edfb;
}

.lumi-form{
    display:grid;
    grid-template-columns:1fr 42px;
    gap:7px;
    padding:10px 12px;
    background:#fff;
}

.lumi-form input{
    width:100%;
    height:42px;
    padding:0 13px;
    outline:0;
    border:1px solid #ded6ec;
    border-radius:12px;
    font:inherit;
    font-size:11px;
    color:#453d5b;
}

.lumi-form input:focus{
    border-color:#8750ed;
    box-shadow:
        0 0 0 4px rgba(135,80,237,.08);
}

.lumi-form button{
    height:42px;
    border:0;
    border-radius:12px;
    cursor:pointer;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #3518a5,
            #8750ed
        );
    font-size:16px;
}

.lumi-privacy{
    padding:0 13px 11px;
    color:#a097af;
    font-size:8px;
    line-height:1.35;
    text-align:center;
}


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

@media(max-width:1050px){

    .lx-product-showcase{
        min-height:410px;
    }

    .lx-laptop{
        width:440px;
    }

    .lx-phone{
        width:140px;
        right:0;
    }

    .lx-phone-screen{
        min-height:290px;
    }

}


@media(max-width:850px){

    .lx-product-showcase{
        width:min(600px,100%);
        min-height:440px;
        margin:10px auto 0;
    }

    .lx-laptop{
        width:min(520px,90%);
    }

    .lx-phone{
        right:1%;
        bottom:12px;
    }

    .lx-faq-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:560px){

    .lx-product-showcase{
        min-height:340px;
    }

    .lx-laptop{
        width:95%;
    }

    .lx-login-preview{
        padding:18px 45px;
    }

    .lx-preview-logo{
        width:115px;
        height:36px;
    }

    .lx-preview-title{
        font-size:16px;
    }

    .lx-preview-field{
        height:32px;
    }

    .lx-preview-button{
        height:33px;
    }

    .lx-preview-trust{
        display:none;
    }

    .lx-phone{
        width:112px;
        right:-2px;
        bottom:8px;
        border-radius:22px;
    }

    .lx-phone-screen{
        min-height:235px;
        padding:
            25px 9px 12px;
        border-radius:17px;
    }

    .lx-phone-logo{
        width:72px;
        margin-bottom:14px;
    }

    .lx-phone-welcome{
        font-size:12px;
    }

    .lx-phone-caption{
        font-size:6px;
    }

    .lx-phone-card{
        padding:8px;
        margin-bottom:6px;
    }

    .lx-phone-card span{
        font-size:6px;
    }

    .lx-phone-card strong{
        font-size:7px;
    }

    .lx-device-badge{
        display:none;
    }

    .lumi-assistant{
        right:12px;
        bottom:12px;
    }

    .lumi-window{
        position:fixed;
        left:10px;
        right:10px;
        bottom:84px;
        width:auto;
    }

    .lumi-launcher{
        min-height:56px;
        padding-right:12px;
    }

    .lumi-launcher-face{
        width:43px;
        height:43px;
        flex-basis:43px;
    }

    .lumi-launcher-copy strong{
        font-size:11px;
    }

    .lumi-messages{
        height:300px;
    }

}