/* =========================================
   LUMISYNC PREMIUM NAVBAR
========================================= */

#nav{
  position:fixed;
  top:0; left:0; width:100%;
  z-index:999999;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:24px 48px;
  overflow:visible;
  transition:background .35s ease, backdrop-filter .35s ease;
}

.nav-logo{ justify-self:start; }
.nav-links{ justify-self:center; }
.nav-cta{ justify-self:end; }
.nav-toggle{ justify-self:end; }

#nav.scrolled{
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(18px);
}

/* =========================================
   LOGO
========================================= */

.nav-logo{ display:flex; align-items:center; text-decoration:none; }

.site-logo-img{
  height:28px; width:auto; display:block;
  object-fit:contain;
  transition:filter .4s ease;
}

#nav:not(.scrolled) .site-logo-img{ filter:brightness(0) invert(1); }
#nav.scrolled .site-logo-img{ filter:none; }

/* =========================================
   NAV LINKS
========================================= */

.nav-links{
  display:flex; align-items:center; gap:42px;
}

.nav-links > a,
.nav-dropdown > a{
  color:white; text-decoration:none;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.78;
  transition:opacity .25s ease;
  height:76px;
  display:flex; align-items:center; gap:6px;
}

.nav-links a:hover,
.nav-dropdown:hover > a{ opacity:1; }

/* =========================================
   DROPDOWN WRAPPER
   position:static so mega menu positions
   relative to #nav (position:fixed, width:100%)
========================================= */

.nav-dropdown{
  position:static;
  display:flex; align-items:center;
  height:76px;
}

/* =========================================
   MEGA MENU
   position:absolute relative to #nav
   left:50% = 50% of viewport (since #nav is width:100%)
   translateX(-50%) = centered on viewport
========================================= */

.nav-mega{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  width:700px;
  height:280px;
  background:rgba(13,13,13,.97);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(28px);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:row;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:999999;
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.nav-mega.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}

/* =========================================
   SIDEBAR
========================================= */

.mega-sidebar{
  width:185px;
  flex-shrink:0;
  background:rgba(255,255,255,.03);
  border-right:1px solid rgba(255,255,255,.06);
  padding:18px 12px;
  display:flex; flex-direction:column; gap:2px;
  box-sizing:border-box;
}

.mega-sidebar-label{
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.25);
  padding:0 10px; margin-bottom:8px;
}

.mega-sidebar-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px;
  text-decoration:none;
  color:rgba(255,255,255,.48);
  font-size:12px; letter-spacing:.04em;
  white-space:nowrap; cursor:pointer;
  transition:background .18s ease, color .18s ease;
  box-sizing:border-box;
}

.mega-sidebar-item i{ font-size:15px; flex-shrink:0; }

.mega-sidebar-item:hover,
.mega-sidebar-item.active{
  background:rgba(212,175,95,.1);
  color:#D4AF5F;
}

/* =========================================
   MAIN PANEL
========================================= */

.mega-main{
  flex:1;
  min-width:0;
  position:relative;
  overflow:hidden;
}

.mega-panel{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  padding:24px 24px 20px;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
  box-sizing:border-box;
}

.mega-panel.active{
  opacity:1; pointer-events:auto;
}

.mega-panel-title{
  font-size:20px; font-weight:400; font-style:italic;
  color:white; letter-spacing:.02em;
  margin:0 0 8px;
  font-family:Georgia, serif;
  white-space:nowrap;
}

.mega-panel-desc{
  font-size:12px; color:rgba(255,255,255,.42);
  line-height:1.65; margin:0 0 14px;
}

.mega-features{
  display:grid; grid-template-columns:1fr 1fr;
  gap:6px 12px; margin-bottom:16px;
}

.mega-feature{
  display:flex; align-items:center; gap:7px;
  font-size:11px; color:rgba(255,255,255,.44);
}

.mega-feature i{ font-size:12px; color:#D4AF5F; flex-shrink:0; }

.mega-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#D4AF5F; text-decoration:none;
  border:1px solid rgba(212,175,95,.28);
  padding:7px 16px; border-radius:999px;
  width:fit-content; margin-top:auto;
  transition:background .2s ease, border-color .2s ease;
}

.mega-link:hover{
  background:rgba(212,175,95,.1);
  border-color:rgba(212,175,95,.5);
}

.mega-link i{ font-size:11px; }

/* =========================================
   CTA BUTTON
========================================= */

.nav-cta{
  padding:14px 24px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  color:white; text-decoration:none;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
}

