diff --git a/apps/web/src/pages/ExecutiveShowcase.tsx b/apps/web/src/pages/ExecutiveShowcase.tsx
index b3025ff..1df8cbc 100644
--- a/apps/web/src/pages/ExecutiveShowcase.tsx
+++ b/apps/web/src/pages/ExecutiveShowcase.tsx
@@ -12,43 +12,81 @@ import {
   Radio, 
   TrendingUp, 
   Award,
-  CheckCircle,
-  XCircle,
-  HelpCircle,
-  ChevronLeft
+  CheckCircle2,
+  ChevronLeft,
+  Mountain,
+  AlertTriangle,
+  Compass,
+  Zap,
+  Target,
+  Plane,
+  Radar,
+  Sparkles,
+  ExternalLink
 } from 'lucide-react';
 
 export const ExecutiveShowcase: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<'strategy' | 'tactical' | 'comparison' | 'roadmap'>('strategy');
+  const [activeTab, setActiveTab] = useState<'strategy' | 'tactical' | 'comparison' | 'roadmap'>('tactical');
 
-  const appleFont = '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro Arabic", system-ui, -apple-system, sans-serif';
+  const appleFont = '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Arabic", "SF Pro AR", "Helvetica Neue", "Tajawal", system-ui, sans-serif';
 
   return (
     <div style={{
       height: '100vh',
       overflowY: 'auto',
       overflowX: 'hidden',
-      background: '#0a0d14',
-      color: '#f1f5f9',
+      background: 'linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%)',
+      color: '#0f172a',
       fontFamily: appleFont,
       direction: 'rtl',
-      paddingTop: 48,
-      paddingBottom: 80,
+      paddingTop: 54,
+      paddingBottom: 90,
       scrollBehavior: 'smooth'
     }}>
-      {/* Top Executive Header */}
+      {/* Dynamic Keyframes Animation Injection */}
+      <style>{`
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes pulseGlow {
+          0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.2); }
+          50% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); }
+        }
+        @keyframes floatSlow {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-4px); }
+        }
+        .apple-card {
+          transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .apple-card:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.1), 0 4px 12px -2px rgba(15, 23, 42, 0.05) !important;
+          border-color: #cbd5e1 !important;
+        }
+        .tab-btn {
+          transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .tab-btn:hover {
+          transform: translateY(-1px);
+        }
+      `}</style>
+
+      {/* Top Executive Header (Apple Light Frosted Glass) */}
       <header style={{
-        borderBottom: '1px solid #1e293b',
-        background: 'rgba(10, 13, 20, 0.88)',
-        backdropFilter: 'blur(20px)',
-        WebkitBackdropFilter: 'blur(20px)',
+        borderBottom: '1px solid rgba(226, 232, 240, 0.85)',
+        background: 'rgba(255, 255, 255, 0.86)',
+        backdropFilter: 'blur(24px)',
+        WebkitBackdropFilter: 'blur(24px)',
         position: 'sticky',
         top: 0,
         zIndex: 50,
-        padding: '14px 28px'
+        padding: '12px 28px',
+        boxShadow: '0 4px 20px -4px rgba(15, 23, 42, 0.04)'
       }}>
         <div style={{
-          maxWidth: 1240,
+          maxWidth: 1260,
           margin: '0 auto',
           display: 'flex',
           justifyContent: 'space-between',
@@ -60,181 +98,219 @@ export const ExecutiveShowcase: React.FC = () => {
             <div style={{
               width: 44,
               height: 44,
-              borderRadius: 10,
-              background: '#1e293b',
-              border: '1px solid #334155',
+              borderRadius: 12,
+              background: 'linear-gradient(135deg, #4f46e5, #3b82f6)',
+              boxShadow: '0 4px 12px rgba(79, 70, 229, 0.28)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              color: '#38bdf8'
+              color: '#ffffff'
             }}>
               <Shield size={22} />
             </div>
             <div>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                <h1 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 700, letterSpacing: '-0.01em', color: '#f8fafc' }}>
-                  منظومة انطلاق للسيادة المكانية والخرائط التكتيكية
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                <h1 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 800, letterSpacing: '-0.02em', color: '#0f172a' }}>
+                  منظومة انطلاق للسيادة المكانية والتحليل التكتيكي
                 </h1>
                 <span style={{
                   fontSize: '11px',
                   background: 'rgba(16, 185, 129, 0.1)',
-                  color: '#34d399',
+                  color: '#059669',
                   border: '1px solid rgba(16, 185, 129, 0.25)',
-                  padding: '2px 8px',
-                  borderRadius: 6,
-                  fontWeight: 600
+                  padding: '2px 9px',
+                  borderRadius: 999,
+                  fontWeight: 700
                 }}>
-                  🇯🇴 سيادة أردنية 100%
+                  🇯🇴 سيادة وطنية 100%
+                </span>
+                <span style={{
+                  fontSize: '11px',
+                  background: 'rgba(99, 102, 241, 0.08)',
+                  color: '#4f46e5',
+                  border: '1px solid rgba(99, 102, 241, 0.2)',
+                  padding: '2px 9px',
+                  borderRadius: 999,
+                  fontWeight: 700
+                }}>
+                  🎖️ C4ISR & GEOINT
                 </span>
               </div>
-              <p style={{ margin: '2px 0 0 0', fontSize: '0.8rem', color: '#64748b' }}>
-                عرض استراتيجي للمركز الجغرافي الملكي الأردني والقيادة العامة | إعداد: المقدم م. حمزة الغويري
+              <p style={{ margin: '2px 0 0 0', fontSize: '0.8rem', color: '#64748b', fontWeight: 500 }}>
+                عرض استراتيجي للقيادة العامة والمركز الجغرافي الملكي الأردني | إعداد: المقدم م. حمزة الغويري
               </p>
             </div>
           </div>
 
           {/* Quick Action Navigation */}
-          <div style={{ display: 'flex', gap: 10 }}>
+          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+            <a href="#tactical" style={{
+              textDecoration: 'none',
+              background: 'linear-gradient(135deg, #4f46e5, #4338ca)',
+              color: '#ffffff',
+              padding: '9px 18px',
+              borderRadius: 10,
+              fontSize: '0.84rem',
+              fontWeight: 700,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              boxShadow: '0 4px 14px rgba(79, 70, 229, 0.3)',
+              transition: 'all 0.2s ease'
+            }}>
+              <Crosshair size={15} /> فتح المنظومة التكتيكية
+            </a>
             <a href="#map" style={{
               textDecoration: 'none',
-              background: '#2563eb',
-              color: '#ffffff',
-              padding: '8px 18px',
-              borderRadius: 8,
-              fontSize: '0.85rem',
+              background: '#ffffff',
+              border: '1px solid #cbd5e1',
+              color: '#334155',
+              padding: '8px 16px',
+              borderRadius: 10,
+              fontSize: '0.84rem',
               fontWeight: 600,
               display: 'flex',
               alignItems: 'center',
               gap: 6,
-              transition: 'background 0.2s'
+              boxShadow: '0 2px 6px rgba(0, 0, 0, 0.03)'
             }}>
