#mainNav { min-height: 72px; background: rgba(255,255,255,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: box-shadow var(--transition), border-color var(--transition), background var(--transition); }
#mainNav.is-scrolled { background: rgba(255,255,255,.94); border-color: var(--color-border); box-shadow: 0 8px 24px rgba(16,39,70,.07); }
.nav-logo { width: 40px; height: 40px; object-fit: contain; }
.brand-text { color: var(--color-primary-dark); font-weight: 700; }
.navbar .nav-link { position: relative; color: var(--color-text-muted); font-size: .92rem; font-weight: 500; }
.navbar .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--gradient-primary); transform: scaleX(0); transition: transform var(--transition); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--color-primary); }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { transform: scaleX(1); }
.nav-social { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); text-decoration: none; transition: transform var(--transition), background var(--transition); }
.nav-social:hover { transform: translateY(-2px); background: var(--color-primary-soft-2); }