{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@24.4.0/build/css/intlTelInput.css">
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<style>
    .iti {
        width: 100%;
        display: block;
    }

    /* 1. Eliminate any weird hover/focus effects on the flag selector */
    .iti__selected-flag,
    .iti__selected-flag:hover,
    .iti__selected-flag:focus,
    .iti__selected-flag:active,
    .iti__flag-container:hover .iti__selected-flag {
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 24px 0 0 24px !important;
    }

    /* 2. Standardize Main Input Field */
    .iti--allow-dropdown input, .iti--separate-dial-code input {
        padding-left: 100px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 3. Architectural Dropdown - Integrated Single Unit */
    .iti__country-list {
        padding: 0 !important;
        border-radius: 20px !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 30px 60px rgba(0,0,0,0.12) !important;
        z-index: 100 !important;
        background: #ffffff !important;
        width: 100% !important;
        min-width: 320px !important;
        margin-top: 10px !important;
        overflow-y: auto !important; /* Enable mouse scroll */
        max-height: 350px !important;
    }

    /* 4. Sticky Search Filter - Perfectly Flush & Integrated */
    .iti__search-container {
        position: sticky !important;
        top: 0 !important;
        background: #ffffff !important;
        z-index: 101 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    .iti__search-input {
        width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: #f8fafc !important;
        padding: 18px 24px !important;
        margin: 0 !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 14px !important;
        outline: none !important;
        border-radius: 20px 20px 0 0 !important; /* Match dropdown top corners */
        display: block !important;
    }
    .iti__search-input:focus {
        background: #ffffff !important;
        border-bottom: 1px solid #2563eb !important;
    }

    /* 5. List Item Interactions */
    .iti__country {
        padding: 12px 20px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 14px !important;
        color: #475569 !important;
        transition: background 0.2s ease !important;
    }
    .iti__country.iti__highlight {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
    }

    .iti__selected-dial-code {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        color: #0f172a;
        font-size: 14px;
        margin-left: 4px;
    }

    /* Scrollbar Styling */
    .iti__country-list::-webkit-scrollbar { width: 6px; }
    .iti__country-list::-webkit-scrollbar-track { background: transparent; }
    .iti__country-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }

    /* Mobile specific float restriction */
    @media (max-width: 767px) {
        @keyframes float-mobile {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-12px) rotate(2deg); }
        }
        .animate-float-mobile {
            animation: float-mobile 6s ease-in-out infinite reverse !important;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section: Master Architect Identity -->
<section id="hero" class="relative min-h-[90vh] flex items-center justify-center bg-white pt-32 pb-12 overflow-hidden">
    <!-- Sophisticated Layered Background -->
    <div class="absolute inset-0 tech-grid opacity-[0.15] pointer-events-none"></div>

    <!-- Large Decorative Text -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full text-center pointer-events-none z-0">
        <span class="text-[20vw] font-black text-slate-50 syne leading-none uppercase select-none opacity-40">STRATEGY</span>
    </div>

    <div class="max-w-7xl mx-auto px-6 md:px-8 w-full relative z-10">
        <div class="flex flex-col lg:flex-row items-center justify-between gap-16 lg:gap-32">

            <!-- Information Wing -->
            <div class="w-full lg:w-[55%] hero-content order-2 lg:order-1 text-center lg:text-left">
                <div class="inline-flex items-center space-x-3 px-5 py-2.5 rounded-2xl bg-blue-600 shadow-[0_20px_40px_rgba(37,99,235,0.25)] mb-10 shadow-sm">
                    <span class="relative flex h-2.5 w-2.5">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-200 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-white"></span>
                    </span>
                    <span class="text-[10px] font-black uppercase tracking-[0.35em] text-white inter">Architecting the future with</span>
                </div>

                <div class="relative mb-12">
                    <h2 class="text-blue-600 text-lg md:text-xl font-black syne mb-2 tracking-[0.4em] uppercase leading-none">Chief Executive Officer</h2>
                    <h1 class="text-5xl md:text-7xl lg:text-[8rem] font-black leading-[0.85] syne tracking-tighter text-slate-900 uppercase">
                        SADMAN <br>
                        SAKIB <br>
                        <span class="text-blue-600 relative inline-block">
                            JISAN<span class="text-slate-200">.</span>
                            <span class="absolute -bottom-2 left-0 w-full h-[12px] bg-blue-600/10 -z-10 rounded-full blur-md block"></span>
                        </span>
                    </h1>
                </div>

                <div class="max-w-xl mx-auto lg:mx-0 mb-16 relative text-left">
                    <p class="text-xl md:text-3xl text-slate-500 leading-tight font-medium inter mb-10 border-l-4 border-r-4 md:border-r-0 border-blue-600 px-8 md:pr-0 py-2 text-center md:text-left min-h-[5.5rem] md:min-h-[7rem] flex items-center">
                        <span id="typing-text"></span>
                    </p>
                    <div class="grid grid-cols-2 lg:flex items-center justify-center lg:justify-start lg:gap-12">
                        <div class="text-center lg:text-left border-r border-slate-100 lg:border-r-0 pr-4 lg:pr-0">
                            <span class="block text-[10px] font-black text-blue-600 uppercase tracking-widest inter mb-2">ENGINEERING</span>
                            <span class="block font-black text-sm syne text-slate-900 uppercase tracking-tighter">Future Technology</span>
                        </div>
                        <div class="text-center lg:text-left lg:border-l border-slate-100 pl-4 lg:pl-12">
                            <span class="block text-[10px] font-black text-blue-600 uppercase tracking-widest inter mb-2">FOCUS</span>
                            <span class="block font-black text-sm syne text-slate-900 uppercase tracking-tighter">Global Scalability</span>
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap gap-4 md:gap-6 justify-center lg:justify-start items-center">
                    <a href="#brands"
                       class="group relative px-12 py-6 bg-black text-white rounded-[24px] font-black text-xs tracking-[0.4em] overflow-hidden transition-all duration-500 hover:shadow-[0_40px_60px_-15px_rgba(0,0,0,0.2)] active:scale-95">
                        <span class="relative z-10 uppercase">Brand Portfolio</span>
                        <div class="absolute inset-0 bg-blue-600 translate-y-full group-hover:translate-y-0 transition-transform duration-500 cubic-bezier(0.85, 0, 0.15, 1)"></div>
                    </a>
                    <a href="#connect" class="flex items-center space-x-5 group p-2">
                        <div class="w-14 h-14 md:w-16 md:h-16 rounded-[20px] md:rounded-[24px] bg-white shadow-xl border border-slate-100 flex items-center justify-center group-hover:bg-blue-600 group-hover:border-blue-600 group-hover:text-white transition-all duration-500 transform group-hover:rotate-12">
                            <svg class="w-5 h-5 md:w-6 md:h-6 transform group-hover:rotate-45 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                        </div>
                        <span class="text-[10px] md:text-xs font-black tracking-[0.3em] syne uppercase border-b-2 border-transparent group-hover:border-blue-600 transition-all">Get in Touch</span>
                    </a>
                </div>
            </div>

            <!-- Image Visual Wing -->
            <div class="w-full lg:w-[40%] relative order-1 lg:order-2 flex justify-center items-center">
                <div class="relative w-full max-w-[480px] perspective-3000" id="hero-visual-wrap">
                    <!-- Architectural Floating Background -->
                    <div class="absolute -inset-10 border-2 border-slate-100 rounded-[100px] -z-10 rotate-6 opacity-50"></div>
                    <div class="absolute -inset-20 border border-slate-50 rounded-[120px] -z-20 -rotate-3 opacity-30"></div>

                    <!-- Main Container -->
                    <div id="hero-card" class="relative aspect-[4/5] rounded-[80px] overflow-hidden shadow-[0_120px_90px_-50px_rgba(0,0,0,0.12)] group bg-white border border-slate-100">

                        <!-- User Image -->
                        <img src="{% static 'images/sadman-sakib-jisan-hero.png' %}" alt="Sadman Sakib Jisan" class="absolute inset-0 w-full h-full object-contain p-0 group-hover:scale-105 transition-transform duration-1000">

                        <!-- ID Badge Overlay -->
                        <div id="founder-id-card" class="absolute bottom-6 left-12 right-12 md:bottom-8 md:left-16 md:right-16 lg:bottom-10 lg:left-24 lg:right-24 bg-slate-900/90 backdrop-blur-3xl border border-white/10 py-2.5 px-5 md:py-3 md:px-6 lg:py-4 lg:px-8 rounded-[24px] md:rounded-[30px] z-30 shadow-3xl transform origin-right">
                            <div class="flex justify-between items-center gap-4">
                                <div class="founder-card-content">
                                    <span class="text-[8px] md:text-[9px] font-black text-blue-400 uppercase tracking-[0.4em] block mb-0.5 md:mb-1 inter">FOUNDER</span>
                                    <h3 class="text-lg md:text-xl lg:text-2xl font-black syne text-white tracking-tighter uppercase leading-none">JISAN<span class="text-blue-600">.</span></h3>
                                </div>
                                <div class="w-8 h-8 md:w-10 md:h-10 lg:w-11 lg:h-11 rounded-lg bg-blue-600 flex items-center justify-center shadow-[0_0_12px_rgba(37,99,235,0.4)] shrink-0 founder-card-icon">
                                    <svg class="w-3 h-3 md:w-5.5 md:h-5.5 lg:w-6 lg:h-6 text-white fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                                </div>
                            </div>
                        </div>

                        <!-- Floating Data Accent -->
                        <div class="absolute top-10 right-10 w-24 h-24 rounded-full border-4 border-blue-600/20 flex items-center justify-center animate-spin-slow">
                            <div class="w-2 h-2 rounded-full bg-blue-600"></div>
                        </div>
                    </div>

                    <!-- Floating Floating Accents -->
                    <div id="float-badge-1" class="absolute -top-6 -right-4 md:-top-16 md:-right-12 bg-white text-slate-900 p-4 md:p-8 rounded-[24px] md:rounded-[40px] shadow-3xl z-40 border border-slate-100 animate-float flex flex-col items-center">
                        <span class="text-lg md:text-2xl font-black syne uppercase">9+ Years</span>
                        <span class="text-[8px] md:text-xs font-black text-blue-600 uppercase tracking-widest inter">Experience</span>
                    </div>

                    <div id="float-badge-2" class="absolute -bottom-6 -left-4 md:-bottom-12 md:-left-12 bg-blue-600 text-white py-3 px-6 md:py-5 md:px-10 rounded-[24px] md:rounded-[40px] shadow-3xl z-40 border border-blue-500 animate-float-delayed animate-float-mobile flex items-center space-x-3 md:space-x-4">
                         <div class="w-2 h-2 md:w-3 md:h-3 rounded-full bg-white animate-pulse"></div>
                         <span class="text-xs md:text-sm font-black syne tracking-widest uppercase">CEO</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

</section>

<!-- Leadership Architecture (Section 2: Tree Structure) -->
<section id="companies" class="pt-16 md:pt-20 pb-24 md:pb-40 bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-6 md:px-8">

        <!-- Header -->
        <div class="text-center mb-10 md:mb-16">
             <h2 class="text-4xl md:text-6xl font-black mb-6 syne leading-none tracking-tighter uppercase">Leadership <br><span class="text-blue-600 italic">Ecosystem.</span></h2>
             <p class="text-lg md:text-xl text-slate-500 max-w-2xl mx-auto font-medium inter">Directing global technology operations through a structured binary architecture of innovation and scale.</p>
        </div>

        <div class="relative leadership-tree-wrap">

            <!-- ROOT NODE: THE LEADER -->
            <div class="flex flex-col items-center relative z-20">
                <div class="w-32 h-32 md:w-36 md:h-36 rounded-full border-4 border-blue-600 p-1.5 shadow-[0_0_50px_rgba(37,99,235,0.15)] mb-6 transition-transform duration-700 hover:scale-110">
                    <div class="w-full h-full rounded-full overflow-hidden bg-slate-100 border-2 border-white">
                        <img src="{% static 'images/sadman-sakib-jisan-hero.png' %}" alt="Sadman Sakib Jisan" class="w-full h-full object-cover object-top">
                    </div>
                </div>

                <div class="text-center">
                    <h3 class="text-3xl md:text-4xl font-black syne text-slate-900 tracking-tighter uppercase mb-2">Sadman Sakib Jisan</h3>
                    <div class="inline-flex items-center space-x-3 px-6 py-1.5 rounded-full bg-slate-900 text-white shadow-xl">
                        <span class="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse"></span>
                        <span class="text-[10px] font-black uppercase tracking-[0.3em] inter">Founder &amp; CEO</span>
                    </div>
                </div>

                <!-- Vertical Trunk Start (Shortened) -->
                <div class="w-[2px] h-12 md:h-16 bg-gradient-to-b from-blue-600 to-blue-400 mt-4"></div>
            </div>

            <!-- BINARY BRANCHES -->
            <div class="relative">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20">
                    {% for company in companies %}
                    <div class="relative flex flex-col items-center company-node-branch">

                        <!-- Horizontal Branch Arm (Connects to the middle of the gap) -->
                        {% if forloop.first %}
                        <div class="absolute top-0 left-1/2 right-[-50%] h-[2px] bg-blue-400 hidden md:block"></div>
                        {% else %}
                        <div class="absolute top-0 right-1/2 left-[-50%] h-[2px] bg-blue-400 hidden md:block"></div>
                        {% endif %}

                        <!-- Vertical Connector to Branch -->
                        <div class="w-[2px] h-10 bg-blue-400 hidden md:block"></div>

                        <div class="company-card p-10 md:p-12 rounded-[50px] border border-slate-100 hover:border-blue-600/50 bg-slate-50/30 hover:bg-white hover:shadow-[0_60px_120px_rgba(0,0,0,0.06)] transition-all duration-700 group relative overflow-hidden w-full">
                            <div class="relative z-10">
                                <div class="flex items-center space-x-3 mb-8">
                                    <span class="w-10 h-px bg-blue-600 group-hover:w-20 transition-all duration-700"></span>
                                    <span class="text-[10px] font-black tracking-widest text-blue-600 syne uppercase">{{ company.role }}</span>
                                </div>

                                <h3 class="text-3xl md:text-4xl font-black syne mb-6 group-hover:text-blue-600 transition-colors leading-tight">{{ company.name }}</h3>
                                <p class="text-lg md:text-xl text-slate-500 mb-10 leading-relaxed font-medium inter">
                                    {{ company.description }}
                                </p>

                                <div class="flex items-center justify-between pt-10 border-t border-slate-100">
                                    <div class="flex flex-col">
                                        <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest inter mb-1">HQ Location</span>
                                        <span class="text-sm font-bold syne uppercase tracking-tight">{{ company.location }}</span>
                                    </div>
                                    <a href="{{ company.website_url }}" target="_blank" class="w-14 h-14 rounded-[20px] bg-black text-white flex items-center justify-center hover:bg-blue-600 hover:rotate-12 transition-all duration-500 shadow-xl">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Mobile Vertical Connector to next card -->
                        {% if not forloop.last %}
                        <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[2px] h-12 bg-blue-400 md:hidden transform translate-y-full"></div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Technical Data Watermark -->
            <div class="absolute -bottom-7 left-0 w-full text-center opacity-[0.022] pointer-events-none select-none hidden md:block">
                <span class="text-[12vw] font-black text-slate-900 syne leading-none uppercase tracking-[0.05em]">Binary Branch</span>
            </div>
        </div>
    </div>
</section>

<!-- Section 3: Neural Command Center (Expertise Matrix) -->
<section id="skills" class="pt-12 md:pt-16 pb-24 md:pb-48 bg-[#020617] text-white relative overflow-hidden">
    <!-- Deep Space Multi-Layered Glow -->
    <div class="absolute top-0 left-0 w-full h-full">
        <div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-600/10 blur-[120px] rounded-full"></div>
        <div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-indigo-600/10 blur-[100px] rounded-full"></div>
    </div>

    <div class="max-w-7xl mx-auto px-6 md:px-8 relative z-10">

        <!-- Section Header: The Technical Statement -->
        <div class="flex flex-col lg:flex-row items-center lg:items-end justify-between gap-12 mb-12 md:mb-16 text-center lg:text-left">
            <div class="max-w-3xl">
                <div class="inline-flex items-center space-x-3 px-4 py-1.5 rounded-full border border-blue-500/30 bg-blue-500/5 mb-8 mx-auto lg:mx-0">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500 shadow-[0_0_8px_#3b82f6]"></span>
                    </span>
                    <span class="text-[10px] font-black uppercase tracking-[0.4em] text-blue-400 inter">Knowledge Matrix</span>
                </div>
                <h2 class="text-4xl md:text-6xl font-black syne leading-none tracking-tighter uppercase">
                    Technical <br><span class="text-blue-600 italic">Synthesis.</span>
                </h2>
            </div>
            <div class="lg:w-1/3 text-center lg:text-right border-x-2 lg:border-l-0 lg:border-r-2 border-blue-600/30 px-8 lg:pl-0 lg:pr-8 py-2">
                <p class="text-lg md:text-xl text-slate-400 font-medium inter leading-relaxed">
                    A multi-dimensional mapping of <span class="text-white">Full-Stack Architecture</span> and <span class="text-blue-500">Autonomous Logic</span>. Systematic, scalable, and innovative.
                </p>
            </div>
        </div>

        <!-- THE ARCHITECTURAL MATRIX (4 POWER MODULES) -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 perspective-2000">

            <!-- Module 01: AI & NEURAL SYSTEMS -->
            <div class="skill-silo group p-1 md:p-1.5 rounded-[60px] bg-gradient-to-br from-blue-600/20 to-transparent transition-all duration-1000 hover:scale-[1.02]">
                <div class="h-full bg-[#03081c] rounded-[58px] p-10 md:p-14 relative overflow-hidden border border-white/5">
                    <!-- Internal Technical UI -->
                    <div class="absolute top-0 right-0 p-12 opacity-[0.02] group-hover:opacity-[0.05] transition-opacity">
                         <svg class="w-40 h-40" viewBox="0 0 100 100" fill="none" stroke="currentColor"><circle cx="50" cy="50" r="45" stroke-dasharray="5 5"/><path d="M50 5L50 95M5 50L95 50" stroke-width="0.5"/></svg>
                    </div>

                    <div class="relative z-10">
                        <div class="flex justify-between items-start mb-12">
                            <div class="flex flex-col">
                                <span class="text-[10px] font-black text-blue-500 uppercase tracking-[0.4em] mb-2 inter">Core 01</span>
                                <h3 class="text-3xl md:text-4xl font-black syne text-white uppercase tracking-tight">AI & Neural</h3>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-blue-600/10 flex items-center justify-center border border-blue-500/20 shadow-lg shadow-blue-500/5 group-hover:rotate-90 transition-transform duration-700">
                                <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-3 mb-16">
                            {% for skill in skills %}{% if skill.category == 'ai' %}
                            <div class="px-5 py-2.5 rounded-2xl bg-white/[0.03] border border-white/5 text-sm font-bold inter hover:bg-blue-600 hover:text-white hover:border-blue-600 hover:shadow-[0_0_20px_rgba(37,99,235,0.3)] transition-all duration-500 cursor-default">
                                {{ skill.name }}
                            </div>
                            {% endif %}{% endfor %}
                        </div>

                        <div class="flex items-end justify-between pt-10 border-t border-white/5">
                            <div class="flex flex-col">
                                <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest inter mb-1">Stability</span>
                                <span class="text-base font-black syne text-blue-500 uppercase">98.5% Optimal</span>
                            </div>
                            <div class="flex space-x-1">
                                <div class="w-1 h-6 bg-blue-600 rounded-full animate-pulse"></div>
                                <div class="w-1 h-4 bg-white/20 rounded-full"></div>
                                <div class="w-1 h-5 bg-blue-600 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Module 02: ARCHITECTURE & INFRA -->
            <div class="skill-silo group p-1 md:p-1.5 rounded-[60px] bg-gradient-to-br from-indigo-600/20 to-transparent transition-all duration-1000 hover:scale-[1.02]">
                <div class="h-full bg-[#03081c] rounded-[58px] p-10 md:p-14 relative overflow-hidden border border-white/5">
                    <div class="relative z-10">
                        <div class="flex justify-between items-start mb-12">
                            <div class="flex flex-col">
                                <span class="text-[10px] font-black text-blue-500 uppercase tracking-[0.4em] mb-2 inter">Core 02</span>
                                <h3 class="text-3xl md:text-4xl font-black syne text-white uppercase tracking-tight">Architecture</h3>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-indigo-600/10 flex items-center justify-center border border-indigo-500/20 group-hover:rotate-45 transition-transform duration-700">
                                <svg class="w-6 h-6 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-3 mb-16">
                            {% for skill in skills %}{% if skill.category == 'tool' %}
                            <div class="px-5 py-2.5 rounded-2xl bg-white/[0.03] border border-white/5 text-sm font-bold inter hover:bg-blue-600 hover:text-white transition-all duration-500 cursor-default">
                                {{ skill.name }}
                            </div>
                            {% endif %}{% endfor %}
                        </div>

                        <div class="flex items-end justify-between pt-10 border-t border-white/5">
                            <div class="flex flex-col">
                                <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest inter mb-1">Infrastructure</span>
                                <span class="text-base font-black syne text-blue-500 uppercase">High Scalability</span>
                            </div>
                            <div class="text-right">
                                <span class="text-[8px] font-bold text-white/10 mono uppercase tracking-widest block mb-1">Module: v.2026.08</span>
                                <div class="h-1 w-24 bg-white/5 rounded-full overflow-hidden"><div class="h-full bg-blue-600 w-4/5 shadow-[0_0_10px_#2563eb]"></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Module 03: FULL STACK ECOSYSTEMS -->
            <div class="skill-silo group p-1 md:p-1.5 rounded-[60px] bg-gradient-to-br from-blue-400/20 to-transparent transition-all duration-1000 hover:scale-[1.02]">
                <div class="h-full bg-[#03081c] rounded-[58px] p-10 md:p-14 relative overflow-hidden border border-white/5">
                    <div class="relative z-10">
                        <div class="flex justify-between items-start mb-12">
                            <div class="flex flex-col">
                                <span class="text-[10px] font-black text-blue-500 uppercase tracking-[0.4em] mb-2 inter">Core 03</span>
                                <h3 class="text-3xl md:text-4xl font-black syne text-white uppercase tracking-tight">Ecosystems</h3>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-blue-400/10 flex items-center justify-center border border-blue-400/20 group-hover:scale-110 transition-transform duration-700">
                                <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z M12 4v16 M4 12h16"></path></svg>
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-3 mb-16">
                            {% for skill in skills %}{% if skill.category == 'framework' %}
                            <div class="px-5 py-2.5 rounded-2xl bg-white/[0.03] border border-white/5 text-sm font-bold inter hover:bg-blue-600 hover:text-white transition-all duration-500 cursor-default">
                                {{ skill.name }}
                            </div>
                            {% endif %}{% endfor %}
                        </div>

                        <div class="flex items-end justify-between pt-10 border-t border-white/5">
                            <div class="flex flex-col">
                                <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest inter mb-1">Agility</span>
                                <span class="text-base font-black syne text-blue-500 uppercase">Enterprise Ready</span>
                            </div>
                            <div class="flex -space-x-2">
                                <div class="w-8 h-8 rounded-full border-2 border-[#03081c] bg-blue-600/20"></div>
                                <div class="w-8 h-8 rounded-full border-2 border-[#03081c] bg-blue-600/40"></div>
                                <div class="w-8 h-8 rounded-full border-2 border-[#03081c] bg-blue-600"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Module 04: CORE LANGUAGES -->
            <div class="skill-silo group p-1 md:p-1.5 rounded-[60px] bg-gradient-to-br from-slate-400/20 to-transparent transition-all duration-1000 hover:scale-[1.02]">
                <div class="h-full bg-[#03081c] rounded-[58px] p-10 md:p-14 relative overflow-hidden border border-white/5">
                    <div class="relative z-10">
                        <div class="flex justify-between items-start mb-12">
                            <div class="flex flex-col">
                                <span class="text-[10px] font-black text-blue-500 uppercase tracking-[0.4em] mb-2 inter">Core 04</span>
                                <h3 class="text-3xl md:text-4xl font-black syne text-white uppercase tracking-tight">Languages</h3>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:-rotate-12 transition-transform duration-700">
                                <svg class="w-6 h-6 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-3 mb-16">
                            {% for skill in skills %}{% if skill.category == 'language' %}
                            <div class="px-5 py-2.5 rounded-2xl bg-white/[0.03] border border-white/5 text-sm font-bold inter hover:bg-blue-600 hover:text-white transition-all duration-500 cursor-default">
                                {{ skill.name }}
                            </div>
                            {% endif %}{% endfor %}
                        </div>

                        <div class="flex items-end justify-between pt-10 border-t border-white/5">
                            <div class="flex flex-col">
                                <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest inter mb-1">Foundational</span>
                                <span class="text-base font-black syne text-blue-500 uppercase">Multi-Stack Flow</span>
                            </div>
                            <div class="text-right">
                                <div class="flex items-center space-x-2">
                                     <div class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_#22c55e]"></div>
                                     <span class="text-[10px] font-black syne uppercase text-white/40">Secure</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Massive Technical Background Label -->
    <div class="absolute -bottom-20 left-0 w-full text-center opacity-[0.015] pointer-events-none select-none hidden md:block">
        <span class="text-[12vw] font-black syne uppercase tracking-[0.2em] whitespace-nowrap">KNOWLEDGE</span>
    </div>
</section>

<!-- Section 4: Brand Ecosystem (Floating Portfolio) -->
<section id="brands" class="pt-12 md:pt-16 pb-24 md:pb-24 bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-6 md:px-8 mb-12 md:mb-16">
        <!-- Swapped Header Alignment (Right Side Focus) -->
        <div class="flex flex-col md:flex-row-reverse justify-between items-start md:items-end gap-12">
            <div class="max-w-2xl text-center md:text-right">
                <h2 class="text-4xl md:text-6xl font-black mb-6 syne leading-none tracking-tighter uppercase">Brand <br><span class="text-blue-600 italic">Portfolio.</span></h2>
                <p class="text-lg md:text-xl text-slate-500 font-medium inter">A curated list of global partners and industry leaders I've collaborated with to build high-scale infrastructure.</p>
            </div>
            <div class="hidden md:block border-l-2 border-blue-600 pl-8 py-2">
                <span class="text-[10px] font-black uppercase tracking-[0.5em] text-slate-300 inter">GLOBAL REACH</span>
                <p class="text-xs font-bold text-slate-400 mt-2 inter">Global Technical Influence</p>
            </div>
        </div>
    </div>

    <!-- Floating Marquee Lines -->
    <div class="flex flex-col gap-8 md:gap-12 w-full">

        <!-- Line 01: Left to Right -->
        <div class="marquee-track-wrapper w-full overflow-hidden flex whitespace-nowrap py-4">
            <div class="marquee-track-left flex items-center space-x-12 md:space-x-20 pr-12 md:pr-20">
                {% for i in "123" %}{% for brand in brands %}
                <a href="{{ brand.website_url }}" target="_blank" class="flex flex-col items-center group">
                    <div class="w-16 h-16 md:w-24 md:h-24 rounded-[30px] bg-slate-50 flex items-center justify-center p-4 border border-slate-100 group-hover:border-blue-600/30 group-hover:bg-white group-hover:shadow-2xl transition-all duration-500 transform group-hover:-rotate-3">
                        {% if brand.logo %}
                        <img src="{{ brand.logo.url }}" alt="{{ brand.name }}" class="max-w-full max-h-full object-contain grayscale group-hover:grayscale-0 transition-all duration-700">
                        {% else %}
                        <span class="text-2xl font-black syne text-slate-900 group-hover:text-blue-600 transition-colors uppercase">{{ brand.name|slice:":1" }}</span>
                        {% endif %}
                    </div>
                    <span class="mt-4 text-[10px] font-black tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors uppercase inter">{{ brand.name }}</span>
                </a>
                {% endfor %}{% endfor %}
            </div>
        </div>

        <!-- Line 02: Right to Left -->
        <div class="marquee-track-wrapper w-full overflow-hidden flex whitespace-nowrap py-4">
            <div class="marquee-track-right flex items-center space-x-12 md:space-x-20 pr-12 md:pr-20">
                {% for i in "123" %}{% for brand in brands reversed %}
                <a href="{{ brand.website_url }}" target="_blank" class="flex flex-col items-center group">
                    <div class="w-16 h-16 md:w-24 md:h-24 rounded-[30px] bg-slate-50 flex items-center justify-center p-4 border border-slate-100 group-hover:border-blue-600/30 group-hover:bg-white group-hover:shadow-2xl transition-all duration-500 transform group-hover:rotate-3">
                        {% if brand.logo %}
                        <img src="{{ brand.logo.url }}" alt="{{ brand.name }}" class="max-w-full max-h-full object-contain grayscale group-hover:grayscale-0 transition-all duration-700">
                        {% else %}
                        <span class="text-2xl font-black syne text-slate-900 group-hover:text-blue-600 transition-colors uppercase">{{ brand.name|slice:":1" }}</span>
                        {% endif %}
                    </div>
                    <span class="mt-4 text-[10px] font-black tracking-widest text-slate-300 group-hover:text-slate-900 transition-colors uppercase inter">{{ brand.name }}</span>
                </a>
                {% endfor %}{% endfor %}
            </div>
        </div>

    </div>
</section>

<!-- Section 5: Solutions & Blueprints (The Architectural Portfolio) -->
<section id="services" class="pt-12 md:pt-16 pb-24 md:pb-36 bg-white relative overflow-hidden">
    <!-- Subtle Blueprint Grid -->
    <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 40px 40px;"></div>

    <div class="max-w-7xl mx-auto px-6 md:px-8 relative z-10">

        <!-- Section Header: Centered & Authoritative -->
        <div class="flex flex-col items-center text-center mb-12 md:mb-16">
            <div class="inline-flex items-center space-x-3 px-4 py-1.5 rounded-full border border-slate-200 bg-slate-50 mb-10">
                <span class="w-1.5 h-1.5 rounded-full bg-blue-600 shadow-[0_0_10px_#2563eb]"></span>
                <span class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 inter">Core Expertise</span>
            </div>

            <h2 class="text-4xl md:text-6xl font-black syne leading-[0.9] tracking-tighter uppercase mb-12">
                Strategy <br> & <br> <span class="text-blue-600 italic">Execution.</span>
            </h2>

            <p class="text-xl md:text-2xl text-slate-500 max-w-3xl mx-auto font-medium inter leading-relaxed px-6">
                Transforming complex computational logic into <span class="text-black font-bold">Stable</span>, enterprise-grade system architectures.
            </p>
        </div>

        <!-- The Solution Grid: High-End Matrix -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
            {% for service in services %}
            <div class="service-folio-card group relative p-12 md:p-16 rounded-[50px] md:rounded-[60px] border border-slate-100 bg-slate-50/30 hover:bg-white hover:shadow-[0_80px_100px_rgba(0,0,0,0.04)] transition-all duration-700 overflow-hidden">

                <!-- Technical Background Detail -->
                <div class="absolute top-0 right-0 p-12 opacity-[0.05] group-hover:opacity-[0.1] transition-opacity">
                     <span class="text-8xl font-black syne">0{{ forloop.counter }}</span>
                </div>

                <div class="relative z-10 h-full flex flex-col">
                    <!-- Icon Module -->
                    <div class="w-20 h-20 rounded-[32px] bg-white shadow-2xl shadow-blue-600/5 flex items-center justify-center mb-12 border border-slate-50 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500">
                        {% if service.icon == 'layout' %}
                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2m0 10V7"></path></svg>
                        {% elif service.icon == 'brain' %}
                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
                        {% elif service.icon == 'code' %}
                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
                        {% else %}
                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                        {% endif %}
                    </div>

                    <h3 class="text-2xl md:text-4xl font-black syne mb-8 tracking-tighter group-hover:text-blue-600 transition-colors leading-none uppercase">
                        {{ service.title }}
                    </h3>

                    <p class="text-lg md:text-xl text-slate-500 leading-relaxed font-medium inter mb-12 flex-grow">
                        {{ service.description }}
                    </p>

                    <!-- Technical Footer -->
                    <div class="pt-10 border-t border-slate-100 flex items-center justify-between">
                        <div class="flex flex-col">
                            <span class="text-[9px] font-black text-slate-300 uppercase tracking-widest inter mb-1">
                                {% if forloop.counter == 1 %}Structural{% elif forloop.counter == 2 %}Intelligence{% elif forloop.counter == 3 %}Engineering{% else %}Strategic{% endif %}
                            </span>
                            <span class="text-xs font-bold syne text-slate-900">
                                {% if forloop.counter == 1 %}SYSTEM BLUEPRINTS{% elif forloop.counter == 2 %}NEURAL ECOSYSTEMS{% elif forloop.counter == 3 %}END-TO-END FLOW{% else %}GLOBAL OPERATIONS{% endif %}
                            </span>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white transition-all duration-500">
                             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                        </div>
                    </div>
                </div>

                <!-- Hover Accent -->
                <div class="absolute bottom-0 left-0 w-full h-2 bg-blue-600 translate-y-full group-hover:translate-y-0 transition-transform duration-500"></div>
            </div>
            {% endfor %}
        </div>

        <!-- Professional CTA Module -->
        <div class="mt-24 md:mt-30 p-12 md:p-20 rounded-[60px] md:rounded-[70px] bg-slate-900 text-white relative overflow-hidden text-center group">
            <div class="relative z-10">
                <span class="text-[10px] font-black text-blue-400 uppercase tracking-[0.6em] mb-8 block inter">Professional Engagement</span>
                <h2 class="text-3xl md:text-7xl font-black syne mb-12 leading-none uppercase tracking-tighter">Ready to <span class="italic text-blue-500">Architect</span> <br>Your Vision?</h2>

                <a href="mailto:{{ profile.email }}" class="inline-flex items-center space-x-6 bg-blue-600 text-white px-10 py-5 md:px-14 md:py-6 rounded-[24px] md:rounded-[30px] font-black text-[10px] md:text-xs tracking-widest hover:bg-white hover:text-slate-900 transition-all duration-700 shadow-2xl shadow-blue-900/40 transform hover:-translate-y-2">
                    <span>INITIATE PROJECT</span>
                    <svg class="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                </a>
            </div>

            <!-- Abstract Background Visual -->
            <div class="absolute inset-0 opacity-[0.05] pointer-events-none select-none overflow-hidden">
                <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[32vw] font-black syne leading-none uppercase">CEO</div>
            </div>
        </div>
    </div>
</section>

<!-- Section 6: Academic Synthesis (Evolution of Knowledge) -->
<section id="education" class="pt-12 md:pt-16 pb-24 md:pb-30 bg-[#020617] text-white relative overflow-hidden">
    <!-- Deep Space Multi-Layered Glow -->
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_100%,rgba(37,99,235,0.1)_0%,transparent_50%)]"></div>

    <div class="max-w-7xl mx-auto px-6 md:px-8 relative z-10">

        <!-- Section Header: Symmetrical Alignment -->
        <div class="text-center mb-12 md:mb-16">
            <div class="inline-flex items-center space-x-3 px-4 py-1.5 rounded-full border border-white/10 bg-white/5 backdrop-blur-md mb-10">
                <span class="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse"></span>
                <span class="text-[10px] font-black uppercase tracking-[0.4em] inter">Evolutionary Path</span>
            </div>

            <h2 class="text-4xl md:text-6xl font-black syne leading-none tracking-tighter uppercase mb-12">
                Knowledge <br><span class="text-blue-600 italic">Architecture.</span>
            </h2>

            <p class="text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto font-medium inter leading-relaxed">
                A structured journey from foundational science to <span class="text-white">Applied Engineering</span> and autonomous continuous mastery.
            </p>
        </div>

        <!-- Vertical Growth Tree -->
        <div class="relative max-w-5xl mx-auto">

            <!-- Central Trunk Line -->
            <div class="absolute left-1/2 top-0 bottom-0 w-px bg-gradient-to-b from-blue-600/50 via-slate-800 to-transparent -translate-x-1/2"></div>

            <div class="space-y-16 md:space-y-20">
                {% for edu in education %}
                <div class="edu-node-v3 relative group">
                    <!-- Date Stamp (Left for Even, Right for Odd in future, but centered for symmetry here) -->
                    <div class="flex flex-col items-center mb-6 relative z-20">
                        <div class="w-4 h-4 rounded-full bg-blue-600 shadow-[0_0_20px_#2563eb] border-4 border-[#020617] mb-6 group-hover:scale-125 transition-transform duration-500"></div>
                        <span class="px-6 py-1.5 rounded-full border border-white/10 bg-slate-900 text-blue-400 text-[10px] font-black tracking-widest inter uppercase">{{ edu.period }}</span>
                    </div>

                    <!-- Content Module -->
                    <div class="p-10 md:p-16 rounded-[60px] border border-white/5 bg-white/[0.02] backdrop-blur-3xl hover:bg-white/[0.04] hover:border-blue-600/20 transition-all duration-700 text-center relative overflow-hidden">
                        <!-- Technical Branding -->
                        <div class="mb-10 opacity-30 group-hover:opacity-100 transition-opacity duration-700">
                             <span class="text-[9px] font-black text-blue-600 uppercase tracking-[0.4em] block mb-2 inter">Phase 0{{ forloop.counter }}</span>
                             <div class="w-12 h-px bg-blue-600 mx-auto"></div>
                        </div>

                        <h3 class="text-3xl md:text-5xl font-black syne text-white tracking-tighter uppercase mb-6 leading-none">{{ edu.degree }}</h3>
                        <h4 class="text-lg md:text-xl font-bold text-blue-500 syne uppercase tracking-tight mb-10">{{ edu.institution }}</h4>

                        <p class="text-lg text-slate-400 leading-relaxed font-medium inter max-w-3xl mx-auto">
                            {{ edu.description }}
                        </p>

                        <!-- Aesthetic Background Node Number -->
                        <div class="absolute -bottom-4 -right-0 text-[12rem] font-black syne text-white/[0.01] group-hover:text-white/[0.03] transition-colors pointer-events-none select-none leading-none">
                            {{ forloop.counter }}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Future Oriented Closing -->
        <div class="mt-16 text-center">
             <div class="inline-block p-1 rounded-full bg-gradient-to-r from-blue-600 to-indigo-600">
                  <div class="px-10 py-4 rounded-full bg-[#020617] flex items-center space-x-4">
                       <div class="w-2 h-2 rounded-full bg-blue-500 animate-ping"></div>
                       <span class="text-xs font-black tracking-[0.3em] syne uppercase">Continuous Intelligence Integration: Ongoing</span>
                  </div>
             </div>
        </div>
    </div>
</section>

<!-- Performance Metrics (Stats) -->
<div class="pt-12 md:pt-16 pb-24 md:pb-10 bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-6 md:px-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12 text-center">
        <div class="p-8 md:p-10 rounded-[30px] md:rounded-[40px] border border-slate-50 bg-slate-50/20 group hover:bg-white hover:shadow-2xl transition-all duration-500">
            <div class="text-5xl md:text-7xl font-black mb-4 syne tracking-tighter text-black stat-counter"
                 data-target="9">0
            </div>
            <div class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-300 inter group-hover:text-blue-600 transition-colors">
                Years Prof. Exp
            </div>
        </div>
        <div class="p-8 md:p-10 rounded-[30px] md:rounded-[40px] border border-slate-50 bg-slate-50/20 group hover:bg-white hover:shadow-2xl transition-all duration-500">
            <div class="text-5xl md:text-7xl font-black mb-4 syne tracking-tighter text-black stat-counter"
                data-target="50">0
            </div>
            <div class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-300 inter group-hover:text-blue-600 transition-colors">
                Global Projects
            </div>
        </div>
        <div class="p-8 md:p-10 rounded-[30px] md:rounded-[40px] border border-slate-50 bg-slate-50/20 group hover:bg-white hover:shadow-2xl transition-all duration-500">
            <div class="text-5xl md:text-7xl font-black mb-4 syne tracking-tighter text-black stat-counter"
                 data-target="2">0
            </div>
            <div class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-300 inter group-hover:text-blue-600 transition-colors">
                Active Ventures
            </div>
        </div>
        <div class="p-8 md:p-10 rounded-[30px] md:rounded-[40px] border border-slate-50 bg-slate-50/20 group hover:bg-white hover:shadow-2xl transition-all duration-500">
            <div class="text-5xl md:text-7xl font-black mb-4 syne tracking-tighter text-black stat-counter"
                 data-target="100">0
            </div>
            <div class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-300 inter group-hover:text-blue-600 transition-colors">
                Client Satisfaction
            </div>
        </div>
    </div>
</div>

<!-- Section 8: Feedback Loop (Infinite Neural Stream - Light Edition) -->
<section id="testimonials" class="pt-12 md:pt-16 pb-24 md:pb-30 bg-white relative overflow-hidden">
    <!-- Subtle Light Depth Gradient -->
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(37,99,235,0.03)_0%,transparent_70%)]"></div>

    <div class="max-w-[100vw] relative z-10 overflow-hidden">
        <!-- Section Header -->
        <div class="max-w-7xl mx-auto px-6 md:px-8 text-center mb-12 md:mb-16">
            <div class="inline-flex items-center space-x-3 px-4 py-1.5 rounded-full border border-slate-200 bg-slate-50 mb-8">
                <span class="w-1.5 h-1.5 rounded-full bg-blue-600 shadow-[0_0_10px_#2563eb] animate-pulse"></span>
                <span class="text-[10px] font-black uppercase tracking-[0.4em] text-blue-600 inter">Global Intelligence Network</span>
            </div>
            <h2 class="text-4xl md:text-6xl font-black syne leading-none tracking-tighter uppercase mb-10 text-slate-900">Feedback <br><span class="text-blue-600 italic">Loop.</span></h2>
            <p class="text-lg md:text-xl text-slate-500 max-w-2xl mx-auto font-medium inter leading-relaxed">
                A continuous stream of global collaborations delivering technical stability and high-scale innovation.
            </p>
        </div>

        <!-- THE INFINITE STREAM (MARQUEE) -->
        <div class="testimonial-marquee-container relative flex overflow-hidden">
            <div class="testimonial-track flex animate-marquee-slow hover:pause space-x-8 md:space-x-12 w-max">
                {% for i in "123" %}{% for testimonial in testimonials %}
                <!-- Testimonial Module -->
                <div class="testimonial-module flex-shrink-0 w-[320px] md:w-[480px] p-10 md:p-12 rounded-[50px] bg-slate-50/50 border border-slate-100 backdrop-blur-3xl relative group hover:bg-white hover:border-blue-600/30 hover:shadow-[0_40px_80px_rgba(0,0,0,0.04)] transition-all duration-700 h-full flex flex-col">

                    <div class="relative z-10 flex flex-col h-full">
                        <!-- Top Detail -->
                        <div class="flex justify-between items-start mb-10">
                            <div class="flex flex-col">
                                <span class="text-[10px] font-black text-blue-600 uppercase tracking-widest mb-1 inter">{{ testimonial.tagline }}</span>
                                <span class="text-[8px] font-bold text-slate-400 uppercase tracking-tight inter">Project Success Story</span>
                            </div>
                            <div class="text-slate-200 group-hover:text-blue-600/20 transition-colors">
                                 <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H16.017C14.9124 8 14.017 7.10457 14.017 6V5C14.017 3.89543 14.9124 3 16.017 3H21.017C22.1216 3 23.017 3.89543 23.017 5V15C23.017 18.866 19.883 22 16.017 22H14.017V21ZM1 15C1 18.866 4.13401 22 8 22H10V21L10 18C10 16.8954 9.10457 16 8 16H5C4.44772 16 4 15.5523 4 15V9C4 8.44772 4.44772 8 5 8H8C9.10457 8 10 7.10457 10 6V5C10 3.89543 9.10457 3 8 3H3C1.89543 3 1 3.89543 1 5V15Z"></path></svg>
                            </div>
                        </div>

                        <!-- Feedback Content -->
                        <p class="text-lg md:text-xl text-slate-700 italic mb-12 leading-relaxed font-medium inter whitespace-normal flex-grow">
                            "{{ testimonial.quote }}"
                        </p>

                        <!-- Profile -->
                        <div class="pt-8 border-t border-slate-100 flex items-center space-x-6">
                            <div class="relative flex-shrink-0">
                                <div class="w-14 h-14 rounded-2xl bg-blue-600 flex items-center justify-center font-black text-white text-xl syne shadow-[0_10px_20px_rgba(37,99,235,0.2)]">
                                    {{ testimonial.client_name|first }}
                                </div>
                                <div class="absolute -bottom-1 -right-1 w-8 h-8 rounded-full border-4 border-white overflow-hidden shadow-lg">
                                    <img src="https://flagcdn.com/w80/{{ testimonial.country_code|lower }}.png" alt="{{ testimonial.country_name }}" class="w-full h-full object-cover">
                                </div>
                            </div>
                            <div class="overflow-hidden">
                                <h4 class="font-black text-lg syne text-slate-900 leading-none mb-1.5 uppercase truncate">{{ testimonial.client_name }}</h4>
                                <span class="text-[10px] font-bold text-blue-600 uppercase tracking-widest inter">{{ testimonial.country_name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}{% endfor %}
            </div>
        </div>

        <!-- Section Background Watermark (Horizontal) -->
        <div class="absolute bottom-4 left-0 w-full text-center opacity-[0.02] pointer-events-none select-none hidden md:block">
            <span class="text-[16vw] font-black syne text-slate-900 uppercase tracking-widest">FEEDBACK</span>
        </div>
    </div>
</section>

<!-- Section 9: The Journey (Professional Timeline) -->
<section id="experience" class="pt-12 md:pt-16 pb-24 md:pb-40 bg-white relative overflow-hidden">
    <!-- Subtle Light Depth Gradient -->
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(37,99,235,0.03)_0%,transparent_70%)]"></div>

    <div class="max-w-7xl mx-auto px-6 md:px-8 relative z-10">
        <!-- Section Header -->
        <div class="text-center mb-12 md:mb-16">
            <div class="inline-flex items-center space-x-3 px-4 py-1.5 rounded-full border border-slate-200 bg-slate-50 mb-8">
                <span class="w-1.5 h-1.5 rounded-full bg-blue-600 animate-pulse"></span>
                <span class="text-[10px] font-black uppercase tracking-[0.4em] text-blue-600 inter">Career Roadmap</span>
            </div>
            <h2 class="text-4xl md:text-6xl font-black syne leading-none tracking-tighter uppercase mb-10 text-slate-900">The <br><span class="text-blue-600 italic">Journey.</span></h2>
            <p class="text-lg md:text-xl text-slate-500 max-w-2xl mx-auto font-medium inter leading-relaxed">
                From a teenage freelancer to a global software architect and business leader.
            </p>
        </div>

        <div class="relative">
            <!-- Central Vertical Trunk -->
            <div class="absolute left-1/2 top-0 bottom-0 w-px bg-slate-100 hidden md:block -translate-x-1/2"></div>

            <div class="space-y-24 md:space-y-32">

                <!-- Milestone 01: 2017 -->
                <div class="relative flex flex-col md:flex-row items-center timeline-item-v2 group">
                    <div class="md:w-1/2 md:pr-20 text-center md:text-right order-2 md:order-1">
                        <div class="inline-block px-5 py-1.5 rounded-full border border-blue-600/10 bg-blue-600/5 text-blue-600 text-[10px] font-black tracking-widest mb-6 uppercase inter">2017 - INCEPTION</div>
                        <h3 class="text-3xl md:text-4xl font-black syne text-slate-900 uppercase mb-6 leading-none">Freelancing Career</h3>
                        <p class="text-lg text-slate-500 leading-relaxed font-medium inter">Initiated professional growth on Fiverr and Freelancer.com, establishing deep foundational expertise in full-stack development and computational logic.</p>
                    </div>

                    <div class="z-20 w-4 h-4 rounded-full bg-white border-4 border-blue-600 shadow-[0_0_20px_rgba(37,99,235,0.4)] transition-transform duration-500 group-hover:scale-150 order-1 md:order-2 mb-8 md:mb-0"></div>

                    <div class="md:w-1/2 md:pl-20 order-3"></div>
                </div>

                <!-- Milestone 02: 2022 -->
                <div class="relative flex flex-col md:flex-row items-center timeline-item-v2 group">
                    <!-- Background Watermark Aligned to this Milestone -->
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none opacity-[0.02] hidden md:flex z-0">
                        <span class="text-[16vw] font-black syne text-slate-900 uppercase tracking-tighter leading-none">EVOLUTION</span>
                    </div>

                    <div class="md:w-1/2 md:pr-20 order-2 md:order-1 relative z-10"></div>

                    <div class="z-20 w-4 h-4 rounded-full bg-white border-4 border-blue-600 shadow-[0_0_20px_rgba(37,99,235,0.4)] transition-transform duration-500 group-hover:scale-150 order-1 md:order-2 mb-8 md:mb-0"></div>

                    <div class="md:w-1/2 md:pl-20 text-center md:text-left order-3">
                        <div class="inline-block px-5 py-1.5 rounded-full border border-blue-600/10 bg-blue-600/5 text-blue-600 text-[10px] font-black tracking-widest mb-6 uppercase inter">2022 - ARCHITECTURE</div>
                        <h3 class="text-3xl md:text-4xl font-black syne text-slate-900 uppercase mb-6 leading-none">Neuroxie Established</h3>
                        <p class="text-lg text-slate-500 leading-relaxed font-medium inter">Founded Neuroxie in Bangladesh, focusing on complex software architecture, enterprise automation, and neural systems for global markets.</p>
                    </div>
                </div>

                <!-- Milestone 03: 2026 -->
                <div class="relative flex flex-col md:flex-row items-center timeline-item-v2 group">
                    <div class="md:w-1/2 md:pr-20 text-center md:text-right order-2 md:order-1">
                        <div class="inline-block px-5 py-1.5 rounded-full border border-blue-600/10 bg-blue-600/5 text-blue-600 text-[10px] font-black tracking-widest mb-6 uppercase inter">2026 - SCALE</div>
                        <h3 class="text-3xl md:text-4xl font-black syne text-slate-900 uppercase mb-6 leading-none">Xenavo Group LLC</h3>
                        <p class="text-lg text-slate-500 leading-relaxed font-medium inter">Expanded global operations with Xenavo Group LLC in the USA, providing high-scale architectural solutions and driving technical innovation at a worldwide level.</p>
                    </div>

                    <div class="z-20 w-4 h-4 rounded-full bg-white border-4 border-blue-600 shadow-[0_0_20px_rgba(37,99,235,0.4)] transition-transform duration-500 group-hover:scale-150 order-1 md:order-2 mb-8 md:mb-0"></div>

                    <div class="md:w-1/2 md:pl-20 order-3"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section 10: Connectivity Interface (Contact) -->
