<body class="text-slate-300 antialiased selection:bg-cyan-500/30 selection:text-cyan-200">
<div class="min-h-screen flex flex-col relative overflow-hidden">
    <!-- Background Ambient Glows -->
    <div class="absolute top-0 left-1/4 -translate-x-1/2 w-[500px] h-[500px] bg-cyan-600/20 blur-[120px] rounded-full -z-10"></div>
    <div class="absolute bottom-0 right-0 translate-y-1/4 w-[600px] h-[600px] bg-violet-600/20 blur-[120px] rounded-full -z-10"></div>

    <!-- Main Content -->
    <main class="flex-grow pt-32 pb-12 flex flex-col items-center relative z-10 px-4">
        <div class="text-center max-w-3xl mx-auto mb-12">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-cyan-500/20 bg-cyan-500/10 text-cyan-400 text-xs font-medium tracking-wide mb-8">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
                    </span>
                Light-Weight LLM Friendly PHP Framework
            </div>
            <h1 class="text-5xl md:text-7xl font-semibold text-white tracking-tighter mb-6 leading-[1.1]">
                SeedProject <span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500"> </br>Framework</span>
            </h1>
            <p class="text-slate-400 font-light text-base md:text-lg max-w-xl mx-auto leading-relaxed">
                SeedProject Framework is revamped to work with LLM likes Claude Code, Gemini CLI to help you build more structured projects, harness the power of AI without messy confusing back-end code.
            </p>
        </div>

        <!-- Particle Sphere Container -->
        <div class="relative w-full max-w-[21rem] aspect-square flex items-center justify-center mb-16" id="canvas-container">
            <canvas id="particle-canvas" class="absolute inset-0 z-10 w-full h-full"></canvas>
            <div class="absolute inset-0 flex items-center justify-center z-0">
                <div class="w-24 h-24 rounded-full border border-cyan-500/20 bg-cyan-900/5 backdrop-blur-sm pulse-ring"></div>
                <div class="absolute w-36 h-36 rounded-full border border-white/5 opacity-30"></div>
            </div>
            <div class="absolute top-1/4 left-0 glass px-4 py-2.5 rounded-xl border border-white/10 transform -translate-x-6 animate-bounce" style="animation-duration: 4s;">
                <div class="text-[10px] text-slate-500 uppercase tracking-widest mb-1">Light-Weight</div>
                <div class="text-sm text-white font-mono font-medium">4.9MB</div>
            </div>
            <div class="absolute bottom-1/4 right-0 glass px-4 py-2.5 rounded-xl border border-white/10 transform translate-x-6 animate-bounce" style="animation-duration: 5s;">
                <div class="text-[10px] text-slate-500 uppercase tracking-widest mb-1">Lines of Code</div>
                <div class="text-sm text-emerald-400 font-mono font-medium">1k</div>
            </div>
        </div>

        <!-- CTA Button -->
        <div class="relative z-20 mb-32 group">
            <div class="absolute -inset-1 bg-gradient-to-r from-cyan-600 to-blue-600 rounded-xl blur opacity-30 group-hover:opacity-60 transition duration-500"></div>
            <button id="init-btn" class="relative px-10 py-5 bg-slate-900 rounded-xl leading-none flex items-center gap-4 border border-slate-800 hover:border-slate-700 transition-all duration-300">
                <span class="text-slate-200 font-semibold tracking-tight text-lg">Review Documentation</span>
                <svg class="text-cyan-400" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>
            </button>
        </div>
    </main>

</div>
