/* ================= 3D / 4D GLASSMORPHISM & CUSTOM THEME STYLES ================= */
        :root {
            --dhl-yellow: #FFCC00;
            --dhl-red: #D40511;
            --dhl-brown: #2A1400;
        }

        body {
            perspective: 1200px;
        }

        /* SEO Keyword Highlight Badge */
        .seo-highlight {
            background: linear-gradient(120deg, rgba(255, 204, 0, 0.35) 0%, rgba(255, 204, 0, 0.8) 100%);
            color: #1C0D02;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 6px;
            border-bottom: 2px solid #D40511;
            display: inline-block;
            box-shadow: 0 2px 6px rgba(255, 204, 0, 0.2);
        }
        .dark .seo-highlight {
            color: #FFE57F;
            background: linear-gradient(120deg, rgba(212, 5, 17, 0.5) 0%, rgba(255, 204, 0, 0.4) 100%);
            border-bottom: 2px solid #FFCC00;
        }

        /* 4D Glassmorphism Cards */
        .card-4d {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.82) 100%);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 204, 0, 0.4);
            box-shadow: 0 20px 40px -15px rgba(42, 20, 0, 0.12), 0 0 15px rgba(255, 204, 0, 0.15);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
        }
        .card-4d:hover {
            transform: translateY(-8px) scale(1.02) rotateX(2deg) rotateY(-2deg);
            box-shadow: 0 30px 60px -20px rgba(212, 5, 17, 0.3), 0 0 30px rgba(255, 204, 0, 0.4);
            border-color: rgba(212, 5, 17, 0.7);
        }
        .dark .card-4d {
            background: linear-gradient(135deg, rgba(45, 21, 0, 0.9) 0%, rgba(28, 13, 2, 0.95) 100%);
            border: 1px solid rgba(255, 204, 0, 0.25);
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
        }

        /* Glass Panel Header & Modals */
        .glass-panel-3d {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 248, 225, 0.9) 100%);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 204, 0, 0.8);
            box-shadow: 0 25px 50px -12px rgba(212, 5, 17, 0.35);
        }
        .dark .glass-panel-3d {
            background: linear-gradient(135deg, rgba(28, 13, 2, 0.96) 0%, rgba(15, 7, 1, 0.98) 100%);
            border: 2px solid rgba(255, 204, 0, 0.4);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
        }

        /* Glowing Gradient Text */
        .gradient-text-dhl {
            background: linear-gradient(135deg, #D40511 0%, #FF8800 50%, #FFCC00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Colored 3D Icon Drop Shadows */
        .icon-3d-red {
            filter: drop-shadow(0 10px 15px rgba(212, 5, 17, 0.4)) drop-shadow(0 0 10px rgba(255, 204, 0, 0.3));
            transition: transform 0.3s ease;
        }
        .icon-3d-yellow {
            filter: drop-shadow(0 10px 15px rgba(255, 204, 0, 0.5)) drop-shadow(0 0 8px rgba(212, 5, 17, 0.3));
            transition: transform 0.3s ease;
        }
        .group:hover .icon-3d-red, .group:hover .icon-3d-yellow {
            transform: translateY(-5px) scale(1.15) rotate(4deg);
        }

        /* Testimonials Carousel Track */
        @keyframes scrollRightToLeft {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .dhl-track {
            display: flex;
            width: max-content;
            animation: scrollRightToLeft 45s linear infinite;
        }
        .dhl-track:hover {
            animation-play-state: paused;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #1C0D02; }
        ::-webkit-scrollbar-thumb { background: linear-gradient(#D40511, #FFCC00); border-radius: 4px; }
    


  /* 3D Glassmorphism Header Effects */
  .header-glass {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 2px solid rgba(255, 204, 0, 0.6);
      box-shadow: 0 10px 30px -10px rgba(42, 20, 0, 0.12);
  }
  .dark .header-glass {
      background: rgba(28, 13, 2, 0.95);
      border-bottom: 2px solid rgba(255, 204, 0, 0.3);
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
  }

  /* Mega Menu Glass Box */
  .mega-menu-box {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 248, 225, 0.95) 100%);
      backdrop-filter: blur(20px);
      border: 2px solid #FFCC00;
      box-shadow: 0 25px 50px -12px rgba(212, 5, 17, 0.25), 0 0 20px rgba(255, 204, 0, 0.3);
  }
  .dark .mega-menu-box {
      background: linear-gradient(135deg, rgba(28, 13, 2, 0.98) 0%, rgba(15, 7, 1, 0.99) 100%);
      border: 2px solid rgba(255, 204, 0, 0.4);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
  }

  /* Clickable Nav Link Pill */
  .nav-pill-link {
      position: relative;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .nav-pill-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 50%;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, #D40511, #FFCC00);
      border-radius: 4px;
      transition: all 0.3s ease;
      transform: translateX(-50%);
  }
  .nav-pill-link:hover::after, .nav-pill-link.active-link::after {
      width: 80%;
  }

  /* 3D Icon Glow */
  .icon-3d-red {
      filter: drop-shadow(0 6px 10px rgba(212, 5, 17, 0.35));
  }



        .seo-highlight {
            background: linear-gradient(120deg, rgba(255, 204, 0, 0.35) 0%, rgba(255, 204, 0, 0.8) 100%);
            color: #1C0D02;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 6px;
            border-bottom: 2px solid #D40511;
            display: inline-block;
        }
        .dark .seo-highlight {
            color: #FFE57F;
            background: linear-gradient(120deg, rgba(212, 5, 17, 0.5) 0%, rgba(255, 204, 0, 0.4) 100%);
            border-bottom: 2px solid #FFCC00;
        }
        .card-4d {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.82) 100%);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 204, 0, 0.4);
            box-shadow: 0 20px 40px -15px rgba(42, 20, 0, 0.12), 0 0 15px rgba(255, 204, 0, 0.15);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
        }
        .card-4d:hover {
            transform: translateY(-8px) scale(1.02) rotateX(2deg) rotateY(-2deg);
            box-shadow: 0 30px 60px -20px rgba(212, 5, 17, 0.3), 0 0 30px rgba(255, 204, 0, 0.4);
            border-color: rgba(212, 5, 17, 0.7);
        }
        .dark .card-4d {
            background: linear-gradient(135deg, rgba(45, 21, 0, 0.9) 0%, rgba(28, 13, 2, 0.95) 100%);
            border: 1px solid rgba(255, 204, 0, 0.25);
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
        }
        .icon-3d-red {
            filter: drop-shadow(0 10px 15px rgba(212, 5, 17, 0.4)) drop-shadow(0 0 10px rgba(255, 204, 0, 0.3));
            transition: transform 0.3s ease;
        }
        .icon-3d-yellow {
            filter: drop-shadow(0 10px 15px rgba(255, 204, 0, 0.5)) drop-shadow(0 0 8px rgba(212, 5, 17, 0.3));
            transition: transform 0.3s ease;
        }
        .group:hover .icon-3d-red, .group:hover .icon-3d-yellow {
            transform: translateY(-5px) scale(1.15) rotate(4deg);
        }
    


        .seo-highlight {
            background: linear-gradient(120deg, rgba(255, 204, 0, 0.35) 0%, rgba(255, 204, 0, 0.8) 100%);
            color: #1C0D02;
            font-weight: 800;
            padding: 2px 7px;
            border-radius: 6px;
            border-bottom: 2px solid #D40511;
            display: inline-block;
        }
        .dark .seo-highlight {
            color: #FFE57F;
            background: linear-gradient(120deg, rgba(212, 5, 17, 0.5) 0%, rgba(255, 204, 0, 0.4) 100%);
            border-bottom: 2px solid #FFCC00;
        }

        /* 4D Glassmorphism Cards */
        .card-testimonial-4d {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.85) 100%);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 204, 0, 0.4);
            box-shadow: 0 15px 35px -10px rgba(42, 20, 0, 0.12), 0 0 15px rgba(255, 204, 0, 0.15);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
            flex-shrink: 0;
        }
        .card-testimonial-4d:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 50px -12px rgba(212, 5, 17, 0.3), 0 0 25px rgba(255, 204, 0, 0.4);
            border-color: rgba(212, 5, 17, 0.7);
        }
        .dark .card-testimonial-4d {
            background: linear-gradient(135deg, rgba(45, 21, 0, 0.92) 0%, rgba(28, 13, 2, 0.96) 100%);
            border: 1px solid rgba(255, 204, 0, 0.25);
            box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6);
        }

        /* Auto-Swipe Infinite Animations */
        @keyframes autoSwipeLeft {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        @keyframes autoSwipeRight {
            0% { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }

        .auto-swipe-track-left {
            display: flex;
            width: max-content;
            animation: autoSwipeLeft 55s linear infinite;
            will-change: transform;
        }
        .auto-swipe-track-right {
            display: flex;
            width: max-content;
            animation: autoSwipeRight 55s linear infinite;
            will-change: transform;
        }

        /* Pause animation on hover for easy reading */
        .auto-swipe-container:hover .auto-swipe-track-left,
        .auto-swipe-container:hover .auto-swipe-track-right {
            animation-play-state: paused;
        }
    


      .seo-highlight {
          background: linear-gradient(120deg, rgba(255, 204, 0, 0.35) 0%, rgba(255, 204, 0, 0.8) 100%);
          color: #1C0D02;
          font-weight: 800;
          padding: 2px 7px;
          border-radius: 6px;
          border-bottom: 2px solid #D40511;
          display: inline-block;
      }
      .dark .seo-highlight {
          color: #FFE57F;
          background: linear-gradient(120deg, rgba(212, 5, 17, 0.5) 0%, rgba(255, 204, 0, 0.4) 100%);
          border-bottom: 2px solid #FFCC00;
      }

      /* 4D Glassmorphism Accordion Card */
      .card-faq-4d {
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.85) 100%);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border: 1px solid rgba(255, 204, 0, 0.4);
          box-shadow: 0 15px 30px -10px rgba(42, 20, 0, 0.1), 0 0 12px rgba(255, 204, 0, 0.12);
          transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .card-faq-4d:hover {
          box-shadow: 0 20px 45px -12px rgba(212, 5, 17, 0.25), 0 0 25px rgba(255, 204, 0, 0.35);
          border-color: rgba(212, 5, 17, 0.6);
          transform: translateY(-2px);
      }
      .dark .card-faq-4d {
          background: linear-gradient(135deg, rgba(45, 21, 0, 0.92) 0%, rgba(28, 13, 2, 0.96) 100%);
          border: 1px solid rgba(255, 204, 0, 0.25);
          box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6);
      }

      /* Active Accordion Card Highlight */
      .faq-active-card {
          border-color: #D40511 !important;
          box-shadow: 0 20px 40px -10px rgba(212, 5, 17, 0.3), 0 0 20px rgba(255, 204, 0, 0.4) !important;
      }
      .dark .faq-active-card {
          border-color: #FFCC00 !important;
      }

      /* 3D Icon Glow */
      .icon-3d-red {
          filter: drop-shadow(0 8px 12px rgba(212, 5, 17, 0.4)) drop-shadow(0 0 8px rgba(255, 204, 0, 0.3));
          transition: transform 0.3s ease;
      }
      .icon-3d-yellow {
          filter: drop-shadow(0 8px 12px rgba(255, 204, 0, 0.5)) drop-shadow(0 0 6px rgba(212, 5, 17, 0.3));
          transition: transform 0.3s ease;
      }
      .faq-item-btn:hover .icon-3d-red, .faq-item-btn:hover .icon-3d-yellow {
          transform: scale(1.15) rotate(5deg);
      }
  