.nav-cta:hover{ background:white; color:black; border-color:white; }

/* =========================================
   MOBILE NAV - CLEAN STABLE VERSION
========================================= */

.mobile-panel{
  display:none;
}

.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  z-index:1000003;
}

.nav-toggle span{
  width:20px;
  height:1.4px;
  background:#fff;
  display:block;
  border-radius:999px;
  transition:transform .22s ease, opacity .22s ease;
}

body.lumi-nav-lock{
  overflow:hidden;
}

@media (max-width:1180px){
  html, body{
    max-width:100%;
    overflow-x:hidden;
  }

  #nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:center !important;
    padding:24px 26px !important;
    background:transparent;
    z-index:1000000 !important;
    box-sizing:border-box !important;
  }

  #nav.scrolled{
    background:rgba(10,10,10,.72);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .nav-logo{
    justify-self:start !important;
    position:relative !important;
    z-index:1000004 !important;
  }

  .site-logo-img{
    height:24px !important;
  }

  .nav-cta{
    display:none !important;
  }

  /* Hide desktop nav and desktop mega menu completely on mobile */
  #nav .nav-links,
  #nav .nav-dropdown,
  #nav .nav-mega,
  #nav .mega-sidebar,
  #nav .mega-main{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .nav-toggle{
    display:flex !important;
    justify-self:end !important;
    position:relative !important;
    z-index:1000004 !important;
    width:56px !important;
    height:56px !important;
    border:1px solid rgba(255,255,255,.20) !important;
    background:rgba(0,0,0,.12) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  #nav.mobile-open .nav-toggle span:nth-child(1){
    transform:translateY(6.4px) rotate(45deg);
  }

  #nav.mobile-open .nav-toggle span:nth-child(2){
    opacity:0;
  }

  #nav.mobile-open .nav-toggle span:nth-child(3){
    transform:translateY(-6.4px) rotate(-45deg);
  }

  #nav .mobile-panel{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100vh !important;
    background:rgba(9,8,6,.985) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:1000001 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    transition:opacity .18s ease, visibility .18s ease !important;
  }

  #nav.mobile-open .mobile-panel{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .mobile-panel-inner{
    width:100% !important;
    max-width:none !important;
    padding:118px 30px 44px !important;
    box-sizing:border-box !important;
  }

  .mobile-section-title,
  .mobile-menu-main{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    padding:18px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    color:#fff !important;
    text-decoration:none !important;
    font-size:13px !important;
    line-height:1.2 !important;
    letter-spacing:.22em !important;
    text-transform:uppercase !important;
    font-weight:400 !important;
    box-sizing:border-box !important;
  }

  .mobile-section-title::after{
    content:'⌄';
    opacity:.65;
    font-size:14px;
    letter-spacing:0;
  }

  .mobile-menu-link{
    display:flex !important;
    align-items:center !important;
    gap:16px !important;
    width:100% !important;
    padding:15px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    color:rgba(255,255,255,.68) !important;
    text-decoration:none !important;
    font-size:16px !important;
    letter-spacing:.08em !important;
    line-height:1.2 !important;
    transform:none !important;
    box-sizing:border-box !important;
  }

  .mobile-menu-link i{
    width:20px !important;
    font-size:18px !important;
    color:rgba(255,255,255,.58) !important;
    flex-shrink:0 !important;
  }

  .mobile-menu-link.active,
  .mobile-menu-link.active i{
    color:#D4AF5F !important;
  }

  .mobile-menu-main{
    margin-top:24px !important;
  }

  .mobile-menu-main + .mobile-menu-main{
    margin-top:0 !important;
  }
}

@media (max-width:480px){
  #nav{
    padding:22px 24px !important;
  }

  .nav-toggle{
    width:52px !important;
    height:52px !important;
  }

  .mobile-panel-inner{
    padding:108px 26px 38px !important;
  }

  .mobile-menu-link{
    font-size:15px !important;
  }
}

/* =========================================
   HARD FIX: keep mobile panel from appearing as raw links
   Desktop must never show the mobile-only menu.
========================================= */
#nav > .mobile-panel{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

@media (min-width:1181px){
  #nav > .mobile-panel,
  #nav .mobile-panel,
  .mobile-panel{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    position:absolute !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
  }

  #nav .nav-toggle{
    display:none !important;
  }
}

@media (max-width:1180px){
  #nav > .mobile-panel{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100vh !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  #nav.mobile-open > .mobile-panel{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}