/* ==========================================================================
   TeamTrek V3 — Navbar, mega menu, mobile navigation
   Transparent over the hero, gains a surface + hairline on scroll.
   ========================================================================== */

.navbar {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-ui) var(--ease-ui),
              border-color var(--dur-ui) var(--ease-ui),
              box-shadow var(--dur-ui) var(--ease-ui),
              backdrop-filter var(--dur-ui) var(--ease-ui);
}
.navbar.is-scrolled,
.navbar.is-menu-open {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--neutral-200);
}
.navbar.is-scrolled { box-shadow: var(--shadow-01); }

.navbar__inner {
  display: flex; align-items: center; gap: 1.5rem;
  height: var(--header-h);
  transition: height var(--dur-ui) var(--ease-ui);
}
.navbar.is-scrolled .navbar__inner { height: var(--header-h-scrolled); }

/* ---- Brand ------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: .5625rem; }
.logo__mark { width: 26px; height: 26px; }
.logo__text {
  font-size: 1.1875rem; font-weight: var(--weight-x);
  letter-spacing: -.03em; color: var(--neutral-900);
}
.logo--on-dark .logo__text { color: #fff; }

/* Larger lockup for the footer sign-off. */
.logo--lg { gap: .75rem; }
.logo--lg .logo__mark { width: 34px; height: 34px; }
.logo--lg .logo__text { font-size: 1.625rem; letter-spacing: -.035em; }

/* The three bars wipe in from the left, longest first, once the lockup is
   revealed — the mark drawing itself rather than just appearing. */
.logo--animate .logo__bar {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-reveal) var(--ease-brand);
}
.logo--animate .logo__bar:nth-child(1) { transition-delay: .04s; }
.logo--animate .logo__bar:nth-child(2) { transition-delay: .13s; }
.logo--animate .logo__bar:nth-child(3) { transition-delay: .22s; }
.logo--animate.is-visible .logo__bar { transform: none; }

/* ---- Desktop nav ------------------------------------------------------- */
.navbar__nav { display: none; align-items: center; gap: .125rem; margin-inline: auto; }
.navbar__actions { display: none; align-items: center; gap: .5rem; }

.nav-link {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .5rem .75rem; border-radius: var(--r-xs);
  font-size: .9375rem; font-weight: var(--weight-semi);
  color: var(--neutral-800);
  transition: background-color var(--dur-micro) var(--ease-ui),
              color var(--dur-micro) var(--ease-ui);
}
.nav-link:hover,
.nav-item.is-open > .nav-link { background: var(--neutral-100); color: var(--primary-700); }
.nav-link__chevron {
  width: 14px; height: 14px; stroke-width: 2.25;
  color: var(--neutral-400);
  transition: transform var(--dur-ui) var(--ease-brand);
}
.nav-item.is-open > .nav-link .nav-link__chevron { transform: rotate(180deg); color: var(--primary-600); }

/* ---- Mega menu --------------------------------------------------------- */
.nav-item { position: relative; }

.mega {
  position: absolute; top: 100%; left: 50%;
  padding-top: .625rem;                 /* hover bridge: no gap to fall into */
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -6px) scale(.99);
  /* `visibility` is switched with a zero-length transition rather than being
     interpolated: on open it flips immediately (delay 0) so the panel can
     take focus in the same task, and on close it flips only after the fade
     has finished (delay = --dur-ui) so the panel does not vanish mid-fade. */
  transition: opacity var(--dur-ui) var(--ease-brand),
              transform var(--dur-ui) var(--ease-brand),
              visibility 0s linear var(--dur-ui);
}
.nav-item.is-open > .mega {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity var(--dur-ui) var(--ease-brand),
              transform var(--dur-ui) var(--ease-brand),
              visibility 0s linear 0s;
}

.mega__panel {
  border-radius: var(--r-lg);
  border: 1px solid var(--neutral-200);
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: var(--shadow-04);
  padding: 1.5rem;
  display: grid;
  gap: 1.75rem 2.5rem;
}
.mega--product .mega__panel  { grid-template-columns: repeat(3, minmax(196px, 1fr)); width: 760px; }
.mega--solutions .mega__panel{ grid-template-columns: repeat(3, minmax(172px, 1fr)); width: 660px; }
.mega--resources .mega__panel{ grid-template-columns: repeat(3, minmax(164px, 1fr)); width: 600px; }

