.nav-burger{ display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--border); background:rgba(168,85,247,.08); align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:border-color .2s, background .2s; z-index:120; } .nav-burger:hover{border-color:var(--neon);background:rgba(168,85,247,.15)} .nav-burger-bars{ position:relative; width:18px; height:14px; } .nav-burger-bars span{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:var(--white); transition:transform .3s ease, opacity .3s ease, top .3s ease; } .nav-burger-bars span:nth-child(1){ top:0; } .nav-burger-bars span:nth-child(2){ top:6px; } .nav-burger-bars span:nth-child(3){ top:12px; } .nav-burger.open .nav-burger-bars span:nth-child(1){ top:6px; transform:rotate(45deg); } .nav-burger.open .nav-burger-bars span:nth-child(2){ opacity:0; } .nav-burger.open .nav-burger-bars span:nth-child(3){ top:6px; transform:rotate(-45deg); } .nav-mobile-overlay{ position:fixed; inset:0; background:rgba(8,4,15,.7); backdrop-filter:blur(4px); z-index:110; opacity:0; pointer-events:none; transition:opacity .3s ease; } .nav-mobile-overlay.open{ opacity:1; pointer-events:all; } .nav-mobile-panel{ position:fixed; top:0; right:0; bottom:0; width:min(78vw, 340px); background:linear-gradient(160deg,#1A0A2E 0%,#120720 100%); border-left:1px solid var(--border); box-shadow:-20px 0 60px rgba(0,0,0,.45); z-index:115; transform:translateX(100%); transition:transform .35s cubic-bezier(.65,0,.35,1); display:flex; flex-direction:column; padding:1.6rem 1.4rem 2rem; overflow-y:auto; } .nav-mobile-panel.open{ transform:translateX(0); } .nav-mobile-close{ align-self:flex-end; width:36px; height:36px; border-radius:50%; background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.25); color:var(--white); font-size:1.1rem; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-bottom:1.8rem; transition:background .2s, border-color .2s; } .nav-mobile-close:hover{ background:var(--violet); border-color:var(--violet); } .nav-mobile-links{ list-style:none; display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.6rem; } .nav-mobile-links a{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--white); font-family:'Syne', sans-serif; font-weight:700; font-size:1.05rem; padding:.85rem .9rem; border-radius:10px; transition:background .2s, color .2s, transform .2s; } .nav-mobile-links a:hover, .nav-mobile-links a:active{ background:rgba(168,85,247,.12); color:var(--neon2); transform:translateX(4px); } .nav-mobile-cta{ margin-top:auto; background:linear-gradient(135deg,var(--violet),var(--neon)); color:#fff; text-align:center; padding:.9rem 1rem; border-radius:10px; text-decoration:none; font-family:'Syne', sans-serif; font-weight:700; font-size:.95rem; box-shadow:0 4px 24px rgba(168,85,247,.35); } body.nav-mobile-lock{ overflow:hidden; } @media(max-width: 768px){ .nav-links{ display:none; } .nav-burger{ display:flex; } .nav-cta{ display:none; } } @media(min-width: 769px){ .nav-mobile-panel, .nav-mobile-overlay, .nav-burger{ display:none !important; } }