/* FluxFront — nav component (core sticky bar; the Features mega-dropdown lives in css/sections/platform-framing.css + device-composition.css — see arch doc) · extracted verbatim from base.css for modularity (render-identical). */
/* ---- Nav --------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--cream) 64%, transparent);
  backdrop-filter: saturate(1.8) blur(22px); -webkit-backdrop-filter: saturate(1.8) blur(22px);
  border-bottom: 1px solid transparent;
  transition: transform 0.42s var(--e-out), border-color var(--d-3), background var(--d-3), box-shadow var(--d-3);
  will-change: transform;
}
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent); opacity: 0; transition: opacity var(--d-3); }
.nav.scrolled { border-bottom-color: var(--hairline); background: color-mix(in srgb, var(--cream) 80%, transparent);
  box-shadow: 0 8px 30px rgb(var(--paper-shadow) / 0.06), 0 1px 0 rgb(var(--paper-shadow) / 0.03); }
.nav.scrolled::after { opacity: 1; }
.nav.nav--hidden { transform: translateY(-100%); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 0; flex: none; }
.brand img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); padding: 8px 13px;
  border-radius: var(--r-sm); transition: color var(--d-2), background var(--d-2);
}
.nav-links a:hover { color: var(--ink); background: rgb(var(--paper-shadow) / 0.04); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Hamburger toggle — hidden on desktop, shown ≤920px (mobile-menu trigger). */
.nav-toggle { display: none; flex: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline-2); background: var(--cream); }
.nav-toggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform var(--d-2) var(--e-out), opacity var(--d-1); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel — full-screen sheet under the bar; desktop never shows it. */
.nav-mobile { display: none; }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .nav-in { gap: 14px; }
  .nav-toggle { display: inline-flex; }

  .nav-mobile { display: block; position: fixed; left: 0; right: 0; top: 68px; bottom: 0; z-index: 99;
    background: var(--cream); border-top: 1px solid var(--hairline);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out), visibility var(--d-3); }
  .nav-mobile.open { opacity: 1; visibility: visible; transform: none; }
  .nav-mobile-in { display: flex; flex-direction: column; padding: 8px 22px calc(36px + env(safe-area-inset-bottom)); }
  .nm-sec { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: var(--ls-label);
    text-transform: uppercase; color: var(--ink-3); margin: 18px 2px 4px; }
  .nav-mobile-in > a { padding: 13px 4px; font-size: 1.05rem; font-weight: 500; color: var(--ink);
    border-bottom: 1px solid var(--hairline); }
  .nav-mobile-in > a:active { color: var(--teal-700); }
  .nm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
  .nm-actions .btn { width: 100%; justify-content: center; }
}