<section id="connect" class="pt-12 md:pt-16 pb-24 md:pb-40 bg-slate-50 relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-6 md:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 lg:gap-32 items-center">

            <!-- Left Wing: CEO Statement -->
            <div class="ceo-speech-wing text-center lg:text-left">
                <div class="inline-flex items-center space-x-3 px-4 py-1.5 rounded-full border border-blue-600/20 bg-blue-600/5 mb-12">
                    <span class="w-1.5 h-1.5 rounded-full bg-blue-600 animate-pulse"></span>
                    <span class="text-[10px] font-black uppercase tracking-[0.4em] text-blue-600 inter">Direct Message</span>
                </div>

                <h2 class="text-4xl md:text-6xl font-black syne leading-[1.1] tracking-tighter uppercase mb-12 text-slate-900 text-center lg:text-left">
                    A Word from <br><span class="text-blue-600 italic">the Founder.</span>
                </h2>

                <div class="relative group">
                    <!-- Elegant Quote Header -->
                    <div class="mb-8 text-blue-600/20 transition-transform duration-700 group-hover:scale-110 flex justify-center lg:justify-start">
                         <svg class="w-12 h-12 md:w-16 md:h-16" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H16.017C14.9124 8 14.017 7.10457 14.017 6V5C14.017 3.89543 14.9124 3 16.017 3H21.017C22.1216 3 23.017 3.89543 23.017 5V15C23.017 18.866 19.883 22 16.017 22H14.017V21ZM1 15C1 18.866 4.13401 22 8 22H10V21L10 18C10 16.8954 9.10457 16 8 16H5C4.44772 16 4 15.5523 4 15V9C4 8.44772 4.44772 8 5 8H8C9.10457 8 10 7.10457 10 6V5C10 3.89543 9.10457 3 8 3H3C1.89543 3 1 3.89543 1 5V15Z"></path></svg>
                    </div>

                    <p class="text-xl md:text-2xl text-slate-600 font-medium inter leading-relaxed mb-10 border-l-4 border-blue-600/30 pl-8 md:pl-12 italic min-h-[160px] flex items-center">
                        <span id="ceo-quote-typing"></span>
                    </p>
                </div>

                <div class="flex items-center justify-center lg:justify-start space-x-6 mt-16">
                    <div class="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-blue-600 p-1 shadow-[0_0_40px_rgba(37,99,235,0.15)] transition-transform duration-700 hover:scale-110">
                        <div class="w-full h-full rounded-full overflow-hidden bg-slate-100 border-2 border-white">
                            <img src="{% static 'images/sadman-sakib-jisan-hero.png' %}" alt="Sadman Sakib Jisan" class="w-full h-full object-cover object-top">
                        </div>
                    </div>
                    <div class="text-left">
                        <h4 class="text-xl font-black syne text-slate-900 uppercase leading-none mb-1">Sadman Sakib Jisan</h4>
                        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest inter">Founder &amp; CEO</p>
                    </div>
                </div>
            </div>

            <!-- Right Wing: Connectivity Form -->
            <div class="contact-form-wing relative group">
                <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-[62px] opacity-0 group-hover:opacity-20 blur-xl transition-opacity duration-700"></div>
                <div class="p-8 md:p-14 rounded-[60px] bg-white border border-slate-100 shadow-[0_60px_100px_rgba(0,0,0,0.03)] relative overflow-hidden">
                    <h3 class="text-3xl font-black syne text-slate-900 uppercase mb-10 tracking-tight">Let's Work <br>Together.</h3>

                    <form id="contact-form" action="{% url 'contact_submit' %}" method="POST" class="space-y-6 relative z-10">
                        {% csrf_token %}
                        <!-- Honeypot -->
                        <div style="display:none !important">
                            <label>Leave this field empty</label>
                            <input type="text" name="website_url_check" tabindex="-1" autocomplete="off">
                        </div>
                        <!-- Load Time -->
                        <input type="hidden" name="load_time" id="form-load-time">

                        <div class="space-y-2 text-left">
                            <label for="name" class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4 cursor-pointer">Full Name</label>
                            <input type="text" id="name" name="name" placeholder="E.g. Sadman Sakib" required class="w-full px-8 py-5 rounded-[24px] bg-slate-50 border border-slate-100 focus:border-blue-600 focus:bg-white outline-none transition-all inter font-medium">
                        </div>
                        <div class="space-y-2 text-left">
                            <label for="email" class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4 cursor-pointer">Email Address</label>
                            <input type="email" id="email" name="email" placeholder="email@example.com" required class="w-full px-8 py-5 rounded-[24px] bg-slate-50 border border-slate-100 focus:border-blue-600 focus:bg-white outline-none transition-all inter font-medium">
                        </div>

                        <div class="space-y-2 text-left">
                            <label for="phone" class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4 cursor-pointer">Phone Number</label>
                            <input type="tel" id="phone" name="phone" required class="w-full px-8 py-5 rounded-[24px] bg-slate-50 border border-slate-100 focus:border-blue-600 focus:bg-white outline-none transition-all inter font-medium">
                        </div>

                        <div class="space-y-2 text-left">
                            <label for="subject" class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4 cursor-pointer">Subject</label>
                            <input type="text" id="subject" name="subject" placeholder="What's on your mind?" required class="w-full px-8 py-5 rounded-[24px] bg-slate-50 border border-slate-100 focus:border-blue-600 focus:bg-white outline-none transition-all inter font-medium">
                        </div>

                        <div class="space-y-2 text-left">
                            <label for="message" class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-4 cursor-pointer">Message</label>
                            <textarea id="message" name="message" placeholder="Tell me more about your project..." rows="4" required class="w-full px-8 py-6 rounded-[32px] bg-slate-50 border border-slate-100 focus:border-blue-600 focus:bg-white outline-none transition-all inter font-medium resize-none"></textarea>
                        </div>

                        <!-- Turnstile Widget -->
                        <div class="cf-turnstile"
                             data-sitekey="{{ TURNSTILE_SITE_KEY }}"
                             data-action="contact_form"
                             data-callback="onTurnstileSuccess"
                             data-expired-callback="onTurnstileReset"
                             data-error-callback="onTurnstileReset"></div>

                        <button type="submit" id="submit-btn" disabled class="w-full py-6 rounded-[24px] bg-slate-400 text-white font-black text-xs tracking-[0.4em] uppercase cursor-not-allowed transition-all duration-500 flex items-center justify-center space-x-3">
                            <span class="btn-text">Send Message</span>
                            <span class="loading-spinner hidden w-5 h-5 border-4 border-white border-t-transparent rounded-full animate-spin"></span>
                        </button>
                    </form>

                    <!-- Background Element -->
                    <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-600/5 rounded-full blur-3xl pointer-events-none"></div>
                </div>
            </div>

        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@24.4.0/build/js/intlTelInput.min.js"></script>
