/* The one site header (header.html). Measurements follow the landing page's original bar:
   80px tall, up to 1380px wide, Sora brand at 28px with a 37px mark, Geist links at 14px, the mint CTA. */
.site-header {
  position: sticky; top: 0; z-index: 90;
  height: 80px;
  background: #0b0b14e8;
  border-bottom: 1px solid #ffffff16;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  font-family: "Geist", system-ui, sans-serif;
  color: #f4f3fa;
}
.site-nav {
  width: min(1380px, 100% - 56px); height: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: 36px;
}
.site-brand {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  font: 700 28px/0.9 "Sora", "Geist", system-ui, sans-serif; letter-spacing: -0.065em; white-space: nowrap;
  color: inherit; text-decoration: none;
}
.site-brand img { width: 37px; height: 37px; object-fit: contain; filter: drop-shadow(0 0 13px #9945ff6b); }
.site-brand small { display: block; margin-top: 5px; font: 8px "Geist Mono", ui-monospace, monospace; letter-spacing: 0.22em; color: #88899e; }
.site-links { display: flex; align-items: center; gap: 24px; }
.site-links a {
  padding: 10px 0; font: 500 14px/1 "Geist", system-ui, sans-serif; color: #b7bfd1; text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}
.site-links a:hover { color: #fff; text-shadow: 0 0 18px #14f19575; }
.site-links a[aria-current="page"] { color: #f4f3fa; }
.site-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-header button.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border: 1px solid #33334a; border-radius: 999px; background: #0f0f1c;
  font: 11px "Geist Mono", ui-monospace, monospace; color: #b7bfd1; cursor: pointer;
  margin: 0; box-shadow: none; transform: none; transition: border-color 0.2s;
}
.site-header button.chip:hover { border-color: #14f195; }
.site-header .chip i { width: 7px; height: 7px; border-radius: 50%; background: #5c6471; }
.site-header .chip.on i { background: #14f195; box-shadow: 0 0 10px #14f19580; }
/* The menu (12 October): Holdings and Rewards at every width; below 760px the main links join them. */
.site-header button.site-menu, .site-header button.site-menu:hover {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0 10px; border: 1px solid #33334a; border-radius: 999px;
  align-items: stretch; background: #0f0f1c; color: #f4f3fa; box-shadow: none; transform: none; cursor: pointer;
}
.site-header button.site-menu:hover { border-color: #14f195; }
.site-menu span { display: block; width: 18px; height: 1.5px; flex: none; background: #f4f3fa; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.site-header.is-open .site-menu span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header.is-open .site-menu span:nth-child(2) { opacity: 0; }
.site-header.is-open .site-menu span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.site-mobile {
  display: flex; flex-direction: column; gap: 4px;
  position: absolute; top: calc(100% - 6px); right: max(28px, calc((100% - 1380px) / 2)); width: 300px;
  padding: 8px; background: #0f0f1c; border: 1px solid #33334a; border-radius: 14px; box-shadow: 0 18px 40px #00000080;
}
.site-mobile[hidden] { display: none; }
.site-menu-item { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; color: #f4f3fa; text-decoration: none; }
.site-menu-item:hover, .site-menu-item[aria-current="page"] { background: #14f19514; }
.site-menu-item b { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 "Geist", system-ui, sans-serif; }
.site-menu-item small { font: 12px/1.3 "Geist", system-ui, sans-serif; color: #88899e; }
#rewards-pill-label { padding: 2px 8px; border-radius: 999px; background: #14f19524; color: #14f195; font: 600 11px "Geist Mono", ui-monospace, monospace; }
.site-mobile .site-narrow { display: none; }
.site-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px;
  font: 650 15px/1.15 "Sora", "Geist", sans-serif; letter-spacing: -0.02em; text-decoration: none;
  color: #14231e; background: #a5f0d7; border: 1px solid #b6ffe630; transition: background 0.2s;
}
.site-cta:hover { background: #c2f7e5; }

/* Below 960px the CTA leaves the bar (the pages have their own launch buttons). */
@media (max-width: 960px) {
  .site-right > .site-cta { display: none; }
  .site-nav { gap: 24px; }
}
/* Below 760px the links move into a sheet behind the menu button. The wallet chips stay in the bar:
   on a phone the visitor is inside a wallet's browser and must be able to connect in one tap. */
@media (max-width: 760px) {
  .site-header { height: 66px; }
  .site-nav { width: min(1380px, 100% - 40px); gap: 16px; }
  .site-brand { font-size: 25px; gap: 8px; }
  .site-brand img { width: 32px; height: 32px; }
  .site-brand small { font-size: 7px; }
  .site-links { display: none; }
  .site-mobile { left: 0; right: 0; top: 100%; width: auto; padding: 12px 20px 20px; background: #0b0b14; border: 0; border-bottom: 1px solid #ffffff16; border-radius: 0; box-shadow: none; }
  .site-mobile .site-narrow { display: block; }
  .site-menu-item { padding: 12px 0; }
  .site-mobile a.site-narrow { padding: 12px 0; font: 500 18px/1.2 "Geist", system-ui, sans-serif; color: #f4f3fa; text-decoration: none; }
  .site-mobile a.site-cta.site-narrow {
    display: flex; margin-top: 10px; padding: 0 18px; justify-content: center; min-height: 52px;
    font: 650 18px/1.15 "Sora", "Geist", sans-serif; letter-spacing: -0.02em; color: #14231e;
  }
}
@media (max-width: 600px) {
  .site-header .chip span { display: none; }
  .site-header .chip { padding: 0 10px; min-width: 40px; justify-content: center; }
  .site-right { gap: 6px; }
}
@media (max-width: 400px) {
  .site-brand { font-size: 20px; }
  .site-brand img { width: 30px; height: 30px; }
  .site-brand small { display: none; }
}