/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  background:var(--bg-nav);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 32px;gap:0;
  transition:background .3s;
}
.nav-logo{
  display:flex;align-items:center;gap:12px;
  margin-right:40px;flex-shrink:0;
  cursor:pointer;
}
.logo-icon{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 20px rgba(79,142,247,0.4);
}
.logo-icon svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;}
.logo-name{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:18px;color:var(--text-primary);
}
.logo-name span{color:var(--blue);}
.logo-tag{font-size:10px;color:var(--text-secondary);line-height:1;}

.nav-links{
  display:flex;align-items:center;gap:2px;flex:1;
}
.nav-links a{
  padding:7px 13px;border-radius:8px;
  font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:500;
  color:var(--text-secondary);
  transition:color .2s,background .2s;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
  position: relative;
}
.nav-links a:hover{color:var(--text-primary);background:var(--bg-card2);}
.nav-links a.active{color:var(--blue);border-bottom:2px solid var(--blue);border-radius:0;padding-bottom:5px;}
.nav-links a svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;}

.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;}
.nav-icon-btn{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:8px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-secondary);
  transition:all .2s;
}
.nav-icon-btn:hover{color:var(--text-primary);border-color:var(--border2);}
.nav-icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;}
.btn-login{
  background:var(--blue);color:#fff;border:none;
  border-radius:8px;padding:9px 22px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;
  cursor:pointer;transition:filter .2s,transform .15s;
  box-shadow:0 4px 16px rgba(79,142,247,0.35);
}
.btn-login:hover{filter:brightness(1.12);transform:translateY(-1px);}
.hamburger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;padding:5px;
}
.hamburger span{
  display:block;width:24px;height:2px;
  background:var(--text-secondary);border-radius:2px;
  transition:all .3s;
}

/* Mobile nav drawer */
.mobile-menu{
  display:none;position:fixed;
  top:var(--nav-h);left:0;right:0;bottom:0;
  background:var(--bg-primary);z-index:199;
  padding:24px;overflow-y:auto;
  transform:translateX(-100%);transition:transform .3s;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{
  display:block;padding:14px 16px;border-radius:10px;
  font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:500;
  color:var(--text-secondary);border-bottom:1px solid var(--border);
  transition:color .2s,background .2s;
}
.mobile-menu a:hover{color:var(--text-primary);background:var(--bg-card2);}
/* dropdown css */
  .dropdown-menu {
    position: absolute;
    top: 45px;
    background: #434343;
    visibility: hidden;
    opacity: 0;
  }
  .dropdown-menu > li {
    border-bottom: 1px solid #8a8a8a;
  }
  .dropdown-menu > li > a {
    border-radius: unset;
  }
  .dropdown:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
  }
  /* to style the mobile menu dropdown */
  #mobileMenu ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }

  #mobileMenu ul li {
      border-bottom: 1px solid #e8e8e8;
  }

  #mobileMenu ul li a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 18px;
      text-decoration: none;
      font-size: 16px;
      transition: .3s;
  }

  #mobileMenu ul li a:hover {
      background:  var(--bg-secondary);
      color: var( --text-primary);
  }

  /* Arrow */
  .dropdown-mobile > a i {
      transition: transform .3s ease;
      font-size: 14px;
  }

  /* Rotate Arrow */
  .dropdown-mobile.active > a i {
      transform: rotate(90deg);
  }

  /* Dropdown */
  .dropdown-menu-mobile {
      max-height: 0;
      overflow: hidden;
      background: var(--bg-secondary);
      transition: max-height .35s ease;
  }

  /* Open Dropdown */
  .dropdown-mobile.active .dropdown-menu-mobile {
      max-height: 500px;
  }

  /* Submenu Links */
  .dropdown-menu-mobile li a {
      padding: 12px 20px 12px 35px;
      font-size: 15px;
      color: var(--text-secondary);
  }

  .dropdown-menu-mobile li a:hover {
      background: var(--bg-card2);
      color: var(--text-primary);
  }
  .nav > .nav-links > ul {
    display: flex;
  }
  .dropdown-menu > li {
    width: 200px;
  }