/* ============================================================
   Shared TopBar (nav) — identical across all pages.
   Self-contained; uses hardcoded VI palette so it works even if
   the host page's :root vars differ.
   ============================================================ */

nav{
  position:sticky;top:14px;z-index:100;
  margin:14px 18px 0;
  border-radius:999px;
  padding:9px 13px 9px 14px;
  background:rgba(20,32,28,.62);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:
    0 8px 24px rgba(15,24,22,.22),
    0 1px 2px rgba(15,24,22,.10),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
nav .nav-inner{
  max-width:none !important;margin:0;padding-inline:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

/* Logo wordmark */
nav .logo{
  font-family:'Space Grotesk','Noto Sans SC',sans-serif;
  font-size:1.05rem;font-weight:600;
  display:flex;align-items:center;gap:9px;letter-spacing:-.3px;
  color:#EFECDC !important;text-decoration:none;
}
nav .nav-logo-badge{
  position:relative;overflow:hidden;display:inline-block;
  width:42px;height:42px;
  background:#FAF6EC;
  border-radius:50%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 4px 10px rgba(0,0,0,.25),
    inset 0 -1px 0 rgba(20,32,28,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  flex-shrink:0;
}
nav .logo:hover .nav-logo-badge{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 8px 18px rgba(45,139,146,.25),
    inset 0 -1px 0 rgba(20,32,28,.08);
}
nav .nav-logo-badge img{
  position:absolute;left:50%;top:50%;
  width:88%;height:auto;
  transform:translate(-50%,-50%);
  display:block;
}

/* Nav links */
nav .nav-links{
  display:flex;align-items:center;gap:40px;list-style:none;
  margin:0;padding:0;
}
nav .nav-links a{
  font-family:'Noto Sans SC','Space Grotesk',sans-serif;
  font-size:.85rem;font-weight:400;
  color:rgba(255,255,255,0.72) !important;
  text-decoration:none;transition:color .2s;
}
nav .nav-links a:hover{color:#fff !important}
nav .nav-links a.current{color:#80D2AA !important;font-weight:500}

/* Product dropdown */
nav .nav-dropdown{position:relative}
nav .nav-dropdown::after{
  content:'';position:absolute;top:100%;left:-8px;right:-8px;
  height:16px;background:transparent;
}
nav .nav-dd-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:260px;
  background:rgba(15,23,41,0.95);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s, transform .2s, visibility .2s;
}
nav .nav-dropdown:hover .nav-dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
nav .dd-item{
  display:block;padding:10px 14px;border-radius:8px;
  text-decoration:none;transition:background .15s;
}
nav .dd-item:hover{background:rgba(255,255,255,0.04)}
nav .dd-item strong{
  display:block;font-size:.82rem;font-weight:600;
  color:rgba(255,255,255,0.9) !important;margin-bottom:2px;
}
nav .dd-item span{
  display:block;font-size:.7rem;
  color:rgba(255,255,255,0.55) !important;line-height:1.4;
}
nav .dd-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  margin-top:4px;padding-top:4px;
}
nav .dd-footer a{
  display:block;padding:8px 14px;font-size:.75rem;
  color:#80D2AA !important;
}

/* Language toggle */
nav .lang-toggle{
  display:inline-flex;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:100px;overflow:hidden;
  background:rgba(255,255,255,0.02);
  cursor:pointer;padding:0;
}
nav .lang-toggle span{
  padding:4px 10px;font-size:.72rem;font-weight:600;
  color:rgba(255,255,255,0.55) !important;transition:all .2s;
}
nav .lang-toggle span.active{
  color:#80D2AA !important;
  background:rgba(45,139,146,0.22);
}

/* Waitlist button inside nav */
nav .btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:100px;
  font-family:'Space Grotesk','Noto Sans SC',sans-serif;
  font-weight:500;cursor:pointer;
  border:1px solid transparent;
  transition:all .25s cubic-bezier(.25,1,.5,1);
}
nav .btn-nav{padding:7px 18px;font-size:.82rem}
nav .btn-fill{
  background:#2D8B92;border-color:#2D8B92;color:#fff;font-weight:600;
}
nav .btn-fill:hover{background:#1A5B84;border-color:#1A5B84;transform:translateY(-1px)}