audit-v3-fix: Replace all 8 Unicode feature icons with SVGs + enhanced footer with multi-column layout

src/index.html

@@ -253,28 +253,28 @@
       <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"><!-- Feature 1: Spelling -->
        <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
         <div class="feature-icon mb-6" style="background: rgba(239, 68, 68, 0.15); color: #ef4444;">
-         ✎
+         <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
         </div>
         <h3 class="text-xl font-bold mb-3">التدقيق الإملائي الذكي</h3>
         <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">فهم الجذور الصرفية والسياق لتصحيح الأخطاء الإملائية بدقة عالية</p>
        </div><!-- Feature 2: Grammar -->
        <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
         <div class="feature-icon mb-6" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24;">
-         ◉
+         <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
         </div>
         <h3 class="text-xl font-bold mb-3">تصحيح القواعد النحوية</h3>
         <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">توافق الفعل والفاعل واقتراح الإعراب الصحيح بشكل تلقائي</p>
        </div><!-- Feature 3: Punctuation -->
        <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
         <div class="feature-icon mb-6" style="background: rgba(34, 197, 94, 0.15); color: #22c55e;">
-         ⸲
+         <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10H14.017zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10H0z"/></svg>
         </div>
         <h3 class="text-xl font-bold mb-3">تصحيح علامات الترقيم</h3>
         <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">الفواصل والنقط وعلامات الاقتباس العربية في المكان الصحيح</p>
        </div><!-- Feature 4: Summarization -->
        <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
         <div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">
-         ⊞
+         <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
         </div>
         <h3 class="text-xl font-bold mb-3">تلخيص النصوص العربية</h3>
         <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">الحفاظ على المعنى والأسلوب مع تقليل طول النص بذكاء</p>
@@ -314,7 +314,7 @@
        </div>
        <div class="order-1 lg:order-2 text-right">
         <div class="feature-icon mb-6" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; width: 64px; height: 64px; font-size: 32px;">
-         ✎
+         <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
         </div>
         <h2 class="text-4xl font-bold mb-6">التدقيق الإملائي الذكي</h2>
         <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">محرك ذكي يفهم الجذور الصرفية والسياق اللغوي لتصحيح الأخطاء الإملائية التي تفوتها البرامج التقليدية.</p>
@@ -334,7 +334,7 @@
       <div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
        <div class="text-right">
         <div class="feature-icon mb-6" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24; width: 64px; height: 64px; font-size: 32px;">
-         ◉
+         <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
         </div>
         <h2 class="text-4xl font-bold mb-6">تصحيح القواعد النحوية</h2>
         <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">فهم عميق لقواعد النحو العربي بما في ذلك الإعراب وتوافق الفعل مع الفاعل والصفات.</p>
@@ -388,7 +388,7 @@
        </div>
        <div class="order-1 lg:order-2 text-right">
         <div class="feature-icon mb-6" style="background: rgba(34, 197, 94, 0.15); color: #22c55e; width: 64px; height: 64px; font-size: 32px;">
-         ⸲
+         <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10H14.017zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10H0z"/></svg>
         </div>
         <h2 class="text-4xl font-bold mb-6">تصحيح علامات الترقيم</h2>
         <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">كشف وتصحيح تلقائي لعلامات الترقيم العربية بما في ذلك الوضع الصحيح للفواصل والنقاط وعلامات الاقتباس.</p>
@@ -408,7 +408,7 @@
       <div class="grid lg:grid-cols-2 gap-16 items-center">
        <div class="text-right">
         <div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6; width: 64px; height: 64px; font-size: 32px;">
-         ⊞
+         <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
         </div>
         <h2 class="text-4xl font-bold mb-6">تلخيص النصوص العربية</h2>
         <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">توليد ملخصات دقيقة وموجزة للنصوص الطويلة مع الحفاظ على المعنى الأساسي والأسلوب العربي الأصيل.</p>