:root{
    --inset-x: 16px;
    --line: rgba(0,0,0,.1);
    --accent-2: #144BA2;
    --brand-mist: #E5E1E2;
    --brand-cloud: #A8A49F;
    --brand-blue: #144BA2;
    --brand-blue-deep: #000FA8;
    --brand-navy: #000C6F;
    --brand-orange: #F27405;
    --brand-orange-deep: #C25700;
}

.site-header,
.site-header *{
    font-family:'Poppins', sans-serif;
}

.site-header{
    position:fixed;
    top:10px;
    left:var(--inset-x);
    right:var(--inset-x);
    z-index:9999;
    transition:.35s ease;
}
.header-inner{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:4px 8px;
    border-radius:10px;
    background:rgba(255,255,255,.0062);
    transition:.35s;
}
.header-inner::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    z-index:-1;
    pointer-events:none;
}
.brand{position:relative;display:flex;align-items:center}
.brand img{transition:opacity .3s ease}
.brand .logo-full{height:34px;width:auto}
.brand .logo-icon{
    position:absolute;
    top:50%;left:0;
    transform:translateY(-50%);
    width:35px;height:35px;
    opacity:0;
    pointer-events:none;
}

.site-header.scrolled .header-inner{
    position:relative;
    margin-top:2px;
    max-width:1100px;
    width:calc(100% - 20px);
    padding:4px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.82);
    gap:8px;
}
.site-header.scrolled .header-inner::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    z-index:-1;
    pointer-events:none;
}
[data-theme="dark"] .site-header.scrolled .header-inner{
    background:rgba(10,14,40,.92);
}
.site-header.scrolled .brand{
    min-width:35px;
    width:35px;
    height:35px;
    overflow:hidden;
}
.site-header.scrolled .brand .logo-full{
    opacity:0;
    pointer-events:none;
}
.site-header.scrolled .brand .logo-icon{
    opacity:1;
}

@media (min-width:961px){
  .site-header.scrolled .desktop-menu{
      background:transparent;
      border-color:transparent !important;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
  }
}

@media (max-width:767px){
    .site-header.scrolled .header-inner{
        margin-top:4px;
        width:auto;
        max-width:48%;
        margin-left:auto;
        margin-right:2px;
        padding:6px;
        gap:8px;
        justify-content:flex-end;
    }
    .site-header.scrolled .nav-wrapper{gap:6px}
}

#menu-toggle{display:none !important}

.nav-wrapper{position:relative;z-index:999;display:flex;align-items:center;gap:12px}

.desktop-menu{
  background:rgba(229,225,226,.55);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:10px;
  width:max-content;
  margin:auto;
  padding:7px 5px;
}
.desktop-menu ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  justify-content:center;
  align-items:center;
}
.desktop-menu li{display:flex;align-items:center}
.desktop-menu li:not(:last-child)::after{
  content:"";
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(20,75,162,.55);
  margin:0 2px;
}
.desktop-menu a{
  color:#1d1d1f;
  text-decoration:none;
  font-size:15px;
  margin:0 2px;
  font-weight:600;
  line-height:1;
  padding:10px 14px;
  border-radius:10px;
  transition:background .25s ease,color .25s ease,transform .2s ease;
}

.desktop-menu a:hover{
  background:var(--brand-orange);
  color:#FAFAFA;
  transform:translateY(-1px);
}
.desktop-menu .current-menu-item a{
  background:var(--brand-navy);
  color:#FAFAFA;
}
.desktop-menu .current-menu-item a:hover{
  background:var(--brand-blue-deep);
  color:#FAFAFA;
}

.desktop-menu li.nav-cta{margin-left:30px}
.desktop-menu li.nav-cta::before{display:none}
.desktop-menu li.nav-cta::after{display:none}
.desktop-menu li.nav-cta a{
  background:var(--brand-navy);
  color:#FAFAFA !important;
  border:1px solid rgba(255,255,255,.25);
  position:relative;
  overflow:hidden;
}
.desktop-menu li.nav-cta a:hover{
  background:var(--brand-blue-deep);
  color:#FAFAFA;
  transform:translateY(-1px);
}
.desktop-menu li.nav-cta a::after{
  content:"";
  position:absolute;top:50%;left:50%;
  width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,.4);
  transform:translate(-50%,-50%);
  transition:width .5s ease,height .5s ease,opacity .5s ease;
  opacity:0;pointer-events:none;
}
.desktop-menu li.nav-cta a:active::after{
  width:200px;height:200px;opacity:0;transition:0s;
}

.desktop-menu li.nav-login a{
  background:var(--brand-orange);
  color:#FAFAFA !important;
  border:1px solid rgba(255,255,255,.25);
}
.desktop-menu li.nav-login a:hover{
  background:var(--brand-orange-deep);
  color:#FAFAFA;
  transform:translateY(-1px);
}
[data-theme="dark"] .desktop-menu li.nav-login a{
  background:var(--brand-orange);
  color:#FAFAFA;
}
[data-theme="dark"] .desktop-menu li.nav-login a:hover{
  background:var(--brand-orange-deep);
  color:#FAFAFA;
}

