{% extends "base.html" %}
{% block title %}{{ _('landing.title') }}{% endblock %}
{% block content %}
<!-- Hero -->
<div class="relative overflow-hidden">
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-gold-500/10 rounded-full blur-[120px] -z-10"></div>
    <div class="absolute bottom-0 right-0 w-[800px] h-[600px] bg-blue-900/10 rounded-full blur-[100px] -z-10"></div>

    <div class="max-w-7xl mx-auto px-4 py-28 text-center">
        <div class="inline-flex items-center gap-2 bg-white/5 border border-white/10 rounded-full px-4 py-1.5 mb-8 backdrop-blur-md animate-slide-up opacity-0" style="animation-fill-mode: forwards; animation-delay: 0ms;">
            <span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
            <span class="text-xs font-medium text-emerald-300 tracking-wide">{{ _('landing.hero_subtitle') }}</span>
        </div>
        
        <h1 class="text-5xl md:text-7xl font-serif font-bold text-white mb-8 leading-tight animate-slide-up opacity-0" style="animation-fill-mode: forwards; animation-delay: 200ms;">
            {{ _('landing.hero_h1_1') }} <br>
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 via-blue-500 to-blue-600">{{ _('landing.hero_h1_2') }}</span>
        </h1>
        
        <p class="text-xl text-slate-400 mb-6 max-w-3xl mx-auto font-light leading-relaxed animate-slide-up opacity-0" style="animation-fill-mode: forwards; animation-delay: 400ms;">
            {{ _('landing.hero_p') }}
        </p>

        <div class="flex flex-wrap gap-3 justify-center mb-10 text-sm animate-slide-up opacity-0" style="animation-fill-mode: forwards; animation-delay: 600ms;">
            <span class="bg-blue-500/10 text-blue-300 border border-blue-500/20 px-3 py-1 rounded-full">SWOT & PESTEL</span>
            <span class="bg-emerald-500/10 text-emerald-300 border border-emerald-500/20 px-3 py-1 rounded-full">Porter's Five Forces</span>
            <span class="bg-purple-500/10 text-purple-300 border border-purple-500/20 px-3 py-1 rounded-full">TAM/SAM/SOM</span>
            <span class="bg-gold-500/10 text-gold-300 border border-gold-500/20 px-3 py-1 rounded-full">Business Model Canvas</span>
            <span class="bg-red-500/10 text-red-300 border border-red-500/20 px-3 py-1 rounded-full">AI Video & Social Publishing</span>
            <span class="bg-cyan-500/10 text-cyan-300 border border-cyan-500/20 px-3 py-1 rounded-full">Investor CRM</span>
            <span class="bg-green-500/10 text-green-300 border border-green-500/20 px-3 py-1 rounded-full">Grants Matching</span>
            <span class="bg-orange-500/10 text-orange-300 border border-orange-500/20 px-3 py-1 rounded-full">Zapier + n8n + Make</span>
            <span class="bg-pink-500/10 text-pink-300 border border-pink-500/20 px-3 py-1 rounded-full">Kanban Board</span>
            <span class="bg-amber-500/10 text-amber-300 border border-amber-500/20 px-3 py-1 rounded-full">Prototyping & NDA</span>
            <span class="bg-indigo-500/10 text-indigo-300 border border-indigo-500/20 px-3 py-1 rounded-full">Role-Based System</span>
        </div>
        
        <div class="flex gap-6 justify-center animate-slide-up opacity-0" style="animation-fill-mode: forwards; animation-delay: 800ms;">
            <a href="{{ url_for('auth.register') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-4 rounded-lg font-semibold text-lg hover:scale-105 transition duration-300 shadow-lg shadow-blue-500/20">
                {{ _('landing.start_free') }}
            </a>
            <a href="#features" class="bg-slate-800/70 text-white px-10 py-4 rounded-lg font-semibold text-lg border border-slate-700 hover:bg-slate-800 transition backdrop-blur-sm">
                {{ _('landing.discover') }}
            </a>
        </div>
        
        <div class="mt-10 grid grid-cols-3 gap-8 max-w-lg mx-auto animate-slide-up opacity-0" style="animation-fill-mode: forwards; animation-delay: 1000ms;">
            <div>
                <div class="text-3xl font-bold text-white">+100</div>
                <div class="text-xs text-slate-500 mt-1">{{ _('landing.smart_features') }}</div>
            </div>
            <div>
                <div class="text-3xl font-bold text-white">30</div>
                <div class="text-xs text-slate-500 mt-1">{{ _('landing.integrated_systems') }}</div>
            </div>
            <div>
                <div class="text-3xl font-bold text-white">140+</div>
                <div class="text-xs text-slate-500 mt-1">API Route</div>
            </div>
        </div>
    </div>
