Redesign pricing page with real 4-tier SaaS plans

Replace generic placeholder cards with actual plan data:
- Platform % Only: 0 EGP/12%, Starter: 1,000 EGP/7.5%
- Enterprise: 3,500 EGP/5%, Professional: 10,000 EGP/3.5%
Add detailed comparison table, FAQ section, value strip.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/pricing.html

@@ -4,11 +4,369 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>الباقات والأسعار - El-Captain</title>
-  <meta name="description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. أسعار عادلة تنمو مع أكاديميتك — بدون رسوم خفية.">
+  <meta name="description" content="باقات El-Captain لإدارة الأكاديميات الرياضية. 4 خطط مرنة — من باقة مجانية بنسبة فقط حتى الباقة الاحترافية الكاملة. فترة تجريبية مجانية لكل الباقات.">
   <link rel="stylesheet" href="css/tokens.css">
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/components.css">
   <link rel="stylesheet" href="css/pages.css">
+
+  <style>
+    /* Pricing Page — Enhanced */
+    .pricing-hero {
+      padding-top: 120px;
+      padding-bottom: 60px;
+      text-align: center;
+      background: linear-gradient(180deg, var(--bg-body) 0%, var(--bg-muted) 100%);
+    }
+
+    .pricing-hero__badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs);
+      padding: 6px 16px;
+      background: var(--color-accent-ghost);
+      color: var(--color-accent-dark);
+      border-radius: var(--radius-full);
+      font-size: var(--text-sm);
+      font-weight: 600;
+      margin-bottom: var(--space-lg);
+    }
+
+    .pricing-hero__title {
+      font-size: clamp(1.75rem, 4vw, 2.75rem);
+      font-weight: 800;
+      color: var(--ink-primary);
+      margin-bottom: var(--space-md);
+      line-height: 1.3;
+    }
+
+    .pricing-hero__desc {
+      font-size: var(--text-lg);
+      color: var(--ink-secondary);
+      max-width: 55ch;
+      margin: 0 auto;
+      line-height: 1.8;
+    }
+
+    /* How it works mini-explainer */
+    .pricing-explainer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-xl);
+      flex-wrap: wrap;
+      margin-top: var(--space-xl);
+      padding: var(--space-lg) var(--space-xl);
+      background: var(--bg-surface);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-xl);
+      max-width: 700px;
+      margin-inline: auto;
+    }
+
+    .pricing-explainer__item {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      font-size: var(--text-sm);
+      color: var(--ink-secondary);
+    }
+
+    .pricing-explainer__icon {
+      width: 2rem;
+      height: 2rem;
+      border-radius: var(--radius-md);
+      display: grid;
+      place-items: center;
+      flex-shrink: 0;
+    }
+
+    .pricing-explainer__icon--fee {
+      background: oklch(0.93 0.05 230);
+      color: oklch(0.45 0.15 230);
+    }
+
+    .pricing-explainer__icon--percent {
+      background: oklch(0.93 0.05 155);
+      color: oklch(0.40 0.15 155);
+    }
+
+    .pricing-explainer__plus {
+      font-size: var(--text-xl);
+      font-weight: 700;
+      color: var(--ink-muted);
+    }
+
+    /* 4-column pricing grid */
+    .pricing-grid-4 {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: var(--space-lg);
+      align-items: stretch;
+    }
+
+    @media (max-width: 1100px) {
+      .pricing-grid-4 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (max-width: 640px) {
+      .pricing-grid-4 {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    /* Plan card */
+    .plan-card {
+      background: var(--bg-surface);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-xl);
+      padding: var(--space-xl);
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .plan-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 40px oklch(0 0 0 / 0.08);
+    }
+
+    .plan-card--featured {
+      border-color: var(--color-accent);
+      border-width: 2px;
+      box-shadow: 0 8px 32px oklch(0.55 0.15 200 / 0.12);
+    }
+
+    .plan-card--featured:hover {
+      box-shadow: 0 16px 48px oklch(0.55 0.15 200 / 0.18);
+    }
+
+    .plan-card__badge {
+      position: absolute;
+      top: -12px;
+      inset-inline-start: 50%;
+      transform: translateX(50%);
+      padding: 4px 16px;
+      background: var(--color-accent);
+      color: white;
+      font-size: var(--text-xs);
+      font-weight: 700;
+      border-radius: var(--radius-full);
+      white-space: nowrap;
+    }
+
+    [dir="rtl"] .plan-card__badge {
+      transform: translateX(50%);
+    }
+
+    .plan-card__name {
+      font-size: var(--text-lg);
+      font-weight: 800;
+      color: var(--ink-primary);
+      margin-bottom: var(--space-2xs);
+    }
+
+    .plan-card__tagline {
+      font-size: var(--text-sm);
+      color: var(--ink-muted);
+      margin-bottom: var(--space-lg);
+    }
+
+    /* Price block */
+    .plan-card__price {
+      margin-bottom: var(--space-lg);
+      padding-bottom: var(--space-lg);
+      border-bottom: 1px solid var(--border-subtle);
+    }
+
+    .plan-card__amount {
+      font-size: var(--text-3xl);
+      font-weight: 900;
+      color: var(--ink-primary);
+      line-height: 1;
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+    }
+
+    .plan-card__amount-currency {
+      font-size: var(--text-base);
+      font-weight: 600;
+      color: var(--ink-secondary);
+    }
+
+    .plan-card__amount-period {
+      font-size: var(--text-sm);
+      font-weight: 500;
+      color: var(--ink-muted);
+    }
+
+    .plan-card__amount--free {
+      color: var(--color-accent-dark);
+    }
+
+    .plan-card__platform {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      margin-top: var(--space-sm);
+      padding: 8px 12px;
+      background: oklch(0.96 0.02 155);
+      border-radius: var(--radius-md);
+      font-size: var(--text-sm);
+      color: oklch(0.35 0.12 155);
+      font-weight: 600;
+    }
+
+    .plan-card__platform-label {
+      color: oklch(0.50 0.08 155);
+      font-weight: 500;
+    }
+
+    /* Trial badge */
+    .plan-card__trial {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      background: oklch(0.95 0.04 80);
+      color: oklch(0.45 0.12 80);
+      border-radius: var(--radius-md);
+      font-size: var(--text-xs);
+      font-weight: 600;
+      margin-top: var(--space-sm);
+    }
+
+    /* Features list */
+    .plan-card__features {
+      list-style: none;
+      padding: 0;
+      margin: 0 0 var(--space-xl);
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .plan-card__features li {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--space-xs);
+      font-size: var(--text-sm);
+      color: var(--ink-secondary);
+      line-height: 1.6;
+    }
+
+    .plan-card__features li::before {
+      content: '';
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      margin-top: 2px;
+      background: oklch(0.93 0.05 170);
+      border-radius: var(--radius-full);
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23178a5b' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
+      background-size: 12px;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+
+    .plan-card__cta {
+      margin-top: auto;
+    }
+
+    .plan-card__cta .btn {
+      width: 100%;
+      text-align: center;
+      justify-content: center;
+    }
+
+    /* Comparison table */
+    .compare-table-wrap {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-xl);
+      background: var(--bg-surface);
+    }
+
+    .compare-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: var(--text-sm);
+      min-width: 700px;
+    }
+
+    .compare-table th,
+    .compare-table td {
+      padding: 14px 18px;
+      text-align: center;
+      border-bottom: 1px solid var(--border-subtle);
+    }
+
+    .compare-table th {
+      background: var(--bg-muted);
+      font-weight: 700;
+      color: var(--ink-primary);
+    }
+
+    .compare-table th:first-child,
+    .compare-table td:first-child {
+      text-align: start;
+      font-weight: 600;
+      color: var(--ink-primary);
+    }
+
+    .compare-table td {
+      color: var(--ink-secondary);
+    }
+
+    .compare-table tbody tr:last-child td {
+      border-bottom: none;
+    }
+
+    .compare-table .check {
+      color: oklch(0.45 0.18 155);
+      font-weight: 700;
+    }
+
+    .compare-table .cross {
+      color: oklch(0.7 0 0);
+    }
+
+    .compare-table .featured-col {
+      background: oklch(0.55 0.15 200 / 0.04);
+    }
+
+    /* Value props strip */
+    .value-strip {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: var(--space-md);
+      padding: var(--space-xl);
+      background: var(--color-primary);
+      border-radius: var(--radius-xl);
+      text-align: center;
+    }
+
+    .value-strip__item {
+      color: white;
+    }
+
+    .value-strip__icon {
+      font-size: 1.5rem;
+      margin-bottom: var(--space-2xs);
+    }
+
+    .value-strip__text {
+      font-size: var(--text-sm);
+      font-weight: 600;
+      opacity: 0.95;
+    }
+  </style>
 </head>
 <body>
 
@@ -37,106 +395,190 @@
   </nav>
 
   <!-- Hero -->
-  <section class="module-hero section">
-    <div class="container">
-      <div class="module-hero__content" data-reveal>
-        <nav class="breadcrumb" aria-label="مسار التنقل">
-          <a href="/">الرئيسية</a>
-          <span class="breadcrumb__separator">/</span>
-          <span>الباقات والأسعار</span>
-        </nav>
-        <h1 class="module-hero__title">أسعار عادلة تنمو مع أكاديميتك</h1>
-        <p class="module-hero__desc">لا رسوم خفية، لا عقود طويلة. ادفع فقط مقابل ما تحتاجه — وتوسع عندما تكون جاهزاً.</p>
+  <section class="pricing-hero">
+    <div class="container" data-reveal>
+      <span class="pricing-hero__badge">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
+        فترة تجريبية مجانية لكل الباقات
+      </span>
+      <h1 class="pricing-hero__title">ادفع بما يناسب حجم أكاديميتك</h1>
+      <p class="pricing-hero__desc">نظام تسعير شفاف: اشتراك شهري ثابت + نسبة بسيطة من التحصيلات. كل ما كبرت الباقة، قلّت النسبة.</p>
+
+      <!-- How pricing works -->
+      <div class="pricing-explainer" data-reveal="100">
+        <div class="pricing-explainer__item">
+          <div class="pricing-explainer__icon pricing-explainer__icon--fee">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>
+          </div>
+          <span>اشتراك شهري ثابت</span>
+        </div>
+        <span class="pricing-explainer__plus">+</span>
+        <div class="pricing-explainer__item">
+          <div class="pricing-explainer__icon pricing-explainer__icon--percent">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="9" r="2"/><circle cx="15" cy="15" r="2"/><path d="M7 17L17 7"/></svg>
+          </div>
+          <span>نسبة من التحصيلات (تقل مع الباقات الأعلى)</span>
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- Pricing Plans -->
+  <!-- Pricing Cards -->
   <section class="section">
     <div class="container">
-      <div class="pricing-grid" data-reveal>
-
-        <!-- Starter Plan -->
-        <div class="pricing-card">
-          <div class="pricing-card__header">
-            <h3 class="pricing-card__name">البداية</h3>
-            <p class="pricing-card__desc">للأكاديميات الصغيرة والناشئة</p>
-            <div class="pricing-card__price">
-              <span class="pricing-card__amount">تواصل معنا</span>
+      <div class="pricing-grid-4" data-reveal>
+
+        <!-- Plan 1: Platform % Only -->
+        <div class="plan-card">
+          <h3 class="plan-card__name">نسبة فقط</h3>
+          <p class="plan-card__tagline">ابدأ بدون أي تكلفة ثابتة</p>
+
+          <div class="plan-card__price">
+            <div class="plan-card__amount plan-card__amount--free">
+              <span>مجاناً</span>
+            </div>
+            <div class="plan-card__platform">
+              <span>نسبة المنصة:</span>
+              <strong dir="ltr">12%</strong>
+              <span class="plan-card__platform-label">من التحصيلات</span>
+            </div>
+            <div class="plan-card__trial">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+              <span dir="ltr">14</span> يوم تجريبي
             </div>
           </div>
-          <div class="pricing-card__body">
-            <ul class="pricing-card__features">
-              <li>حتى 100 مشترك</li>
-              <li>فرع واحد</li>
-              <li>إدارة المشتركين</li>
-              <li>البرامج والمجموعات</li>
-              <li>تسجيل الحضور</li>
-              <li>الفواتير والمدفوعات</li>
-              <li>تقارير أساسية</li>
-              <li>الدعم عبر WhatsApp</li>
-            </ul>
-          </div>
-          <div class="pricing-card__footer">
-            <a href="contact.html" class="btn btn--secondary btn--large" style="width: 100%;">احجز عرض</a>
+
+          <ul class="plan-card__features">
+            <li>اشتراك شهري: 0 ج.م</li>
+            <li>كل مزايا النظام الأساسية</li>
+            <li>إدارة المشتركين والحضور</li>
+            <li>الفواتير والمدفوعات</li>
+            <li>تقارير أساسية</li>
+            <li>دعم عبر WhatsApp</li>
+            <li>مناسب لأكاديميات تحت التأسيس</li>
+          </ul>
+
+          <div class="plan-card__cta">
+            <a href="contact.html" class="btn btn--secondary btn--large">ابدأ مجاناً</a>
           </div>
         </div>
 
-        <!-- Professional Plan (Featured) -->
-        <div class="pricing-card pricing-card--featured">
-          <div class="pricing-card__badge">الأكثر شيوعاً</div>
-          <div class="pricing-card__header">
-            <h3 class="pricing-card__name">الاحترافي</h3>
-            <p class="pricing-card__desc">للأكاديميات المتوسطة والنامية</p>
-            <div class="pricing-card__price">
-              <span class="pricing-card__amount">تواصل معنا</span>
+        <!-- Plan 2: Starter -->
+        <div class="plan-card">
+          <h3 class="plan-card__name">المبتدئ</h3>
+          <p class="plan-card__tagline">للأكاديميات الصغيرة والناشئة</p>
+
+          <div class="plan-card__price">
+            <div class="plan-card__amount">
+              <span dir="ltr">1,000</span>
+              <span class="plan-card__amount-currency">ج.م</span>
+              <span class="plan-card__amount-period">/ شهرياً</span>
+            </div>
+            <div class="plan-card__platform">
+              <span>نسبة المنصة:</span>
+              <strong dir="ltr">7.5%</strong>
+              <span class="plan-card__platform-label">من التحصيلات</span>
+            </div>
+            <div class="plan-card__trial">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+              <span dir="ltr">14</span> يوم تجريبي
             </div>
           </div>
-          <div class="pricing-card__body">
-            <ul class="pricing-card__features">
-              <li>حتى 500 مشترك</li>
-              <li>حتى 3 فروع</li>
-              <li>كل مزايا باقة البداية</li>
-              <li>محرك التسعير الذكي</li>
-              <li>المخازن والمنتجات</li>
-              <li>الموارد البشرية والرواتب</li>
-              <li>المنشآت والحجوزات</li>
-              <li>الإشعارات (بريد + SMS)</li>
-              <li>تقارير متقدمة + تصدير Excel</li>
-              <li>الصلاحيات المتقدمة</li>
-              <li>دعم أولوية</li>
-            </ul>
-          </div>
-          <div class="pricing-card__footer">
-            <a href="contact.html" class="btn btn--primary btn--large" style="width: 100%;">احجز عرض</a>
+
+          <ul class="plan-card__features">
+            <li>كل مزايا باقة "نسبة فقط"</li>
+            <li>إدارة البرامج والمجموعات</li>
+            <li>الجدول الأسبوعي</li>
+            <li>التسجيلات وقائمة الانتظار</li>
+            <li>تقارير متوسطة</li>
+            <li>إشعارات بريد إلكتروني</li>
+            <li>دعم أولوية</li>
+          </ul>
+
+          <div class="plan-card__cta">
+            <a href="contact.html" class="btn btn--secondary btn--large">احجز عرض</a>
           </div>
         </div>
 
-        <!-- Enterprise Plan -->
-        <div class="pricing-card">
-          <div class="pricing-card__header">
-            <h3 class="pricing-card__name">المؤسسي</h3>
-            <p class="pricing-card__desc">للأكاديميات الكبيرة والسلاسل</p>
-            <div class="pricing-card__price">
-              <span class="pricing-card__amount">سعر مخصص</span>
+        <!-- Plan 3: Enterprise (Featured) -->
+        <div class="plan-card plan-card--featured">
+          <span class="plan-card__badge">الأكثر طلباً</span>
+          <h3 class="plan-card__name">المؤسسي</h3>
+          <p class="plan-card__tagline">للأكاديميات المتوسطة والنامية</p>
+
+          <div class="plan-card__price">
+            <div class="plan-card__amount">
+              <span dir="ltr">3,500</span>
+              <span class="plan-card__amount-currency">ج.م</span>
+              <span class="plan-card__amount-period">/ شهرياً</span>
+            </div>
+            <div class="plan-card__platform">
+              <span>نسبة المنصة:</span>
+              <strong dir="ltr">5%</strong>
+              <span class="plan-card__platform-label">من التحصيلات</span>
+            </div>
+            <div class="plan-card__trial">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+              <span dir="ltr">30</span> يوم تجريبي
             </div>
           </div>
-          <div class="pricing-card__body">
-            <ul class="pricing-card__features">
-              <li>مشتركين بلا حدود</li>
-              <li>فروع بلا حدود</li>
-              <li>كل مزايا الباقة الاحترافية</li>
-              <li>تطبيقات الهاتف (مدربين + أولياء أمور)</li>
-              <li>API للتكامل مع أنظمة أخرى</li>
-              <li>تخصيص حسب الطلب</li>
-              <li>مدير حساب مخصص</li>
-              <li>تدريب فريق العمل</li>
-              <li>SLA ضمان وقت التشغيل</li>
-              <li>استضافة خاصة (اختياري)</li>
-            </ul>
+
+          <ul class="plan-card__features">
+            <li>كل مزايا باقة "المبتدئ"</li>
+            <li>محرك التسعير الذكي</li>
+            <li>المنشآت ونظام الحارات</li>
+            <li>المخازن والمنتجات</li>
+            <li>الموارد البشرية والرواتب</li>
+            <li>نقطة البيع (POS)</li>
+            <li>إشعارات SMS + بريد</li>
+            <li>تقارير متقدمة + تصدير</li>
+            <li>صلاحيات متقدمة متعددة الأدوار</li>
+            <li>فترة تجريبية أطول (30 يوم)</li>
+            <li>فترة سماح 14 يوم</li>
+          </ul>
+
+          <div class="plan-card__cta">
+            <a href="contact.html" class="btn btn--primary btn--large">ابدأ الآن</a>
+          </div>
+        </div>
+
+        <!-- Plan 4: Professional -->
+        <div class="plan-card">
+          <h3 class="plan-card__name">الاحترافي</h3>
+          <p class="plan-card__tagline">للأكاديميات الكبيرة والسلاسل</p>
+
+          <div class="plan-card__price">
+            <div class="plan-card__amount">
+              <span dir="ltr">10,000</span>
+              <span class="plan-card__amount-currency">ج.م</span>
+              <span class="plan-card__amount-period">/ شهرياً</span>
+            </div>
+            <div class="plan-card__platform">
+              <span>نسبة المنصة:</span>
+              <strong dir="ltr">3.5%</strong>
+              <span class="plan-card__platform-label">من التحصيلات</span>
+            </div>
+            <div class="plan-card__trial">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
+              <span dir="ltr">14</span> يوم تجريبي
+            </div>
           </div>
-          <div class="pricing-card__footer">
-            <a href="contact.html" class="btn btn--secondary btn--large" style="width: 100%;">تواصل للتفاصيل</a>
+
+          <ul class="plan-card__features">
+            <li>كل مزايا الباقة المؤسسية</li>
+            <li>فروع متعددة بلا حدود</li>
+            <li>تطبيقات مدربين + أولياء أمور</li>
+            <li>API للتكامل مع أنظمة خارجية</li>
+            <li>تخصيصات حسب الطلب</li>
+            <li>مدير حساب مخصص</li>
+            <li>تدريب فريق العمل</li>
+            <li>أقل نسبة منصة (3.5%)</li>
+            <li>SLA + ضمان وقت التشغيل</li>
+            <li>استضافة خاصة (اختياري)</li>
+          </ul>
+
+          <div class="plan-card__cta">
+            <a href="contact.html" class="btn btn--secondary btn--large">تواصل معنا</a>
           </div>
         </div>
 
@@ -144,8 +586,191 @@
     </div>
   </section>
 
-  <!-- All Plans Include -->
+  <!-- Value Strip -->
+  <section class="section" style="padding-top: 0;">
+    <div class="container" data-reveal>
+      <div class="value-strip">
+        <div class="value-strip__item">
+          <div class="value-strip__icon">🔓</div>
+          <div class="value-strip__text">بدون عقود إلزامية</div>
+        </div>
+        <div class="value-strip__item">
+          <div class="value-strip__icon">💳</div>
+          <div class="value-strip__text">إلغاء في أي وقت</div>
+        </div>
+        <div class="value-strip__item">
+          <div class="value-strip__icon">🔄</div>
+          <div class="value-strip__text">ترقية أو تخفيض فوري</div>
+        </div>
+        <div class="value-strip__item">
+          <div class="value-strip__icon">🛡️</div>
+          <div class="value-strip__text">ضمان استرداد 30 يوم</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Comparison Table -->
   <section class="section section--muted">
+    <div class="container">
+      <div class="section-header section-header--center" data-reveal>
+        <h2 class="section-header__title">مقارنة تفصيلية</h2>
+        <p class="section-header__desc">كل ما تحتاج معرفته عن كل باقة في مكان واحد</p>
+      </div>
+
+      <div class="compare-table-wrap" data-reveal="100">
+        <table class="compare-table">
+          <thead>
+            <tr>
+              <th>الميزة</th>
+              <th>نسبة فقط</th>
+              <th>المبتدئ</th>
+              <th class="featured-col">المؤسسي</th>
+              <th>الاحترافي</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>الاشتراك الشهري</td>
+              <td dir="ltr">0 EGP</td>
+              <td dir="ltr">1,000 EGP</td>
+              <td class="featured-col" dir="ltr">3,500 EGP</td>
+              <td dir="ltr">10,000 EGP</td>
+            </tr>
+            <tr>
+              <td>نسبة المنصة</td>
+              <td dir="ltr">12%</td>
+              <td dir="ltr">7.5%</td>
+              <td class="featured-col" dir="ltr">5%</td>
+              <td dir="ltr">3.5%</td>
+            </tr>
+            <tr>
+              <td>فترة التجربة المجانية</td>
+              <td dir="ltr">14 يوم</td>
+              <td dir="ltr">14 يوم</td>
+              <td class="featured-col" dir="ltr">30 يوم</td>
+              <td dir="ltr">14 يوم</td>
+            </tr>
+            <tr>
+              <td>فترة السماح</td>
+              <td dir="ltr">7 أيام</td>
+              <td dir="ltr">7 أيام</td>
+              <td class="featured-col" dir="ltr">14 يوم</td>
+              <td dir="ltr">10 أيام</td>
+            </tr>
+            <tr>
+              <td>إدارة المشتركين</td>
+              <td class="check">✓</td>
+              <td class="check">✓</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>الفواتير والمدفوعات</td>
+              <td class="check">✓</td>
+              <td class="check">✓</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>تسجيل الحضور</td>
+              <td class="check">✓</td>
+              <td class="check">✓</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>البرامج والمجموعات</td>
+              <td class="cross">—</td>
+              <td class="check">✓</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>الجدول الأسبوعي</td>
+              <td class="cross">—</td>
+              <td class="check">✓</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>محرك التسعير الذكي</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>المنشآت ونظام الحارات</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>المخازن والمنتجات</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>الموارد البشرية والرواتب</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>نقطة البيع (POS)</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>إشعارات SMS</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="featured-col check">✓</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>فروع متعددة</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>تطبيقات موبايل</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>API وتكاملات خارجية</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="check">✓</td>
+            </tr>
+            <tr>
+              <td>مدير حساب مخصص</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="cross">—</td>
+              <td class="check">✓</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+
+  <!-- All Plans Include -->
+  <section class="section">
     <div class="container">
       <div class="section-header section-header--center" data-reveal>
         <h2 class="section-header__title">كل الباقات تشمل</h2>
@@ -155,15 +780,15 @@
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); max-width: 900px; margin: 0 auto;" data-reveal="200">
         <div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
           <svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" 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>
