.st-nav{
  position:sticky;
  top:0;
  z-index:50;
  height:68px;
  background:rgba(5,10,30,.9);
  backdrop-filter:blur(14px);
  border-bottom:0;
}
.st-nav::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(210,218,230,.4) 14%,
    transparent 30%,
    rgba(46,108,255,.7) 47%,
    transparent 58%,
    rgba(255,201,60,.55) 76%,
    transparent 100%);
  pointer-events:none;
}

.st-nav-inner{
  height:68px;
  display:flex;
  align-items:center;
  gap:40px;
}

.st-brand{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--st-text);
  flex-shrink:0;
  font-family:var(--st-brand);
  font-size:20px;
  font-weight:400;
  letter-spacing:0.02em;
}

.st-brand img{ width:30px; height:30px; display:block; border-radius:0; background:none; }

/* Language toggle beside the brand */
.st-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(169,180,214,.25);background:rgba(13,22,56,.6);flex-shrink:0}
.st-lang button{height:26px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--st-muted);font:600 12px/1 inherit;cursor:pointer}
.st-lang button.on{background:var(--st-purple);color:#fff}
.st-lang button:not(.on):hover{color:var(--st-text)}

.st-nav-links{
  display:flex;
  align-items:center;
  gap:30px;
  margin:0;
  padding:0;
  list-style:none;
}

.st-nav-links a{
  color:var(--st-muted);
  font-family:var(--st-brand);
  font-size:13px;
  letter-spacing:0.03em;
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

.st-nav-links a:hover,
.st-nav-links a.is-current{ color:var(--st-text); }

.st-nav-end{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:22px;
}

.st-nav-end a{ font-family:var(--st-brand); letter-spacing:0.03em; }

.st-nav-end .st-btn-primary{
  min-height:36px;
  padding:0 16px;
  font-size:13.5px;
}

/* Phones/tablets: no dropdown. The section links sit in their own row under the logo. */
@media (max-width:1000px){
  .st-nav{ height:auto; }
  .st-nav-inner{
    height:auto;
    flex-wrap:wrap;
    column-gap:16px;
    row-gap:0;
    padding-top:10px;
  }
  .st-nav-end{ gap:16px; }
  .st-nav-links{
    order:3;
    width:100%;
    gap:0;
    justify-content:space-between;
    border-top:1px solid var(--st-border);
    margin-top:10px;
  }
  .st-nav-links li{ flex:1; }
  .st-nav-links a{
    width:100%;
    justify-content:center;
    font-size:13.5px;
    border-bottom:2px solid transparent;
  }
  .st-nav-links a.is-current{ border-bottom-color:var(--st-purple); }
}