/* NexVerto spatial depth layer
   Quiet technical texture for wide screens; no layout or content changes. */

@media (min-width: 881px) {
  :where(html[data-nv-depth="core"], html[data-nv-depth="industry"]) {
    --nv-depth-line: rgba(93, 143, 219, .052);
    --nv-depth-dot: rgba(120, 163, 228, .18);
    --nv-depth-rail: rgba(104, 151, 222, .085);
    --nv-depth-inset: max(18px, calc(max(4vw, (100vw - 1200px) / 2) - 28px)); /* 28px into the margin: rails must frame text, never touch it (sat flush on text-left at every width; found 2026-07-23) */
  }

  :where(html[data-nv-depth="core"], html[data-nv-depth="industry"]) .atmo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle, var(--nv-depth-dot) .65px, transparent .9px),
      linear-gradient(var(--nv-depth-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--nv-depth-line) 1px, transparent 1px);
    background-position: 0 0, 0 0, 0 0;
    background-size: 24px 24px, 96px 96px, 96px 96px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.28) 32%, rgba(0,0,0,.58) 72%, rgba(0,0,0,.24));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.28) 32%, rgba(0,0,0,.58) 72%, rgba(0,0,0,.24));
  }

  html[data-nv-depth="core"] .hero {
    background-image:
      radial-gradient(circle 360px at 78% 50%,
        transparent 0 38%,
        rgba(75, 131, 214, .075) 38.2% 38.45%,
        transparent 38.7% 61%,
        rgba(75, 131, 214, .052) 61.2% 61.45%,
        transparent 61.7% 82%,
        rgba(75, 131, 214, .035) 82.2% 82.45%,
        transparent 82.7%),
      none;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  :where(html[data-nv-depth="core"], html[data-nv-depth="industry"]) main > section.band {
    background-image:
      repeating-linear-gradient(135deg, rgba(103, 148, 218, .025) 0 1px, transparent 1px 13px),
      radial-gradient(ellipse 54% 80% at 88% 50%, rgba(16, 79, 182, .065), transparent 72%);
    background-position: 0 0, 0 0;
    background-repeat: repeat, no-repeat;
    background-size: 13px 13px, 100% 100%;
  }

  html[data-theme="light"]:where([data-nv-depth="core"], [data-nv-depth="industry"]) {
    --nv-depth-line: rgba(16, 79, 182, .045);
    --nv-depth-dot: rgba(16, 79, 182, .14);
    --nv-depth-rail: rgba(16, 79, 182, .09);
  }
}

@media (min-width: 761px) {
  html[data-nv-depth="directory"] body {
    background-image:
      radial-gradient(760px 520px at 84% 4%, rgba(16,79,182,.13), transparent 66%),
      radial-gradient(620px 520px at -10% 85%, rgba(16,79,182,.055), transparent 68%),
      radial-gradient(circle, rgba(120,163,228,.16) .65px, transparent .9px),
      linear-gradient(rgba(93,143,219,.046) 1px, transparent 1px),
      linear-gradient(90deg, rgba(93,143,219,.046) 1px, transparent 1px);
    background-position: 0 0;
    background-size: auto, auto, 24px 24px, 96px 96px, 96px 96px;
  }

  html[data-nv-depth="directory"] .list {
    position: relative;
    isolation: isolate;
  }

}

@media (max-width: 880px), (prefers-reduced-transparency: reduce) {
  :where(html[data-nv-depth="core"], html[data-nv-depth="industry"]) .atmo::before {
    display: none;
  }
}

/* ── Fail-visible gate: pages bake .rv{opacity:0}; if boot JS never ran,
   show everything (content > choreography). nv-js is set pre-paint by
   /js/cbpn-theme-boot.js. ── */
html:not(.nv-js) .rv { opacity: 1 !important; transform: none !important; }