.site-header {
  --site-header-bg:
    linear-gradient(180deg, rgb(247 246 242 / 96%), rgb(248 249 252 / 88%)),
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 18%, transparent), transparent 28%),
    radial-gradient(circle at 88% -18%, color-mix(in srgb, var(--gem-imperial-topaz-flat, #d07800) 22%, transparent), transparent 26%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 12%, transparent), transparent 38%);

  position: sticky;
  top: 0;
  z-index: 3000;
  backdrop-filter: blur(24px) saturate(140%);
  background: var(--site-header-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 12%, white);
  box-shadow: var(--shadow-lg, 0 24px 56px rgb(17 24 39 / 10%));
  isolation: isolate;
}

.site-header__beam {
  position: absolute;
  inset: 0 0 auto;
  block-size: 3px;
  background: linear-gradient(
    90deg,
    var(--gem-sapphire-flat, #1f3a99) 0%,
    var(--gem-blue-topaz-flat, #0288d1) 20%,
    var(--gem-labradorite-flat, #2d3f6e) 40%,
    var(--gem-tanzanite-flat, #4a2db5) 55%,
    var(--gem-imperial-topaz-flat, #d07800) 75%,
    var(--gem-gold-native-flat, #c88c00) 88%,
    var(--gem-ruby-flat, #9b0020) 100%
  );
  opacity: 0.92;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: var(--site-header-height);
  padding-block: 0.85rem;
}

.site-header__brand-cluster {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__brand-copy {
  display: none;
  min-width: 0;
}

.site-header__eyebrow,
.site-header__panel-kicker,
.site-header__dropdown-heading,
.site-header__drawer-subheading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 76%, white);
}

.site-header__mission,
.site-header__panel-copy,
.site-header__drawer-copy,
.site-header__dropdown-copy {
  margin: 0;
  color: color-mix(in srgb, var(--color-text, #1a2040) 72%, white);
}

.site-header__logo {
  display: block;
  width: 10rem;
  height: auto;
}

.site-header__logo--dark {
  display: none;
}

.site-header__nav,
.site-header__actions {
  display: none;
}

.site-header__menu,
.site-header__drawer-menu,
.site-header__drawer-sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-header__item {
  position: relative;
}

.site-header__link,
.site-header__drawer-link,
.site-header__drawer-sublink,
.site-header__dropdown-link,
.site-header__signal,
.site-header__panel-cta {
  text-decoration: none;
}

.site-header__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text, #1a2040);
  font: inherit;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.site-header__link:hover,
.site-header__link:focus-visible {
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 10%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 10%, transparent);
  outline: 2px solid var(--gem-sapphire-flat, #1f3a99);
  outline-offset: 2px;
}

.site-header__chevron {
  opacity: 0.65;
  transition: transform 160ms ease;
}

.site-header__item--has-dropdown .site-header__link[aria-expanded='true'] .site-header__chevron,
.site-header__item--has-dropdown:hover .site-header__chevron,
.site-header__item--has-dropdown:focus-within .site-header__chevron {
  transform: rotate(180deg);
}

.site-header__dropdown {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 3010;
  display: grid;
  gap: 1.25rem;
  padding: 1.35rem;
  border: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 12%, white);
  border-radius: 1.6rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(247 248 252 / 96%)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--gem-blue-topaz-flat, #29b6f6) 10%, transparent), transparent 28%);
  box-shadow: 0 32px 96px rgb(17 24 39 / 16%), 0 8px 24px rgb(17 24 39 / 8%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}

/* Invisible bridge so the mouse can travel from trigger to dropdown panel */
.site-header__dropdown::before {
  content: '';
  position: absolute;
  inset: -1rem -0.5rem auto;
  block-size: 1rem;
}

.site-header__item--has-dropdown:hover .site-header__dropdown,
.site-header__item--has-dropdown:focus-within .site-header__dropdown,
.site-header__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.site-header__dropdown--panel {
  width: min(42rem, calc(100vw - 3rem));
  grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr);
}

.site-header__dropdown--mega {
  width: min(58rem, calc(100vw - 3rem));
  grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
}

/* Plain dropdown — no panel-intro column; panel-groups fills full width */
.site-header__dropdown--plain {
  width: min(44rem, calc(100vw - 3rem));
  grid-template-columns: 1fr;
}

.site-header__dropdown--framework {
  width: min(58rem, calc(100vw - 3rem));
  grid-template-columns: 1fr;
}

.site-header__panel-intro {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 1.3rem;
  color: #f6f8ff;
  min-height: 100%;
  box-shadow: inset 0 2px 4px rgb(255 255 255 / 24%), inset 0 1px 0 rgb(255 255 255 / 18%);
}

.site-header__panel-intro--sapphire {
  background:
    radial-gradient(circle at top, rgb(255 255 255 / 20%), transparent 34%),
    var(--gem-sapphire, linear-gradient(135deg, #0a1a6e 0%, #1f3a99 35%, #3d64cc 60%, #128 100%));
}

.site-header__panel-intro--labradorite {
  background:
    radial-gradient(circle at top, rgb(255 255 255 / 18%), transparent 36%),
    var(--gem-labradorite, linear-gradient(135deg, #1a1f2e 0%, #2d3f6e 30%, #4a90c4 50%, #2eb5b0 65%, #1a1f2e 100%));
}

.site-header__panel-intro--topaz {
  background:
    radial-gradient(circle at top, rgb(255 255 255 / 22%), transparent 32%),
    linear-gradient(160deg, color-mix(in srgb, var(--gem-imperial-topaz-flat, #d07800) 88%, black) 0%, var(--gem-imperial-topaz-flat, #d07800) 34%, color-mix(in srgb, var(--gem-blue-topaz-flat, #29b6f6) 44%, var(--gem-imperial-topaz-flat, #d07800)) 100%);
}

.site-header__panel-title,
.site-header__drawer-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.site-header__panel-copy,
.site-header__drawer-copy {
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: rgb(246 248 255 / 88%);
}

.site-header__panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  min-height: 2.7rem;
  padding-inline: 1.15rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 22%), 0 8px 20px rgb(0 0 0 / 16%);
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.site-header__panel-cta:hover,
.site-header__panel-cta:focus-visible {
  background: rgb(255 255 255 / 26%);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 32%), 0 10px 28px rgb(0 0 0 / 20%);
  transform: translateY(-2px);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.site-header__panel-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.site-header__panel-groups--two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-header__panel-groups--three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-header__panel-group {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 0.55rem;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 72%), rgb(247 248 252 / 92%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 8%, white);
}

.site-header__dropdown-heading,
.site-header__drawer-subheading {
  padding: 0.35rem 0.4rem 0.15rem;
  color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 84%, white);
}

.site-header__dropdown-link {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 0.95rem;
  border-radius: 1.05rem;
  color: var(--color-text, #1a2040);
  transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.site-header__dropdown-link:hover,
.site-header__dropdown-link:focus-visible,
.site-header__drawer-link:hover,
.site-header__drawer-link:focus-visible,
.site-header__drawer-sublink:hover,
.site-header__drawer-sublink:focus-visible {
  background: color-mix(in srgb, var(--gem-blue-topaz-flat, #29b6f6) 12%, white);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 12%, transparent);
  outline: 2px solid var(--gem-sapphire-flat, #1f3a99);
  outline-offset: -2px;
}

.site-header__dropdown-link--descriptive:hover,
.site-header__dropdown-link--descriptive:focus-visible {
  transform: translateX(3px);
}

.site-header__dropdown-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.008em;
}

.site-header__dropdown-copy {
  font-size: 0.85rem;
  line-height: 1.6;
  letter-spacing: 0.003em;
}

.site-header__dropdown-badge,
.site-header__drawer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem 0.48rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gem-imperial-topaz-flat, #d07800) 14%, white);
  color: color-mix(in srgb, var(--gem-imperial-topaz-flat, #d07800) 88%, black);
  font-size: 0.68rem;
  font-weight: 800;
}

.site-header__dropdown-badge--starter {
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 12%, white);
  color: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 88%, black);
}

.site-header__dropdown-badge--pro {
  background: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 10%, white);
  color: color-mix(in srgb, var(--gem-ruby-flat, #9b0020) 88%, black);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.site-header__signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding-inline: 1.05rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 12%, white);
  background: rgb(255 255 255 / 74%);
  color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 82%, black);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.site-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.78rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.site-header__btn:hover,
.site-header__btn:focus-visible,
.site-header__signal:hover,
.site-header__signal:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid var(--gem-sapphire-flat, #1f3a99);
  outline-offset: 2px;
}

.site-header__btn--ghost {
  color: var(--color-text, #1a2040);
  border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white);
  background: rgb(255 255 255 / 72%);
}

.site-header__btn--primary {
  color: #f4f8ff;
  background:
    radial-gradient(circle at top, rgb(255 255 255 / 16%), transparent 42%),
    linear-gradient(135deg, var(--gem-sapphire-flat, #1f3a99) 0%, color-mix(in srgb, var(--gem-blue-topaz-flat, #29b6f6) 42%, var(--gem-sapphire-flat, #1f3a99)) 55%, color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 78%, black) 100%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 28%, transparent);
}

.site-header__mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white);
  background: rgb(255 255 255 / 76%);
  color: var(--color-text, #1a2040);
}

.site-header__mobile-toggle[aria-expanded='true'] .site-header__hamburger {
  display: none;
}

.site-header__mobile-toggle[aria-expanded='true'] .site-header__close {
  display: block;
}

.site-header__close {
  display: none;
}

.site-header__drawer {
  display: none;
}

.site-header__drawer-shell {
  display: grid;
  gap: 1rem;
  max-inline-size: 34rem;
  margin-inline-start: auto;
}

.site-header__drawer-hero {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1.2rem;
  color: #f5f7ff;
  background:
    radial-gradient(circle at top, rgb(255 255 255 / 18%), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 88%, black) 0%, var(--gem-sapphire-flat, #1f3a99) 48%, color-mix(in srgb, var(--gem-imperial-topaz-flat, #d07800) 34%, var(--gem-sapphire-flat, #1f3a99)) 100%);
}

.site-header__drawer-menu {
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 24px 60px rgb(17 24 39 / 13%);
}

.site-header__drawer-link,
.site-header__drawer-sublink,
.site-header__drawer-details summary {
  display: block;
  padding: 0.9rem 0.8rem;
  border-radius: 0.95rem;
  color: var(--color-text, #1a2040);
  font-weight: 650;
  cursor: pointer;
}

.site-header__drawer-details summary::-webkit-details-marker {
  display: none;
}

.site-header__drawer-sub {
  display: grid;
  gap: 0.15rem;
  padding: 0.1rem 0 0.4rem 0.65rem;
}

.site-header__drawer-sublink {
  display: grid;
  gap: 0.2rem;
}

.site-header__drawer-sublink span {
  font-size: 0.82rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text, #1a2040) 70%, white);
}

/* ─── Smart-active nav states ─────────────────────────────────────────────── */

.site-header__link--active {
  color: var(--gem-sapphire-flat, #1f3a99);
  box-shadow: inset 0 -2px 0 var(--gem-sapphire-flat, #1f3a99);
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 7%, white);
}

.site-header__dropdown-link[aria-current='page'] .site-header__dropdown-label {
  color: var(--gem-sapphire-flat, #1f3a99);
  font-weight: 700;
}

.site-header__dropdown-link[aria-current='page']::before {
  position: absolute;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--gem-sapphire-flat, #1f3a99);
  content: '';
}

.site-header__dropdown-link {
  position: relative;
}

.site-header__drawer-link--active {
  color: var(--gem-sapphire-flat, #1f3a99);
  font-weight: 700;
}

.site-header__drawer-sublink[aria-current='page'] {
  color: var(--gem-sapphire-flat, #1f3a99);
  font-weight: 650;
}

.site-header__drawer-sublink--primary,
.site-header__signal--drawer {
  font-weight: 800;
}

.site-header__drawer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

@media (width >= 1080px) {
  .site-header__nav,
  .site-header__actions {
    display: flex !important;
    flex-wrap: nowrap;
  }

  .site-header__mobile-toggle,
  .site-header__drawer {
    display: none !important;
  }
}

@media (1080px <= width < 1320px) {
  .site-header__signal {
    display: none;
  }

  .site-header__dropdown--mega {
    width: min(52rem, calc(100vw - 2.5rem));
  }

  .site-header__dropdown--framework {
    width: min(52rem, calc(100vw - 2.5rem));
  }
}

@media (width < 1080px) {
  .site-header__drawer[aria-hidden='false'] {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 3010;
    display: block;
    padding: 0 1rem 1rem;
    background: linear-gradient(180deg, rgb(248 249 252 / 72%), transparent);
  }
}

@media (width < 720px) {
  .site-header__inner {
    min-height: 4.65rem;
  }

  .site-header__logo {
    width: 8.8rem;
  }

  .site-header__drawer-shell {
    max-inline-size: none;
  }

  .site-header__drawer-sub {
    padding-inline-start: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__link,
  .site-header__chevron,
  .site-header__dropdown,
  .site-header__dropdown-link,
  .site-header__btn,
  .site-header__signal {
    transition: none;
  }
}