/* 1. Custom CSS Variables and Base Styles */
        :root {
            --color-sky-light: #D6E8F7; /* Soft Sky Blue */
            --color-aqua-soft: #A8E9E8; /* Aqua Accent */
            --color-lavender-soft: #CFC3F7; /* Lavender Accent */
            --color-white-airy: #FAFAFF; /* Soft White Base */
            --color-text-dark: #1A202C; /* Primary Dark Text */
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--color-white-airy);
            color: var(--color-text-dark);
            scroll-behavior: smooth;
        }
        h1, h2, h3, h4 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
        }
        
        /* 2. Custom Gradient Backgrounds */
        .bg-sky-gradient {
            background: linear-gradient(135deg, var(--color-sky-light) 0%, var(--color-aqua-soft) 100%);
        }
        .bg-footer-gradient {
            background: linear-gradient(0deg, var(--color-sky-light) 0%, var(--color-white-airy) 100%);
        }

        /* 3. Glassmorphism Effect */
        .glassy-card {
            background-color: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            transition: all 0.3s ease-in-out;
        }
        .glassy-card:hover {
             box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
             transform: translateY(-5px);
        }

        /* Adjustments for modals in light background */
        #case-study-modal-content-container, #login-modal-content-container {
             background-color: rgba(255, 255, 255, 0.9); /* Opaque white background for readability */
             backdrop-filter: blur(15px);
             border: 1px solid rgba(214, 232, 247, 0.5);
             box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
        }
        
        /* 4. Floating Shapes Animation (for Hero) */
        @keyframes float {
            0% { transform: translate(0, 0) rotate(0deg); opacity: 0.9; }
            50% { transform: translate(15px, -25px) rotate(5deg); opacity: 0.8; }
            100% { transform: translate(0, 0) rotate(0deg); opacity: 0.9; }
        }
        .floating-shape {
            animation: float 12s ease-in-out infinite;
        }
        
        /* 5. Scroll Animations */
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scale-in {
            opacity: 0;
            transform: scale(0.9);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .hero-title, .hero-subtext {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        animation: fadeSlideIn 1.2s ease-out forwards;
    }
    .hero-subtext {
        animation-delay: 0.3s;
    }
    @keyframes fadeSlideIn {
        0% {
            opacity: 0;
            transform: translateY(40px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateY(0px) scale(1);
        }
    }

    /* Floating shapes animation */
    .floating-shape {
        animation: floaty 8s infinite ease-in-out;
    }
    @keyframes floaty {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-25px); }
        100% { transform: translateY(0px); }
    }