/* ZCM Navbar base (clean, modern, responsive) */
.zcm-navbar{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
}
.zcm-navbar__inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.zcm-navbar__left,
.zcm-navbar__center,
.zcm-navbar__right{
  display:flex;
  align-items:center;
  gap:12px;
}
.zcm-navbar__center{ flex:1; justify-content:center; }
.zcm-navbar__logo img{ height:auto; width:auto; display:block; }
.zcm-navbar__menu .zcm-navbar__list{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
.zcm-navbar__menu .zcm-navbar__list a{ text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.zcm-navbar__menu .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  padding:10px;
  margin:0;
  list-style:none;
  z-index:50;
}
.zcm-navbar__menu li{ position:relative; }
.zcm-navbar__menu li:hover > .sub-menu{ display:block; }
.zcm-navbar__menu .sub-menu a{ display:flex; padding:10px 12px; border-radius:10px; }


/* Single menu panel (no duplicate menu render) */
.zcm-navbar__menupanel{ width:100%; }
.zcm-navbar__menupanel.is-desktop{ display:block; }
@media (max-width: 1024px){
  .zcm-navbar__menupanel{ display:none; width:100%; }
  .zcm-navbar__menupanel.is-open{ display:block; }
  .zcm-navbar__menu .zcm-navbar__list{ flex-direction:column; align-items:stretch; gap:8px; padding:10px 0; }
  .zcm-navbar__menu .sub-menu{ position:static; display:block; padding-left:14px; border:none; box-shadow:none; }
}


/* Controls */
.zcm-navbar__iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  cursor:pointer;
  line-height:1;
  border-radius:999px;
  padding:10px 12px;
}
.zcm-navbar__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:999px;
  padding:10px 14px;
  line-height:1;
}
.zcm-navbar__btn img{ width:18px; height:18px; object-fit:contain; display:block; }

/* Mobile */
.zcm-navbar__mobilelogo{ display:none; }
/* Sidebar drawer */
.zcm-navbar__overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:99990;
}
.zcm-navbar__overlay.is-open{ opacity:1; pointer-events:auto; }

.zcm-navbar__sidebar{
  position:fixed;
  top:0;
  right:-420px;
  height:100vh;
  width:min(420px, 92vw);
  background:#070A12;
  color:#EAF0FF;
  border-left:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  transition:right .25s ease;
  z-index:99999;
  padding:18px;
  overflow:auto;
}
.zcm-navbar__sidebar.is-open{ right:0; }
.zcm-navbar__sidebar-close{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}
.zcm-navbar__sidebar-close button{ border-radius:999px; padding:10px 12px; }

.zcm-sidebar__logo img{ max-width:100%; height:auto; display:block; margin-bottom:12px; }
.zcm-sidebar__content{ opacity:.9; margin:10px 0 14px; }
.zcm-sidebar__title{ font-weight:700; margin:14px 0 8px; }
.zcm-sidebar__items{ display:flex; flex-direction:column; gap:10px; }
.zcm-sidebar__item{ display:flex; gap:10px; align-items:flex-start; }
.zcm-sidebar__item img{ width:22px; height:22px; object-fit:contain; margin-top:2px; }
.zcm-sidebar__social{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.zcm-sidebar__social a{ display:inline-flex; }
.zcm-sidebar__social img{ width:22px; height:22px; object-fit:contain; }

/* Floating classes applied by widget */
.zcm-navbar.zcm-navbar--floating{ z-index:9999; }
.zcm-navbar.zcm-navbar--floating-sticky{ position:sticky; }
.zcm-navbar.zcm-navbar--floating-fixed{ position:fixed; left:0; right:0; }


/* === ZCM STYLE PRESETS === */
/* Variables default */
.zcm-navbar{
  --zcm-bg: rgba(7,10,18,.78);
  --zcm-border: rgba(255,255,255,.14);
  --zcm-text: #EAF0FF;
  --zcm-muted: rgba(234,240,255,.80);
  --zcm-pill-radius: 999px;
  --zcm-card-radius: 22px;
  --zcm-blur: 14px;
}

/* Common baseline polish */
.zcm-navbar{
  color: var(--zcm-text);
  border-color: var(--zcm-border);
  backdrop-filter: blur(var(--zcm-blur));
  -webkit-backdrop-filter: blur(var(--zcm-blur));
}
.zcm-navbar a{ color: var(--zcm-text); }
.zcm-navbar__menu .sub-menu{
  background: rgba(7,10,18,.92);
  border: 1px solid var(--zcm-border);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* STYLE 1: clean glass bar (current default) */
.zcm-navbar--style-1{
  background: rgba(7,10,18,.62);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 12px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

/* STYLE 2: premium pill + right CTA capsule (matches your top screenshot) */
.zcm-navbar--style-2{
  background: rgba(7,10,18,.68);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 22px 52px rgba(0,0,0,.35);
}
.zcm-navbar--style-2 .zcm-navbar__menu .zcm-navbar__list > li > a{
  padding: 10px 14px;
  border-radius: 999px;
  opacity: .92;
}
.zcm-navbar--style-2 .zcm-navbar__menu .zcm-navbar__list > li > a:hover{
  background: rgba(255,255,255,.08);
  opacity: 1;
}
.zcm-navbar--style-2 .zcm-navbar__btn{
  background: linear-gradient(135deg, rgba(205,0,156,.92), rgba(167,139,250,.92));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
}
.zcm-navbar--style-2 .zcm-navbar__btn:hover{
  filter: brightness(1.05);
}
.zcm-navbar--style-2 .zcm-navbar__iconbtn{
  background: rgba(255,255,255,.06);
}

/* STYLE 3: hero-overlay glass (matches your green-circled screenshot) */
.zcm-navbar--style-3{
  background: rgba(10, 14, 30, .44);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  padding: 14px 22px;
  box-shadow: 0 26px 70px rgba(0,0,0,.38);
}
.zcm-navbar--style-3 .zcm-navbar__menu .zcm-navbar__list > li > a{
  padding: 12px 16px;
  border-radius: 14px;
  opacity: .94;
}
.zcm-navbar--style-3 .zcm-navbar__menu .zcm-navbar__list > li > a:hover{
  background: rgba(255,255,255,.09);
  opacity: 1;
}
.zcm-navbar--style-3 .zcm-navbar__btn{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}
.zcm-navbar--style-3 .zcm-navbar__btn:hover{
  background: rgba(255,255,255,.14);
}
.zcm-navbar--style-3 .zcm-navbar__iconbtn{
  background: rgba(255,255,255,.06);
}

/* Floating: add spacing from page edges if fixed */
.zcm-navbar--floating-fixed{
  margin-left: auto;
  margin-right: auto;
}

/* Style 2 refinements: true capsule proportions */
.zcm-navbar--style-2 .zcm-navbar__inner{ gap:18px; }
.zcm-navbar--style-2 .zcm-navbar__center{ justify-content:center; }
.zcm-navbar--style-2 .zcm-navbar__menu .zcm-navbar__list{ gap:10px; }
.zcm-navbar--style-2 .zcm-navbar__menu .zcm-navbar__list > li > a{ font-weight:600; }

/* Mobile toggle visibility */
.zcm-navbar__mobiletoggle{ display:none; }
@media (max-width: 1024px){
  .zcm-navbar__mobiletoggle{ display:inline-flex; }
}