#faq-galaxy{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    background:radial-gradient(circle at top,#24163a,#0b0815 75%);
    overflow:hidden;
    z-index:1;
}
#faq-stage{position:absolute;inset:0;overflow:visible;}

#faq-neuron-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:4;
    pointer-events:none;
    overflow:visible;
}

#faq-neuron-lines path{
    stroke-linecap:round;
    stroke-linejoin:round;
}

#faq-search{position:absolute;top:25px;left:25px;width:320px;z-index:10000;}
#faq-search input{width:100%;box-sizing:border-box;padding:14px 42px 14px 18px;border:none;border-radius:30px;font-size:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);outline:none;box-shadow:0 12px 30px rgba(0,0,0,.35);}
#faq-search-clear{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;padding:0;margin:0;border:none;background:none;color:#999;font-size:20px;font-weight:bold;line-height:18px;cursor:pointer;display:none;z-index:10001;}
#faq-search-clear:hover{color:#ff4fa3;}
.faq-bubble{position:absolute;display:flex;justify-content:center;align-items:center;text-align:center;box-sizing:border-box;padding:18px;border-radius:50%;cursor:pointer;z-index:6;overflow:hidden;user-select:none;color:#fff;font-weight:600;line-height:1.25;text-shadow:-1px -1px 0 rgba(0,0,0,.75),1px -1px 0 rgba(0,0,0,.75),-1px 1px 0 rgba(0,0,0,.75),1px 1px 0 rgba(0,0,0,.75);background:radial-gradient(circle at 30% 25%,#e4c8ff 0%,#bf8cff 22%,#9157c8 55%,#5d2c86 100%);border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 45px rgba(0,0,0,.45),inset 0 3px 10px rgba(255,255,255,.30),inset 0 -10px 20px rgba(0,0,0,.18);transition:transform .35s ease,box-shadow .35s ease,opacity .35s ease;animation:breathe 5s ease-in-out infinite;}
.faq-bubble::before{content:"";position:absolute;width:38%;height:20%;top:16%;left:22%;border-radius:50%;background:radial-gradient(rgba(255,255,255,.45),rgba(255,255,255,.18),transparent 80%);transform:rotate(-18deg);pointer-events:none;filter:blur(2px);}
.faq-bubble:hover{transform:scale(1.12) translateY(-8px);box-shadow:0 30px 65px rgba(0,0,0,.55),0 0 45px rgba(93,44,134,.75);z-index:500;}
@keyframes breathe{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
#faq-popup{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.60);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.3s;z-index:99999;}
#faq-popup.show{opacity:1;visibility:visible;}
#faq-popup-box{width:min(720px,90vw);max-height:80vh;overflow:auto;background:#fff;border-radius:24px;padding:40px;box-shadow:0 40px 80px rgba(0,0,0,.45);}
#faq-title{margin-top:0;font-size:34px;}
#faq-content{font-size:18px;line-height:1.8;}
#faq-popup-actions{display:flex;justify-content:center;gap:16px;margin-top:35px;flex-wrap:wrap;}
#faq-close{display:inline-block;margin:0;padding:14px 40px;border:none;border-radius:999px;background:#ff4fa3;color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:.25s;box-shadow:0 10px 25px rgba(255,79,163,.40);}
#faq-close:hover{background:#ff2d91;transform:translateY(-2px);box-shadow:0 15px 35px rgba(255,79,163,.60);}
#faq-next{display:inline-block;margin:0;padding:14px 40px;border:none;border-radius:999px;background:#5d2c86;color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:.25s;box-shadow:0 10px 25px rgba(93,44,134,.40);}
#faq-next:hover{background:#46215f;transform:translateY(-2px);box-shadow:0 15px 35px rgba(93,44,134,.60);}
#faq-center-image{

    position:absolute;

    left:50%;
    top:50%;

    width:350px;

    height:auto;

    transform:translate(-50%,-50%) rotate(360deg) scale(0);

    opacity:0;

    z-index:5;

    pointer-events:none;

    filter:drop-shadow(0 0 35px rgba(93,44,134,.45));

    animation:faqLogoIntro 1.8s ease-out forwards;

}

@keyframes faqLogoIntro{

    0%{

        transform:translate(-50%,-50%) rotate(360deg) scale(0);

        opacity:0;

    }

    100%{

        transform:translate(-50%,-50%) rotate(0deg) scale(1);

        opacity:1;

    }

}

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

@media (max-width:768px){

    #faq-galaxy{

        position:absolute;

        top:0;
        left:0;
        right:0;
        bottom:auto;

        height:auto;

        overflow:visible;

    }

    #faq-popup{

        position:fixed;

        inset:0;

    }

    #faq-search{

        left:50%;

        top:auto;

        bottom:20px;

        width:90%;

        max-width:400px;

        transform:translateX(-50%);

    }

    #faq-center-image{

        top:110px;

        left:50%;

        width:190px;

        transform:translate(-50%,0) rotate(360deg) scale(0);

        animation:faqLogoIntroMobile 1.8s ease-out forwards;

    }

    .faq-bubble{

        width:120px !important;

        height:120px !important;

        padding:14px;

        font-size:15px !important;

    }

    #faq-popup-box{

        width:94vw;

        max-height:82vh;

        padding:25px;

        border-radius:20px;

    }

    #faq-title{

        font-size:26px;

    }

    #faq-content{

        font-size:16px;

        line-height:1.6;

    }

    #faq-popup-actions{

        flex-direction:column;

        margin-top:30px;

    }

    #faq-close,
    #faq-next{

        width:100%;

        padding:16px;

        font-size:18px;

    }

}

@keyframes faqLogoIntroMobile{

    0%{

        transform:translate(-50%,0) rotate(360deg) scale(0);

        opacity:0;

    }

    100%{

        transform:translate(-50%,0) rotate(0deg) scale(1);

        opacity:1;

    }

}

.faq-bubble-img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:75%;
    height:75%;
    border-radius:50%;
    object-fit:cover;
    pointer-events:none;
}