/* Community Reload — primary navigation */
:root { --header-height: 84px; }
.navbar { position: fixed; inset: 0 0 auto; z-index: 1000; width: 100%; border-bottom: 1px solid transparent; background: rgba(248,250,255,.76); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.navbar.scrolled { border-bottom-color: rgba(203,213,225,.82); background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(15,23,42,.08); }
.nav-inner { position: relative; display: flex; align-items: center; min-height: var(--header-height); gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #111827; text-decoration: none; transition: opacity 180ms ease, transform 180ms ease; }
.brand:hover { opacity: .86; transform: translateY(-1px); }
.brand:focus-visible, .nav-links a:focus-visible, .menu-toggle:focus-visible { outline: 3px solid rgba(99,67,238,.3); outline-offset: 4px; }
.brand-logo { width: 50px; height: 50px; flex: 0 0 50px; object-fit: contain; border-radius: 12px; }
.brand-name { display: grid; gap: 0; font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif); font-size: .91rem; font-weight: 800; line-height: 1.04; letter-spacing: .035em; text-transform: uppercase; }
.brand-name span:last-child { color: var(--color-primary, #6847f5); }
.brand-text { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.brand-text strong { color: var(--color-text-strong, #111827); font-family: var(--font-heading, "Plus Jakarta Sans", sans-serif); font-size: .82rem; font-weight: 800; letter-spacing: .105em; white-space: nowrap; }
.brand-text span { color: var(--color-text-soft, #64748b); font-size: .57rem; font-weight: 700; letter-spacing: .24em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.nav-links a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px; border-radius: 8px; color: #526077; font-size: .78rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.nav-links a:hover { color: #26203f; background: rgba(104,71,245,.07); }
.nav-links a.active { color: var(--color-primary, #6847f5); }
.nav-links a.active:not(.nav-cta)::after { position: absolute; right: 14px; bottom: 7px; left: 14px; height: 2px; border-radius: 4px; background: currentColor; content: ""; }
.nav-links a.nav-cta { min-height: 44px; margin-left: 9px; padding: 0 18px; border: 1px solid #5d43e8; border-radius: 8px; background: #6847f5; box-shadow: 0 8px 18px rgba(104,71,245,.2); color: #fff; }
.nav-links a.nav-cta:hover { background: #5839e0; color: #fff; transform: translateY(-1px); }
.menu-toggle { display: none; position: relative; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid rgba(148,163,184,.55); border-radius: 8px; background: #fff; cursor: pointer; }
.menu-toggle span { position: absolute; left: 50%; width: 19px; height: 2px; border-radius: 2px; background: #1e293b; transform: translateX(-50%); transition: top 180ms ease, transform 180ms ease, opacity 120ms ease; }
.menu-toggle span:nth-child(1) { top: 14px; }.menu-toggle span:nth-child(2) { top: 21px; }.menu-toggle span:nth-child(3) { top: 28px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }
@media (max-width: 900px) { .nav-inner { min-height: 76px; }.brand-logo { width: 46px; height: 46px; flex-basis: 46px; }.menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }.nav-links { position: absolute; top: calc(100% - 5px); right: 0; left: 0; display: grid; gap: 4px; padding: 12px; border: 1px solid rgba(203,213,225,.86); border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 18px 36px rgba(15,23,42,.14); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms ease; }.nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }.nav-links a { justify-content: flex-start; min-height: 48px; padding-inline: 14px; }.nav-links a.active:not(.nav-cta)::after { right: auto; bottom: 10px; left: 14px; width: 34px; }.nav-links a.nav-cta { justify-content: center; margin: 6px 0 0; }body.navigation-open { overflow: hidden; } }
@media (max-width: 480px) { :root { --header-height: 72px; }.brand { gap: 9px; }.brand-logo { width: 42px; height: 42px; flex-basis: 42px; }.brand-name { font-size: .79rem; } }