Autonomous Security Hero Section

<section class="relative min-h-screen overflow-x-hidden flex flex-col selection:bg-cyan-500/30">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&amp;display=swap" rel="stylesheet">
<style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #02040a;
            color: #ffffff;
        }
        /* Custom scrollbar for a polished look */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #02040a;
        }
        ::-webkit-scrollbar-thumb {
            background: #1e293b;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #334155;
        }
    </style>

<canvas id="hero-canvas" class="absolute inset-0 z-0 w-full h-full pointer-events-none"></canvas>

<div class="relative z-10 flex flex-col flex-grow w-full max-w-[1280px] mx-auto px-6 md:px-12 lg:px-16">
        
        <!-- Navigation -->
        <nav class="flex items-center justify-between py-8">
            <a href="#" class="text-xl font-medium tracking-tight text-white flex items-center gap-2">
                NEXUS
            </a>
            
            <div class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-400">
                <a href="#" class="hover:text-white transition-colors duration-200">Docs</a>
                <a href="#" class="hover:text-white transition-colors duration-200">Platform</a>
                <a href="#" class="hover:text-white transition-colors duration-200">Pricing</a>
                <a href="#" class="hover:text-white transition-colors duration-200">About</a>
                <a href="#" class="hover:text-white transition-colors duration-200">Contact</a>
            </div>

            <button class="hidden md:inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-slate-300 bg-slate-800/40 hover:bg-slate-800/80 border border-slate-700/50 rounded-lg backdrop-blur-sm transition-all duration-200">
                Start Free
            </button>

            <!-- Mobile Menu Icon (Placeholder) -->
            <button class="md:hidden text-slate-400 hover:text-white">
                <iconify-icon icon="solar:hamburger-menu-linear" width="24" height="24" stroke-width="1.5"></iconify-icon>
            </button>
        </nav>

        <!-- Hero Section -->
        <main class="flex-grow flex flex-col justify-center pb-32 pt-16 md:pt-0 max-w-2xl">
            
            <!-- Border Gradient Badge -->
            <div class="inline-flex self-start mb-8 p-[1px] rounded-full bg-gradient-to-r from-slate-800 via-slate-500 to-slate-800 opacity-90 hover:opacity-100 transition-opacity cursor-default">
                <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#02040a]/90 backdrop-blur-md text-xs font-medium text-slate-300">
                    <span class="text-slate-400">Supported by</span>
                    <span class="flex items-center justify-center w-4 h-4 rounded-full bg-orange-500/20 text-orange-500">
                        <iconify-icon icon="solar:star-linear" width="10" height="10" stroke-width="2"></iconify-icon>
                    </span>
                    <span>TechStars</span>
                </div>
            </div>

            <h1 class="text-5xl md:text-6xl lg:text-[64px] leading-[1.05] font-medium tracking-tight text-white mb-6">
                Your autonomous security agent, keeping your infrastructure safe.
            </h1>
            
            <p class="text-base md:text-lg text-slate-400 max-w-xl leading-relaxed mb-10">
                Nexus continuously scans your cloud environment for vulnerabilities, misconfigurations, and threats — then remediates them instantly with production-ready policies.
            </p>

            <div class="flex flex-col sm:flex-row items-center gap-4">
                <!-- Border Gradient Button (Dark) -->
                <button class="w-full sm:w-auto relative group p-[1px] rounded-xl bg-gradient-to-b from-slate-600 to-slate-900 overflow-hidden">
                    <div class="relative px-6 py-3 rounded-xl bg-[#0a0f1a] group-hover:bg-[#111827] transition-colors duration-300 flex items-center justify-center gap-2 text-sm font-medium text-white h-full w-full">
                        Request Demo
                    </div>
                </button>
                
                <!-- Solid Light Button -->
                <button class="w-full sm:w-auto px-6 py-3 rounded-xl bg-white hover:bg-slate-100 text-slate-950 transition-colors duration-300 flex items-center justify-center text-sm font-medium">
                    Join Waitlist
                </button>
            </div>
        </main>
    </div>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
        // Canvas Animation Logic simulating WebGL folds/lines
        const canvas = document.getElementById('hero-canvas');
        const ctx = canvas.getContext('2d');
        let width, height, time = 0;

        function resize() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        }

        window.addEventListener('resize', resize);
        resize();

        function animate() {
            time += 0.0015; // Animation speed
            
            // Clear background with deep dark blue
            ctx.fillStyle = '#02040a';
            ctx.fillRect(0, 0, width, height);

            // Use screen blending for a glowing light effect
            ctx.globalCompositeOperation = 'screen';

            const numFolds = 28;
            for (let i = 0; i < numFolds; i++) {
                const normalizedX = i / numFolds;
                
                // Calculate position with a slow sine wave drift
                const xPos = (normalizedX * width) + Math.sin(time * 2 + i) * (width * 0.05);
                const foldWidth = (width / numFolds) * 3; // Overlapping widths
                
                // Calculate varying intensity based on position and time
                const baseIntensity = Math.sin(normalizedX * Math.PI) * 0.6 + 0.4;
                const waveIntensity = (Math.sin(time * 3 + i * 0.4) + 1) * 0.5;
                // Boost intensity towards the bottom right
                const gradientBoost = (normalizedX * 0.5) + 0.5;
                const finalIntensity = baseIntensity * waveIntensity * gradientBoost;

                // Create vertical gradient for each fold
                const grad = ctx.createLinearGradient(0, 0, 0, height);
                grad.addColorStop(0, `rgba(2, 6, 20, 0)`); // Fade out at top
                grad.addColorStop(0.4, `rgba(14, 60, 120, ${finalIntensity * 0.2})`); // Mid blue
                grad.addColorStop(0.7, `rgba(0, 160, 240, ${finalIntensity * 0.5})`); // Bright cyan
                grad.addColorStop(1, `rgba(180, 240, 255, ${finalIntensity * 0.9})`); // Almost white at bottom

                ctx.fillStyle = grad;
                
                // Draw the fold as a tall rectangle
                ctx.beginPath();
                ctx.rect(xPos - foldWidth / 2, 0, foldWidth, height);
                ctx.fill();
            }

            // Reset composite operation
            ctx.globalCompositeOperation = 'source-over';
            
            // Add a subtle radial gradient overlay at the bottom right to enhance the glow
            const radialGrad = ctx.createRadialGradient(width * 0.8, height, 0, width * 0.8, height, height * 0.8);
            radialGrad.addColorStop(0, 'rgba(0, 180, 255, 0.15)');
            radialGrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
            ctx.fillStyle = radialGrad;
            ctx.fillRect(0, 0, width, height);

            requestAnimationFrame(animate);
        }

        animate();
    </script>
</section>