Engineering & Design Manifesto Feature Section

<section class="overflow-hidden bg-[#020617] border-slate-900/50 border-t pt-32 pb-32 relative">
    <!-- Background effects -->
    <div
        class="absolute left-0 top-1/2 -translate-y-1/2 w-96 h-96 bg-fuchsia-500/10 rounded-full blur-[100px] pointer-events-none">
    </div>
    <div class="absolute right-0 bottom-0 w-96 h-96 bg-cyan-500/5 rounded-full blur-[100px] pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">

            <!-- Left Column: Manifesto -->
            <div class="space-y-8">
                <h2 class="text-4xl md:text-6xl font-medium tracking-tight text-white leading-[1.1]">
                    Engineering Precision.
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 to-amber-400">Designer Soul.</span>
                </h2>

                <p class="text-lg md:text-xl font-light text-slate-400 leading-relaxed max-w-lg">
                    We are a collective of obsessed developers, creative designers, and strategic thinkers. We don't
                    just write code—we craft experiences. While our engineers ensure military-grade stability, our
                    designers ensure your automation feels human, intuitive, and flawless. We build systems that work
                    beautifully.
                </p>

                <div class="pt-8 border-t border-slate-800/60">
                    <h4 class="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-500 mb-6">Our Workspace</h4>
                    <div class="flex flex-wrap gap-4">
                        <!-- Tool 1 -->
                        <div
                            class="flex items-center gap-2 px-4 py-2 rounded-lg border border-slate-800 bg-slate-900/50 text-slate-300 text-xs font-mono">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" class="text-blue-400">
                                <polyline points="16 18 22 12 16 6"></polyline>
                                <polyline points="8 6 2 12 8 18"></polyline>
                            </svg>
                            VS Code
                        </div>
                        <!-- Tool 2 -->
                        <div
                            class="flex items-center gap-2 px-4 py-2 rounded-lg border border-slate-800 bg-slate-900/50 text-slate-300 text-xs font-mono">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" class="text-fuchsia-400">
                                <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
                                <path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
                                <path d="m2 2 7.586 7.586"></path>
                                <circle cx="11" cy="11" r="2"></circle>
                            </svg>
                            Figma
                        </div>
                        <!-- Tool 3 -->
                        <div
                            class="flex items-center gap-2 px-4 py-2 rounded-lg border border-slate-800 bg-slate-900/50 text-slate-300 text-xs font-mono">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" class="text-amber-400">
                                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                            </svg>
                            Strategy NB
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Competence Cards -->
            <div class="space-y-6">
                <!-- Card 1: Engineering -->
                <div
                    class="p-6 rounded-2xl border border-slate-800 bg-[#0A0F1E] hover:border-cyan-500/30 transition-colors group">
                    <div class="flex items-start gap-5">
                        <div
                            class="w-12 h-12 rounded-xl bg-cyan-950/30 border border-cyan-500/20 flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" class="text-cyan-400">
                                <rect width="18" height="18" x="3" y="3" rx="2"></rect>
                                <path d="M9 14l2 2 4-4"></path>
                            </svg>
                        </div>
                        <div class="">
                            <h3 class="text-lg font-medium text-white mb-2">Engineering Core</h3>
                            <p class="text-sm text-slate-400 leading-relaxed">Military-grade stability. We build
                                self-healing systems prepared for massive scale.</p>
                        </div>
                    </div>
                </div>

                <!-- Card 2: Creative (Active/Highlighted style in image) -->
                <div
                    class="p-6 rounded-2xl border border-slate-800 bg-[#0A0F1E] hover:border-fuchsia-500/30 transition-colors group relative overflow-hidden">
                    <div class="absolute inset-0 bg-fuchsia-500/5 opacity-0 group-hover:opacity-100 transition-opacity">
                    </div>
                    <div class="flex items-start gap-5 relative z-10">
                        <div
                            class="w-12 h-12 rounded-xl bg-fuchsia-950/30 border border-fuchsia-500/20 flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" class="text-fuchsia-400">
                                <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
                                <path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
                                <path d="m2 2 7.586 7.586"></path>
                                <circle cx="11" cy="11" r="2"></circle>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-white mb-2">Creative Studio</h3>
                            <p class="text-sm text-slate-400 leading-relaxed">Obsessing over every interaction.
                                Automation shouldn't feel robotic—it should feel magical.</p>
                        </div>
                    </div>
                </div>

                <!-- Card 3: Strategy -->
                <div
                    class="p-6 rounded-2xl border border-slate-800 bg-[#0A0F1E] hover:border-amber-500/30 transition-colors group">
                    <div class="flex items-start gap-5">
                        <div
                            class="w-12 h-12 rounded-xl bg-amber-950/30 border border-amber-500/20 flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" class="text-amber-400">
                                <line x1="12" x2="12" y1="20" y2="10"></line>
                                <line x1="18" x2="18" y1="20" y2="4"></line>
                                <line x1="6" x2="6" y1="20" y2="16"></line>
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-white mb-2">Strategy Lab</h3>
                            <p class="text-sm text-slate-400 leading-relaxed">Aligning tech with revenue. We ensure ROI
                                from Day 1.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>