Full UI/UX modernization: fix hero examples, pricing beta, Apply All cursor/format fix, design polish

src/css/base.css

@@ -182,3 +182,52 @@ input[type="range"] {
 
 .animate-fade-in { animation: fadeIn 0.5s ease-out; }
 .animate-float { animation: float 6s ease-in-out infinite; }
+
+/* Shimmer animation for loading skeletons */
+@keyframes shimmer {
+  0% { background-position: -200px 0; }
+  100% { background-position: calc(200px + 100%) 0; }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, var(--color-surface-elevated) 0%, var(--color-border) 50%, var(--color-surface-elevated) 100%);
+  background-size: 200px 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--radius-sm);
+}
+
+/* Slide up animation for staggered entry */
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(24px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-slide-up {
+  animation: slideUp 0.6s ease-out both;
+}
+
+/* Staggered grid children */
+.grid > *:nth-child(1) { animation-delay: 0ms; }
+.grid > *:nth-child(2) { animation-delay: 80ms; }
+.grid > *:nth-child(3) { animation-delay: 160ms; }
+.grid > *:nth-child(4) { animation-delay: 240ms; }
+.grid > *:nth-child(5) { animation-delay: 320ms; }
+.grid > *:nth-child(6) { animation-delay: 400ms; }
+.grid > *:nth-child(7) { animation-delay: 480ms; }
+.grid > *:nth-child(8) { animation-delay: 560ms; }
+
+/* Score ring change animation */
+@keyframes scoreChange {
+  0%, 100% { filter: none; }
+  50% { filter: brightness(1.3); }
+}
+
+.score-ring-wrap.score-changed {
+  animation: scoreChange 0.6s ease;
+}
+
+/* Button press effect */
+.btn-primary:active,
+.gradient-accent:active {
+  transform: scale(0.97) !important;
+}

src/css/components.css

@@ -84,6 +84,15 @@
   color: var(--color-primary);
 }
 
