.nav,
.mobile-menu {
  --ink:#050608;
  --teal:#02D0E1;
  --cyan:#6FF2FF;
  --pink:#FF8FCC;
  --amber:#FFB347;
  --lav:#B48BE8;
  --soft:rgba(255,255,255,.66);
  --soft-2:rgba(255,255,255,.4);
  --line:rgba(255,255,255,.10);
  --mono:"Geist Mono",monospace;
  --sans:"Geist",system-ui,sans-serif;
}
.nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  justify-content: normal !important;
  gap: 0 !important;
  padding: 12px 44px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-bottom-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    top .4s cubic-bezier(.2, .7, .2, 1),
    left .4s cubic-bezier(.2, .7, .2, 1),
    right .4s cubic-bezier(.2, .7, .2, 1),
    width .4s cubic-bezier(.2, .7, .2, 1),
    transform .4s cubic-bezier(.2, .7, .2, 1),
    padding .4s ease,
    background .4s ease,
    border-color .4s ease,
    border-radius .4s ease,
    box-shadow .4s ease !important;
}
.nav:not(.scrolled)::before {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 150px;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(
      to bottom,
      rgba(5, 6, 12, .6),
      rgba(5, 6, 12, 0));
}
.nav.scrolled {
  top: 14px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(1180px, calc(100% - 36px)) !important;
  padding: 8px 14px 8px 22px !important;
  background: rgba(12, 14, 22, .38) !important;
  backdrop-filter: saturate(180%) blur(30px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(30px) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4) !important;
}
.nav.scrolled::before {
  content: none !important;
}
.nav .logo {
  justify-self: start;
  font-family: var(--sans) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  letter-spacing: -.045em !important;
  color: var(--teal) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}
.nav .logo span,
.nav .logo .v,
.nav .logo .ai {
  color: var(--teal) !important;
  font-weight: 800 !important;
}
.nav .logo .ai {
  font-size: .86em !important;
  letter-spacing: -.035em !important;
  opacity: 1 !important;
  margin-left: 0 !important;
}
.nav .nav-links {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.nav .nav-link,
.nav .nav-dd-toggle {
  color: var(--soft) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  transition: color .2s, background .2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  position: relative !important;
}
.nav .nav-link:hover,
.nav .nav-dd-toggle:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
}
.nav .nav-link.active::after,
.nav .nav-links a.active::after {
  content: none !important;
}
.nav .nav-dd {
  position: static !important;
}
.nav .nav-dd::before {
  content: none !important;
}
.nav .nav-dd-toggle::after {
  content: "▾" !important;
  font-size: 9px !important;
  opacity: .6 !important;
  transition: transform .25s !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}
.nav .nav-dd.is-open .nav-dd-toggle {
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
}
.nav .nav-dd.is-open .nav-dd-toggle::after {
  transform: rotate(180deg) !important;
}
.nav .nav-actions {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}
.nav .btn-login {
  color: var(--soft) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color .2s !important;
  cursor: pointer !important;
}
.nav .btn-login:hover {
  color: #fff !important;
}
.nav .btn-demo {
  background: var(--teal) !important;
  color: var(--ink) !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .25s !important;
  cursor: pointer !important;
}
.nav .btn-demo:hover {
  box-shadow: 0 0 28px rgba(2, 208, 225, .55) !important;
  transform: translateY(-1px) !important;
}
.nav .nav-mega-panel {
  position: absolute !important;
  top: calc(100% - 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  width: min(1260px, calc(100vw - 88px)) !important;
  background: rgba(8, 10, 18, .94) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  backdrop-filter: saturate(160%) blur(26px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(26px) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.2, .7, .2, 1),
    visibility 0s linear .28s !important;
  z-index: 200 !important;
  margin-top: 0 !important;
}
.nav .nav-dd.is-open .nav-mega-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
  visibility: visible !important;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.2, .7, .2, 1),
    visibility 0s linear 0s !important;
}
.nav .nav-mega-panel[data-cols="1"] {
  width: min(940px, calc(100vw - 88px)) !important;
}
.nav .nav-mega-panel[data-cols="2"] {
  width: min(940px, calc(100vw - 88px)) !important;
}
.nav .nav-mega-grid {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr) minmax(300px, .95fr) !important;
  gap: 22px !important;
}
.nav .nav-mega-panel[data-cols="1"] .nav-mega-grid {
  grid-template-columns: minmax(420px, 1.25fr) minmax(320px, .85fr) !important;
}
.nav .nav-mega-panel[data-cols="2"] .nav-mega-grid {
  grid-template-columns: minmax(360px, 1fr) minmax(340px, .9fr) !important;
}
.nav .nav-mega-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.nav .mega-tag {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--soft-2) !important;
  padding: 4px 10px 10px !important;
  border: 0 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}
