/* COMPACT FLOW CONTAINER */
        .email-flow {
            width: 320px;            
            height: 70px;
            position: relative;
            background: transparent;
        }

        /* LEFT – GLOBE ICON ONLY (exactly as requested) */
        .server-icon {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;              
            height: 44px;
            background: #1e40af;       /* professional blue */
            border-radius: 10px;        
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(30, 64, 175, 0.5);
            z-index: 0;
        }

        /* globe icon only – clean and centered */
        .globe-svg {
            width: 28px;
            height: 28px;
            fill: white;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        /* RIGHT – inbox icon (unchanged) */
        .inbox-icon {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;                
            height: 44px;
            background: #487b1f;         /* rich green */
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(4, 120, 87, 0.4);
        }

        .inbox-icon svg {
            width: 26px;                 
            height: 26px;
            fill: white;
        }

        /* connecting line – adjusted for left icon (44px) */
        .flow-line {
            position: absolute;
            left: 54px;                  /* 44px + 10px gap */
            right: 52px;                  /* right gap (44px + 8px) */
            top: 50%;
            height: 3px;
            background: linear-gradient(90deg, #2563eb, #6b7280, #059669);
            transform: translateY(-50%);
            border-radius: 3px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        /* moving email envelope – starts at new left offset (54px) */
        .moving-email {
            position: absolute;
            left: 54px;                   
            top: 50%;
            transform: translateY(-50%);
            animation: moveAcross 2.4s cubic-bezier(0.45, 0.1, 0.3, 1.2) infinite;
            z-index: 0;
            filter: drop-shadow(0 0 6px #fbbf24);
        }

        .moving-email svg {
            display: block;
            width: 18px;
            height: 18px;
            fill: #b45309;                 
            background: white;
            border-radius: 6px;
            padding: 3px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        }

        /* animation keyframes */
        @keyframes moveAcross {
            0% {
                left: 54px;
                opacity: 0;
                transform: translateY(-50%) scale(0.7);
            }
            8% {
                opacity: 1;
                transform: translateY(-50%) scale(1);
            }
            20% {
                transform: translateY(-50%) scale(1.1);
            }
            30% {
                transform: translateY(-50%) scale(1);
            }
            75% {
                opacity: 1;
                transform: translateY(-50%) scale(1);
            }
            92% {
                opacity: 0.2;
                transform: translateY(-50%) scale(0.8);
            }
            100% {
                left: calc(100% - 88px);    
                opacity: 0;
                transform: translateY(-50%) scale(0.6);
            }
        }

        /* subtle glare on icons */
        .server-icon::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 70%);
            pointer-events: none;
        }

        .inbox-icon::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background: radial-gradient(circle at 70% 70%, rgba(255,255,255,0.3), transparent 70%);
            pointer-events: none;
        }

        .email-flow, .email-flow * {
            user-select: none;
        }

        /*Mobile OTP Animation*/
        /* MAIN CONTAINER - same width */
        .flow-container {
            width: 340px;
            height: 76px;
            position: relative;
            background: transparent;
        }

        /* ----- LEFT ICON : GLOBE (server source) ----- */
        .global-icon {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            background: #1e40af;        /* deep blue */
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(30, 64, 175, 0.5);
            z-index: 0;
        }

        .global-svg {
            width: 28px;
            height: 28px;
            fill: white;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
        }

        /* ----- RIGHT ICON : MOBILE PHONE (destination) ----- */
        .mobile-device {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            background: #45791d;         /* dark phone color */
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(30, 30, 47, 0.5);
        }

        .mobile-svg {
            width: 26px;
            height: 26px;
            fill: white;
        }

        /* small notification dot on mobile (pure css, no email mix) */
        .notification-dot {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 8px;
            height: 8px;
            background: #f87171;
            border-radius: 50%;
            border: 1px solid white;
            animation: dotPulse 2s infinite;
            z-index: 15;
        }

        @keyframes dotPulse {
            0%, 100% { opacity: 0.6; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); background: #ef4444; }
        }

        /* ----- CONNECTING LINE (pure flow line) ----- */
        .flow-path {
            position: absolute;
            left: 54px;                  /* 44px globe + 10px gap */
            right: 54px;                  /* 44px mobile + 10px gap */
            top: 50%;
            height: 3px;
            background: linear-gradient(90deg, #2563eb, #6b7280, #51812b);
            transform: translateY(-50%);
            border-radius: 3px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }

        /* ----- MOVING SMS BUBBLE (no email class names) ----- */
        .sms-bubble {
            position: absolute;
            left: 54px;
            top: 50%;
            transform: translateY(-50%);
            animation: bubbleTravel 2.6s cubic-bezier(0.45, 0.1, 0.3, 1.2) infinite;
            z-index: 0;
            filter: drop-shadow(0 0 8px #3b82f6);
        }

        .sms-bubble svg {
            display: block;
            width: 15px;
            height: 15px;
            fill: #3b82f6;                /* blue bubble */
            background: white;
            border-radius: 50% 50% 50% 0;  /* chat bubble shape */
            padding: 5px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            transform: rotate(-5deg);
        }

        /* keyframes named after bubble, nothing "email" */
        @keyframes bubbleTravel {
            0% {
                left: 54px;
                opacity: 0;
                transform: translateY(-50%) scale(0.6) rotate(-5deg);
            }
            10% {
                opacity: 1;
                transform: translateY(-50%) scale(1) rotate(-3deg);
            }
            25% {
                transform: translateY(-50%) scale(1.1) rotate(0deg);
            }
            40% {
                transform: translateY(-50%) scale(1) rotate(2deg);
            }
            70% {
                opacity: 1;
                transform: translateY(-50%) scale(1) rotate(0deg);
            }
            90% {
                opacity: 0.3;
                transform: translateY(-50%) scale(0.8) rotate(5deg);
            }
            100% {
                left: calc(100% - 86px);    /* lands near mobile */
                opacity: 0;
                transform: translateY(-50%) scale(0.5) rotate(8deg);
            }
        }

        /* glare effect (purely cosmetic, no email references) */
        .global-icon::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 70%);
            pointer-events: none;
        }

        .mobile-device::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background: radial-gradient(circle at 70% 70%, rgba(255,255,255,0.25), transparent 70%);
            pointer-events: none;
        }

        /* prevent selection */
        .flow-container,
        .flow-container * {
            user-select: none;
        }