.elementor-kit-4048{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-4048 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===== FLIP CARD STRUCTURE ===== */
  .flip-card {
    position: relative;
    perspective: 1000px;
  }

  .flip-card .flip-front,
  .flip-card .flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    border-radius: 20px;
  }

  .flip-card .flip-back {
    transform: rotateY(180deg);
  }

  .flip-card:hover .flip-front {
    transform: rotateY(-180deg);
  }

  .flip-card:hover .flip-back {
    transform: rotateY(0deg);
  }

  /* Mobile: click-to-flip (no hover on touch) */
  @media (max-width: 768px) {
    .flip-card.flipped .flip-front {
      transform: rotateY(-180deg);
    }
    .flip-card.flipped .flip-back {
      transform: rotateY(0deg);
    }
  }

  /* ===== DISABLE FLIP DURING EDITOR MODE ===== */
  body.elementor-editor-active .flip-card:hover .flip-front,
  body.elementor-editor-active .flip-card:hover .flip-back {
    transform: none !important;
  }

  body.elementor-editor-active .flip-card .flip-back {
    position: relative !important;
    transform: none !important;
    margin-top: 20px;
    opacity: 0.6;
    border: 2px dashed #999;
  }

  /* ===== PSEUDO-ELEMENTS BACKFACE FIX ===== */
  .flip-card .flip-front::before,
  .flip-card .flip-front::after,
  .flip-card .flip-back::before {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  /* ===== BACK: cyan dot grid revealed by mouse ===== */
  .flip-card .flip-back {
    overflow: hidden;
  }

  .flip-card .flip-back::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      circle 1.5px at center,
      rgba(115, 231, 246, 1) 100%,
      transparent 100%
    );
    background-size: 14px 14px;
    filter: drop-shadow(0 0 3px rgba(150, 240, 255, 1))
            drop-shadow(0 0 6px rgba(115, 231, 246, 0.7));
    -webkit-mask-image:
      radial-gradient(circle 35px at calc(var(--mx, 50%) - 8px) calc(var(--my, 50%) - 5px),
  black 100%, transparent 100%),
      radial-gradient(circle 30px at calc(var(--mx, 50%) + 10px) calc(var(--my, 50%) + 8px),
  black 100%, transparent 100%),
      radial-gradient(circle 28px at calc(var(--mx, 50%) + 5px) calc(var(--my, 50%) - 12px),
  black 100%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image:
      radial-gradient(circle 35px at calc(var(--mx, 50%) - 8px) calc(var(--my, 50%) - 5px),
  black 100%, transparent 100%),
      radial-gradient(circle 30px at calc(var(--mx, 50%) + 10px) calc(var(--my, 50%) + 8px),
  black 100%, transparent 100%),
      radial-gradient(circle 28px at calc(var(--mx, 50%) + 5px) calc(var(--my, 50%) - 12px),
  black 100%, transparent 100%);
    mask-composite: add;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 2;
  }

  .flip-card:hover .flip-back::before {
    opacity: 1;
  }

  /* ===== FRONT: white data packets zipping across ===== */
  .flip-card .flip-front {
    overflow: hidden;
  }

  .flip-card .flip-front::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    background-image:
      linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.04) 55%,
        rgba(255,255,255,0.18) 78%,
        rgba(255,255,255,0.55) 92%,
        #fff 97%,
        transparent 100%),
      linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.04) 60%,
        rgba(255,255,255,0.20) 82%,
        rgba(255,255,255,0.60) 94%,
        #fff 98%,
        transparent 100%);
    background-size: 70px 2px, 90px 2px;
    background-position: -70px 22%, -90px 68%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.9))
            drop-shadow(0 0 5px rgba(255,255,255,0.5));
    animation: data-packet-fast 3s linear infinite;
  }

  .flip-card .flip-front::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    background-image:
      linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.04) 50%,
        rgba(255,255,255,0.16) 75%,
        rgba(255,255,255,0.55) 90%,
        #fff 97%,
        transparent 100%),
      linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.05) 58%,
        rgba(255,255,255,0.20) 80%,
        rgba(255,255,255,0.60) 93%,
        #fff 98%,
        transparent 100%);
    background-size: 110px 2px, 55px 2px;
    background-position: -110px 41%, -55px 85%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.9))
            drop-shadow(0 0 5px rgba(255,255,255,0.5));
    animation: data-packet-slow 5.5s linear infinite;
    animation-delay: -1.8s;
  }

  @keyframes data-packet-fast {
    0%   { background-position: -70px 22%, -90px 68%; }
    100% { background-position: calc(100% + 70px) 22%, calc(100% + 90px) 68%; }
  }

  @keyframes data-packet-slow {
    0%   { background-position: -110px 41%, -55px 85%; }
    100% { background-position: calc(100% + 110px) 41%, calc(100% + 55px) 85%; }
  }

  Also paste this JS (separately)

  Drop a Custom HTML widget at the bottom of Shield Home page with this script:

  <script>
  // Mouse tracking for cyan dot grid
  document.querySelectorAll('.flip-card .flip-back').forEach(back => {
    back.addEventListener('mousemove', (e) => {
      const rect = back.getBoundingClientRect();
      const x = ((e.clientX - rect.left) / rect.width) * 100;
      const y = ((e.clientY - rect.top) / rect.height) * 100;
      back.style.setProperty('--mx', x + '%');
      back.style.setProperty('--my', y + '%');
    });
  });

  // Mobile click-to-flip
  document.querySelectorAll('.flip-card').forEach(card => {
    card.addEventListener('click', () => {
      if (window.innerWidth <= 768) {
        card.classList.toggle('flipped');
      }
    });
  });
  </script>/* End custom CSS */