-          <div><strong>إعداد وتفعيل مجاني</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">نساعدك في إدخال بياناتك</span></div>
+          <div><strong>إعداد وتفعيل مجاني</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">نساعدك في إدخال بياناتك الأولى</span></div>
         </div>
         <div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
           <svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" 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>
-          <div><strong>تحديثات مستمرة</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">مزايا جديدة كل شهر</span></div>
+          <div><strong>تحديثات مستمرة</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">مزايا جديدة كل شهر بدون تكلفة</span></div>
         </div>
         <div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
           <svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" 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>
-          <div><strong>نسخ احتياطي يومي</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">بياناتك محمية دائماً</span></div>
+          <div><strong>نسخ احتياطي يومي</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">بياناتك محمية ومحفوظة دائماً</span></div>
         </div>
         <div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
           <svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" 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>
@@ -171,43 +796,47 @@
         </div>
         <div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
           <svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" 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>
-          <div><strong>واجهة عربية بالكامل</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">مصممة للسوق المصري</span></div>
+          <div><strong>واجهة عربية بالكامل</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">مصممة للسوق المصري والعربي</span></div>
         </div>
         <div style="display: flex; align-items: flex-start; gap: var(--space-sm);">
           <svg style="width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px;" 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>
-          <div><strong>دعم فني</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">فريق مصري يفهم مجالك</span></div>
+          <div><strong>دعم فني مصري</strong><br><span style="color: var(--ink-muted); font-size: var(--text-sm);">فريق يفهم مجال الأكاديميات الرياضية</span></div>
         </div>
       </div>
     </div>
   </section>
 
   <!-- FAQ -->