.nav .mega-item {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 12px !important;
  align-items: flex-start !important;
  padding: 11px 12px !important;
  border-radius: 11px !important;
  text-decoration: none !important;
  transition: background .2s !important;
  cursor: pointer !important;
  color: inherit !important;
}
.nav .mega-item:hover {
  background: rgba(255, 255, 255, .05) !important;
}
.nav .mi-icon {
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--line) !important;
  transform: none !important;
  box-shadow: none !important;
}
.nav .mi-icon svg {
  width: 19px !important;
  height: 19px !important;
}
.nav .mi-cyan {
  color: var(--cyan) !important;
  background: rgba(2, 208, 225, .08) !important;
  border-color: rgba(2, 208, 225, .28) !important;
}
.nav .mi-pink {
  color: var(--pink) !important;
  background: rgba(255, 143, 204, .08) !important;
  border-color: rgba(255, 143, 204, .28) !important;
}
.nav .mi-amber {
  color: var(--amber) !important;
  background: rgba(255, 179, 71, .08) !important;
  border-color: rgba(255, 179, 71, .28) !important;
}
.nav .mi-lavender {
  color: var(--lav) !important;
  background: rgba(180, 139, 232, .08) !important;
  border-color: rgba(180, 139, 232, .28) !important;
}
.nav .mi-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}
.nav .mi-name {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #fff !important;
  line-height: 1.2 !important;
}
.nav .mi-desc {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--soft-2) !important;
}
.nav .mega-tm {
  font-size: .6em !important;
  vertical-align: super !important;
  color: inherit !important;
}
.nav .nav-mega-feature {
  position: relative !important;
  min-width: 0 !important;
  min-height: 170px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 18px !important;
  text-decoration: none !important;
  border: 1px solid var(--line) !important;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, .05),
      rgba(255, 255, 255, .01)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  transition: border-color .25s !important;
  cursor: pointer !important;
}
.nav .nav-mega-feature:hover {
  border-color: rgba(2, 208, 225, .35) !important;
  box-shadow: none !important;
}
.nav .mf-visual {
  position: absolute !important;
  inset: 0 !important;
  opacity: .5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: hidden !important;
}
.nav .mf-visual svg {
  width: 100% !important;
  height: 100% !important;
}
.nav .mf-title {
  position: relative !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -.02em !important;
  color: #fff !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}
.nav .mf-title em {
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--cyan) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.nav .mf-desc {
  position: relative !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: var(--soft) !important;
  margin: 0 0 12px !important;
}
.nav .mf-cta {
  position: relative !important;
  margin: 0 !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--cyan) !important;
}
.nav .nav-burger {
  display: none;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-right: 10px !important;
}
.nav .nav-burger span {
  display: block !important;
  width: 18px !important;
  height: 1.5px !important;
  background: #fff !important;
  position: relative !important;
  transition: transform .25s, opacity .2s !important;
}
.nav .nav-burger span::before,
.nav .nav-burger span::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 18px !important;
  height: 1.5px !important;
  background: #fff !important;
  transition: transform .25s, top .25s !important;
}
.nav .nav-burger span::before {
  top: -6px !important;
}
.nav .nav-burger span::after {
  top: 6px !important;
}
.nav .nav-burger.is-open span {
  background: transparent !important;
}
.nav .nav-burger.is-open span::before {
  top: 0 !important;
  transform: rotate(45deg) !important;
}
.nav .nav-burger.is-open span::after {
  top: 0 !important;
  transform: rotate(-45deg) !important;
}
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(360px, 86vw) !important;
  background: rgba(8, 10, 18, .98) !important;
  backdrop-filter: saturate(160%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(24px) !important;
  border-left: 1px solid var(--line) !important;
  z-index: 150 !important;
  transform: translateX(100%) !important;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1) !important;
  padding: 84px 22px 28px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.mobile-menu.is-open {
  transform: translateX(0) !important;
}
.mobile-menu a {
  color: var(--soft) !important;
  text-decoration: none !important;
  font-size: 16px !important;
  padding: 14px 12px !important;
  border-radius: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
.mobile-menu a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .04) !important;
}
.mobile-menu .mm-section {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--soft-2) !important;
  padding: 18px 12px 6px !important;
  border: none !important;
}
.mobile-menu .mm-cta {
  background: var(--teal) !important;
  color: var(--ink) !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-top: 14px !important;
  border: none !important;
}
.mm-scrim {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, .6) !important;
  z-index: 140 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .25s !important;
}
.mm-scrim.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
@media (max-width: 1280px) {
  .nav .nav-links {
    display: none !important;
  }
  .nav .nav-burger {
    display: inline-flex !important;
  }
  .nav {
    padding: 12px 20px !important;
  }
  .nav .nav-actions .btn-login {
    display: none !important;
  }
  .nav .nav-mega-panel {
    display: none !important;
  }
}
@media (max-width: 560px) {
  .nav .nav-actions .btn-demo {
    display: none !important;
  }
}