/*=============================
        RESET
=============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#030711;

    overflow-x:hidden;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    color:#fff;

}




/*=============================
        GALAXY BACKGROUND
=============================*/

.galaxy-bg{

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at top,#1a233b 0%,#08101d 35%,#030711 75%);

    z-index:-5;

}


/*=============================
        STARS
=============================*/

.stars{

    position:fixed;

    inset:0;

    background-image:

    radial-gradient(#ffffff 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.15;

    animation:starMove 120s linear infinite;

}

@keyframes starMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-400px);

    }

}


/*=============================
        FOG
=============================*/

.fog{

    position:fixed;

    inset:-20%;

    background:

    radial-gradient(circle,#ff8b2b18 0%,transparent 65%);

    filter:blur(80px);

    animation:fogMove 25s ease-in-out infinite alternate;

    z-index:-4;

}

@keyframes fogMove{

    from{

        transform:translate(-60px,-40px);

    }

    to{

        transform:translate(60px,40px);

    }

}


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

.scanner-card{

    width:min(420px,95vw);

    min-height:90vh;

    margin:30px 0;

    border-radius:34px;

    padding:17px;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(20px);

    background:

    linear-gradient(

    180deg,

    rgba(16,22,42,.92),

    rgba(8,11,23,.95)

    );

    border:1px solid rgba(255,170,70,.35);

    box-shadow:

    0 0 60px rgba(255,132,25,.15),

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

}


/* Glow Border */

.scanner-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:35px;

    padding:1px;

    background:

    linear-gradient(

    130deg,

    transparent,

    rgba(255,170,60,.6),

    transparent,

    rgba(255,170,60,.3)

    );

    mask:

    linear-gradient(#000 0 0) content-box,

    linear-gradient(#000 0 0);

    mask-composite:exclude;

    animation:borderGlow 8s linear infinite;

}

@keyframes borderGlow{

    to{

        transform:rotate(360deg);

    }

}


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

.top-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.company-logo{

    width:165px;

}

.icon-btn{

    width:48px;

    height:48px;

    border:none;

    cursor:pointer;

    color:#fff;

    font-size:25px;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    transition:.35s;

}

.icon-btn:hover{

    transform:translateY(-4px);

    color:#ff9638;

    box-shadow:0 0 20px rgba(255,148,56,.5);

}



.save-btn,
.share-btn{

    transition:all .3s ease;

}

.save-btn:hover{

    transform:translateY(-2px) scale(1.05);

    box-shadow:0 0 18px rgba(255,140,40,.35);

}

.share-btn:hover{

    transform:translateY(-2px) scale(1.05);

    box-shadow:0 0 18px rgba(255,140,40,.35);

}

/*=============================
    VERIFIED
=============================*/

.verified-box{

    margin:18px auto;

    width:max-content;

    padding:12px 18px;

    border-radius:40px;

    display:flex;

    gap:10px;

    margin-bottom: 10px;

    margin-top: 40px;

    font-size: 10px;

    align-items:center;

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

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

}

.green-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#32ff76;

    animation:blink 1.5s infinite;

}

@keyframes blink{

    50%{

        opacity:.25;

        transform:scale(.7);

    }

}


/*=============================
        ORBIT AREA
=============================*/

.orbit-section{

    height:480px;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*=============================
        COMPANY
=============================*/

.company-info{

    text-align:center;

}

.company-info h1{

    letter-spacing:5px;

    font-size:40px;

    margin-bottom:10px;

}

.company-info p{

    color:#ff9738;

    margin-bottom:25px;

}

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#fff;

    text-decoration:none;

    padding:12px 17px;

    border-radius:50px;

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

    transition:.35s;

}

.about-btn:hover{

    background:#ff8f2d;

    transform:translateY(-4px);

}


/*=============================
        BOTTOM BOX
=============================*/

.bottom-box{

    margin-top:30px;

    display:grid;

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

    align-items:center;

    border-radius:28px;

    padding:25px 10px;

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

}

.divider{

    width:1px;

    height:70px;

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

}

.info{

    text-align:center;

}

.circle{

    width:55px;

    height:55px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#121828;

    border:1px solid rgba(255,166,66,.3);

    margin-bottom:14px;

}

.circle i{

    font-size:22px;

    color:#ff9638;

}

.info h4{

    font-size:10px;

}

.info span{

    font-size:12px;

    color:#cfcfcf;

}


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

footer{

    text-align:center;

    margin-top:25px;

    color:#b9b9b9;

    font-size:13px;

}


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

@media(max-width:480px){

.company-info h1{

    font-size:15px;

    letter-spacing:3px;

}

.bottom-box{

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

    gap:0;

    padding:18px 5px;

}

.info span{

    font-size:9px;

}

.circle{

    width:48px;

    height:48px;

    margin:0 auto 10px;

}

.circle i{

    font-size:20px;

}

.divider{

      height:60px;

    width:1px;


}

.orbit-section{

    height:420px;

}

.company-logo{

    width:140px;

}

}


/*=========================================
            ORBIT WRAPPER
=========================================*/

.orbit-wrapper{

    position:relative;

    width:360px;

    height:360px;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*=========================================
                ORBITS
=========================================*/

.orbit{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(255,175,70,.18);

}

.orbit-1{

    width:340px;
    height:340px;

    animation:rotateClock 40s linear infinite;

}

.orbit-2{

    width:260px;
    height:260px;

    animation:rotateAnti 28s linear infinite;

}

.orbit-3{

    width:180px;
    height:180px;

    animation:rotateClock 18s linear infinite;

}


/*=========================================
            GLOW RING
=========================================*/

.energy-ring{

    position:absolute;

    width:155px;
    height:155px;

    border-radius:50%;

    border:2px solid rgba(255,149,40,.7);

    box-shadow:

    0 0 10px rgba(255,145,40,.5),

    0 0 25px rgba(255,145,40,.5),

    0 0 60px rgba(255,145,40,.25),

    inset 0 0 25px rgba(255,145,40,.25);

    animation:pulseRing 3s ease-in-out infinite;

}


/*=========================================
            CENTER LOGO
=========================================*/

.center-logo{

    width:120px;

    height:120px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:10;

    box-shadow:

    0 0 25px rgba(255,255,255,.25),

    0 0 60px rgba(255,153,60,.35);

    animation:centerFloat 5s ease-in-out infinite;

}

.center-logo img{

    width:75px;

}


/*=========================================
            ORBIT DOTS
=========================================*/

.orbit::before{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#ffb24d;

    box-shadow:

    0 0 15px #ffb24d,

    0 0 35px #ff8c00;

    top:-4px;

    left:50%;

    transform:translateX(-50%);

}

.orbit::after{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#ff9b39;

    bottom:-3px;

    left:50%;

    transform:translateX(-50%);

}


/*=========================================
            ANIMATIONS
=========================================*/

@keyframes rotateClock{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes rotateAnti{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

@keyframes pulseRing{

    0%{

        transform:scale(1);

        opacity:.9;

    }

    50%{

        transform:scale(1.04);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.9;

    }

}

@keyframes centerFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


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

@media(max-width:480px){

.orbit-wrapper{

    width:300px;
    height:300px;

}

.orbit-1{

    width:290px;
    height:290px;

}

.orbit-2{

    width:220px;
    height:220px;

}

.orbit-3{

    width:150px;
    height:150px;

}

.energy-ring{

    width:130px;
    height:130px;

}

.center-logo{

    width:100px;
    height:100px;

}

.center-logo img{

    width:62px;

}

}







/*==================================
        SOCIAL ORBIT
==================================*/

.social-orbit{

    position:absolute;

    inset:0;

    animation:orbitFloat 20s ease-in-out infinite;

}

/*==================================
        SOCIAL ITEM
==================================*/

.social-item{

    --radius:155px;

    position:absolute;

    top:50%;
    left:50%;

    width:62px;
    height:62px;

    margin:-31px;

    border-radius:50%;

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

    text-decoration:none;

    color:#fff;

    font-size:26px;

    transform:
    rotate(calc(var(--i) * 45deg))
    translate(var(--radius))
    rotate(calc(var(--i) * -45deg));

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

    backdrop-filter:blur(18px);

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

    box-shadow:

    inset 0 0 15px rgba(255,255,255,.04),

    0 0 20px rgba(255,140,40,.12);

    transition:.45s;

}

/*==============================
        ICON COLORS
==============================*/

.instagram{

    color:#ff7a18;

}

.facebook{

    color:#4ea2ff;

}

.whatsapp{

    color:#2cff71;

}

.call{

    color:#ffb347;

}

.linkedin{

    color:#4ba3ff;

}

.twitter{

    color:#ffffff;

}

.youtube{

    color:#ff4c4c;

}

.website{

    color:#ffd56b;

}

/*==============================
        HOVER
==============================*/

.social-item:hover{

    transform:

    rotate(calc(var(--i) * 45deg))

    translate(calc(var(--radius) + 10px))

    rotate(calc(var(--i) * -45deg))

    scale(1.12);

    box-shadow:

    0 0 15px currentColor,

    0 0 35px currentColor,

    0 0 60px rgba(255,255,255,.15);

}

/*==============================
    ICON FLOAT
==============================*/

.social-item::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:50%;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.15),

    transparent,

    rgba(255,150,50,.15)

    );

    opacity:0;

    transition:.4s;

}

.social-item:hover::before{

    opacity:1;

}

/*==============================
        ORBIT FLOAT
==============================*/

@keyframes orbitFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

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

@media(max-width:480px){

.social-item{

    --radius:132px;

    width:54px;

    height:54px;

    margin:-27px;

    font-size:22px;

}

}



/*=========================================
        PARTICLE CONTAINER
=========================================*/

.particle-container{

    position:absolute;

    inset:0;

    pointer-events:none;

}

/*=========================================
            PARTICLES
=========================================*/

.particle{

    position:absolute;

    width:5px;

    height:5px;

    border-radius:50%;

    background:#ffb54c;

    box-shadow:

    0 0 8px #ffb54c,

    0 0 20px #ff8a00;

    animation:particleFloat 6s linear infinite;

}

/* Particle Positions */

.p1{top:15%;left:52%;animation-delay:0s;}
.p2{top:28%;left:82%;animation-delay:1s;}
.p3{top:55%;left:92%;animation-delay:2s;}
.p4{top:80%;left:75%;animation-delay:3s;}
.p5{top:88%;left:48%;animation-delay:4s;}
.p6{top:72%;left:18%;animation-delay:2.5s;}
.p7{top:42%;left:8%;animation-delay:1.5s;}
.p8{top:18%;left:24%;animation-delay:3.5s;}

/*=========================================
            PARTICLE ANIMATION
=========================================*/

@keyframes particleFloat{

    0%{

        transform:scale(.4);

        opacity:0;

    }

    30%{

        opacity:1;

    }

    50%{

        transform:translateY(-12px) scale(1);

    }

    100%{

        transform:translateY(-24px) scale(.2);

        opacity:0;

    }

}

/*=========================================
            PULSE WAVES
=========================================*/

.pulse{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:2px solid rgba(255,170,60,.45);

    pointer-events:none;

}

.pulse1{

    width:140px;

    height:140px;

    animation:pulseWave 4s infinite;

}

.pulse2{

    width:140px;

    height:140px;

    animation:pulseWave 4s infinite 1.2s;

}

.pulse3{

    width:140px;

    height:140px;

    animation:pulseWave 4s infinite 2.4s;

}

@keyframes pulseWave{

    0%{

        opacity:.8;

        transform:translate(-50%,-50%) scale(.8);

    }

    100%{

        opacity:0;

        transform:translate(-50%,-50%) scale(2.2);

    }

}









/*==================================
        INTRO SCREEN
==================================*/

.intro-screen{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:#030711;

    transition:1.2s;

}

.intro-screen.hide{

    opacity:0;

    visibility:hidden;

}

.intro-logo{

    width:110px;

    height:110px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    animation:introPulse 2s infinite;

}

.intro-logo img{

    width:65px;

}

.intro-screen h2{

    margin-top:25px;

    letter-spacing:3px;

}

.intro-screen p{

    color:#bfbfbf;

    margin:10px 0 30px;

}

.loader-line{

    width:220px;

    height:4px;

    background:#222;

    border-radius:20px;

    overflow:hidden;

}

.loader-line span{

    display:block;

    width:0;

    height:100%;

    background:linear-gradient(90deg,#ff7d1f,#ffcb73);

    animation:loader 2.2s forwards;

}

@keyframes loader{

    to{

        width:100%;

    }

}

@keyframes introPulse{

    50%{

        transform:scale(1.08);

        box-shadow:

        0 0 35px rgba(255,150,50,.55);

    }

}











.social-item{

    opacity:0;

    animation:iconEntry .9s forwards;

}

.social-item:nth-child(1){animation-delay:2.5s;}
.social-item:nth-child(2){animation-delay:2.7s;}
.social-item:nth-child(3){animation-delay:2.9s;}
.social-item:nth-child(4){animation-delay:3.1s;}
.social-item:nth-child(5){animation-delay:3.3s;}
.social-item:nth-child(6){animation-delay:3.5s;}
.social-item:nth-child(7){animation-delay:3.7s;}
.social-item:nth-child(8){animation-delay:3.9s;}

@keyframes iconEntry{

    from{

        opacity:0;

        transform:

        rotate(calc(var(--i)*45deg))

        translate(0px)

        rotate(calc(var(--i)*-45deg))

        scale(.2);

    }

    to{

        opacity:1;

        transform:

        rotate(calc(var(--i)*45deg))

        translate(var(--radius))

        rotate(calc(var(--i)*-45deg))

        scale(1);

    }

}




#toast{

    position:fixed;

    left:50%;

    bottom:35px;

    transform:translateX(-50%) translateY(30px);

    background:rgba(20,20,30,.92);

    color:#fff;

    padding:14px 22px;

    border-radius:14px;

    border:1px solid rgba(255,140,40,.25);

    backdrop-filter:blur(18px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

    font-size:14px;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

#toast.show{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}