@keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

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

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

        @keyframes float {

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

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

        @keyframes typing {
            from {
                width: 0;
            }

            to {
                width: 100%;
            }
        }

        @keyframes blink-caret {

            from,
            to {
                border-color: transparent;
            }

            50% {
                border-color: #3b82f6;
            }
        }

        .typewriter {
            overflow: hidden;
            border-right: 3px solid #3b82f6;
            white-space: nowrap;
            margin: 0 auto;
            animation: typing 2s steps(var(--character-count, 20), end),
                blink-caret 0.75s step-end infinite;
        }

        /* Mobile typewriter styles */
        .typewriter-mobile-container {
            position: relative;
        }

        .typewriter-mobile-line1,
        .typewriter-mobile-line2 {
            overflow: hidden;
            white-space: nowrap;
        }

        .typewriter-mobile-line1 {
            border-right: 3px solid #3b82f6;
            animation: typing 1.5s steps(var(--line1-count, 13), end),
                hide-cursor 0.1s ease-in 1.5s forwards;
        }

        .typewriter-mobile-line2 {
            width: 0;
            opacity: 1;
        }

        .typewriter-mobile-line2.active {
            border-right: 3px solid #3b82f6;
            animation: typing 1.8s steps(var(--line2-count, 22), end) forwards,
                blink-caret 0.75s step-end infinite 1.8s;
        }

        @keyframes hide-cursor {
            to {
                border-right-color: transparent;
            }
        }

        .smooth-scroll {
            scroll-behavior: smooth;
        }

        .tooltip {
            position: relative;
        }

        .tooltip:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #1f2937;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 10;
        }

        .dark .tooltip:hover::after {
            background: #374151;
        }

        /* Advanced Animation Keyframes */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideLeft {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideRight {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes zoomOut {
            from {
                opacity: 0;
                transform: scale(1.2);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3) translateY(-100px);
            }
            50% {
                opacity: 1;
                transform: scale(1.05) translateY(0);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes elastic {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.25);
            }
            75% {
                transform: scale(0.85);
            }
            100% {
                transform: scale(1);
            }
        }

        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
                transform: scale(1.02);
            }
        }

        @keyframes rotate360 {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: translateX(-5px);
            }
            20%, 40%, 60%, 80% {
                transform: translateX(5px);
            }
        }

        @keyframes wave {
            0%, 100% {
                transform: rotate(0deg);
            }
            25% {
                transform: rotate(10deg);
            }
            75% {
                transform: rotate(-10deg);
            }
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes reveal {
            0% {
                opacity: 0;
                clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            }
            100% {
                opacity: 1;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            }
        }

        @keyframes scaleBounce {
            0% {
                transform: scale(0.8);
                opacity: 0.8;
            }
            50% {
                transform: scale(1.1);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes flip {
            0% {
                transform: perspective(600px) rotateY(-90deg);
                opacity: 0;
            }
            50% {
                transform: perspective(600px) rotateY(0deg);
                opacity: 1;
            }
            100% {
                transform: perspective(600px) rotateY(0deg);
                opacity: 1;
            }
        }

        @keyframes glow {
            from {
                text-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3);
            }
            to {
                text-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.6);
            }
        }

        @keyframes morph {
            0%, 100% {
                border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            }
            34% {
                border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
            }
            67% {
                border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
            }
        }

        @keyframes parallax {
            0% {
                transform: translateY(0px);
            }
            100% {
                transform: translateY(-100px);
            }
        }

        /* Hero Heading Spectacular Animations */
        @keyframes spectacularEntry {
            0% {
                opacity: 0;
                transform: scale(0.5) rotateY(-90deg) translateY(100px);
                filter: blur(20px);
                text-shadow: 0 0 50px rgba(59, 130, 246, 0);
            }
            30% {
                opacity: 0.3;
                transform: scale(0.8) rotateY(-30deg) translateY(50px);
                filter: blur(10px);
                text-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
            }
            60% {
                opacity: 0.8;
                transform: scale(1.1) rotateY(10deg) translateY(-10px);
                filter: blur(2px);
                text-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotateY(0deg) translateY(0px);
                filter: blur(0px);
                text-shadow: 0 0 30px rgba(59, 130, 246, 0.4), 0 0 60px rgba(20, 184, 166, 0.3);
            }
        }

        @keyframes textShimmer {
            0%, 100% {
                background-position: 0% 50%;
                transform: scale(1);
            }
            50% {
                background-position: 100% 50%;
                transform: scale(1.02);
            }
        }

        @keyframes letterDrop {
            0% {
                opacity: 0;
                transform: translateY(-100px) rotateX(90deg);
            }
            50% {
                opacity: 1;
                transform: translateY(10px) rotateX(-10deg);
            }
            100% {
                opacity: 1;
                transform: translateY(0px) rotateX(0deg);
            }
        }

        /* Paragraph Text Animations */
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes wordReveal {
            0% {
                opacity: 0;
                transform: translateY(20px) scale(0.8);
                filter: blur(5px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        @keyframes pulseText {
            0%, 100% {
                text-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
            }
            50% {
                text-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 30px rgba(20, 184, 166, 0.4);
            }
        }

        /* Section-specific animations */
        @keyframes slideInLeft {
            0% {
                opacity: 0;
                transform: translateX(-100px) rotateY(-20deg);
            }
            100% {
                opacity: 1;
                transform: translateX(0) rotateY(0deg);
            }
        }

        @keyframes slideInRight {
            0% {
                opacity: 0;
                transform: translateX(100px) rotateY(20deg);
            }
            100% {
                opacity: 1;
                transform: translateX(0) rotateY(0deg);
            }
        }

        @keyframes flipInX {
            0% {
                opacity: 0;
                transform: perspective(400px) rotateX(-90deg);
            }
            40% {
                transform: perspective(400px) rotateX(-10deg);
            }
            70% {
                transform: perspective(400px) rotateX(10deg);
            }
            100% {
                opacity: 1;
                transform: perspective(400px) rotateX(0deg);
            }
        }

        @keyframes flipInY {
            0% {
                opacity: 0;
                transform: perspective(400px) rotateY(-90deg);
            }
            40% {
                transform: perspective(400px) rotateY(-10deg);
            }
            70% {
                transform: perspective(400px) rotateY(10deg);
            }
            100% {
                opacity: 1;
                transform: perspective(400px) rotateY(0deg);
            }
        }

        @keyframes rollIn {
            0% {
                opacity: 0;
                transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes lightSpeedIn {
            0% {
                opacity: 0;
                transform: translate3d(100%, 0, 0) skewX(-30deg);
            }
            60% {
                opacity: 1;
                transform: skewX(20deg);
            }
            80% {
                transform: skewX(-5deg);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }

        /* Utility Classes */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.77, 0, 0.18, 1);
        }

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

        .stagger-1 { animation-delay: 0.1s; }
        .stagger-2 { animation-delay: 0.2s; }
        .stagger-3 { animation-delay: 0.3s; }
        .stagger-4 { animation-delay: 0.4s; }
        .stagger-5 { animation-delay: 0.5s; }
        .stagger-6 { animation-delay: 0.6s; }

        .hover-lift {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hover-lift:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }

        .hover-glow:hover {
            box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
        }

        .gradient-bg {
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }

        .text-gradient {
            background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .parallax-element {
            will-change: transform;
        }

        /* Hero Text Special Effects */
        .hero-title {
            background: linear-gradient(45deg, #667eea 0%, #764ba2 25%, #667eea 50%, #764ba2 75%, #667eea 100%);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: spectacularEntry 2s ease-out, textShimmer 4s ease-in-out infinite 2s;
            position: relative;
            display: inline-block;
        }

        .hero-title::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
            opacity: 0;
            animation: shimmer 3s infinite;
            transform: skewX(-20deg);
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-100%) skewX(-20deg);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: translateX(200%) skewX(-20deg);
                opacity: 0;
            }
        }

        .hero-paragraph {
            animation: fadeInUp 1.5s ease-out 2s forwards;
            opacity: 0;
        }

        .word {
            display: inline-block;
            opacity: 0;
        }

        .word.animate {
            animation: wordReveal 0.6s ease-out forwards;
        }

        /* Letter by letter animation for headings */
        .letter {
            display: inline-block;
            opacity: 0;
        }

        .letter.animate {
            animation: letterDrop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        /* Loading Screen Styles */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        .loading-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .loading-spinner {
            width: 80px;
            height: 80px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-text {
            color: white;
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: 2rem;
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; }
        }

        /* Page transition effects */
        .page-transition {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .page-transition.loaded {
            opacity: 1;
            transform: translateY(0);
        }

        /* Smooth scroll enhancements */
        html {
            scroll-behavior: smooth;
            /* Ensure page starts at top */
            scroll-padding-top: 0;
        }

        /* Force initial scroll position */
        body {
            scroll-behavior: auto;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(45deg, #5a6fd8, #6a4190);
        }

        body {
            font-family: "Outfit", sans-serif;
            /* Prevent initial scroll issues */
            overflow-x: hidden;
            position: relative;
        }

        /* Ensure hero section starts at very top */
        #home {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        /* Fix any potential header offset issues */
        header {
            top: 0 !important;
        }

        /* Prevent scroll restoration by browser */
        html, body {
            scroll-behavior: auto !important;
        }