+.footer-link-hover:hover {
+  color: var(--color-text-primary) !important;
+}
+
+.footer-bar {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
 .theme-toggle {
   display: flex;
   align-items: center;
@@ -928,18 +937,36 @@
 /* ── Suggestion cards ── */
 .suggestion-card {
   padding: var(--spacing-md);
+  padding-right: calc(var(--spacing-md) + 4px);
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
+  border-right: 4px solid var(--color-border-strong);
   background: var(--color-surface-elevated);
   cursor: pointer;
-  transition: border-color var(--transition-base), background var(--transition-base);
+  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
   text-align: right;
 }
 
+.suggestion-card[data-suggestion-type="spelling"],
+.suggestion-card:has(.badge-spelling) {
+  border-right-color: var(--color-error);
+}
+
+.suggestion-card[data-suggestion-type="grammar"],
+.suggestion-card:has(.badge-grammar) {
+  border-right-color: var(--color-warning);
+}
+
+.suggestion-card[data-suggestion-type="punctuation"],
+.suggestion-card:has(.badge-punctuation) {
+  border-right-color: var(--color-success);
+}
+
 .suggestion-card:hover,
 .suggestion-card.focused {
   border-color: var(--color-primary);
   background: var(--color-suggestion-hover-bg);
+  transform: translateX(-2px);
 }
 
 .suggestion-card-badge {

src/index.html

@@ -6,7 +6,7 @@
   <meta name="supabase-url" content="">
   <meta name="supabase-anon-key" content="">
   <title>بيان - مساعد الكتابة العربية الذكي</title>
-   <meta name="description" content="بيان — مساعد ذكي يصحح الإملاء والنحو وعلامات الترقيم ويُلخّص النصوص العربية بدقة عالية. جرّبه مجاناً!">
+   <meta name="description" content="بيان — منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي — مصمّمة خصيصًا للغة العربية. جرّبه مجاناً!">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <script src="https://cdn.tailwindcss.com"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -161,17 +161,17 @@
       <div class="grid lg:grid-cols-2 gap-16 items-center"><!-- Hero Content -->
        <div class="text-center lg:text-right animate-fade-in">
 
-        <h1 id="hero-headline" class="text-5xl lg:text-7xl font-bold leading-tight mb-6" style="line-height: 1.3;">اكتب العربية<br><span class="text-gradient">بثقة واحتراف</span></h1>
-        <p id="hero-subheadline" class="text-xl lg:text-2xl leading-relaxed mb-10" style="color: var(--text-secondary); line-height: 1.9;">مساعد ذكي يصحح الإملاء والنحو وعلامات الترقيم ويُلخّص النصوص العربية بدقة عالية.</p>
-        <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12"><button id="hero-cta-primary" onclick="showPage('editor')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl"> جربه الآن مجاناً ←</button> <button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold transition-all hover:scale-105 border-2" style="border-color: rgba(255, 255, 255, 0.35); color: var(--text-color); box-shadow: 0 0 20px rgba(107, 163, 224, 0.12);"> استكشف الميزات</button>
+        <h1 id="hero-headline" class="text-5xl lg:text-7xl font-bold leading-tight mb-6" style="line-height: 1.4;">اكتب العربية<br><span class="text-gradient">بثقة واحتراف</span></h1>
+        <p id="hero-subheadline" class="text-xl lg:text-2xl leading-relaxed mb-10" style="color: var(--text-secondary); line-height: 1.9;">منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي — مصمّمة خصيصًا للغة العربية.</p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12"><button id="hero-cta-primary" onclick="showPage('editor')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl">ابدأ الكتابة مجانًا →</button> <button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold transition-all hover:scale-105 border-2" style="border-color: rgba(255, 255, 255, 0.35); color: var(--text-color); box-shadow: 0 0 20px rgba(107, 163, 224, 0.12);">اكتشف الميزات</button>
         </div><!-- Stats -->
         <div class="flex items-center gap-8 justify-center lg:justify-start">
          <div class="text-center">
           <div class="text-3xl font-bold text-gradient">
-           ٣ أنواع
+           ٨ أدوات
           </div>
           <div class="text-sm mt-1" style="color: var(--text-secondary);">
-           تصحيح ذكي
+           ذكاء اصطناعي
           </div>
          </div>
          <div class="w-px h-12" style="background: rgba(255, 255, 255, 0.2);"></div>
@@ -180,7 +180,7 @@
            فوري
           </div>
           <div class="text-sm mt-1" style="color: var(--text-secondary);">
-           تحليل أثناء الكتابة
+           تحليل لحظي
           </div>
          </div>
          <div class="w-px h-12" style="background: rgba(255, 255, 255, 0.2);"></div>
@@ -189,7 +189,7 @@
            مجاني
           </div>
           <div class="text-sm mt-1" style="color: var(--text-secondary);">
-           بدون تسجيل
+           لا يحتاج تسجيل
           </div>
          </div>
         </div>
@@ -205,14 +205,14 @@
           <div class="w-20"></div>
          </div><!-- Mock Editor Content -->
          <div class="p-8 editor-content text-right text-lg" dir="rtl" style="background: var(--surface-color); color: var(--text-color); min-height: 300px;">
-          <p class="mb-4">تعتبر اللغة العربية من أجمل <span class="spelling-error">اللغاة</span> في العالم وأكثرها <span class="spelling-error">انتشاراً</span><span class="punctuation-suggestion">.</span></p>
+          <p class="mb-4">تعتبر اللغة العربية من أجمل <span class="spelling-error">اللغاة</span> في العالم، وهي لغة <span class="spelling-error">القرأن</span> الكريم<span class="punctuation-suggestion">.</span></p>
           <p class="mb-4">الطالبات <span class="grammar-error">ذهبوا</span> إلى المكتبة لأن <span class="spelling-error">الأمتحان</span> قريب جداً<span class="punctuation-suggestion">.</span></p>
           <p>محرر بيان يساعدك على كتابة نصوص عربية <span class="spelling-error">صحيحه</span> بكل سهولة!</p>
          </div><!-- Mock Stats Bar -->
          <div class="flex items-center justify-between p-4 border-t" style="border-color: rgba(255, 255, 255, 0.1);">
           <div class="flex items-center gap-6">
            <div class="flex items-center gap-2">
-            <div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div><span class="text-sm" style="color: var(--text-secondary);">٣ إملائي</span>
+            <div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div><span class="text-sm" style="color: var(--text-secondary);">٤ إملائي</span>
            </div>
            <div class="flex items-center gap-2">
             <div class="w-3 h-3 rounded-full" style="background: #fbbf24;"></div><span class="text-sm" style="color: var(--text-secondary);">١ نحوي</span>
@@ -307,11 +307,52 @@
          <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">بوابتك للقرآن والتفسير والسنة والمصادر السردية الموثقة</p>
         </div>
       </div>
-      <div class="text-center mt-12"><button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold border-2 transition-all hover:scale-105" style="border-color: var(--primary-color); color: var(--primary-color);"> استكشف جميع الميزات ← </button>
+      <div class="text-center mt-12"><button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold border-2 transition-all hover:scale-105" style="border-color: var(--primary-color); color: var(--primary-color);">شاهد جميع الميزات →</button>
       </div>
      </div>
-    </section>
-   </div><!-- Features Page -->
+     </section>
+     <!-- How It Works -->
+     <section class="py-24" style="background: var(--surface-color);">
+      <div class="max-w-7xl mx-auto px-6">
+       <div class="text-center mb-16">
+        <h2 class="text-4xl lg:text-5xl font-bold mb-6">كيف <span class="text-gradient">يعمل بيان؟</span></h2>
+        <p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">ثلاث خطوات بسيطة للحصول على نص عربي مثالي</p>
+       </div>
+       <div class="grid md:grid-cols-3 gap-8">
+        <!-- Step 1 -->
+        <div class="text-center p-8 rounded-3xl" style="background: var(--background-color); border: 1px solid var(--color-border);">
+         <div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, rgba(107, 163, 224, 0.15), rgba(107, 163, 224, 0.05));">
+          <svg width="28" height="28" fill="none" stroke="var(--color-primary)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
+         </div>
+         <div class="text-sm font-bold mb-2 text-gradient">الخطوة ١</div>
+         <h3 class="text-xl font-bold mb-3">اكتب نصّك</h3>
+         <p class="text-sm" style="color: var(--text-secondary); line-height: 1.8;">اكتب أو الصق نصك العربي في المحرر — يدعم جميع أنماط الكتابة</p>
+        </div>
+        <!-- Step 2 -->
+        <div class="text-center p-8 rounded-3xl" style="background: var(--background-color); border: 1px solid var(--color-border);">
+         <div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, rgba(165, 148, 232, 0.15), rgba(165, 148, 232, 0.05));">
+          <svg width="28" height="28" fill="none" stroke="var(--color-secondary)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" 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"/></svg>
+         </div>
+         <div class="text-sm font-bold mb-2 text-gradient">الخطوة ٢</div>
+         <h3 class="text-xl font-bold mb-3">تحليل تلقائي</h3>
+         <p class="text-sm" style="color: var(--text-secondary); line-height: 1.8;">يحلل بيان النص فورًا ويكتشف الأخطاء الإملائية والنحوية والترقيمية</p>
+        </div>
+        <!-- Step 3 -->
+        <div class="text-center p-8 rounded-3xl" style="background: var(--background-color); border: 1px solid var(--color-border);">
+         <div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, rgba(107, 201, 138, 0.15), rgba(107, 201, 138, 0.05));">
+          <svg width="28" height="28" fill="none" stroke="var(--color-success)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+         </div>
+         <div class="text-sm font-bold mb-2 text-gradient">الخطوة ٣</div>
+         <h3 class="text-xl font-bold mb-3">صحّح بضغطة</h3>
+         <p class="text-sm" style="color: var(--text-secondary); line-height: 1.8;">اختر الاقتراح المناسب وطبّقه بضغطة واحدة — أو طبّق الكل دفعة واحدة</p>
+        </div>
+       </div>
+       <div class="text-center mt-12">
+        <button onclick="showPage('editor')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl">جرّب المحرر الآن →</button>
+       </div>
+      </div>
+     </section>
+    </div><!-- Features Page -->
    <div id="page-features" class="page">
     <section class="pt-32 pb-24" style="background: var(--background-color);">
      <div class="max-w-7xl mx-auto px-6">
