.navwrap{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 0}.brand{display:flex;align-items:center;gap:12px;color:var(--deep);font-weight:900;letter-spacing:-.04em;line-height:1}.brand span{display:block;font-size:clamp(1.7rem,2vw,2.4rem);line-height:.95;white-space:nowrap}.brand img{width:54px;height:54px;object-fit:contain;flex-shrink:0}.brand small{display:block;font-size:8px;letter-spacing:.12em;color:#71858b}.navwrap nav{display:flex;align-items:center;justify-content:flex-end;gap:22px;font-size:13px;font-weight:800;color:#405b62;flex-wrap:wrap}.navwrap nav>a{white-space:nowrap}.navwrap nav>a:not(.navbtn){position:relative}.navwrap nav>a:not(.navbtn):after{content:'';position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--teal);transition:.3s}.navwrap nav>a:not(.navbtn):hover:after{width:100%}.navbtn{background:var(--teal);color:#fff!important;padding:11px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(8,167,190,.18)}.menu{display:none;border:0;background:none;font-size:26px;color:var(--deep)}
.topbar{background:linear-gradient(90deg,#005d78,#007f98,#09aabd)}.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0}.topbar span,.topbar a{font-size:12px;font-weight:800;letter-spacing:.04em}.topbar a{color:#fff;text-decoration:none}.brand{color:#00748e}.brand img{filter:drop-shadow(0 7px 12px rgba(0,125,150,.12))}.navbtn{background:var(--brand-gradient)!important;box-shadow:0 10px 25px rgba(0,116,142,.2)}

#header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(213,238,241,.75);transition:box-shadow .35s ease,background .35s ease,transform .35s ease}#header.scrolled{box-shadow:0 12px 35px rgba(0,91,112,.12);background:rgba(255,255,255,.98)}
.brand{animation:brandEntrance .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:left center}
.brand img{animation:logoEntrance 1.25s cubic-bezier(.16,1,.3,1) both;transform-origin:center;will-change:transform,filter}
@keyframes logoEntrance{0%{opacity:0;transform:translateY(-16px) scale(.72) rotate(-8deg);filter:blur(5px) drop-shadow(0 0 0 rgba(8,167,190,0))}55%{opacity:1;transform:translateY(3px) scale(1.08) rotate(2deg);filter:blur(0) drop-shadow(0 10px 18px rgba(8,167,190,.22))}100%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:drop-shadow(0 7px 12px rgba(0,125,150,.12))}}
@keyframes brandEntrance{0%{opacity:0;transform:translateX(-18px)}100%{opacity:1;transform:translateX(0)}}
.brand:hover img{transform:translateY(-2px) rotate(-2deg) scale(1.04);transition:transform .35s ease}
@media(max-width:900px){.navwrap{padding:12px 0}.navwrap nav{gap:12px 16px;font-size:12px}.brand span{font-size:clamp(1.35rem,3vw,2rem)}}
@media(max-width:700px){.navwrap{position:relative}.menu{display:block}.navwrap nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:16px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 22px 44px rgba(0,88,109,.12);flex-direction:column;align-items:flex-start}.open .navwrap nav{display:flex}.brand span{white-space:normal;line-height:.98}.brand img{width:46px;height:46px}.topbar .container{justify-content:center;text-align:center}.topbar span{display:none}}
@media(max-width:650px){#header{backdrop-filter:blur(14px)}.brand{animation-duration:.7s}.navwrap nav a{width:100%}.navbtn{width:100%}} 
@media(prefers-reduced-motion:reduce){.brand,.brand img{animation:none!important}}