/* ---- Kytos navigation on the landing page ----
   Same bar as the one inside the app (see theme.css): a rounded pill centred at the top, text only,
   so the navigation does not change shape when you move from the landing into a page. ---- */
.vs-dock{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(15,16,18,.08);box-shadow:0 14px 34px -20px rgba(15,16,18,.45)}
.vs-dock a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;color:#4b4e55;font:600 12.5px/1 var(--sans,"Space Grotesk",system-ui,sans-serif);letter-spacing:.01em;text-decoration:none;transition:background .18s,color .18s;white-space:nowrap}
.vs-dock a:hover{background:rgba(15,16,18,.06);color:#0f1012}
.vs-dock a.on{background:#0f1012;color:#fff}

/* Narrow screens: the header's brand and wallet need the top row, so the bar moves to the bottom. */
@media (max-width:880px){
  .vs-dock{top:auto;bottom:12px;max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none;box-shadow:0 22px 50px -22px rgba(15,16,18,.45)}
  .vs-dock::-webkit-scrollbar{display:none}
  .vs-dock a{padding:0 13px}
  body{padding-bottom:88px}
}