    <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

    * {
        font-family: 'Inter', sans-serif;
    }

    /* Custom animations */
    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    @keyframes blob {
        0% {
            transform: translate(0px, 0px) scale(1);
        }

        33% {
            transform: translate(30px, -50px) scale(1.1);
        }

        66% {
            transform: translate(-20px, 20px) scale(0.9);
        }

        100% {
            transform: translate(0px, 0px) scale(1);
        }
    }

    /* ===== SMOOTH CLICK ANIMATIONS (ADDED ONLY) ===== */
    @keyframes smoothRipple {
        0% {
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
            transform: scale(1);
        }

        30% {
            box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.2);
            transform: scale(0.97);
        }

        70% {
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
            transform: scale(1.02);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
            transform: scale(1);
        }
    }

    @keyframes smoothGlow {
        0% {
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
        }

        40% {
            box-shadow: 0 0 18px 8px rgba(139, 92, 246, 0.3);
        }

        80% {
            box-shadow: 0 0 8px 4px rgba(59, 130, 246, 0.2);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        }
    }

    /* Classes applied on click */
    .nav-click-smooth {
        animation: smoothRipple 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    }

    .theme-click-smooth {
        animation: smoothGlow 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    }

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

    .animate-blob {
        animation: blob 7s infinite;
    }

    .animation-delay-2000 {
        animation-delay: 2s;
    }

    .animation-delay-4000 {
        animation-delay: 4s;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        border-radius: 5px;
    }

    /* Text gradient */
    .text-gradient {
        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* MANUAL DARK MODE STYLES */
    body.dark-mode {
        background-color: #111827 !important;
        color: #f3f4f6 !important;
    }

    body.dark-mode .bg-white {
        background-color: #1f2937 !important;
    }

    body.dark-mode .bg-gray-50 {
        background-color: #1f2937 !important;
    }

    body.dark-mode .text-gray-900 {
        color: #f9fafb !important;
    }

    body.dark-mode .text-gray-700 {
        color: #d1d5db !important;
    }

    body.dark-mode .text-gray-600 {
        color: #9ca3af !important;
    }

    body.dark-mode .border-gray-200 {
        border-color: #374151 !important;
    }

    body.dark-mode .bg-gray-100 {
        background-color: #374151 !important;
    }

    body.dark-mode .bg-gray-200 {
        background-color: #4b5563 !important;
    }

    body.dark-mode .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
    }

    body.dark-mode nav.bg-white {
        background-color: #1f2937 !important;
        border-bottom-color: #374151 !important;
    }

    body.dark-mode .bg-white.rounded-3xl {
        background-color: #1f2937 !important;
    }

    body.dark-mode .bg-gray-50.rounded-2xl {
        background-color: #1f2937 !important;
    }

    body.dark-mode footer.bg-gray-900 {
        background-color: #0f172a !important;
    }

    body.dark-mode input,
    body.dark-mode textarea {
        background-color: #374151 !important;
        border-color: #4b5563 !important;
        color: #f3f4f6 !important;
    }

    body,
    body * {
        transition: background-color 0.3s ease,
            border-color 0.3s ease,
            color 0.3s ease,
            box-shadow 0.3s ease !important;
    }

    </style>