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

html{
scroll-behavior:smooth;
}

body{

background:#050816;

overflow-x:hidden;

font-family:Arial, Helvetica, sans-serif;

color:white;

min-height:300vh;

}

canvas{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

z-index:-10;

}

button{

cursor:pointer;

}

a{

text-decoration:none;

color:white;

}

ul{

list-style:none;

}
::selection{

background:#00e5ff;

color:#050816;

}
#three-bg{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:-10;

    pointer-events:none;

}
/* =====================================
   CYBER SCROLL REVEAL
===================================== */


.reveal{

    opacity:0;

    transform:translateY(120px);

    filter:blur(8px);

    transition:

    1s cubic-bezier(.17,.84,.44,1);

}



.reveal.active{

    opacity:1;

    transform:translateY(0);

    filter:blur(0);

}



/* =====================================
   CYBER SECTION STYLE
===================================== */


.cyber-section{

    position:relative;

    padding:120px 10%;

    overflow:hidden;

}



/* Neon border */

.cyber-section::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:1px;


    background:

    linear-gradient(

        90deg,

        transparent,

        #00e5ff,

        #8a2be2,

        transparent

    );


    box-shadow:

    0 0 25px #00e5ff;

}
.hero{

    position:relative;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:2;

}



.hero-content{

    text-align:center;

    position:relative;

    z-index:5;

}



.hero h1{

    font-size:100px;

    letter-spacing:15px;

    color:white;

    text-shadow:

    0 0 10px #00e5ff,

    0 0 40px #8a2be2;


}



.hero p{

    color:#00e5ff;

    letter-spacing:8px;

    margin-top:20px;

}



.hero-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle,

        transparent 20%,

        rgba(0,0,0,.7)

    );

    pointer-events:none;

}
/*================================
        ABOUT SECTION
================================*/


.about-section{

    margin-top:220px;

}



.about-stats{

    display:flex;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;

}



.stat-box{

    width:130px;

    height:100px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    background:

    rgba(5,8,22,.6);


    border:

    1px solid rgba(0,229,255,.25);


    backdrop-filter:

    blur(15px);


    transition:.4s;


}



.stat-box strong{


    color:#00e5ff;

    font-size:30px;

    text-shadow:

    0 0 20px #00e5ff;


}



.stat-box span{


    margin-top:8px;

    font-size:12px;

    letter-spacing:3px;

    color:#aaa;


}



.stat-box:hover{


    transform:

    translateY(-10px);


    border-color:#8a2be2;


    box-shadow:

    0 0 35px rgba(138,43,226,.5);


}
/*================================
        UN SYSTEM
================================*/


.system-section{


    width:90%;

    margin:220px auto;


    text-align:center;


}



.system-header h2{


    margin-top:20px;


    font-size:65px;


    letter-spacing:10px;


    color:white;


    text-shadow:


    0 0 30px #00e5ff;


}



.system-header p{


    color:#aaa;


    font-size:18px;


    letter-spacing:3px;


}




.system-grid{


    margin-top:70px;


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:30px;


}




.system-card{


    position:relative;


    padding:40px 25px;


    min-height:280px;


    background:


    rgba(5,8,22,.55);


    border:


    1px solid rgba(0,229,255,.2);


    backdrop-filter:

    blur(15px);


    overflow:hidden;


    transition:.5s;


}



.system-card::before{


    content:"";


    position:absolute;


    width:150%;


    height:2px;


    background:


    linear-gradient(

    90deg,

    transparent,

    #00e5ff,

    transparent

    );


    top:0;


    left:-150%;


    transition:.6s;


}



.system-card:hover::before{


    left:100%;


}



.system-card:hover{


    transform:


    translateY(-15px);


    border-color:#00e5ff;


    box-shadow:


    0 0 40px rgba(0,229,255,.35);


}



.card-number{


    font-size:40px;


    color:#8a2be2;


    font-weight:900;


    text-shadow:


    0 0 20px #8a2be2;


}



.system-card h3{


    margin-top:25px;


    color:white;


    letter-spacing:5px;


    font-size:25px;


}



.system-card p{


    color:#999;


    line-height:1.8;


    margin-top:20px;


}



@media(max-width:1000px){


.system-grid{


    grid-template-columns:

    repeat(2,1fr);


}


}



@media(max-width:600px){


.system-grid{


    grid-template-columns:

    1fr;


}



.system-header h2{


    font-size:40px;


}


}
/*================================
        JOIN THE ARMY
================================*/


.join-section{


    width:90%;

    margin:220px auto 150px;


    position:relative;


    display:flex;

    justify-content:center;

    align-items:center;


    overflow:hidden;


    min-height:450px;


}



.join-energy{


    position:absolute;


    width:500px;

    height:500px;


    background:


    radial-gradient(

    circle,

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

    rgba(138,43,226,.15),

    transparent 70%

    );


    filter:blur(20px);


    animation:

    energyPulse 5s infinite;


}




