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

.glass-header{

position:sticky;
top:12px;
z-index:9999;

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

margin:12px;

padding:14px 16px;

border-radius:24px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.18),
rgba(255,255,255,.05));

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

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

box-shadow:
0 20px 60px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.25);

overflow:hidden;

transition:
all .45s cubic-bezier(.2,.8,.2,1);

}

/* Crystal reflection */

.glass-header::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:70%;
height:100%;

background:

linear-gradient(
110deg,
transparent,
rgba(255,255,255,.28),
transparent);

animation:
headerShine 8s linear infinite;

}

@keyframes headerShine{

100%{

left:180%;

}

}

/* Floating glow */

.glass-header::after{

content:"";

position:absolute;

width:220px;
height:220px;

right:-90px;
top:-110px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(0,212,255,.35),
transparent 70%);

filter:blur(40px);

pointer-events:none;

}

/*========================*/

.header-logo{

display:flex;

align-items:center;

gap:14px;

text-decoration:none;

color:white;

z-index:2;

}

.header-logo-icon{

width:54px;
height:54px;

border-radius:18px;

display:grid;
place-items:center;

font-size:1.5rem;

background:
linear-gradient(
135deg,
#4F7EFF,
#00D9FF);

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

transition:.4s;

}

.header-logo:hover .header-logo-icon{

transform:
rotate(-8deg)
scale(1.08);

}

.header-logo-text{

display:flex;

flex-direction:column;

line-height:1.15;

}

.header-logo-text strong{

font-size:1rem;

font-weight:700;

}

.header-logo-text span{

font-size:.78rem;

color:#bfd9ff;

}

/*========================*/

.header-call{

display:flex;

align-items:center;

gap:10px;

padding:12px 16px;

border-radius:18px;

text-decoration:none;

font-weight:700;

color:#02140b;

background:
linear-gradient(
135deg,
#34ff8f,
#00d76d);

box-shadow:
0 10px 35px rgba(0,255,120,.28);

transition:.35s;

z-index:2;

}

.header-call:hover{

transform:
translateY(-3px)
scale(1.04);

}

/* Scroll */

.glass-header.scrolled{

padding:10px 14px;

background:
rgba(7,17,29,.82);

backdrop-filter:blur(34px);

border-color:
rgba(255,255,255,.08);

box-shadow:
0 25px 60px rgba(0,0,0,.45);

}

.glass-header.scrolled .header-logo-icon{

width:46px;
height:46px;

font-size:1.2rem;

}

/* Desktop */

@media(min-width:900px){

.glass-header{

max-width:1250px;

margin:18px auto;

padding:16px 24px;

}

.header-logo-text strong{

font-size:1.2rem;

}

.header-logo-text span{

font-size:.9rem;

}

}