/* ============================================================
   SHARED NAV — uniform dark/glassy top bar with hover dropdowns.
   Loaded by every page (ai-labs.html, …) so the
   navigation stays identical everywhere. Brand tokens are used when
   the page defines them, with literal fallbacks so it renders the
   same on any page regardless of that page's own :root.
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* At the top the bar is invisible chrome — logo + links float over the hero,
     no background, no divider. The frosted-glass surface fades in on scroll.
     (backdrop-filter/box-shadow reset here in case a page's own CSS sets them.) */
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: background .32s var(--ease, cubic-bezier(.2,.8,.2,1)),
              border-color .32s var(--ease, cubic-bezier(.2,.8,.2,1)),
              box-shadow .32s var(--ease, cubic-bezier(.2,.8,.2,1)),
              backdrop-filter .32s var(--ease, cubic-bezier(.2,.8,.2,1));
}
.nav.scrolled {
  /* Tint kept dark enough that white nav text stays WCAG AA (>=4.5:1) even
     when the bar sits over a light section; the blur keeps the glass feel. */
  background: rgba(6,14,43,0.86);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
}
.nav-inner { display: flex; align-items: center; gap: 24px; padding: 12px 24px; max-width: 1360px; margin: 0 auto; position: relative; }
.nav-logo { display: flex; align-items: center; height: 48px; flex-shrink: 0; }
.nav-logo img { height: 48px; width: auto; display: block; filter: brightness(0) invert(1); }

/* centered pill of top-level destinations */
.nav-links {
  display: flex; gap: 4px; position: absolute; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 100px; padding: 5px;
}
.nav-item { position: relative; display: flex; }
.nav-links a {
  position: relative; font-family: 'Poppins','Inter',sans-serif; font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,0.72); padding: 8px 15px; border-radius: 100px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 200ms var(--ease, cubic-bezier(.2,.8,.2,1)), background 200ms var(--ease, cubic-bezier(.2,.8,.2,1));
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-links a.active { color: #fff; background: var(--purple, #7B4FFF); }
/* caret on items that drop */
.nav-item.has-drop > a::after {
  content: ''; width: 0; height: 0; margin-left: 3px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor;
  opacity: .55; transition: transform .2s var(--ease, ease);
}
.nav-item.has-drop:hover > a::after, .nav-item.has-drop.open > a::after { transform: rotate(180deg); }

/* AI Labs accent */
.nav-links a.ai-link { color: var(--purple-30, #A98CFF); }
.nav-links a.ai-link:hover, .nav-links a.ai-link.active { color: #fff; background: var(--purple, #7B4FFF); }
.nav-links a .spark, .nav-links a .nav-spark { width: 13px; height: 13px; color: #fff; animation: navSparkle 2.4s ease-in-out infinite; }
@keyframes navSparkle { 0%,100% { opacity: .55; transform: scale(.85) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(90deg); } }
.new-pill, .nav-new {
  font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 700; letter-spacing: .08em;
  background: var(--taxi, #FFC401); color: var(--ink, #060E2B); padding: 2px 6px; border-radius: 5px; line-height: 1;
}

/* ---- hover dropdown (second level) ---- */
.nav-drop {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 244px; background: rgba(13,27,62,0.98);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 8px;
  box-shadow: 0 28px 64px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease, ease), transform .2s var(--ease, ease); z-index: 130;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop, .nav-item.open .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* invisible bridge so the cursor can cross the gap without the menu closing */
.nav-drop::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-drop a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  font-family: 'Poppins','Inter',sans-serif; font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,0.8); background: none; white-space: nowrap;
}
.nav-drop a:hover { background: rgba(255,255,255,0.07); color: #fff; }
.nav-drop a i { width: 15px; height: 15px; color: var(--kaveri, #32CAD4); flex-shrink: 0; }
.nav-drop a.hook { color: var(--purple-30, #A98CFF); font-weight: 600; }
.nav-drop a.hook i { color: var(--purple-30, #A98CFF); }
.nav-drop .drop-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 8px; }

/* ---- CTA cluster ---- */
.nav-cta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.nav-cta .login { font-family: 'Poppins','Inter',sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.78); padding: 9px 14px; border-radius: 100px; }
.nav-cta .login:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-demo {
  display: inline-flex; align-items: center; gap: 8px; font-family: 'Poppins','Inter',sans-serif; font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 100px; background: var(--purple, #7B4FFF); color: #fff;
  box-shadow: 0 8px 24px var(--purple-glow, rgba(123,79,255,0.28));
  transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
}
.nav-demo:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(123,79,255,0.45); }
.nav-demo i { width: 16px; height: 16px; }

/* ---- burger + mobile sheet ---- */
.nav-burger { display: none; }
.nav-mobile, .nav-scrim { display: none; }
.m-head { display: none; }
html { scroll-padding-top: 88px; }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto;
    width: 44px; height: 44px; padding: 0 11px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05); transition: background 200ms var(--ease, ease), border-color 200ms var(--ease, ease);
  }
  .nav-burger:hover, .nav-burger:active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); }
  .nav-burger span { display: block; height: 2px; width: 22px; background: #fff; border-radius: 2px; transition: transform .28s var(--ease, ease), opacity .2s var(--ease, ease); }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-mobile {
    display: flex; flex-direction: column; gap: 4px; position: fixed; top: 0; left: 0; right: 0; z-index: 99;
    padding: 76px 18px 26px; background: rgba(6,14,43,0.97);
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.08); max-height: 100dvh; overflow-y: auto;
    transform: translateY(-101%); transition: transform .34s var(--ease, ease);
  }
  .nav-mobile.open { transform: translateY(0); box-shadow: 0 24px 54px rgba(0,0,0,0.5); }
  .nav-mobile .m-head { display: block; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin: 16px 6px 4px; }
  .nav-mobile .m-head:first-child { margin-top: 0; }
  .nav-mobile a {
    font-family: 'Poppins','Inter',sans-serif; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.82);
    padding: 13px 14px; border-radius: 12px; display: flex; align-items: center; gap: 9px;
    transition: background 160ms var(--ease, ease), color 160ms var(--ease, ease);
  }
  .nav-mobile a:hover, .nav-mobile a:active { background: rgba(255,255,255,0.06); color: #fff; }
  .nav-mobile a.active { color: #fff; background: var(--purple, #7B4FFF); }
  .nav-mobile a.hook { color: var(--purple-30, #A98CFF); }
  .nav-mobile a .spark, .nav-mobile a .nav-spark { color: var(--taxi, #FFC401); width: 15px; height: 15px; }
  .nav-mobile .m-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
  .nav-mobile .m-cta .nav-demo, .nav-mobile .m-cta .login { width: 100%; justify-content: center; text-align: center; padding: 14px; border-radius: 12px; }

  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 97; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
  .nav-scrim.open { opacity: 1; visibility: visible; }
}