<script>
    // Turnstile Callbacks
    function onTurnstileSuccess(token) {
        const btn = document.getElementById('submit-btn');
        btn.disabled = false;
        btn.classList.remove('bg-slate-400', 'cursor-not-allowed');
        btn.classList.add('bg-slate-900', 'hover:bg-blue-600', 'hover:shadow-2xl', 'hover:shadow-blue-900/40', 'transform', 'active:scale-[0.98]');
    }

    function onTurnstileReset() {
        const btn = document.getElementById('submit-btn');
        btn.disabled = true;
        btn.classList.add('bg-slate-400', 'cursor-not-allowed');
        btn.classList.remove('bg-slate-900', 'hover:bg-blue-600', 'hover:shadow-2xl', 'hover:shadow-blue-900/40', 'transform', 'active:scale-[0.98]');
    }

    // Set form load time
    document.getElementById('form-load-time').value = Date.now() / 1000;

    // Phone Input Initialization
    const phoneInput = document.querySelector("#phone");
    const iti = window.intlTelInput(phoneInput, {
        utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.4.0/build/js/utils.js",
        separateDialCode: true,
        initialCountry: "auto",
        countrySearch: true,
        geoIpLookup: function(success, failure) {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => success(data.country_code))
                .catch(() => success("us"));
        }
    });

    // Typing Animation
    new Typed('#typing-text', {
        strings: [
            'Building complex <span class="text-black font-extrabold italic">Scalable Solutions</span> and leading global innovation through high-level logic.',
            'Architecting robust <span class="text-black font-extrabold italic">Digital Ecosystems</span> that drive efficiency and sustainable growth.',
            'Transforming <span class="text-black font-extrabold italic">Technical Vision</span> into reality with precision and strategic depth.'
        ],
        typeSpeed: 40,
        backSpeed: 20,
        backDelay: 3000,
        loop: true,
        contentType: 'html',
        showCursor: true,
        cursorChar: '|',
    });

    // CEO Quote Typing
    let ceoTyped = null;
    ScrollTrigger.create({
        trigger: "#ceo-quote-typing",
        start: "top 90%",
        onEnter: () => {
            if (!ceoTyped) {
                    trackEvent('ceo_quote_typing_started');
                    ceoTyped = new Typed('#ceo-quote-typing', {
                        strings: [
                            '"Big vision means nothing if the execution fails at 2 AM. I love the messy, hard, \'impossible\' engineering problems, the ones other teams turn down. Got a challenge that scares you a little? Good. Tell me about it."'
                        ],
                        typeSpeed: 30,
                        showCursor: false,
                        loop: false,
                        contentType: 'html'
                    });
            }
        }
    });

    // Hero Entrance
    const heroTl = gsap.timeline();

    heroTl.from(".hero-content > *", { opacity: 0, y: 30, duration: 1, stagger: 0.1, ease: "power4.out" })
          .from("#hero-card", { opacity: 0, scale: 0.95, x: 50, duration: 1.5, ease: "expo.out" }, "-=0.8")
          .from("#founder-id-card", {
              scaleX: 0,
              opacity: 0,
              duration: 1.2,
              ease: "expo.out"
          }, "-=0.5")
          .from(".founder-card-content", {
              opacity: 0,
              x: -20,
              duration: 0.8,
              ease: "power2.out"
          }, "-=0.4")
          .from("#float-badge-1", { opacity: 0, scale: 0.8, x: 30, duration: 1, ease: "back.out(1.7)" }, "-=1")
          .from("#float-badge-2", { opacity: 0, scale: 0.8, x: -30, duration: 1, ease: "back.out(1.7)" }, "-=0.8");

    // Interactive Hero Card Parallax
    const heroCard = document.getElementById('hero-card');
    if(heroCard) {
        window.addEventListener('mousemove', (e) => {
            const x = (window.innerWidth / 2 - e.pageX) / 80;
            const y = (window.innerHeight / 2 - e.pageY) / 80;
            gsap.to(heroCard, {
                rotationY: x,
                rotationX: -y,
                duration: 1.5,
                ease: "power2.out"
            });
        });
    }

    // Leadership Tree Animation
    const treeTl = gsap.timeline({
        scrollTrigger: {
            trigger: ".leadership-tree-wrap",
            start: "top 70%"
        }
    });

    treeTl.from(".leadership-tree-wrap > div:first-child", { opacity: 0, scale: 0.8, y: 30, duration: 1, ease: "back.out(1.7)" })
          .from(".leadership-tree-wrap > div:first-child > div:last-child", { scaleY: 0, transformOrigin: "top", duration: 0.8 })
          .from(".company-node-branch", { opacity: 0, y: 30, stagger: 0.3, duration: 1, ease: "power4.out" }, "-=0.4");

    gsap.utils.toArray(".timeline-item-v2").forEach(item => {
        gsap.from(item, {
            scrollTrigger: {
                trigger: item,
                start: "top 85%"
            },
            opacity: 0,
            scale: 0.95,
            duration: 1
        });
    });

    // Skill Progress Bars
    gsap.utils.toArray(".skill-progress").forEach(bar => {
        gsap.to(bar, {
            scrollTrigger: {
                trigger: bar,
                start: "top 90%"
            },
            width: bar.getAttribute("data-width"),
            duration: 1.5,
            ease: "power2.out"
        });
    });

    // Stat Counters
    gsap.utils.toArray(".stat-counter").forEach(counter => {
        const target = parseInt(counter.getAttribute("data-target"));
        gsap.to(counter, {
            scrollTrigger: {
                trigger: counter,
                start: "top 90%"
            },
            innerText: target,
            duration: 2,
            snap: { innerText: 1 },
            ease: "power1.out"
        });
    });

    // AJAX Form Submission
    const contactForm = document.getElementById('contact-form');
    const submitBtn = document.getElementById('submit-btn');
    const btnText = submitBtn.querySelector('.btn-text');
    const spinner = submitBtn.querySelector('.loading-spinner');

    contactForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        // Custom Validation
        if (!iti.isValidNumber()) {
            alert('Please enter a valid phone number with country code.');
            phoneInput.focus();
            return;
        }

        // Loading State
        submitBtn.disabled = true;
        btnText.innerText = 'Transmitting...';
        spinner.classList.remove('hidden');

        const formData = new FormData(contactForm);
        // Append full phone number with dial code
        formData.set('phone', iti.getNumber());

        try {
            const response = await fetch(contactForm.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': formData.get('csrfmiddlewaretoken')
                }
            });

            if (!response.ok) {
                const errorData = await response.json().catch(() => ({ message: 'Server error' }));
                throw new Error(errorData.message || 'Transmission failed');
            }

            const data = await response.json();

            if (data.status === 'success') {
                showModal();
                trackEvent('contact_form_success', { subject: formData.get('subject') });
                contactForm.reset();
                if (typeof turnstile !== 'undefined') {
                    turnstile.reset();
                    onTurnstileReset();
                }
            } else {
                trackEvent('contact_form_error', { error_message: data.message });
                alert('Inquiry Error: ' + data.message);
                if (typeof turnstile !== 'undefined') {
                    turnstile.reset();
                    onTurnstileReset();
                }
            }
        } catch (error) {
            console.error('Submission error:', error);
            trackEvent('contact_form_failure', { error_message: error.message });
            alert('Transmission Failed: ' + error.message);
            if (typeof turnstile !== 'undefined') {
                turnstile.reset();
                onTurnstileReset();
            }
        } finally {
            // Reset Button State
            submitBtn.disabled = false;
            btnText.innerText = 'SEND MESSAGE';
            spinner.classList.add('hidden');
        }
    });

</script>
{% endblock %}