/* Modern App Download Section Styles */
        .app-download-section {
            position: relative;
            overflow: hidden;
        }

        /* Gradient Mesh Background */
        .app-download-bg {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--color-primary-500-rgb, 99, 102, 241), 0.15) 0%, transparent 50%),
                radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--color-secondary-500-rgb, 168, 85, 247), 0.12) 0%, transparent 50%);
            pointer-events: none;
        }

        .dark .app-download-bg {
            background:
                radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--color-primary-500-rgb, 99, 102, 241), 0.1) 0%, transparent 50%),
                radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--color-secondary-500-rgb, 168, 85, 247), 0.08) 0%, transparent 50%);
        }

        /* Floating Shapes */
        .app-floating-shapes {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .app-shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.6;
            animation: float-shape 20s ease-in-out infinite;
        }

        .app-shape-1 {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, rgba(var(--color-primary-400-rgb, 129, 140, 248), 0.2), rgba(var(--color-primary-600-rgb, 79, 70, 229), 0.1));
            top: -100px;
            right: -50px;
            animation-delay: 0s;
            filter: blur(40px);
        }

        .app-shape-2 {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, rgba(var(--color-secondary-400-rgb, 192, 132, 252), 0.15), rgba(var(--color-secondary-600-rgb, 147, 51, 234), 0.08));
            bottom: -50px;
            left: 10%;
            animation-delay: -5s;
            filter: blur(30px);
        }

        .app-shape-3 {
            width: 150px;
            height: 150px;
            background: linear-gradient(135deg, rgba(var(--color-primary-300-rgb, 165, 180, 252), 0.2), transparent);
            top: 40%;
            left: -30px;
            animation-delay: -10s;
            filter: blur(25px);
        }

        @keyframes float-shape {

            0%,
            100% {
                transform: translate(0, 0) rotate(0deg);
            }

            25% {
                transform: translate(10px, -20px) rotate(5deg);
            }

            50% {
                transform: translate(-5px, 10px) rotate(-3deg);
            }

            75% {
                transform: translate(15px, 5px) rotate(3deg);
            }
        }

        /* Grid Pattern Overlay */
        .app-grid-pattern {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(var(--color-primary-500-rgb, 99, 102, 241), 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(var(--color-primary-500-rgb, 99, 102, 241), 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }

        .dark .app-grid-pattern {
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        }

        /* Decorative Dots */
        .app-dots-pattern {
            position: absolute;
            width: 120px;
            height: 120px;
            background-image: radial-gradient(circle, rgba(var(--color-primary-500-rgb, 99, 102, 241), 0.3) 2px, transparent 2px);
            background-size: 16px 16px;
            opacity: 0.5;
        }

        .app-dots-1 {
            top: 20%;
            right: 5%;
        }

        .app-dots-2 {
            bottom: 15%;
            left: 3%;
            transform: rotate(45deg);
        }

        /* Phone Mockup Container */
        .app-mockup-container {
            position: relative;
        }

        /* Glow Ring Behind Phone */
        .app-mockup-glow {
            position: absolute;
            inset: -20px;
            background: conic-gradient(from 0deg,
                    rgba(var(--color-primary-500-rgb, 99, 102, 241), 0.3),
                    rgba(var(--color-secondary-500-rgb, 168, 85, 247), 0.2),
                    rgba(var(--color-primary-400-rgb, 129, 140, 248), 0.3),
                    rgba(var(--color-secondary-400-rgb, 192, 132, 252), 0.2),
                    rgba(var(--color-primary-500-rgb, 99, 102, 241), 0.3));
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.6;
            animation: glow-rotate 10s linear infinite;
        }

        @keyframes glow-rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .app-mockup {
            position: relative;
            z-index: 1;
            transform: perspective(1000px) rotateY(-5deg);
            transition: transform 0.5s ease;
        }

        .app-mockup:hover {
            transform: perspective(1000px) rotateY(0deg) scale(1.02);
        }

        [dir="rtl"] .app-mockup {
            transform: perspective(1000px) rotateY(5deg);
        }

        [dir="rtl"] .app-mockup:hover {
            transform: perspective(1000px) rotateY(0deg) scale(1.02);
        }

        /* Floating Elements Around Phone */
        .app-floating-elements {
            position: absolute;
            inset: -40px;
            pointer-events: none;
        }

        .app-float-icon {
            position: absolute;
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1);
            animation: float-icon 4s ease-in-out infinite;
            backdrop-filter: blur(10px);
        }

        .dark .app-float-icon {
            background: rgba(31, 41, 55, 0.9);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
        }

        .app-float-icon-1 {
            top: 15%;
            right: -20px;
            animation-delay: 0s;
        }

        .app-float-icon-2 {
            bottom: 25%;
            left: -25px;
            animation-delay: -1.5s;
        }

        .app-float-icon-3 {
            top: 50%;
            right: -30px;
            animation-delay: -3s;
        }

        @keyframes float-icon {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        /* Glassmorphism Card for Stats */
        .app-stats-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 16px;
            padding: 1rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        }

        .dark .app-stats-card {
            background: rgba(31, 41, 55, 0.7);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }

        /* Store Buttons with Gradient Border */
        .store-button {
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
        }

        .store-button::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
            pointer-events: none;
        }

        .store-button:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.25);
        }

        .store-button-primary {
            background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
            color: white;
        }

        .store-button-primary:hover {
            background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
        }

        .store-button-secondary {
            background: linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-700));
            color: white;
        }

        .store-button-secondary:hover {
            background: linear-gradient(135deg, var(--color-secondary-400), var(--color-secondary-600));
        }

        /* Feature Icon */
        .app-feature-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .app-feature-icon svg {
            color: white;
        }

        /* QR Code Card */
        .qr-code-simple {
            background: white;
            border-radius: 12px;
            padding: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .dark .qr-code-simple {
            background: #ffffff;
            border-color: rgba(0, 0, 0, 0.1);
        }

        /* Decorative Line */
        .app-decorative-line {
            position: relative;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500));
            border-radius: 2px;
            margin-bottom: 0.75rem;
        }