/* =====================================================
UN ARMY // GOD FOOTER
===================================================== */

.footer{


position:relative;

margin-top:180px;

overflow:hidden;

background:
    linear-gradient(
        180deg,
        rgba(2,5,15,.72),
        rgba(3,5,18,.96)
    );

backdrop-filter:blur(25px);
-webkit-backdrop-filter:blur(25px);

border-top:
    1px solid rgba(0,229,255,.18);

box-shadow:
    0 -20px 80px rgba(0,229,255,.04);


}

/* =====================================================
GIANT GLASS UN ARMY
BACKGROUND LOGO
===================================================== */

.footer::before{


content:"UN ARMY";

position:absolute;

left:50%;
top:50%;

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

z-index:0;

width:100%;

text-align:center;

font-size:
    clamp(90px, 17vw, 280px);

font-weight:900;

letter-spacing:
    clamp(10px, 2vw, 35px);

white-space:nowrap;

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

background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.13),
        rgba(0,229,255,.035),
        rgba(138,43,226,.05),
        rgba(255,255,255,.02)
    );

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

-webkit-text-stroke:
    1px rgba(255,255,255,.045);

text-shadow:

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

    0 0 35px rgba(0,229,255,.08),

    0 0 90px rgba(138,43,226,.06);

pointer-events:none;

user-select:none;

opacity:.85;


}

/* =====================================================
GLASS LOGO REFLECTION
===================================================== */

.footer::after{


content:"";

position:absolute;

left:50%;
top:50%;

width:
    min(85vw, 1000px);

height:
    min(25vw, 300px);

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

z-index:0;

pointer-events:none;

border-radius:50%;

background:

    radial-gradient(
        ellipse,
        rgba(0,229,255,.055),
        rgba(138,43,226,.025) 45%,
        transparent 72%
    );

filter:blur(25px);


}

/* =====================================================
TOP ENERGY LINE
===================================================== */

.footer-line{


position:relative;

z-index:5;

width:100%;

height:2px;

background:

    linear-gradient(
        90deg,
        transparent 0%,
        #00e5ff 25%,
        #8a2be2 50%,
        #00e5ff 75%,
        transparent 100%
    );

box-shadow:

    0 0 10px #00e5ff,
    0 0 30px rgba(0,229,255,.6);

animation:
    footerLinePulse 4s ease-in-out infinite;


}

@keyframes footerLinePulse{


0%,100%{
    opacity:.45;
}

50%{
    opacity:1;
}


}

/* =====================================================
BACKGROUND GLOWS
===================================================== */

.footer-glow{


position:absolute;

width:500px;
height:500px;

border-radius:50%;

filter:blur(100px);

pointer-events:none;

opacity:.12;

z-index:0;


}

.footer-glow-blue{


left:-220px;
top:80px;

background:#00e5ff;


}

.footer-glow-purple{


right:-220px;
bottom:-150px;

background:#8a2be2;


}

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

.footer-container{


position:relative;

z-index:2;

width:90%;

max-width:1500px;

margin:auto;

padding:90px 0;

display:grid;

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

gap:70px;


}

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

.footer-brand{


position:relative;


}

.footer-brand-title{


margin-top:25px;


}

.footer-brand-title h2{


margin:0;

color:#fff;

font-size:38px;

letter-spacing:7px;

text-shadow:
    0 0 25px rgba(255,255,255,.15);


}

.footer-brand-title h2 span{


color:#00e5ff;

text-shadow:

    0 0 10px #00e5ff,
    0 0 30px rgba(0,229,255,.7);


}

.footer-brand-title small{


display:block;

margin-top:8px;

color:#64748b;

font-size:10px;

letter-spacing:5px;


}

/* =====================================================
GLASS UN LOGO
===================================================== */

.footer-glass-logo{


position:relative;

width:125px;
height:125px;

display:flex;

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


}

.glass-logo-core{


position:relative;

z-index:5;

width:82px;
height:82px;

display:flex;

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

border-radius:24px;

color:#fff;

font-size:27px;

font-weight:900;

letter-spacing:3px;

background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        rgba(255,255,255,.035)
    );

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

box-shadow:

    inset 0 1px 1px
    rgba(255,255,255,.35),

    inset 0 -15px 30px
    rgba(0,229,255,.06),

    0 0 30px
    rgba(0,229,255,.18);

backdrop-filter:
    blur(18px);

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

text-shadow:
    0 0 15px #00e5ff;

transform:
    rotate(-5deg);

transition:.5s;


}

.footer-glass-logo:hover
.glass-logo-core{


transform:
    rotate(0deg)
    scale(1.08);

border-color:#00e5ff;

box-shadow:

    inset 0 1px 1px
    rgba(255,255,255,.4),

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

    0 0 70px
    rgba(0,229,255,.2);


}

/* =====================================================
GLASS RINGS
===================================================== */

.glass-logo-ring{


position:absolute;

border-radius:50%;

border:
    1px solid
    rgba(0,229,255,.22);

pointer-events:none;


}

.ring-one{


width:105px;
height:105px;

animation:
    logoRingOne 8s linear infinite;


}

