.material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .bg-industrial-overlay {
      background: linear-gradient(to right, rgba(18, 20, 22, 0.95) 30%, rgba(18, 20, 22, 0.4) 100%);
    }

    .bronze-gradient {
      background: linear-gradient(135deg, #e3c197 0%, #aa8c65 100%);
    }

    .bg-x-glow {
      background-color: #000000;
      background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(120, 180, 255, 0.25), transparent 70%),
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: auto, 14px 14px, 14px 14px;
    }

    /* Modern CTA Animations */
    .cta-modern {
      position: relative;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .cta-modern::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent);
      transition: all 0.6s;
    }

    .cta-modern:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

    .cta-modern:hover::after {
      left: 100%;
    }

    .cta-modern:active {
      transform: translateY(-1px) scale(0.98);
    }

    /* Unique Contact Button Animation (Matched to Hero CTA) */
    .cta-contact {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #b68150 0%, #AE8B61 50%, #b68150 100%) !important;
      background-size: 200% auto !important;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
      box-shadow: 0 4px 15px rgba(182, 129, 80, 0.3) !important;
    }

    .cta-contact::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent);
      transition: all 0.6s !important;
    }

    .cta-contact:hover {
      background-position: right center !important;
      transform: translateY(-3px) scale(1.05) !important;
      box-shadow: 0 15px 30px rgba(182, 129, 80, 0.4) !important;
    }

    .cta-contact:hover::after {
      left: 100%;
    }

    /* ----- Circular Play Button ----- */
    .btn-play-circle {
      position: relative;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    @keyframes btn-sonar {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }

      100% {
        transform: scale(1.6);
        opacity: 0;
      }
    }

    @keyframes btn-rotate-hud {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes btn-pulse-glow {

      0%,
      100% {
        opacity: 0.4;
        transform: scale(1);
      }

      50% {
        opacity: 0.8;
        transform: scale(1.1);
      }
    }

    .animate-bounce-slow {
      animation: bounce 3s infinite;
    }

    @keyframes spin-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }