:root {
            --brand-blue: #0056b3;
            --brand-yellow: #ffcc00;

            /* Light Mode Colors */
            --light-bg-main: #ffffff;
            --light-bg-alt: #f4f7fd;
            --light-text: #1a1a1a;
            --glass-border-light: rgba(0, 0, 0, 0.08);

            /* Dark Mode Palette */
            --dark-bg-main: #02040a;
            --dark-bg-alt: #0a1128;
            --dark-text: #e0e6ed;
            --glass-bg-dark: rgba(20, 30, 60, 0.6);
            --glass-border-dark: rgba(255, 255, 255, 0.1);
        }

        html,
        body {
            max-width: 100%;
            overflow-x: hidden;
            position: relative;
        }

        .container,
        .container-fluid {
            overflow: hidden;
            /* This keeps the 3D tilt "glow" from pushing the page wide */
        }

        /* Fix for Bootstrap rows that sometimes cause a -15px margin bleed */
        .row {
            margin-right: 0;
            margin-left: 0;
        }

        body {
            font-family: "Plus Jakarta Sans", sans-serif;
            transition:
                background-color 0.4s ease,
                color 0.4s ease;
        }

        /* Theme Specific Styles */
        [data-bs-theme="light"] {
            background-color: var(--light-bg-main);
            color: var(--light-text);
        }

        [data-bs-theme="light"] .bg-alt-section {
            background-color: var(--light-bg-alt);
        }

        [data-bs-theme="dark"] {
            background-color: var(--dark-bg-main);
            color: var(--dark-text);
        }

        [data-bs-theme="dark"] .bg-alt-section {
            background-color: var(--dark-bg-alt);
        }

        [data-bs-theme="dark"] .text-muted {
            color: rgba(255, 255, 255, 0.6) !important;
        }

        /* Navbar */
        .navbar {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.85);
            border-bottom: 1px solid var(--glass-border-light);
            z-index: 1050;
            transition: 0.4s;
        }

        [data-bs-theme="dark"] .navbar {
            background: rgba(2, 4, 10, 0.85);
            border-bottom: 1px solid var(--glass-border-dark);
        }

        /* Typography */
        .text-yellow {
            color: var(--brand-yellow) !important;
        }

        .hero-title {
            font-weight: 800;
            font-size: clamp(3rem, 6vw, 5rem);
            line-height: 1.1;
            letter-spacing: -2px;
        }

        .section-title {
            font-weight: 700;
            letter-spacing: -1px;
        }

        /* Buttons */
        .btn-swoop {
            background: var(--brand-yellow);
            color: #000;
            font-weight: 700;
            border-radius: 12px;
            padding: 12px 30px;
            border: none;
            transition: all 0.3s ease;
        }

        .btn-swoop:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(255, 204, 0, 0.4);
        }

        /* Hero Section Adjustments */
        /* Mobile-First Hero Adjustments */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 100px 0 50px 0;
            /* Space for fixed navbar */
            position: relative;
        }

        @media (max-width: 991.98px) {
            .hero {
                text-align: center;
                min-height: auto;
                padding-top: 120px;
            }

            .hero-title {
                font-size: 2.5rem;
                /* Slightly smaller for mobile screens */
                margin-bottom: 1.5rem;
            }

            .hero-content-wrapper {
                display: flex;
                flex-direction: column-reverse;
                /* Puts the animation/image above the text on mobile */
            }

            .store-badge-container {
                justify-content: center;
            }

            .hero-visual-container {
                margin-bottom: 2rem;
                height: 300px !important;
                /* Smaller visual on mobile */
            }
        }

        /* Keep Lottie/Image container responsive */
        .hero-visual-container {
            width: 100%;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Glassmorphism Cards */
        .glass-card {
            background: #fff;
            border: 1px solid var(--glass-border-light);
            border-radius: 24px;
            padding: 35px;
            transition: 0.4s;
            height: 100%;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
        }

        [data-bs-theme="dark"] .glass-card {
            background: var(--glass-bg-dark);
            border-color: var(--glass-border-dark);
            box-shadow: none;
        }

        .glass-card:hover {
            border-color: var(--brand-yellow);
            transform: translateY(-8px);
        }

        /* Enable 3D Depth on Cards */
        .glass-card,
        .price-card {
            transform-style: preserve-3d;
            perspective: 1000px;
            transition: box-shadow 0.3s ease !important;
            /* Smooth out shadow transition */
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            /* Prevents card from spilling out of its column */
        }

        /* Make elements inside the card "pop out" */
        /* Fixed 3D Depth - Ensuring vertical layout */
        .glass-card i,
        .glass-card h5,
        .glass-card p,
        .price-card h3,
        .price-card .display-4,
        .price-card ul,
        .price-card button {
            transform: translateZ(50px);
            /* Keeps the 3D "pop" */
            display: block;
            /* Forces them onto new lines (Vertical) */
            text-align: center;
        }

        /* For icons specifically, ensure they don't stretch weirdly */
        .glass-card i {
            width: auto;
            margin-left: auto;
            margin-right: auto;
        }

        /* Ensure no clipping during tilt */
        .col-lg-4,
        .col-md-6,
        .col-lg-3 {
            z-index: 1;
        }

        .col-lg-4:hover,
        .col-md-6:hover {
            z-index: 10;
            /* Bring tilted card to front */
        }

        /* Parallax Section */
        .parallax-section {
            background-image: url("../assets/frontend-css/car-cleaning.jpg");
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            color: white;
        }

        /* Overlay to ensure text pops */
        .parallax-overlay {
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 86, 179, 0.7) 100%);
            padding: 100px 0;
            width: 100%;
            height: 100%;
        }

        /* 1. The Main Wrapper - No overflow hidden here so glow can spread */
        .app-screenshot-container {
            position: relative;
            display: inline-block;
            padding: 60px;
            /* Increased padding so glow has room to breathe */
            z-index: 1;
        }

        /* 2. The Glow - Placed behind the phone, unrestricted */
        .app-screenshot-container::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 250px;
            /* Specific width to prevent edge cutting */
            height: 450px;
            background: radial-gradient(circle,
                    rgba(0, 86, 179, 0.9) 0%,
                    rgba(0, 123, 255, 0.4) 50%,
                    transparent 75%);
            filter: blur(50px);
            z-index: -1;
            animation: bluePulse 1.5s infinite alternate ease-in-out;
        }

        /* 3. The Phone Frame Holder - This handles the clipping for the shimmer */
        .frame-clipper {
            position: relative;
            border-radius: 45px;
            overflow: hidden;
            /* Clips the shimmer ONLY to the frame */
            border: 8px solid var(--brand-blue);
            box-shadow: 0 0 25px rgba(0, 86, 179, 0.5);
            z-index: 2;
        }

        /* 4. The Shimmer Layer - Speed reduced to 3s */
        .frame-clipper::after {
            content: "";
            position: absolute;
            top: -150%;
            left: -150%;
            width: 400%;
            height: 400%;
            background: linear-gradient(45deg,
                    transparent 45%,
                    rgba(255, 255, 255, 0.05) 48%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0.05) 52%,
                    transparent 55%);
            z-index: 3;
            pointer-events: none;
            /* Speed changed from 2s to 3s for a smoother glide */
            animation: shimmerEffect 3s infinite linear;
        }

        /* Fast Shimmer Animation Logic remains the same, duration changed above */
        @keyframes shimmerEffect {
            0% {
                transform: translate(-20%, -20%);
            }

            100% {
                transform: translate(20%, 20%);
            }
        }

        /* Pulse stays fast as requested previously to remain noticeable */
        @keyframes bluePulse {
            0% {
                opacity: 0.5;
                transform: translate(-50%, -50%) scale(0.9);
            }

            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.2);
            }
        }

        .price-card {
            border: 2px solid transparent;
        }

        .price-card.featured {
            border-color: var(--brand-yellow);
        }

        .store-badge {
            height: 50px;
            transition: 0.3s;
            cursor: pointer;
        }

        .store-badge:hover {
            transform: scale(1.05);
        }

        #themeToggle {
            cursor: pointer;
            font-size: 1.3rem;
            color: var(--brand-blue);
            transition: 0.3s;
        }

        [data-bs-theme="dark"] #themeToggle {
            color: var(--brand-yellow);
        }

        /* Mobile-First Hero Adjustments */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 100px 0 50px 0;
            /* Space for fixed navbar */
            position: relative;
        }

        @media (max-width: 991.98px) {
            .hero {
                text-align: center;
                min-height: auto;
                padding-top: 120px;
            }

            .hero-title {
                font-size: 2.5rem;
                /* Slightly smaller for mobile screens */
                margin-bottom: 1.5rem;
            }

            .hero-content-wrapper {
                display: flex;
                flex-direction: column-reverse;
                /* Puts the animation/image above the text on mobile */
            }

            .store-badge-container {
                justify-content: center;
            }

            .hero-visual-container {
                margin-bottom: 0;
                height: 360px !important;
                /* Smaller visual on mobile */
            }
        }

        /* Keep Lottie/Image container responsive */
        .hero-visual-container {
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* FAQ Header */
        .faq-header {
            padding: 120px 0 60px;
            background: linear-gradient(180deg, rgba(0, 86, 179, 0.05) 0%, transparent 100%);
        }

        /* Accordion Custom Styling */
        .accordion-item {
            background: transparent;
            border: none;
            margin-bottom: 1.5rem;
        }

        .accordion-button {
            background: white !important;
            border: 1px solid rgba(0, 0, 0, 0.08) !important;
            border-radius: 20px !important;
            padding: 20px 25px;
            font-weight: 700;
            color: var(--light-text);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            transition: 0.3s;
        }

        [data-bs-theme="dark"] .accordion-button {
            background: var(--glass-bg-dark) !important;
            border-color: var(--glass-border-dark) !important;
            color: var(--dark-text);
        }

        .accordion-button:not(.collapsed) {
            color: var(--brand-blue);
            box-shadow: 0 10px 30px rgba(0, 86, 179, 0.15);
            border-color: var(--brand-blue) !important;
        }

        [data-bs-theme="dark"] .accordion-button:not(.collapsed) {
            color: var(--brand-yellow);
            border-color: var(--brand-yellow) !important;
        }

        .accordion-button::after {
            background-image: none;
            content: "\F282";
            font-family: "bootstrap-icons";
        }

        .accordion-body {
            padding: 25px;
            line-height: 1.7;
            opacity: 0.9;
        }