-  <section class="section">
+  <section class="section section--muted">
     <div class="container" style="max-width: 800px;">
       <div class="section-header section-header--center" data-reveal>
-        <h2 class="section-header__title">أسئلة شائعة</h2>
+        <h2 class="section-header__title">أسئلة شائعة عن التسعير</h2>
       </div>
 
       <div style="display: flex; flex-direction: column; gap: var(--space-md);" data-reveal="200">
         <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يوجد فترة تجريبية مجانية؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم — نقدم عرض تجريبي مباشر على بيانات مشابهة لأكاديميتك. بعد الاشتراك يوجد ضمان استرداد خلال 30 يوم إذا لم يعجبك النظام.</p>
+          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ما هي "نسبة المنصة" بالضبط؟</h4>
+          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نسبة بسيطة تُحسب من إجمالي المدفوعات التي تحصّلها عبر النظام (اشتراكات المشتركين، مبيعات المنتجات، إلخ). مثلاً: إذا حصّلت 100,000 ج.م في الشهر على الباقة المؤسسية (5%)، تكون نسبة المنصة 5,000 ج.م فقط.</p>
+        </div>
+        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
+          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل باقة "نسبة فقط" مناسبة لي؟</h4>
+          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">مثالية إذا كنت تبدأ أكاديمية جديدة أو عندك عدد صغير من المشتركين. تحصل على النظام كاملاً بدون دفع جنيه واحد كاشتراك — فقط 12% من التحصيلات. مع نمو أكاديميتك، الترقية لباقة أعلى توفر لك أكثر.</p>
         </div>
         <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكنني الترقية لباقة أعلى لاحقاً؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">بالتأكيد. يمكنك الترقية في أي وقت وسيتم احتساب الفرق فقط. بياناتك تبقى كما هي بدون أي فقد.</p>