</div>

<!-- How it works -->
<div id="how-it-works" class="max-w-7xl mx-auto px-4 py-24 border-t border-white/5">
    <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-serif font-bold text-white mb-4">{{ _('landing.how_title') }}</h2>
        <p class="text-slate-500 tracking-widest uppercase text-sm font-mono">Quantum-Speed Directed Diamond Architecture</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16 relative">
        <div class="hidden md:block absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-y-1/2 z-0"></div>

        <div class="glass p-8 rounded-2xl relative z-10 hover:translate-y-[-10px] transition duration-500 group border-t-2 border-t-blue-500/50">
            <div class="w-16 h-16 bg-blue-900/30 rounded-2xl flex items-center justify-center text-3xl mb-6 text-blue-400 group-hover:scale-110 transition border border-blue-500/20">1</div>
            <h3 class="text-xl font-bold text-white mb-3">{{ _('landing.step1_title') }}</h3>
            <p class="text-slate-400 text-sm leading-relaxed">{{ _('landing.step1_desc') }}</p>
        </div>
        
        <div class="glass p-8 rounded-2xl relative z-10 hover:translate-y-[-10px] transition duration-500 group border-t-2 border-t-emerald-500/50">
            <div class="w-16 h-16 bg-emerald-900/30 rounded-2xl flex items-center justify-center text-3xl mb-6 text-emerald-400 group-hover:scale-110 transition border border-emerald-500/20">2</div>
            <h3 class="text-xl font-bold text-white mb-3">{{ _('landing.step2_title') }}</h3>
            <p class="text-slate-400 text-sm leading-relaxed">{{ _('landing.step2_desc') }}</p>
        </div>
        
        <div class="glass p-8 rounded-2xl relative z-10 hover:translate-y-[-10px] transition duration-500 group border-t-2 border-t-purple-500/50">
            <div class="w-16 h-16 bg-purple-900/30 rounded-2xl flex items-center justify-center text-3xl mb-6 text-purple-400 group-hover:scale-110 transition border border-purple-500/20">3</div>
            <h3 class="text-xl font-bold text-white mb-3">{{ _('landing.step3_title') }}</h3>
            <p class="text-slate-400 text-sm leading-relaxed">{{ _('landing.step3_desc') }}</p>
        </div>
    </div>
</div>