@@ -801,6 +842,26 @@
            </div>
           </div>
          </div>
+         <!-- Dialect Conversion Panel -->
+         <div id="dialect-area" class="summarize-panel is-hidden">
+          <div class="mb-4">
+           <div class="flex items-center gap-2 mb-3">
+            <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: #f97316;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
+            <span class="text-base font-bold">تحويل اللهجات للفصحى</span>
+            <span class="text-xs px-2 py-0.5 rounded-full" style="background: rgba(249, 115, 22, 0.15); color: #f97316;">قيد التطوير</span>
+           </div>
+           <p class="text-sm mb-4" style="color: var(--text-secondary);">اكتب نصًا بأي لهجة عربية (مصرية، خليجية، شامية...) وسنحوّله إلى لغة عربية فصحى سليمة.</p>
+          </div>
+          <textarea id="dialect-input" class="w-full p-4 rounded-xl text-right text-lg editor-content" dir="rtl" rows="6" placeholder="اكتب النص باللهجة هنا... مثال: ازيك يا صاحبي، انت فين دلوقتي؟" style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); resize: vertical; font-family: inherit;"></textarea>
+          <button onclick="convertDialect()" class="btn-primary w-full py-4 text-lg mt-4 mb-4" type="button" style="background: linear-gradient(135deg, #f97316, #ea580c);">تحويل إلى الفصحى</button>
+          <div id="dialect-result-card" class="is-hidden" style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem;">
+           <div class="flex items-center justify-between mb-3">
+            <h3 class="text-base font-bold" style="color: #f97316;">✓ النص بالعربية الفصحى</h3>
+            <button onclick="copyDialectResult()" class="btn-ghost text-sm" type="button">نسخ</button>
+           </div>
+           <div id="dialect-result" class="text-right text-lg editor-content" dir="rtl" style="line-height: 2;"></div>
+          </div>
+         </div>
          <div class="editor-footer">
           <div class="editor-stats" role="status" aria-label="إحصائيات">
            <div class="flex items-center gap-2"><span class="stat-dot stat-dot--spelling" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="spelling-count">٠</span> إملائي</span></div>
