/* "5D" background (steel5d.js adds .s5d + body.has-s5d after load, home page only).
   A row of PEB portal frames behind the page over a steel floor grid; a light veil keeps text readable.
   Sections with a solid fill become slightly see-through so the frames show between them. */
.s5d {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  perspective: 900px; perspective-origin: 50% 38%;
  background: linear-gradient(180deg, #eef2f6 0%, #f8fafc 55%, #e8ecf1 100%);
}
.s5d::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(248, 250, 252, .78), rgba(248, 250, 252, .42) 78%);
}
.s5d-world { position: absolute; left: 50%; top: 64%; width: 0; height: 0; transform-style: preserve-3d; }
.s5d-f {
  position: absolute; left: -620px; top: -690px; width: 1240px; height: 694px; overflow: visible;
  transform-origin: 50% 100%; will-change: transform, opacity;
}
.s5d-m { fill: rgba(28, 31, 35, .2); stroke: rgba(28, 31, 35, .42); stroke-width: 2; stroke-linejoin: round; }
.s5d-k { fill: none; stroke: rgba(28, 31, 35, .3); stroke-width: 3; }
.s5d-r { fill: none; stroke: rgba(217, 162, 27, .85); stroke-width: 6; }
.s5d-f:first-of-type .s5d-m { fill: rgba(28, 31, 35, .14); }
.s5d-floor {
  position: absolute; left: -1800px; top: -1800px; width: 3600px; height: 3600px;
  transform-origin: 50% 50%;
  background:
    repeating-linear-gradient(90deg, rgba(28, 31, 35, .13) 0 2px, transparent 2px 170px),
    repeating-linear-gradient(0deg, rgba(217, 162, 27, .2) 0 2px, transparent 2px 170px);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}

body.has-s5d { background-color: transparent; }
html:has(body.has-s5d) { background-color: #f8fafc; }
body.has-s5d .hero-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(241, 245, 249, .66) 60%, rgba(226, 232, 240, .55) 100%);
}
body.has-s5d .trust-section { background: rgba(248, 250, 252, .7); }

@media (max-width: 767px) {
  .s5d-world { top: 60%; }
  .s5d-f { left: -380px; top: -425px; width: 760px; height: 426px; }
  .s5d::after { background: rgba(248, 250, 252, .62); }
}
@media print { .s5d { display: none !important; } }