:root {
  --brand: #246bfe;
  --brand-dark: #1152d6;
}

.site-header {
  position: fixed;
  z-index: 80;
  top: clamp(10px, 1.4vh, 20px);
  left: 50%;
  width: min(clamp(1240px, 92vw, 1600px), calc(100% - 40px));
  height: clamp(58px, min(6vh, 3.4vw), 70px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(18px, 1.5vw, 24px);
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(71, 113, 207, .12);
  border-radius: clamp(18px, 1.25vw, 22px);
  box-shadow: 0 16px 50px rgba(45, 82, 158, .12);
  backdrop-filter: blur(22px) saturate(145%);
}

.brand-button { justify-self: start; border: 0; background: transparent; padding: 0; cursor: pointer; }
.brand { --brand-icon: #246bfe; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.brand--indigo { --brand-icon: #5069e9; }
.brand--violet { --brand-icon: #7557e8; }
.brand__mark { width: clamp(31px, 1.8vw, 36px); height: clamp(31px, 1.8vw, 36px); display: grid; place-items: center; color: #fff; background: var(--brand-icon); border-radius: 10px; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-icon) 28%, transparent); }
.brand__name { font-size: clamp(18px, 1.05vw, 20px); font-weight: 650; letter-spacing: -0.02em; }
.brand--compact .brand__name { display: none; }

.desktop-product-nav { display: flex; height: 100%; align-items: center; gap: clamp(30px, 2.4vw, 52px); }
.desktop-product-nav button,
.desktop-product-nav a { position: relative; height: 100%; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0 2px; font-size: clamp(14px, .82vw, 16px); color: #6c7690; cursor: pointer; text-decoration: none; }
.desktop-product-nav button::after,
.desktop-product-nav a::after { content: ""; position: absolute; left: 0; bottom: 7px; width: 100%; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transition: transform .24s ease; }
.desktop-product-nav button:hover, .desktop-product-nav button.is-active,
.desktop-product-nav a:hover, .desktop-product-nav a.is-active { color: #1f3b73; }
.desktop-product-nav button.is-active::after,
.desktop-product-nav a.is-active::after,
.desktop-product-nav a:hover::after { transform: scaleX(1); }
.product-nav-icon { --nav-icon: #176bff; width: clamp(25px, 1.45vw, 29px); height: clamp(25px, 1.45vw, 29px); display: inline-grid; flex: 0 0 auto; place-items: center; color: #fff; background: var(--nav-icon); border-radius: 8px; box-shadow: 0 7px 18px color-mix(in srgb, var(--nav-icon) 22%, transparent); animation: nav-icon-in .2s ease-out both; }
.product-nav-icon[hidden] { display: none !important; }
.product-nav-icon--indigo { --nav-icon: #5069e9; }
.product-nav-icon--violet { --nav-icon: #7557e8; }
@keyframes nav-icon-in { from { opacity: 0; transform: scale(.8); } }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 11px; }
.header-text-link, .icon-button { border: 0; background: transparent; cursor: pointer; }
.header-text-link { padding: 8px 8px; color: #65708a; font-size: clamp(13px, .75vw, 14px); text-decoration: none; }
.header-text-link:hover, .header-text-link.is-active { color: #1d4ca5; }
.icon-button { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.icon-button:hover { color: var(--brand); background: rgba(36, 107, 254, .075); }
.mobile-product-current { display: none; }
.desktop-product-nav button:focus-visible, .header-text-link:focus-visible { outline: 0; box-shadow: inset 0 -2px 0 var(--brand); }

@media (max-width: 900px) {
  .site-header { top: 10px; width: calc(100% - 20px); height: 54px; grid-template-columns: auto 1fr auto; padding: 0 12px; }
  .brand__name { display: none; }
  .desktop-product-nav, .header-text-link { display: none; }
  .mobile-product-current { display: block; justify-self: center; }
  .mobile-product-current button, .mobile-product-current a { display: flex; align-items: center; gap: 7px; border: 0; padding: 6px 9px; color: inherit; background: transparent; font-size: 14px; text-decoration: none; cursor: pointer; }
  .mobile-product-current .product-nav-icon { width: 25px; height: 25px; }
  .mobile-product-current button:focus-visible, .mobile-product-current a:focus-visible { outline: 0; color: var(--brand-dark); background: rgba(36, 107, 254, .075); border-radius: 10px; box-shadow: 0 0 0 2px rgba(36, 107, 254, .16); }
  .header-actions { gap: 2px; }
  .header-actions .icon-button { width: 34px; height: 34px; }
}

@media (max-width: 600px) and (max-height: 680px) {
  .site-header { top: 7px; height: 50px; }
}