/* =====================================================================
   Navigation
   File: 01-nav.css
   ===================================================================== */

/* ================= NAV ================= */
#nav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:1000; width:min(1180px,92%);
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px 10px 22px;
  border-radius:16px; border:1px solid var(--line); background:rgba(6,6,7,.35); backdrop-filter:blur(4px);
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease, padding .3s ease;
}
#nav.scrolled{background:rgba(6,6,7,.78); backdrop-filter:blur(18px); border-color:var(--line-strong); box-shadow:0 12px 40px -14px rgba(0,0,0,.6);}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; letter-spacing:.02em; font-family:var(--font-heading);}
.logo-mark{width:32px; height:32px; border-radius:9px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-style:italic; font-size:17px; color:#fff; flex-shrink:0;}
.logo-img{height:34px; width:auto; max-width:180px; object-fit:contain; display:block;}
.nav-links{display:flex; gap:4px; align-items:center;}
.nav-links a{font-size:13.5px; color:var(--muted); padding:9px 15px; border-radius:8px; transition:all .3s ease; font-weight:500;}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.06);}
.nav-cta{display:flex; align-items:center; gap:10px;}
.hamburger{display:none; flex-direction:column; gap:5px; padding:8px; background:none; border:none;}
.hamburger span{width:20px; height:1.5px; background:var(--text);}
@media(max-width:980px){
  .nav-links{display:none;}
  #nav{padding:10px 10px 10px 18px;}
  .nav-cta .btn-primary{display:none;}
  .hamburger{display:flex;}
}
.mobile-menu{position:fixed; inset:0; background:rgba(5,5,6,.98); backdrop-filter:blur(20px); z-index:1100; display:none; flex-direction:column; padding:100px 32px 40px; gap:6px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-size:26px; font-weight:300; padding:16px 0; border-bottom:1px solid var(--line); color:var(--text);}
.mobile-close{position:absolute; top:28px; right:28px; background:none; border:1px solid var(--line-strong); border-radius:50%; width:42px; height:42px; color:var(--text); font-size:20px;}