-              <MapIcon size={15} /> فتح الخريطة التفاعلية
-            </a>
-            <a href="#review" style={{
-              textDecoration: 'none',
-              background: '#1e293b',
-              border: '1px solid #334155',
-              color: '#94a3b8',
-              padding: '8px 16px',
-              borderRadius: 8,
-              fontSize: '0.85rem',
-              fontWeight: 600,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6
-            }}>
-              <Activity size={15} color="#38bdf8" /> لوحة تدقيق الشوارع
+              <MapIcon size={15} color="#4f46e5" /> الخريطة الحية
             </a>
           </div>
         </div>
       </header>
 
       {/* Main Container */}
-      <main style={{ maxWidth: 1240, margin: '0 auto', padding: '32px 24px' }}>
+      <main style={{ maxWidth: 1260, margin: '0 auto', padding: '36px 24px' }}>
 
-        {/* Hero Section */}
+        {/* Hero Section (Apple Light Executive Style) */}
         <section style={{
           textAlign: 'center',
-          padding: '44px 24px',
-          background: '#111726',
-          borderRadius: 16,
-          border: '1px solid #1e293b',
-          marginBottom: 36
+          padding: '48px 32px',
+          background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
+          borderRadius: 24,
+          border: '1px solid #e2e8f0',
+          boxShadow: '0 12px 36px -4px rgba(15, 23, 42, 0.06), 0 2px 10px -1px rgba(15, 23, 42, 0.03)',
+          marginBottom: 36,
+          position: 'relative',
+          overflow: 'hidden'
         }}>
+          {/* Subtle Ambient Background Gradient */}
           <div style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 8,
-            background: 'rgba(56, 189, 248, 0.08)',
-            border: '1px solid rgba(56, 189, 248, 0.2)',
-            padding: '5px 14px',
-            borderRadius: 8,
-            color: '#38bdf8',
-            fontSize: '0.82rem',
-            fontWeight: 600,
-            marginBottom: 18
-          }}>
-            <Cpu size={15} /> البديل السيادي الكامل لمنظومات إزري (ArcGIS) في الأردن
-          </div>
+            position: 'absolute',
+            top: '-20%',
+            left: '30%',
+            width: '40%',
+            height: '80%',
+            background: 'radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(255,255,255,0) 70%)',
+            pointerEvents: 'none',
+            zIndex: 0
+          }} />
 
-          <h2 style={{
-            fontSize: 'clamp(1.6rem, 3.2vw, 2.4rem)',
-            fontWeight: 700,
-            lineHeight: 1.35,
-            margin: '0 auto 16px auto',
-            maxWidth: 880,
-            color: '#f8fafc'
-          }}>
-            منصة خرائط وطنية ذكية تتغذى ذاتياً وتولد الشوارع والبيانات المكانية من حركة الأساطيل
-          </h2>
+          <div style={{ position: 'relative', zIndex: 1 }}>
+            <div style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 8,
+              background: 'rgba(79, 70, 229, 0.07)',
+              border: '1px solid rgba(79, 70, 229, 0.18)',
+              padding: '6px 16px',
+              borderRadius: 999,
+              color: '#4f46e5',
+              fontSize: '0.84rem',
+              fontWeight: 700,
+              marginBottom: 20
+            }}>
+              <Sparkles size={16} /> البديل الوطني المتكامل لمنظومات إزري (ArcGIS) في الأردن والشرق الأوسط
+            </div>
 
-          <p style={{
-            fontSize: '0.98rem',
-            color: '#94a3b8',
-            maxWidth: 780,
-            margin: '0 auto 28px auto',
-            lineHeight: 1.8
-          }}>
-            استثمار استراتيجي مزدوج: تطبيق نقل وخدمات لوجستية ذكي في الواجهة، ومحرك خرائط تكتيكي سيادي في الخلفية، يكتشف الطرق والمعالم تلقائياً في أي دولة أو مسرح عمليات بدون الحاجة لرخص أجنبية أو مسح ميداني بطيء.
-          </p>
+            <h2 style={{
+              fontSize: 'clamp(1.7rem, 3.4vw, 2.6rem)',
+              fontWeight: 800,
+              lineHeight: 1.32,
+              margin: '0 auto 18px auto',
+              maxWidth: 920,
+              color: '#0f172a',
+              letterSpacing: '-0.025em'
+            }}>
+              منصة استخبارات جغرافية وطنية وتوليد ذاتي للشوارع والتضاريس التكتيكية
+            </h2>
 
