/* Shared VIZO·DYNAMICS site navigation.
   Loaded on the homepage and every subpage so the nav is visually cohesive and
   behaves identically everywhere, including an accessible mobile menu.
   Also provides the shared rectangular action-button treatment used by pages
   that do not load the component stylesheet. */

/* Premium action buttons: sharp white outline, uppercase D-DIN-like text, and
   stable solid fill swaps without layout shift. */
.nav-cta,
.btn,
.btn-primary,
.btn-secondary,
.copy-btn,
.try-api-btn,
.download-card a {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  overflow: hidden;
  border: 2px solid #fff !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
  cursor: pointer;
  font-family: 'Geist', 'Arial Narrow', Arial, sans-serif;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .055em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color .18s cubic-bezier(.33, 1, .68, 1),
    border-color .18s cubic-bezier(.33, 1, .68, 1),
    color .18s cubic-bezier(.33, 1, .68, 1);
}

.nav-cta,
.btn-primary,
.try-api-btn {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}

.btn:hover,
.btn-secondary:hover,
.copy-btn:hover,
.download-card a:hover,
.btn:focus-visible,
.btn-secondary:focus-visible,
.copy-btn:focus-visible,
.download-card a:focus-visible {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
  opacity: 1 !important;
  transform: none !important;
}

.nav-cta:hover,
.nav-cta:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.try-api-btn:hover,
.try-api-btn:focus-visible {
  background-color: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: none !important;
}

.nav-links a[aria-current="page"]:not(.nav-cta) {
  color: #fff !important;
}

.nav-links .nav-cta[aria-current="page"] {
  outline: 1px solid rgba(255, 255, 255, .42);
  outline-offset: 4px;
}

.site-footer {
  padding: clamp(48px, 7vw, 72px) clamp(20px, 6vw, 72px) 46px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  background: transparent !important;
  color: rgba(245, 246, 248, .48) !important;
  text-align: center !important;
}

.site-footer .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin: 0 auto 22px;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1.6;
  text-transform: uppercase;
}

.site-footer .links a {
  color: rgba(245, 246, 248, .58) !important;
  text-decoration: none;
  transition: color .18s ease;
}

.site-footer .links a:hover,
.site-footer .links a:focus-visible {
  color: #fff !important;
}

.site-footer .bd {
  margin-bottom: 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: .34em !important;
  text-transform: uppercase;
}

.site-footer .bd b {
  color: #3FD8FF;
  font-weight: 760;
}

.site-footer .cp {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(245, 246, 248, .34);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1.7;
}

/* Hamburger button — hidden on desktop, revealed on small screens. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #f0f0f0;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  /* Collapse the link row into a dropdown panel under the fixed nav bar. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    margin: 0;
    padding: 8px 20px 16px;
    background: rgba(5, 5, 5, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  }
  .nav-links.open { display: flex !important; }

  /* Override per-page rules that hid individual links at narrow widths. */
  .nav-links a:not(.nav-cta) {
    display: block !important;
    margin: 0 !important;
    padding: 14px 4px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-links .nav-cta {
    display: inline-flex !important;
    width: min(100%, 280px);
    margin: 12px auto 0 !important;
    padding: 0 22px;
    border: 2px solid #fff !important;
    text-align: center;
    align-self: center;
  }
}

/* Final marketing authority: every page loads this file last, so keep the
   premium dark nav and action system here instead of duplicating page rules. */
nav {
  min-height: 72px !important;
  background: rgba(0, 0, 0, .72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}

.nav-logo {
  color: #fff !important;
}

.nav-logo span {
  font-size: .86rem !important;
  font-weight: 780 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.nav-logo img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.nav-links {
  gap: clamp(12px, 1.75vw, 26px) !important;
}

.nav-links a:not(.nav-cta) {
  color: rgba(245, 246, 248, .72) !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta):focus-visible,
.nav-links a[aria-current="page"]:not(.nav-cta) {
  color: #fff !important;
}

.nav-cta,
.btn,
.btn-primary,
.btn-secondary,
.copy-btn,
.try-api-btn,
.download-card a {
  min-height: 46px !important;
  padding: 0 24px !important;
  border-radius: 0 !important;
  border-width: 2px !important;
  font-size: .74rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
}

.btn-primary,
.nav-cta,
.try-api-btn {
  background-color: #fff !important;
  color: #000 !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible,
.try-api-btn:hover,
.try-api-btn:focus-visible {
  background-color: transparent !important;
  color: #fff !important;
}

@media (max-width: 860px) {
  nav {
    min-height: 64px !important;
    padding: 14px 20px !important;
  }

  .nav-links {
    padding: 10px 20px 18px !important;
    background: rgba(0, 0, 0, .97) !important;
  }

  .nav-links a:not(.nav-cta) {
    min-height: 46px;
    padding: 15px 4px !important;
    text-align: center;
  }

  .nav-links .nav-cta {
    width: min(100%, 280px) !important;
    min-height: 46px !important;
    margin: 14px auto 0 !important;
  }
}

nav .nav-links a.nav-cta,
nav .nav-links a.nav-cta[aria-current="page"] {
  border-radius: 0 !important;
}