.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5vw;
z-index: 1000;

background: rgba(8, 9, 11, .72);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);

border-bottom: 1px solid rgba(255,255,255,.08);

transition:
    background .45s ease,
    backdrop-filter .45s ease,
    -webkit-backdrop-filter .45s ease,
    border-color .45s ease;
}
.nav.nav-faded {
    background: rgba(8, 9, 11, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    border-bottom-color: rgba(255,255,255,0);
}
.brand {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.04em;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand-logo {
    height: 42px;
    width: auto;
    display: block;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 26px;
}
.nav-login {
    font-size: 14px;
    font-weight: 600;
}
.nav-button {
    background: var(--accent);
    color: #08090b;
    border: none;
    border-radius: 999px;
    padding: 11px 19px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease;
}
.nav-button:hover {
    transform: scale(1.04);
    background: #242424;
}
.nav{transition:transform .35s ease, opacity .35s ease;z-index:1000}
.nav.nav-hidden{transform:translateY(-110%);opacity:0;pointer-events:none}
.nav-menus{display:flex;gap:6px;align-items:center;margin:0 auto}
.nav-dd{position:relative}
.nav-dd-btn{background:none;border:0;color:inherit;font:inherit;font-size:.95rem;opacity:.85;padding:8px 12px;border-radius:8px;cursor:pointer;transition:opacity .2s,background .2s,color .2s}
.nav-dd-btn:hover,.nav-dd.open .nav-dd-btn{opacity:1;color:#38bdf8;background:rgba(56,189,248,.08)}
.nav-caret{font-size:.7em;display:inline-block;transition:transform .25s}
.nav-dd.open .nav-caret{transform:rotate(180deg)}
.nav-dd-panel{position:absolute;top:calc(100% + 8px);left:50%;min-width:210px;display:flex;flex-direction:column;padding:8px;
  background:rgba(11,13,16,.96);border:1px solid rgba(56,189,248,.25);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 24px rgba(56,189,248,.12);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav-dd.open .nav-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-dd-panel a{color:inherit;text-decoration:none;padding:9px 12px;border-radius:8px;font-size:.92rem;opacity:.85;transition:background .15s,color .15s,opacity .15s}
.nav-dd-panel a:hover{background:rgba(56,189,248,.1);color:#38bdf8;opacity:1}
.nav-dd-panel a.nav-dd-minor{font-size:.8rem;opacity:.55;border-top:1px solid rgba(255,255,255,.08);margin-top:4px;border-radius:0 0 8px 8px}
.nav-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px;margin-right:6px}
.nav-burger span{display:block;width:22px;height:2px;background:#e5e7eb;border-radius:2px;transition:transform .25s,opacity .25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;left:0;right:0;top:64px;max-height:calc(100vh - 64px);overflow-y:auto;z-index:999;
  background:rgba(11,13,16,.98);border-bottom:1px solid rgba(56,189,248,.25);padding:10px 22px 24px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
.mobile-menu.open{opacity:1;visibility:visible;transform:none}
.mobile-menu h4{margin:16px 0 6px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#38bdf8}
.mobile-menu a{display:block;padding:11px 0;color:#e5e7eb;text-decoration:none;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu a.minor{font-size:.85rem;opacity:.6}
.mobile-menu .mm-login{margin-top:14px;color:#38bdf8;border:0}
.mobile-menu{background:#0b0d10 !important;padding-bottom:calc(40px + env(safe-area-inset-bottom)) !important}
.mobile-menu .mm-login{display:block;text-align:center;margin:14px 0 6px !important;padding:12px 0 !important;
  border:1px solid #38bdf8 !important;border-radius:10px;font-weight:600}
.mobile-menu h4.mm-toggle{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.mobile-menu h4.mm-toggle::after{content:"\25BE";font-size:1rem;transition:transform .2s}
.mobile-menu h4.mm-toggle.open::after{transform:rotate(180deg)}
.mobile-menu .mm-group{display:none}
.mobile-menu .mm-group.open{display:block}
@media (max-width:820px){.nav-menus{display:none}.nav-burger{display:flex}}
@media (prefers-reduced-motion:reduce){.nav,.nav-dd-panel,.nav-caret{transition:none}}

/* ===== Brand + menu font ===== */
.nav, .mobile-menu{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.nav .brand{color:#fff;text-decoration:none;font-size:18px;letter-spacing:-.04em}
.nav .brand .bl-lock{color:#ffffff;font-weight:700}
.nav .brand .bl-look{color:#9ca3af;font-weight:400}
.nav a, .nav a:visited, .nav a:hover, .mobile-menu a, .mobile-menu a:visited{text-decoration:none}
.nav .nav-dd-panel a, .nav .nav-dd-panel a:visited{color:#e5e7eb}
.nav .nav-dd-panel a:hover{color:#38bdf8}
.nav .nav-login, .nav .nav-login:visited{color:#e5e7eb}
.mobile-menu a:visited{color:#e5e7eb}

.nav .brand .bl-look{margin-left:-10px}

.nav *, .nav a:link, .nav a:visited, .nav a:hover, .nav a:active{text-decoration:none !important}
.nav .nav-button, .nav .nav-button:visited{color:#fff !important}

/* ===== Force nav styles over page CSS ===== */
nav.nav a, nav.nav a:link, nav.nav a:visited, nav.nav a:hover, nav.nav span{text-decoration:none !important;border-bottom:0 !important}
nav.nav .brand{color:#fff !important;font-size:18px !important;letter-spacing:-.04em !important;display:flex !important;align-items:center !important;gap:10px !important}
nav.nav .brand .bl-lock{color:#fff !important;font-weight:700 !important}
nav.nav .brand .bl-look{color:#9ca3af !important;font-weight:400 !important;margin-left:-10px !important}
nav.nav .brand-logo{height:42px !important;width:auto !important}
nav.nav .nav-login, nav.nav .nav-login:visited{color:#e5e7eb !important}
nav.nav .nav-login:hover{color:#38bdf8 !important}
nav.nav .nav-button, nav.nav .nav-button:visited{color:#0b0d10 !important}
.page-brand, [class*="card-brand"]{display:none !important}