.interactive-grid--magnetic {
      --grid-size: 60px;
      --grid-color: #f5d975;
      --grid-background: #e8e7e4;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 600px;
      display: grid;
      place-items: center;
      background: var(--grid-background);
    }

    .interactive-grid--magnetic .grid-glow {
      position: absolute;
      z-index: 0;
      top: -500px;
      left: 50%;
      width: 1800px;
      height: 1100px;
      transform: translateX(-50%);
      pointer-events: none;
      filter: blur(30px);
      background: radial-gradient(ellipse at center,
        hsla(0, 95%, 17%, 0.4) 0%,
        rgba(0, 33, 117, 0.2) 25%,
        rgba(0, 33, 117, 0.05) 50%,
        transparent 75%);
    }

    .interactive-grid--magnetic .grid-lines,
    .interactive-grid--magnetic .grid-pixels {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .interactive-grid--magnetic .grid-lines {
      z-index: 0;
      background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
      background-size: var(--grid-size) var(--grid-size);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
      mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
    }

    .interactive-grid--magnetic .grid-pixels { z-index: 1; }

    .interactive-grid--magnetic .grid-content {
      position: relative;
      z-index: 2;
      padding: 80px 24px;
      text-align: center;
    }

    @media (prefers-reduced-motion: reduce) {
      .interactive-grid--magnetic .grid-pixels { display: none; }
    }