/* topbar, dropdown, burger, mobile drawer */

/* TOP NAV */
.topbar{
  color:#fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 51;
  padding-top: 15px;
  transition: opacity 0.3s ease;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  box-shadow: none !important;
  border-bottom: none !important;
}

.topbar.scrolled{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  box-shadow: none !important;
  border-bottom: none !important;
}
.nav-inner{
  width:min(1720px, calc(100% - (var(--site-gutter, 24px) * 2)));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:16px max(0px, calc(var(--site-gutter-wide, 48px) - var(--site-gutter, 24px)));
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand--logoonly{ gap:0; }
.brand-logo{
  height:32px;
  width:auto;
  object-fit:contain;
  transition: transform 0.3s var(--ease-spring), filter 0.3s ease;
}
.brand:hover .brand-logo{
  transform: scale(1.08);
  filter: drop-shadow(0 4px 12px rgba(74,158,255,0.3));
}

.nav-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  font-weight:300;
  min-width:0;
}
.nav-link{
  opacity:.82;
  padding:6px 2px;
  position:relative;
  font-size: 13px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #4a9eff, #8fd0ff);
  border-radius: 999px;
  transition: width 0.3s var(--ease-out-expo), left 0.3s var(--ease-out-expo);
}
.nav-link:hover{ opacity:1; }
.nav-link:hover::after { width: 100%; left: 0; }
.nav-link + .nav-link{ margin-left:20px; }
.nav-link + .nav-link::before{
  content:"|";
  position:absolute;
  left:-20px;
  top:50%;
  transform:translateY(-50%);
  opacity:.35;
  font-weight:500;
}

/* Dropdown */
.nav-dropdown{ position:relative; display:inline-block; }
.nav-link-btn{
  background:transparent;
  border:0;
  color:#fff;
  font:inherit;
  cursor:pointer;
}
.chev{ opacity:.85; margin-left:6px; }
.dropdown-menu{
  position:absolute;
  top:44px;
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width: 240px;
  background: rgba(7,26,67,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.nav-dropdown.open .dropdown-menu{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.dropdown-menu a{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  color:#fff;
  opacity: 0;
  transform: translateY(-6px);
  font-size: 14px;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
}
.nav-dropdown.open .dropdown-menu a{
  opacity: 1;
  transform: translateY(0);
}
.nav-dropdown.open .dropdown-menu a:nth-child(1){ transition-delay: 0.03s; }
.nav-dropdown.open .dropdown-menu a:nth-child(2){ transition-delay: 0.06s; }
.nav-dropdown.open .dropdown-menu a:nth-child(3){ transition-delay: 0.09s; }
.nav-dropdown.open .dropdown-menu a:nth-child(4){ transition-delay: 0.12s; }
.nav-dropdown.open .dropdown-menu a:nth-child(5){ transition-delay: 0.15s; }
.dropdown-menu a:hover{
  background: rgba(255,255,255,.10);
}

.nav-icons{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.icon-btn{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  background: rgba(255,255,255,.08);
  transition: transform .25s var(--ease-spring), box-shadow .3s ease, filter .3s ease;
}
.icon-btn:hover{ transform: translateY(-2px) scale(1.05); box-shadow: var(--glow); }
.icon-btn:active{ transform: translateY(0) scale(0.98); }

/* Instagram gradient */
.icon-btn.ig{
  color:#fff;
  background:
    radial-gradient(circle at 30% 110%,
      #feda75 0%,
      #fa7e1e 25%,
      #d62976 55%,
      #962fbf 75%,
      #4f5bd5 100%);
}

/* LinkedIn: white "L" on blue */
.icon-btn.li{
  background:#0A66C2;
  border-color: rgba(255,255,255,.25);
  color:#fff;
}
.li-letter{
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-0.5px);
}

.burger{
  display:none;
  width:40px;
  height:40px;
  border-radius:0;
  background: transparent;
  border:0;
  cursor:pointer;
  position: relative;
  padding: 0;
  z-index: 51;
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  margin:4px auto;
  border-radius:999px;
  transition: transform 0.3s var(--ease-out-expo), opacity 0.2s ease;
  transform-origin: center;
}
.burger[aria-expanded="true"] span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
  transform: scaleX(0);
}
.burger[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(8, 38, 82, 0.50), rgba(8, 38, 82, 0.32)),
    rgba(255,255,255,0.08);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  z-index: 49;
  padding: 100px 20px 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-100%);
  transition: transform 0.35s var(--ease-out-expo);
  visibility: hidden;
}
.mobile-drawer a{
  display:block;
  width:var(--container);
  margin:0 auto 10px;
  padding:12px;
  border-radius:0;
  background: transparent;
  border:0;
  box-shadow: none;
}
.mobile-drawer.is-open {
  transform: translateY(0);
  visibility: visible;
}
.mobile-accordion{
  width:var(--container);
  margin:0 auto 10px;
  border-radius:0;
  background: transparent;
  border:0;
  box-shadow: none;
  padding:10px 12px;
}
.mobile-accordion summary{ cursor:pointer; font-weight:700; }
.mobile-sub{ padding-top:10px; }
.mobile-sub a{ margin:0 0 8px; }

@media (max-width: 600px) {
.nav-inner { padding: 12px 16px; }
.brand-logo { height: 26px; }
.burger { width: 36px; height: 36px; background: transparent; border: 0; border-radius: 0; }

.mobile-drawer { padding: 100px 20px 30px; }
  .mobile-drawer a {
    padding: 14px 16px;
    font-size: 15px;
    margin-bottom: 8px;
  }
  .mobile-accordion {
    padding: 14px 16px;
    font-size: 15px;
  }
  .mobile-sub a {
    padding: 12px 14px;
    font-size: 14px;
  }
}

@media(max-width:900px){
  .nav-inner{ grid-template-columns: 1fr auto; }
  .nav-links,.nav-icons{ display:none; }
  .burger{ display:block; justify-self:end; }
}