/* Header floats over the hero (negative margin pulls the hero up behind it) and
   is transparent at the top of the page; header.js adds .is-scrolled on scroll
   to bring back the frosted background and border. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  margin-bottom: calc(-1 * var(--header-h) - 1px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease
}

.site-header.is-scrolled,
body.nav-open .site-header {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line)
}

.bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h)
}

.brand {
  flex: none
}

.brand img {
  height: 30px;
  width: auto;
  display: block
}

.logo-light-bg {
  display: none !important
}

[data-theme="light"] .logo-dark-bg {
  display: none !important
}

[data-theme="light"] .logo-light-bg {
  display: block !important
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  flex: 1
}

.nav>a,
.dd-btn {
  position: relative;
  white-space: nowrap;
  padding: .55em .7em;
  border-radius: var(--r-xs);
  font-weight: 550;
  font-size: .93rem;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-family: inherit;
  transition: color .2s ease, background .2s ease
}

.nav>a:hover,
.dd-btn:hover {
  color: var(--head);
  background: var(--surface-2)
}

/* ===== ACTIVE TAB: gradient text + gradient bottom underline ===== */
.dd-txt {
  display: inline-block
}

.nav>a[aria-current="page"] .dd-txt,
.dd-btn.is-active .dd-txt {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.dd-btn.is-active .icon {
  color: var(--brand-b)
}

.nav>a[aria-current="page"]::after,
.dd-btn.is-active::after {
  content: "";
  position: absolute;
  left: .7em;
  right: .7em;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad)
}

/* ===== DROPDOWN ===== */
.dd {
  position: relative
}

.dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 330px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 8px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .18s;
  z-index: 60
}

.dd-small {
  min-width: 240px
}

/* Products menu: two columns on desktop so nine products stay inside short laptop screens */
@media (min-width: 1021px) {
  .dd-wide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    width: 620px
  }
}

.dd:hover .dd-menu,
.dd:focus-within .dd-menu,
.dd.open .dd-menu {
  opacity: 1;
  visibility: visible;
  transform: none
}

.dd-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-xs)
}

.dd-menu a:hover {
  background: var(--surface-2)
}

.dd-menu strong {
  display: block;
  font-size: .93rem;
  color: var(--head);
  font-weight: 600
}

.dd-menu span {
  font-size: .82rem;
  color: var(--muted)
}

/* active item inside a dropdown: gradient title, no side bar */
.dd-menu a[aria-current="page"] {
  background: var(--surface-2)
}

/* CHANGED: keep the title on its own row, only clip the gradient to the text width */
.dd-menu a[aria-current="page"] strong {
  display: block;
  width: fit-content;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  position: relative;
  z-index: 61
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0
}

.icon-btn .icon {
  font-size: 1.2rem
}

.i-close {
  display: none
}

body.nav-open .i-menu {
  display: none
}

body.nav-open .i-close {
  display: block
}

.menu-btn,
.nav-cta-m {
  display: none
}

@media (max-width: 1180px) {
  .bar-right .btn-ghost {
    display: none
  }

  .nav {
    gap: 0
  }
}

@media (max-width: 1020px) {
  .site-header,
  .site-header.is-scrolled,
  body.nav-open .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg)
  }

  .menu-btn {
    display: grid
  }

  .hide-m {
    display: none !important
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 32px;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    gap: 2px;
    z-index: 55
  }

  body.nav-open .nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none
  }

  .nav>a,
  .dd-btn {
    padding: .95em .7em;
    font-size: 1.05rem;
    width: 100%;
    justify-content: space-between
  }

  /* underline stays at the bottom on mobile too, just a bit lower */
  .nav>a[aria-current="page"]::after,
  .dd-btn.is-active::after {
    bottom: 6px
  }

  .dd-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 8px 8px;
    min-width: 0;
    display: none
  }

  .dd:hover .dd-menu,
  .dd:focus-within .dd-menu {
    display: none
  }

  .dd.open .dd-menu {
    display: block
  }

  .nav-cta-m {
    display: flex;
    gap: 10px;
    margin-top: 16px
  }

  .nav-cta-m .btn {
    flex: 1;
    justify-content: center
  }
}
/* ---------- Products mega menu (two columns: Platform | Connections) ---------- */
.dd-mega {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 28px;
  padding: 18px;
}

.dd-group {
  margin: 0 0 6px;
  padding: 0 12px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dd-menu a.dd-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px;
}

.dd-menu .dd-ico {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--brand-b);
  font-size: 1.05rem;
  line-height: 1.2;
}

.dd-menu .dd-ico .icon {
  color: var(--brand-b);
  font-size: 1.05rem;
}

.dd-tx {
  min-width: 0;
}

.dd-menu .dd-tx > span {
  display: block;
  margin-top: 2px;
}

.dd-menu a.dd-foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 10px 12px;
  white-space: nowrap;
  color: var(--brand-b);
  font-size: .85rem;
  font-weight: 600;
}

.dd-menu a.dd-foot:hover {
  background: none;
  text-decoration: underline;
}

@media (min-width: 1021px) {
  .dd-mega {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 740px;
  }
}

/* =====================================================================
   MOBILE SIDEBAR (≤1020px)
   The menu slides in from the right under the header, the page behind is
   dimmed, each dropdown is an accordion (chevron turns when open), the
   Products list is compact, and "Start Free Trial" stays at the bottom.
   (Placed last so it wins over the desktop .dd-mega rules above.)
   ===================================================================== */
@media (max-width: 1020px) {
  /* dimmed page behind the open sidebar (tap it to close: header.js) */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 49;   /* under .site-header (50), which holds the sidebar */
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .nav {
    inset: var(--header-h) 0 0 auto;
    width: min(88vw, 380px);
    padding: 6px 14px 0;
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 48px -24px rgba(0, 0, 0, .6);
    opacity: 1;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
  }

  body.nav-open .nav {
    transform: translateX(0);
  }

  /* one clean row per top-level item */
  .nav > a,
  .nav > .dd {
    border-bottom: 1px solid var(--line);
  }

  .nav > a,
  .dd-btn {
    padding: .85em .5em;
    font-size: 1rem;
    border-radius: 0;
  }

  .dd-btn .icon {
    transition: transform .25s ease;
  }

  .dd.open > .dd-btn .icon {
    transform: rotate(180deg);
    color: var(--brand-b);
  }

  /* Products: closed until tapped (the desktop rule sets display:grid) */
  .dd-menu.dd-mega {
    display: none;
    width: auto;
    padding: 2px 0 12px;
  }

  .dd.open > .dd-menu.dd-mega {
    display: block;
  }

  .dd-mega .dd-col + .dd-col {
    margin-top: 10px;
  }

  .dd-group {
    margin: 0 0 2px;
    padding: 6px 10px 4px;
    font-size: .68rem;
  }

  .dd-menu a.dd-item {
    gap: 10px;
    padding: 8px 10px;
  }

  .dd-menu a.dd-item strong {
    font-size: .93rem;
  }

  .dd-menu .dd-tx > span {
    font-size: .78rem;
    line-height: 1.35;
  }

  .dd-menu a.dd-foot {
    margin-top: 4px;
    padding: 8px 10px;
    white-space: normal;
  }

  /* Start Free Trial pinned to the bottom of the sidebar */
  .nav-cta-m {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 18px 0 calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, var(--bg) 18px);
  }
}

@media (max-width: 1020px) and (prefers-reduced-motion: reduce) {
  .nav {
    transition: none;
  }
}