.nav{
  position:fixed;inset:0 0 auto;z-index:var(--z-nav);height:54px;padding:0 clamp(18px,3vw,38px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(245,245,245,.88);backdrop-filter:blur(14px) saturate(1.25);
  font-family:var(--body);
  transition:box-shadow .2s ease,background .2s ease;
}
.nav.scrolled{background:rgba(245,245,245,.96);box-shadow:0 8px 30px rgba(0,0,0,.06)}
.nav .brand{font-size:14px;justify-self:start}
.nav-links{display:flex;align-items:center;gap:26px;color:var(--muted);font-size:14px}
.nav-links a{transition:color .18s ease,transform .18s var(--ease)}
.nav-links a:hover{color:var(--ink);transform:translateY(-1px)}
.nav-mobile-order,.nav-toggle{display:none}
/* right-side action group: "book offline station" link + "book a demo" cta */
.nav-actions{justify-self:end;display:flex;align-items:center;gap:clamp(12px,2vw,20px)}
.nav-order{color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;transition:color .18s ease,transform .18s var(--ease)}
.nav-order:hover{color:var(--blue);transform:translateY(-1px)}
.nav-cta{display:inline-flex;align-items:center;cursor:pointer;background:none;color:var(--blue);font-size:14px;font-weight:600;padding:9px 2px;white-space:nowrap}
.nav-cta:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:980px) and (min-width:701px){
  .nav{padding:0 18px}
  .nav-links{gap:14px;font-size:12px}
  .nav-actions{gap:8px}
  .nav-order,.nav-cta{font-size:12px}
}
@media(max-width:700px){
  .nav{grid-template-columns:minmax(0,1fr) auto;height:56px;padding:0 12px}
  .nav .brand{min-width:0;min-height:44px;font-size:13px}
  .nav-actions{gap:6px}
  .nav-order{display:none}
  .nav-cta{min-height:44px;padding:0 6px;font-size:13px}
  .nav-toggle{
    width:44px;height:44px;display:grid;place-content:center;gap:6px;cursor:pointer;border-radius:9px;
    background:transparent;transition:background .18s ease,transform .18s var(--ease);
  }
  .nav-toggle:hover{background:rgba(255,255,255,.65)}
  .nav-toggle:active{transform:scale(.96)}
  .nav-toggle span{display:block;width:20px;height:1.5px;border-radius:999px;background:var(--ink);transition:transform .2s var(--ease)}
  .nav.is-menu-open .nav-toggle span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .nav.is-menu-open .nav-toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .nav-links{
    position:absolute;top:calc(100% + 1px);right:12px;left:12px;display:grid;gap:2px;padding:8px;
    border:1px solid rgba(0,0,0,.12);border-radius:12px;background:rgba(245,245,245,.98);
    box-shadow:0 18px 45px rgba(35,39,46,.14);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
    transition:opacity .18s ease,visibility .18s ease,transform .22s var(--ease);
  }
  .nav.is-menu-open .nav-links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-links a{min-height:44px;padding:0 12px;display:flex;align-items:center;border-radius:8px;color:var(--ink);font-size:15px;font-weight:500}
  .nav-links a:hover,.nav-links a:focus-visible{background:#fff;transform:none}
  .nav-links a[aria-current="page"]{background:rgba(162,199,255,.28)}
  .nav-mobile-order{display:flex!important;border-top:1px solid var(--line);margin-top:3px;padding-top:3px!important}
}
/* Mobile perf (≤1024px): drop the per-scroll-frame backdrop blur on the fixed
   nav; fall back to the solid warm-gray used by .nav.scrolled. */
@media(max-width:1024px){
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(245,245,245,.96)}
}
/* Safari perf: the fixed nav's backdrop blur repaints every scroll frame. */
html.is-safari .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(245,245,245,.96)}