-          {/* Quick Metrics Bar */}
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-            gap: 14,
-            maxWidth: 960,
-            margin: '0 auto'
-          }}>
-            <div style={{ background: '#0a0d14', padding: '16px', borderRadius: 12, border: '1px solid #1e293b' }}>
-              <div style={{ fontSize: '1.6rem', fontWeight: 800, color: '#38bdf8' }}>60 FPS</div>
-              <div style={{ fontSize: '0.82rem', color: '#64748b', marginTop: 4 }}>سرعة عرض المتجهات (Vector Tiles)</div>
-            </div>
-            <div style={{ background: '#0a0d14', padding: '16px', borderRadius: 12, border: '1px solid #1e293b' }}>
-              <div style={{ fontSize: '1.6rem', fontWeight: 800, color: '#34d399' }}>100%</div>
-              <div style={{ fontSize: '0.82rem', color: '#64748b', marginTop: 4 }}>استقلالية تامة (Air-Gapped On-Premise)</div>
-            </div>
-            <div style={{ background: '#0a0d14', padding: '16px', borderRadius: 12, border: '1px solid #1e293b' }}>
-              <div style={{ fontSize: '1.6rem', fontWeight: 800, color: '#fbbf24' }}>$0</div>
-              <div style={{ fontSize: '0.82rem', color: '#64748b', marginTop: 4 }}>تكلفة رخص سنوية أو رسوم لكل مستخدم</div>
-            </div>
-            <div style={{ background: '#0a0d14', padding: '16px', borderRadius: 12, border: '1px solid #1e293b' }}>
-              <div style={{ fontSize: '1.6rem', fontWeight: 800, color: '#cbd5e1' }}>3 دول</div>
-              <div style={{ fontSize: '0.82rem', color: '#64748b', marginTop: 4 }}>الأردن 🇯🇴 • سوريا 🇸🇾 • مصر 🇪🇬</div>
+            <p style={{
+              fontSize: '1.02rem',
+              color: '#475569',
+              maxWidth: 820,
+              margin: '0 auto 32px auto',
+              lineHeight: 1.8,
+              fontWeight: 400
+            }}>
+              منظومة سيادية متكاملة تجمع بين <strong>محرك خرائط عالي الأداء معزول سحابياً (Air-Gapped)</strong>، وقدرات استخبارات تكتيكية متقدمة تشمل <strong>دراسة الأرض ثلاثية الأبعاد (21×21 DEM)</strong>، فحص الجروف الصخرية، خط النظر الكروي، مسارات المدفعية، وحساب حقول الألغام ومهابط الطيران.
+            </p>
+
+            {/* Quick Metrics Bar (Light Apple Glass) */}
+            <div style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
+              gap: 16,
+              maxWidth: 1040,
+              margin: '0 auto'
+            }}>
+              <div className="apple-card" style={{ background: '#ffffff', padding: '20px 16px', borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 900, color: '#4f46e5', letterSpacing: '-0.02em' }}>441 نقطة</div>
+                <div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#64748b', marginTop: 4 }}>مسح طبوغرافي عالي الدقة (21×21)</div>
+              </div>
+              <div className="apple-card" style={{ background: '#ffffff', padding: '20px 16px', borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 900, color: '#059669', letterSpacing: '-0.02em' }}>60 FPS</div>
+                <div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#64748b', marginTop: 4 }}>رندرة متجهات فورية (GPU Tiles)</div>
+              </div>
+              <div className="apple-card" style={{ background: '#ffffff', padding: '20px 16px', borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 900, color: '#d97706', letterSpacing: '-0.02em' }}>100%</div>
+                <div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#64748b', marginTop: 4 }}>معزولة أمنياً (Air-Gapped On-Prem)</div>
+              </div>
+              <div className="apple-card" style={{ background: '#ffffff', padding: '20px 16px', borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                <div style={{ fontSize: '1.85rem', fontWeight: 900, color: '#0284c7', letterSpacing: '-0.02em' }}>$0</div>
+                <div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#64748b', marginTop: 4 }}>تكاليف تراخيص سنوية أو قيود مستخدمين</div>
+              </div>
             </div>
           </div>
         </section>
 
-        {/* Tab Navigation */}
+        {/* Executive Tab Navigation (Apple iOS Segmented Control) */}
         <div style={{
           display: 'flex',
           justifyContent: 'center',
-          gap: 10,
-          marginBottom: 28,
-          flexWrap: 'wrap'
+          gap: 8,
+          marginBottom: 32,
+          flexWrap: 'wrap',
+          background: '#e2e8f0',
+          padding: '6px',
+          borderRadius: 14,
+          maxWidth: 920,
+          margin: '0 auto 32px auto'
         }}>
           {[
-            { id: 'strategy', label: '1. الرؤية وتوليد الخرائط الذاتي', icon: <TrendingUp size={15} /> },
-            { id: 'tactical', label: '2. الأدوات التكتيكية والعسكرية (LOS)', icon: <Crosshair size={15} /> },
-            { id: 'comparison', label: '3. المقارنة القاطعة مع إزري (Esri)', icon: <Layers size={15} /> },
-            { id: 'roadmap', label: '4. خطة الشراكة مع المركز الجغرافي', icon: <Award size={15} /> },
+            { id: 'tactical', label: '1. المنظومة التكتيكية والعسكرية', icon: <Crosshair size={16} /> },
+            { id: 'strategy', label: '2. التغذية والتوليد الذاتي للشوارع', icon: <TrendingUp size={16} /> },
+            { id: 'comparison', label: '3. مقارنة الجدارة مع إزري (Esri)', icon: <Layers size={16} /> },
+            { id: 'roadmap', label: '4. خارطة الشراكة والتنفيذ', icon: <Award size={16} /> },
           ].map((tab) => (
             <button
               key={tab.id}
+              className="tab-btn"
               onClick={() => setActiveTab(tab.id as any)}
               style={{
-                background: activeTab === tab.id ? '#2563eb' : '#111726',
-                border: activeTab === tab.id ? '1px solid #3b82f6' : '1px solid #1e293b',
-                color: activeTab === tab.id ? '#ffffff' : '#94a3b8',
-                padding: '10px 20px',
-                borderRadius: 8,
-                fontSize: '0.88rem',
-                fontWeight: 600,
+                background: activeTab === tab.id ? '#ffffff' : 'transparent',
+                border: 'none',
+                color: activeTab === tab.id ? '#4f46e5' : '#64748b',
+                padding: '10px 22px',
+                borderRadius: 10,
+                fontSize: '0.90rem',
+                fontWeight: activeTab === tab.id ? 800 : 600,
                 cursor: 'pointer',
                 display: 'flex',
                 alignItems: 'center',
                 gap: 8,
-                transition: 'all 0.15s ease'
+                boxShadow: activeTab === tab.id ? '0 2px 8px rgba(15, 23, 42, 0.08)' : 'none'
               }}
             >
               {tab.icon}
@@ -243,75 +319,254 @@ export const ExecutiveShowcase: React.FC = () => {
           ))}
         </div>
 
-        {/* TAB 1: STRATEGY */}
-        {activeTab === 'strategy' && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+        {/* TAB 1: TACTICAL DEFENSE (Highlighted & Expanded) */}
+        {activeTab === 'tactical' && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, animation: 'fadeIn 0.35s ease-out' }}>
+            
+            {/* Top Tactical Banner */}
             <div style={{
-              background: '#111726',
-              border: '1px solid #1e293b',
-              borderRadius: 16,
-              padding: '28px'
+              background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
+              border: '1px solid #e2e8f0',
+              borderRadius: 20,
+              padding: '32px',
+              boxShadow: '0 6px 24px -2px rgba(15, 23, 42, 0.05)'
             }}>
-              <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#f8fafc', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
-                <TrendingUp size={20} color="#38bdf8" /> حجر الأساس: كيف تحول حركة الأساطيل إلى خريطة سيادية حية؟
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16, marginBottom: 20 }}>
+                <div>
+                  <h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: '#0f172a', margin: '0 0 6px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
+                    <Crosshair size={24} color="#4f46e5" /> القدرات الاستخباراتية والتكتيكية المتقدمة (C4ISR Modules)
+                  </h3>
+                  <p style={{ color: '#64748b', fontSize: '0.92rem', margin: 0, lineHeight: 1.6 }}>
+                    حزمة متكاملة من خوارزميات المسح التضاريسي وتحليل مسرح العمليات لخدمة غرف القيادة والسيطرة وسلاح المدفعية والاستطلاع:
+                  </p>
+                </div>
+                <a href="#tactical" style={{
+                  textDecoration: 'none',
+                  background: 'linear-gradient(135deg, #4f46e5, #3b82f6)',
+                  color: '#ffffff',
+                  padding: '9px 18px',
+                  borderRadius: 10,
+                  fontSize: '0.84rem',
+                  fontWeight: 700,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 6,
+                  boxShadow: '0 4px 12px rgba(79, 70, 229, 0.25)'
+                }}>
+                  تجربة الأدوات التكتيكية عملياً <ExternalLink size={14} />
+                </a>
+              </div>
+
+              {/* 6 Tactical Cards Grid */}
+              <div style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
+                gap: 20,
+                marginTop: 24
+              }}>
+
+                {/* Card 1: 21x21 Terrain Study */}
+                <div className="apple-card" style={{ background: '#ffffff', padding: 22, borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                    <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(79, 70, 229, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4f46e5' }}>
+                      <Mountain size={20} />
+                    </div>
+                    <div>
+                      <h4 style={{ margin: 0, fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>
+                        دراسة الأرض ومصفوفة المسح (21×21 DEM)
+                      </h4>
+                      <span style={{ fontSize: '0.74rem', color: '#64748b' }}>441 عقدة مسح واستيفاء ثنائي الخطية</span>
+                    </div>
+                  </div>
+                  <ul style={{ paddingRight: 18, color: '#475569', fontSize: '0.86rem', lineHeight: 1.8, margin: 0 }}>
+                    <li>مسح تفصيلي لمربعات التضاريس يقلص حجم الخلية إلى أقل من 140 متراً.</li>
+                    <li>كشف وتحديد <strong>القمم الحاكمة والوديان العميقة</strong> تلقائياً بدقة المتر.</li>
+                    <li>تتبع مسارات مصارف السيول وبطون الأودية وسلاسل التلال المسيطرة.</li>
+                    <li>توليد تقرير تقدير الموقف التكتيكي الشامل (OAKOC) المعتمد عسكرياً.</li>
+                  </ul>
+                </div>
+
+                {/* Card 2: Cliff & Rock Barrier Detection */}
+                <div className="apple-card" style={{ background: '#ffffff', padding: 22, borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                    <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(239, 68, 68, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#dc2626' }}>
+                      <AlertTriangle size={20} />
+                    </div>
+                    <div>
+                      <h4 style={{ margin: 0, fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>
+                        كشف القواطع والجروف الصخرية (Cliffs)
+                      </h4>
+                      <span style={{ fontSize: '0.74rem', color: '#64748b' }}>موانع طبيعية قطعية (NO-GO)</span>
+                    </div>
+                  </div>
+                  <ul style={{ paddingRight: 18, color: '#475569', fontSize: '0.86rem', lineHeight: 1.8, margin: 0 }}>
+                    <li>حساب تفاضلي للميل الحاد ومعدل الهبوط الشاقولي ($\ge 28^\circ$).</li>
+                    <li>تحديد الجروف الصخرية الممتنعة على الدروع والآليات تلقائياً.</li>
+                    <li>إمكانية الانتقال والتركيز ثلاثي الأبعاد (3D FlyTo) على أي قاطع مرصود.</li>
+                    <li>تحديد نقاط الاختناق والمخانق الإجبارية لاستغلالها في الكمائن الدفاعية.</li>
+                  </ul>
+                </div>
+
+                {/* Card 3: 4-Tier Slope Mobility */}
+                <div className="apple-card" style={{ background: '#ffffff', padding: 22, borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                    <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(16, 185, 129, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#059669' }}>
+                      <Compass size={20} />
+                    </div>
+                    <div>
+                      <h4 style={{ margin: 0, fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>
+                        التصنيف العسكري الرباعي للميول وحركة الدروع
+                      </h4>
+                      <span style={{ fontSize: '0.74rem', color: '#64748b' }}>مصفوفة التنقل (Cross-Country Mobility)</span>
+                    </div>
+                  </div>
+                  <ul style={{ paddingRight: 18, color: '#475569', fontSize: '0.86rem', lineHeight: 1.8, margin: 0 }}>
+                    <li><strong>منبسط (GO &lt;7°):</strong> حركة حرة ممتازة للآليات والتشكيلات المدرعة.</li>
+                    <li><strong>متموج (SLOW-GO 7°-15°):</strong> حركة مقيدة ببطء واستهلاك أعلى للوقود.</li>
+                    <li><strong>وعر (SEVERE SLOW-GO 15°-28°):</strong> مسالك وعرة للمجنزرات وممتنعة على المدولبات.</li>
+                    <li><strong>جروف صخرية (NO-GO &ge;28°):</strong> حواجز طبيعية مانعة لحركة الدروع.</li>
+                  </ul>
+                </div>
+
+                {/* Card 4: Line of Sight (LOS) */}
+                <div className="apple-card" style={{ background: '#ffffff', padding: 22, borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                    <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(245, 158, 11, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#d97706' }}>
+                      <Eye size={20} />
+                    </div>
+                    <div>
+                      <h4 style={{ margin: 0, fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>
+                        تبادل الرؤية وخط النظر الكروي (LOS)
+                      </h4>
+                      <span style={{ fontSize: '0.74rem', color: '#64748b' }}>مع تصحيح تقوس الأرض وانكسار الضوء</span>
+                    </div>
+                  </div>
+                  <ul style={{ paddingRight: 18, color: '#475569', fontSize: '0.86rem', lineHeight: 1.8, margin: 0 }}>
+                    <li>فحص الرؤية المباشرة اللحظية بين الراصد والهدف بدقة المسح الليزري.</li>
+                    <li>كشف العوائق الجبلية الحاجبة للرؤية وتحديد نقطة الانسداد الدقيقة.</li>
+                    <li>حساب نسبة <strong>الأرض الميتة (Dead Ground)</strong> في حقل الملاحظة.</li>
+                    <li>حساب زاوية الموقع بالميللي العسكري (Mils) والسمت البوصلّي الدقيق.</li>
+                  </ul>
+                </div>
+
+                {/* Card 5: Viewshed 360 & Artillery Trajectory */}
+                <div className="apple-card" style={{ background: '#ffffff', padding: 22, borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                    <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(14, 165, 233, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0284c7' }}>
+                      <Radar size={20} />
+                    </div>
+                    <div>
+                      <h4 style={{ margin: 0, fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>
+                        الرؤية المحيطية 360° ومسار المقذوفات
+                      </h4>
+                      <span style={{ fontSize: '0.74rem', color: '#64748b' }}>Viewshed & Ballistic Trajectory</span>
+                    </div>
+                  </div>
+                  <ul style={{ paddingRight: 18, color: '#475569', fontSize: '0.86rem', lineHeight: 1.8, margin: 0 }}>
+                    <li>توليد مضلع كشف الرؤية المحيطية الكاملة بزاوية 360 درجة من قمة الراصد.</li>
+                    <li>حساب مسار المقذوف البالستي للمدفعية والهاونات وأعلى ارتفاع للقوس (Apex).</li>
+                    <li>حساب زمن الطيران بالثواني ومعدل الدقة الدائرية (CEP).</li>
+                    <li>تأكيد خلو مسار القذيفة من التلال والعوائق الجبلية المرتفعة.</li>
+                  </ul>
+                </div>
+
+                {/* Card 6: Minefields & HLZ */}
+                <div className="apple-card" style={{ background: '#ffffff', padding: 22, borderRadius: 16, border: '1px solid #e2e8f0', boxShadow: '0 4px 16px rgba(0,0,0,0.03)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
+                    <div style={{ width: 38, height: 38, borderRadius: 10, background: 'rgba(168, 85, 247, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#7c3aed' }}>
+                      <Plane size={20} />
+                    </div>
+                    <div>
+                      <h4 style={{ margin: 0, fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>
+                        هندسة حقول الألغام ومهابط المروحيات (HLZ)
+                      </h4>
+                      <span style={{ fontSize: '0.74rem', color: '#64748b' }}>Sapper Engineering & Aviation Safety</span>
+                    </div>
+                  </div>
+                  <ul style={{ paddingRight: 18, color: '#475569', fontSize: '0.86rem', lineHeight: 1.8, margin: 0 }}>
+                    <li>حساب كميات الألغام المضادة للدروع والأفراد وساعات الزرع الهندسية.</li>
+                    <li>تقييم ملاءمة الثغرات والمخانق لإنشاء السدود والموانع الهندسية.</li>
+                    <li>فحص مناطق هبوط الطيران العمودي والتأكد من استواء الأرض (&lt;7°).</li>
+                    <li>التحقق من خلو أقماع الاقتراب ومسارات الإقلاع من خطوط الطاقة والأشجار.</li>
+                  </ul>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+        )}
+
+        {/* TAB 2: AUTONOMOUS MAP GENERATION */}
+        {activeTab === 'strategy' && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, animation: 'fadeIn 0.35s ease-out' }}>
+            <div style={{
+              background: '#ffffff',
+              border: '1px solid #e2e8f0',
+              borderRadius: 20,
+              padding: '32px',
+              boxShadow: '0 6px 24px -2px rgba(15, 23, 42, 0.05)'
+            }}>
+              <h3 style={{ fontSize: '1.35rem', fontWeight: 800, color: '#0f172a', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
+                <TrendingUp size={22} color="#4f46e5" /> حجر الأساس: كيف تحول المنصة حركة الأساطيل إلى خريطة سيادية حية؟
               </h3>
-              <p style={{ color: '#94a3b8', fontSize: '0.95rem', lineHeight: 1.8 }}>
+              <p style={{ color: '#475569', fontSize: '0.96rem', lineHeight: 1.8 }}>
                 النموذج التقليدي المتبع لدى إزري والشركات الأجنبية يعتمد على انتظار فرق المسح الميداني أو التقاط صور أقمار صناعية باهظة كل عدة أشهر أو سنوات. في المقابل، تتبنى منصتنا <strong>فلسفة الخريطة الحية ذاتية التغذية والتوليد (Autonomous Self-Healing Map Grid)</strong>:
               </p>
 
               <div style={{
                 display: 'grid',
                 gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-                gap: 16,
-                marginTop: 20
+                gap: 18,
+                marginTop: 24
               }}>
-                <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
-                  <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(56, 189, 248, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#38bdf8', marginBottom: 12 }}>
-                    <Activity size={18} />
+                <div className="apple-card" style={{ background: '#f8fafc', padding: 20, borderRadius: 16, border: '1px solid #e2e8f0' }}>
+                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(79, 70, 229, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4f46e5', marginBottom: 14 }}>
+                    <Activity size={20} />
                   </div>
-                  <h4 style={{ margin: '0 0 8px 0', fontSize: '1rem', color: '#f8fafc' }}>1. استيعاب التتبع اللحظي (Telemetry)</h4>
-                  <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
+                  <h4 style={{ margin: '0 0 8px 0', fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>1. استيعاب التتبع اللحظي (Telemetry)</h4>
+                  <p style={{ fontSize: '0.88rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
                     المنصة تستوعب مئات آلاف نقاط الموقع من الآليات العسكرية أو أساطيل التوصيل والنقل كل 3 ثوانٍ وتعالجها مكانياً في محرك PostGIS فائق الأداء.
                   </p>
                 </div>
 
-                <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
-                  <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(168, 85, 247, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#c084fc', marginBottom: 12 }}>
-                    <Cpu size={18} />
+                <div className="apple-card" style={{ background: '#f8fafc', padding: 20, borderRadius: 16, border: '1px solid #e2e8f0' }}>
+                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(168, 85, 247, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#7c3aed', marginBottom: 14 }}>
+                    <Cpu size={20} />
                   </div>
-                  <h4 style={{ margin: '0 0 8px 0', fontSize: '1rem', color: '#f8fafc' }}>2. خوارزمية اكتشاف الطرق الجديدة</h4>
-                  <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
+                  <h4 style={{ margin: '0 0 8px 0', fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>2. خوارزمية اكتشاف الطرق الجديدة</h4>
+                  <p style={{ fontSize: '0.88rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
                     عندما تتحرك مركبات متعددة في مسار صحراوي أو حي جديد غير مرسوم على الخريطة، يقوم النظام بتوليد طريق مرشح (Candidate Road) وحساب طوله، سرعته، ومعدل الثقة به تلقائياً.
                   </p>
                 </div>
 
-                <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
-                  <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(52, 211, 153, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#34d399', marginBottom: 12 }}>
-                    <CheckCircle size={18} />
+                <div className="apple-card" style={{ background: '#f8fafc', padding: 20, borderRadius: 16, border: '1px solid #e2e8f0' }}>
+                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(16, 185, 129, 0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#059669', marginBottom: 14 }}>
+                    <CheckCircle2 size={20} />
                   </div>
-                  <h4 style={{ margin: '0 0 8px 0', fontSize: '1rem', color: '#f8fafc' }}>3. التدقيق والموافقة ونشر الملاحة فوراً</h4>
-                  <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
+                  <h4 style={{ margin: '0 0 8px 0', fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>3. التدقيق والموافقة ونشر الملاحة فوراً</h4>
+                  <p style={{ fontSize: '0.88rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
                     يستعرض مهندسو المركز الجغرافي الشوارع المكتشفة في لوحة التدقيق بجانب صور الأقمار الصناعية والخرائط السوفيتية، وبضغطة زر واحدة يُحقن الطريق في محرك الملاحة.
                   </p>
                 </div>
               </div>
 
               <div style={{
-                marginTop: 20,
-                padding: '16px 20px',
-                background: '#0a0d14',
-                borderRadius: 12,
-                border: '1px solid #1e293b',
+                marginTop: 24,
+                padding: '20px 24px',
+                background: 'linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(59, 130, 246, 0.05))',
+                borderRadius: 16,
+                border: '1px solid rgba(79, 70, 229, 0.15)',
                 display: 'flex',
                 alignItems: 'center',
-                gap: 14
+                gap: 16
               }}>
-                <Globe size={24} color="#38bdf8" style={{ flexShrink: 0 }} />
+                <Globe size={28} color="#4f46e5" style={{ flexShrink: 0 }} />
                 <div>
-                  <div style={{ fontWeight: 700, fontSize: '0.92rem', color: '#f8fafc' }}>
+                  <div style={{ fontWeight: 800, fontSize: '0.98rem', color: '#0f172a' }}>
                     الأثر العسكري والتوسعي: العمل في أي مسرح عمليات فورياً
                   </div>
-                  <div style={{ fontSize: '0.84rem', color: '#94a3b8', marginTop: 3, lineHeight: 1.6 }}>
+                  <div style={{ fontSize: '0.88rem', color: '#475569', marginTop: 4, lineHeight: 1.6 }}>
                     إذا تم نشر آليات القوات المسلحة أو الأجهزة الأمنية في أي منطقة حدودية أو دولة مجاورة (مثل جنوب سوريا، غرب العراق، صحراء سيناء)، يكفي تشغيل تطبيق التتبع لتبدأ المنصة فوراً برسم شبكة الطرق والممرات الوعرة ونشرها لباقي التشكيلات في الميدان دون انتظار أي طرف أجنبي.
                   </div>
                 </div>
@@ -320,82 +575,18 @@ export const ExecutiveShowcase: React.FC = () => {
           </div>
         )}
 
-        {/* TAB 2: TACTICAL */}
-        {activeTab === 'tactical' && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
-            <div style={{
-              background: '#111726',
-              border: '1px solid #1e293b',
-              borderRadius: 16,
-              padding: '28px'
-            }}>
-              <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#f8fafc', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
-                <Crosshair size={20} color="#fbbf24" /> قدرات الميدان والتحليل التكتيكي العسكري
-              </h3>
-              <p style={{ color: '#94a3b8', fontSize: '0.95rem', lineHeight: 1.8 }}>
-                تم تزويد المنصة بأدوات تحليل تضاريسي مخصصة لخدمة سلاح المدفعية، الاستطلاع، وغرف العمليات والسيطرة المشتركة:
-              </p>
-
-              <div style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-                gap: 16,
-                marginTop: 20
-              }}>
-                <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
-                    <Eye size={18} color="#fbbf24" />
-                    <h4 style={{ margin: 0, fontSize: '0.98rem', color: '#f8fafc' }}>تبادل الرؤية وخط النظر (Line of Sight)</h4>
-                  </div>
-                  <ul style={{ paddingRight: 16, color: '#94a3b8', fontSize: '0.84rem', lineHeight: 1.8, margin: 0 }}>
-                    <li>تحديد إمكانية الرؤية المباشرة بين نقطتين (راصد وهدف).</li>
-                    <li>كشف وتحديد القمم الجبلية والعوائق الحاجبة للرؤية بدقة المتر.</li>
-                    <li>حساب نسبة <strong>الأرض الميتة (Dead Ground)</strong> خلف الحواف.</li>
-                    <li>تصحيح انكسار الضوء الجوي التكتيكي وتقوس الأرض (Earth Curvature).</li>
-                  </ul>
-                </div>
-
-                <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
-                    <Shield size={18} color="#a78bfa" />
-                    <h4 style={{ margin: 0, fontSize: '0.98rem', color: '#f8fafc' }}>حسابات الرماية وزاوية الموقع (Mils)</h4>
-                  </div>
-                  <ul style={{ paddingRight: 16, color: '#94a3b8', fontSize: '0.84rem', lineHeight: 1.8, margin: 0 }}>
-                    <li>حساب زاوية الموقع بالميللي العسكري (Artillery Mils NATO/Soviet).</li>
-                    <li>حساب السمت والاتجاه البوصلّي الدقيق (Azimuth / Bearing).</li>
-                    <li>مقطع رأسي كامل للارتفاعات فوق مستوى سطح البحر (AMSL).</li>
-                    <li>تعديل ارتفاع عين الراصد وارتفاع الهدف حسب نوع الآلية أو البرج.</li>
-                  </ul>
-                </div>
-
-                <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
-                    <Radio size={18} color="#38bdf8" />
-                    <h4 style={{ margin: 0, fontSize: '0.98rem', color: '#f8fafc' }}>التشغيل المعزول التام (Air-Gapped Offline)</h4>
-                  </div>
-                  <ul style={{ paddingRight: 16, color: '#94a3b8', fontSize: '0.84rem', lineHeight: 1.8, margin: 0 }}>
-                    <li>نظام كامل يعمل داخل خادم صغير أو جهاز لوحي عسكري داخل الآلية.</li>
-                    <li>توجيه وملاحة وحساب مسافات بدون الحاجة لأي اتصال بالإنترنت.</li>
-                    <li>حماية تامة من التشويش أو قطع الخدمات السحابية الأجنبية.</li>
-                    <li>تشفير مسارات وبيانات التحركات وفق معايير أمنية صارمة.</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* TAB 3: DIRECT COMPARISON WITH ESRI */}
+        {/* TAB 3: ESRI DIRECT COMPARISON */}
         {activeTab === 'comparison' && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, animation: 'fadeIn 0.35s ease-out' }}>
             <div style={{
-              background: '#111726',
-              border: '1px solid #1e293b',
-              borderRadius: 16,
-              padding: '28px'
+              background: '#ffffff',
+              border: '1px solid #e2e8f0',
+              borderRadius: 20,
+              padding: '32px',
+              boxShadow: '0 6px 24px -2px rgba(15, 23, 42, 0.05)'
             }}>
-              <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#f8fafc', margin: '0 0 16px 0' }}>
-                مقارنة دقيقة: منصة انطلاق السيادية مقابل منظومة إزري (Esri ArcGIS)
+              <h3 style={{ fontSize: '1.35rem', fontWeight: 800, color: '#0f172a', margin: '0 0 16px 0' }}>
+                مقارنة دقيقة: منصة انطلاق السيادية مقابل منظومة إزري (Esri ArcGIS Enterprise)
               </h3>
 
               <div style={{ overflowX: 'auto' }}>
@@ -406,10 +597,10 @@ export const ExecutiveShowcase: React.FC = () => {
                   textAlign: 'right'
                 }}>
                   <thead>
-                    <tr style={{ background: '#0a0d14', borderBottom: '2px solid #1e293b' }}>
-                      <th style={{ padding: '12px 16px', color: '#94a3b8', fontWeight: 600 }}>المعيار</th>
-                      <th style={{ padding: '12px 16px', color: '#f87171', fontWeight: 600 }}>منظومة إزري (Esri ArcGIS Enterprise)</th>
-                      <th style={{ padding: '12px 16px', color: '#34d399', fontWeight: 600, background: 'rgba(16, 185, 129, 0.05)' }}>منصة انطلاق السيادية (Intaleq)</th>
+                    <tr style={{ background: '#f8fafc', borderBottom: '2px solid #e2e8f0' }}>
+                      <th style={{ padding: '14px 18px', color: '#475569', fontWeight: 800 }}>المعيار</th>
+                      <th style={{ padding: '14px 18px', color: '#dc2626', fontWeight: 800 }}>منظومة إزري (Esri ArcGIS Enterprise)</th>
+                      <th style={{ padding: '14px 18px', color: '#059669', fontWeight: 800, background: 'rgba(16, 185, 129, 0.06)' }}>منصة انطلاق السيادية (Intaleq)</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -434,16 +625,16 @@ export const ExecutiveShowcase: React.FC = () => {
                         esri: 'تتطلب فرق مسح ميداني بطيئة أو شراء تحديثات بيانات دورية باهظة من شركات أجنبية',
                         intaleq: 'تحديث حي ذاتي التغذية من حركة أساطيل التتبع وتوليد الطرق المرشحة تلقائياً'
                       },
+                      {
+                        criteria: 'دراسة الأرض والتضاريس العسكرية',
+                        esri: 'تتطلب إضافات Spatial Analyst منفصلة ومكلفة وتدريباً معقداً على برمجيات سطح المكتب',
+                        intaleq: 'مدمجة في المتصفح بضغطة زر: مسح 21×21 DEM، فحص الجروف الصخرية، خط النظر الكروي، مسارات المدفعية'
+                      },
                       {
                         criteria: 'البحث العربي والمسميات المحلية',
                         esri: 'ضعيف في استيعاب اللهجات المحلية، التقسيمات العشائرية والأخطاء الشائعة في كتابة الأسماء',
                         intaleq: 'محرك بحث ذكي يفهم اللهجة الأردنية والمسميات النسبية (قرب، مقابل، بجانب) وبوابات المعالم'
                       },
-                      {
-                        criteria: 'التكامل والتطوير (API & SDK)',
-                        esri: 'تتطلب مكتبات SDK ضخمة ومقيدة بشروط رخص للمطورين لكل تطبيق يتم إطلاقه',
-                        intaleq: 'واجهات REST APIs قياسية وخفيفة وسهلة الدمج مع أي تطبيق Flutter، iOS، Android، أو Web'
-                      },
                       {
                         criteria: 'التوسع في مسارح عمليات خارجية',
                         esri: 'شراء حزم خرائط وبيانات منفصلة لكل دولة إضافية بتكاليف إضافية',
@@ -451,12 +642,12 @@ export const ExecutiveShowcase: React.FC = () => {
                       }
                     ].map((row, idx) => (
                       <tr key={idx} style={{
-                        borderBottom: '1px solid #1e293b',
-                        background: idx % 2 === 0 ? 'transparent' : 'rgba(255, 255, 255, 0.01)'
+                        borderBottom: '1px solid #e2e8f0',
+                        background: idx % 2 === 0 ? 'transparent' : 'rgba(248, 250, 252, 0.6)'
                       }}>
-                        <td style={{ padding: '12px 16px', fontWeight: 600, color: '#f1f5f9' }}>{row.criteria}</td>
-                        <td style={{ padding: '12px 16px', color: '#fca5a5', lineHeight: 1.6 }}>{row.esri}</td>
-                        <td style={{ padding: '12px 16px', color: '#a7f3d0', fontWeight: 500, background: 'rgba(16, 185, 129, 0.03)', lineHeight: 1.6 }}>{row.intaleq}</td>
+                        <td style={{ padding: '14px 18px', fontWeight: 700, color: '#0f172a' }}>{row.criteria}</td>
+                        <td style={{ padding: '14px 18px', color: '#b91c1c', lineHeight: 1.6 }}>{row.esri}</td>
+                        <td style={{ padding: '14px 18px', color: '#047857', fontWeight: 600, background: 'rgba(16, 185, 129, 0.04)', lineHeight: 1.6 }}>{row.intaleq}</td>
                       </tr>
                     ))}
                   </tbody>
@@ -466,27 +657,28 @@ export const ExecutiveShowcase: React.FC = () => {
           </div>
         )}
 
-        {/* TAB 4: ROADMAP */}
+        {/* TAB 4: PARTNERSHIP ROADMAP */}
         {activeTab === 'roadmap' && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, animation: 'fadeIn 0.35s ease-out' }}>
             <div style={{
-              background: '#111726',
-              border: '1px solid #1e293b',
-              borderRadius: 16,
-              padding: '28px'
+              background: '#ffffff',
+              border: '1px solid #e2e8f0',
+              borderRadius: 20,
+              padding: '32px',
+              boxShadow: '0 6px 24px -2px rgba(15, 23, 42, 0.05)'
             }}>
-              <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#f8fafc', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
-                <Award size={20} color="#34d399" /> خطة الشراكة والتنفيذ المقترحة مع المركز الجغرافي الملكي
+              <h3 style={{ fontSize: '1.35rem', fontWeight: 800, color: '#0f172a', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
+                <Award size={22} color="#059669" /> خطة الشراكة والتنفيذ المقترحة مع المركز الجغرافي الملكي
               </h3>
-              <p style={{ color: '#94a3b8', fontSize: '0.95rem', lineHeight: 1.8 }}>
+              <p style={{ color: '#475569', fontSize: '0.96rem', lineHeight: 1.8 }}>
                 لا نطلب من المركز إلغاء ما لديه فجأة، بل نقترح مسار شراكة استراتيجي آمن يبدأ بإثبات الجدارة:
               </p>
 
               <div style={{
                 display: 'flex',
                 flexDirection: 'column',
-                gap: 14,
-                marginTop: 20
+                gap: 16,
+                marginTop: 24
               }}>
                 {[
                   {
@@ -502,41 +694,42 @@ export const ExecutiveShowcase: React.FC = () => {
                   {
                     phase: 'المرحلة الثالثة: دمج الأدوات التكتيكية مع القيادة العامة وسلاح المدفعية',
                     duration: 'الشهر الرابع فصاعداً',
-                    desc: 'تخصيص محرك تبادل الرؤية (LOS) ومقاطع التضاريس والخرائط غير المتصلة (Offline) ليتم تعميمها على الأجهزة اللوحية الميدانية في القوات المسلحة.'
+                    desc: 'تخصيص محرك تبادل الرؤية (LOS)، دراسة الأرض (21×21 DEM)، كشف الجروف، والخرائط غير المتصلة (Offline) ليتم تعميمها على الأجهزة اللوحية الميدانية في القوات المسلحة.'
                   }
                 ].map((item, idx) => (
-                  <div key={idx} style={{
-                    background: '#0a0d14',
-                    border: '1px solid #1e293b',
-                    borderRadius: 12,
-                    padding: '16px 20px',
+                  <div key={idx} className="apple-card" style={{
+                    background: '#f8fafc',
+                    border: '1px solid #e2e8f0',
+                    borderRadius: 16,
+                    padding: '20px 24px',
                     display: 'flex',
                     alignItems: 'flex-start',
-                    gap: 14
+                    gap: 16
                   }}>
                     <div style={{
-                      width: 32,
-                      height: 32,
-                      borderRadius: 8,
-                      background: '#1e293b',
+                      width: 36,
+                      height: 36,
+                      borderRadius: 10,
+                      background: 'linear-gradient(135deg, #4f46e5, #3b82f6)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
-                      color: '#38bdf8',
-                      fontWeight: 700,
-                      fontSize: '0.9rem',
-                      flexShrink: 0
+                      color: '#ffffff',
+                      fontWeight: 800,
+                      fontSize: '0.95rem',
+                      flexShrink: 0,
+                      boxShadow: '0 2px 8px rgba(79, 70, 229, 0.25)'
                     }}>
                       {idx + 1}
                     </div>
                     <div style={{ flex: 1 }}>
                       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
-                        <h4 style={{ margin: 0, fontSize: '0.98rem', color: '#f8fafc' }}>{item.phase}</h4>
-                        <span style={{ fontSize: '0.78rem', color: '#38bdf8', background: 'rgba(56, 189, 248, 0.08)', padding: '2px 8px', borderRadius: 6 }}>
+                        <h4 style={{ margin: 0, fontSize: '1.02rem', fontWeight: 800, color: '#0f172a' }}>{item.phase}</h4>
+                        <span style={{ fontSize: '0.80rem', color: '#4f46e5', background: 'rgba(79, 70, 229, 0.08)', padding: '3px 10px', borderRadius: 999, fontWeight: 700 }}>
                           {item.duration}
                         </span>
                       </div>
-                      <p style={{ margin: '6px 0 0 0', fontSize: '0.84rem', color: '#64748b', lineHeight: 1.7 }}>
+                      <p style={{ margin: '8px 0 0 0', fontSize: '0.88rem', color: '#64748b', lineHeight: 1.7 }}>
                         {item.desc}
                       </p>
                     </div>
@@ -547,41 +740,58 @@ export const ExecutiveShowcase: React.FC = () => {
           </div>
         )}
 
-        {/* Live Demo Launcher Banner */}
+        {/* Live Demo Launcher Banner (Apple Light Card) */}
         <section style={{
-          marginTop: 32,
-          background: '#111726',
-          border: '1px solid #1e293b',
-          borderRadius: 16,
-          padding: '24px 28px',
+          marginTop: 36,
+          background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
+          border: '1px solid #e2e8f0',
+          borderRadius: 20,
+          padding: '28px 32px',
           display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center',
           flexWrap: 'wrap',
-          gap: 16
+          gap: 18,
+          boxShadow: '0 8px 24px -2px rgba(15, 23, 42, 0.05)'
         }}>
           <div>
-            <h3 style={{ margin: '0 0 4px 0', fontSize: '1.15rem', fontWeight: 700, color: '#f8fafc' }}>
-              هل ترغب في استعراض النظام عملياً الآن؟
+            <h3 style={{ margin: '0 0 6px 0', fontSize: '1.25rem', fontWeight: 800, color: '#0f172a' }}>
+              هل ترغب في استعراض المنظومة عملياً الآن؟
             </h3>
-            <p style={{ margin: 0, color: '#94a3b8', fontSize: '0.85rem' }}>
-              الخريطة الحية وأدوات التوجيه وتبادل الرؤية والطقس جاهزة وتعمل بالكامل داخل المتصفح.
+            <p style={{ margin: 0, color: '#64748b', fontSize: '0.90rem' }}>
+              الخريطة التكتيكية الحية، دراسة الأرض (21×21 DEM)، تبادل الرؤية، والطقس الميداني جاهزة وتعمل بالكامل داخل المتصفح.
             </p>
           </div>
-          <div style={{ display: 'flex', gap: 10 }}>
-            <a href="#map" style={{
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+            <a href="#tactical" style={{
               textDecoration: 'none',
-              background: '#2563eb',
+              background: 'linear-gradient(135deg, #4f46e5, #4338ca)',
               color: '#ffffff',
-              padding: '9px 20px',
-              borderRadius: 8,
-              fontSize: '0.86rem',
+              padding: '11px 22px',
+              borderRadius: 12,
+              fontSize: '0.90rem',
+              fontWeight: 700,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              boxShadow: '0 4px 14px rgba(79, 70, 229, 0.3)'
+            }}>
+              تشغيل المنظومة التكتيكية <Crosshair size={16} />
+            </a>
+            <a href="#compare" style={{
+              textDecoration: 'none',
+              background: '#ffffff',
+              border: '1px solid #cbd5e1',
+              color: '#334155',
+              padding: '10px 18px',
+              borderRadius: 12,
+              fontSize: '0.90rem',
               fontWeight: 600,
               display: 'flex',
               alignItems: 'center',
               gap: 6
             }}>
-              بدء الديمو التفاعلي <ArrowRight size={15} />
+              المقارنة المرجعية <ExternalLink size={15} />
             </a>
           </div>
         </section>