Scrollable Feature Cards Interface Section

<section class="overflow-hidden lg:py-32 z-10 bg-[#050505] w-full border-white/5 border-t mt-12 mb-12 pt-24 pb-24 relative">
    
    <!-- Header -->
    <div class="w-full px-6 lg:px-12 flex flex-col md:flex-row md:items-end justify-between mb-20 gap-8 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll">
        <h2 class="text-5xl lg:text-7xl font-normal text-white tracking-tighter leading-[0.9] uppercase">
            System 2.0.
            <span class="text-neutral-500">New Logic.</span>
        </h2>
        
        <a href="#" class="group flex items-center gap-4 text-xs font-medium text-white hover:text-[#FACC15] transition-colors uppercase tracking-widest pb-2 border-b border-white/10 hover:border-[#FACC15]">
            Explore Interface
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="1em" viewBox="0 0 24 24" class="" style="" data-icon-set="solar" data-solar="arrow-right-up-bold-duotone"><path fill="currentColor" fill-rule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5" class=""></path></svg>
        </a>
    </div>

    <!-- Carousel Scroll Container -->
    <div class="w-full overflow-x-auto pb-12 px-6 lg:px-12 flex gap-6 snap-x snap-mandatory scrollbar-hide [animation:fadeSlideIn_1s_ease-out_0.3s_both] animate-on-scroll" style="-ms-overflow-style: none; scrollbar-width: none;">
        
        <!-- Card 1: Liquid Interface -->
        <div class="snap-center shrink-0 w-[300px] md:w-[360px] group cursor-default">
            <div class="aspect-[4/5] overflow-hidden transition-all duration-500 hover:border-white/20 bg-[#080808] w-full border-white/10 border relative">
    <!-- Background Abstract -->
    <div class="opacity-20 mix-blend-screen absolute top-0 right-0 bottom-0 left-0">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/92f79571-c9ab-4ba6-827b-8845c8060486_800w.webp" class="filter contrast-125 w-full h-full object-cover grayscale" alt="Abstract">
    </div>

    <!-- Floating UI Elements (Square) -->
    <div class="flex flex-col gap-4 pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0 items-center justify-center">
        <div class="flex gap-4">
            <div class="w-16 h-16 bg-white/5 backdrop-blur-sm border border-white/10 flex items-center justify-center text-white shadow-2xl hover:bg-white/10 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="1em" viewBox="0 0 24 24" class="opacity-70" style="" data-icon-set="solar" data-solar="shield-check-bold-duotone"><path fill="currentColor" d="M3.378 5.082C3 5.62 3 7.22 3 10.417v1.574c0 5.638 4.239 8.375 6.899 9.536c.721.315 1.082.473 2.101.473c1.02 0 1.38-.158 2.101-.473C16.761 20.365 21 17.63 21 11.991v-1.574c0-3.198 0-4.797-.378-5.335c-.377-.537-1.88-1.052-4.887-2.081l-.573-.196C13.595 2.268 12.812 2 12 2s-1.595.268-3.162.805L8.265 3c-3.007 1.03-4.51 1.545-4.887 2.082" opacity=".5" class=""></path><path fill="currentColor" d="M15.06 10.5a.75.75 0 0 0-1.12-1l-3.011 3.374l-.87-.974a.75.75 0 0 0-1.118 1l1.428 1.6a.75.75 0 0 0 1.119 0z" class=""></path></svg>
            </div>
            <div class="w-16 h-16 bg-white/5 backdrop-blur-sm border border-white/10 flex items-center justify-center text-white shadow-2xl hover:bg-white/10 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="1em" viewBox="0 0 24 24" class="opacity-70" style="" data-icon-set="solar" data-solar="layers-minimalistic-bold-duotone"><path fill="currentColor" d="M7.624 4.449C9.501 3.698 10.621 3.25 12 3.25s2.499.448 4.376 1.199l2.97 1.188c.954.382 1.727.69 2.258.969c.268.14.528.3.729.493c.206.198.417.498.417.901s-.21.703-.417.901c-.2.193-.46.352-.73.493c-.53.278-1.303.587-2.258.97l-2.97 1.187C14.5 12.302 13.38 12.75 12 12.75s-2.499-.448-4.376-1.199l-2.969-1.188c-.955-.382-1.728-.69-2.259-.969a3.2 3.2 0 0 1-.729-.493C1.461 8.703 1.25 8.403 1.25 8s.21-.703.417-.901c.2-.193.46-.352.73-.493c.53-.278 1.303-.587 2.258-.97z" class=""></path><path fill="currentColor" d="M2.502 11.443L2.5 11.44a.75.75 0 0 0-1 1.119L2 12l-.5.559l.002.002l.005.004l.014.012l.045.039q.057.047.161.129c.14.108.343.256.61.429c.533.346 1.32.79 2.363 1.207l2.809 1.124l.115.046c1.877.751 2.997 1.199 4.376 1.199s2.499-.448 4.375-1.199l.116-.046L19.3 14.38a13.7 13.7 0 0 0 2.363-1.207a9 9 0 0 0 .771-.558l.045-.039l.014-.012l.005-.004l.001-.002h.002a.75.75 0 0 0-1-1.119l-.002.002l-.002.001l-.024.021l-.118.094a8 8 0 0 1-.508.357c-.46.299-1.161.697-2.105 1.074l-2.808 1.123c-2.025.81-2.874 1.138-3.934 1.138s-1.91-.328-3.934-1.138L5.257 12.99a12 12 0 0 1-2.104-1.074a8 8 0 0 1-.65-.472" opacity=".7" class=""></path><path fill="currentColor" d="M2.499 15.5a.75.75 0 0 0-1 1.118H1.5l.002.002l.005.004l.014.012l.045.039l.161.13c.14.107.343.255.61.428c.533.346 1.32.79 2.363 1.207l2.809 1.124l.115.046c1.877.751 2.997 1.2 4.376 1.2s2.499-.449 4.375-1.2l.116-.046L19.3 18.44a13.7 13.7 0 0 0 2.363-1.208a9 9 0 0 0 .771-.558l.045-.039l.014-.012l.005-.004l.001-.001l.002-.002a.75.75 0 0 0-1-1.118l-.002.002l-.002.001l-.024.021l-.118.094a8 8 0 0 1-.508.357c-.46.299-1.161.697-2.105 1.074l-2.808 1.123c-2.025.81-2.874 1.138-3.934 1.138s-1.91-.328-3.934-1.138l-2.809-1.123a12 12 0 0 1-2.104-1.073a8 8 0 0 1-.626-.452l-.025-.02z" opacity=".4" class=""></path></svg>
            </div>
        </div>

        <div class="w-48 h-12 bg-white/5 backdrop-blur-sm border border-white/10 flex items-center justify-between px-3 shadow-2xl z-10">
            <div class="w-8 h-8 bg-white/10 flex items-center justify-center text-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="1em" viewBox="0 0 24 24" class="" style="" data-icon-set="solar" data-solar="moon-bold-duotone"><path fill="currentColor" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10a10 10 0 0 1-3.321-.564A9 9 0 0 1 8 18a8.97 8.97 0 0 1 2.138-5.824A6.5 6.5 0 0 0 15.5 15a6.5 6.5 0 0 0 5.567-3.143c.24-.396.933-.32.933.143" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M2 12c0 4.359 2.789 8.066 6.679 9.435A9 9 0 0 1 8 18c0-2.221.805-4.254 2.138-5.824A6.47 6.47 0 0 1 9 8.5a6.5 6.5 0 0 1 3.143-5.567C12.54 2.693 12.463 2 12 2C6.477 2 2 6.477 2 12" class=""></path></svg>
            </div>
            <span class="text-xs font-medium text-neutral-300 uppercase tracking-wider mr-auto ml-3">Analysis</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-neutral-500" style="" data-icon-set="solar" data-solar="alt-arrow-down-bold-duotone"><path fill="currentColor" d="m8.303 12.404l3.327 3.431c.213.22.527.22.74 0l6.43-6.63C19.201 8.79 18.958 8 18.43 8h-5.723z" class=""></path><path fill="currentColor" d="M11.293 8H5.57c-.528 0-.771.79-.37 1.205l2.406 2.481z" opacity=".5" class=""></path></svg>
        </div>
    </div>

    <!-- Overlay Grid -->
    <div class="pointer-events-none opacity-20 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LCAyNTUsIDI1NSwgMC4wNSkiLz48L3N2Zz4=')] absolute top-0 right-0 bottom-0 left-0">
    </div>
