body { font-family: 'Inter', sans-serif; }
        .font-serif { font-family: 'Playfair Display', serif; }
        
        /* Updated animations and color scheme to match the reference design */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(20, 184, 166, 0.3); }
            50% { box-shadow: 0 0 40px rgba(20, 184, 166, 0.6); }
        }
        
        @keyframes rotate-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes bounce-in {
            0% { transform: scale(0) rotate(0deg); opacity: 0; }
            50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
            100% { transform: scale(1) rotate(360deg); opacity: 1; }
        }
        
        @keyframes slide-in-left {
            0% { transform: translateX(-100px); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes slide-in-right {
            0% { transform: translateX(100px); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes fade-in-up {
            0% { transform: translateY(30px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        
        .animate-float { animation: float 6s ease-in-out infinite; }
        .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
        .animate-rotate-slow { animation: rotate-slow 20s linear infinite; }
        .animate-bounce-in { animation: bounce-in 1s ease-out; }
        .animate-slide-in-left { animation: slide-in-left 1s ease-out; }
        .animate-slide-in-right { animation: slide-in-right 1s ease-out; }
        .animate-fade-in-up { animation: fade-in-up 1s ease-out; }
        
        /* Staggered animations */
        .animate-delay-100 { animation-delay: 0.1s; }
        .animate-delay-200 { animation-delay: 0.2s; }
        .animate-delay-300 { animation-delay: 0.3s; }
        .animate-delay-500 { animation-delay: 0.5s; }
        .animate-delay-700 { animation-delay: 0.7s; }
        .animate-delay-1000 { animation-delay: 1s; }
        
        /* Hero background elements */
        .hero-bg-element {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(45deg, rgba(20, 184, 166, 0.1), rgba(59, 130, 246, 0.1));
            animation: float 8s ease-in-out infinite;
        }
        
        .hero-bg-element:nth-child(odd) {
            animation-direction: reverse;
            animation-duration: 12s;
        }

        /* Progress bar animation */
        @keyframes progress-fill {
            from { width: 0%; }
            to { width: var(--progress-width); }
        }
        
        .progress-bar {
            animation: progress-fill 2s ease-out forwards;
        }

        /* Enhanced responsive design for all devices */
        @media (max-width: 320px) {
            .container { padding-left: 1rem; padding-right: 1rem; }
            h1 { font-size: 1.75rem; }
            h2 { font-size: 1.5rem; }
        }
        
        @media (min-width: 321px) and (max-width: 375px) {
            .container { padding-left: 1.25rem; padding-right: 1.25rem; }
        }
        
        @media (min-width: 376px) and (max-width: 414px) {
            .container { padding-left: 1.5rem; padding-right: 1.5rem; }
        }
        
        @media (min-width: 768px) and (max-width: 1024px) {
            .container { max-width: 100%; padding-left: 2rem; padding-right: 2rem; }
        }
        
        @media (min-width: 1024px) and (max-width: 1280px) {
            .container { max-width: 1024px; }
        }
        
        @media (min-width: 1280px) and (max-width: 1440px) {
            .container { max-width: 1280px; }
        }
        
        @media (min-width: 1440px) and (max-width: 1920px) {
            .container { max-width: 1440px; }
        }
        
        @media (min-width: 1920px) {
            .container { max-width: 1600px; }
        }

        /* MacBook specific optimizations */
        @media (min-width: 1280px) and (max-width: 1440px) and (-webkit-min-device-pixel-ratio: 2) {
            body { font-size: 16px; }
            .text-sm { font-size: 0.9rem; }
        }
        
        /* MacBook Pro optimizations */
        @media (min-width: 1440px) and (max-width: 1680px) and (-webkit-min-device-pixel-ratio: 2) {
            .container { max-width: 1400px; }
        }
       .progress-bar {
           animation: progress-fill 2s ease-out forwards;
           animation-fill-mode: forwards; 
        }