+          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">متى تصبح الترقية أوفر؟</h4>
+          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">قاعدة بسيطة: إذا كانت تحصيلاتك الشهرية تتجاوز 15,000 ج.م، باقة المبتدئ (1,000 + 7.5%) أوفر من باقة "نسبة فقط" (12%). وإذا تجاوزت 70,000 ج.م، الباقة المؤسسية تصبح الخيار الأمثل.</p>
         </div>
         <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل أحتاج أجهزة أو سيرفرات خاصة؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا. النظام سحابي بالكامل — يعمل من أي متصفح على أي جهاز (كمبيوتر، تابلت، موبايل). لا تحتاج تثبيت أي شيء.</p>
+          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ماذا يحدث بعد انتهاء الفترة التجريبية؟</h4>
+          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">بعد انتهاء التجربة + فترة السماح، يتوقف النظام مؤقتاً حتى تفعّل الاشتراك. بياناتك تبقى محفوظة ولا تُحذف — يمكنك العودة في أي وقت.</p>
         </div>
         <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل بياناتي آمنة؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. نستخدم تشفير SSL، نسخ احتياطي يومي، وصلاحيات دقيقة. بياناتك ملكك ويمكنك تصديرها في أي وقت.</p>
+          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكنني التنقل بين الباقات؟</h4>
+          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم — الترقية فورية والتخفيض يبدأ من الشهر القادم. لا فقد لأي بيانات في كلا الحالتين.</p>
         </div>
         <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يوجد عقد إلزامي؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا. الاشتراك شهري ويمكنك الإلغاء في أي وقت. نحن واثقون أنك ستبقى لأن النظام يوفر لك وقت ومال حقيقي.</p>
