.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.header--scrolled{box-shadow:0 2px 10px #0000001a}.header__container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between}.header__logo{display:flex;align-items:center;transition:transform .2s ease}.header__logo:hover{transform:scale(1.05)}.header__nav-list{display:flex;gap:2rem;list-style:none;margin:0;padding:0;justify-content:center;width:fit-content}.header__nav-link{background:none;border:none;font-size:1rem;color:#4a5568;cursor:pointer;padding:.5rem 1rem;border-radius:.5rem;transition:all .2s ease;position:relative}.header__nav-link:hover{color:#2d3748;background:#0000000d}.header__nav-link--active{color:#4299e1;font-weight:600}.header__nav-link--active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#4299e1;border-radius:2px}.header__login-btn{background:#4299e1;color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;text-decoration:none;font-weight:600;transition:all .2s ease}.header__login-btn:hover{background:#3182ce;transform:translateY(-1px)}.header__mobile-toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:.5rem}.header__mobile-toggle span{display:block;width:24px;height:2px;background:#4a5568;transition:all .3s ease}.header__nav{flex:1;display:flex;justify-content:center}@media (max-width: 850px){.header__mobile-toggle{display:flex}.header__nav{justify-content:flex-start;position:absolute;top:100%;left:0;right:0;background:#fff;padding:1rem;clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:all .3s ease}.header__nav--open{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);box-shadow:0 4px 6px #0000001a}.header__nav-list{width:100%;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:1rem}.header__nav-link{width:100%;text-align:center;justify-content:center}.header__mobile-toggle.active span:first-child{transform:translateY(8px) rotate(45deg)}.header__mobile-toggle.active span:nth-child(2){opacity:0}.header__mobile-toggle.active span:last-child{transform:translateY(-8px) rotate(-45deg)}}@media (max-width: 620px){.header__container{padding:1rem}.header__logo img{width:60px}.header__login-btn{padding:.5rem 1rem;font-size:.875rem}}