/* Metallic Text Gradients */
    .gold-gradient-text {
        background: linear-gradient(135deg, #FFF1CE 0%, #DEB57E 50%, #8B6434 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .gold-border {
        border-image: linear-gradient(to bottom right, #DEB57E, #1E355B, #8B6434) 1;
    }
    .gold-glow {
        box-shadow: 0 0 30px rgba(222, 181, 126, 0.15);
    }
    .gold-glow-hover:hover {
        box-shadow: 0 0 40px rgba(222, 181, 126, 0.3);
    }
    /* Canvas Wave Background */
    #fx-canvas {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
        z-index: 1;
    }
</style>


<!-- Navigation Header -->
<header class="fixed top-0 left-0 w-full z-50 bg-stack-950/80 backdrop-blur-md border-b border-stack-700/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
        <a href="#" class="flex items-center space-x-3 group">
            <div class="w-11 h-11 rounded-full p-[2px] bg-gradient-to-tr from-stack-gold via-stack-silver to-stack-gold-dark shadow-lg">
                <img src="https://static.wixstatic.com/media/0113ed_35ab0984310944378fbbd69519e60a63~mv2.png" alt="Stackverse Logo" class="w-full h-full object-cover rounded-full">
            </div>
            <div>
                <span class="font-bold tracking-wider text-white text-lg group-hover:text-stack-gold transition-colors">STACKVERSE</span>
                <span class="block text-[10px] tracking-widest text-stack-gold uppercase font-mono">Innovations</span>
            </div>
        </a>
        <nav class="hidden md:flex items-center space-x-8 text-sm font-medium text-stack-silver">
            <a href="#work" class="hover:text-stack-gold transition-colors">Portfolio</a>
            <a href="#spotlight" class="hover:text-stack-gold transition-colors">Flagship</a>
            <a href="#process" class="hover:text-stack-gold transition-colors">Process</a>
            <a href="#lab" class="hover:text-stack-gold transition-colors">Motion Lab</a>
            <a href="mailto:Stackverseinnovations@gmail.com" class="hover:text-stack-gold transition-colors font-mono text-xs">Stackverseinnovations@gmail.com</a>
        </nav>
        <div class="flex items-center space-x-4">
            <a href="#contact" class="px-5 py-2.5 rounded-full bg-gradient-to-r from-stack-gold to-stack-gold-dark text-stack-950 font-semibold text-sm hover:brightness-110 transition-all shadow-lg shadow-stack-gold/20">
                Commission Project
            </a>
        </div>
    </div>
</header>

<!-- Hero Section with Logo Video & Cinematic Grain -->
<section class="relative min-h-screen flex items-center justify-center pt-28 pb-20 px-4 overflow-hidden">
    <canvas id="fx-canvas"></canvas>
    <div class="absolute inset-0 bg-radial from-stack-800/40 via-stack-950/80 to-stack-950 pointer-events-none"></div>

    <div class="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-12 items-center relative z-10">
        <div class="lg:col-span-7 space-y-8 text-center lg:text-left">
            <div class="inline-flex items-center space-x-2 px-4 py-2 rounded-full bg-stack-800/80 border border-stack-gold/30 text-stack-gold text-xs font-mono tracking-wider uppercase backdrop-blur-sm">
                <span class="w-2 h-2 rounded-full bg-stack-gold animate-pulse"></span>
                <span>Cinematic Web & Mobile App Design Studio</span>
            </div>
            <h1 class="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1]">
                Architecting the <span class="gold-gradient-text">Digital Universe</span>
            </h1>
            <p class="text-lg sm:text-xl text-stack-slate max-w-2xl mx-auto lg:mx-0 font-light leading-relaxed">
                We engineer world-class Android apps, immersive web platforms, and high-performance AI interfaces with director-level motion design and flawless execution.
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4">
                <a href="#work" class="w-full sm:w-auto px-8 py-4 rounded-full bg-gradient-to-r from-stack-gold to-stack-gold-dark text-stack-950 font-bold hover:brightness-110 transition-all text-center shadow-xl shadow-stack-gold/20">
                    Explore Portfolio (04)
                </a>
                <a href="#contact" class="w-full sm:w-auto px-8 py-4 rounded-full bg-stack-800/80 border border-stack-700 hover:border-stack-gold/50 text-white font-medium transition-all text-center backdrop-blur-sm">
                    Get in Touch
                </a>
            </div>
            <div class="pt-6 flex items-center justify-center lg:justify-start space-x-8 text-stack-slate text-sm font-mono">
                <div><span class="text-stack-gold font-bold text-lg">02</span> Live Play Store Apps</div>
                <div class="w-1 h-1 rounded-full bg-stack-600"></div>
                <div><span class="text-stack-gold font-bold text-lg">02</span> Coming Soon Suites</div>
            </div>
        </div>

        <!-- Logo Reveal Video Bezel -->
        <div class="lg:col-span-5 flex justify-center">
            <div class="relative w-full max-w-sm rounded-3xl p-3 bg-gradient-to-b from-stack-gold/30 via-stack-700/40 to-stack-950 border border-stack-gold/20 shadow-2xl gold-glow">
                <div class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-stack-950 border border-stack-gold/40 text-[10px] font-mono text-stack-gold tracking-widest uppercase">
                    Brand Reel • 07.92s
                </div>
                <div class="relative rounded-2xl overflow-hidden aspect-[9/16] bg-black border border-stack-800">
                    <video autoplay loop muted playsinline class="w-full h-full object-cover">
                        <source src="https://video.wixstatic.com/video/0113ed_cb7a9d6555784856a76c38ea3b75518a/file/mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                    <div class="absolute inset-0 bg-gradient-to-t from-stack-950/80 via-transparent to-transparent pointer-events-none flex flex-col justify-end p-6">
                        <span class="font-bold text-white text-base">Stackverse Innovations</span>
                        <span class="text-xs font-mono text-stack-gold">Official Motion Brand Mark</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Flagship Featured Spotlight (SignSafe AI) -->
<section id="spotlight" class="py-24 bg-stack-950/50 border-y border-stack-700/40 relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-16">
            <div>
                <span class="text-stack-gold font-mono text-xs uppercase tracking-widest">Flagship Product</span>
                <h2 class="text-3xl sm:text-5xl font-extrabold tracking-tight mt-2">SignSafe AI</h2>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="https://play.google.com/store/apps/details?id=ai.signsafe.app&pcampaignid=web_share" target="_blank" class="inline-flex items-center space-x-2 px-6 py-3 rounded-xl bg-stack-800 border border-stack-gold/40 text-stack-gold hover:bg-stack-gold hover:text-stack-950 transition-all font-semibold text-sm">
                    <span>Download on Google Play</span>
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center bg-stack-800/40 rounded-3xl p-8 lg:p-12 border border-stack-700/60 backdrop-blur-sm">
            <div class="lg:col-span-6 space-y-6">
                <div class="inline-block px-3 py-1 rounded-md bg-stack-gold/10 text-stack-gold text-xs font-mono">
                    Android • Legal Contract Risk Scanner
                </div>
                <h3 class="text-2xl sm:text-4xl font-bold">Instant Legal Intelligence & 3-Tap Contract Auditing on Android</h3>
                <p class="text-stack-slate text-base leading-relaxed">
                    SignSafe AI empowers users to scan, analyze, and extract critical risk factors from complex legal agreements in under 2.4 seconds. Built with Kotlin, Jetpack Compose, and enterprise-grade local encryption.
                </p>
                <div class="grid grid-cols-3 gap-4 py-4 border-y border-stack-700/60 font-mono">
                    <div>
                        <span class="block text-2xl font-bold text-stack-gold">&lt; 2.4s</span>
                        <span class="text-xs text-stack-slate">Scan Speed</span>
                    </div>
                    <div>
                        <span class="block text-2xl font-bold text-stack-gold">3-Tap</span>
                        <span class="text-xs text-stack-slate">PDF Workflow</span>
                    </div>
                    <div>
                        <span class="block text-2xl font-bold text-stack-gold">100%</span>
                        <span class="text-xs text-stack-slate">Secure & Private</span>
                    </div>
                </div>
                <div class="flex items-center space-x-4 pt-2">
                    <a href="https://play.google.com/store/apps/details?id=ai.signsafe.app&pcampaignid=web_share" target="_blank" class="inline-flex items-center space-x-3 px-6 py-3 rounded-full bg-gradient-to-r from-stack-gold to-stack-gold-dark text-stack-950 font-bold text-sm shadow-lg shadow-stack-gold/20 hover:brightness-110 transition-all">
                        <span>Get SignSafe AI</span>
                    </a>
                </div>
            </div>
            <div class="lg:col-span-6 flex justify-center">
                <div class="w-full max-w-md rounded-2xl bg-stack-900 border border-stack-700 p-6 shadow-2xl space-y-6">
                    <div class="flex items-center justify-between border-b border-stack-800 pb-4">
                        <span class="font-mono text-xs text-stack-gold uppercase">App Architecture Preview</span>
                        <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                    </div>
                    <div class="space-y-3 font-mono text-xs">
                        <div class="p-3 rounded-lg bg-stack-800/80 border border-stack-700 flex justify-between items-center">
                            <span>Core Engine</span>
                            <span class="text-stack-gold">Kotlin & Jetpack Compose</span>
                        </div>
                        <div class="p-3 rounded-lg bg-stack-800/80 border border-stack-700 flex justify-between items-center">
                            <span>OCR & NLP Pipeline</span>
                            <span class="text-stack-gold">On-Device Neural Net</span>
                        </div>
                        <div class="p-3 rounded-lg bg-stack-800/80 border border-stack-700 flex justify-between items-center">
                            <span>Export Format</span>
                            <span class="text-stack-gold">Encrypted PDF / JSON</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Portfolio Section (04 Products) -->
<section id="work" class="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row md:items-end justify-between mb-16">
        <div>
            <span class="text-stack-gold font-mono text-xs uppercase tracking-widest">Shipped & Upcoming Suites</span>
            <h2 class="text-3xl sm:text-5xl font-extrabold tracking-tight mt-2">Portfolio Index</h2>
        </div>
        <div class="mt-6 md:mt-0 flex flex-wrap gap-2">
            <button onclick="filterPortfolio('all')" class="portfolio-filter-btn px-5 py-2 rounded-full text-xs font-mono uppercase bg-stack-gold text-stack-950 font-semibold transition-all">All Products (04)</button>
            <button onclick="filterPortfolio('live')" class="portfolio-filter-btn px-5 py-2 rounded-full text-xs font-mono uppercase bg-stack-800 text-stack-silver hover:text-white transition-all">Live on Play Store (02)</button>
            <button onclick="filterPortfolio('soon')" class="portfolio-filter-btn px-5 py-2 rounded-full text-xs font-mono uppercase bg-stack-800 text-stack-silver hover:text-white transition-all">Coming Soon (02)</button>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Card 01: SignSafe AI -->
        <div class="portfolio-card group rounded-3xl bg-stack-800/40 border border-stack-700/60 p-8 hover:border-stack-gold/60 transition-all flex flex-col justify-between" data-category="live">
            <div>
                <div class="flex items-center justify-between mb-6">
                    <span class="px-3 py-1 rounded-md bg-emerald-500/10 text-emerald-400 font-mono text-xs">Live • Google Play</span>
                    <span class="font-mono text-xs text-stack-slate">01 / 04</span>
                </div>
                <h3 class="text-2xl font-bold group-hover:text-stack-gold transition-colors">SignSafe AI</h3>
                <p class="text-stack-slate text-sm mt-3 leading-relaxed">
                    Android legal contract risk scanner & PDF intelligence suite designed with high-contrast precision UI.
                </p>
            </div>
            <div class="pt-8 flex items-center justify-between border-t border-stack-700/60 mt-8">
                <a href="https://play.google.com/store/apps/details?id=ai.signsafe.app&pcampaignid=web_share" target="_blank" class="text-xs font-mono uppercase text-stack-gold hover:underline flex items-center space-x-2">
                    <span>Download on Google Play →</span>
                </a>
            </div>
        </div>

        <!-- Card 02: ArticuFlow -->
        <div class="portfolio-card group rounded-3xl bg-stack-800/40 border border-stack-700/60 p-8 hover:border-stack-gold/60 transition-all flex flex-col justify-between" data-category="live">
            <div>
                <div class="flex items-center justify-between mb-6">
                    <span class="px-3 py-1 rounded-md bg-emerald-500/10 text-emerald-400 font-mono text-xs">Live • Google Play</span>
                    <span class="font-mono text-xs text-stack-slate">02 / 04</span>
                </div>
                <h3 class="text-2xl font-bold group-hover:text-stack-gold transition-colors">ArticuFlow</h3>
                <p class="text-stack-slate text-sm mt-3 leading-relaxed">
                    Interactive speech practice and acoustic waveform trainer built for real-time articulation feedback.
                </p>
            </div>
            <div class="pt-8 flex items-center justify-between border-t border-stack-700/60 mt-8">
                <a href="https://play.google.com/store/apps/details?id=com.stackverse.articulationtrainer&pcampaignid=web_share" target="_blank" class="text-xs font-mono uppercase text-stack-gold hover:underline flex items-center space-x-2">
                    <span>Download on Google Play →</span>
                </a>
            </div>
        </div>

        <!-- Card 03: VibePost AI -->
        <div class="portfolio-card group rounded-3xl bg-stack-800/40 border border-stack-700/60 p-8 hover:border-stack-gold/60 transition-all flex flex-col justify-between" data-category="soon">
            <div>
                <div class="flex items-center justify-between mb-6">
                    <span class="px-3 py-1 rounded-md bg-amber-500/10 text-amber-400 font-mono text-xs border border-amber-500/20">Coming Soon</span>
                    <span class="font-mono text-xs text-stack-slate">03 / 04</span>
                </div>
                <h3 class="text-2xl font-bold group-hover:text-stack-gold transition-colors">VibePost AI</h3>
                <p class="text-stack-slate text-sm mt-3 leading-relaxed">
                    Autonomous social & 9:16 vertical reel content generation engine for high-velocity creators and brands.
                </p>
            </div>
            <div class="pt-8 flex items-center justify-between border-t border-stack-700/60 mt-8">
                <span class="text-xs font-mono uppercase text-stack-gold">Google Play Release Soon</span>
            </div>
        </div>

        <!-- Card 04: CareBrief -->
        <div class="portfolio-card group rounded-3xl bg-stack-800/40 border border-stack-700/60 p-8 hover:border-stack-gold/60 transition-all flex flex-col justify-between" data-category="soon">
            <div>
                <div class="flex items-center justify-between mb-6">
                    <span class="px-3 py-1 rounded-md bg-amber-500/10 text-amber-400 font-mono text-xs border border-amber-500/20">Coming Soon</span>
                    <span class="font-mono text-xs text-stack-slate">04 / 04</span>
                </div>
                <h3 class="text-2xl font-bold group-hover:text-stack-gold transition-colors">CareBrief</h3>
                <p class="text-stack-slate text-sm mt-3 leading-relaxed">
                    Doctor-ready medical summary & active-salt scanner simplifying complex pharmaceutical disclosures.
                </p>
            </div>
            <div class="pt-8 flex items-center justify-between border-t border-stack-700/60 mt-8">
                <span class="text-xs font-mono uppercase text-stack-gold">Google Play Release Soon</span>
            </div>
        </div>
    </div>
</section>

<!-- Studio Production Pipeline -->
<section id="process" class="py-24 bg-stack-950/50 border-y border-stack-700/40">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <span class="text-stack-gold font-mono text-xs uppercase tracking-widest">End-to-End Execution</span>
            <h2 class="text-3xl sm:text-5xl font-extrabold tracking-tight mt-2">How Stackverse Ships</h2>
            <p class="text-stack-slate mt-4">Our rigorous 4-step production workflow combining cinematic motion design with bulletproof native engineering.</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div class="p-6 rounded-2xl bg-stack-800/40 border border-stack-700/60 space-y-4">
                <span class="font-mono text-stack-gold text-xl font-bold">01</span>
                <h3 class="text-lg font-bold">Product Architecture</h3>
                <p class="text-xs text-stack-slate leading-relaxed">Mapping user journeys, wireframing core interfaces, and defining high-performance data models.</p>
            </div>
            <div class="p-6 rounded-2xl bg-stack-800/40 border border-stack-700/60 space-y-4">
                <span class="font-mono text-stack-gold text-xl font-bold">02</span>
                <h3 class="text-lg font-bold">Cinema Motion Prototyping</h3>
                <p class="text-xs text-stack-slate leading-relaxed">Crafting bespoke brand emblems, 3D card tilts, and fluid UI choreography.</p>
            </div>
            <div class="p-6 rounded-2xl bg-stack-800/40 border border-stack-700/60 space-y-4">
                <span class="font-mono text-stack-gold text-xl font-bold">03</span>
                <h3 class="text-lg font-bold">Native Android & Web Build</h3>
                <p class="text-xs text-stack-slate leading-relaxed">Writing optimized Kotlin, Jetpack Compose, and responsive high-FPS frontend code.</p>
            </div>
            <div class="p-6 rounded-2xl bg-stack-800/40 border border-stack-700/60 space-y-4">
                <span class="font-mono text-stack-gold text-xl font-bold">04</span>
                <h3 class="text-lg font-bold">Play Store & Cloud Launch</h3>
                <p class="text-xs text-stack-slate leading-relaxed">Rigorous QA, Google Play compliance checks, and high-performance CDN deployment.</p>
            </div>
        </div>
    </div>
</section>

<!-- Motion FX Lab Sandbox -->
<section id="lab" class="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center bg-stack-800/30 rounded-3xl p-8 lg:p-12 border border-stack-700/60">
        <div class="lg:col-span-6 space-y-6">
            <span class="text-stack-gold font-mono text-xs uppercase tracking-widest">Interactive Sandbox</span>
            <h2 class="text-3xl font-extrabold">Motion FX Director Lab</h2>
            <p class="text-stack-slate text-sm leading-relaxed">
                Test our cinematic canvas wave velocity and particle density in real time right here on the page.
            </p>
            <div class="space-y-4 font-mono text-xs pt-4">
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="text-stack-slate">Wave Velocity</span>
                        <span id="vel-val" class="text-stack-gold">1.5x</span>
                    </div>
                    <input type="range" id="wave-speed" min="0.5" max="3.0" step="0.1" value="1.5" class="w-full accent-stack-gold bg-stack-900 rounded-lg">
                </div>
            </div>
        </div>
        <div class="lg:col-span-6 flex justify-center">
            <div class="p-8 rounded-2xl bg-stack-900 border border-stack-700 text-center space-y-4 w-full">
                <img src="https://static.wixstatic.com/media/0113ed_35ab0984310944378fbbd69519e60a63~mv2.png" alt="Emblem" class="w-20 h-20 rounded-full mx-auto border-2 border-stack-gold shadow-lg">
                <h3 class="font-bold text-lg">Stackverse Innovations</h3>
                <p class="text-xs font-mono text-stack-gold">Official Studio Crest</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact & Project Commission Section -->
<section id="contact" class="py-24 bg-stack-950 border-t border-stack-700/40 relative">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <span class="text-stack-gold font-mono text-xs uppercase tracking-widest">Start a Project</span>
            <h2 class="text-3xl sm:text-5xl font-extrabold tracking-tight mt-2">Commission a Project</h2>
            <p class="text-stack-slate mt-4">Send us your project vision directly into our Wix CRM pipeline.</p>
        </div>

        <form id="wix-inquiry-form" class="space-y-6 bg-stack-900/60 p-8 sm:p-12 rounded-3xl border border-stack-700/60 backdrop-blur-sm shadow-2xl">
            <div id="form-success" class="hidden p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-sm font-mono text-center">
                Project brief successfully transmitted to Stackverse Innovations CRM! We will respond shortly.
            </div>
            <div id="form-error" class="hidden p-4 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-400 text-sm font-mono text-center">
                Submission failed. Please email us directly at Stackverseinnovations@gmail.com
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                    <label class="block text-xs font-mono uppercase text-stack-slate mb-2">Your Name *</label>
                    <input type="text" id="fname" required placeholder="Alex Vance" class="w-full px-4 py-3 rounded-xl bg-stack-800 border border-stack-700 text-white focus:border-stack-gold focus:outline-none transition-all text-sm font-mono">
                </div>
                <div>
                    <label class="block text-xs font-mono uppercase text-stack-slate mb-2">Company / Brand</label>
                    <input type="text" id="fcompany" placeholder="Acme Labs" class="w-full px-4 py-3 rounded-xl bg-stack-800 border border-stack-700 text-white focus:border-stack-gold focus:outline-none transition-all text-sm font-mono">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div>
                    <label class="block text-xs font-mono uppercase text-stack-slate mb-2">Work Email *</label>
                    <input type="email" id="femail" required placeholder="alex@acmelabs.com" class="w-full px-4 py-3 rounded-xl bg-stack-800 border border-stack-700 text-white focus:border-stack-gold focus:outline-none transition-all text-sm font-mono">
                </div>
                <div>
                    <label class="block text-xs font-mono uppercase text-stack-slate mb-2">Project Track *</label>
                    <select id="ftrack" class="w-full px-4 py-3 rounded-xl bg-stack-800 border border-stack-700 text-white focus:border-stack-gold focus:outline-none transition-all text-sm font-mono">
                        <option value="Android / iOS App">Android / iOS App</option>
                        <option value="Cinematic Web Platform">Cinematic Web Platform</option>
                        <option value="AI Product & SaaS UI">AI Product & SaaS UI</option>
                        <option value="Brand & Motion Reel">Brand & Motion Reel</option>
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-xs font-mono uppercase text-stack-slate mb-2">Project Vision & Details *</label>
                <textarea id="fdetails" required rows="4" placeholder="Describe your product requirements..." class="w-full px-4 py-3 rounded-xl bg-stack-800 border border-stack-700 text-white focus:border-stack-gold focus:outline-none transition-all text-sm font-mono"></textarea>
            </div>

            <button type="submit" id="submit-btn" class="w-full py-4 rounded-xl bg-gradient-to-r from-stack-gold to-stack-gold-dark text-stack-950 font-bold hover:brightness-110 transition-all text-sm uppercase tracking-wider shadow-xl shadow-stack-gold/20">
                Transmit Project Brief
            </button>
        </form>
    </div>
</section>

<!-- Footer -->
<footer class="bg-stack-950 border-t border-stack-700/40 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-6 text-center md:text-left">
        <div class="flex items-center space-x-3">
            <img src="https://static.wixstatic.com/media/0113ed_35ab0984310944378fbbd69519e60a63~mv2.png" alt="Logo" class="w-8 h-8 rounded-full border border-stack-gold">
            <span class="font-bold tracking-wider text-sm">STACKVERSE INNOVATIONS</span>
        </div>
        <div class="text-xs font-mono text-stack-slate">
            Official Email: <a href="mailto:Stackverseinnovations@gmail.com" class="text-stack-gold hover:underline">Stackverseinnovations@gmail.com</a>
        </div>
        <div class="text-xs text-stack-slate">
            &copy; 2026 Stackverse Innovations. All rights reserved.
        </div>
    </div>
</footer>

<!-- JavaScript Engine -->
<script>
    // Portfolio Filter
    function filterPortfolio(category) {
        const cards = document.querySelectorAll('.portfolio-card');
        const buttons = document.querySelectorAll('.portfolio-filter-btn');

        buttons.forEach(btn => {
            btn.classList.remove('bg-stack-gold', 'text-stack-950', 'font-semibold');
            btn.classList.add('bg-stack-800', 'text-stack-slate');
        });
        event.target.classList.remove('bg-stack-800', 'text-stack-slate');
        event.target.classList.add('bg-stack-gold', 'text-stack-950', 'font-semibold');

        cards.forEach(card => {
            if (category === 'all' || card.getAttribute('data-category') === category) {
                card.style.display = 'flex';
            } else {
                card.style.display = 'none';
            }
        });
    }

    // Canvas Wave FX
    const canvas = document.getElementById('fx-canvas');
    if (canvas) {
        const ctx = canvas.getContext('2d');
        let width = canvas.width = window.innerWidth;
        let height = canvas.height = window.innerHeight;

        window.addEventListener('resize', () => {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        });

        let step = 0;
        const speedSlider = document.getElementById('wave-speed');
        let speedMultiplier = speedSlider ? parseFloat(speedSlider.value) : 1.5;

        if (speedSlider) {
            speedSlider.addEventListener('input', (e) => {
                speedMultiplier = parseFloat(e.target.value);
                document.getElementById('vel-val').textContent = speedMultiplier.toFixed(1) + 'x';
            });
        }

        function drawWaves() {
            ctx.clearRect(0, 0, width, height);
            ctx.lineWidth = 1.5;

            for (let i = 0; i < 4; i++) {
                ctx.beginPath();
                ctx.strokeStyle = i % 2 === 0 ? 'rgba(222, 181, 126, 0.12)' : 'rgba(148, 163, 184, 0.08)';
                
                for (let x = 0; x < width; x += 20) {
                    let y = height * 0.4 + Math.sin(x * 0.003 + step + i) * 60 + Math.cos(x * 0.005 - step) * 40;
                    if (x === 0) ctx.moveTo(x, y);
                    else ctx.lineTo(x, y);
                }
                ctx.stroke();
            }
            step += 0.008 * speedMultiplier;
            requestAnimationFrame(drawWaves);
        }
        drawWaves();
    }

    // Wix Forms & CRM API Integration
    const form = document.getElementById('wix-inquiry-form');
    if (form) {
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const btn = document.getElementById('submit-btn');
            const successMsg = document.getElementById('form-success');
            const errorMsg = document.getElementById('form-error');

            successMsg.classList.add('hidden');
            errorMsg.classList.add('hidden');
            btn.textContent = 'Transmitting...';
            btn.disabled = true;

            const payload = {
                formId: 'c3822b49-afbc-473f-8c4e-916c3ceb9080',
                submission: {
                    first_name_f409: document.getElementById('fname').value,
                    company_c3d4: document.getElementById('fcompany').value || 'N/A',
                    email_673d: document.getElementById('femail').value,
                    project_scope_a1b2: document.getElementById('ftrack').value,
                    project_details_e5f6: document.getElementById('fdetails').value
                }
            };

            try {
                // Authenticate anonymous visitor token
                const tokenRes = await fetch('https://www.wixapis.com/oauth2/token', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        clientId: '3eb68c15-20fd-498c-9cbc-1fca8e4d9018',
                        grantType: 'anonymous'
                    })
                });
                const tokenData = await tokenRes.json();
                const accessToken = tokenData.accessToken;

                // Submit to Wix Form Submission Service
                const subRes = await fetch('https://www.wixapis.com/form-submission-service/v4/submissions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': accessToken
                    },
                    body: JSON.stringify(payload)
                });

                if (subRes.ok) {
                    successMsg.classList.remove('hidden');
                    form.reset();
                } else {
                    throw new Error('Server submission error');
                }
            } catch (err) {
                console.error(err);
                errorMsg.classList.remove('hidden');
            } finally {
                btn.textContent = 'Transmit Project Brief';
                btn.disabled = false;
            }
        });
    }
</script>