/* =========================================
           CSS SECTION (Copy to style.css if needed)
           ========================================= */
        
        body {
            background-color: #88ced4;
            overflow-x: hidden;
        }

        /* Glassmorphism Utilities */
        .glass {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 8px 32px 0 rgba(19, 78, 74, 0.1);
        }
        
        .glass-nav {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        /* Extended Parallax Mesh Background */
        .mesh-bg {
            position: fixed;
            top: -20vh; /* Make it larger than screen to allow scrolling */
            left: -20vw;
            width: 140vw;
            height: 140vh;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
        }

        .mesh-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(120px);
            opacity: 0.7;
            animation: float 25s infinite alternate ease-in-out;
        }

        .blob-1 { top: 10%; left: 10%; width: 60vw; height: 60vw; background: #48C6CF; }
        .blob-2 { bottom: 20%; right: 10%; width: 70vw; height: 70vw; background: #FBBF6B; animation-delay: -5s; }
        .blob-3 { top: 40%; left: 40%; width: 50vw; height: 50vw; background: #186471; animation-delay: -10s; }
        .blob-4 { bottom: 10%; left: 20%; width: 55vw; height: 55vw; background: #E0F2F4; filter: blur(140px); opacity: 0.9; }

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(5%, 5%) scale(1.05); }
            100% { transform: translate(-5%, 10%) scale(0.95); }
        }

        /* Scroll Reveal Animation Classes */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .reveal-left { transform: translateX(-50px); }
        .reveal-right { transform: translateX(50px); }

        /* 3D Tilt Wrapper */
        .tilt-wrapper {
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        .tilt-element {
            transition: transform 0.1s ease; /* Fast transition for smooth following */
            will-change: transform;
        }
        .tilt-element.resetting {
            transition: transform 0.5s ease; /* Slower transition for snapping back */
        }