/* Main-page hero navigation: compact boat-shaped menu tabs. */
.topbar:not(.topbar--light) nav {
  gap: 8px;
}

.topbar:not(.topbar--light) nav a {
  --boat-deep: rgba(4, 28, 39, .80);
  --boat-mid: rgba(11, 67, 80, .78);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px 0 20px;
  color: rgba(244, 255, 255, .96);
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--boat-mid), var(--boat-deep));
  border: 1px solid rgba(157, 235, 229, .34);
  border-radius: 999px 0 0 999px;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  box-shadow: 0 10px 24px rgba(0, 12, 19, .18), inset 0 1px 0 rgba(255, 255, 255, .10);
  transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.topbar:not(.topbar--light) nav a:hover,
.topbar:not(.topbar--light) nav a:focus-visible {
  color: #042026;
  background: linear-gradient(135deg, #a0f1e9, #62d8d2);
  border-color: rgba(229, 255, 251, .9);
  box-shadow: 0 14px 30px rgba(0, 11, 18, .28), 0 0 0 3px rgba(98, 216, 210, .16);
  transform: translateY(-2px);
  outline: none;
}

.topbar:not(.topbar--light) nav .nav-cta {
  min-width: 176px;
  padding-left: 23px;
  padding-right: 22px;
  color: #042026;
  background: linear-gradient(135deg, #9af0eb, #62d8d2);
  border-color: rgba(210, 255, 250, .9);
  box-shadow: 0 12px 28px rgba(0, 14, 22, .24), inset 0 1px 0 rgba(255, 255, 255, .52);
}

.topbar:not(.topbar--light) nav .nav-cta:hover,
.topbar:not(.topbar--light) nav .nav-cta:focus-visible {
  color: #021b20;
  background: linear-gradient(135deg, #d5fffa, #7de4dc);
  border-color: #effffc;
}

@media (max-width: 1120px) {
  .topbar:not(.topbar--light) nav { gap: 6px; }
  .topbar:not(.topbar--light) nav a { padding-left: 15px; padding-right: 15px; font-size: 13px; }
  .topbar:not(.topbar--light) nav .nav-cta { min-width: auto; padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 800px) {
  .topbar:not(.topbar--light) nav .nav-cta {
    min-height: 40px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar:not(.topbar--light) nav a { transition: none; }
}