Add annual pricing (10 months) + mobile app offer to pricing page

- Annual = 10 months only (2 months free) with savings shown
- Mobile app offer: 75K EGP / 5,700 SAR one-time for branded app
- Both sections support geo-switching via data attributes
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/pricing.html

@@ -632,6 +632,60 @@
       <div class="pricing-website-note" data-reveal="100">
         <div class="pricing-website-note__text">موقع إلكتروني لأكاديميتك مجاناً + دومين خاص مع الاشتراك السنوي</div>
         <div class="pricing-website-note__sub">النظام ينشئ موقع احترافي لأكاديميتك تلقائياً عند التفعيل</div>
+
+        <!-- Annual pricing (10 months only) -->
+        <div style="margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle);">
+          <div style="font-size: var(--text-base); font-weight: 700; color: var(--ink-primary); margin-bottom: var(--space-sm);">الاشتراك السنوي = ١٠ شهور فقط (شهرين مجاناً)</div>
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-md);">
+            <div style="text-align: center; padding: var(--space-md); background: var(--bg-muted); border-radius: var(--radius-lg);">
+              <div style="font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: 4px;">الصغيرة سنوياً</div>
+              <div style="font-size: var(--text-lg); font-weight: 800; color: var(--ink-primary);" data-eg-compare="٦,٩٩٠ ج.م" data-sa-compare="٢,٩٩٠ ر.س">٦,٩٩٠ ج.م</div>
+              <div style="font-size: var(--text-xs); color: var(--color-success);">وفّر ١,٣٩٨ ج.م</div>
+            </div>
+            <div style="text-align: center; padding: var(--space-md); background: var(--bg-muted); border-radius: var(--radius-lg);">
+              <div style="font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: 4px;">المتوسطة سنوياً</div>
+              <div style="font-size: var(--text-lg); font-weight: 800; color: var(--ink-primary);" data-eg-compare="١٤,٩٩٠ ج.م" data-sa-compare="٦,٩٩٠ ر.س">١٤,٩٩٠ ج.م</div>
+              <div style="font-size: var(--text-xs); color: var(--color-success);">وفّر ٢,٩٩٨ ج.م</div>
+            </div>
+            <div style="text-align: center; padding: var(--space-md); background: var(--bg-muted); border-radius: var(--radius-lg);">
+              <div style="font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: 4px;">الكبيرة سنوياً</div>
+              <div style="font-size: var(--text-lg); font-weight: 800; color: var(--ink-primary);" data-eg-compare="٣٤,٩٩٠ ج.م" data-sa-compare="١٤,٩٩٠ ر.س">٣٤,٩٩٠ ج.م</div>
+              <div style="font-size: var(--text-xs); color: var(--color-success);">وفّر ٦,٩٩٨ ج.م</div>
+            </div>
+          </div>
+          <div style="font-size: var(--text-xs); color: var(--ink-muted); text-align: center; margin-top: var(--space-sm);">+ دومين خاص مجاناً مع الاشتراك السنوي</div>
+        </div>
+      </div>
+
+      <!-- Mobile App Offer -->
+      <div class="pricing-website-note" data-reveal="150" style="margin-top: var(--space-lg); background: linear-gradient(135deg, var(--bg-surface), oklch(0.97 0.02 260)); border: 1px solid oklch(0.85 0.06 260);">
+        <div style="display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-sm);">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: oklch(0.50 0.15 260);"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
+          <span style="font-size: var(--text-lg); font-weight: 800; color: var(--ink-primary);">تطبيق موبايل خاص بأكاديميتك</span>
+        </div>
+        <div style="font-size: var(--text-sm); color: var(--ink-secondary); line-height: 1.8; max-width: 55ch; margin: 0 auto;">
+          تطبيق باسم أكاديميتك على App Store و Google Play — أولياء الأمور يحملوه ويتابعوا الحضور والمدفوعات والجداول. علامتك التجارية في جيب كل ولي أمر.
+        </div>
+        <div style="margin-top: var(--space-md); display: flex; align-items: center; justify-content: center; gap: var(--space-lg); flex-wrap: wrap;">
+          <div style="text-align: center;">
+            <div style="font-size: var(--text-2xl); font-weight: 900; color: var(--ink-primary);" data-eg-compare="٧٥,٠٠٠ ج.م" data-sa-compare="٥,٧٠٠ ر.س">٧٥,٠٠٠ ج.م</div>
+            <div style="font-size: var(--text-xs); color: var(--ink-muted);">دفعة واحدة — ملكك للأبد</div>
+          </div>
+        </div>
+        <div style="margin-top: var(--space-sm); display: flex; justify-content: center; gap: var(--space-md);">
+          <span style="display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--ink-secondary);">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>
+            App Store
+          </span>
+          <span style="display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--ink-secondary);">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>
+            Google Play
+          </span>
+          <span style="display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--ink-secondary);">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>
+            باسم أكاديميتك
+          </span>
+        </div>
       </div>
 
     </div>