</div>
            <div class="mt-6 border-l border-white/10 pl-4">
                <h3 class="text-sm text-white font-medium uppercase tracking-widest mb-2">Liquid Interface</h3>
                <p class="text-neutral-500 font-light text-xs leading-relaxed max-w-[90%]">
                    Refracts project data in real time. Dynamically adapting workflow.
                </p>
            </div>
        </div>

        <!-- Card 2: Lock Screen / Device -->
        <div class="snap-center shrink-0 w-[300px] md:w-[360px] group cursor-default">
            <div class="w-full aspect-[4/5] bg-[#080808] border border-white/10 overflow-hidden relative flex items-center justify-center transition-all duration-500 hover:border-white/20">
                <!-- Geometric Frame -->
                <div class="w-[70%] h-[85%] border border-white/10 bg-[#030303] overflow-hidden relative shadow-2xl">
                    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3b89a5fb-be9e-41e8-8e44-6630812764c9_800w.webp" class="opacity-40 w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0 grayscale" alt="Building Render">
                    
                    <!-- UI Overlay -->
                    <div class="absolute top-6 left-0 w-full flex flex-col items-center z-10 px-6">
                        <div class="w-full flex justify-between items-center border-b border-white/5 pb-2 mb-4">
                            <span class="text-[10px] font-medium text-neutral-500 uppercase tracking-widest">Site 04</span>
                            <div class="w-1 h-1 bg-[#FACC15]"></div>
                        </div>
                        <span class="text-4xl font-light text-white tracking-tighter">09:41</span>
                    </div>
                    
                    <div class="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-black to-transparent"></div>
                </div>
            </div>
            <div class="mt-6 border-l border-white/10 pl-4">
                <h3 class="text-sm text-white font-medium uppercase tracking-widest mb-2">Immersive Twin</h3>
                <p class="text-neutral-500 font-light text-xs leading-relaxed max-w-[90%]">
                    Synchronizes with physical site. Structural subject in view.
                </p>
            </div>
        </div>

        <!-- Card 3: Notifications -->
        <div class="snap-center shrink-0 w-[300px] md:w-[360px] group cursor-default">
            <div class="w-full aspect-[4/5] bg-[#080808] border border-white/10 overflow-hidden relative flex flex-col items-center justify-center transition-all duration-500 hover:border-white/20">
                <!-- Background Pattern -->
                <div class="absolute top-0 right-0 bottom-0 left-0" style="background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px"></div>
                
                <!-- Notification Block -->
                <div class="relative w-[85%] bg-[#050505] border border-white/10 p-6 shadow-2xl transform transition-transform duration-500 group-hover:-translate-y-1">
                    <div class="flex justify-between items-center mb-4 border-b border-white/5 pb-2">
                        <div class="flex items-center gap-2">
                            <div class="w-1.5 h-1.5 bg-[#FACC15]"></div>
                            <span class="text-[10px] font-bold text-white tracking-widest uppercase">Active</span>
                        </div>
                        <span class="text-[10px] text-neutral-600 font-mono">02m ago</span>
                    </div>
                    <p class="text-sm text-white font-normal mb-2 tracking-tight">+1 (408) Load Shift</p>
                    <p class="text-[10px] text-neutral-500 leading-relaxed font-mono">
                        &gt; REPORTING NOMINAL STRESS LEVELS
                        &gt; SECTOR 07 OK
                        &gt; NO ANOMALIES
                    </p>
                </div>
            </div>
            <div class="mt-6 border-l border-white/10 pl-4">
                <h3 class="text-sm text-white font-medium uppercase tracking-widest mb-2">Auto Screening</h3>
                <p class="text-neutral-500 font-light text-xs leading-relaxed max-w-[90%]">
                    Filters noise from sensor data. Detects critical load shifts.
                </p>
            </div>
        </div>

        <!-- Card 4: Assist Controls -->
        <div class="snap-center shrink-0 w-[300px] md:w-[360px] group cursor-default">
            <div class="w-full aspect-[4/5] bg-[#080808] border border-white/10 overflow-hidden relative flex flex-col items-center justify-center transition-all duration-500 hover:border-white/20">
                
                <!-- Control Panel -->
                <div class="relative w-full px-8">
                    <div class="text-center mb-8">
                        <h4 class="text-white font-normal uppercase tracking-widest text-xs">Remote Deploy</h4>
                        <div class="h-px w-12 bg-white/10 mx-auto my-3"></div>
                        <p class="text-[10px] text-neutral-500 font-mono">FLEET STATUS: READY</p>
                    </div>

                    <div class="grid grid-cols-2 gap-px bg-white/5 border border-white/5 max-w-[200px] mx-auto">
                        <!-- Btn 1 -->
                        <div class="aspect-square bg-[#050505] hover:bg-white/5 transition-colors flex flex-col items-center justify-center gap-2 cursor-pointer group/btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-neutral-500 group-hover/btn:text-white text-xl transition-colors" style="" data-icon-set="solar" data-solar="satellite-bold-duotone"><path fill="currentColor" fill-rule="evenodd" d="M13.086 5.04L2.333 10.36a.75.75 0 0 1-.665-1.345l12.428-6.146l.145 1.01a1 1 0 0 0 .039.134c.042.124.126.334.285.624c.317.58.936 1.484 2.126 2.673s2.093 1.808 2.673 2.126c.29.159.5.243.624.285a1 1 0 0 0 .133.039l1.01.145l-6.145 12.428a.75.75 0 1 1-1.345-.665l5.318-10.754a7 7 0 0 1-.316-.162c-.618-.34-1.45-.908-2.473-1.86L5.53 19.53a.75.75 0 0 1-1.06-1.06L15.109 7.83c-.953-1.023-1.521-1.855-1.86-2.474a7 7 0 0 1-.163-.315" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="m20.824 10.527l.307-.622l-1.01-.145l-.01-.002a1 1 0 0 1-.123-.037a4 4 0 0 1-.624-.285c-.58-.318-1.484-.937-2.673-2.126c-1.19-1.19-1.809-2.093-2.126-2.673a4 4 0 0 1-.285-.624a2 2 0 0 1-.037-.124l-.002-.01l-.145-1.01l-.626.31a5.225 5.225 0 0 1 7.354 7.348m-2.51 1.69l.645-1.303a7 7 0 0 1-.316-.162c-.618-.34-1.45-.908-2.473-1.86l-2.52 2.519a5.23 5.23 0 0 0 4.664.806M12.59 10.35l2.519-2.519c-.953-1.023-1.521-1.855-1.86-2.474a7 7 0 0 1-.163-.315l-1.304.645a5.23 5.23 0 0 0 .808 4.663" class=""></path></svg>
                            <span class="text-[9px] text-neutral-600 font-medium uppercase tracking-widest">Scan</span>
                        </div>
                        <!-- Btn 2 -->
                        <div class="aspect-square bg-[#050505] hover:bg-white/5 transition-colors flex flex-col items-center justify-center gap-2 cursor-pointer group/btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-neutral-500 group-hover/btn:text-white text-xl transition-colors" style="" data-icon-set="solar" data-solar="videocamera-record-bold-duotone"><path fill="currentColor" d="m17 9.5l.658-.329c1.946-.973 2.92-1.46 3.63-1.02c.712.44.712 1.528.712 3.703v.292c0 2.176 0 3.263-.711 3.703c-.712.44-1.685-.047-3.63-1.02L17 14.5z" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M2.908 5.462C2 6.57 2 8.212 2 11.5v1c0 3.287 0 4.931.908 6.038a4 4 0 0 0 .554.554C4.57 20 6.212 20 9.5 20c3.287 0 4.931 0 6.038-.908q.304-.25.554-.554C17 17.43 17 15.788 17 12.5v-1c0-3.287 0-4.931-.908-6.038a4 4 0 0 0-.554-.554C14.43 4 12.788 4 9.5 4c-3.287 0-4.931 0-6.038.908a4 4 0 0 0-.554.554" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M14 8.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0" class=""></path></svg>
                            <span class="text-[9px] text-neutral-600 font-medium uppercase tracking-widest">Feed</span>
                        </div>
                        <!-- Btn 3 -->
                        <div class="aspect-square bg-[#050505] hover:bg-white/5 transition-colors flex flex-col items-center justify-center gap-2 cursor-pointer group/btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-neutral-500 group-hover/btn:text-white text-xl transition-colors" style="" data-icon-set="solar" data-solar="menu-dots-bold-duotone"><path fill="currentColor" d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m14 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" class=""></path><path fill="currentColor" d="M14 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0" opacity=".5" class=""></path></svg>
                            <span class="text-[9px] text-neutral-600 font-medium uppercase tracking-widest">Logs</span>
                        </div>
                        <!-- Btn 4 (Action) -->
                        <div class="aspect-square bg-[#050505] hover:bg-red-900/10 transition-colors flex flex-col items-center justify-center gap-2 cursor-pointer group/btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-neutral-500 group-hover/btn:text-red-500 text-xl transition-colors" style="" data-icon-set="solar" data-solar="stop-bold-duotone"><path fill="currentColor" fill-rule="evenodd" d="M3.464 3.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535l17.072-17.07C19.07 2 16.714 2 12 2S4.929 2 3.464 3.464" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M3.465 20.536C4.929 22 7.286 22 12 22s7.071 0 8.536-1.464C22 19.07 22 16.714 22 12s0-7.07-1.464-8.535z" opacity=".5" class=""></path></svg>
                            <span class="text-[9px] text-neutral-600 group-hover/btn:text-red-500 font-medium uppercase tracking-widest">Halt</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 border-l border-white/10 pl-4">
                <h3 class="text-sm text-white font-medium uppercase tracking-widest mb-2">Site Assist</h3>
                <p class="text-neutral-500 font-light text-xs leading-relaxed max-w-[90%]">
                    Operational continuity. Automatic robotics deployment.
                </p>
            </div>
        </div>

    </div>

    <!-- Navigation Controls -->
    <div class="absolute bottom-12 right-6 lg:right-12 flex gap-px border border-white/10 bg-[#080808]">
        <button class="w-12 h-12 flex items-center justify-center text-neutral-500 hover:text-white hover:bg-white/5 transition-all border-r border-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="1em" viewBox="0 0 24 24" class="" style="" data-icon-set="solar" data-solar="arrow-left-linear"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 12H4m0 0l6-6m-6 6l6 6" class=""></path></svg>
        </button>
        <button class="w-12 h-12 flex items-center justify-center text-neutral-500 hover:text-white hover:bg-white/5 transition-all">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="1em" viewBox="0 0 24 24" class="" style="" data-icon-set="solar" data-solar="arrow-right-linear"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12h16m0 0l-6-6m6 6l-6 6" class=""></path></svg>
        </button>
    </div>

</section>