<!-- Features Section -->
<div id="features" class="max-w-7xl mx-auto px-4 py-24 border-t border-white/5">
    <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-serif font-bold text-white mb-4">{{ _('landing.features_title') }}</h2>
        <p class="text-slate-400 max-w-2xl mx-auto">{{ _('landing.features_subtitle') }}</p>
    </div>

    <!-- Category 1: AI Analysis -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-blue-500/20 rounded-xl flex items-center justify-center text-blue-400 text-xl border border-blue-500/20">&#x1F9E0;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_ai') }}</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.swot') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.swot_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.pestel') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.pestel_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.porters') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.porters_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.vrio') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.vrio_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.tamsamsom') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.tamsamsom_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.bmc') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.bmc_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.lean_canvas') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.lean_canvas_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.viability_score') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.viability_score_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.gtm_strategy') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.gtm_strategy_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.mvp_path') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.mvp_path_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.usp_generator') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.usp_generator_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-blue-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.benchmarks') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.benchmarks_desc') }}</p>
            </div>
        </div>
    </div>

    <!-- Category 2: Financial -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-emerald-500/20 rounded-xl flex items-center justify-center text-emerald-400 text-xl border border-emerald-500/20">&#x1F4B0;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_financial') }}</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-emerald-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.interactive_charts') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.interactive_charts_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-emerald-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.scenario_simulator') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.scenario_simulator_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-emerald-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.revenue_streams') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.revenue_streams_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-emerald-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.cost_breakdown') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.cost_breakdown_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-emerald-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.multi_currency') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.multi_currency_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-emerald-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.zakat_vat') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.zakat_vat_desc') }}</p>
            </div>
        </div>
    </div>

    <!-- Category 3: Export & Presentations -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-purple-500/20 rounded-xl flex items-center justify-center text-purple-400 text-xl border border-purple-500/20">&#x1F4C4;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_export') }}</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-purple-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.pdf_report') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.pdf_report_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-purple-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.pitch_deck') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.pitch_deck_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-purple-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.gamma') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.gamma_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-purple-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.google_export') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.google_export_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-purple-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.pitch_email') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.pitch_email_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-purple-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.pdf_branding') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.pdf_branding_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-purple-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.share') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.share_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-purple-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.report_comparison') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.report_comparison_desc') }}</p>
            </div>
        </div>
    </div>

    <!-- Category 4: AI Marketing -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-red-500/20 rounded-xl flex items-center justify-center text-red-400 text-xl border border-red-500/20">&#x1F3AC;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_marketing') }}</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-red-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.video_generation') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.video_generation_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-red-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.video_script') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.video_script_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-red-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.social_publishing') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.social_publishing_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-red-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.whatsapp_campaigns') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.whatsapp_campaigns_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-red-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.campaign_dashboard') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.campaign_dashboard_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-red-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.brand_kit') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.brand_kit_desc') }}</p>
            </div>
        </div>
    </div>

    <!-- Category 5: AI Intelligence -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-gold-500/20 rounded-xl flex items-center justify-center text-gold-400 text-xl border border-gold-500/20">&#x1F50D;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_intelligence') }}</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-gold-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.business_advisor') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.business_advisor_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-gold-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.competitor_intelligence') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.competitor_intelligence_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-gold-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.legal_advisor') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.legal_advisor_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-gold-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.investor_matching') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.investor_matching_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-gold-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.user_stories') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.user_stories_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-gold-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.progress_tracker') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.progress_tracker_desc') }}</p>
            </div>
        </div>
    </div>

    <!-- Category 6: Saudi Market & Services -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-green-500/20 rounded-xl flex items-center justify-center text-green-400 text-xl border border-green-500/20">&#x1F1F8;&#x1F1E6;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_saudi') }}</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-green-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.saudi_incorporation') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.saudi_incorporation_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-green-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.saudi_incubators') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.saudi_incubators_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-green-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.vision_2030') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.vision_2030_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-green-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.saudi_regulations') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.saudi_regulations_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-green-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.local_templates') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.local_templates_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-green-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.website_builder') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.website_builder_desc') }}</p>
            </div>
        </div>
    </div>

    <!-- Category 7: Platform Features -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-cyan-500/20 rounded-xl flex items-center justify-center text-cyan-400 text-xl border border-cyan-500/20">&#x2699;&#xFE0F;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_platform') }}</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-cyan-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.2fa') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.2fa_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-cyan-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.email_verification') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.email_verification_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-cyan-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.dark_light_mode') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.dark_light_mode_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-cyan-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.onboarding') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.onboarding_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-cyan-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.notifications') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.notifications_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-cyan-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.api_marketplace') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.api_marketplace_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-cyan-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.bilingual') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.bilingual_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-cyan-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.stripe') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.stripe_desc') }}</p>
            </div>
        </div>
    </div>

    <!-- Category 11: Project Management (NEW) -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-pink-500/20 rounded-xl flex items-center justify-center text-pink-400 text-xl border border-pink-500/20">&#x1F4CB;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_project') }}</h3>
            <span class="text-xs bg-gold-500/20 text-gold-400 px-2 py-0.5 rounded-full">NEW</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-pink-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.kanban') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.kanban_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-pink-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.legal_generator') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.legal_generator_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-pink-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.financial_charts_interactive') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.financial_charts_interactive_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-pink-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.multi_currency_7') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.multi_currency_7_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-pink-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.custom_sections') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.custom_sections_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-pink-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.investor_portfolio') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.investor_portfolio_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-pink-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.pdf_report_branding') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.pdf_report_branding_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-pink-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.activity_feed') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.activity_feed_desc') }}</p>
            </div>
        </div>
    </div>

    <!-- Category 8: Prototyping & Manufacturing (NEW) -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-amber-500/20 rounded-xl flex items-center justify-center text-amber-400 text-xl border border-amber-500/20">&#x1F3ED;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_prototyping') }}</h3>
            <span class="text-xs bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded-full font-bold">NEW</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-amber-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.factory_directory') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.factory_directory_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-amber-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.prototype_request') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.prototype_request_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-amber-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.ai_specs') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.ai_specs_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-amber-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.ai_cost_estimate') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.ai_cost_estimate_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-amber-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.nda_generator') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.nda_generator_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-amber-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.nda_workflow') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.nda_workflow_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-amber-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.factory_panel') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.factory_panel_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-amber-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.quote_system') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.quote_system_desc') }}</p>
            </div>
        </div>
    </div>

    <!-- Category 9: Roles & Notifications (NEW) -->
    <div class="mb-16">
        <div class="flex items-center gap-3 mb-8">
            <div class="w-10 h-10 bg-indigo-500/20 rounded-xl flex items-center justify-center text-indigo-400 text-xl border border-indigo-500/20">&#x1F465;</div>
            <h3 class="text-2xl font-bold text-white">{{ _('landing.cat_roles') }}</h3>
            <span class="text-xs bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded-full font-bold">NEW</span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass p-5 rounded-xl border-l-2 border-l-indigo-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.user_roles') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.user_roles_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-indigo-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.role_dashboards') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.role_dashboards_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-indigo-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.smart_notifications') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.smart_notifications_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-indigo-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.marketplace') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.marketplace_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-indigo-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.market_monitor') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.market_monitor_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-indigo-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.kpi_tracking') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.kpi_tracking_desc') }}</p>
            </div>
            <div class="glass p-5 rounded-xl border-l-2 border-l-indigo-500/50">
                <h4 class="text-white font-semibold mb-1">{{ _('feature.project_roadmap') }}</h4>
                <p class="text-slate-500 text-sm">{{ _('feature.project_roadmap_desc') }}</p>
            </div>
        </div>
    </div>
