:root {
  --pa-ivory: #fbfaf5;
  --pa-ivory-strong: #f6f2e8;
  --pa-blue: #2f67d8;
  --pa-blue-soft: #6f92d7;
  --pa-ink: #171d2b;
  --pa-muted: #667085;
}

html[data-route="/"] body,
html[data-route="/"] #root {
  background: var(--pa-ivory);
}

html[data-route="/"] header {
  background: color-mix(in srgb, var(--pa-ivory) 88%, transparent) !important;
  border-color: rgba(47, 103, 216, 0.09) !important;
  backdrop-filter: blur(18px);
}

html[data-route="/"] section.relative.pt-28 {
  background:
    radial-gradient(circle at 50% 28%, rgba(47, 103, 216, 0.07), transparent 36%),
    var(--pa-ivory);
  min-height: min(820px, 88vh);
}

html[data-route="/"] section.relative.pt-28::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 240px;
  pointer-events: none;
  opacity: 0.16;
  background: url("/assets/polyarbiter-institutional-engraving.png") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 54%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 54%, #000 100%);
}

html[data-route="/"] section.relative.pt-28 > * {
  position: relative;
  z-index: 1;
}

html[data-route="/"] .live-badge {
  display: none !important;
}

html[data-route="/"] section[class*="border-y"][class*="bg-secondary"] {
  display: none !important;
}

html[data-route="/"] section[class*="py-28"] {
  padding-top: 5.75rem !important;
  padding-bottom: 5.75rem !important;
}

html[data-route="/"] section[class*="py-20"] {
  padding-top: 4.75rem !important;
  padding-bottom: 4.75rem !important;
}

html[data-route="/"] section[class*="bg-secondary"] {
  background-color: rgba(47, 103, 216, 0.035) !important;
}

html[data-route="/"] button,
html[data-route="/"] a {
  box-shadow: none !important;
}

html[data-route="/"] footer {
  background:
    linear-gradient(rgba(251, 250, 245, 0.96), rgba(251, 250, 245, 0.99)),
    url("/assets/polyarbiter-institutional-engraving.png") center bottom / cover no-repeat;
}


@media (max-width: 767px) {
  html[data-route="/"] section.relative.pt-28 {
    min-height: auto;
    padding-bottom: 9rem !important;
  }

  html[data-route="/"] section.relative.pt-28::after {
    height: 150px;
    opacity: 0.13;
  }

  html[data-route="/"] section[class*="py-28"],
  html[data-route="/"] section[class*="py-20"] {
    padding-top: 4.25rem !important;
    padding-bottom: 4.25rem !important;
  }
}

/* Brand lockup: always use the transparent PolyArbiter mark (no white square) */
img[src*="polyarbiter-logo"] {
  content: url("/assets/polyarbiter-logo-transparent.png") !important;
  background: transparent !important;
  object-fit: contain !important;
}

/* /auth: white on the dark panel, black on the light lockup */
html[data-route="/auth"] img[src*="polyarbiter-logo"] {
  height: 2rem !important;
  width: 2rem !important;
}

html[data-route="/auth"] img[src*="polyarbiter-logo"].brightness-0.invert {
  filter: brightness(0) invert(1) !important;
}

html[data-route="/auth"] img[src*="polyarbiter-logo"]:not(.invert) {
  filter: brightness(0) !important;
}

/* Header brand lockup: better spacing + optical alignment of the wordmark */
header .flex.items-center.gap-3 > img[src*="polyarbiter-logo"] + span,
nav .flex.items-center.gap-3 > img[src*="polyarbiter-logo"] + span {
  margin-left: 0.375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  line-height: 1 !important;
  position: relative !important;
  top: 0.5px !important;
}

header .flex.items-center.gap-3:has(> img[src*="polyarbiter-logo"]),
nav .flex.items-center.gap-3:has(> img[src*="polyarbiter-logo"]) {
  gap: 0.625rem !important;
}

/* Header nav: perfectly centered links with consistent rhythm */
header .container.flex.items-center.justify-between {
  position: relative !important;
}

header nav.hidden.md\:flex {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  gap: 2.25rem !important;
  align-items: center !important;
}

header nav.hidden.md\:flex > a,
header nav.hidden.md\:flex > div > a {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  padding: 0.25rem 0 !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
}

header nav.hidden.md\:flex > div {
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 1100px) {
  header nav.hidden.md\:flex { gap: 1.5rem !important; }
}