.ring-two{


width:125px;
height:125px;

border-color:
    rgba(138,43,226,.2);

animation:
    logoRingTwo 12s linear infinite reverse;


}

@keyframes logoRingOne{


from{
    transform:rotate(0deg);
}

to{
    transform:rotate(360deg);
}


}

@keyframes logoRingTwo{


from{
    transform:rotate(0deg);
}

to{
    transform:rotate(360deg);
}


}

/* =====================================================
BRAND TEXT
===================================================== */

.footer-brand p{


max-width:380px;

margin-top:25px;

color:#8994a8;

line-height:1.9;

font-size:14px;


}

.footer-system-code{


display:inline-block;

margin-top:25px;

padding:8px 13px;

color:#526174;

font-size:9px;

letter-spacing:3px;

border-left:
    2px solid #00e5ff;

background:
    rgba(0,229,255,.03);


}

/* =====================================================
SECTION TITLES
===================================================== */

.footer-links h3,
.footer-status h3{


margin:0;

color:#fff;

font-size:13px;

letter-spacing:4px;


}

.footer-links h3::before,
.footer-status h3::before{


content:"// ";

color:#00e5ff;


}

.footer-link-line{


width:45px;

height:1px;

margin:
    18px 0 25px;

background:

    linear-gradient(
        90deg,
        #00e5ff,
        transparent
    );


}

/* =====================================================
LINKS
===================================================== */

.footer-links a{


position:relative;

display:flex;

align-items:center;

gap:13px;

width:max-content;

margin-bottom:17px;

color:#78859a;

text-decoration:none;

font-size:12px;

letter-spacing:2px;

transition:.35s;


}

.footer-links a span{


color:#334155;

font-size:9px;

transition:.35s;


}

.footer-links a::before{


content:"";

position:absolute;

left:-12px;

width:0;

height:1px;

background:#00e5ff;

box-shadow:
    0 0 10px #00e5ff;

transition:.35s;


}

.footer-links a:hover{


color:#fff;

transform:translateX(8px);


}

.footer-links a:hover span{


color:#00e5ff;


}

.footer-links a:hover::before{


width:7px;


}

/* =====================================================
STATUS
===================================================== */

.status-box{


display:flex;

align-items:center;

gap:12px;

margin-bottom:25px;


}

.status-box span{


width:9px;
height:9px;

border-radius:50%;

background:#00ff99;

box-shadow:

    0 0 8px #00ff99,
    0 0 20px rgba(0,255,153,.7);

animation:
    onlinePulse 1.8s infinite;


}

.status-box strong{


color:#00ff99;

font-size:12px;

letter-spacing:4px;


}

@keyframes onlinePulse{


0%,100%{
    transform:scale(1);
    opacity:.7;
}

50%{
    transform:scale(1.35);
    opacity:1;
}


}

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

.footer-status-card{


display:flex;

flex-direction:column;

gap:14px;


}

.footer-status-card div{


display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding:10px 0;

border-bottom:
    1px solid
    rgba(255,255,255,.05);


}

.footer-status-card small{


color:#475569;

font-size:9px;

letter-spacing:2px;


}

.footer-status-card strong{


color:#8da0b8;

font-size:10px;

letter-spacing:2px;


}

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

.footer-bottom{


position:relative;

z-index:3;

border-top:
    1px solid
    rgba(255,255,255,.06);

padding:
    25px 5% 30px;


}

.footer-bottom-line{


width:100%;

height:1px;

margin-bottom:25px;

background:

    linear-gradient(
        90deg,
        transparent,
        rgba(0,229,255,.25),
        transparent
    );


}

.footer-bottom-content{


display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:15px;

color:#536174;

font-size:10px;

letter-spacing:3px;

text-align:center;


}

.footer-divider{


color:#00e5ff;

opacity:.5;


}

.footer-signature{


margin-top:20px;

text-align:center;

color:rgba(0,229,255,.12);

font-size:35px;

font-weight:900;

letter-spacing:15px;

user-select:none;


}

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

@media(max-width:1000px){


.footer-container{

    grid-template-columns:
        1fr 1fr;

    gap:60px;

}


.footer::before{

    font-size:18vw;

}


}

@media(max-width:600px){


.footer{

    margin-top:100px;

}


.footer-container{

    width:85%;

    grid-template-columns:1fr;

    gap:45px;

    padding:65px 0;

}


.footer::before{

    font-size:24vw;

    letter-spacing:5px;

    opacity:.55;

}


.footer-glass-logo{

    width:100px;
    height:100px;

}


.glass-logo-core{

    width:70px;
    height:70px;

    font-size:23px;

}


.ring-one{

    width:90px;
    height:90px;

}


.ring-two{

    width:100px;
    height:100px;

}


.footer-brand-title h2{

    font-size:30px;

    letter-spacing:5px;

}


.footer-bottom-content{

    flex-direction:column;

    gap:8px;

    line-height:1.8;

}


.footer-divider{

    display:none;

}


.footer-signature{

    font-size:24px;

    letter-spacing:9px;

}


}