@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

        body {
            background-color: #000000;
            color: #FFFFFF;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            position: relative;
        }

        /* Hero Specific Background Grid */
        .hero-bg-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 120vh;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: 0;
            pointer-events: none;
            /* Fade out at the bottom and right edges */
            -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black 10%, transparent 70%);
            mask-image: radial-gradient(ellipse at 30% 30%, black 10%, transparent 70%);
        }

        /* Glitch Animation */
        .glitch-wrapper {
            position: relative;
            display: inline-block;
        }

        .glitch-text {
            position: relative;
            color: #FFFFFF;
            font-weight: 800;
            display: inline-block;
            z-index: 10;
        }

        .glitch-text::before,
        .glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000000;
        }

        .glitch-text::before {
            left: 2px;
            text-shadow: -2px 0 #FBC470;
            clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
            animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
        }

        .glitch-text::after {
            left: -2px;
            text-shadow: -2px 0 #8B6631;
            clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
            animation: glitch-anim-2 3s infinite linear alternate-reverse;
        }

        @keyframes glitch-anim-1 {
            0% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: translate(0); }
            20% { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translate(-2px, 2px); }
            40% { clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%); transform: translate(2px, -2px); }
            60% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); transform: translate(-2px, 0); }
            80% { clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); transform: translate(2px, 2px); }
            100% { clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%); transform: translate(0); }
        }

        @keyframes glitch-anim-2 {
            0% { clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%); transform: translate(0); }
            20% { clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); transform: translate(2px, -2px); }
            40% { clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%); transform: translate(-2px, 2px); }
            60% { clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%); transform: translate(2px, 0); }
            80% { clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%); transform: translate(-2px, -2px); }
            100% { clip-path: polygon(0 30%, 100% 30%, 100% 40%, 0 40%); transform: translate(0); }
        }

        /* Soft Rounded Cards & Glassmorphism */
        .soft-card {
            background: rgba(10, 10, 10, 0.6);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px; /* 8px rounding */
            transition: all 0.3s ease;
        }

        .soft-card:hover {
            border-color: rgba(251, 196, 112, 0.3);
            box-shadow: 0 8px 30px rgba(251, 196, 112, 0.05);
            transform: translateY(-2px);
        }
        
        /* Disable hover transform for specific cards like header/mac-window */
        .no-hover-lift:hover {
            transform: none;
        }

        /* Button Glow Effects */
        .btn-glow {
            position: relative;
        }
        .btn-glow::after {
            content: '';
            position: absolute;
            top: -2px; left: -2px; right: -2px; bottom: -2px;
            background: #FBC470;
            z-index: -1;
            filter: blur(15px);
            opacity: 0.4;
            border-radius: 10px;
            transition: opacity 0.3s ease;
        }
        .btn-glow:hover::after {
            opacity: 0.7;
        }

        /* Scroll Reveal Utility */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #000000; }
        ::-webkit-scrollbar-thumb { background: #8B6631; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #FBC470; }

  .card-dots {
                    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
                    background-size: 14px 14px;
                }
                .status-card {
                    background: linear-gradient(135deg, rgba(20,20,20,0.8) 0%, rgba(5,5,5,0.9) 100%);
                }
                .bar-anim {
                    animation: barPulse 1.2s infinite ease-in-out alternate;
                }
                .bar-anim:nth-child(1) { animation-delay: 0s; }
                .bar-anim:nth-child(2) { animation-delay: 0.2s; }
                .bar-anim:nth-child(3) { animation-delay: 0.4s; }
                .bar-anim:nth-child(4) { animation-delay: 0.6s; }
                .bar-anim:nth-child(5) { animation-delay: 0.8s; }
                .bar-anim:nth-child(6) { animation-delay: 1.0s; }
                
                @keyframes barPulse {
                    0% { height: 30%; opacity: 0.3; background-color: #8B6631; }
                    100% { height: 100%; opacity: 1; background-color: #FBC470; shadow: 0 0 8px #FBC470; }
                }
                .progress-glow {
                    animation: progressPulse 2s infinite ease-in-out;
                }
                @keyframes progressPulse {
                    0% { box-shadow: 0 0 5px rgba(34,197,94,0.4); }
                    50% { box-shadow: 0 0 15px rgba(34,197,94,0.8); }
                    100% { box-shadow: 0 0 5px rgba(34,197,94,0.4); }
                }


  .feature-bg {
                    background: linear-gradient(135deg, #000000 0%, #101010 100%);
                    background-image: 
                        radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                        linear-gradient(135deg, #000000 0%, #101010 100%);
                    background-size: 14px 14px, 100% 100%;
                    background-blend-mode: overlay;
                }
                
                @keyframes jumpBlock {
                    0%, 100% { transform: translateY(0); opacity: 0.4; background-color: #8B6631; }
                    50% { transform: translateY(-4px); opacity: 1; background-color: #FBC470; box-shadow: 0 0 8px rgba(251,196,112,0.6); }
                }
                .jump-item { animation: jumpBlock 1.5s infinite ease-in-out; }
                .jump-item:nth-child(1) { animation-delay: 0.0s; }
                .jump-item:nth-child(2) { animation-delay: 0.2s; }
                .jump-item:nth-child(3) { animation-delay: 0.4s; }
                .jump-item:nth-child(4) { animation-delay: 0.6s; }
                .jump-item:nth-child(5) { animation-delay: 0.8s; }

                @keyframes histBar1 { 0%, 100% { height: 30%; } 50% { height: 80%; } }
                @keyframes histBar2 { 0%, 100% { height: 60%; } 50% { height: 20%; } }
                @keyframes histBar3 { 0%, 100% { height: 40%; } 50% { height: 90%; } }
                @keyframes histBar4 { 0%, 100% { height: 80%; } 50% { height: 40%; } }
                .hist-1 { animation: histBar1 1.2s infinite ease-in-out; }
                .hist-2 { animation: histBar2 1.5s infinite ease-in-out; }
                .hist-3 { animation: histBar3 1.1s infinite ease-in-out; }
                .hist-4 { animation: histBar4 1.4s infinite ease-in-out; }



  .step-dot {
                    box-shadow: 0 0 10px rgba(251,196,112,0.4);
                }
                .code-typing {
                    overflow: hidden;
                    white-space: nowrap;
                    border-right: 2px solid transparent;
                    animation: typing 2s steps(40, end), blink-caret .75s step-end infinite;
                }
                @keyframes typing { from { width: 0 } to { width: 100% } }
                @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #FBC470; } }
                .tab-content { display: none; opacity: 0; transform: translateY(10px); transition: all 0.4s ease; }
                .tab-content.active { display: grid; opacity: 1; transform: translateY(0); }
                
                .scanline {
                    position: absolute;
                    top: 0; left: 0; right: 0;
                    height: 10px;
                    background: linear-gradient(to bottom, transparent, rgba(251,196,112,0.1), transparent);
                    opacity: 0.5;
                    animation: scan 4s linear infinite;
                    pointer-events: none;
                }
                @keyframes scan {
                    0% { transform: translateY(-100%); }
                    100% { transform: translateY(400px); }
                }

  .faq-btn:hover .faq-icon {
                    background-color: rgba(251, 196, 112, 0.2);
                    color: #FBC470;
                }
                .faq-answer {
                    display: grid;
                    grid-template-rows: 0fr;
                    transition: grid-template-rows 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
                    opacity: 0;
                    padding-top: 0;
                    padding-bottom: 0;
                }
                .faq-answer.open {
                    grid-template-rows: 1fr;
                    opacity: 1;
                    padding-top: 1rem;
                    padding-bottom: 1.5rem;
                }
                .faq-answer > div {
                    overflow: hidden;
                }