/* ============================================================
   NAV — additions on top of the legacy header.css pattern
   ============================================================ */
.header {
  gap: 0.2em;
  align-items: center;
}
/* logo tab sits flush with the nav baseline */
.header .tab:first-of-type {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 0.6em;
}
.header .tab:first-of-type a {
  display: flex;
  align-items: center;
}
.header .tab:first-of-type img {
  display: block;
}
.header .contact-tab { margin-left: auto; display: flex; align-items: center; }
/* selected state: same per-item gradient as the tab's hover */
.header .selected-tab { background-color: transparent; }
.contact-btn {
  background: linear-gradient(135deg, rgba(52,211,153,0.5), rgba(20,184,166,0.32));
  border: 1px solid rgba(110,231,183,0.75);
  color: #dcfff1 !important;
  padding: 0.5em 1.05em;
  border-radius: 7px;
  font-size: var(--fs-sm);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.header .contact-tab:hover { background: none; }
.contact-btn:hover { filter: brightness(1.18); }

/* ── per-item selected colors (same backgrounds as hover) ──────── */
.header .tab.nav-products.selected-tab  { background: linear-gradient(135deg, rgba(90,108,255,0.30), rgba(90,108,255,0.08)); }
.header .tab.nav-services.selected-tab  { background: linear-gradient(135deg, rgba(52,211,153,0.28), rgba(20,184,166,0.08)); }
.header .tab.nav-portfolio.selected-tab { background: linear-gradient(135deg, rgba(168,85,247,0.30), rgba(138,92,255,0.08)); }
.header .tab.nav-about.selected-tab     { background: linear-gradient(135deg, rgba(34,211,238,0.28), rgba(90,108,255,0.08)); }
.header .tab.nav-products.selected-tab a  { color: #dfe6ff; }
.header .tab.nav-services.selected-tab a  { color: #dcfff1; }
.header .tab.nav-portfolio.selected-tab a { color: #f0e6ff; }
.header .tab.nav-about.selected-tab a     { color: #e0f8ff; }

/* ── per-item hover colors (transparent gradient fills) ───────── */
.header .tab:hover:not(.selected-tab) { background-color: transparent; }
.header .tab.nav-products:hover:not(.selected-tab)  { background: linear-gradient(135deg, rgba(90,108,255,0.30), rgba(90,108,255,0.08)); }
.header .tab.nav-services:hover:not(.selected-tab)  { background: linear-gradient(135deg, rgba(52,211,153,0.28), rgba(20,184,166,0.08)); }
.header .tab.nav-portfolio:hover:not(.selected-tab) { background: linear-gradient(135deg, rgba(168,85,247,0.30), rgba(138,92,255,0.08)); }
.header .tab.nav-about:hover:not(.selected-tab)     { background: linear-gradient(135deg, rgba(34,211,238,0.28), rgba(90,108,255,0.08)); }
.header .tab.nav-products:hover:not(.selected-tab) a  { color: #dfe6ff; }
.header .tab.nav-services:hover:not(.selected-tab) a  { color: #dcfff1; }
.header .tab.nav-portfolio:hover:not(.selected-tab) a { color: #f0e6ff; }
.header .tab.nav-about:hover:not(.selected-tab) a     { color: #e0f8ff; }