.navbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.navbar-inner{
  display:flex;
  align-items:center;
  gap:40px;
  height:68px;
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:-0.035em;
  color:#0B1220;
  margin-right:auto;
}
.brand img{width:44px;height:44px;margin-left:-8px;}

.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
}
.nav-links > a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:0.92rem;
  font-weight:500;
  color:var(--text-secondary);
  padding:8px 0;
  transition:color .12s;
}
.nav-links > a:hover{color:var(--text-primary);}
.nav-links > a svg{width:13px;height:13px;color:var(--text-tertiary);}

/* ---- Dropdown items (Product, Resources) ---- */
.nav-item{
  position:relative;
}
.nav-item > .nav-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:inherit;
  font-size:0.92rem;
  font-weight:500;
  color:var(--text-secondary);
  background:none;
  border:0;
  padding:8px 0;
  cursor:pointer;
  transition:color .12s;
}
.nav-item > .nav-link:hover{color:var(--text-primary);}
.nav-item > .nav-link svg{
  width:13px;height:13px;
  color:var(--text-tertiary);
  transition:transform .15s ease;
}

.nav-dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, -6px);
  margin-top:10px;
  min-width:280px;
  background:var(--background);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
.nav-item:hover > .nav-link svg,
.nav-item:focus-within > .nav-link svg,
.nav-item.is-open > .nav-link svg{
  transform:rotate(180deg);
}
.nav-dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  font-size:0.88rem;
  font-weight:500;
  color:var(--text-secondary);
  transition:background .12s, color .12s;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible{
  background:var(--surface);
  color:var(--text-primary);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  background:none;
  border:1px solid var(--border-strong);
  border-radius:8px;
  width:38px;height:38px;
  cursor:pointer;
}
.nav-toggle svg{width:18px;height:18px;}

@media (max-width: 900px){
  .nav-links{display:none;}
  /* Both nav-actions buttons are duplicated inside .mobile-menu, so hide the
     whole group rather than just btn-light (which no longer covers the CTA
     now that it's btn-primary). */
  .nav-actions{display:none;}
  .nav-toggle{display:inline-flex;}
}

.mobile-menu{
  display:none;
  flex-direction:column;
  border-top:1px solid var(--border);
  background:#fff;
  padding:12px 24px 20px;
}
.mobile-menu.open{display:flex;}
.mobile-menu > a{
  padding:12px 0;
  border-bottom:1px solid var(--border);
  font-size:0.95rem;
  color:var(--text-secondary);
}
.mobile-menu > a:last-of-type{border-bottom:0;}
.mobile-menu .btn{margin-top:14px;}

/* Product / Resources render as a label plus flat indented links, since a
   hover panel has nothing to hover on a touch menu. */
.mobile-menu-group{
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.mobile-menu-group-label{
  display:block;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-tertiary);
  margin-bottom:6px;
}
.mobile-menu-group a{
  display:block;
  padding:8px 0 8px 4px;
  font-size:0.92rem;
  color:var(--text-secondary);
}