<!DOCTYPE html>
<html lang="ar" dir="rtl" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
  
  <title data-i18n-title="home_hero_title_2">TidyFactor | بناء الجيل القادم من منصات الويب الموجهة بالذكاء الاصطناعي</title>
  <meta name="title" content="TidyFactor | بناء الجيل القادم من منصات الويب الموجهة بالذكاء الاصطناعي">
  <meta name="description" content="منظومة معمارية مفتوحة تجمع بين منصات تشغيل الويب، أدوات المطورين، وحزم المهارات الهندسية للذكاء الاصطناعي.">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://tidyfactor.com/">

  <link rel="icon" type="image/png" href="assets/logo.png">

  <!-- Google Fonts: Alexandria & Cairo for headings, Tajawal for body, Fira Code for data -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@400;600;700;800;900&family=Cairo:wght@600;700;800;900&family=Fira+Code:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">

  <!-- Neo-Brutalist Stylesheet -->
  <link rel="stylesheet" href="css/tidyfactor-brutalist.css">
</head>
<body>

<div class="page-wrapper">

  <!-- Top Announcement Ribbon -->
  <div class="top-ribbon">
    <div class="container top-ribbon-inner">
      <span class="ribbon-pill">v1.6.1</span>
      <span data-i18n="top_ribbon_text">منظومة TidyFactor</span>
      <a href="vision.html" data-i18n="top_ribbon_link">
        الرؤية
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>
  </div>

  <!-- Header Navigation -->
  <header class="site-header">
    <div class="container nav-inner">
      <a href="index.html" class="brand">
        <img src="assets/logo.png" alt="TidyFactor" class="brand-logo-img">
        <span>TidyFactor</span>
      </a>

      <nav>
        <ul class="nav-menu">
          <li><a href="vision.html" data-i18n="nav_vision">الرؤية</a></li>
          <li><a href="ecosystem.html" data-i18n="nav_ecosystem">المعمارية</a></li>
          <li><a href="products.html" data-i18n="nav_products">المنتجات</a></li>
          <li><a href="skills.html" data-i18n="nav_skills">المهارات</a></li>
          <li><a href="/documentation/" data-i18n="nav_docs">التوثيق</a></li>
          <li>
            <a href="https://github.com/TidyFactor" target="_blank" style="display: inline-flex; align-items: center; gap: 4px;">
              GitHub
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"/></svg>
            </a>
          </li>
        </ul>
      </nav>

      <div class="nav-actions">
        <button id="langToggle" class="btn-icon-ctrl" title="تبديل اللغة / Switch Language">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="2" y1="12" x2="22" y2="12"></line>
            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
          </svg>
        </button>

        <button id="themeToggle" class="btn-icon-ctrl" title="تبديل المظهر / Toggle Theme">
          <svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
          </svg>
        </button>
      </div>
    </div>
  </header>

  <!-- Mobile Quick Nav Strip -->
  <div class="mobile-nav-strip">
    <a href="index.html" class="active" data-i18n="nav_home">الرئيسية</a>
    <a href="vision.html" data-i18n="nav_vision">الرؤية</a>
    <a href="ecosystem.html" data-i18n="nav_ecosystem">المعمارية</a>
    <a href="products.html" data-i18n="nav_products">المنتجات</a>
    <a href="skills.html" data-i18n="nav_skills">المهارات</a>
    <a href="/documentation/" data-i18n="nav_docs">التوثيق</a>
  </div>

  <!-- Main Content Body -->
  <main>

    <!-- Hero Section -->
    <section class="hero-section">
      <div class="container">
        <span class="hero-pill-badge" data-i18n="home_hero_pill">[SPECIFICATION: AI-NATIVE WEB PLATFORMS]</span>
        
        <h1 class="hero-title">
          <span data-i18n="home_hero_title_1">بناء الجيل القادم من</span>
          <br>
          <span class="hero-title-highlight" data-i18n="home_hero_title_2">منصات الويب الموجهة بالذكاء الاصطناعي</span>
        </h1>

        <p class="hero-desc" data-i18n="home_hero_desc">
          TidyFactor هي منظومة معمارية مفتوحة تجمع بين <bdi>منصات تشغيل الويب</bdi>، و<bdi>أدوات المطورين</bdi>، و<bdi>حزم المهارات الهندسية</bdi> لبناء برمجيات مستدامة، بسيطة، ومصممة للتعاون الأصيل بين الإنسان والآلة.
        </p>

        <div class="hero-cta-group">
          <a href="ecosystem.html" class="btn-brutalist-primary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
            <span data-i18n="home_cta_explore_eco">استكشف المنظومة الشاملة</span>
          </a>
          <a href="products.html" class="btn-brutalist-secondary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
            <span data-i18n="home_cta_explore_go">تجربة منصة Go CMS الحية</span>
          </a>
        </div>
      </div>
    </section>

    <!-- The Web Is Changing Section -->
    <section class="section-block" style="background: var(--bg-surface-elevated);">
      <div class="container">
        <div class="section-heading-box">
          <span class="section-tag-pill" data-i18n="home_changing_tag">THE PARADIGM SHIFT</span>
          <h2 class="section-main-title" data-i18n="home_changing_title">الويب يتغير: من كتابة الكود إلى التعاون مع الوكلاء</h2>
          <p class="section-lead-desc" data-i18n="home_changing_desc">
            الذكاء الاصطناعي لم يجعل التطوير أسرع فحسب، بل غيّر جذرياً طريقة فهم وصيانة وتطوير البرمجيات. المنظومات القديمة صُممت ليكتبها البشر سطراً بسطر؛ أما برمجيات الغد فيجب أن تُصمم لتكون مفهومة للبشر والوكلاء المستقلين على حد سواء.
          </p>
        </div>
      </div>
    </section>

    <!-- The Two Product Pillars Section -->
    <section class="section-block">
      <div class="container">
        <div class="section-heading-box">
          <span class="section-tag-pill" data-i18n="home_pillars_tag">CORE PILLARS</span>
          <h2 class="section-main-title" data-i18n="home_pillars_title">ركيزتا المنظومة: بناء المنصة وبناء البرمجيات بالذكاء الاصطناعي</h2>
          <p class="section-lead-desc" data-i18n="home_pillars_desc">
            نموذج متكامل يجمع بين منصة الويب المستقلة وطبقة الذكاء الهندسي تحت سقف مبادئ معمارية واحدة.
          </p>
        </div>

        <div class="pillars-grid-2">
          <!-- Pillar 1: Go CMS -->
          <div class="pillar-card">
            <div>
              <div class="pillar-header-strip">
                <span class="pillar-badge badge-amber" data-i18n="pillar_go_badge">SOFTWARE PLATFORM</span>
                <span style="font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);">v1.6.1</span>
              </div>
              <h3 class="pillar-title" data-i18n="pillar_go_title">TidyFactor Go</h3>
              <div class="pillar-motto" data-i18n="pillar_go_motto">// Build the platform.</div>
              <p class="pillar-body" data-i18n="pillar_go_body">
                منصة محتوى خفيفة ومحمولة لبناء وإدارة مواقع الويب، تعمل بدون خوادم قواعد بيانات منفصلة على SQLite 3 بوضع WAL الفائق وواجهة React 19.
              </p>
              <ul class="pillar-features">
                <li>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  <span data-i18n="pillar_go_f1">معمارية وثائق JSON ذاتية التعافي وخالية من التعقيد.</span>
                </li>
                <li>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  <span data-i18n="pillar_go_f2">جاهزية فورية للنشر (Zero-Build) على استضافات cPanel/WHM.</span>
                </li>
                <li>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  <span data-i18n="pillar_go_f3">مساعد ذكاء اصطناعي مدمج بـ Google Gemini لإدارة وتوليد المحتوى.</span>
                </li>
              </ul>
            </div>
            <div class="pillar-footer">
              <a href="products.html" class="btn-brutalist-primary" style="padding: 7px 14px; font-size: 0.8rem;" data-i18n="pillar_go_btn">استكشف منصة Go CMS</a>
              <span style="font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted);">Self-Contained • Ready</span>
            </div>
          </div>

          <!-- Pillar 2: Skills -->
          <div class="pillar-card">
            <div>
              <div class="pillar-header-strip">
                <span class="pillar-badge badge-cyan" data-i18n="pillar_skills_badge">AI ENGINEERING</span>
                <span style="font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);">10 Skills</span>
              </div>
              <h3 class="pillar-title" data-i18n="pillar_skills_title">TidyFactor Skills</h3>
              <div class="pillar-motto" data-i18n="pillar_skills_motto">// Build with AI.</div>
              <p class="pillar-body" data-i18n="pillar_skills_body">
                طبقة المعرفة والتشغيل المعماري لوكلاء البرمجة بالذكاء الاصطناعي (Google Antigravity, Claude Code, Cursor, Codex) لضمان العمل المنضبط داخل المشاريع الحقيقية.
              </p>
              <ul class="pillar-features">
                <li>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  <span data-i18n="pillar_skills_f1">مسارات عمل حتمية مع نقاط تحقق وفحص صارمة.</span>
                </li>
                <li>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  <span data-i18n="pillar_skills_f2">إفصاح تدريجي للسياق (Progressive Disclosure) بمدخل ~350 tokens.</span>
                </li>
                <li>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  <span data-i18n="pillar_skills_f3">تغطية كاملة لمسارات التصميم، الهندسة، التوثيق، والنمو.</span>
                </li>
              </ul>
            </div>
            <div class="pillar-footer">
              <a href="skills.html" class="btn-brutalist-primary" style="padding: 7px 14px; font-size: 0.8rem;" data-i18n="pillar_skills_btn">استكشف مكتبة المهارات</a>
              <span style="font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted);">Multi-Agent • Active</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- The 4 Layers Section -->
    <section class="section-block" style="background: var(--bg-surface-elevated);">
      <div class="container">
        <div class="section-heading-box">
          <span class="section-tag-pill" data-i18n="home_layers_tag">SYSTEM ARCHITECTURE</span>
          <h2 class="section-main-title" data-i18n="home_layers_title">طبقات المنظومة الأربع: كيف تتكامل الأدوات معاً؟</h2>
          <p class="section-lead-desc" data-i18n="home_layers_desc">
            «كل أداة تعمل بكفاءة بمفردها؛ وعندما تجتمع معاً توفر بيئة تطوير وإنتاج متكاملة.»
          </p>
        </div>

        <div class="layers-grid-4">
          <div class="layer-card-unit">
            <div>
              <div class="layer-num">[01 // PLATFORMS]</div>
              <h3 class="layer-title" data-i18n="layer_1_title">01. المنصات (Platforms)</h3>
              <p class="layer-desc" data-i18n="layer_1_desc">منصات برمجية كاملة لبناء وتشغيل المواقع وتطبيقات الويب الحديثة (TidyFactor Go CMS ومستقبلاً Studio و Cloud).</p>
            </div>
            <div class="layer-tags">
              <span class="layer-tag">TidyFactor Go</span>
              <span class="layer-tag">Studio</span>
            </div>
          </div>

          <div class="layer-card-unit">
            <div>
              <div class="layer-num">[02 // TOOLS]</div>
              <h3 class="layer-title" data-i18n="layer_2_title">02. أدوات المطورين (Tools)</h3>
              <p class="layer-desc" data-i18n="layer_2_desc">حزم سطر الأوامر وأدوات الأتمتة والتحويل وتحديث المشاريع القائمة وربط الأنظمة الخارجية (CLI, Convert, SDKs).</p>
            </div>
            <div class="layer-tags">
              <span class="layer-tag">CLI</span>
              <span class="layer-tag">Convert</span>
            </div>
          </div>

          <div class="layer-card-unit">
            <div>
              <div class="layer-num">[03 // AI INTELLIGENCE]</div>
              <h3 class="layer-title" data-i18n="layer_3_title">03. الذكاء الهندسي (AI Engineering)</h3>
              <p class="layer-desc" data-i18n="layer_3_desc">حزم المهارات المتخصصة التي تمنح وكلاء البرمجة السياق المعماري وقواعد العمل ومسارات التحقق المنضبطة (Skills).</p>
            </div>
            <div class="layer-tags">
              <span class="layer-tag">Design</span>
              <span class="layer-tag">Engineering</span>
              <span class="layer-tag">Doc</span>
            </div>
          </div>

          <div class="layer-card-unit">
            <div>
              <div class="layer-num">[04 // BUILDING BLOCKS]</div>
              <h3 class="layer-title" data-i18n="layer_4_title">04. مكعبات البناء (Building Blocks)</h3>
              <p class="layer-desc" data-i18n="layer_4_desc">مكونات واجهات وقوالب ومخططات بيانات قابلة لإعادة الاستخدام مبنية على البيانات المهيكلة والاستدامة طويلة الأمد.</p>
            </div>
            <div class="layer-tags">
              <span class="layer-tag">Components</span>
              <span class="layer-tag">Schemas</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- The TidyFactor Way Section -->
    <section class="section-block">
      <div class="container">
        <div class="section-heading-box">
          <span class="section-tag-pill" data-i18n="home_way_tag">THE TIDYFACTOR WAY</span>
          <h2 class="section-main-title" data-i18n="home_way_title">طريقة TidyFactor: البساطة قبل الاستعراض</h2>
          <p class="section-lead-desc" data-i18n="home_way_desc">
            نحن لا نطور البرمجيات لحشو أكبر عدد من الميزات غير الضرورية، بل نصمم أنظمة تبقى سهلة الفهم وقابلة للصيانة لسنوات طويلة.
          </p>
        </div>

        <div class="tenets-grid">
          <div class="tenet-card">
            <h3 class="tenet-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
              <span data-i18n="tenet_1_title">البساطة قبل الحيل البرمجية</span>
            </h3>
            <p class="tenet-desc" data-i18n="tenet_1_desc">Simple before clever. المعمارية الناجحة تقلل التعقيد وتجعل النظام أكثر وضوحاً كلما كبر حجمه.</p>
          </div>

          <div class="tenet-card">
            <h3 class="tenet-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              <span data-i18n="tenet_2_title">المحمولية قبل التبعية الاحتكارية</span>
            </h3>
            <p class="tenet-desc" data-i18n="tenet_2_desc">Portable before proprietary. بياناتك ومشاريعك ملكك بالكامل عبر صيغ JSON وMarkdown المفتوحة.</p>
          </div>

          <div class="tenet-card">
            <h3 class="tenet-title">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
              <span data-i18n="tenet_3_title">الخفة قبل التضخم</span>
            </h3>
            <p class="tenet-desc" data-i18n="tenet_3_desc">Small before bloated. أدوات سريعة ومستقلة تؤدي وظيفتها بدقة بدون حزم زائدة أو بيئات تشغيل معقدة.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Terminal Skill Discovery Console -->
    <section class="section-block" style="background: var(--bg-surface-elevated);">
      <div class="container">
        <div class="section-heading-box">
          <span class="section-tag-pill">CLI INTERACTION</span>
          <h2 class="section-main-title">محاكي تثبيت واستدعاء المهارات الهندسية</h2>
          <p class="section-lead-desc">استدعاء فوري لحزم المهارات في بيئات Google Antigravity و Claude Code و Cursor و Codex.</p>
        </div>

        <div class="terminal-wrapper">
          <div class="terminal-header">
            <div class="terminal-dots">
              <span class="terminal-dot dot-red"></span>
              <span class="terminal-dot dot-yellow"></span>
              <span class="terminal-dot dot-green"></span>
            </div>
            <div class="terminal-tab-group">
              <button class="terminal-tab-btn active" onclick="switchTab(0)">Next.js SaaS</button>
              <button class="terminal-tab-btn" onclick="switchTab(1)">Doc Generator</button>
              <button class="terminal-tab-btn" onclick="switchTab(2)">Styler (UI/RTL)</button>
              <button class="terminal-tab-btn" onclick="switchTab(3)">Marketing Engine</button>
              <button class="terminal-tab-btn" onclick="switchTab(4)">Cinematic Kit</button>
            </div>
          </div>
          <div class="terminal-body-box">
            <div id="tab-0" class="tab-pane">
              <p style="color: #64748B;"># Multi-Tenant Next.js 16 + Postgres RLS + Dev-Perf Engine</p>
              <div class="terminal-row">
                <span class="terminal-cmd-str"><span style="color: #00F0FF;">$</span> npx @alwkala/tidyfactor-next add-skill</span>
                <button class="btn-copy-code" onclick="copyCmd('npx @alwkala/tidyfactor-next add-skill', this)">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  <span>Copy</span>
                </button>
              </div>
            </div>
            <div id="tab-1" class="tab-pane" style="display: none;">
              <p style="color: #64748B;"># Codebase Interview, API Reference Generator & Docsify Engine</p>
              <div class="terminal-row">
                <span class="terminal-cmd-str"><span style="color: #00F0FF;">$</span> npx @alwkala/tidyfactor-doc add-skill</span>
                <button class="btn-copy-code" onclick="copyCmd('npx @alwkala/tidyfactor-doc add-skill', this)">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  <span>Copy</span>
                </button>
              </div>
            </div>
            <div id="tab-2" class="tab-pane" style="display: none;">
              <p style="color: #64748B;"># Production UI Refinement & Logical Direction-Agnostic RTL</p>
              <div class="terminal-row">
                <span class="terminal-cmd-str"><span style="color: #00F0FF;">$</span> npx @alwkala/tidyfactor-styler add-skill</span>
                <button class="btn-copy-code" onclick="copyCmd('npx @alwkala/tidyfactor-styler add-skill', this)">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  <span>Copy</span>
                </button>
              </div>
            </div>
            <div id="tab-3" class="tab-pane" style="display: none;">
              <p style="color: #64748B;"># 360° AI Growth Engine: Direct Response & SEO Clusters</p>
              <div class="terminal-row">
                <span class="terminal-cmd-str"><span style="color: #00F0FF;">$</span> npx @alwkala/tidyfactor-marketing add-skill</span>
                <button class="btn-copy-code" onclick="copyCmd('npx @alwkala/tidyfactor-marketing add-skill', this)">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  <span>Copy</span>
                </button>
              </div>
            </div>
            <div id="tab-4" class="tab-pane" style="display: none;">
              <p style="color: #64748B;"># Scroll-Driven Luxury Canvas Sequences & Controlled States</p>
              <div class="terminal-row">
                <span class="terminal-cmd-str"><span style="color: #00F0FF;">$</span> npx @alwkala/create-cinematic-kit add-skill</span>
                <button class="btn-copy-code" onclick="copyCmd('npx @alwkala/create-cinematic-kit add-skill', this)">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  <span>Copy</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

  </main>

  <!-- Shared Footer -->
  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid-layout">
        <div class="footer-col-item">
          <div class="footer-brand-title">
            <img src="assets/logo.png" alt="TidyFactor Logo" class="footer-logo-img">
            <span>TidyFactor</span>
          </div>
          <p style="color: var(--text-secondary); font-size: 0.8rem; max-width: 280px; margin-bottom: 12px; line-height: 1.6;" data-i18n="footer_about">
            منظومة معمارية مفتوحة تجمع بين منصات الويب، أدوات المطورين، وحزم الذكاء الهندسي لوكلاء البرمجة لبناء برمجيات بسيطة، محمولة، وقابلة للاستمرار.
          </p>
          <div style="font-size: 0.74rem; color: var(--text-muted); line-height: 1.6;">
            القاهرة، جمهورية مصر العربية<br>
            بالشراكة مع <a href="https://alwkala.com" target="_blank" style="color: var(--accent-cyan); text-decoration: none; font-weight: 700;">الوكالة الرقمية Alwkala</a>
          </div>
        </div>

        <div class="footer-col-item">
          <h4 data-i18n="footer_platforms_title">المنصات والبرمجيات</h4>
          <ul>
            <li><a href="products.html">TidyFactor Go CMS</a></li>
            <li><a href="products.html#roadmap">Studio (Roadmap)</a></li>
            <li><a href="products.html#roadmap">CLI & Convert</a></li>
            <li><a href="/go/" target="_blank">Live CMS Demo</a></li>
          </ul>
        </div>

        <div class="footer-col-item">
          <h4 data-i18n="footer_skills_title">طبقة الذكاء الهندسي</h4>
          <ul>
            <li><a href="skills.html#design">Design: Styler & Cinematic</a></li>
            <li><a href="skills.html#engineering">Engineering: Next, PHP, HTMX</a></li>
            <li><a href="skills.html#context">Context: Doc & Marketing</a></li>
            <li><a href="https://github.com/TidyFactor" target="_blank">GitHub Organization</a></li>
          </ul>
        </div>

        <div class="footer-col-item">
          <h4 data-i18n="footer_philosophy_title">الفلسفة والاتصال</h4>
          <ul>
            <li><a href="vision.html" data-i18n="nav_vision">الرؤية</a></li>
            <li><a href="ecosystem.html" data-i18n="nav_ecosystem">المعمارية</a></li>
            <li><a href="mailto:hello@tidyfactor.com">hello@tidyfactor.com</a></li>
            <li><a href="https://wa.me/201016656899" target="_blank">WhatsApp Support</a></li>
          </ul>
        </div>
      </div>

      <div class="footer-bottom-bar">
        <div data-i18n="footer_rights">© 2026 منظومة TidyFactor بالشراكة مع الوكالة الرقمية Alwkala. مرخصة تحت Apache License 2.0.</div>
        <div data-i18n="footer_loc">القاهرة، جمهورية مصر العربية • هندسة برمجيات الويب الأصيلة للذكاء الاصطناعي</div>
      </div>
    </div>
  </footer>

</div>

<!-- Scripts -->
<script src="js/i18n.js"></script>
<script src="js/app.js"></script>
</body>
</html>