.hamburger{display:none}

@media (max-width:960px){
  .desktop-menu{
    position:fixed;
    top:80px;
    left:var(--inset-x);
    right:var(--inset-x);
    width:auto;
    opacity:0;visibility:hidden;
    transform:translate3d(0,-16px,0) scale(.98);
    -webkit-transform:translate3d(0,-16px,0) scale(.98);
    contain:paint;isolation:isolate;
    will-change:transform,opacity;
    transition:
      opacity .35s ease,
      transform .35s cubic-bezier(.22,.61,.36,1),
      visibility .35s ease;
    border-radius:10px;
    background:rgba(229,225,226,.55);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(18px);
    overflow:hidden;
    padding:15px;
    z-index:1000;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .desktop-menu::before{
    content:"";
    position:absolute;inset:6px;
    border-radius:10px;
    background:rgba(255,255,255,.82);
    pointer-events:none;
  }
  .desktop-menu ul{
    position:relative;z-index:2;
    flex-direction:column;align-items:stretch;
  }
  .desktop-menu li{width:100%}
  .desktop-menu li:not(:last-child)::after{display:none}
  .desktop-menu a{
    display:flex;align-items:center;justify-content:center;text-align:center;
    width:100%;font-size:18px;font-weight:600;
    margin:3px 0;padding:15px 20px;border-radius:10px;
    color:#0F0F0F;transition:.25s ease;
  }
  .desktop-menu a:hover{
    background:var(--brand-orange);
    color:#FAFAFA;
  }
  #menu-toggle:checked ~ .desktop-menu{
    opacity:1;visibility:visible;
    transform:translate3d(0,0,0) scale(1);
    -webkit-transform:translate3d(0,0,0) scale(1);
  }
  .hamburger{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;
    width:40px;height:40px;
    border-radius:10px;cursor:pointer;
    background:var(--brand-blue);
    border:0px solid rgba(255,255,255,.25);
    z-index:1001;
    transition:background .25s ease;
  }
  .hamburger span{
    width:20px;height:2px;border-radius:10px;
    background:#FAFAFA;
    transition:transform .3s ease,opacity .3s ease;
  }
  #menu-toggle:checked + .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #menu-toggle:checked + .hamburger span:nth-child(2){opacity:0}
  #menu-toggle:checked + .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  [data-theme="dark"] .hamburger{background:var(--brand-blue-deep)}
  .desktop-menu li.nav-login a{
    background:var(--brand-orange) !important;
    color:#FAFAFA !important;
  }
  .desktop-menu li.nav-login a:hover{
    background:var(--brand-orange-deep) !important;
    color:#FAFAFA !important;
  }
  [data-theme="dark"] .desktop-menu li.nav-login a{
    background:var(--brand-orange) !important;
    color:#FAFAFA !important;
  }
  .desktop-menu li.nav-cta{margin-left:0;margin-top:4px}
  .desktop-menu li.nav-cta a{
    background:var(--brand-navy) !important;
    color:#FAFAFA !important;
  }
  .desktop-menu li.nav-cta a:hover{
    background:var(--brand-blue-deep) !important;
    color:#FAFAFA !important;
  }
}

.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  border:1px solid var(--line);border-radius:10px;
  background:var(--brand-navy);
  cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .15s ease;
}
.theme-toggle:hover{transform:scale(1.06)}
.theme-toggle:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon{
  width:20px;height:20px;
  display:none;
  color:#FAFAFA;
}
.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}

[data-theme="dark"] .theme-toggle{background:var(--brand-blue-deep)}
[data-theme="dark"] .theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon{color:#FAFAFA}

@media (max-width:960px){
  .brand{order:1}
  .theme-toggle{order:2; margin-left:auto; margin-right:8px}
  .nav-wrapper{order:3; margin-left:0}
  .site-header.scrolled .theme-toggle{margin-right:4px}
}

[data-theme="dark"] .desktop-menu{
  background:rgba(10,14,40,.85);
}

[data-theme="dark"] .desktop-menu a{
  color:#f0f0f2;
}
[data-theme="dark"] .desktop-menu a:hover{
  background:var(--brand-orange);
  color:#FAFAFA;
}
[data-theme="dark"] .desktop-menu .current-menu-item a{
  background:rgba(20,75,162,.32);
  color:#FAFAFA;
}

[data-theme="dark"] .desktop-menu li:not(:last-child)::after{
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(20,75,162,.7);
}

@media (max-width:960px){
  [data-theme="dark"] .desktop-menu{
    background:rgba(8,12,36,.9);
  }
  [data-theme="dark"] .desktop-menu::before{
    background:rgba(8,11,33,.88);
  }
  [data-theme="dark"] .desktop-menu a{
    color:#f0f0f2;
  }
  [data-theme="dark"] .desktop-menu a:hover{
    background:var(--brand-orange);
    color:#FAFAFA;
  }
}