/* GLOBAL LAYOUT - Navbar & Sidebar */

.navbar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) 6%;background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;animation:slideDown .5s var(--transition-bounce);box-shadow:0 2px 16px var(--shadow),inset 0 -1px 0 rgba(255,255,255,.04)}
.navbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2),transparent 70%);opacity:.6}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.navbar{padding:var(--space-3) 4%}}

.logo{font-size:1.35rem;font-weight:700;letter-spacing:-.5px;color:var(--text-heading);display:flex;align-items:center;gap:var(--space-3);text-decoration:none;transition:all var(--transition-fast)}
.logo:hover{text-decoration:none;color:var(--text-heading)}
.logo .brand{font-size:1.3rem;font-weight:800;letter-spacing:0.1em;background:linear-gradient(180deg,var(--text-heading) 0%,var(--muted) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 4px var(--shadow));text-transform:uppercase}
.dark .logo .brand{background:linear-gradient(180deg,#ffffff 0%,#e2e8f0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3))}
.logo-icon,.logo svg.logo-icon{width:44px;height:44px;flex-shrink:0;transition:transform var(--transition-fast)}
.logo:hover .logo-icon{transform:scale(1.05)}

.quick-links-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:100;display:flex;flex-direction:column;width:260px;background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-right:1px solid var(--border);box-shadow:2px 0 16px var(--shadow)}
.quick-links-sidebar::before{content:'';position:absolute;top:0;left:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--accent-1),var(--accent-2),transparent 70%);opacity:.6}
.quick-links-sidebar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02),transparent 70%);opacity:.5}
.quick-links-panel{padding:0 var(--space-5) var(--space-5);display:flex;flex-direction:column;height:100%;overflow:hidden}
.sidebar-logo{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--space-3);height:92px;margin:0 calc(var(--space-5) * -1);padding:0 var(--space-5);border-bottom:1px solid var(--border);position:relative;text-decoration:none;flex-shrink:0}
.sidebar-logo:hover{text-decoration:none}
.sidebar-logo::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2),transparent 70%);opacity:.6}
.sidebar-logo .logo-icon,.sidebar-logo svg.logo-icon{width:40px;height:40px;flex-shrink:0;transition:transform var(--transition-fast)}
.sidebar-logo:hover .logo-icon{transform:scale(1.05)}
.sidebar-logo .brand{font-size:1.2rem;font-weight:800;letter-spacing:0.1em;background:linear-gradient(180deg,var(--text-heading) 0%,var(--muted) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 4px var(--shadow));text-transform:uppercase}
.dark .sidebar-logo .brand{background:linear-gradient(180deg,#ffffff 0%,#e2e8f0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3))}

@media(max-width:900px){.quick-links-sidebar{display:none}}
@media(min-width:901px){body{margin-left:260px}.navbar{height:92px;padding-top:0;padding-bottom:0}.navbar .logo{display:none}}

.navbar-context{display:flex;align-items:center;gap:var(--space-4)}
@media(max-width:900px){.navbar-context .value-props,.navbar-context .context-divider{display:none}}
.nav-home{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--text);transition:all var(--transition-fast)}
.nav-home:hover{background:rgba(255,255,255,.12);border-color:var(--accent-1);color:var(--accent-1)}
.nav-home svg{width:18px;height:18px}
.section-indicator{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--accent-glow);border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:600;color:var(--text);transition:all var(--transition-base)}
.indicator-dot{width:6px;height:6px;background:var(--accent-1);border-radius:50%;animation:pulse 2s ease-in-out infinite}
.indicator-text{text-transform:uppercase;letter-spacing:.5px}
.context-divider{width:1px;height:16px;background:var(--border)}
.value-props{display:flex;align-items:center;overflow:hidden;height:20px}
.value-prop-slider{display:flex;flex-direction:column;animation:slideProps 6s ease-in-out infinite}
.value-prop-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-xs);color:var(--text);white-space:nowrap;height:20px;font-weight:500}
.value-prop-item svg{width:15px;height:15px;color:var(--accent-1);flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1));transition:transform .2s ease}
.value-prop-item:hover svg{transform:scale(1.1)}
@keyframes slideProps{0%,30%{transform:translateY(0)}33%,63%{transform:translateY(-20px)}66%,96%{transform:translateY(-40px)}100%{transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}