---
---
<section id="skills" class="container mx-auto px-6 lg:px-12 py-32 bg-brand-panel border-y border-white/5">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
        <div class="col-span-1 md:col-span-2 lg:col-span-4 mb-6 animate-on-scroll slide-up">
            <h2 class="text-3xl md:text-4xl font-bold uppercase mb-3 tracking-tight">Technical Arsenal</h2>
            <p class="text-slate-500 font-mono text-sm tracking-wide">/// SOFTWARE & LANGUAGES</p>
        </div>

        <!-- Compositing -->
        <div class="animate-on-scroll slide-up stagger-1">
            <h3 class="text-base font-bold text-white uppercase mb-6 flex items-center gap-3 tracking-wide">
                <i data-lucide="layers" class="w-4 h-4 text-brand-accent"></i>
                Compositing
            </h3>
            <div class="flex flex-wrap gap-2">
                <span class="skill-tag">Nuke/NukeX</span>
                <span class="skill-tag">ComfyUI</span>
                <span class="skill-tag">After Effects</span>
                <span class="skill-tag">Photoshop</span>
                <span class="skill-tag">Deep Compositing</span>
                <span class="skill-tag">Live Action VFX</span>
            </div>
        </div>

        <!-- 3D -->
        <div class="animate-on-scroll slide-up stagger-2">
            <h3 class="text-base font-bold text-white uppercase mb-6 flex items-center gap-3 tracking-wide">
                <i data-lucide="box" class="w-4 h-4 text-brand-accent"></i>
                3D Generalist
            </h3>
            <div class="flex flex-wrap gap-2">
                <span class="skill-tag">Houdini</span>
                <span class="skill-tag">Blender</span>
                <span class="skill-tag">Maya</span>
                <span class="skill-tag">USD</span>
                <span class="skill-tag">Solaris/Karma</span>
                <span class="skill-tag">Unreal Engine</span>
                <span class="skill-tag">Substance</span>
                <span class="skill-tag">Procedural Gen</span>
            </div>
        </div>

        <!-- AI/ML -->
        <div class="animate-on-scroll slide-up stagger-3">
            <h3 class="text-base font-bold text-white uppercase mb-6 flex items-center gap-3 tracking-wide">
                <i data-lucide="cpu" class="w-4 h-4 text-brand-accent"></i>
                AI/ML Integration
            </h3>
            <div class="flex flex-wrap gap-2">
                <span class="skill-tag bg-brand-accent/10 border-brand-accent/40 text-brand-accent hover:bg-brand-accent/20">Stable Diffusion</span>
                <span class="skill-tag">LoRA Training</span>
                <span class="skill-tag">Dataset Prep</span>
                <span class="skill-tag">Synthetic Data</span>
                <span class="skill-tag">Prompt Engineering</span>
            </div>
        </div>

        <!-- Dev -->
        <div class="animate-on-scroll slide-up stagger-4">
            <h3 class="text-base font-bold text-white uppercase mb-6 flex items-center gap-3 tracking-wide">
                <i data-lucide="code" class="w-4 h-4 text-brand-accent"></i>
                Development
            </h3>
            <div class="flex flex-wrap gap-2">
                <span class="skill-tag">Python</span>
                <span class="skill-tag">JavaScript</span>
                <span class="skill-tag">React</span>
                <span class="skill-tag">Docker</span>
                <span class="skill-tag">Linux</span>
                <span class="skill-tag">Pipeline Dev</span>
            </div>
        </div>
    </div>
</section>