/* =========================================================
   FULL-PAGE PARTICLE BACKGROUND
   ========================================================= */

html,
body{
  min-height:100%;
}

body{
  position:relative;
  isolation:isolate;
}

/* Canvas now sits ABOVE the page background but BELOW content. */
#networkCanvas{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:0 !important;
  opacity:.90 !important;
  pointer-events:none !important;
  mix-blend-mode:screen;
}

/* Keep the website content above the particles. */
.site-header,
.mobile-nav,
main,
footer,
.floating-whatsapp,
.back-top{
  position:relative;
  z-index:1;
}

/* Header keeps its existing stronger z-index. */
.site-header{
  z-index:99999 !important;
}

/* Softer cursor halo that works together with the particle network. */
.cursor-glow{
  z-index:0 !important;
  width:360px !important;
  height:360px !important;
  opacity:.75;
  background:
    radial-gradient(
      circle,
      rgba(42,226,255,.10) 0%,
      rgba(82,120,255,.055) 32%,
      transparent 68%
    ) !important;
  filter:blur(2px);
}

/* Let section backgrounds remain readable while showing particles through them. */
.section{
  background:
    linear-gradient(
      180deg,
      rgba(2,10,24,.05),
      rgba(2,10,24,.02)
    );
}

/* Mobile: slightly softer particle layer for readability/performance. */
@media(max-width:767px){
  #networkCanvas{
    opacity:.70 !important;
  }

  .cursor-glow{
    display:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #networkCanvas{
    opacity:.55 !important;
  }
}