</div>

<!-- Pricing -->
<div id="pricing" class="max-w-7xl mx-auto px-4 py-24 border-t border-white/5">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
        <!-- Free -->
        <div class="glass p-8 rounded-2xl border border-white/10">
            <h3 class="text-xl font-bold text-white mb-2">Free</h3>
            <div class="text-4xl font-bold text-white mb-1">$0</div>
            <div class="text-slate-500 text-sm mb-6">{{ _('landing.free_forever') }}</div>
            <ul class="space-y-3 text-sm text-slate-400 mb-8 ltr:text-left rtl:text-right">
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>تقريران شهرياً</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>جميع التحليلات الأساسية</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>AI Advisor (5 رسائل)</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-slate-600">&#10007;</span><span class="text-slate-500">تصدير PDF/PPTX</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-slate-600">&#10007;</span><span class="text-slate-500">فيديو تسويقي</span></li>
            </ul>
            <a href="{{ url_for('auth.register') }}" class="block text-center bg-white/10 text-white py-3 rounded-xl font-semibold hover:bg-white/20 transition">{{ _('landing.start_free') }}</a>
        </div>

        <!-- Pro -->
        <div class="glass p-8 rounded-2xl border-2 border-gold-500/50 relative">
            <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gold-500 text-black text-xs font-bold px-4 py-1 rounded-full">{{ _('landing.most_popular') }}</div>
            <h3 class="text-xl font-bold text-white mb-2">Pro</h3>
            <div class="text-4xl font-bold text-white mb-1">$29<span class="text-lg text-slate-400">{{ _('landing.per_month') }}</span></div>
            <div class="text-slate-500 text-sm mb-6">{{ _('landing.for_entrepreneurs') }}</div>
            <ul class="space-y-3 text-sm text-slate-400 mb-8 ltr:text-left rtl:text-right">
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>50 تقريراً شهرياً</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>تصدير PDF + PPTX + Gamma</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>AI Advisor (50 رسالة)</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>5 فيديوهات/شهر</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>نشر اجتماعي (5/شهر)</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>Competitor Intelligence</span></li>
            </ul>
            <a href="{{ url_for('auth.register') }}" class="block text-center bg-gold-500 text-black py-3 rounded-xl font-bold hover:bg-gold-400 transition">{{ _('landing.start_now') }}</a>
        </div>

        <!-- Enterprise -->
        <div class="glass p-8 rounded-2xl border border-white/10">
            <h3 class="text-xl font-bold text-white mb-2">Enterprise</h3>
            <div class="text-4xl font-bold text-white mb-1">$99<span class="text-lg text-slate-400">{{ _('landing.per_month') }}</span></div>
            <div class="text-slate-500 text-sm mb-6">{{ _('landing.for_companies') }}</div>
            <ul class="space-y-3 text-sm text-slate-400 mb-8 ltr:text-left rtl:text-right">
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>تقارير غير محدودة</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>كل مزايا Pro</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>حملات WhatsApp</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>إنشاء موقع + دومين</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>AI Brand Kit</span></li>
                <li class="flex items-center gap-2 rtl:flex-row-reverse"><span class="text-emerald-400">&#10003;</span><span>API Access</span></li>
            </ul>
            <a href="{{ url_for('auth.register') }}" class="block text-center bg-white/10 text-white py-3 rounded-xl font-semibold hover:bg-white/20 transition">{{ _('landing.contact_us') }}</a>
        </div>
    </div>
