/* Notch nav, shared by index.html, network.html and vision.html (nav.js draws the outline and runs the phone menu).
   The bar hangs from the top edge like a laptop notch: dark glass with concave ears.
   Desktop and tablets: logo, products, Sign in, Sign up in one row.
   Phones (600px and under): a floating capsule below the status bar with logo, Sign up and a menu button. The menu button grows
   the capsule downward into a panel with the products, Contact and Sign in, so the menu is the bar itself, not a second surface.
   One motion: the bar grows. */
/* Site-wide (every page loads this file): no browser tap overlay on anything, and no focus ring on mouse or touch.
   The ring still shows for keyboard focus (:focus-visible), so the site stays usable without a mouse. */
* { -webkit-tap-highlight-color:transparent; }
:focus:not(:focus-visible) { outline:none; }
.nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:center; pointer-events:none; }
.nav-bar { pointer-events:auto; position:relative; display:flex; align-items:center; box-sizing:border-box; width:min(640px, 100% - 24px); height:56px; padding:0 28px 0 34px; background:linear-gradient(180deg, rgba(20,21,26,0.82), rgba(8,8,10,0.86)); -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5); box-shadow:0 18px 50px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.03); white-space:nowrap; }
.nav-bar::before { content:''; position:absolute; left:24px; right:24px; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); pointer-events:none; }
.nav-home { display:inline-flex; align-items:center; gap:10px; margin-right:28px; color:#f4f4f4; }
.nav-home img:first-child { display:block; width:28px; height:28px; filter:drop-shadow(0 4px 10px rgba(9,9,153,0.5)); }
.nav-word { display:block; height:11px; width:auto; }
.nav-cap { position:relative; top:-1px; display:flex; align-items:center; gap:22px; font-size:13px; font-weight:500; line-height:1; }
.nav-cap a { display:block; color:#8e949c; transition:color 0.2s; }
.nav-cap a:hover, .nav-cap a[aria-current] { color:#f4f4f4; }
.nav-sp { flex:1; min-width:20px; }
.nav-in { display:inline-flex; align-items:center; height:36px; padding:0 12px; margin-right:4px; border-radius:10px; font-size:13px; font-weight:500; color:#a0a6ae; transition:color 0.2s; }
.nav-in:hover { color:#f4f4f4; }
.nav-up { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px 0 15px; border-radius:11px; background:linear-gradient(180deg, #fff, #e9eaee); color:#060607; font-size:13px; font-weight:600; box-shadow:inset 0 1px 0 #fff, 0 6px 16px rgba(0,0,0,0.35); }
.nav-up:hover { background:#fff; color:#060607; }
.nav-up svg { display:block; width:13px; height:13px; }
.nav-btn, .nav-menu, .nav-scrim { display:none; }

@media (max-width:600px) {
  /* Phones: a floating capsule instead of the notch. The phone has its own notch and status bar up there,
     so the bar drops below the safe area, insets from the edges and rounds all four corners (nav.js's notch outline is overridden).
     Row one: logo, Sign up, menu button. Row two: the menu, 0 tall until opened; the capsule grows down into the panel. */
  .nav { padding:calc(env(safe-area-inset-top, 0px) + 10px) 12px 0; }
  .nav-bar { display:grid; grid-template-columns:auto 1fr auto auto; grid-template-rows:60px auto; align-items:center; width:100%; height:auto; padding:0 10px 0 16px; border-radius:20px; clip-path:none !important; box-shadow:0 18px 50px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05); }
  .nav-bar::before { left:28px; right:28px; }
  .nav-cap, .nav-in, .nav-sp { display:none; }
  .nav-home { grid-column:1; margin-right:0; }
  .nav-up { grid-column:3; height:40px; padding:0 14px 0 16px; border-radius:12px; font-size:14px; }
  /* Two lines that cross into an X. Same height and radius as Sign up, in the glass instead of white. */
  .nav-btn { grid-column:4; display:grid; place-items:center; width:40px; height:40px; margin-left:8px; padding:0; border:0; border-radius:12px; background:rgba(255,255,255,0.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1); color:#f4f4f4; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .nav-btn i { grid-area:1 / 1; width:15px; height:1.6px; border-radius:1px; background:currentColor; transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
  .nav-btn i:first-child { transform:translateY(-3px); }
  .nav-btn i:last-child { transform:translateY(3px); }
  .nav[data-open] .nav-btn i:first-child { transform:rotate(45deg); }
  .nav[data-open] .nav-btn i:last-child { transform:rotate(-45deg); }
  /* The panel: rows unfold with the capsule (grid rows 0fr to 1fr), their text fades in just behind it. */
  .nav-menu { grid-column:1 / -1; display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.45s; }
  .nav[data-open] .nav-menu { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .nav-menu > div { min-height:0; overflow:hidden; padding:0 6px; }
  .nav-menu a { display:flex; align-items:center; justify-content:space-between; height:58px; border-top:1px solid rgba(255,255,255,0.07); font-size:19px; font-weight:600; letter-spacing:-0.03em; color:#a0a6ae; opacity:0; transition:opacity 0.2s, color 0.2s; -webkit-tap-highlight-color:transparent; }
  .nav[data-open] .nav-menu a { opacity:1; transition:opacity 0.35s 0.1s, color 0.2s; }
  .nav-menu a[aria-current], .nav-menu a:active { color:#f4f4f4; }
  .nav-menu svg { display:block; width:15px; height:15px; opacity:0.55; }
  /* Sign in closes the panel as a full-width glass button, the quiet partner to Sign up in the bar */
  .nav-menu .nav-menu-in { justify-content:center; height:48px; margin:10px 0 16px; border-top:0; border-radius:14px; background:rgba(255,255,255,0.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1); font-size:15px; font-weight:500; letter-spacing:0; color:#f4f4f4; }
  /* Dims the page behind the open menu; a tap on it closes the menu. */
  .nav-scrim { display:block; position:fixed; inset:0; z-index:-1; background:rgba(3,3,4,0.5); opacity:0; pointer-events:none; transition:opacity 0.35s; }
  .nav[data-open] .nav-scrim { opacity:1; pointer-events:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .nav-menu, .nav[data-open] .nav-menu, .nav-menu a, .nav[data-open] .nav-menu a, .nav-btn i, .nav-scrim { transition:none; }
}