@@ -903,104 +964,95 @@
      <div class="max-w-7xl mx-auto px-6">
       <div class="text-center mb-16">
        <h1 class="text-5xl lg:text-6xl font-bold mb-6">خطط <span class="text-gradient">واضحة ومرنة</span></h1>
-       <p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">اختر الخطة المناسبة لك. يمكنك الترقية أو التخفيض في أي وقت.</p>
+       <p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">جميع الميزات متاحة مجانًا خلال الإصدار التجريبي. الخطط المدفوعة قادمة قريبًا.</p>
+      </div>
+      <!-- Beta Banner -->
+      <div class="text-center mb-12 p-6 rounded-2xl" style="background: linear-gradient(135deg, rgba(107, 163, 224, 0.1), rgba(165, 148, 232, 0.1)); border: 1px solid rgba(107, 163, 224, 0.2);">
+       <div class="flex items-center justify-center gap-2 mb-2">
+        <span class="text-sm font-bold px-3 py-1 rounded-full text-white gradient-accent">BETA</span>
+        <span class="text-lg font-bold">الإصدار التجريبي — مجاني بالكامل</span>
+       </div>
+       <p class="text-base" style="color: var(--text-secondary);">استمتع بجميع ميزات بيان بدون أي قيود أثناء فترة التطوير</p>
       </div>
-      <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"><!-- Free Plan -->
-       <div class="p-8 rounded-3xl transition-all hover:scale-105" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
+      <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"><!-- Current: Beta Free -->
+       <div class="p-8 rounded-3xl transition-all hover:scale-105 relative shadow-2xl" style="background: linear-gradient(165deg, var(--surface-color) 0%, rgba(59, 130, 246, 0.1) 100%); border: 2px solid var(--primary-color);">
+        <div class="pricing-badge gradient-accent text-white">
+         متاح الآن
+        </div>
         <div class="text-center mb-8">
-         <h3 class="text-3xl font-bold mb-2">مجاني</h3>
-         <p class="text-base mb-6" style="color: var(--text-secondary);">للبدء والتجربة</p>
+         <h3 class="text-3xl font-bold mb-2">الإصدار التجريبي</h3>
+         <p class="text-base mb-6" style="color: var(--text-secondary);">جميع الميزات بدون قيود</p>
          <div class="text-6xl font-bold mb-2">
-          ٠
+          مجاني
          </div>
