body {
            background: url('assets/images/02aa1717-4263-4cfa-a853-2ece28a01412.png') center/cover fixed,
                        linear-gradient(135deg, #032738 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        
       
        
        .gradient-text {
            background: linear-gradient(135deg, #3B82F6, #8B5CF6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .feature-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
        }
        
        .feature-card:hover {
            transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .floating-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .pulse-glow {
            animation: pulse-glow 2s ease-in-out infinite alternate;
        }
        
        @keyframes pulse-glow {
            from { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
            to { box-shadow: 0 0 40px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.4); }
        }

        .qr-showcase {
            backdrop-filter: blur(16px);
            background: rgba(8, 19, 39, 0.45);
            border: 1px solid rgba(255, 255, 255, 0.25);
            box-shadow: 0 20px 60px rgba(3, 7, 18, 0.6);
        }

        .qr-frame {
            position: relative;
            width: 16rem;
            height: 16rem;
            border-radius: 1.5rem;
            border: 2px dashed rgba(255, 255, 255, 0.4);
            overflow: hidden;
            background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.2), transparent 60%);
        }

        .qr-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            background-size: 12px 12px;
            animation: gridPulse 4s linear infinite;
        }

        .scan-line {
            position: absolute;
            left: 0;
            right: 0;
            height: 20%;
            background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.4), transparent);
            animation: scan 3s ease-in-out infinite;
            box-shadow: 0 0 40px rgba(59, 130, 246, 0.5);
        }

        .qr-corner {
            position: absolute;
            width: 24px;
            height: 24px;
            border: 4px solid #60a5fa;
            border-radius: 6px;
        }

        .qr-corner.top-left { top: 12px; left: 12px; border-right: none; border-bottom: none; }
        .qr-corner.top-right { top: 12px; right: 12px; border-left: none; border-bottom: none; }
        .qr-corner.bottom-left { bottom: 12px; left: 12px; border-right: none; border-top: none; }
        .qr-corner.bottom-right { bottom: 12px; right: 12px; border-left: none; border-top: none; }

        .qr-pulse-dot {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #22d3ee;
            top: 45%;
            left: 45%;
            box-shadow: 0 0 20px rgba(34, 211, 238, 0.8);
            animation: pulseDot 1.8s ease-in-out infinite;
        }

        .qr-glare {
            position: absolute;
            inset: -40%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
            animation: rotateGlare 12s linear infinite;
        }

        @keyframes scan {
            0% { transform: translateY(-100%); }
            50% { transform: translateY(0%); }
            100% { transform: translateY(100%); }
        }

        @keyframes gridPulse {
            0% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.05); }
            100% { opacity: 0.3; transform: scale(1); }
        }

        @keyframes pulseDot {
            0% { transform: scale(0.9); opacity: 0.8; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(0.9); opacity: 0.8; }
        }

        @keyframes rotateGlare {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .orbit-wrapper {
            position: relative;
            width: 240px;
            height: 240px;
            margin: 0 auto;
        }

        .orbit-core {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .orbit-ring {
            position: absolute;
            inset: 12px;
            border: 1px dashed rgba(255, 255, 255, 0.2);
            border-radius: 999px;
            animation: orbitSpin 20s linear infinite;
        }

        .orbit-track {
            position: absolute;
            inset: 0;
            animation: orbitSpin 16s linear infinite;
        }

        .orbit-icon {
            position: absolute;
            width: 56px;
            height: 56px;
            border-radius: 18px;
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid rgba(255, 255, 255, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fef3c7;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
            animation: floatIcon 6s ease-in-out infinite;
        }

        .orbit-icon i {
            font-size: 1.5rem;
        }

        .orbit-icon.orbit-top { top: -8px; left: 50%; margin-left: -28px; }
        .orbit-icon.orbit-right { right: -8px; top: 50%; margin-top: -28px; }
        .orbit-icon.orbit-bottom { bottom: -8px; left: 50%; margin-left: -28px; }
        .orbit-icon.orbit-left { left: -8px; top: 50%; margin-top: -28px; }

        @keyframes orbitSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes floatIcon {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        .dashboard-preview {
            margin-top: 4rem;
            padding: 2rem;
            border-radius: 2rem;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 30px 80px rgba(2, 6, 23, 0.6);
        }

        .preview-window {
            border-radius: 1.5rem;
            background: linear-gradient(165deg, rgba(30, 64, 175, 0.3), rgba(14, 165, 233, 0.3));
            border: 1px solid rgba(255, 255, 255, 0.12);
            overflow: hidden;
        }

        .preview-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
            background: rgba(15, 23, 42, 0.8);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .preview-toolbar .dots span {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            margin-right: 6px;
        }

        .preview-body {
            padding: 1.5rem;
            display: grid;
            gap: 1.25rem;
        }

        .preview-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 1rem;
        }

        .preview-card {
            padding: 1rem;
            border-radius: 1rem;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .preview-card h4 {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: #c7d2fe;
            margin-bottom: 0.5rem;
        }

        .preview-card p {
            font-size: 1.4rem;
            font-weight: 600;
            color: #f8fafc;
        }

        .preview-chart {
            background: rgba(15, 23, 42, 0.55);
            border-radius: 1.25rem;
            border: 1px solid rgba(255, 255, 255, 0.09);
            padding: 1.5rem;
        }

        .chart-bars {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 0.5rem;
            height: 140px;
            align-items: end;
        }

        .chart-bars span {
            display: block;
            border-radius: 0.5rem 0.5rem 0 0;
            background: linear-gradient(180deg, #38bdf8, #6366f1);
            animation: growBar 3s ease-in-out infinite;
        }

        .chart-bars span:nth-child(odd) { animation-delay: 0.2s; }
        .chart-bars span:nth-child(4n) { animation-delay: 0.4s; }

        @keyframes growBar {
            0% { height: 20%; opacity: 0.4; }
            50% { height: 100%; opacity: 1; }
            100% { height: 35%; opacity: 0.7; }
        }

        .preview-status {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .status-item {
            padding: 1rem;
            border-radius: 1rem;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .status-pill {
            padding: 0.35rem 0.85rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* Footer */
        .footer-wrapper {
            background:
                url('assets/images/75207a2b-cfd5-4a00-b06b-49b8c323a90c.png') right bottom / auto 100% no-repeat,
                url('assets/images/02aa1717-4263-4cfa-a853-2ece28a01412.png') center/cover no-repeat,
                rgba(2, 6, 23, 0.95);
            position: relative;
            overflow: hidden;
        }

        .footer-wrapper .border-t {
            border-top: 0 !important;
            
           
        }

        .footer-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle, rgba(14, 165, 233, 0.25), transparent 60%);
            filter: blur(60px);
            opacity: 0.7;
        }

        .footer-heading {
            font-size: 0.85rem;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: #93c5fd;
            margin-bottom: 1rem;
        }

        .footer-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.95rem;
            color: #cbd5f5;
            text-decoration: none;
            transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
            transform-style: preserve-3d;
        }

        .footer-link::after {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: #38bdf8;
            opacity: 0;
            transform: translateZ(20px);
            transition: opacity 0.3s ease;
        }

        .footer-link:hover {
            color: #f8fafc;
            transform: translateY(-2px) scale(1.07);
            text-shadow: 0 5px 15px rgba(14, 165, 233, 0.4);
        }

        .footer-link:hover::after {
            opacity: 1;
        }

        .footer-social {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid rgba(148, 163, 184, 0.35);
            display: grid;
            place-items: center;
            font-size: 1.1rem;
            color: #f8fafc;
            box-shadow: 0 12px 25px rgba(2, 6, 23, 0.4);
            transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
            transform-style: preserve-3d;
        }

        .footer-social:hover {
            transform: translateY(-6px) rotateX(8deg) rotateY(-4deg) scale(1.05);
            border-color: rgba(244, 114, 182, 0.6);
            background: rgba(255, 255, 255, 0.12);
            box-shadow: 0 25px 45px rgba(14, 165, 233, 0.35);
        }

        .footer-btn {
            padding: 0.85rem 1.5rem;
            border-radius: 999px;
            background: linear-gradient(135deg, #38bdf8, #9333ea);
            color: #0f172a;
            font-weight: 600;
            box-shadow: 0 20px 35px rgba(147, 51, 234, 0.4);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .footer-btn:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 30px 45px rgba(56, 189, 248, 0.45);
        }

        .footer-switch {
            padding: 0.4rem 0.9rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            background: rgba(15, 23, 42, 0.6);
            color: #cbd5f5;
            font-size: 0.85rem;
            transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .footer-switch:hover {
            transform: translateY(-3px);
            border-color: rgba(59, 130, 246, 0.7);
            box-shadow: 0 12px 20px rgba(15, 23, 42, 0.45);
        }

                /* FAQ Section */
                #faq {
                    position: relative;
                }

                .faq-gradient {
                    background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.35), transparent 45%),
                                radial-gradient(circle at 80% 0%, rgba(236, 72, 153, 0.3), transparent 40%),
                                radial-gradient(circle at 50% 80%, rgba(16, 185, 129, 0.25), transparent 45%);
                    filter: blur(40px);
                }

                .faq-grid {
                    position: relative;
                    z-index: 1;
                }

                .faq-card {
                    position: relative;
                    border-radius: 1.5rem;
                    padding: 1.5rem;
                    background: rgba(15, 23, 42, 0.75);
                    border: 1px solid rgba(255, 255, 255, 0.15);
                    box-shadow: 0 25px 60px rgba(2, 6, 23, 0.45);
                    overflow: hidden;
                    cursor: pointer;
                    transform-style: preserve-3d;
                    --faq-rotate-x: 0deg;
                    --faq-rotate-y: 0deg;
                    --faq-translate: 0px;
                    transform: perspective(1200px) rotateX(var(--faq-rotate-x)) rotateY(var(--faq-rotate-y)) translateY(var(--faq-translate));
                    transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
                }

                .faq-card::after {
                    content: '';
                    position: absolute;
                    inset: 1px;
                    border-radius: 1.4rem;
                    border: 1px solid rgba(255, 255, 255, 0.05);
                    pointer-events: none;
                }

                .faq-card:hover {
                    border-color: rgba(96, 165, 250, 0.7);
                    box-shadow: 0 35px 80px rgba(15, 23, 42, 0.65);
                }

                .faq-card.open {
                    border-color: rgba(14, 165, 233, 0.9);
                }

                .faq-trigger {
                    width: 100%;
                    background: transparent;
                    border: none;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                    cursor: pointer;
                    text-align: left;
                }

                .faq-chip {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0.3rem 0.9rem;
                    border-radius: 999px;
                    font-size: 0.7rem;
                    letter-spacing: 0.2em;
                    text-transform: uppercase;
                    color: #93c5fd;
                    border: 1px solid rgba(147, 197, 253, 0.4);
                }

                .faq-icon {
                    flex-shrink: 0;
                    width: 3rem;
                    height: 3rem;
                    border-radius: 999px;
                    border: 1px solid rgba(255, 255, 255, 0.25);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #f1f5f9;
                    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
                }

                .faq-icon i {
                    transition: transform 0.3s ease;
                }

                .faq-card.open .faq-icon {
                    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
                    border-color: transparent;
                }

                .faq-card.open .faq-icon i {
                    transform: rotate(45deg);
                }

                .faq-answer {
                    overflow: hidden;
                    max-height: 0;
                    opacity: 0;
                    transition: max-height 0.5s ease, opacity 0.3s ease;
                }

                .faq-card.open .faq-answer {
                    margin-top: 1rem;
                    max-height: 420px;
                    opacity: 1;
                }

                .faq-answer p {
                    color: #cbd5f5;
                    line-height: 1.7;
                    margin-bottom: 0.75rem;
                }

                .faq-answer ul {
                    display: grid;
                    gap: 0.35rem;
                }

                .faq-answer li {
                    position: relative;
                    padding-left: 1.5rem;
                    color: #9ca3af;
                    font-size: 0.95rem;
                }

                .faq-answer li::before {
                    content: '\2713';
                    position: absolute;
                    left: 0;
                    color: #34d399;
                    font-size: 0.8rem;
                    top: 0.15rem;
                }

                @media (max-width: 768px) {
                    .faq-card {
                        padding: 1.25rem;
                    }

                    .faq-icon {
                        width: 2.5rem;
                        height: 2.5rem;
                    }

                    .faq-chip {
                        letter-spacing: 0.15em;
                    }
                }