{# Skills Section #}
<section id="skills" style="min-height: 100vh; padding: var(--space-xl) var(--space-md); background: var(--soil);">
    <div class="wrap reveal">
        <h2 class="section-title">Skills & <em>Stack</em></h2>
        <div style="display: grid; gap: var(--space-lg); max-width: 900px; margin: 0 auto;">
            <div>
                <h3 style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: var(--space-sm);">Backend</h3>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                    <span class="tag">PHP</span>
                    <span class="tag">Symfony</span>
                    <span class="tag">Laravel</span>
                    <span class="tag">Node.js</span>
                    <span class="tag">MySQL</span>
                    <span class="tag">PostgreSQL</span>
                    <span class="tag">Docker</span>
                </div>
            </div>
            <div>
                <h3 style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: var(--space-sm);">Frontend</h3>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                    <span class="tag">React</span>
                    <span class="tag">Vue</span>
                    <span class="tag">TypeScript</span>
                    <span class="tag">JavaScript</span>
                    <span class="tag">HTML/CSS</span>
                </div>
            </div>
            <div>
                <h3 style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: var(--space-sm);">E-commerce</h3>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                    <span class="tag">WordPress</span>
                    <span class="tag">WooCommerce</span>
                    <span class="tag">Magento 2</span>
                    <span class="tag">Payment Gateways</span>
                    <span class="tag">Shipping APIs</span>
                </div>
            </div>
            <div>
                <h3 style="font-family: var(--mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ai2); margin-bottom: var(--space-sm);">AI & LLMs</h3>
                <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                    <span class="tag ai">OpenAI API</span>
                    <span class="tag ai">ChatGPT Integration</span>
                    <span class="tag ai">Prompt Engineering</span>
                    <span class="tag ai">n8n Automation</span>
                </div>
            </div>
        </div>
    </div>
</section>