+          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل أحتاج أجهزة خاصة؟</h4>
+          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا. النظام سحابي بالكامل ويعمل من أي متصفح (كمبيوتر، تابلت، موبايل). لا حاجة لسيرفرات أو تثبيت برامج.</p>
         </div>
       </div>
     </div>
@@ -215,13 +844,13 @@
 
   <!-- CTA -->
   <section class="section">
-    <div class="container" style="text-align: center; max-width: 600px;">
-      <h2 style="margin-bottom: var(--space-md);" data-reveal>مش متأكد أي باقة تناسبك؟</h2>
-      <p style="color: var(--ink-secondary); margin-bottom: var(--space-xl); font-size: var(--text-lg);" data-reveal="100">احجز عرض تجريبي مجاني ونساعدك تختار الباقة المناسبة لحجم أكاديميتك واحتياجاتك.</p>
+    <div class="container" style="text-align: center; max-width: 650px;">
+      <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);" data-reveal>مش متأكد أي باقة تناسبك؟</h2>
+      <p style="color: var(--ink-secondary); margin-bottom: var(--space-xl); font-size: var(--text-lg); line-height: 1.8;" data-reveal="100">احجز عرض تجريبي مجاني. نشوفك بيانات مشابهة لأكاديميتك ونساعدك تختار الباقة الأنسب لحجمك.</p>
       <div style="display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap;" data-reveal="200">
         <a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي</a>