-         <p class="text-base" style="color: var(--text-secondary);">مجاني للأبد</p>
+         <p class="text-base" style="color: var(--text-secondary);">لفترة محدودة</p>
         </div>
         <ul class="space-y-4 mb-8">
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">تدقيق إملائي أساسي</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تدقيق إملائي ونحوي متقدم</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">٥٠٠ كلمة يوميًا</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تصحيح علامات الترقيم</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">محرر ويب</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تلخيص النصوص بالذكاء الاصطناعي</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: rgba(241, 245, 249, 0.2);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg><span class="text-base" style="color: var(--text-secondary);">اقتراحات نحوية</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">الإكمال التلقائي الذكي</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: rgba(241, 245, 249, 0.2);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg><span class="text-base" style="color: var(--text-secondary);">تلخيص النصوص</span></li>
-        </ul><button onclick="showPage('editor')" class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all hover:scale-105" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-color);"> ابدأ مجانًا </button>
-       </div><!-- Pro Plan (Most Popular) -->
-       <div class="p-8 rounded-3xl transition-all hover:scale-105 relative shadow-2xl" style="background: linear-gradient(165deg, var(--surface-color) 0%, rgba(59, 130, 246, 0.1) 100%); border: 2px solid var(--primary-color);">
-        <div class="pricing-badge gradient-accent text-white">
-         الأكثر استخدامًا
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تصدير PDF و Word</span></li>
+         <li class="flex items-center gap-3">
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">كلمات غير محدودة</span></li>
+        </ul><button onclick="showPage('editor')" class="w-full py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl">ابدأ الكتابة مجانًا →</button>
+       </div><!-- Future: Pro Plan -->
+       <div class="p-8 rounded-3xl transition-all hover:scale-105 relative" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.7;">
+        <div class="pricing-badge" style="background: var(--color-surface-elevated); color: var(--color-text-secondary);">
+         قريبًا
         </div>
         <div class="text-center mb-8">
          <h3 class="text-3xl font-bold mb-2">احترافي</h3>
          <p class="text-base mb-6" style="color: var(--text-secondary);">للكُتّاب الجادين</p>
          <div class="flex items-center justify-center gap-2"><span class="text-6xl font-bold">٩</span>
           <div class="text-right">
-           <div class="text-lg font-bold">
-            دولار
-           </div>
-           <div class="text-sm" style="color: var(--text-secondary);">
-            شهريًا
-           </div>
+           <div class="text-lg font-bold">دولار</div>
+           <div class="text-sm" style="color: var(--text-secondary);">شهريًا</div>
           </div>
          </div>
         </div>
         <ul class="space-y-4 mb-8">
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">تدقيق إملائي ونحوي متقدم</span></li>
-         <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">كلمات غير محدودة</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">كل ميزات الإصدار التجريبي</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">تصحيح علامات الترقيم</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">أولوية في التحليل</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">تلخيص النصوص بالذكاء الاصطناعي</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تخزين سحابي للمستندات</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">تصدير PDF و Word</span></li>
-        </ul><button onclick="showPage('editor')" class="w-full py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl"> الترقية للخطة الاحترافية </button>
-       </div><!-- Enterprise Plan -->
-       <div class="p-8 rounded-3xl transition-all hover:scale-105" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">دعم فني مباشر</span></li>
+        </ul><button disabled class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-secondary); cursor: not-allowed;">قريبًا</button>
+       </div><!-- Future: Enterprise Plan -->
+       <div class="p-8 rounded-3xl transition-all hover:scale-105" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.7;">
+        <div class="pricing-badge" style="background: var(--color-surface-elevated); color: var(--color-text-secondary);">
+         قريبًا
+        </div>
         <div class="text-center mb-8">
          <h3 class="text-3xl font-bold mb-2">مؤسسات</h3>
          <p class="text-base mb-6" style="color: var(--text-secondary);">للفرق والمنظمات</p>
          <div class="flex items-center justify-center gap-2"><span class="text-6xl font-bold">٢٩</span>
           <div class="text-right">
