# /*

HEADER
header.css
==========

*/

.main-header{

```
position:fixed;

top:0;
left:0;

width:100%;

z-index:var(--z-navbar);

backdrop-filter:blur(16px);

background:
rgba(10,15,28,0.70);

border-bottom:
1px solid var(--border-primary);
```

}

.navbar{

```
height:var(--navbar-height);

display:flex;

align-items:center;

justify-content:space-between;
```

}

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

.logo{

```
display:flex;

align-items:center;

gap:15px;
```

}

.logo-mark{

```
width:50px;
height:50px;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

color:#000;

background:
linear-gradient(
    135deg,
    var(--accent-blue),
    var(--accent-purple)
);
```

}

.logo-text{

```
display:flex;

flex-direction:column;
```

}

.logo-name{

```
font-weight:700;

color:var(--text-primary);
```

}

.logo-role{

```
font-size:12px;

color:var(--text-muted);
```

}

/* ================================
NAVIGATION
================================ */

.nav-menu{

```
display:flex;

align-items:center;

gap:35px;
```

}

.nav-menu a{

```
color:var(--text-secondary);

transition:var(--transition-fast);

position:relative;
```

}

.nav-menu a:hover{

```
color:var(--accent-blue);
```

}

.nav-menu a::after{

```
content:"";

position:absolute;

bottom:-6px;

left:0;

width:0;

height:2px;

background:var(--accent-blue);

transition:var(--transition-normal);
```

}

.nav-menu a:hover::after{

```
width:100%;
```

}

/* ================================
CTA
================================ */

.nav-actions{

```
display:flex;

align-items:center;
```

}

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

@media(max-width:992px){

```
.nav-menu{

    display:none;

}

.nav-actions{

    display:none;

}
```

}