:root{--nav-offset:84px;--nav-bg:#080D1A}

.nav-spacer{display:none}

.nav-panel{display:flex;align-items:center;gap:24px;flex:1;justify-content:flex-end;min-width:0}
.nav-panel-foot{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:auto;height:auto;padding:8px;border:none;border-radius:0;background:transparent;cursor:pointer;flex-shrink:0}
.nav-burger span{display:block;width:18px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform .25s ease,opacity .25s ease;margin:0 auto}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scroll-top-btn{display:none}

html.nav-menu-open,
html.nav-menu-open body{overflow:hidden;touch-action:none}

@media (max-width:980px){
  html{overflow-x:hidden;scroll-padding-top:var(--nav-offset)}
  .nav-spacer{display:none;height:0;flex-shrink:0}
  .nav,
  .nav.scrolled{
    position:relative!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%;
    max-width:100%;
    min-height:var(--nav-offset);
    z-index:1000;
    background:var(--nav-bg)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:visible;
    box-sizing:border-box;
    border-bottom:1px solid var(--line);
    box-shadow:none;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    isolation:isolate;
    transition:none!important;
  }
  .nav-inner{
    min-width:0;
    height:var(--nav-offset);
    gap:12px;
    padding-left:max(20px,env(safe-area-inset-left,0px));
    padding-right:max(20px,env(safe-area-inset-right,0px));
    overflow:hidden;
    background:var(--nav-bg);
  }
  .nav .logo{
    min-width:0;
    flex:1 1 auto;
    max-width:calc(100% - 48px);
    overflow:hidden;
  }
  .nav .logo-img{
    max-height:64px;
    max-width:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    object-position:left center;
  }
  .nav-inner>.nav-burger{margin-left:auto;flex-shrink:0}
  .nav-burger{display:inline-flex}
  .nav-panel{
    position:fixed;
    top:var(--nav-offset)!important;
    right:0;
    bottom:0;
    left:0;
    flex:none;
    width:100%;
    max-width:100%;
    height:calc(100vh - var(--nav-offset));
    min-height:calc(100vh - var(--nav-offset));
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:20px max(20px,env(safe-area-inset-right,0px)) max(32px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
    background:var(--nav-bg);
    border-top:1px solid var(--line);
    gap:0;
    transform:translate3d(100%,0,0);
    transition:transform .3s cubic-bezier(.22,1,.36,1),visibility .3s;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    z-index:999;
    pointer-events:none;
    visibility:hidden;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
  }
  @supports (height:100svh){
    .nav-panel{
      height:calc(100svh - var(--nav-offset));
      min-height:calc(100svh - var(--nav-offset));
    }
  }
  .nav.nav-open .nav-panel{transform:translate3d(0,0,0);pointer-events:auto;visibility:visible}
  .nav-links{display:flex;flex-direction:column;gap:0;width:100%;list-style:none;margin:0;padding:0}
  .nav-links li{border-bottom:1px solid var(--line)}
  .nav-links a{display:block;padding:16px 0;font-size:16px;font-weight:500;color:var(--text-secondary)}
  .nav-links a:hover{color:var(--text-primary)}
  .nav-panel-foot{margin-top:auto;width:100%;flex-direction:column;align-items:stretch;gap:16px;padding-top:28px}
  .nav-panel-foot .lang{align-self:center}
  .nav-panel-foot .btn{width:100%;justify-content:center;text-align:center}
  .hero{
    padding-top:16px!important;
    min-height:auto!important;
    align-items:flex-start!important;
  }
  .scroll-top-btn{
    position:fixed;
    right:max(16px,env(safe-area-inset-right,0px));
    bottom:max(18px,env(safe-area-inset-bottom,0px));
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border:1px solid var(--line-strong);
    border-radius:50%;
    background:var(--nav-bg);
    color:var(--text-primary);
    box-shadow:0 10px 28px rgba(0,0,0,.45);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
  }
  .scroll-top-btn.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .scroll-top-btn svg{
    width:22px;
    height:22px;
    display:block;
  }
}

@media (max-width:560px){
  .nav-panel{padding-top:16px;padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
}