/* ============================
   Mobile drawer navigation
============================ */

.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(140%) blur(10px);
  border-radius:12px;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
}

.nav-toggle__bar{
  width:18px;
  height:2px;
  border-radius:2px;
  background:rgba(15,23,42,.70);
  display:block;
  transition:transform .20s ease, opacity .20s ease;
}

body.nav-open .nav-toggle__bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle__bar:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle__bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.35);
  backdrop-filter:blur(4px);
  z-index:60;
  opacity:0;
  transition:opacity .34s ease;
  pointer-events:none;
}

body.nav-open .nav-overlay{
  opacity:1;
  pointer-events:auto;
}

.nav-overlay[hidden],
.mobile-drawer[hidden]{
  display:none !important;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(86vw, 360px);
  height:100vh;
  height:100dvh;
  background:rgba(246,247,251,.98);
  border-left:1px solid rgba(15,23,42,.10);
  z-index:70;
  display:flex;
  flex-direction:column;
  transform:translateX(102%);
  transition:transform .58s cubic-bezier(.22,.8,.22,1);
  will-change:transform;
}

body.nav-open .mobile-drawer{
  transform:translateX(0);
}

.mobile-drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.mobile-drawer__title{
  font-weight:900;
  letter-spacing:-.02em;
  color:#0f172a;
}

.mobile-drawer__close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
}

.mobile-drawer__nav{
  padding:14px 16px;
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  min-height:0;
}

.mobile-drawer__nav ul,
.mobile-drawer__nav li,
.mobile-nav-list,
.mobile-nav-list li{
  list-style:none !important;
  margin:0;
  padding:0;
}

.mobile-nav-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-nav-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  color:#0f172a;
  background:rgba(255,255,255,.80);
  border:1px solid rgba(15,23,42,.08);
}

.mobile-nav-list a:hover{
  background:#fff;
}

.mobile-drawer__cta{
  position:sticky;
  bottom:0;
  margin-top:auto;
  background:rgba(246,247,251,.98);
  border-top:1px solid rgba(15,23,42,.08);
  padding:14px 16px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}

.mobile-drawer__cta .btn{
  width:100%;
  justify-content:center;
  border-radius:14px;
  padding:14px 16px;
}

body.nav-open{
  overflow:hidden;
}

@media (max-width: 980px){
  .nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
}