/* Support Hero Brand Colors & Variables */
      :root {
        --vhm-navy: #102A43;
        --vhm-red: #D62828;
        --vhm-orange: #D65A00;
        --vhm-yellow: #FFD60A;
        --vhm-green: #2E7D32;
        --vhm-cream: #FFF7D6;
        --vhm-skyblue: #E3F2FD;
        --vhm-white: #FFFFFF;
      }

      /* Premium Background Grid Pattern */
      .support-bg-pattern {
        background-image:
          radial-gradient(rgba(16, 42, 67, 0.035) 1.5px, transparent 1.5px),
          linear-gradient(to bottom, #f8f9ff, #ffffff);
        background-size: 24px 24px, 100% 100%;
        background-repeat: repeat, no-repeat;
      }

      /* Animations */
      @keyframes float-slow {

        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
        }

        50% {
          transform: translateY(-10px) rotate(0.5deg);
        }
      }

      @keyframes float-med {

        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
        }

        50% {
          transform: translateY(-15px) rotate(-1deg);
        }
      }

      @keyframes float-fast {

        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
        }

        50% {
          transform: translateY(-8px) rotate(1deg);
        }
      }

      @keyframes pulse-glow {

        0%,
        100% {
          box-shadow: 0 0 15px rgba(214, 40, 40, 0.25);
        }

        50% {
          box-shadow: 0 0 25px rgba(214, 40, 40, 0.45);
        }
      }

      @keyframes flow-dash {
        to {
          stroke-dashoffset: -40;
        }
      }

      .animate-float-slow {
        animation: float-slow 6s ease-in-out infinite;
      }

      .animate-float-med {
        animation: float-med 5s ease-in-out infinite;
      }

      .animate-float-fast {
        animation: float-fast 4s ease-in-out infinite;
      }

      .animate-pulse-glow {
        animation: pulse-glow 3s infinite;
      }

      .animate-flow-dash {
        stroke-dasharray: 8, 4;
        animation: flow-dash 2s linear infinite;
      }

      /* Fade-up animations for entry */
      .fade-up-1 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
      }

      .fade-up-2 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
      }

      .fade-up-3 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
      }

      .fade-up-4 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
      }

      /* Staggered Mini-Card Reveals */
      .reveal-card-1 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
      }

      .reveal-card-2 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
      }

      .reveal-card-3 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
      }

      .reveal-card-4 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
      }

      .reveal-card-5 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
      }

      .reveal-card-6 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
      }

      .reveal-card-7 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
      }

      .reveal-card-8 {
        opacity: 0;
        animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
      }

      @keyframes fade-up {
        from {
          opacity: 0;
          transform: translateY(15px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Hover Shine for CTA */
      .cta-shine {
        position: relative;
        overflow: hidden;
      }

      .cta-shine::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -60%;
        width: 30%;
        height: 200%;
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(30deg);
        transition: none;
        pointer-events: none;
      }

      .cta-shine:hover::after {
        left: 150%;
        transition: all 0.8s ease-in-out;
      }

      /* Glassmorphism support elements */
      .glass-card {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(16, 42, 67, 0.08);
      }