html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      overflow-x: hidden;
    }

    .gradient-gold {
      background: linear-gradient(135deg, #D4A024 0%, #B8860B 100%);
    }

    .text-gradient {
      background: linear-gradient(135deg, #D4A024 0%, #F5DEB3 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hover-lift {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px -8px rgba(212, 160, 36, 0.3);
    }

    /* ========== Animation Styles ========== */

    /* Fade in up animation */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Fade in left */
    .animate-fade-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .animate-fade-left.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* Fade in right */
    .animate-fade-right {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .animate-fade-right.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* Scale in animation */
    .animate-scale {
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .animate-scale.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Stagger delay classes */
    .delay-100 {
      transition-delay: 100ms;
    }

    .delay-200 {
      transition-delay: 200ms;
    }

    .delay-300 {
      transition-delay: 300ms;
    }

    .delay-400 {
      transition-delay: 400ms;
    }

    .delay-500 {
      transition-delay: 500ms;
    }

    .delay-600 {
      transition-delay: 600ms;
    }

    /* Hero animations */
    .hero-badge {
      animation: slideDown 0.6s ease-out 0.2s both;
    }

    .hero-title {
      animation: slideUp 0.8s ease-out 0.3s both;
    }

    .hero-title-2 {
      animation: slideUp 0.8s ease-out 0.5s both;
    }

    .hero-desc {
      animation: fadeIn 0.8s ease-out 0.7s both;
    }

    .hero-cta {
      animation: slideUp 0.6s ease-out 0.9s both;
    }

    .hero-trust {
      animation: fadeIn 0.6s ease-out 1.1s both;
    }

    .hero-image {
      animation: scaleIn 0.8s ease-out 0.4s both;
    }

    .hero-float-card {
      animation: floatIn 0.6s ease-out 1s both;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }

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

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

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

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes floatIn {
      from {
        opacity: 0;
        transform: translateY(20px) translateX(-20px);
      }

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

    /* Floating animation for cards */
    .float-animation {
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {

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

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

    /* Pulse animation for CTA */
    .pulse-gold {
      animation: pulseGold 2s ease-in-out infinite;
    }

    @keyframes pulseGold {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(212, 160, 36, 0.4);
      }

      50% {
        box-shadow: 0 0 0 15px rgba(212, 160, 36, 0);
      }
    }

    /* Number counter animation */
    .counter {
      display: inline-block;
    }

    /* Background blob animation */
    .blob-animate {
      animation: blobMove 8s ease-in-out infinite;
    }

    @keyframes blobMove {

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

      25% {
        transform: translate(20px, -20px) scale(1.05);
      }

      50% {
        transform: translate(-10px, 20px) scale(0.95);
      }

      75% {
        transform: translate(-20px, -10px) scale(1.02);
      }
    }

    /* Shimmer effect for trust logos */
    .shimmer {
      position: relative;
      overflow: hidden;
    }

    .shimmer::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(212, 160, 36, 0.1), transparent);
      animation: shimmer 3s ease-in-out infinite;
    }

    @keyframes shimmer {
      0% {
        left: -100%;
      }

      50%,
      100% {
        left: 100%;
      }
    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .animate-on-scroll,
      .animate-fade-left,
      .animate-fade-right,
      .animate-scale {
        opacity: 1;
        transform: none;
      }
    }