/* Global Font Setting */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
        
        /* Custom gradient for the hero section background */
        .hero-bg {
            background-color: #5B21B6;
            background-image: radial-gradient(at 0% 0%, #C084FC 0%, #5B21B6 100%);
        }

        /* --- PHONE MOCKUP STATIC STYLES --- */
        .phone-mockup {
            box-shadow: 0 25px 50px -12px rgba(91, 33, 182, 0.4);
            border: 8px solid white;
            position: relative; 
            overflow: hidden; 
            transition: transform 0.5s;
        }
        .phone-mockup:hover {
             transform: rotate-0;
        }
        /* --- SLIDER STYLES (Kept for Home View) --- */
        .slider-monitor-frame {
            width: 90vw; max-width: 800px; aspect-ratio: 16 / 9; background-color: #000; padding: 12px; 
            border-radius: 16px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px #333; margin: 0 auto;
        }
        .slider-slide {
            scroll-snap-align: center; flex-shrink: 0; width: 95vw; max-width: 850px;
        }
        @media (min-width: 1024px) {
            .slider-monitor-frame { width: 800px; height: 450px; aspect-ratio: auto; }
            .slider-slide { width: 850px; }
        }
        .slider-track {
            overflow-x: scroll; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; gap: 3rem; padding-bottom: 20px;
        }
        .slider-track::-webkit-scrollbar { display: none; }
        .slider-image {
            width: 100%; height: 100%; object-fit: contain; border-radius: 8px; background-color: #2D3748;
        }

        /* Image for Feature Detail Pages */
        .feature-image {
            width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
        }