* { scrollbar-width: thin; }
*, ::before, ::after { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; color: rgb(20, 32, 47); background: rgb(234, 241, 249); }
a { color: inherit; text-decoration: none; }
main-flex { display: flex; flex-direction: column; }
main-row { display: flex; align-items: flex-start; }
main-header { height: 56px; box-sizing: border-box; display: flex; align-items: center; gap: 14px; background: rgb(255, 255, 255); padding: 0px 24px; position: sticky; top: 0; z-index: 10; transition: transform 0.25s ease; }
menu-toggle { display: none; font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 4px; cursor: pointer; color: rgb(10, 51, 96); user-select: none; }
menu-toggle:hover { background: rgb(220, 232, 245); }
site-logo { display: inline-block; min-width: 280px; font-weight: 700; font-size: 36px; letter-spacing: 0.3px; color: rgb(10, 51, 96); text-shadow: rgba(10, 51, 96, 0.25) 1px 2px 3px; }
site-logo dot { color: rgb(196, 106, 0); }
logo-wrapper{
	display: block;
    position:relative;
    width:200px;
    height:50px;
}
logo-wrapper img{
    position:absolute;
    top:0;
    left:0;
    width:200px;
    opacity:0;
    animation:logoFade 16s infinite;
}

img.l1{animation-delay:0s;}
img.l2{animation-delay:4s;}
img.l3{animation-delay:8s;}
img.l4{animation-delay:12s;}

@keyframes logoFade{
    0%,20%{opacity:1;}
    25%,100%{opacity:0;}
}



header-nav { margin-inline-start: auto; }
header-nav a.lang-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; background: rgb(255, 255, 255); color: rgb(10, 51, 96); font-size: 15px; font-weight: 600; letter-spacing: 0.3px; border: 1.5px solid rgb(10, 51, 96); cursor: pointer; transition: background 0.15s, color 0.15s; }
header-nav a.lang-toggle:hover { background: rgb(10, 51, 96); color: rgb(255, 255, 255); }
menu-backdrop { display: none; }
@media (max-width: 600px) {
  menu-toggle { display: inline-block; }
  menu-backdrop { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.25); z-index: 49; }
  menu-backdrop.open { display: block; }
}
@media (max-width: 460px) {
  main-header { padding: 0px 14px; gap: 8px; }
  site-logo { font-size: 26px; min-width: 0px; }
  header-nav a.lang-toggle { font-size: 13px; padding: 4px 12px; }
}
main-header.header-hidden { transform: translateY(-100%); }