/* Basis-Setup */
        body { 
            font-family: 'Inter', sans-serif; 
            background-color: #0a0a0a; 
            color: #fff;
            cursor: crosshair; 
        }
        main { position: relative; z-index: 2; }

        /* Grid-Hintergrund */
        .grid-background { 
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px); 
            background-size: 4rem 4rem;
            animation: pan-grid 60s linear infinite;
        }
        @keyframes pan-grid {
            0% { background-position: 0% 0%; }
            100% { background-position: 256px 256px; }
        }
        .hero-gradient-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 0%, #0a0a0a 100%);
            z-index: 0;
        }

        /* --- NEU: Glow-Effekt für das App-Icon --- */
        .icon-glow-container {
            position: relative;
        }
        .icon-glow-container::before {
            content: '';
            position: absolute;
            /* Inset: -5px lässt den Glow leicht über den Rand hinausschauen */
            inset: -5px; 
            background: linear-gradient(60deg, #f472b6, #a78bfa, #f472b6);
            filter: blur(25px);
            z-index: 0;
            background-size: 300% 300%;
            animation: smooth-glow-animation 6s linear infinite;
            /* Radius etwas größer als der des Icons, um die Ecken weicher zu machen */
            border-radius: 1.75rem; 
        }
        @keyframes smooth-glow-animation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Interaktiver Maus-Glow */
        #interactive-bg {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            background: radial-gradient(800px circle at var(--x) var(--y), rgba(167, 139, 250, 0.1), transparent 80%);
            z-index: 1;
            pointer-events: none;
        }

        /* Text- & Button-Stile */
        .gradient-text { background: linear-gradient(90deg, #a78bfa, #f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .text-glow { text-shadow: 0 0 20px rgba(167, 139, 250, 0.3), 0 0 30px rgba(244, 114, 182, 0.2); }
        .gradient-btn {
            background-image: linear-gradient(90deg, #a78bfa, #f472b6, #a78bfa);
            background-size: 200% auto;
            transition: background-position 0.4s ease-in-out;
        }
        .gradient-btn:hover { background-position: right center; }
        
        /* Animationen */
        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; }
        
        /* Scroll-Animation */
        .scroll-animate { 
            opacity: 0;
            transform: translateY(40px);
        }
        .scroll-animate.is-visible { 
            /* FIX: Animation mit 'forwards' versehen, um Flackern zu verhindern */
            animation: slideInUp 0.7s ease-out forwards;
        }

        /* Partikel-Effekt für den Cursor */
        .particle { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none; z-index: 9999; opacity: 0; animation: particle-animation 1s forwards; }
        @keyframes particle-animation { 0% { transform: scale(1) translate(0, 0); opacity: 1; } 100% { transform: scale(0) translate(var(--x), var(--y)); opacity: 0; } }

        /* Interaktive Feature-Karten */
        .feature-card {
            background-color: rgba(20, 20, 20, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid #27272a;
            position: relative;
            overflow: hidden;
            transition: border-color 0.3s ease, transform 0.3s ease;
        }
        .feature-card:hover {
            border-color: #4c1d95;
            transform: scale(1.03) translateY(-5px);
        }
        .feature-card::before {
            content: '';
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            background: radial-gradient(400px circle at var(--x-card) var(--y-card), rgba(167, 139, 250, 0.2), transparent 80%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .feature-card:hover::before { opacity: 1; }
        .feature-card .icon-glow { filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.4)); }

                .app-card-container {
            perspective: 1000px;
        }
        .app-card {
            background: #111111;
            border: 1px solid #222;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform-style: preserve-3d;
        }
        .app-card:hover {
            box-shadow: 0px 20px 40px rgba(139, 92, 246, 0.2);
        }

        /* App Icon Glow Effect */
        .app-card img {
            transition: transform 0.4s ease, filter 0.4s ease;
        }
        .app-card:hover img {
            transform: scale(1.05);
            filter: drop-shadow(0 0 1rem rgba(59, 130, 246, 0.5)); /* Bluish glow */
        }