-           <div class="text-lg font-bold">
-            دولار
-           </div>
-           <div class="text-sm" style="color: var(--text-secondary);">
-            لكل مستخدم/شهر
-           </div>
+           <div class="text-lg font-bold">دولار</div>
+           <div class="text-sm" style="color: var(--text-secondary);">لكل مستخدم/شهر</div>
           </div>
          </div>
         </div>
         <ul class="space-y-4 mb-8">
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">كل ميزات الاحترافي</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">كل ميزات الاحترافي</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">إدارة الفرق</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">إدارة الفرق</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">واجهة برمجية (API)</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">واجهة برمجية (API)</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">تكامل مخصص</span></li>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تكامل مخصص</span></li>
          <li class="flex items-center gap-3">
-          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg><span class="text-base">دعم فني ذو أولوية</span></li>
-        </ul><button onclick="showPage('editor')" class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all hover:scale-105" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-color);"> تواصل مع المبيعات </button>
+          <svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">دعم فني ذو أولوية</span></li>
+        </ul><button disabled class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-secondary); cursor: not-allowed;">قريبًا</button>
        </div>
       </div>
      </div>
@@ -1021,16 +1073,16 @@
       <div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12" dir="rtl">
        <div>
         <div class="flex items-center gap-3 mb-4">
-         <span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>
+         <svg width="24" height="24" fill="none" stroke="url(#grad1)" viewBox="0 0 24 24" style="flex-shrink:0;"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:var(--color-primary)"/><stop offset="100%" style="stop-color:var(--color-secondary)"/></linearGradient></defs><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><span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>
         </div>
-        <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">مساعد ذكي للكتابة العربية. يصحح الإملاء والنحو وعلامات الترقيم ويُلخّص النصوص بدقة عالية.</p>
+        <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">منصة ذكاء اصطناعي للكتابة العربية — تدقيق إملائي ونحوي، ترقيم، تلخيص، وإكمال تلقائي ذكي.</p>
        </div>
        <div>
         <h4 class="text-base font-bold mb-4">المنتج</h4>
         <ul class="space-y-3">
-         <li><button onclick="showPage('editor')" class="text-sm transition-colors hover:text-white" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">المحرر</button></li>
-         <li><button onclick="showPage('features')" class="text-sm transition-colors hover:text-white" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">الميزات</button></li>
-         <li><button onclick="showPage('pricing')" class="text-sm transition-colors hover:text-white" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">الأسعار</button></li>
+         <li><button onclick="showPage('editor')" class="text-sm transition-colors footer-link-hover" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">المحرر</button></li>
+         <li><button onclick="showPage('features')" class="text-sm transition-colors footer-link-hover" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">الميزات</button></li>
+         <li><button onclick="showPage('pricing')" class="text-sm transition-colors footer-link-hover" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">الأسعار</button></li>
         </ul>
        </div>
        <div>
