/* ── NAV ── loaded in so it applies before JS runs ── */ nav.site-nav { position:fixed; top:0; left:0; right:0; z-index:1000; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 48px; background:rgba(33,53,64,.10); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .35s, box-shadow .35s; } nav.site-nav.scrolled { background:#213540; box-shadow:0 3px 24px rgba(0,0,0,.4); } .nav-logo-link { display:flex; align-items:center; } .nav-logo-img { height:48px; width:auto; max-width:200px; display:block; } .nav-menu { display:flex; align-items:center; list-style:none; } .nav-menu > li { position:relative; } .nav-menu > li > a { color:rgba(255,255,255,.95); text-decoration:none; font-size:16px; font-weight:600; padding:10px 15px; border-radius:5px; display:flex; align-items:center; gap:5px; transition:color .2s, background .2s; white-space:nowrap; } .nav-menu > li > a:hover { background:rgba(255,255,255,.10); } .arrow { font-size:8px; opacity:.55; transition:transform .2s; } .nav-menu > li:hover > a .arrow { transform:rotate(180deg); } .dropdown { position:absolute; top:calc(100% + 10px); left:0; min-width:280px; background:#1a2d38; border:1px solid rgba(255,255,255,.07); border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,.45); opacity:0; visibility:hidden; transform:translateY(-10px); transition:all .22s cubic-bezier(.4,0,.2,1); padding:10px 0; z-index:600; max-height:calc(100vh - 90px); overflow-y:auto; } .nav-menu > li:hover .dropdown { opacity:1; visibility:visible; transform:translateY(0); } .dropdown-item { display:flex; align-items:center; gap:12px; padding:9px 16px; color:rgba(255,255,255,.82); text-decoration:none; font-size:14px; font-weight:500; transition:all .15s; } .dropdown-item:hover { color:#fff; background:rgba(0,106,152,.22); padding-left:20px; } .dropdown-icon { width:32px; height:32px; border-radius:7px; background:rgba(0,106,152,.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; } .dropdown-item:hover .dropdown-icon { background:rgba(0,106,152,.5); } .dropdown-icon svg { width:16px; height:16px; fill:#4DB8E8; } .dropdown-label { font-size:14px; font-weight:600; line-height:1.2; } .dropdown-desc { font-size:11px; color:rgba(255,255,255,.4); margin-top:1px; } .nav-right { display:flex; align-items:center; gap:10px; } .nav-cta { background:#006A98; border:2px solid #006A98; color:#fff; padding:9px 20px; border-radius:5px; font-size:15px; font-weight:700; text-decoration:none; transition:all .2s; white-space:nowrap; } .nav-cta:hover { background:#004d7a; border-color:#004d7a; transform:translateY(-2px); } .nav-lang { display:flex; align-items:center; border:1.5px solid rgba(255,255,255,.25); border-radius:5px; overflow:hidden; } .lang-btn { padding:7px 11px; color:rgba(255,255,255,.55); cursor:pointer; background:transparent; border:none; font-family:inherit; font-size:13px; font-weight:700; transition:all .2s; } .lang-btn:hover, .lang-btn.lang-active { background:rgba(255,255,255,.15); color:#fff; } .lang-sep { width:1px; height:16px; background:rgba(255,255,255,.2); } .hamburger { display:none; flex-direction:column; gap:5px; padding:8px; border:none; background:none; cursor:pointer; } .hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .3s, opacity .3s; } .hamburger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity:0; } .hamburger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } .mobile-nav { display:none; position:fixed; top:76px; left:0; right:0; bottom:0; background:#213540; padding:24px 20px; overflow-y:auto; overflow-x:hidden; z-index:490; transform:translateX(100%); transition:transform .3s ease; visibility:hidden; } .mobile-nav.open { transform:translateX(0); visibility:visible; } .mobile-nav-section { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.35); margin:16px 0 6px; } .mobile-nav-list { margin-bottom:20px; } .mobile-nav-list li { border-bottom:1px solid rgba(255,255,255,.07); } .mobile-nav-list li:last-child { border-bottom:none; } .mobile-nav-list a { display:block; padding:12px 0; color:rgba(255,255,255,.8); font-size:15px; font-weight:500; } @media(max-width:1199px) { nav.site-nav { padding:0 20px; } .nav-menu, .nav-cta, .nav-lang { display:none; } .hamburger { display:flex; } .mobile-nav { display:block; } }