-        <a href="https://wa.me/201XXXXXXXXX" target="_blank" class="btn btn--whatsapp btn--large">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.553 4.115 1.519 5.845L.052 23.668l5.964-1.415A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-1.98 0-3.83-.558-5.407-1.523l-.387-.231-3.538.839.891-3.436-.253-.402A9.77 9.77 0 012.182 12c0-5.414 4.404-9.818 9.818-9.818S21.818 6.586 21.818 12s-4.404 9.818-9.818 9.818z"/></svg>
+        <a href="https://wa.me/201000000000" target="_blank" class="btn btn--secondary btn--large" style="display: inline-flex; align-items: center; gap: 8px;">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="color: oklch(0.45 0.18 145);"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/></svg>
           تواصل عبر WhatsApp
         </a>
       </div>
@@ -239,8 +868,8 @@
         <div>
           <h4 class="footer__col-title">النظام</h4>
           <a href="features.html" class="footer__link">المزايا</a>
-          <a href="pricing.html" class="footer__link">التسعير</a>
-          <a href="features.html#members" class="footer__link">إدارة المشتركين</a>
+          <a href="swimming.html" class="footer__link">أكاديميات السباحة</a>
+          <a href="pricing.html" class="footer__link">الباقات والأسعار</a>
           <a href="features.html#finance" class="footer__link">المالية</a>
         </div>
         <div>