@@ -1087,8 +1139,8 @@
     const defaultConfig = {
       brand_name: 'بيان',
       hero_headline: 'اكتب العربية بثقة واحتراف',
-      hero_subheadline: 'مساعد ذكي يصحح الإملاء والنحو وعلامات الترقيم ويُلخّص النصوص العربية بدقة عالية.',
-      cta_primary: 'جربه الآن مجاناً',
+      hero_subheadline: 'منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي — مصمّمة خصيصًا للغة العربية.',
+      cta_primary: 'ابدأ الكتابة مجانًا',
       primary_color: '#6BA3E0',
       secondary_color: '#A594E8',
       font_family: 'Cairo',

src/js/editor.js

@@ -674,21 +674,57 @@ function applySuggestionById(id) {
 
 function applyAllSuggestions() {
   // CRITICAL: Sort in REVERSE order (highest start offset first).
-  // Applying edits back-to-front preserves the offset validity of all
-  // subsequent edits. Front-to-back would invalidate every offset after
-  // the first edit due to text length changes. Do NOT change this sort.
   const suggestions = [...(window.currentSuggestions || [])].sort((a, b) => b.start - a.start);
   if (suggestions.length === 0) return;
   _isApplyingSuggestion = true;
   try {
     pushUndoState(); // Save state before applying all
 
-    let text = getEditorText();
+    // DOM-based approach: replace each error span individually to preserve formatting
+    let appliedCount = 0;
     suggestions.forEach((s) => {
-      text = text.substring(0, s.start) + s.correction + text.substring(s.end);
+      const sid = s.id;
+      const errorSpan = sid ? document.querySelector(`[data-suggestion-id="${sid}"]`) : null;
+      if (errorSpan) {
+        const parent = errorSpan.parentNode;
+        const correctedNode = document.createTextNode(s.correction);
+        parent.insertBefore(correctedNode, errorSpan);
+        parent.removeChild(errorSpan);
+        parent.normalize();
+        appliedCount++;
+      }
     });
 
-    setEditorHTML(escapeHtml(text));
+    // Fallback: if DOM approach missed some, do text-based replacement
+    if (appliedCount < suggestions.length) {
+      let text = getEditorText();
+      // Re-sort remaining by offset (they weren't found as spans)
+      const remaining = suggestions.filter(s => {
+        const sid = s.id;
+        return !sid || !document.querySelector(`[data-suggestion-id="${sid}"]`);
+      }).sort((a, b) => b.start - a.start);
+      remaining.forEach((s) => {
+        text = text.substring(0, s.start) + s.correction + text.substring(s.end);
+      });
+      if (remaining.length > 0) {
+        setEditorHTML(escapeHtml(text));
+      }
+    }
+
+    // Place cursor at end of editor content
+    const editor = getEditorElement();
+    if (editor) {
+      try {
+        const sel = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(editor);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      } catch(e) {}
+      editor.focus();
+    }
+
     hideTooltip();
 
     // Clear suggestions
@@ -696,7 +732,6 @@ function applyAllSuggestions() {
     updateSuggestionCounts(0, 0, 0);
     updateWritingScore(0, 0, 0);
     updateSuggestionsList([]);
-    // Pipeline Hardening v3.3: Do NOT call analyzeTextDelayed() — prevents recursive re-analysis
     if (typeof showToast === 'function') showToast('✓ تم تطبيق ' + suggestions.length + ' تصحيح');
   } finally {
     _isApplyingSuggestion = false;

src/js/ui.js

@@ -204,31 +204,43 @@ function focusSuggestionInEditor(suggestionId) {
   if (span) showTooltip(span);
 }
 
+let _analyzingTimer = null;
 function setAnalyzingState(isAnalyzing) {
   const editor = getEditorElement();
   const indicator = document.getElementById('analyzing-indicator');
 
   if (editor) {
-    editor.classList.toggle('analyzing', isAnalyzing);
     editor.setAttribute('aria-busy', isAnalyzing ? 'true' : 'false');
   }
-  if (indicator) {
-    indicator.classList.toggle('active', isAnalyzing);
-  }
 
-  // Show skeleton loading in suggestions panel
   if (isAnalyzing) {
-    const lists = [
-      document.getElementById('suggestions-list'),
-      document.getElementById('bottom-sheet-list')
-    ].filter(Boolean);
-    const skeletonHTML = `
-      <div style="padding: 16px;">
-        <div class="skeleton skeleton-line" style="width:80%"></div>
-        <div class="skeleton skeleton-line" style="width:100%"></div>
-        <div class="skeleton skeleton-line" style="width:65%"></div>
-      </div>`;
-    lists.forEach(el => { el.innerHTML = skeletonHTML; });
+    // Debounce: only show indicator after 400ms to prevent flicker on fast re-analyses
+    if (!_analyzingTimer) {
+      _analyzingTimer = setTimeout(() => {
+        if (editor) editor.classList.add('analyzing');
+        if (indicator) indicator.classList.add('active');
+        // Show skeleton loading in suggestions panel
+        const lists = [
+          document.getElementById('suggestions-list'),
+          document.getElementById('bottom-sheet-list')
+        ].filter(Boolean);
+        const skeletonHTML = `
+          <div style="padding: 16px;">
+            <div class="skeleton skeleton-line" style="width:80%"></div>
+            <div class="skeleton skeleton-line" style="width:100%"></div>
+            <div class="skeleton skeleton-line" style="width:65%"></div>
+          </div>`;
+        lists.forEach(el => { el.innerHTML = skeletonHTML; });
+      }, 400);
+    }
+  } else {
+    // Clear timer and hide immediately
+    if (_analyzingTimer) {
+      clearTimeout(_analyzingTimer);
+      _analyzingTimer = null;
+    }
+    if (editor) editor.classList.remove('analyzing');
+    if (indicator) indicator.classList.remove('active');
   }
 }