/* ══ Header bar: full-width white sheet, content aligned to the hero container ══════ */

/* the white surface spans the viewport; only the inner row is constrained */
header.site-head { position: sticky; top: 0; z-index: 100; padding: 0; margin: 0;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  border: 0; border-bottom: 1px solid #E4EAF5;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 20px -14px rgba(7,18,46,.35); }

header.site-head > .wrap { position: relative; max-width: var(--wrap, 1160px); margin: 0 auto;
  height: 66px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }

/* thin brand gradient hairline sitting exactly on the border */
header.site-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #1F5BFF 0%, #22D3EE 42%, #0B8B63 72%, rgba(11,139,99,0) 100%);
  opacity: .9; pointer-events: none; }

/* brand */
.site-head .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.site-head .brand .mark { display: inline-flex; transition: transform .22s cubic-bezier(.22,1,.36,1); }
.site-head .brand:hover .mark { transform: scale(1.06) rotate(-3deg); }
.site-head .brand .word { font: 800 21px/1 var(--display, var(--sans)); letter-spacing: -.03em; color: #0B1220; }
.site-head .brand .word em { font-style: normal; color: #1F5BFF; }
.site-head .brand .word i { font-style: normal; font-family: var(--mono); font-size: 14.5px; font-weight: 700;
  color: #52607A; margin-left: 1px; }

/* desktop links */
.site-head .nav { display: flex; align-items: center; gap: 4px; }
.site-head .nav a:not(.sell) { position: relative; color: #1E293B; font: 600 14px/1 var(--sans);
  padding: 9px 13px; border-radius: 10px; text-decoration: none; white-space: nowrap;
  background: none; border: 0;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.site-head .nav a:not(.sell):hover { background: #F1F5FD; color: #1F5BFF; }
.site-head .nav a:not(.sell)[aria-current="page"] { background: #EBF1FF; color: #1F5BFF; font-weight: 700;
  box-shadow: inset 0 0 0 1px #BFDBFE; }

/* CTA */
.site-head .nav a.sell { margin-left: 10px; padding: 11px 19px; border-radius: 11px;
  background: #0A1738; color: #FFFFFF !important; font: 700 14px/1 var(--display, var(--sans));
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 0 #050C1E, 0 8px 18px -8px rgba(10,23,56,.55);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.site-head .nav a.sell:hover { background: #1F5BFF; color: #FFFFFF !important; transform: translateY(-1px);
  box-shadow: 0 3px 0 #0F3299, 0 12px 22px -8px rgba(31,91,255,.5); }

/* mobile menu */
.site-head details.menu { display: none; position: relative; }
.site-head details.menu summary { list-style: none; cursor: pointer; padding: 9px 14px; border-radius: 10px;
  background: #F1F5FD; border: 1px solid #D5E0F2; font: 700 13.5px/1 var(--sans); color: #0B1220; }
.site-head details.menu summary::-webkit-details-marker { display: none; }
.site-head details.menu .panel { position: absolute; right: 0; top: calc(100% + 12px); width: min(260px, calc(100vw - 36px));
  max-height: min(70vh, 460px); overflow-y: auto; background: #FFFFFF; border: 1.5px solid #D5E0F2;
  border-radius: 16px; padding: 10px; box-shadow: 0 20px 44px -12px rgba(7,18,46,.28);
  display: flex; flex-direction: column; gap: 2px; z-index: 200; }
.site-head details.menu .panel a { padding: 9px 12px; border-radius: 9px; font: 600 13.5px/1.2 var(--sans);
  color: #1E293B; text-decoration: none; }
.site-head details.menu .panel a:hover { background: #EBF1FF; color: #1F5BFF; }

@media (max-width: 980px) {
  .site-head .nav { display: none; }
  .site-head details.menu { display: block; }
  header.site-head > .wrap { height: 62px; }
}
@media (max-width: 480px) {
  .site-head .brand .word { font-size: 19px; }
  header.site-head > .wrap { padding: 0 14px; }
}