/**
 * Unified KLKBAT page backdrop (same language as home landing: #080808, orange glow, masked grid).
 * Load after /assets/css/brand.css.
 * First body child (after any blocking overlays): <div class="site-bg" aria-hidden="true"></div>
 * Page styles should use body { background: transparent; } so this layer shows through.
 */

html {
  background-color: var(--site-page-bg, #080808);
  min-height: 100%;
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.site-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 520px at 88% 8%, rgba(232, 76, 14, 0.22), transparent 62%),
    radial-gradient(circle 380px at 8% 88%, rgba(232, 76, 14, 0.1), transparent 58%);
}

.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232, 76, 14, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 76, 14, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 15%, transparent 72%);
}