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

.site-header{

position:fixed;

top:2px;

left:4px;

right:4px;

z-index:1000;

padding:4px 12px 0;

}



.nav{

max-width:1320px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:14px 22px;

background:
rgba(2,6,23,.78);

backdrop-filter:
blur(18px);

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

border-radius:999px;

}


/* LOGO */

.nav-logo{

display:flex;

align-items:center;

gap:14px;

text-decoration:none;

color:#fff;

font-size:22px;

font-weight:800;

}

.logo-mark{

width:52px;

height:52px;

display:grid;

place-items:center;

border-radius:18px;

background:
linear-gradient(
135deg,
#ef4444,
#dc2626
);

color:#fff;

font-size:18px;

}

.nav-logo span{

color:#ff4242;

}


/* HAMBURGER */

.menu-toggle{

width:58px;

height:58px;

border:none;

background:

rgba(
217,
45,
58,
.12
);

border:

1px solid
rgba(
217,
45,
58,
.25
);


border-radius:20px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:6px;

cursor:pointer;

flex-shrink:0;

padding:0;

}

.menu-toggle span{

display:block;

width:28px;

height:3px;

background:#fff;

border-radius:999px;

transition:.25s;

}


.menu-toggle.open span:nth-child(1){

transform:
translateY(9px)
rotate(45deg);

}

.menu-toggle.open span:nth-child(2){

opacity:0;

}


.menu-toggle.open{

background:
#0f172a;

backdrop-filter:none;

position:relative;

z-index:1002;

}


.menu-toggle.open span{

opacity:1;

background:#ffffff;

}

.menu-toggle.open span:nth-child(3){

transform:
translateY(-9px)
rotate(-45deg);

}


/* OVERLAY */

.nav-overlay{

position:fixed;

inset:0;

background:
rgba(
2,
6,
23,
.65
);

backdrop-filter:
blur(6px);

opacity:0;

visibility:hidden;

transition:.25s;

z-index:997;

}

.nav-overlay.show{

opacity:1;

visibility:visible;

}


/* MENU */

.nav-menu{

position:fixed;

top:92px;

left:18px;

right:18px;

width:auto;

max-width:none;

height:auto;

min-height:unset;

background:#ffffff;

padding:40px;

display:flex;

flex-direction:column;

justify-content:flex-start;

align-items:stretch;

gap:18px;

transform:
translateY(-20px);

opacity:0;

visibility:hidden;

transition:
all .28s ease;

z-index:999;

border-radius:36px;

box-shadow:
0 40px 100px rgba(0,0,0,.18);

overflow:hidden;

}


/* OPEN */

.nav-menu.open{

transform:
translateY(0);

opacity:1;

visibility:visible;

}


.nav-menu a{

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:20px;

font-weight:700;

color:#0f172a;

padding:18px;

border-radius:22px;

margin:0;

min-height:68px;

transition:.2s;

}


.nav-menu a:hover{

background:#f8fafc;

}


.nav-menu .active{

background:#fff1f2;

color:#dc2626;

}


/* CLOSE */

.menu-close{

position:absolute;

top:28px;

right:28px;

width:58px;

height:58px;

border:none;

border-radius:18px;

background:#f8fafc;

font-size:38px;

line-height:1;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

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

transition:.25s;

}


.menu-close:hover{

transform:
rotate(90deg);

}


/* DESKTOP */

@media(
min-width:1024px
){

.menu-toggle{

display:none;

}

.nav-overlay{

display:none;

}

.menu-close{

display:none;

}

.nav-menu{

position:static;

transform:none;

width:auto;

max-width:none;

height:auto;

background:none;

padding:0;

display:flex;

flex-direction:row;

align-items:center;

gap:10px;

box-shadow:none;

border-radius:0;

overflow:visible;

}

.nav-menu a{

color:#fff;

font-size:15px;

padding:12px 18px;

}

.nav-menu .active{

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

color:#fff;

}

.nav-cta{

margin:0;

}

}



/* HEADER LOGO */

.nav-logo{

display:flex;

align-items:center;

text-decoration:none;

flex-shrink:0;


padding-left:5px;
}



.header-logo{

height:46px;

width:auto;

display:block;

object-fit:contain;

}

@media (max-width:768px){

.header-logo{

height:40px;

}

}