<style>
        .fade-in {
            animation: fadeIn 0.8s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .hover-lift:hover {
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }

        .project-visual {
            width: 80px;
            height: 60px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .landing-visual {
            width: 60px;
            height: 40px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
        }

        .guests-visual {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            position: relative;
            overflow: hidden;
        }

        .planets-visual {
            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
            position: relative;
        }

        .login-visual {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            position: relative;
        }

        .zah-visual {
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            position: relative;
        }

        .gym-visual {
            background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
            position: relative;
        }

        /* Landing page visuals */
        .fresh-friday { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
        .seoul-greens { background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); }
        .coffee-shop { background: linear-gradient(135deg, #92400e 0%, #78350f 100%); }
        .beach-deli { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
        .banana-breeze { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); }
        .shark-landing { background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); }
        .gym-landing { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
        .kiteboard { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
        .wizard { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); }

        /* Micro animations */
        .planet {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: absolute;
            animation: orbit 3s linear infinite;
        }

        .planet1 { background: #fbbf24; top: 20%; left: 30%; animation-delay: 0s; }
        .planet2 { background: #ef4444; top: 60%; right: 25%; animation-delay: 1s; }
        .planet3 { background: #06b6d4; bottom: 25%; left: 20%; animation-delay: 2s; }

        @keyframes orbit {
            0% { transform: rotate(0deg) translateX(15px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(15px) rotate(-360deg); }
        }

        .form-lines {
            position: absolute;
            width: 80%;
            height: 2px;
            background: rgba(255,255,255,0.3);
            left: 10%;
        }

        .lock-icon {
            color: white;
            font-size: 16px;
        }

        .dumbbell {
            color: white;
            font-size: 16px;
        }

        .guest-book {
            color: white;
            font-size: 14px;
        }

        .code-bracket {
            color: white;
            font-size: 16px;
            font-family: monospace;
        }

        .wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: wave 2s ease-in-out infinite;
        }

        @keyframes wave {
            0%, 100% { transform: translateX(-100%); }
            50% { transform: translateX(100%); }
        }

        .food-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            position: absolute;
            background: rgba(255,255,255,0.6);
        }

        .leaf {
            position: absolute;
            color: rgba(255,255,255,0.7);
            font-size: 12px;
        }

        .coffee-bean {
            width: 6px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.6);
            position: absolute;
        }

        .wave-pattern {
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
            border-radius: 50%;
        }

        .banana {
            position: absolute;
            color: rgba(255,255,255,0.8);
            font-size: 14px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .shark-fin {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 12px solid rgba(255,255,255,0.7);
        }

        .wind-lines {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
        }

        .magic-stars {
            position: absolute;
            color: rgba(255,255,255,0.8);
            font-size: 10px;
        }

        .star1 { top: 20%; left: 20%; animation: twinkle 1.5s infinite; }
        .star2 { top: 70%; right: 25%; animation: twinkle 2s infinite 0.5s; }
        .star3 { bottom: 30%; left: 70%; animation: twinkle 1.8s infinite 1s; }

        @keyframes twinkle {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }
    </style>