/* ===== Production hardening / accessibility ===== */
html { scroll-padding-top: 7rem; }
.quote-form-status.is-success { display:block; color:#047857; }
.quote-form-status.is-error { display:block; color:#b91c1c; }
body.modal-open { overflow:hidden; }
.auto-swipe-track-left,
.auto-swipe-track-right { animation:none !important; display:flex; width:max-content; gap:1.5rem; will-change:transform; }
.testimonial-loop-set { display:flex; gap:1.5rem; flex-shrink:0; }
.auto-swipe-track-left.loop-ready { animation:testimonialsLoopLeft 55s linear infinite !important; }
.auto-swipe-track-right.loop-ready { animation:testimonialsLoopRight 55s linear infinite !important; transform:translateX(calc(-1 * var(--loop-shift, 0px))); }
@keyframes testimonialsLoopLeft {
  from { transform:translateX(0); }
  to { transform:translateX(calc(-1 * var(--loop-shift, 0px))); }
}
@keyframes testimonialsLoopRight {
  from { transform:translateX(calc(-1 * var(--loop-shift, 0px))); }
  to { transform:translateX(0); }
}
.auto-swipe-container:hover .auto-swipe-track-left,
.auto-swipe-container:hover .auto-swipe-track-right { animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:0.01ms !important; animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
  .auto-swipe-track-left, .auto-swipe-track-right { transform:none !important; overflow-x:auto; width:100%; }
}
@media (max-width: 640px) {
  .card-4d:hover, .card-testimonial-4d:hover { transform:none; }
}