/* Base Styling & Typography */
        body {
            font-family: 'Inter', sans-serif;
            color: #4C5E68; /* Slate Gray */
            background-color: #FFFFFF; /* Pure White */
            line-height: 1.6;
        }
        h1, h2, h3 {
            font-family: 'Poppins', 'sans-serif';
            font-weight: 500; /* Medium for headings */
            color: #4C5E68;
        }

        /* 1. Hero Ripple Animation */
        .hero-ripple {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 10%, rgba(189, 231, 238, 0.4) 0%, rgba(255, 255, 255, 0) 30%);
            animation: soft-ripple 15s infinite alternate ease-in-out;
            z-index: 0;
        }
        @keyframes soft-ripple {
            0% { transform: scale(1.0); opacity: 1; }
            100% { transform: scale(1.1); opacity: 0.8; }
        }

        /* 2. Glassmorphism for Modals/Forms */
        .glass-card {
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 8px 32px 0 rgba(170, 216, 230, 0.3);
        }

        /* 3. CTA Button Style */
        .btn-aqua {
            background-color: #A9D8E6; /* Seafoam Blue */
            color: #4C5E68;
            transition: all 0.3s ease;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
        }
        .btn-aqua:hover {
            background-color: #BDE7EE; /* Soft Aqua */
            box-shadow: 0 4px 15px rgba(169, 216, 230, 0.7);
            transform: translateY(-2px);
        }

        /* 4. Scroll Fade-Up/Text Animation */
        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in-up.active {
            opacity: 1;
            transform: translateY(0);
        }
        .text-shimmer {
            /* Text animation for the hero section */
            animation: text-shimmer 2.5s infinite linear alternate;
        }
        @keyframes text-shimmer {
            0% { opacity: 0.9; text-shadow: 0 0 5px rgba(169, 216, 230, 0.2); }
            100% { opacity: 1; text-shadow: 0 0 10px rgba(169, 216, 230, 0.5); }
        }

        /* 5. Product Image Parallax/Subtle movement */
        #hero img {
             /* Set initial state for parallax */
            transform: translateY(-20px) scale(1.05);
            transition: transform 10s ease-out; 
        }
        /* Add a subtle animation to the product image */
        @keyframes subtle-move {
            0% { transform: translateY(-20px) scale(1.05); }
            50% { transform: translateY(-15px) scale(1.06); }
            100% { transform: translateY(-20px) scale(1.05); }
        }
        #hero img {
            animation: subtle-move 20s infinite ease-in-out;
        }