@@ -252,19 +881,19 @@
         <div>
           <h4 class="footer__col-title">تواصل</h4>
           <a href="contact.html" class="footer__link">اطلب عرض تجريبي</a>
-          <a href="https://wa.me/201XXXXXXXXX" class="footer__link" target="_blank">WhatsApp</a>
+          <a href="https://wa.me/201000000000" class="footer__link" target="_blank">WhatsApp</a>
           <span class="footer__link" style="cursor: default;">القاهرة، مصر</span>
         </div>
       </div>
       <div class="footer__bottom">
-        <span>&copy; 2024 El-Captain</span>
+        <span>El-Captain ERP System</span>
         <span>نظام إدارة الأكاديميات الرياضية</span>
       </div>
     </div>
   </footer>
 
   <!-- WhatsApp FAB -->
-  <a href="https://wa.me/201XXXXXXXXX" target="_blank" class="whatsapp-fab" aria-label="تواصل عبر WhatsApp">
+  <a href="https://wa.me/201000000000" target="_blank" class="whatsapp-fab" aria-label="تواصل عبر WhatsApp">
     <svg width="28" height="28" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.124.553 4.115 1.519 5.845L.052 23.668l5.964-1.415A11.94 11.94 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-1.98 0-3.83-.558-5.407-1.523l-.387-.231-3.538.839.891-3.436-.253-.402A9.77 9.77 0 012.182 12c0-5.414 4.404-9.818 9.818-9.818S21.818 6.586 21.818 12s-4.404 9.818-9.818 9.818z"/></svg>
   </a>