body {
    font-family: 'Outfit', sans-serif;
    background: #ffffff;
    color: #1a1a1a;
    scroll-behavior: smooth;
  }

  .serif { font-family: 'Playfair Display', serif; }

  /* PRELOADER EXIT */
        #preloader {
            transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s;
        }
        #preloader.fade-out {
            opacity: 0;
            visibility: hidden;
        }
        body.loading { overflow: hidden; }
        
  /* Advanced Reveal Animations */
  .reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }

  /* Enhanced Mobile Menu */
  #mobile-menu {
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    transform: translateY(-100%);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  #mobile-menu.open { transform: translateY(0); }

  #scroll-top {
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
  }

  #scroll-top.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Dynamic Tech Cards */
  .tech-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #f1f5f9;
  }
  
  .tech-card:hover {
    transform: translateY(-12px);
color: black;
  }

/* Hover states for the Ecosystem Grid */
  .ecosystem-card {
    transition: all 0.4s ease;
  }
  .ecosystem-card:hover {
    background-color: white !important;
  }

  .card-azure:hover { box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15); border-color: #3b82f6; }
  .card-salesforce:hover { box-shadow: 0 20px 40px rgba(56, 182, 255, 0.15); border-color: #38b6ff; }
  .card-aws:hover { box-shadow: 0 20px 40px rgba(255, 153, 0, 0.15); border-color: #ff9900; }
  .card-service:hover { box-shadow: 0 20px 40px rgba(34, 197, 94, 0.15); border-color: #22c55e; }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  .animate-float { animation: float 4s ease-in-out infinite; }

  /* Strategic Staggered Delays for Process Steps */
  .step-delay-1 { transition-delay: 200ms; }
  .step-delay-2 { transition-delay: 500ms; }
  .step-delay-3 { transition-delay: 800ms; }
  .step-delay-4 { transition-delay: 1100ms; }

  /* Staggering delays for lists */
  .stagger-1 { transition-delay: 100ms; }
  .stagger-2 { transition-delay: 200ms; }
  .stagger-3 { transition-delay: 300ms; }
  .stagger-4 { transition-delay: 400ms; }