.join-content{


    position:relative;


    z-index:2;


    text-align:center;


}



.join-content h2{


    margin-top:25px;


    font-size:80px;


    letter-spacing:12px;


    color:white;


    text-shadow:


    0 0 30px #00e5ff,

    0 0 70px #8a2be2;


}



.join-content p{


    color:#aaa;


    font-size:20px;


    letter-spacing:3px;


    max-width:650px;


    line-height:2;


    margin:30px auto;


}




.join-btn{


    display:inline-flex;


    align-items:center;

    justify-content:center;


    width:240px;


    height:70px;


    text-decoration:none;


    color:white;


    font-size:20px;


    letter-spacing:5px;


    border:


    1px solid #00e5ff;


    background:


    rgba(0,229,255,.08);


    backdrop-filter:

    blur(15px);


    transition:.4s;


    position:relative;


    overflow:hidden;


}



.join-btn::before{


    content:"";


    position:absolute;


    left:-100%;


    top:0;


    width:100%;


    height:100%;


    background:


    linear-gradient(

    90deg,

    transparent,

    rgba(0,229,255,.5),

    transparent

    );


    transition:.6s;


}



.join-btn:hover::before{


    left:100%;


}



.join-btn:hover{


    color:#050816;


    background:#00e5ff;


    box-shadow:


    0 0 50px #00e5ff;


}



@keyframes energyPulse{


    0%,100%{


        transform:scale(.8);


        opacity:.5;


    }


    50%{


        transform:scale(1.2);


        opacity:1;


    }

}



@media(max-width:700px){


.join-content h2{


    font-size:45px;

    letter-spacing:5px;


}



}
/*================================
        GLOBAL POLISH
================================*/


html{

    scroll-behavior:smooth;

}



body{

    overflow-x:hidden;

}



::-webkit-scrollbar{

    width:8px;

}



::-webkit-scrollbar-track{

    background:#050816;

}



::-webkit-scrollbar-thumb{

    background:

    linear-gradient(

    #00e5ff,

    #8a2be2

    );


    border-radius:20px;


}
.profile-box{

position:relative;

cursor:pointer;

}



.profile-menu{


position:absolute;


right:0;


top:65px;


width:220px;


padding:20px;


display:none;


flex-direction:column;


gap:15px;



background:

rgba(5,8,22,.95);



border:

1px solid rgba(0,229,255,.4);



border-radius:15px;



box-shadow:

0 0 40px rgba(0,229,255,.3);



}








.profile-menu a{


color:white;


text-decoration:none;


padding:12px;


letter-spacing:3px;


transition:.3s;


}



.profile-menu a:hover{


color:#00e5ff;


background:

rgba(0,229,255,.1);



}



.profile-avatar{


width:50px;


height:50px;


border-radius:50%;


background:

linear-gradient(

135deg,

#00e5ff,

#8a2be2

);



box-shadow:

0 0 30px #00e5ff;


}
/* =====================================
        MOBILE HOME FIX
===================================== */


@media(max-width:768px){


html,
body{

    width:100%;

    overflow-x:hidden;

}



/* ALL SECTIONS */

.cyber-section{

    padding:70px 20px;

    text-align:center;

}



/* HERO */

.hero{

    height:100vh;

    padding:0 20px;

}


.hero h1{

    font-size:45px;

    letter-spacing:5px;

    line-height:1.2;

}


.hero p{

    font-size:13px;

    letter-spacing:3px;

}



/* ABOUT */


.about-section{

    margin-top:80px;

}


.about-stats{

    justify-content:center;

    gap:15px;

}



.stat-box{

    width:110px;

    height:90px;

}




/* SYSTEM */


.system-section{

    width:100%;

    margin:80px auto;

    padding:0 20px;

}



.system-header h2{

    font-size:35px;

    letter-spacing:4px;

}


.system-header p{

    font-size:14px;

    letter-spacing:1px;

}




.system-grid{

    margin-top:40px;

    grid-template-columns:1fr;

    gap:20px;

}



.system-card{

    width:100%;

    min-height:240px;

    padding:30px 20px;

    text-align:center;

}



.system-card h3{

    font-size:20px;

    letter-spacing:3px;

}



.system-card p{

    font-size:14px;

}



/* IMAGES */


.info-image,
.image-frame,
.cyber-image{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}



.cyber-image img{

    width:90%;

    max-width:350px;

    height:auto;

    object-fit:contain;

}



/* JOIN */


.join-section{

    width:100%;

    min-height:350px;

    margin:100px auto;

    padding:0 20px;

}



.join-content h2{

    font-size:40px;

    letter-spacing:4px;

}



.join-content p{

    font-size:15px;

    letter-spacing:1px;

}



.join-btn{

    width:200px;

    height:60px;

    font-size:16px;

}




}