/* assets/css/04-components/brand.css */
/* Logo, nav, badges, tags */

.nav {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          100;
    padding-block:    var(--space-4);
    background:       rgba(8,12,16,0.85);
    backdrop-filter:  blur(16px);
    border-bottom:    1px solid var(--border-subtle);
    transition:       border-color var(--transition-normal);
}
.nav.scrolled { border-bottom-color: var(--border-muted); }

.nav__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.nav__logo {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-family: var(--font-display);
    font-size:   1.1rem;
    font-weight: 800;
    color:       var(--fg-primary);
    letter-spacing: -0.02em;
}

.nav__logo-icon {
    width:           32px;
    height:          32px;
    background:      linear-gradient(135deg, var(--teal) 0%, var(--blue) 100%);
    border-radius:   var(--radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
    flex-shrink:     0;
}

.nav__links {
    display:     flex;
    align-items: center;
    gap:         var(--space-6);
}

.nav__link {
    font-size:   0.875rem;
    font-weight: 500;
    color:       var(--fg-secondary);
    transition:  color var(--transition-fast);
}
.nav__link:hover { color: var(--fg-primary); }

.badge {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--space-1);
    padding:        4px 10px;
    border-radius:  var(--radius-xl);
    font-family:    var(--font-mono);
    font-size:      0.7rem;
    font-weight:    500;
    letter-spacing: 0.05em;
}
.badge--teal { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(78,201,176,0.25); }
.badge--gold { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(224,168,0,0.25); }
.badge--blue { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(86,156,214,0.25); }

.tag {
    display:     inline-block;
    padding:     3px 8px;
    border-radius: var(--radius-sm);
    font-size:   0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tag--teal { background: var(--teal-dim); color: var(--teal); }
.tag--gold { background: var(--gold-dim); color: var(--gold); }
.tag--blue { background: var(--blue-dim); color: var(--blue); }

@media (max-width: 700px) {
    .nav__links { display: none; }
}