/* =========================================================
   static diagonal grid overlay
   - not animated
   - thin lines
   - mostly transparent, but still visible
   - gradient underneath remains visible
   ========================================================= */

body{
  position: relative;
  overflow-x: hidden;
}

/* overlay sits behind content but above your base gradient */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  /* two diagonal directions = grid */
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.08) 1px,
      transparent 1px,
      transparent 22px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.06) 1px,
      transparent 1px,
      transparent 22px
    );

  /* keep it subtle */
  opacity: 0.8;
}