</div>

<!-- CTA -->
<div class="relative py-24 text-center overflow-hidden">
    <div class="absolute inset-0 bg-gold-600/5"></div>
    <div class="relative z-10 max-w-4xl mx-auto px-4">
        <h2 class="text-4xl md:text-5xl font-serif font-bold text-white mb-6">{{ _('landing.cta_title') }}</h2>
        <p class="text-slate-400 mb-8 text-lg">{{ _('landing.cta_subtitle') }}</p>
        <a href="{{ url_for('auth.register') }}" class="inline-flex items-center gap-3 bg-white text-black px-12 py-5 rounded-full font-bold text-lg hover:bg-slate-200 transition duration-300">
            <span>{{ _('landing.start_free') }}</span>
            <svg class="w-5 h-5 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
    </div>
</div>
{% endblock %}

{% block footer %}
<footer class="mt-32 py-12 bg-slate-900/50 border-t border-slate-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col items-center gap-6">
            <a href="/" class="group">
                <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Jadwa AI Logo" class="h-12 logo-glow opacity-80 group-hover:opacity-100 transition-opacity">
            </a>
            <!-- Renewal Badge Image -->
            <div class="flex flex-col items-center gap-2">
                <span class="text-sm text-slate-400">برعاية</span>
                <a href="https://sites.chamber.org.sa/Incubator" target="_blank" rel="noopener noreferrer" class="rounded-xl overflow-hidden shadow-lg shadow-emerald-500/20 hover:scale-105 transition-transform">
                    <img src="{{ url_for('static', filename='img/renewal-badge.png') }}" alt="Renew" class="h-48 w-auto">
                </a>
            </div>
            <div class="flex justify-center gap-6 text-sm text-slate-400">
                <a href="#" class="hover:text-blue-400 transition-colors">{{ _('footer.terms') }}</a>
                <a href="#" class="hover:text-blue-400 transition-colors">{{ _('footer.privacy') }}</a>
                <a href="#" class="hover:text-blue-400 transition-colors">{{ _('footer.support') }}</a>
                <a href="#" class="hover:text-blue-400 transition-colors">{{ _('footer.api') }}</a>
            </div>
            <div class="text-xs text-slate-500">
                &copy; 2026 INTELLIGENT INVESTMENT SYSTEMS. {{ _('footer.rights') }}.
            </div>
        </div>
    </div>
</footer>
{% endblock %}