/* Content reveals a beat after the panel, staggered by column */
.nav-item.is-open > .mega .mega__group {
  animation: fadeUpSm .38s var(--ease-brand) backwards;
}
.mega__group:nth-child(1) { animation-delay: .04s; }
.mega__group:nth-child(2) { animation-delay: .09s; }
.mega__group:nth-child(3) { animation-delay: .14s; }
.mega__group:nth-child(4) { animation-delay: .19s; }

.mega__grouphead {
  display: flex; align-items: center; gap: .5rem;
  padding-bottom: .625rem; margin-bottom: .375rem;
  border-bottom: 1px solid var(--neutral-150);
}
.mega__grouphead .icon { width: 15px; height: 15px; color: var(--primary-600); }
.mega__grouptitle {
  font-size: .6875rem; font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-500);
}
.mega__list { display: grid; gap: 1px; }
.mega__link {
  display: block; padding: .4375rem .5rem; margin-inline: -.5rem;
  border-radius: var(--r-xs);
  font-size: .875rem; font-weight: var(--weight-medium); color: var(--neutral-700);
  transition: background-color var(--dur-micro) var(--ease-ui),
              color var(--dur-micro) var(--ease-ui);
}
.mega__link:hover { background: var(--primary-50); color: var(--primary-800); }

/* Feature link with icon + description (Product column headers, Integrations) */
.mega__feature {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .625rem; margin-inline: -.625rem;
  border-radius: var(--r-sm);
  transition: background-color var(--dur-micro) var(--ease-ui);
}
.mega__feature:hover { background: var(--neutral-50); }
/* A reserved header height keeps the three link lists on one baseline even
   when one column's description wraps to a second line. */
.mega--product .mega__group > .mega__feature { min-height: 74px; align-items: center; }
.mega__feature-title { display: block; font-size: .875rem; font-weight: var(--weight-semi); color: var(--neutral-900); }
.mega__feature-desc  { display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.45; color: var(--neutral-500); }

.mega__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem;
  margin-top: -.25rem; padding-top: 1.125rem;
  border-top: 1px solid var(--neutral-150);
  font-size: .8125rem; color: var(--neutral-500);
}

/* ---- Burger ------------------------------------------------------------ */
.navbar__burger {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--neutral-300); border-radius: var(--r-sm);
  background: rgba(255,255,255,.7); color: var(--neutral-800);
  transition: background-color var(--dur-micro) var(--ease-ui);
}
.navbar__burger:hover { background: #fff; }

/* ---- Mobile sheet ----------------------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: #fff;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-ui),
              visibility 0s linear var(--dur-ui);
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible;
  transition: opacity var(--dur-ui) var(--ease-ui), visibility 0s linear 0s;
}

.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); flex: none;
  border-bottom: 1px solid var(--neutral-200);
}
.mobile-menu__nav {
  flex: 1; overflow-y: auto; padding-block: 1rem;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu__row { border-bottom: 1px solid var(--neutral-150); }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.0625rem .25rem;
  font-size: 1.125rem; font-weight: var(--weight-semi); color: var(--neutral-900);
  text-align: left;
}
.mobile-menu__link .icon { color: var(--neutral-400); transition: transform var(--dur-ui) var(--ease-brand); }
.mobile-menu__link[aria-expanded="true"] .icon { transform: rotate(180deg); color: var(--primary-600); }

.mobile-menu__sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-ui) var(--ease-brand), opacity var(--dur-ui) var(--ease-ui);
  opacity: 0;
}
.mobile-menu__sub.is-open { grid-template-rows: 1fr; opacity: 1; }
.mobile-menu__sub > div { min-height: 0; overflow: hidden; }
.mobile-menu__subinner { padding: 0 .25rem 1.125rem; display: grid; gap: 1.125rem; }

.mobile-menu__subgroup > p {
  font-size: .6875rem; font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: .09em; color: var(--neutral-500);
  margin-bottom: .5rem;
}
.mobile-menu__sublink {
  display: block; padding: .5rem 0;
  font-size: .9375rem; color: var(--neutral-700);
}
.mobile-menu__sublink:active { color: var(--primary-700); }

.mobile-menu__foot {
  flex: none; border-top: 1px solid var(--neutral-200);
  padding-block: 1.125rem;
  display: grid; gap: .625rem;
}

/* ---- Desktop breakpoint ----------------------------------------------- */
@media (min-width: 1024px) {
  .navbar__nav,
  .navbar__actions { display: flex; }
  .navbar__burger { display: none; }
  .mobile-menu { display: none; }
}