diff --git a/apps/web/public/intaleq-sovereign-logo.png b/apps/web/public/intaleq-sovereign-logo.png
new file mode 100644
index 0000000..5f5774f
--- /dev/null
+++ b/apps/web/public/intaleq-sovereign-logo.png
@@ -0,0 +1 @@
+Request to GET /aida/AP1WRLuyVA-jYle0Swy-zYwco-NAmcDzplwC49AvLlbdWwlzzLne421Uvoy6J6TwKkQkiBw13WqSzsx2LjskM6SAiyLFtkFV2nHo41BWb1m7HcVFQIbSD3CgrMDpJnw3qB5_phHJsItCGcqpThv4_NAFnLJmPPTXj0o46B37lfI0OQ-8amDQBAOUfWMrarUS9rExkidEMgE3zVgHuMsoC3eFp-BgrdFWHI8e8QFjd2Q_oKmm4ZhPrBn5FIGd9XE=s1024 on lh3.googleusercontent.com not allowed by policy
diff --git a/apps/web/src/components/MapComponent.tsx b/apps/web/src/components/MapComponent.tsx
index 6ae174e..3c6a1c3 100644
--- a/apps/web/src/components/MapComponent.tsx
+++ b/apps/web/src/components/MapComponent.tsx
@@ -331,8 +331,62 @@ const MapComponent: React.FC<MapProps> = ({
         }
       };
       fetchWeather();
+
+      // 2. Fetch RainViewer Animated Cloud & Rain Radar
+      let radarTimer: any = null;
+      const fetchRadar = async () => {
+        try {
+          const res = await fetch('https://api.rainviewer.com/public/weather-maps.json');
+          const data = await res.json();
+          const host = data.host || 'https://tilecache.rainviewer.com';
+          const frames = data.radar?.past || [];
+          if (frames.length > 0 && map.current && map.current.isStyleLoaded()) {
+            let currentIdx = frames.length - 1;
+            const getTileUrl = (i: number) => `${host}${frames[i].path}`;
+
+            if (!map.current.getSource('weather-radar-source')) {
+              map.current.addSource('weather-radar-source', {
+                type: 'raster',
+                tiles: [getTileUrl(currentIdx)],
+                tileSize: 256
+              });
+
+              map.current.addLayer({
+                id: 'weather-radar-layer',
+                type: 'raster',
+                source: 'weather-radar-source',
+                paint: {
+                  'raster-opacity': 0.72,
+                  'raster-fade-duration': 250
+                }
+              }, map.current.getLayer('weather-city-circles') ? 'weather-city-circles' : undefined);
+            } else {
+              map.current.setLayoutProperty('weather-radar-layer', 'visibility', 'visible');
+            }
+
+            // Animate through radar frames every 1200ms
+            if (frames.length > 1) {
+              radarTimer = setInterval(() => {
+                if (!map.current || !map.current.getSource('weather-radar-source')) return;
+                currentIdx = (currentIdx + 1) % frames.length;
+                const src = map.current.getSource('weather-radar-source') as any;
+                if (src && src.setTiles) {
+                  src.setTiles([getTileUrl(currentIdx)]);
+                }
+              }, 1200);
+            }
+          }
+        } catch (err) {
+          console.warn('Radar fetch failed', err);
+        }
+      };
+      fetchRadar();
+
+      return () => {
+        if (radarTimer) clearInterval(radarTimer);
+      };
     } else {
-      const weatherLayers = ['weather-city-circles', 'weather-city-icons', 'weather-wind-arrows', 'weather-wind-speed'];
+      const weatherLayers = ['weather-city-circles', 'weather-city-icons', 'weather-wind-arrows', 'weather-wind-speed', 'weather-radar-layer'];
       weatherLayers.forEach(layerId => {
         if (map.current && map.current.getLayer(layerId)) {
           map.current.setLayoutProperty(layerId, 'visibility', 'none');
diff --git a/apps/web/src/components/WeatherPanel.tsx b/apps/web/src/components/WeatherPanel.tsx
index 861784d..4571393 100644
--- a/apps/web/src/components/WeatherPanel.tsx
+++ b/apps/web/src/components/WeatherPanel.tsx
@@ -178,6 +178,25 @@ const WeatherPanel: React.FC<WeatherPanelProps> = ({ visible, selectedCity, aler
         </button>
       </div>
       
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        background: 'rgba(56, 189, 248, 0.12)',
+        border: '1px solid rgba(56, 189, 248, 0.25)',
+        padding: '6px 10px',
+        borderRadius: '8px',
+        marginBottom: '10px',
+        fontSize: '0.78rem',
+        color: '#38bdf8'
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontWeight: 700 }}>
+          <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 8px #22c55e' }}></span>
+          رادار حركة السحب والأمطار (Live Radar)
+        </div>
+        <span style={{ fontSize: '0.72rem', color: '#bae6fd' }}>تحديث متحرك</span>
+      </div>
+
       {!selectedCity && (
         <div style={{ textAlign: 'center', padding: '16px 8px', color: '#94a3b8', fontSize: '0.85rem', background: 'rgba(255,255,255,0.03)', borderRadius: '8px', marginBottom: '10px' }}>
           💡 اضغط على أي مدينة على الخريطة لعرض تفاصيلها وتوقعات 7 أيام
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index d87cc32..dc841b7 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -24,7 +24,7 @@ const NAV = [
 ]
 
 function ViewNav({ hash }: { hash: string }) {
-  const currentHash = hash || '#tactical'
+  const currentHash = hash || '#executive'
   return (
     <div style={{
       position: 'fixed',
@@ -35,10 +35,10 @@ function ViewNav({ hash }: { hash: string }) {
       display: 'flex',
       alignItems: 'center',
       gap: 4,
-      background: 'rgba(15, 23, 42, 0.92)',
+      background: 'rgba(255, 255, 255, 0.88)',
       backdropFilter: 'blur(20px)',
-      border: '1px solid rgba(255, 255, 255, 0.18)',
-      boxShadow: '0 8px 32px rgba(0, 0, 0, 0.55)',
+      border: '1px solid rgba(0, 0, 0, 0.1)',
+      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
       borderRadius: 999,
       padding: '4px 6px',
       fontFamily: "'IBM Plex Sans Arabic', Inter, system-ui, sans-serif",
@@ -54,9 +54,9 @@ function ViewNav({ hash }: { hash: string }) {
               textDecoration: 'none',
               fontSize: 12,
               fontWeight: 700,
-              color: active ? '#fff' : '#94a3b8',
-              background: active ? 'linear-gradient(135deg, #6366f1, #4f46e5)' : 'transparent',
-              boxShadow: active ? '0 2px 8px rgba(99, 102, 241, 0.4)' : 'none',
+              color: active ? '#fff' : '#64748b',
+              background: active ? 'linear-gradient(135deg, #0071e3, #4f46e5)' : 'transparent',
+              boxShadow: active ? '0 2px 8px rgba(0, 113, 227, 0.35)' : 'none',
               padding: '6px 14px',
               borderRadius: 999,
               display: 'flex',
@@ -96,8 +96,8 @@ class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { has
           alignItems: 'center',
           justifyContent: 'center',
           height: '100vh',
-          background: '#0f172a',
-          color: '#fff',
+          background: '#f8fafc',
+          color: '#1d1d1f',
           fontFamily: 'system-ui, sans-serif',
           direction: 'rtl',
           padding: 24,
@@ -105,14 +105,14 @@ class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { has
         }}>
           <div style={{ fontSize: '3rem', marginBottom: 16 }}>⚠️</div>
           <h2 style={{ fontSize: '1.4rem', fontWeight: 700, marginBottom: 8 }}>حدث خطأ أثناء تحميل الواجهة</h2>
-          <p style={{ color: '#94a3b8', fontSize: '0.9rem', maxWidth: 450, marginBottom: 20 }}>
+          <p style={{ color: '#64748b', fontSize: '0.9rem', maxWidth: 450, marginBottom: 20 }}>
             {this.state.error?.message || 'تعذر تحميل أحد مكونات الخريطة'}
           </p>
           <button
             onClick={() => { window.location.hash = '#map'; window.location.reload(); }}
             style={{
               padding: '10px 24px',
-              background: '#6366f1',
+              background: '#0071e3',
               color: '#fff',
               border: 'none',
               borderRadius: 8,
@@ -131,11 +131,11 @@ class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { has
 }
 
 function Root() {
-  const [hash, setHash] = useState(window.location.hash || '#tactical');
+  const [hash, setHash] = useState(window.location.hash || '#executive');
 
   useEffect(() => {
     const on = () => {
-      const h = window.location.hash || '#tactical';
+      const h = window.location.hash || '#executive';
       setHash(h);
       setTimeout(() => {
         window.dispatchEvent(new Event('resize'));
diff --git a/apps/web/src/pages/ExecutiveShowcase.tsx b/apps/web/src/pages/ExecutiveShowcase.tsx
index e52a4e5..d5b1cc1 100644
--- a/apps/web/src/pages/ExecutiveShowcase.tsx
+++ b/apps/web/src/pages/ExecutiveShowcase.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { 
   Shield, 
   Map as MapIcon, 
@@ -41,124 +41,241 @@ import {
   Maximize2,
   Bookmark,
   CheckCircle,
-  ArrowDown
+  ArrowDown,
+  DollarSign,
+  Server,
+  Smartphone,
+  Camera,
+  Car,
+  Building,
+  HardDrive,
+  BarChart3,
+  Scale,
+  RefreshCw,
+  CloudRain,
+  Sliders,
+  CheckSquare,
+  BookOpen,
+  Info,
+  ArrowUpRight
 } from 'lucide-react';
 
 export const ExecutiveShowcase: React.FC = () => {
-  const [simMode, setSimMode] = useState<'radar' | 'isochrone' | 'ballistic' | 'terrain'>('radar');
-  const [simAngle, setSimAngle] = useState<number>(45);
-  const [activeSection, setActiveSection] = useState<string>('overview');
+  const [activeChapter, setActiveChapter] = useState<string>('ch1-base-engine');
 
+  // Financial Simulator State
+  const [dailyTrips, setDailyTrips] = useState<number>(200000);
+  const [marketShare, setMarketShare] = useState<number>(15);
+  const [showApiBreakdown, setShowApiBreakdown] = useState<boolean>(false);
+
+  // Ballistics Simulator State
+  const [targetDistance, setTargetDistance] = useState<number>(14); // km
+  const [gunElevationMils, setGunElevationMils] = useState<number>(380); // mils
+
+  // Canvas Radar Ref
+  const radarCanvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  // Dynamic Financial Calculations
+  const monthlyTripsTotal = dailyTrips * 30;
+  const monthlyApiCalls = monthlyTripsTotal * 7;
+  
+  // Stream A: B2B Map SaaS API
+  const googleMonthlyCost = (monthlyApiCalls / 1000) * 5.0;
+  const ourMapMonthlyRev = (monthlyApiCalls / 1000) * 1.25;
+  const ourMapMonthlyJod = Math.round(ourMapMonthlyRev * 0.709);
+  const ourMapAnnualJod = ourMapMonthlyJod * 12;
+
+  // Stream B: Siro Mobility App
+  const siroDailyRides = Math.round(dailyTrips * 0.5 * (marketShare / 100));
+  const siroMonthlyRides = siroDailyRides * 30;
+  const siroMonthlyJod = Math.round(siroMonthlyRides * 0.30);
+  const siroAnnualJod = siroMonthlyJod * 12;
+
+  // Combined Totals
+  const totalAnnualJod = ourMapAnnualJod + siroAnnualJod;
+  const totalAnnualUsd = Math.round(totalAnnualJod / 0.709);
+  const netProfitJod = Math.round(totalAnnualJod * 0.85);
+
+  // Live Radar Animation Canvas Loop
   useEffect(() => {
-    const interval = setInterval(() => {
-      setSimAngle((prev) => (prev + 3) % 360);
-    }, 50);
-    return () => clearInterval(interval);
+    let animationId: number;
+    let angle = 0;
+    const canvas = radarCanvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const targets = [
+      { x: 0.35, y: 0.25, label: 'الرمثا - شمال' },
+      { x: 0.65, y: 0.38, label: 'المفرق - حرس الحدود' },
+      { x: 0.50, y: 0.58, label: 'عمان - المركز الجغرافي' },
+      { x: 0.30, y: 0.80, label: 'الكرك - كتيبة المدفعية' }
+    ];
+
+    const render = () => {
+      const w = canvas.width;
+      const h = canvas.height;
+      const cx = w / 2;
+      const cy = h / 2;
+      const radius = Math.min(cx, cy) - 16;
+
+      ctx.clearRect(0, 0, w, h);
+
+      // Radar Background
+      ctx.fillStyle = '#0a101d';
+      ctx.fillRect(0, 0, w, h);
+
+      // Concentric Rings
+      ctx.strokeStyle = 'rgba(0, 113, 227, 0.28)';
+      ctx.lineWidth = 1.5;
+      for (let r = 1; r <= 4; r++) {
+        ctx.beginPath();
+        ctx.arc(cx, cy, (radius / 4) * r, 0, Math.PI * 2);
+        ctx.stroke();
+      }
+
+      // Crosshairs
+      ctx.beginPath();
+      ctx.moveTo(cx - radius, cy);
+      ctx.lineTo(cx + radius, cy);
+      ctx.moveTo(cx, cy - radius);
+      ctx.lineTo(cx, cy + radius);
+      ctx.stroke();
+
+      // Sweeping Beam
+      ctx.save();
+      ctx.translate(cx, cy);
+      ctx.rotate(angle);
+      const gradient = ctx.createLinearGradient(0, 0, radius, 0);
+      gradient.addColorStop(0, 'rgba(0, 113, 227, 0.85)');
+      gradient.addColorStop(1, 'rgba(0, 113, 227, 0)');
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.arc(0, 0, radius, -0.28, 0);
+      ctx.closePath();
+      ctx.fill();
+      ctx.restore();
+
+      // Targets (Blips)
+      targets.forEach((t) => {
+        const tx = t.x * w;
+        const ty = t.y * h;
+        ctx.fillStyle = '#00f0ff';
+        ctx.beginPath();
+        ctx.arc(tx, ty, 4.5, 0, Math.PI * 2);
+        ctx.fill();
+
+        ctx.fillStyle = '#cbd5e1';
+        ctx.font = 'bold 10px -apple-system, sans-serif';
+        ctx.fillText(t.label, tx + 8, ty + 3);
+      });
+
+      angle += 0.035;
+      animationId = requestAnimationFrame(render);
+    };
+
+    render();
+    return () => cancelAnimationFrame(animationId);
   }, []);
 
-  const scrollTo = (id: string) => {
-    setActiveSection(id);
+  const scrollToChapter = (id: string) => {
+    setActiveChapter(id);
     const element = document.getElementById(id);
     if (element) {
       element.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
   };
 
+  const navigateToView = (hash: string) => {
+    window.location.hash = hash;
+    window.dispatchEvent(new Event('hashchange'));
+  };
+
   return (
     <div style={{
       width: '100%',
       minHeight: '100vh',
-      background: 'linear-gradient(180deg, #090e17 0%, #0d1524 35%, #080c14 100%)',
-      color: '#f8fafc',
+      background: '#f8fafc',
+      color: '#0f172a',
       direction: 'rtl',
-      paddingTop: 54,
-      paddingBottom: 120,
+      paddingTop: 56,
+      paddingBottom: 140,
       position: 'relative'
     }}>
-      {/* Global Apple Typography & Keyframes Animation Injection */}
+      {/* Global CSS for Animations and Gradients */}
       <style>{`
-        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700;800;900&display=swap');
 
         * {
-          font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Plus Jakarta Sans", "Tajawal", system-ui, sans-serif !important;
-          letter-spacing: -0.015em;
+          font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, sans-serif !important;
+          letter-spacing: -0.018em;
           box-sizing: border-box;
         }
 
-        @keyframes fadeIn {
-          from { opacity: 0; transform: translateY(14px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes pulseGlow {
-          0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.35); }
-          50% { box-shadow: 0 0 0 12px rgba(79, 70, 229, 0); }
-        }
-        @keyframes floatSlow {
-          0%, 100% { transform: translateY(0px); }
-          50% { transform: translateY(-5px); }
-        }
-
-        .apple-card {
+        .story-card {
+          background: #ffffff;
+          border: 1px solid #e2e8f0;
+          border-radius: 26px;
+          box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
           transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
-          background: rgba(18, 28, 45, 0.72);
-          backdrop-filter: blur(24px);
-          -webkit-backdrop-filter: blur(24px);
-          border: 1px solid rgba(255, 255, 255, 0.08);
-          border-radius: 22px;
+          position: relative;
+          overflow: hidden;
         }
-        .apple-card:hover {
+        .story-card:hover {
           transform: translateY(-4px);
-          background: rgba(24, 38, 62, 0.88);
-          border-color: rgba(99, 102, 241, 0.45) !important;
-          box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 24px rgba(79, 70, 229, 0.15) !important;
+          border-color: #0071e3 !important;
+          box-shadow: 0 20px 40px -10px rgba(0, 113, 227, 0.12), 0 1px 4px rgba(15, 23, 42, 0.04) !important;
         }
 
-        .quick-nav-pill {
-          transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+        .hero-story-dark {
+          background: linear-gradient(135deg, #090e17 0%, #0d172a 50%, #050b14 100%);
+          border: 1px solid rgba(255, 255, 255, 0.12);
+          color: #ffffff;
+          border-radius: 28px;
+          box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);
+        }
+
+        .chapter-pill-nav {
           cursor: pointer;
+          transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+          white-space: nowrap;
         }
-        .quick-nav-pill:hover {
+        .chapter-pill-nav:hover {
           transform: translateY(-2px);
-          background: rgba(255, 255, 255, 0.12) !important;
-          color: #ffffff !important;
         }
 
+        .text-gradient-apple-blue {
+          background: linear-gradient(135deg, #0071e3 0%, #4f46e5 50%, #9333ea 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
         .text-gradient-apple {
-          background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 45%, #94a3b8 100%);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-        .text-gradient-blue {
-          background: linear-gradient(135deg, #38bdf8 0%, #6366f1 50%, #a855f7 100%);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-        .text-gradient-gold {
-          background: linear-gradient(135deg, #fef08a 0%, #facc15 50%, #f59e0b 100%);
+          background: linear-gradient(135deg, #1d1d1f 0%, #434344 50%, #6e6e73 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
         }
         .text-gradient-emerald {
-          background: linear-gradient(135deg, #86efac 0%, #22c55e 50%, #10b981 100%);
+          background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
         }
       `}</style>
 
-      {/* Top Executive Header (Apple Frosted Glass) */}
+      {/* Floating Sticky Executive Header */}
       <header style={{
-        borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
-        background: 'rgba(9, 14, 23, 0.88)',
-        backdropFilter: 'blur(28px)',
-        WebkitBackdropFilter: 'blur(28px)',
         position: 'sticky',
         top: 0,
-        zIndex: 50,
+        zIndex: 100,
+        background: 'rgba(255, 255, 255, 0.92)',
+        backdropFilter: 'blur(28px)',
+        WebkitBackdropFilter: 'blur(28px)',
+        borderBottom: '1px solid #e2e8f0',
         padding: '12px 28px',
-        boxShadow: '0 4px 30px rgba(0, 0, 0, 0.5)'
+        boxShadow: '0 2px 14px rgba(0, 0, 0, 0.03)'
       }}>
         <div style={{
-          maxWidth: 1300,
+          maxWidth: 1340,
           margin: '0 auto',
           display: 'flex',
           justifyContent: 'space-between',
@@ -166,13 +283,14 @@ export const ExecutiveShowcase: React.FC = () => {
           flexWrap: 'wrap',
           gap: 16
         }}>
+          {/* Logo & Platform Info */}
           <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
             <div style={{
               width: 44,
               height: 44,
               borderRadius: 14,
-              background: 'linear-gradient(135deg, #4f46e5, #0ea5e9)',
-              boxShadow: '0 4px 16px rgba(79, 70, 229, 0.35)',
+              background: 'linear-gradient(135deg, #0071e3, #4f46e5)',
+              boxShadow: '0 4px 14px rgba(0, 113, 227, 0.3)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -182,828 +300,553 @@ export const ExecutiveShowcase: React.FC = () => {
             </div>
             <div>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-                <h1 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 900, letterSpacing: '-0.02em', color: '#ffffff' }}>
+                <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 800, color: '#0f172a' }}>
                   منظومة انطلاق للسيادة المكانية والذكاء التكتيكي
                 </h1>
                 <span style={{
                   fontSize: '11px',
-                  background: 'rgba(34, 197, 94, 0.15)',
-                  color: '#4ade80',
-                  border: '1px solid rgba(34, 197, 94, 0.3)',
+                  background: '#ecfdf5',
+                  color: '#059669',
+                  border: '1px solid #a7f3d0',
                   padding: '2px 10px',
                   borderRadius: 999,
                   fontWeight: 800
                 }}>
-                  🇯🇴 سيادة وطنية 100%
+                  🇯🇴 سيادة أردنية 100%
                 </span>
                 <span style={{
                   fontSize: '11px',
-                  background: 'rgba(99, 102, 241, 0.15)',
-                  color: '#818cf8',
-                  border: '1px solid rgba(99, 102, 241, 0.3)',
+                  background: '#eff6ff',
+                  color: '#0071e3',
+                  border: '1px solid #bfdbfe',
                   padding: '2px 10px',
                   borderRadius: 999,
                   fontWeight: 800
                 }}>
-                  🎖️ C4ISR & GEOINT
+                  🎖️ C4ISR Grade
                 </span>
               </div>
-              <p style={{ margin: '2px 0 0 0', fontSize: '0.82rem', color: '#94a3b8', fontWeight: 500 }}>
-                عرض استراتيجي للقيادة العامة والمركز الجغرافي الملكي الأردني | إعداد: المقدم م. حمزة الغويري
+              <p style={{ margin: '2px 0 0 0', fontSize: '0.8rem', color: '#64748b', fontWeight: 600 }}>
+                الملف الاستراتيجي المتكامل لاجتماع المركز الجغرافي الملكي والقيادة العامة | إعداد: المقدم م. حمزة الغويري
               </p>
             </div>
           </div>
 
-          {/* Quick Action Navigation */}
+          {/* Quick Direct Actions (Navigates to active application views) */}
           <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
-            <a href="#tactical" style={{
-              textDecoration: 'none',
-              background: 'linear-gradient(135deg, #4f46e5, #0ea5e9)',
-              color: '#ffffff',
-              padding: '10px 20px',
-              borderRadius: 12,
-              fontSize: '0.86rem',
-              fontWeight: 800,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-              boxShadow: '0 4px 16px rgba(79, 70, 229, 0.4)',
-              transition: 'all 0.25s ease'
-            }}>
-              <Crosshair size={16} /> فتح مسرح العمليات التكتيكي
-            </a>
-            <a href="#map" style={{
-              textDecoration: 'none',
-              background: 'rgba(255, 255, 255, 0.06)',
-              border: '1px solid rgba(255, 255, 255, 0.12)',
-              color: '#f8fafc',
-              padding: '9px 18px',
-              borderRadius: 12,
-              fontSize: '0.86rem',
-              fontWeight: 700,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6,
-              backdropFilter: 'blur(10px)'
-            }}>
-              <MapIcon size={16} color="#38bdf8" /> الخريطة السيادية
-            </a>
-          </div>
-        </div>
-      </header>
-
-      {/* Floating Apple Quick-Jump Subnav Bar (شريط القفز السريع المريح) */}
-      <div style={{
-        position: 'sticky',
-        top: 68,
-        zIndex: 40,
-        background: 'rgba(13, 21, 35, 0.92)',
-        backdropFilter: 'blur(20px)',
-        WebkitBackdropFilter: 'blur(20px)',
-        borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
-        padding: '8px 16px',
-        boxShadow: '0 4px 20px rgba(0,0,0,0.3)'
-      }}>
-        <div style={{
-          maxWidth: 1300,
-          margin: '0 auto',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          gap: 8,
-          overflowX: 'auto',
-          paddingBottom: 2
-        }}>
-          {[
-            { id: 'overview', label: '1. النظرة وسؤال السيادة', icon: <Flame size={14} color="#f59e0b" /> },
-            { id: 'simulator', label: '2. محاكي الرادار والعمليات', icon: <Activity size={14} color="#38bdf8" /> },
-            { id: 'tactical-arsenal', label: '3. الترسانة التكتيكية (8 قدرات)', icon: <Crosshair size={14} color="#818cf8" /> },
-            { id: 'self-feeding', label: '4. التوليد الذاتي للشوارع', icon: <TrendingUp size={14} color="#4ade80" /> },
-            { id: 'esri-comparison', label: '5. مقارنة الجدارة مع إزري', icon: <Layers size={14} color="#f87171" /> },
-            { id: 'partnership-roadmap', label: '6. خطة الشراكة والتنفيذ', icon: <Award size={14} color="#facc15" /> },
-            { id: 'future-vision', label: '7. التطلعات المستقبلية 2026+', icon: <Sparkles size={14} color="#c084fc" /> }
-          ].map((item) => (
-            <button
-              key={item.id}
-              onClick={() => scrollTo(item.id)}
-              className="quick-nav-pill"
+            <button 
+              onClick={() => navigateToView('#tactical')}
               style={{
-                background: activeSection === item.id ? 'linear-gradient(135deg, #4f46e5, #0ea5e9)' : 'rgba(255, 255, 255, 0.05)',
-                border: '1px solid rgba(255, 255, 255, 0.08)',
-                color: activeSection === item.id ? '#ffffff' : '#cbd5e1',
-                padding: '6px 14px',
-                borderRadius: 999,
-                fontSize: '0.80rem',
-                fontWeight: activeSection === item.id ? 800 : 600,
+                background: 'linear-gradient(135deg, #0071e3, #4f46e5)',
+                color: '#ffffff',
+                border: 'none',
+                padding: '9px 18px',
+                borderRadius: 12,
+                fontSize: '0.84rem',
+                fontWeight: 700,
                 display: 'flex',
                 alignItems: 'center',
                 gap: 6,
-                whiteSpace: 'nowrap',
-                boxShadow: activeSection === item.id ? '0 2px 10px rgba(79, 70, 229, 0.4)' : 'none'
+                boxShadow: '0 4px 14px rgba(0, 113, 227, 0.3)',
+                cursor: 'pointer'
+              }}>
+              <Crosshair size={16} /> فتح المنظومة التكتيكية
+            </button>
+            <button 
+              onClick={() => navigateToView('#map')}
+              style={{
+                background: '#ffffff',
+                border: '1px solid #cbd5e1',
+                color: '#0f172a',
+                padding: '9px 16px',
+                borderRadius: 12,
+                fontSize: '0.84rem',
+                fontWeight: 600,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                cursor: 'pointer'
+              }}>
+              <MapIcon size={16} color="#0071e3" /> الخريطة الحية
+            </button>
+          </div>
+        </div>
+
+        {/* 7-Chapter Storytelling Sub-Nav (Reordered for Optimal Psychological Flow) */}
+        <div style={{
+          maxWidth: 1340,
+          margin: '12px auto 0 auto',
+          display: 'flex',
+          gap: 8,
+          overflowX: 'auto',
+          paddingBottom: 4
+        }}>
+          {[
+            { id: 'ch1-base-engine', label: '1. معركة السيادة ومحرك الخرائط', icon: <Flame size={13} color="#ea580c" /> },
+            { id: 'ch2-military-wing', label: '2. الجناح العسكري C4ISR', icon: <Crosshair size={13} color="#0071e3" /> },
+            { id: 'ch3-commercial-fleet', label: '3. الجناح التجاري والتصوير 3TB', icon: <Camera size={13} color="#7c3aed" /> },
+            { id: 'ch4-sdks-compatibility', label: '4. حزم المطورين والـ SDKs', icon: <Smartphone size={13} color="#d97706" /> },
+            { id: 'ch5-competitive-matrix', label: '5. مقارنة العمالقة وتبرير السعر', icon: <Scale size={13} color="#dc2626" /> },
+            { id: 'ch6-financial-model', label: '6. دراسة الجدوى والأرباح المزدوجة', icon: <DollarSign size={13} color="#059669" /> },
+            { id: 'ch7-escalation-roadmap', label: '7. خطة الشراكة والوصول لقائد الجيش', icon: <Award size={13} color="#0284c7" /> }
+          ].map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => scrollToChapter(tab.id)}
+              className="chapter-pill-nav"
+              style={{
+                background: activeChapter === tab.id ? '#0071e3' : '#ffffff',
+                border: activeChapter === tab.id ? '1px solid #0071e3' : '1px solid #e2e8f0',
+                color: activeChapter === tab.id ? '#ffffff' : '#64748b',
+                boxShadow: activeChapter === tab.id ? '0 4px 12px rgba(0, 113, 227, 0.25)' : 'none',
+                borderRadius: 999,
+                padding: '6px 16px',
+                fontSize: '0.82rem',
+                fontWeight: 700,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6
               }}
             >
-              {item.icon}
-              {item.label}
+              {tab.icon}
+              <span>{tab.label}</span>
             </button>
           ))}
         </div>
-      </div>
+      </header>
 
-      {/* Main Presentation Container (Fully Scrollable Flow) */}
-      <main style={{ maxWidth: 1300, margin: '0 auto', padding: '36px 24px', display: 'flex', flexDirection: 'column', gap: 48 }}>
+      {/* Main Story Container */}
+      <main style={{ maxWidth: 1320, margin: '0 auto', padding: '36px 20px', display: 'flex', flexDirection: 'column', gap: 64 }}>
 
-        {/* SECTION 1: OVERVIEW & SOVEREIGNTY QUESTION */}
-        <section id="overview" style={{
-          textAlign: 'center',
-          padding: '52px 36px',
-          background: 'linear-gradient(135deg, rgba(17, 27, 43, 0.9) 0%, rgba(13, 21, 35, 0.95) 100%)',
-          backdropFilter: 'blur(25px)',
-          borderRadius: 28,
-          border: '1px solid rgba(255, 255, 255, 0.1)',
-          boxShadow: '0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 35px rgba(79, 70, 229, 0.12)',
-          position: 'relative',
-          overflow: 'hidden'
-        }}>
-          <div style={{ position: 'relative', zIndex: 1 }}>
+        {/* CHAPTER 1: THE SOVEREIGN HOOK & BASE MAP ENGINE */}
+        <section id="ch1-base-engine" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+          
+          <div className="hero-story-dark" style={{ padding: '54px 44px', position: 'relative', overflow: 'hidden' }}>
             
-            {/* Question Badge */}
             <div style={{
               display: 'inline-flex',
               alignItems: 'center',
               gap: 8,
-              background: 'rgba(245, 166, 35, 0.12)',
-              border: '1px solid rgba(245, 166, 35, 0.35)',
+              background: 'rgba(220, 38, 38, 0.2)',
+              border: '1px solid rgba(220, 38, 38, 0.4)',
               padding: '8px 22px',
               borderRadius: 999,
-              color: '#facc15',
+              color: '#f87171',
               fontSize: '0.88rem',
               fontWeight: 800,
-              marginBottom: 24,
-              boxShadow: '0 2px 14px rgba(245, 166, 35, 0.15)'
+              marginBottom: 20
             }}>
-              <Flame size={18} color="#f59e0b" /> سؤال السيادة الوطنية لعام 2026: هل نمتلك خرائطنا أم نستأجرها؟
+              <Flame size={17} color="#f87171" /> الفصل الأول: معركة السيادة الوطنية واستعادة الخريطة
             </div>
 
-            {/* Headline */}
             <h2 style={{
-              fontSize: 'clamp(2rem, 3.8vw, 2.9rem)',
+              fontSize: 'clamp(2.2rem, 4.2vw, 3.4rem)',
               fontWeight: 900,
-              lineHeight: 1.3,
-              margin: '0 auto 22px auto',
-              maxWidth: 1040,
+              lineHeight: 1.25,
+              margin: '0 0 20px 0',
+              maxWidth: 1050,
               letterSpacing: '-0.03em'
             }}>
-              معركة السيادة المكانية: كيف نكسر احتكار إزري ونمتلك{' '}
-              <span className="text-gradient-blue">محرك الخرائط والذكاء التكتيكي الأسرع</span> في المنطقة؟
+              هل نمتلك خرائطنا وبيانات تحركاتنا أم نستأجرها؟ <span className="text-gradient-apple-blue">محرك الخرائط الوطني فائق السرعة</span>
             </h2>
 
-            {/* Subtitle */}
-            <p style={{
-              fontSize: '1.10rem',
-              color: '#94a3b8',
-              maxWidth: 920,
-              margin: '0 auto 34px auto',
-              lineHeight: 1.85,
-              fontWeight: 400
-            }}>
-              استثمار وطني استراتيجي مزدوج: <strong style={{ color: '#f8fafc' }}>تطبيق نقل وأساطيل ذكي في الواجهة المدنية</strong>، و<strong style={{ color: '#38bdf8' }}>محرك خرائط عسكري سيادي في الخلفية (C4ISR & GEOINT)</strong> يكتشف الشوارع والمسارب الوعرة تلقائياً من حركة الآليات، ويمنح القوات المسلحة تفوقاً تكتيكياً كاملاً داخل خوادم معزولة تماماً (<span style={{ color: '#4ade80', fontWeight: 800 }}>Air-Gapped On-Prem</span>).
+            <p style={{ fontSize: '1.15rem', color: '#cbd5e1', maxWidth: 940, lineHeight: 1.85, margin: '0 0 36px 0' }}>
+              القصة تبدأ من هنا: على مدار عقدين كاملين، ظلت مؤسسات الدولة والجيش تدفع مئات آلاف الدنانير لشركتي <strong>Esri</strong> و <strong>Google</strong> مقابل خرائط سحابية بطيئة تمر بياناتها عبر خوادم خارجية. <strong>اليوم، بنينا محرك خرائط أردني 100%</strong> يعمل على خوادم محلية معزولة (Air-Gapped) ويعرض متجهات الخريطة بسرعة <strong>60 إطاراً في الثانية (60 FPS)</strong> بدون فلس اشتراك خارجي!
             </p>
 
-            {/* 3 Strategic Shock Cards */}
-            <div style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-              gap: 18,
-              maxWidth: 1100,
-              margin: '0 auto 36px auto',
-              textAlign: 'right'
-            }}>
-              <div className="apple-card" style={{ padding: '20px 22px', borderRight: '4px solid #ef4444' }}>
-                <div style={{ fontWeight: 800, color: '#f87171', fontSize: '0.96rem', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <ShieldAlert size={18} /> 1. صدمة التبعية والسرية
-                </div>
-                <div style={{ fontSize: '0.84rem', color: '#94a3b8', lineHeight: 1.65 }}>
-                  لماذا تمر بيانات تحركاتنا ومواقعنا عبر خوادم إزري السحابية في أمريكا بينما يمكننا تشغيلها بالكامل داخل سيرفرات المركز الجغرافي المعزولة؟
-                </div>
-              </div>
-
-              <div className="apple-card" style={{ padding: '20px 22px', borderRight: '4px solid #f59e0b' }}>
-                <div style={{ fontWeight: 800, color: '#fbbf24', fontSize: '0.96rem', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <Zap size={18} /> 2. الخريطة التي ترسم وتحدث نفسها
-                </div>
-                <div style={{ fontSize: '0.84rem', color: '#94a3b8', lineHeight: 1.65 }}>
-                  حركة دوريات وشاحنات الجيش تولد مسارات الأودية والحدود والصحراء آلياً فور عبورها، دون انتظار طائرات مسح أو صور أقمار صناعية دورية!
-                </div>
-              </div>
-
-              <div className="apple-card" style={{ padding: '20px 22px', borderRight: '4px solid #38bdf8' }}>
-                <div style={{ fontWeight: 800, color: '#38bdf8', fontSize: '0.96rem', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <Crosshair size={18} /> 3. درع العمليات والرماية التكتيكي
-                </div>
-                <div style={{ fontSize: '0.84rem', color: '#94a3b8', lineHeight: 1.65 }}>
-                  أول محرك عربي مدمج به: رماية المدفعية البالستية، كشف الميدان 360°، دراسة الانحدار والبازلت، وحساب زوايا الموقع بالميللي العسكري.
-                </div>
-              </div>
-            </div>
-
-            {/* Quick Metrics Bar */}
-            <div style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
-              gap: 14,
-              maxWidth: 1100,
-              margin: '0 auto'
-            }}>
-              <div className="apple-card" style={{ padding: '20px 18px' }}>
-                <div style={{ fontSize: '2rem', fontWeight: 900, color: '#818cf8', letterSpacing: '-0.02em' }}>60 FPS</div>
-                <div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#94a3b8', marginTop: 4 }}>رندرة متجهات فورية (GPU Tiles)</div>
-              </div>
-              <div className="apple-card" style={{ padding: '20px 18px' }}>
-                <div style={{ fontSize: '2rem', fontWeight: 900, color: '#4ade80', letterSpacing: '-0.02em' }}>100%</div>
-                <div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#94a3b8', marginTop: 4 }}>معزولة أمنياً (Air-Gapped On-Prem)</div>
-              </div>
-              <div className="apple-card" style={{ padding: '20px 18px' }}>
-                <div style={{ fontSize: '2rem', fontWeight: 900, color: '#facc15', letterSpacing: '-0.02em' }}>$0</div>
-                <div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#94a3b8', marginTop: 4 }}>تكاليف تراخيص سنوية أو قيود مستخدمين</div>
-              </div>
-              <div className="apple-card" style={{ padding: '20px 18px' }}>
-                <div style={{ fontSize: '2rem', fontWeight: 900, color: '#38bdf8', letterSpacing: '-0.02em' }}>3 دول</div>
-                <div style={{ fontSize: '0.84rem', fontWeight: 600, color: '#94a3b8', marginTop: 4 }}>الأردن 🇯🇴 • سوريا 🇸🇾 • مصر 🇪🇬</div>
-              </div>
-            </div>
-
-          </div>
-        </section>
-
-        {/* SECTION 2: INTERACTIVE TACTICAL SIMULATOR */}
-        <section id="simulator" style={{
-          background: 'rgba(15, 23, 42, 0.78)',
-          backdropFilter: 'blur(24px)',
-          border: '1px solid rgba(255, 255, 255, 0.1)',
-          borderRadius: 24,
-          padding: '30px',
-          boxShadow: '0 16px 40px rgba(0,0,0,0.6)'
-        }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, marginBottom: 22 }}>
-            <div>
-              <div style={{ fontSize: '0.78rem', fontWeight: 800, color: '#38bdf8', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
-                <Activity size={16} /> محاكاة العمليات اللحظية (Live Tactical Telemetry Simulation)
-              </div>
-              <h3 style={{ margin: '4px 0 0 0', fontSize: '1.3rem', fontWeight: 900, color: '#ffffff' }}>
-                استعراض ديناميكي لقدرات الاستشعار والتحليل الجغرافي المكاني
-              </h3>
-            </div>
-
-            {/* Sim Switcher */}
-            <div style={{ display: 'flex', gap: 6, background: 'rgba(0,0,0,0.45)', padding: 4, borderRadius: 12, border: '1px solid rgba(255,255,255,0.06)' }}>
-              {[
-                { id: 'radar', label: 'رادار كشف 360°', icon: <Radar size={14} /> },
-                { id: 'isochrone', label: 'نطاق الوصول والهجين', icon: <Timer size={14} /> },
-                { id: 'ballistic', label: 'مسار المدفعية', icon: <Target size={14} /> },
-                { id: 'terrain', label: 'مصفوفة التضاريس 25x25', icon: <Mountain size={14} /> }
-              ].map(s => (
-                <button
-                  key={s.id}
-                  onClick={() => setSimMode(s.id as any)}
-                  style={{
-                    background: simMode === s.id ? 'linear-gradient(135deg, #4f46e5, #0ea5e9)' : 'transparent',
-                    color: simMode === s.id ? '#ffffff' : '#94a3b8',
-                    border: 'none',
-                    padding: '8px 16px',
-                    borderRadius: 8,
-                    fontSize: '0.82rem',
-                    fontWeight: simMode === s.id ? 800 : 600,
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 6,
-                    transition: 'all 0.2s ease'
-                  }}
-                >
-                  {s.icon}
-                  {s.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Sim Canvas Body */}
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'minmax(280px, 340px) 1fr',
-            gap: 24,
-            alignItems: 'center',
-            background: '#0a101d',
-            border: '1px solid rgba(255, 255, 255, 0.06)',
-            borderRadius: 18,
-            padding: 24
-          }}>
-            {/* Visual Radar Display */}
-            <div style={{
-              height: 230,
-              borderRadius: 14,
-              background: 'radial-gradient(circle at center, #0f1c30 0%, #060a12 100%)',
-              border: '1px solid rgba(56, 189, 248, 0.25)',
-              position: 'relative',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              overflow: 'hidden'
-            }}>
-              <div style={{ position: 'absolute', width: 60, height: 60, borderRadius: '50%', border: '1px dashed rgba(56, 189, 248, 0.4)' }} />
-              <div style={{ position: 'absolute', width: 120, height: 120, borderRadius: '50%', border: '1px solid rgba(56, 189, 248, 0.25)' }} />
-              <div style={{ position: 'absolute', width: 180, height: 180, borderRadius: '50%', border: '1px solid rgba(56, 189, 248, 0.15)' }} />
+            {/* Interactive Radar & Foundation Highlights */}
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 24, alignItems: 'center' }}>
               
-              <div style={{ position: 'absolute', width: '100%', height: 1, background: 'rgba(56, 189, 248, 0.2)' }} />
-              <div style={{ position: 'absolute', width: 1, height: '100%', background: 'rgba(56, 189, 248, 0.2)' }} />
-
+              {/* Radar Widget */}
               <div style={{
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                width: 95,
-                height: 95,
-                transformOrigin: '0 0',
-                transform: `rotate(${simAngle}deg)`,
-                background: 'conic-gradient(from 0deg, rgba(56, 189, 248, 0.4) 0deg, transparent 60deg)',
-                pointerEvents: 'none'
-              }} />
-
-              <div style={{ position: 'absolute', top: '35%', left: '60%', width: 8, height: 8, borderRadius: '50%', background: '#ef4444', boxShadow: '0 0 10px #ef4444' }} />
-              <div style={{ position: 'absolute', top: '70%', left: '30%', width: 8, height: 8, borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 10px #22c55e' }} />
-              <div style={{ position: 'absolute', top: '25%', left: '25%', width: 8, height: 8, borderRadius: '50%', background: '#f59e0b', boxShadow: '0 0 10px #f59e0b' }} />
-
-              <div style={{
-                position: 'absolute',
-                bottom: 8,
-                right: 8,
-                fontSize: '0.68rem',
-                fontFamily: 'monospace',
-                color: '#38bdf8',
-                background: 'rgba(0,0,0,0.6)',
-                padding: '3px 8px',
-                borderRadius: 4
+                background: 'rgba(0, 0, 0, 0.45)',
+                border: '1px solid rgba(0, 113, 227, 0.35)',
+                borderRadius: 22,
+                padding: '20px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 12
               }}>
-                BEARING: {simAngle}° | TGT: 3 LOCKS
+                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
+                  <span style={{ fontSize: '0.85rem', fontWeight: 800, color: '#38bdf8', display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <Radio size={16} /> رادار الكشف التكتيكي ومواقع حرس الحدود
+                  </span>
+                  <span style={{ fontSize: '0.75rem', background: 'rgba(34, 197, 94, 0.2)', color: '#4ade80', padding: '2px 8px', borderRadius: 999, fontWeight: 700 }}>
+                    ● 60 FPS GPU Vector
+                  </span>
+                </div>
+                <canvas ref={radarCanvasRef} width={340} height={230} style={{ borderRadius: 16, width: '100%', maxWidth: 340 }} />
+                <div style={{ fontSize: '0.75rem', color: '#94a3b8', textAlign: 'center' }}>
+                  خوادم المركز الجغرافي الملكي: رصد فوري معزول عن أي خادم خارجي
+                </div>
               </div>
-            </div>
 
-            {/* Telemetry Information Details */}
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-              {simMode === 'radar' && (
-                <>
-                  <div style={{ fontSize: '0.98rem', fontWeight: 800, color: '#38bdf8' }}>
-                    كشف الرادار المحيطي 360° وتحليل القطاعات المحجوبة
+              {/* What We Deliver as Base Map Engine */}
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+                <div style={{ background: 'rgba(255, 255, 255, 0.05)', border: '1px solid rgba(255, 255, 255, 0.1)', padding: '18px 22px', borderRadius: 18 }}>
+                  <div style={{ color: '#38bdf8', fontWeight: 800, fontSize: '0.98rem', marginBottom: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <MapIcon size={18} /> 1. تغطية كاملة لـ 25,000 كم من طرق ومسارات المملكة
                   </div>
-                  <div style={{ fontSize: '0.84rem', color: '#94a3b8', lineHeight: 1.7 }}>
-                    يمسح المحرك التضاريس المحيطة بنقطة الملاحظة ويرسم بدقة أشعة الرؤية المباشرة (Line of Sight) مع كشف مناطق الأرض الميتة المحجوبة خلف التلال بنسبة دقة تصل إلى 100%.
+                  <div style={{ fontSize: '0.85rem', color: '#94a3b8', lineHeight: 1.6 }}>
+                    تغطية 12 محافظة بكافة تفاصيل شوارعها، والأودية، ومسارات البادية، مع عنونة أردنية محلية تفهم المسميات الدارجة ("دوار السابع"، "نزول صافوط").
                   </div>
-                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 4 }}>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>أقصى مدى كشف</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#f8fafc' }}>15.0 كم</div>
-                    </div>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>تغطية الرؤية</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#4ade80' }}>82.4%</div>
-                    </div>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>الأرض الميتة</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#f87171' }}>17.6%</div>
-                    </div>
-                  </div>
-                </>
-              )}
+                </div>
 
-              {simMode === 'isochrone' && (
-                <>
-                  <div style={{ fontSize: '0.98rem', fontWeight: 800, color: '#4ade80' }}>
-                    نطاقات زمن الاستجابة والوصول الهجينة (Hybrid Road + Terrain Isochrone)
+                <div style={{ background: 'rgba(255, 255, 255, 0.05)', border: '1px solid rgba(255, 255, 255, 0.1)', padding: '18px 22px', borderRadius: 18 }}>
+                  <div style={{ color: '#4ade80', fontWeight: 800, fontSize: '0.98rem', marginBottom: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <CloudRain size={18} /> 2. رصد الطقس الميداني والإنذار المبكر ورادار السحب
                   </div>
-                  <div style={{ fontSize: '0.84rem', color: '#94a3b8', lineHeight: 1.7 }}>
-                    تحليل مركب يدمج شبكة الطرق المعبدة مع سرعات العبور التكتيكي خارج الطرق (Off-Road) بناءً على انحدار الأرض ووعورة حقول البازلت وقواطع الجروف الصخرية.
+                  <div style={{ fontSize: '0.85rem', color: '#94a3b8', lineHeight: 1.6 }}>
+                    دمج درجات الحرارة اللحظية وسرعة الرياح مع محرك التنبيه التلقائي من الصقيع والعواصف، ورادار حركة السحب والأمطار المتحرك.
                   </div>
-                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 4 }}>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>مؤشر الساعة الذهبية</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#4ade80' }}>96.4%</div>
-                    </div>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>جاهزية العبور</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#38bdf8' }}>88%</div>
-                    </div>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>عوائق الجروف</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#fbbf24' }}>2 قواطع</div>
-                    </div>
-                  </div>
-                </>
-              )}
+                </div>
 
-              {simMode === 'ballistic' && (
-                <>
-                  <div style={{ fontSize: '0.98rem', fontWeight: 800, color: '#f59e0b' }}>
-                    مسار المقذوفات البالستية ورماية المدفعية والهاونات
+                <div style={{ background: 'rgba(255, 255, 255, 0.05)', border: '1px solid rgba(255, 255, 255, 0.1)', padding: '18px 22px', borderRadius: 18 }}>
+                  <div style={{ color: '#fbbf24', fontWeight: 800, fontSize: '0.98rem', marginBottom: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
+                    <Mountain size={18} /> 3. تحليل انحدار الطرق والتحذير من المنحدرات الجبلية
                   </div>
-                  <div style={{ fontSize: '0.84rem', color: '#94a3b8', lineHeight: 1.7 }}>
-                    حساب الارتفاع الأقصى للقوس البالستي (Apex)، زمن الطيران، زاوية الموقع بالميللي العسكري (Mils)، والتأكد الآلي من خلو مسار القذيفة من التلال والعوائق الجبلية.
+                  <div style={{ fontSize: '0.85rem', color: '#94a3b8', lineHeight: 1.6 }}>
+                    أول خريطة تنبه السائقين وناقلات الدبابات والشاحنات بالصعود الحاد (+9%) والمنحدرات الخطرة (-9%) لاستخدام الغيار العكسي.
                   </div>
-                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 4 }}>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>أعلى ارتفاع (Apex)</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#f59e0b' }}>1,840 م</div>
-                    </div>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>زمن الطيران</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#f8fafc' }}>24.6 ث</div>
-                    </div>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>زاوية الموقع</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#38bdf8' }}>+34.2 ميللي</div>
-                    </div>
-                  </div>
-                </>
-              )}
+                </div>
+              </div>
 
-              {simMode === 'terrain' && (
-                <>
-                  <div style={{ fontSize: '0.98rem', fontWeight: 800, color: '#a855f7' }}>
-                    مصفوفة التضاريس العسكرية (25×25 DEM Matrix & OAKOC)
-                  </div>
-                  <div style={{ fontSize: '0.84rem', color: '#94a3b8', lineHeight: 1.7 }}>
-                    مسح ليزري بـ 625 عقدة تضاريسية لاستخراج القمم الحاكمة، بطون الأودية ومصارف السيول، وحساب مصفوفة تصنيف الميول وحركة الدروع العسكرية.
-                  </div>
-                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 4 }}>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>عقد المسح</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#a855f7' }}>625 عقدة</div>
-                    </div>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>دقة الخلية</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#38bdf8' }}>&lt; 120 م</div>
-                    </div>
-                    <div style={{ background: 'rgba(255,255,255,0.04)', padding: '10px 12px', borderRadius: 8 }}>
-                      <div style={{ fontSize: '0.70rem', color: '#94a3b8' }}>القمم المرصودة</div>
-                      <div style={{ fontSize: '1.15rem', fontWeight: 900, color: '#4ade80' }}>8 قمم</div>
-                    </div>
-                  </div>
-                </>
-              )}
             </div>
           </div>
         </section>
 
-        {/* SECTION 3: TACTICAL ARSENAL (8 CAPABILITIES) */}
-        <section id="tactical-arsenal" className="apple-card" style={{ padding: '36px 32px' }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
-            <div>
-              <div style={{ fontSize: '0.78rem', fontWeight: 800, color: '#38bdf8', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>
-                الترسانة الشاملة (C4ISR Arsenal)
-              </div>
-              <h3 style={{ fontSize: '1.5rem', fontWeight: 900, color: '#ffffff', margin: 0, display: 'flex', alignItems: 'center', gap: 10 }}>
-                <Crosshair size={26} color="#38bdf8" /> القدرات الاستخباراتية والتكتيكية الـ 8 المكتملة
-              </h3>
-              <p style={{ color: '#94a3b8', fontSize: '0.94rem', margin: '6px 0 0 0', lineHeight: 1.6 }}>
-                حزمة متكاملة ومترابطة من خوارزميات المسح التضاريسي وتحليل مسرح العمليات لخدمة غرف القيادة والسيطرة وسلاح المدفعية والاستطلاع:
-              </p>
+        {/* CHAPTER 2: THE MILITARY & C4ISR WING */}
+        <section id="ch2-military-wing" className="story-card" style={{ padding: '48px 40px' }}>
+          <div style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto 36px auto' }}>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#eff6ff', color: '#0071e3', border: '1px solid #bfdbfe', padding: '5px 16px', borderRadius: 999, fontSize: '0.85rem', fontWeight: 800, marginBottom: 12 }}>
+              <Crosshair size={15} /> الفصل الثاني: الجناح العسكري والاستخبارات الجغرافية (C4ISR)
             </div>
-            <a href="#tactical" style={{
-              textDecoration: 'none',
-              background: 'linear-gradient(135deg, #4f46e5, #0ea5e9)',
-              color: '#ffffff',
-              padding: '10px 20px',
-              borderRadius: 12,
-              fontSize: '0.86rem',
-              fontWeight: 800,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-              boxShadow: '0 4px 14px rgba(79, 70, 229, 0.35)'
-            }}>
-              فتح مسرح العمليات التكتيكي <ExternalLink size={15} />
-            </a>
+            <h3 style={{ fontSize: '2.2rem', fontWeight: 900, color: '#0f172a', margin: 0 }}>
+              ماذا نقدم للقوات المسلحة وحرس الحدود والدفاع المدني؟
+            </h3>
+            <p style={{ fontSize: '0.96rem', color: '#64748b', marginTop: 8 }}>
+              أدوات قيادة وسيطرة ورماية مدفعية ميدانية مدمجة بالكامل تعمل على نفس الخريطة بدون إنترنت
+            </p>
           </div>
 
-          {/* 8 Tactical Cards Grid */}
+          {/* Interactive Ballistics Sandbox */}
           <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
-            gap: 20,
-            marginTop: 20
+            background: 'linear-gradient(135deg, #090e17 0%, #0f172a 100%)',
+            border: '1px solid rgba(0, 113, 227, 0.3)',
+            borderRadius: 22,
+            padding: '28px',
+            color: '#ffffff',
+            marginBottom: 36
           }}>
-
-            {/* Card 1: 25x25 Terrain Matrix & OAKOC */}
-            <div className="apple-card" style={{ padding: 24 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(79, 70, 229, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#818cf8' }}>
-                  <Mountain size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    1. دراسة الأرض ومصفوفة المسح (25×25 DEM)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#94a3b8' }}>625 عقدة مسح واستيفاء كروي دقيق</span>
-                </div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, marginBottom: 18 }}>
+              <div style={{ fontWeight: 800, fontSize: '1.1rem', color: '#38bdf8', display: 'flex', alignItems: 'center', gap: 8 }}>
+                <Flame size={20} color="#f97316" /> محاكي رماية المدفعية وحساب أمان عبور القمم التضاريسية (Crest Clearance)
+              </div>
+              <div style={{ display: 'flex', gap: 16, fontSize: '0.82rem', color: '#94a3b8' }}>
+                <span>المدفع: <strong>M109A2 (155mm)</strong></span>
+                <span>زاوية الموقع: <strong>حساب تلقائي بالميللي</strong></span>
               </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>مسح تفصيلي لمربعات التضاريس يقلص حجم الخلية إلى أقل من 120 متراً.</li>
-                <li>كشف وتحديد <strong>القمم الحاكمة والوديان العميقة</strong> تلقائياً بدقة المتر.</li>
-                <li>تتبع مسارات مصارف السيول وبطون الأودية وسلاسل التلال المسيطرة.</li>
-                <li>توليد تقرير تقدير الموقف التكتيكي الشامل (OAKOC) المعتمد عسكرياً.</li>
-              </ul>
             </div>
 
-            {/* Card 2: Cliff & Rock Barriers */}
-            <div className="apple-card" style={{ padding: 24 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(239, 68, 68, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#f87171' }}>
-                  <AlertTriangle size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    2. كشف القواطع والجروف الصخرية (Cliffs)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#94a3b8' }}>موانع طبيعية قطعية (NO-GO)</span>
-                </div>
+            {/* Ballistic Sliders */}
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20, marginBottom: 20 }}>
+              <div>
+                <label style={{ fontSize: '0.82rem', color: '#cbd5e1', display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                  <span>مسافة الهدف:</span>
+                  <span style={{ color: '#38bdf8', fontWeight: 800 }}>{targetDistance} كم</span>
+                </label>
+                <input 
+                  type="range" 
+                  min={5} 
+                  max={24} 
+                  value={targetDistance}
+                  onChange={e => setTargetDistance(Number(e.target.value))}
+                  style={{ width: '100%', accentColor: '#38bdf8' }}
+                />
+              </div>
+
+              <div>
+                <label style={{ fontSize: '0.82rem', color: '#cbd5e1', display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
+                  <span>زاوية الرمي بالميللي:</span>
+                  <span style={{ color: '#4ade80', fontWeight: 800 }}>{gunElevationMils} Mils ({(gunElevationMils * 0.05625).toFixed(1)}°)</span>
+                </label>
+                <input 
+                  type="range" 
+                  min={200} 
+                  max={800} 
+                  value={gunElevationMils}
+                  onChange={e => setGunElevationMils(Number(e.target.value))}
+                  style={{ width: '100%', accentColor: '#4ade80' }}
+                />
               </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>حساب تفاضلي للميل الحاد ومعدل الهبوط الشاقولي (&ge; 28°).</li>
-                <li>تحديد الجروف الصخرية الممتنعة على الدروع والآليات تلقائياً.</li>
-                <li>إمكانية الانتقال والتركيز ثلاثي الأبعاد (3D FlyTo) على أي قاطع مرصود.</li>
-                <li>تحديد نقاط الاختناق والمخانق الإجبارية لاستغلالها في الكمائن الدفاعية.</li>
-              </ul>
             </div>
 
-            {/* Card 3: 4-Tier Slope Mobility */}
-            <div className="apple-card" style={{ padding: 24 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(34, 197, 94, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80' }}>
-                  <Compass size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    3. التصنيف الرباعي للميول وحركة الدروع
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#94a3b8' }}>مصفوفة التنقل (Cross-Country Mobility)</span>
-                </div>
+            {/* SVG Parabolic Arc */}
+            <div style={{ width: '100%', height: 140, background: 'rgba(0,0,0,0.35)', borderRadius: 14, padding: 12, position: 'relative' }}>
+              <svg width="100%" height="100%" viewBox="0 0 500 120" preserveAspectRatio="none">
+                {/* Mountain Obstacle */}
+                <path d="M 180 120 Q 230 40 280 120 Z" fill="rgba(239, 68, 68, 0.25)" stroke="#ef4444" strokeWidth="1.5" />
+                <text x="205" y="32" fill="#f87171" fontSize="10">قمة جبلية (فحص أمان العبور: سليم)</text>
+
+                <line x1="0" y1="115" x2="500" y2="115" stroke="#334155" strokeWidth="2" />
+
+                <circle cx="20" cy="115" r="4" fill="#0071e3" />
+                <text x="10" y="105" fill="#38bdf8" fontSize="9">موقع المدفع</text>
+
+                <path 
+                  d={`M 20 115 Q ${150 + targetDistance * 5} ${120 - (gunElevationMils / 800) * 110} ${targetDistance * 19} 115`} 
+                  fill="none" 
+                  stroke="#4ade80" 
+                  strokeWidth="2.5" 
+                  strokeDasharray="4 2"
+                />
+
+                <circle cx={targetDistance * 19} cy="115" r="4" fill="#ef4444" />
+                <text x={targetDistance * 19 - 15} y="105" fill="#f87171" fontSize="9">الهدف</text>
+              </svg>
+            </div>
+          </div>
+
+          {/* 6 Tactical C4ISR Weapons */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(290px, 1fr))', gap: 20 }}>
+            
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ width: 44, height: 44, borderRadius: 12, background: '#ecfdf5', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#059669', marginBottom: 14 }}>
+                <Radio size={22} />
               </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, 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>
+              <h4 style={{ margin: '0 0 6px 0', fontSize: '1.05rem', fontWeight: 800, color: '#0f172a' }}>
+                1. كشف الميدان الدائري 360° (Viewshed)
+              </h4>
+              <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
+                مسح شعاعي فوري بزاوية 360 درجة حول أي موقع راداري أو برج مراقبة أو قناص لتحديد المساحات المكشوفة والأراضي الميتة في 300 ملي ثانية (Zero Server Load).
+              </p>
             </div>
 
-            {/* Card 4: Line of Sight (LOS) */}
-            <div className="apple-card" style={{ padding: 24 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(245, 158, 11, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#facc15' }}>
-                  <Eye size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    4. تبادل الرؤية وخط النظر الكروي (LOS)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#94a3b8' }}>مع تصحيح تقوس الأرض وانكسار الضوء</span>
-                </div>
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ width: 44, height: 44, borderRadius: 12, background: '#eff6ff', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0071e3', marginBottom: 14 }}>
+                <Eye size={22} />
               </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>فحص الرؤية المباشرة اللحظية بين الراصد والهدف بدقة المسح الليزري.</li>
-                <li>كشف العوائق الجبلية الحاجبة للرؤية وتحديد نقطة الانسداد الدقيقة.</li>
-                <li>حساب نسبة <strong>الأرض الميتة (Dead Ground)</strong> في حقل الملاحظة.</li>
-                <li>حساب زاوية الموقع بالميللي العسكري (Mils) والسمت البوصلّي الدقيق.</li>
-              </ul>
+              <h4 style={{ margin: '0 0 6px 0', fontSize: '1.05rem', fontWeight: 800, color: '#0f172a' }}>
+                2. تبادل الرؤية والمقطع التضاريسي (LOS)
+              </h4>
+              <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
+                رسم مقطع تضاريسي رأسي دقيق مع تصحيح تقوس سطح الأرض والانكسار الجوي ($k=0.13$) وكشف العائق الحرج ونسبة الأرض الميتة المحجوبة.
+              </p>
             </div>
 
-            {/* Card 5: Viewshed 360 & Artillery Trajectory */}
-            <div className="apple-card" style={{ padding: 24 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(14, 165, 233, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#38bdf8' }}>
-                  <Radar size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    5. الرؤية المحيطية 360° ومسار المقذوفات
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#94a3b8' }}>Viewshed & Ballistic Trajectory</span>
-                </div>
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ width: 44, height: 44, borderRadius: 12, background: '#f0fdfa', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0d9488', marginBottom: 14 }}>
+                <Plane size={22} />
               </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>توليد مضلع كشف الرؤية المحيطية الكاملة بزاوية 360 درجة من قمة الراصد.</li>
-                <li>حساب مسار المقذوف البالستي للمدفعية والهاونات وأعلى ارتفاع للقوس (Apex).</li>
-                <li>حساب زمن الطيران بالثواني ومعدل الدقة الدائرية (CEP).</li>
-                <li>تأكيد خلو مسار القذيفة من التلال والعوائق الجبلية المرتفعة.</li>
-              </ul>
+              <h4 style={{ margin: '0 0 6px 0', fontSize: '1.05rem', fontWeight: 800, color: '#0f172a' }}>
+                3. كشف مهابط المروحيات والإخلاء (HLZ)
+              </h4>
+              <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
+                مسح تضاريسي آلي لاستخراج المساحات المستوية (انحدار أقل من 7 درجات وبمساحة كافية) الصالحة للإخلاء الطبي (MEDEVAC) والتزويد المحوقل.
+              </p>
             </div>
 
-            {/* Card 6: Minefields & HLZ */}
-            <div className="apple-card" style={{ padding: 24 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(168, 85, 247, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#c084fc' }}>
-                  <Plane size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    6. هندسة حقول الألغام ومهابط المروحيات (HLZ)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#94a3b8' }}>Sapper Engineering & Aviation Safety</span>
-                </div>
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ width: 44, height: 44, borderRadius: 12, background: '#faf5ff', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#7c3aed', marginBottom: 14 }}>
+                <Timer size={22} />
               </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>حساب كميات الألغام المضادة للدروع والأفراد وساعات الزرع الهندسية.</li>
-                <li>تقييم ملاءمة الثغرات والمخانق لإنشاء السدود والموانع الهندسية.</li>
-                <li>فحص مناطق هبوط الطيران العمودي والتأكد من استواء الأرض (&lt; 7°).</li>
-                <li>التحقق من خلو أقماع الاقتراب ومسارات الإقلاع من خطوط الطاقة والأشجار.</li>
-              </ul>
+              <h4 style={{ margin: '0 0 6px 0', fontSize: '1.05rem', fontWeight: 800, color: '#0f172a' }}>
+                4. مضلعات زمن الاستجابة (Isochrone)
+              </h4>
+              <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
+                حساب نطاق الاستجابة الحقيقي لدوريات الرد السريع وسيارات الإسعاف والإطفاء في 5 و 10 و 15 دقيقة لخدمة الدفاع المدني والأمن العام.
+              </p>
             </div>
 
-            {/* Card 7: Hybrid Isochrone & Golden Hour */}
-            <div className="apple-card" style={{ padding: 24, border: '1px solid rgba(34, 197, 94, 0.35)' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(34, 197, 94, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80' }}>
-                  <Timer size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    7. نطاقات زمن الاستجابة والوصول الهجينة (Isochrone)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#4ade80' }}>شبكة الطرق + انحدار الأرض + حقول البازلت</span>
-                </div>
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ width: 44, height: 44, borderRadius: 12, background: '#fff7ed', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ea580c', marginBottom: 14 }}>
+                <Flame size={22} />
               </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>دمج شبكة الطرق الحقيقية مع سرعات العبور التكتيكي خارج الطرق (Off-Road).</li>
-                <li>تطبيق معاملات إبطاء فورية على حقول الصخور البازلتية وميول الأودية.</li>
-                <li>تقليص نطاقات الوصول آلياً عند مواجهة قواطع الجروف الصخرية الحادة.</li>
-                <li>مؤشر الامتثال للساعة الذهبية (Golden Hour) للأرتال والإسعاف التكتيكي (96.4%).</li>
-              </ul>
+              <h4 style={{ margin: '0 0 6px 0', fontSize: '1.05rem', fontWeight: 800, color: '#0f172a' }}>
+                5. رماية المدفعية والمسار البالستي
+              </h4>
+              <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
+                حساب زوايا الموقع وزوايا الرمي بالميللي العسكري (Mils)، وزمن طيران القذيفة (TOF)، مع فحص أمان عبور القمم التضاريسية.
+              </p>
             </div>
 
-            {/* Card 8: MIL-STD-2525 Military Symbology */}
-            <div className="apple-card" style={{ padding: 24, border: '1px solid rgba(56, 189, 248, 0.35)' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(56, 189, 248, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#38bdf8' }}>
-                  <Boxes size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    8. التشكيلات والرموز العسكرية القياسية (MIL-STD-2525)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#38bdf8' }}>نظام تشفير وتمثيل المعركة القياسي</span>
-                </div>
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ width: 44, height: 44, borderRadius: 12, background: '#fefce8', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ca8a04', marginBottom: 14 }}>
+                <ShieldCheck size={22} />
               </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>مكتبة متكاملة لرموز القوات الصديقة والمعادية والمحايدة (NATO / Standard).</li>
-                <li>تمثيل وحدات المشاة، الدروع، المدفعية، الدفاع الجوي، ومراكز القيادة (HQ).</li>
-                <li>رسم خطوط السيطرة والحدود الفاصلة ومحاور التقدم الدفاعية والهجومية.</li>
-                <li>توليد الموقف العملياتي المشترك (COP) وتصديره بصيغ GeoJSON آمنة.</li>
-              </ul>
+              <h4 style={{ margin: '0 0 6px 0', fontSize: '1.05rem', fontWeight: 800, color: '#0f172a' }}>
+                6. تشغيل محلي معزول 100% (Air-Gapped)
+              </h4>
+              <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
+                تنصيب المنظومة بالكامل داخل خوادم المركز الجغرافي وغرف العمليات الميدانية دون الحاجة للإنترنت لمنع أي تسريب للمواقع العسكرية.
+              </p>
             </div>
 
           </div>
         </section>
 
-        {/* SECTION 4: AUTONOMOUS SELF-FEEDING ROAD NETWORK */}
-        <section id="self-feeding" className="apple-card" style={{ padding: '36px 32px' }}>
-          <div style={{ fontSize: '0.78rem', fontWeight: 800, color: '#4ade80', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>
-            السيادة والتغذية الذاتية (Self-Updating Map)
-          </div>
-          <h3 style={{ fontSize: '1.45rem', fontWeight: 900, color: '#ffffff', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
-            <TrendingUp size={26} color="#4ade80" /> الخريطة التي ترسم وتحدث نفسها: معالجة الـ GPS Traces وتوليد الشوارع
-          </h3>
-          <p style={{ color: '#94a3b8', fontSize: '0.96rem', lineHeight: 1.8, margin: 0 }}>
-            بدلاً من دفع ملايين الدنانير لشركات المسح الجوي أو شراء بيانات أجنبية دورية، تعتمد منصة انطلاق على خوارزمية ذكية تحول مسارات الآليات والشاحنات والمركبات الميدانية إلى شبكة شوارع معتمدة تلقائياً:
-          </p>
-
-          {/* 3 Step Workflow */}
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-            gap: 18,
-            marginTop: 24
-          }}>
-            <div className="apple-card" style={{ padding: '22px' }}>
-              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(56, 189, 248, 0.15)', color: '#38bdf8', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 900, marginBottom: 12 }}>
-                1
-              </div>
-              <h4 style={{ margin: '0 0 8px 0', fontSize: '1.02rem', fontWeight: 800, color: '#ffffff' }}>التقاط مسارات الـ GPS الميدانية</h4>
-              <p style={{ margin: 0, fontSize: '0.86rem', color: '#94a3b8', lineHeight: 1.7 }}>
-                تجمع المنصة إحداثيات الدوريات والشاحنات والتطبيقات المدنية لحظياً وتصفي الإشارات المشوشة وتكتشف الانحراف عن شبكة الطرق القائمة.
-              </p>
-            </div>
-
-            <div className="apple-card" style={{ padding: '22px' }}>
-              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(245, 158, 11, 0.15)', color: '#facc15', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 900, marginBottom: 12 }}>
-                2
-              </div>
-              <h4 style={{ margin: '0 0 8px 0', fontSize: '1.02rem', fontWeight: 800, color: '#ffffff' }}>توليد الطرق المرشحة (Candidate Roads)</h4>
-              <p style={{ margin: 0, fontSize: '0.86rem', color: '#94a3b8', lineHeight: 1.7 }}>
-                عند تكرار عبور أكثر من 3 مركبات على نفس المسار الصحراوي أو الفرعي، تقوم الخوارزمية برسم خط متجهي (Polyline) وتصنيفه كطريق مقترح.
-              </p>
-            </div>
-
-            <div className="apple-card" style={{ padding: '22px' }}>
-              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(34, 197, 94, 0.15)', color: '#4ade80', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 900, marginBottom: 12 }}>
-                3
-              </div>
-              <h4 style={{ margin: '0 0 8px 0', fontSize: '1.02rem', fontWeight: 800, color: '#ffffff' }}>الاعتماد الفوري والتكامل مع التوجيه</h4>
-              <p style={{ margin: 0, fontSize: '0.86rem', color: '#94a3b8', lineHeight: 1.7 }}>
-                يستعرض مهندسو المركز الجغرافي الشوارع المكتشفة على لوحة المراجعة، وبمجرد الضغط على اعتماد تصبح جزءاً من خريطة التوجيه والملاحة الوطنية.
-              </p>
+        {/* CHAPTER 3: THE COMMERCIAL WING, FLEET TELEMETRY & 3TB STREET VIEW */}
+        <section id="ch3-commercial-fleet" className="story-card" style={{ padding: '48px 40px' }}>
+          <div style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto 36px auto' }}>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#faf5ff', color: '#7c3aed', border: '1px solid #e9d5ff', padding: '5px 16px', borderRadius: 999, fontSize: '0.85rem', fontWeight: 800, marginBottom: 12 }}>
+              <Camera size={15} /> الفصل الثالث: الجناح التجاري والتجول الافتراضي والأساطيل (3TB)
             </div>
+            <h3 style={{ fontSize: '2.2rem', fontWeight: 900, color: '#0f172a', margin: 0 }}>
+              تكامل تطبيق النقل Siro مع التحديث الذاتي وتصوير الشوارع
+            </h3>
+            <p style={{ fontSize: '0.96rem', color: '#64748b', marginTop: 8 }}>
+              كيف تولد حركة السائقين الشوارع آلياً وكيف نصور 25,000 كم بكاميرات داش كام رخيصة؟
+            </p>
           </div>
 
-          {/* Expansion Benefit */}
-          <div style={{
-            marginTop: 24,
-            padding: '20px 24px',
-            background: 'rgba(99, 102, 241, 0.12)',
-            border: '1px solid rgba(99, 102, 241, 0.3)',
-            borderRadius: 18,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 16
-          }}>
-            <Globe size={30} color="#818cf8" style={{ flexShrink: 0 }} />
-            <div>
-              <div style={{ fontWeight: 800, fontSize: '1.02rem', color: '#ffffff' }}>
-                الأثر العسكري والتوسعي: العمل في أي مسرح عمليات فورياً
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 24, marginBottom: 30 }}>
+            
+            {/* The Telemetry Loop */}
+            <div style={{ background: '#f8fafc', padding: '26px', borderRadius: 20, border: '1px solid #e2e8f0' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#0071e3', fontWeight: 800, fontSize: '1.1rem', marginBottom: 12 }}>
+                <Zap size={22} /> 1. التحديث الذاتي للشوارع عبر حركة المركبات
               </div>
-              <div style={{ fontSize: '0.88rem', color: '#cbd5e1', marginTop: 4, lineHeight: 1.7 }}>
-                إذا تم نشر آليات القوات المسلحة أو الأجهزة الأمنية في أي منطقة حدودية أو دولة مجاورة (مثل جنوب سوريا، غرب العراق، صحراء سيناء)، يكفي تشغيل تطبيق التتبع لتبدأ المنصة فوراً برسم شبكة الطرق والممرات الوعرة ونشرها لباقي التشكيلات في الميدان دون انتظار أي طرف أجنبي.
+              <div style={{ fontSize: '0.88rem', color: '#475569', lineHeight: 1.8 }}>
+                بدلاً من دفع ملايين الدنانير لفرق المسح: حركة سيارات تطبيق <strong>Siro</strong> ودوريات الجيش تلتقط مسارات الطرق الجديدة والمناطق الصحراوية تلقائياً، ويقوم الذكاء الاصطناعي برسم الشارع واعتماده بعد تكرار حركة المركبات فوقه!
+              </div>
+            </div>
+
+            {/* The 3TB Street View Blueprint */}
+            <div style={{ background: '#faf5ff', padding: '26px', borderRadius: 20, border: '1px solid #e9d5ff' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#7c3aed', fontWeight: 800, fontSize: '1.1rem', marginBottom: 12 }}>
+                <Camera size={22} /> 2. مشروع تصوير كامل شوارع الأردن (3TB)
+              </div>
+              <div style={{ fontSize: '0.88rem', color: '#475569', lineHeight: 1.8 }}>
+                تصوير 25,000 كم من شبكة طرق المملكة بكاميرات 4K GPS على آليات الأساطيل (صورة كل 5 أمتار = 5 ملايين صورة = حجم بيانات إجمالي قرابة 3 تيرابايت تتسع على قرص SSD واحد بـ 250 دينار فقط!).
+              </div>
+            </div>
+
+          </div>
+
+          {/* 4-Stage AI Pipeline */}
+          <div style={{ background: '#f8fafc', padding: '28px', borderRadius: 20, border: '1px solid #e2e8f0' }}>
+            <h4 style={{ margin: '0 0 16px 0', fontSize: '1.05rem', fontWeight: 800, color: '#0f172a' }}>
+              مسار المعالجة الآلي بالذكاء الاصطناعي للصور الملتقطة:
+            </h4>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 16 }}>
+              <div style={{ background: '#ffffff', padding: '16px', borderRadius: 14, border: '1px solid #e2e8f0' }}>
+                <div style={{ fontWeight: 800, color: '#7c3aed', marginBottom: 4 }}>المرحلة 1: طمس الخصوصية</div>
+                <div style={{ fontSize: '0.82rem', color: '#64748b', lineHeight: 1.6 }}>طمس وجوه المشاة وأرقام لوحات السيارات تلقائياً بنموذج YOLO قبل الحفظ.</div>
+              </div>
+              <div style={{ background: '#ffffff', padding: '16px', borderRadius: 14, border: '1px solid #e2e8f0' }}>
+                <div style={{ fontWeight: 800, color: '#0071e3', marginBottom: 4 }}>المرحلة 2: المطابقة المكانية</div>
+                <div style={{ fontSize: '0.82rem', color: '#64748b', lineHeight: 1.6 }}>ربط كل صورة بإحداثيات الـ GPS الدقيقة وزاوية اتجاه الكاميرا (Heading).</div>
+              </div>
+              <div style={{ background: '#ffffff', padding: '16px', borderRadius: 14, border: '1px solid #e2e8f0' }}>
+                <div style={{ fontWeight: 800, color: '#059669', marginBottom: 4 }}>المرحلة 3: استخراج الأصول</div>
+                <div style={{ fontSize: '0.82rem', color: '#64748b', lineHeight: 1.6 }}>استخراج شواخص السرعة، المطبات، الحفر، وأعمدة الإنارة وتحويلها لطبقات بيانات.</div>
+              </div>
+              <div style={{ background: '#ffffff', padding: '16px', borderRadius: 14, border: '1px solid #e2e8f0' }}>
+                <div style={{ fontWeight: 800, color: '#d97706', marginBottom: 4 }}>المرحلة 4: الاستطلاع الافتراضي</div>
+                <div style={{ fontSize: '0.82rem', color: '#64748b', lineHeight: 1.6 }}>معاينة الشارع ومداخل المباني من مستوى عين السائق قبل إرسال القوات والمداهمات.</div>
               </div>
             </div>
           </div>
         </section>
 
-        {/* SECTION 5: ESRI DIRECT BENCHMARK COMPARISON */}
-        <section id="esri-comparison" className="apple-card" style={{ padding: '36px 32px' }}>
-          <div style={{ fontSize: '0.78rem', fontWeight: 800, color: '#f87171', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>
-            مقارنة الجدارة والكفاءة (Benchmark Matrix)
+        {/* CHAPTER 4: DEVELOPER SDKS & ECOSYSTEM INTEGRATION */}
+        <section id="ch4-sdks-compatibility" className="story-card" style={{ padding: '48px 40px' }}>
+          <div style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto 36px auto' }}>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#fffbeb', color: '#d97706', border: '1px solid #fde68a', padding: '5px 16px', borderRadius: 999, fontSize: '0.85rem', fontWeight: 800, marginBottom: 12 }}>
+              <Smartphone size={15} /> الفصل الرابع: حزم المطورين والربط التقني (Developer SDKs)
+            </div>
+            <h3 style={{ fontSize: '2.2rem', fontWeight: 900, color: '#0f172a', margin: 0 }}>
+              كيف تلزم التطبيقات الأخرى وتستبدل كود Google Maps بسطر واحد؟
+            </h3>
+            <p style={{ fontSize: '0.96rem', color: '#64748b', marginTop: 8 }}>
+              توافق تام مع Google Maps SDK وكاش محلي في هواتف السائقين يخفض 85% من استهلاك السيرفرات
+            </p>
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20, marginBottom: 30 }}>
+            
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ fontSize: '1.15rem', fontWeight: 800, color: '#0071e3', marginBottom: 6 }}>Flutter SDK</div>
+              <div style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.75 }}>
+                حزمة فلاتر مع كاش SQLite محلي يحفظ بلاطات الخريطة في هاتف السائق والراكب لمدة 30 يوماً وتوافق تام مع واجهة GoogleMap widget.
+              </div>
+            </div>
+
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ fontSize: '1.15rem', fontWeight: 800, color: '#4f46e5', marginBottom: 6 }}>iOS Swift Package</div>
+              <div style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.75 }}>
+                حزمة Native Swift لتطبيقات الآيفون والآيباد مع استغلال كامل لقدرات معالجات الرسوميات (Apple Metal GPU).
+              </div>
+            </div>
+
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ fontSize: '1.15rem', fontWeight: 800, color: '#059669', marginBottom: 6 }}>Android Kotlin SDK</div>
+              <div style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.75 }}>
+                حزمة أندرويد الأصلية تعمل بسلاسة حتى على أرخص أجهزة هواتف السائقين مع دعم كامل للملاحة دون انقطاع.
+              </div>
+            </div>
+
+            <div className="story-card" style={{ padding: '24px' }}>
+              <div style={{ fontSize: '1.15rem', fontWeight: 800, color: '#d97706', marginBottom: 6 }}>Web JavaScript SDK</div>
+              <div style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.75 }}>
+                مكتبة ويب خفيفة الحجم (أقل من 200KB) لشاشات التحكم والديسباتش وغرف العمليات المركزية.
+              </div>
+            </div>
+
+          </div>
+
+          {/* Privacy Telemetry Note */}
+          <div style={{ background: '#ecfdf5', padding: '20px 24px', borderRadius: 16, border: '1px solid #a7f3d0' }}>
+            <div style={{ fontWeight: 800, color: '#059669', fontSize: '0.95rem', marginBottom: 4 }}>
+              🔒 بروتوكول جمع بيانات الطرق بدون المساس بخصوصية الشركات:
+            </div>
+            <div style={{ fontSize: '0.85rem', color: '#166534', lineHeight: 1.7 }}>
+              الحزمة تجمع فقط بيانات حركة فيزيائية مجهولة (إحداثية + سرعة) بدون أسماء المستخدمين أو أرقام الطلبات، ومقابل ذلك يحصل التطبيق على خارطة الازدحام اللحظية مجاناً!
+            </div>
+          </div>
+        </section>
+
+        {/* CHAPTER 5: DEFINITIVE MULTI-COMPETITOR BENCHMARK (Placed before Financials to justify pricing) */}
+        <section id="ch5-competitive-matrix" className="story-card" style={{ padding: '48px 40px' }}>
+          <div style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto 36px auto' }}>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#fff1f2', color: '#e11d48', border: '1px solid #fecdd3', padding: '5px 16px', borderRadius: 999, fontSize: '0.85rem', fontWeight: 800, marginBottom: 12 }}>
+              <Scale size={15} /> الفصل الخامس: المقارنة المرجعية وتبرير السعر
+            </div>
+            <h3 style={{ fontSize: '2.2rem', fontWeight: 900, color: '#0f172a', margin: 0 }}>
+              جدول المقارنة القاطع: لماذا تسعيرنا (1.25$) هو الأقوى في المنطقة؟
+            </h3>
+            <p style={{ fontSize: '0.96rem', color: '#64748b', marginTop: 8 }}>
+              مقارنة معايير التكلفة والسيادة مع (Esri ArcGIS, Google Maps, Mapbox, HERE Technologies)
+            </p>
           </div>
-          <h3 style={{ fontSize: '1.45rem', fontWeight: 900, color: '#ffffff', margin: '0 0 16px 0' }}>
-            مقارنة دقيقة: منصة انطلاق السيادية مقابل منظومة إزري (Esri ArcGIS Enterprise)
-          </h3>
 
           <div style={{ overflowX: 'auto' }}>
-            <table style={{
-              width: '100%',
-              borderCollapse: 'collapse',
-              fontSize: '0.90rem',
-              textAlign: 'right'
-            }}>
+            <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'right', fontSize: '0.88rem' }}>
               <thead>
-                <tr style={{ background: 'rgba(255,255,255,0.04)', borderBottom: '2px solid rgba(255,255,255,0.1)' }}>
-                  <th style={{ padding: '16px 20px', color: '#94a3b8', fontWeight: 800 }}>المعيار</th>
-                  <th style={{ padding: '16px 20px', color: '#f87171', fontWeight: 800 }}>منظومة إزري (Esri ArcGIS Enterprise)</th>
-                  <th style={{ padding: '16px 20px', color: '#4ade80', fontWeight: 800, background: 'rgba(34, 197, 94, 0.08)' }}>منصة انطلاق السيادية (Intaleq)</th>
+                <tr style={{ borderBottom: '2px solid #e2e8f0', color: '#64748b' }}>
+                  <th style={{ padding: '14px 16px' }}>المعيار</th>
+                  <th style={{ padding: '14px 16px', color: '#059669', fontWeight: 900 }}>منظومتنا الوطنية 🇯🇴</th>
+                  <th style={{ padding: '14px 16px' }}>Esri ArcGIS 🌐</th>
+                  <th style={{ padding: '14px 16px' }}>Google Maps 🇺🇸</th>
+                  <th style={{ padding: '14px 16px' }}>Mapbox / HERE 🇩🇪</th>
                 </tr>
               </thead>
               <tbody>
                 {[
-                  {
-                    criteria: 'نموذج التكلفة والترخيص السنوي',
-                    esri: 'عقود Enterprise باهظة (تراخيص مستخدمين Creator/Viewer + استهلاك Service Credits للبحث والتوجيه)',
-                    intaleq: 'ملكية سيادية وطنية 100%، $0 رخص سنوية، استعلامات واستخدام غير محدود بدون قيود'
-                  },
-                  {
-                    criteria: 'السيادة وموقع البيانات',
-                    esri: 'خدمات التوجيه العالمي والـ Geocoding تمر عبر خوادم إزري السحابية في الولايات المتحدة',
-                    intaleq: 'معالجة داخلية 100% داخل خوادم المركز الجغرافي أو القيادة العامة (On-Premise / Air-Gapped)'
-                  },
-                  {
-                    criteria: 'سرعة عرض الخرائط التفاعلية',
-                    esri: 'تعتمد معمارية السيرفر التقليدية وتوليد الصور أو المتجهات الثقيلة (15-25 FPS على المتصفح)',
-                    intaleq: 'فائقة السرعة عبر Vector Tiles (Martin/PostGIS) ورندرة بالـ GPU بـ 60 FPS وسلاسة فورية'
-                  },
-                  {
-                    criteria: 'تحديث شبكة الطرق والمعالم',
-                    esri: 'تتطلب فرق مسح ميداني بطيئة أو شراء تحديثات بيانات دورية باهظة من شركات أجنبية',
-                    intaleq: 'تحديث حي ذاتي التغذية من حركة أساطيل التتبع وتوليد الطرق المرشحة تلقائياً'
-                  },
-                  {
-                    criteria: 'دراسة الأرض والتضاريس العسكرية',
-                    esri: 'تتطلب إضافات Spatial Analyst منفصلة ومكلفة وتدريباً معقداً على برمجيات سطح المكتب',
-                    intaleq: 'مدمجة في المتصفح بضغطة زر: مسح 25×25 DEM، فحص الجروف، خط النظر الكروي، مسارات المدفعية، ونطاقات الوصول'
-                  },
-                  {
-                    criteria: 'البحث العربي والمسميات المحلية',
-                    esri: 'ضعيف في استيعاب اللهجات المحلية، التقسيمات العشائرية والأخطاء الشائعة في كتابة الأسماء',
-                    intaleq: 'محرك بحث ذكي يفهم اللهجة الأردنية والمسميات النسبية (قرب، مقابل، بجانب) وبوابات المعالم'
-                  },
-                  {
-                    criteria: 'التوسع في مسارح عمليات خارجية',
-                    esri: 'شراء حزم خرائط وبيانات منفصلة لكل دولة إضافية بتكاليف إضافية',
-                    intaleq: 'إضافة أي دولة في العالم (سوريا، مصر، العراق) خلال دقائق بضغطة زر وبدون أي تكلفة'
-                  }
+                  { feature: 'السيادة وتخزين البيانات', us: '100% محلي معزول (Air-Gapped)', esri: 'سحابي في كاليفورنيا', google: 'سحابي لدى جوجل', others: 'سحابي خارجي' },
+                  { feature: 'سرعة الرندرة والإطارات', us: '60 FPS فائق السلاسة (Vector)', esri: 'بطيء (15-20 FPS)', google: '45 FPS', others: '60 FPS' },
+                  { feature: 'التحديث الذاتي للشوارع', us: 'ذاتي لحظي من حركة الأساطيل', esri: 'يدوي بطيء عبر فرق مسح', google: 'دوري شبه مؤتمت', others: 'يعتمد على متطوعين' },
+                  { feature: 'المنظومة العسكرية (رماية/LOS/360°)', us: 'مدمجة بالكامل بالمعايير العسكرية', esri: 'إضافات معقدة وباهظة جداً', google: 'غير متوفرة إطلاقاً', others: 'غير متوفرة' },
+                  { feature: 'التكلفة المالية للـ 1000 طلب', us: '1.25$ فقط (دخل وطني عادل)', esri: 'اشتراكات سنوية بمئات الآلاف', google: '5.00$ إلى 7.00$', others: '1.25$ إلى 2.50$' },
+                  { feature: 'فهم العنونة واللغة العربية', us: 'ذكاء لغوي أردني محلي 100%', esri: 'ترجمة مسميات تقليدية', google: 'جيد في المدن الكبرى فقط', others: 'ضعيف في البادية والقرى' }
                 ].map((row, idx) => (
-                  <tr key={idx} style={{
-                    borderBottom: '1px solid rgba(255,255,255,0.06)',
-                    background: idx % 2 === 0 ? 'transparent' : 'rgba(255, 255, 255, 0.02)'
-                  }}>
-                    <td style={{ padding: '16px 20px', fontWeight: 800, color: '#f8fafc' }}>{row.criteria}</td>
-                    <td style={{ padding: '16px 20px', color: '#f87171', lineHeight: 1.65 }}>{row.esri}</td>
-                    <td style={{ padding: '16px 20px', color: '#4ade80', fontWeight: 600, background: 'rgba(34, 197, 94, 0.05)', lineHeight: 1.65 }}>{row.intaleq}</td>
+                  <tr key={idx} style={{ borderBottom: '1px solid #f1f5f9', background: idx % 2 === 0 ? '#f8fafc' : '#ffffff' }}>
+                    <td style={{ padding: '14px 16px', fontWeight: 800, color: '#0f172a' }}>{row.feature}</td>
+                    <td style={{ padding: '14px 16px', color: '#059669', fontWeight: 900 }}>{row.us}</td>
+                    <td style={{ padding: '14px 16px', color: '#64748b' }}>{row.esri}</td>
+                    <td style={{ padding: '14px 16px', color: '#64748b' }}>{row.google}</td>
+                    <td style={{ padding: '14px 16px', color: '#64748b' }}>{row.others}</td>
                   </tr>
                 ))}
               </tbody>
@@ -1011,260 +854,245 @@ export const ExecutiveShowcase: React.FC = () => {
           </div>
         </section>
 
-        {/* SECTION 6: PARTNERSHIP ROADMAP */}
-        <section id="partnership-roadmap" className="apple-card" style={{ padding: '36px 32px' }}>
-          <div style={{ fontSize: '0.78rem', fontWeight: 800, color: '#facc15', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4 }}>
-            خطة العمل المشترك (Partnership Roadmap)
+        {/* CHAPTER 6: THE MASTER FINANCIAL MODEL & DUAL-REVENUE CALCULATOR */}
+        <section id="ch6-financial-model" className="story-card" style={{ padding: '48px 40px' }}>
+          <div style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto 36px auto' }}>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#ecfdf5', color: '#059669', border: '1px solid #a7f3d0', padding: '5px 16px', borderRadius: 999, fontSize: '0.85rem', fontWeight: 800, marginBottom: 12 }}>
+              <DollarSign size={15} /> الفصل السادس: الجدوى الاقتصادية وحسبة الأرباح المزدوجة
+            </div>
+            <h3 style={{ fontSize: '2.2rem', fontWeight: 900, color: '#0f172a', margin: 0 }}>
+              إيقاف نزيف 2.5M$ سنوياً وتحقيق <span className="text-gradient-emerald">~{(netProfitJod / 1000000).toFixed(2)}M دينار أرباحاً سنوية صافية</span>
+            </h3>
+            <p style={{ fontSize: '0.96rem', color: '#64748b', marginTop: 8 }}>
+              حسبة ديناميكية مباشرة مبنية على تسعير 1.25$ وحجم حركة التوصيل والنقل في الأردن (بحسب الإعدادات الحالية)
+            </p>
           </div>
-          <h3 style={{ fontSize: '1.45rem', fontWeight: 900, color: '#ffffff', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
-            <Award size={26} color="#facc15" /> خطة الشراكة والتنفيذ المقترحة مع المركز الجغرافي الملكي الأردني
-          </h3>
-          <p style={{ color: '#94a3b8', fontSize: '0.96rem', lineHeight: 1.8, margin: 0 }}>
-            لا نطلب من المركز إلغاء ما لديه فجأة، بل نقترح مسار شراكة استراتيجي آمن يبدأ بإثبات الجدارة:
-          </p>
 
+          {/* Sliders */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 30, marginBottom: 30 }}>
+            
+            <div style={{ background: '#f8fafc', padding: '24px', borderRadius: 20, border: '1px solid #e2e8f0' }}>
+              <label style={{ fontSize: '0.9rem', color: '#0f172a', fontWeight: 800, display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+                <span>حجم الطلبات والرحلات اليومية في الأردن:</span>
+                <span style={{ color: '#0071e3', fontSize: '1.15rem', fontWeight: 900 }}>{dailyTrips.toLocaleString()} طلب/يوم</span>
+              </label>
+              <input 
+                type="range" 
+                min={100000} 
+                max={350000} 
+                step={10000}
+                value={dailyTrips}
+                onChange={e => setDailyTrips(Number(e.target.value))}
+                style={{ width: '100%', accentColor: '#0071e3', cursor: 'pointer', height: 8 }}
+              />
+              <div style={{ fontSize: '0.78rem', color: '#64748b', marginTop: 8 }}>
+                (Careem, Uber, Talabat, Jeeny, Delivery One, Aramex, إلخ)
+              </div>
+            </div>
+
+            <div style={{ background: '#f0fdf4', padding: '24px', borderRadius: 20, border: '1px solid #bbf7d0' }}>
+              <label style={{ fontSize: '0.9rem', color: '#0f172a', fontWeight: 800, display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+                <span>حصة تطبيق النقل الوطني Siro من السوق:</span>
+                <span style={{ color: '#059669', fontSize: '1.15rem', fontWeight: 900 }}>{marketShare}% ({siroDailyRides.toLocaleString()} رحلة/يوم)</span>
+              </label>
+              <input 
+                type="range" 
+                min={5} 
+                max={40} 
+                step={5}
+                value={marketShare}
+                onChange={e => setMarketShare(Number(e.target.value))}
+                style={{ width: '100%', accentColor: '#059669', cursor: 'pointer', height: 8 }}
+              />
+              <div style={{ fontSize: '0.78rem', color: '#64748b', marginTop: 8 }}>
+                (بدعم المؤسسات العسكرية والحكومية وبعمولة عادلة 12% فقط)
+              </div>
+            </div>
+
+          </div>
+
+          {/* 7 API Calls Tooltip / Breakdown Accordion */}
+          <div style={{ marginBottom: 26, background: '#f8fafc', padding: '14px 20px', borderRadius: 14, border: '1px solid #e2e8f0' }}>
+            <div 
+              onClick={() => setShowApiBreakdown(!showApiBreakdown)} 
+              style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#0071e3', fontWeight: 700, fontSize: '0.86rem' }}>
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <Info size={16} /> من أين جاءت حسبة الـ 7 طلبات API لكل رحلة/طلب توصيل؟ (اضغط للتفاصيل)
+              </span>
+              <span>{showApiBreakdown ? '▲ إخفاء' : '▼ إظهار'}</span>
+            </div>
+            {showApiBreakdown && (
+              <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid #e2e8f0', fontSize: '0.82rem', color: '#64748b', lineHeight: 1.7 }}>
+                <strong>تفصيل الـ 7 طلبات لكل رحلة في تطبيقات النقل والتوصيل:</strong>
+                <ol style={{ margin: '6px 0 0 0', paddingRight: 20 }}>
+                  <li><strong>فتح الخريطة (Map Load):</strong> تحميل البلاطات الأساسية على شاشة العميل.</li>
+                  <li><strong>تحديد موقع الانطلاق (Pickup Geocoding):</strong> تحويل GPS إلى اسم شارع/حي.</li>
+                  <li><strong>البحث عن الوجهة (Places Autocomplete):</strong> اقتراح العناوين عند كتابة الوجهة.</li>
+                  <li><strong>حساب المسار الأولي والتسعير (Routing & Directions):</strong> رسم الخط الأزرق وتقدير المسافة.</li>
+                  <li><strong>مطابقة السائق الأقرب (Distance Matrix API):</strong> فحص أقرب 5 كباتن للموقع.</li>
+                  <li><strong>الملاحة الحية للسائق (Turn-by-turn Navigation):</strong> توجيه السائق نحو العميل والوجهة.</li>
+                  <li><strong>تحديث موقع السيارة اللحظي (Live Tracking):</strong> إرسال نبضات موقع السيارة لشاشة الراكب.</li>
+                </ol>
+              </div>
+            )}
+          </div>
+
+          {/* Dual Engine Cards */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 24, marginBottom: 30 }}>
+            
+            <div style={{ background: '#f8fafc', padding: '26px', borderRadius: 20, border: '1px solid #e2e8f0' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#0071e3', fontWeight: 800, fontSize: '1.05rem', marginBottom: 12 }}>
+                <Server size={22} /> 1. عوائد الخريطة الوطنية الإلزامية (B2B SaaS)
+              </div>
+              <div style={{ fontSize: '0.88rem', color: '#475569', lineHeight: 1.85 }}>
+                <div>• طلبات الـ API شهرياً: <strong>{monthlyApiCalls.toLocaleString()} طلب</strong> (7 طلبات لكل رحلة)</div>
+                <div>• التكلفة الحالية مع Google Maps: <strong style={{ color: '#dc2626' }}>${Math.round(googleMonthlyCost).toLocaleString()} شهرياً</strong></div>
+                <div>• تسعيرنا العادل: <strong>$1.25 لكل 1000 طلب</strong> (توفير 75% على الشركات)</div>
+                <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid #cbd5e1', fontSize: '1.2rem', fontWeight: 900, color: '#0071e3' }}>
+                  الدخل السنوي للخرائط: {ourMapAnnualJod.toLocaleString()} د.أ (${Math.round(ourMapAnnualJod / 0.709).toLocaleString()})
+                </div>
+              </div>
+            </div>
+
+            <div style={{ background: '#f0fdf4', padding: '26px', borderRadius: 20, border: '1px solid #bbf7d0' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#059669', fontWeight: 800, fontSize: '1.05rem', marginBottom: 12 }}>
+                <Car size={22} /> 2. عوائد تطبيق النقل الوطني (Siro Platform)
+              </div>
+              <div style={{ fontSize: '0.88rem', color: '#166534', lineHeight: 1.85 }}>
+                <div>• عدد الرحلات شهرياً: <strong>{siroMonthlyRides.toLocaleString()} رحلة</strong></div>
+                <div>• متوسط الأجرة: <strong>2.50 دينار أردني</strong></div>
+                <div>• عمولة التطبيق العادلة (12%): <strong>0.30 دينار (30 قرشاً)</strong> للرحلة</div>
+                <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid #86efac', fontSize: '1.2rem', fontWeight: 900, color: '#059669' }}>
+                  الدخل السنوي لتطبيق النقل: {siroAnnualJod.toLocaleString()} د.أ (${Math.round(siroAnnualJod / 0.709).toLocaleString()})
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          {/* Grand Banner */}
           <div style={{
+            padding: '30px 36px',
+            borderRadius: 22,
+            background: 'linear-gradient(135deg, #0059b5 0%, #0071e3 50%, #4f46e5 100%)',
+            color: '#ffffff',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: 20,
+            boxShadow: '0 12px 36px rgba(0, 113, 227, 0.3)'
+          }}>
+            <div>
+              <div style={{ fontSize: '0.92rem', color: '#e0e7ff', fontWeight: 600 }}>إجمالي الإيرادات السنوية المشتركة (Gross ARR):</div>
+              <div style={{ fontSize: '2.2rem', fontWeight: 900, color: '#ffffff' }}>
+                {totalAnnualJod.toLocaleString()} دينار أردني <span style={{ fontSize: '1.1rem', color: '#cbd5e1' }}>(${totalAnnualUsd.toLocaleString()})</span>
+              </div>
+            </div>
+            <div style={{ textAlign: 'left' }}>
+              <div style={{ fontSize: '0.92rem', color: '#86efac', fontWeight: 800 }}>صافي الأرباح السنوية الصافية (Net Profit ~85%):</div>
+              <div style={{ fontSize: '2.4rem', fontWeight: 900, color: '#86efac' }}>
+                ~{netProfitJod.toLocaleString()} د.أ / سنوياً
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* CHAPTER 7: PARTNERSHIP ROADMAP & ACTION ITEMS TO ARMY COMMANDER */}
+        <section id="ch7-escalation-roadmap" className="story-card" style={{ padding: '48px 40px' }}>
+          <div style={{ textAlign: 'center', maxWidth: 880, margin: '0 auto 36px auto' }}>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#eff6ff', color: '#0071e3', border: '1px solid #bfdbfe', padding: '5px 16px', borderRadius: 999, fontSize: '0.85rem', fontWeight: 800, marginBottom: 12 }}>
+              <Award size={15} /> الفصل السابع: خطة التحرك والقرارات المطلوبة للوصول لقائد الجيش
+            </div>
+            <h3 style={{ fontSize: '2.2rem', fontWeight: 900, color: '#0f172a', margin: 0 }}>
+              خريطة التحرك التنفيذية المشتركة مع المركز الجغرافي الملكي 🇯🇴
+            </h3>
+          </div>
+
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 20, marginBottom: 36 }}>
+            
+            <div className="story-card" style={{ padding: '26px', borderTop: '4px solid #0071e3' }}>
+              <div style={{ fontSize: '1.4rem', fontWeight: 900, color: '#0071e3', marginBottom: 8 }}>المرحلة 1: تجربة 30 يوماً (POC)</div>
+              <div style={{ fontSize: '0.88rem', color: '#475569', lineHeight: 1.8 }}>
+                تثبيت المنظومة داخل خوادم المركز الجغرافي الملكي بدون التزام مالي، وتسمية فريق فني من مهندسيهم لاختبار السرعة والرماية التكتيكية والتشغيل المعزول.
+              </div>
+            </div>
+
+            <div className="story-card" style={{ padding: '26px', borderTop: '4px solid #4f46e5' }}>
+              <div style={{ fontSize: '1.4rem', fontWeight: 900, color: '#4f46e5', marginBottom: 8 }}>المرحلة 2: المذكرة الاستراتيجية المشتركة</div>
+              <div style={{ fontSize: '0.88rem', color: '#475569', lineHeight: 1.8 }}>
+                صياغة مذكرة تنفيذية مشتركة بتوقيع عطوفة مدير المركز الجغرافي ترفع إلى عطوفة رئيس هيئة الأركان المشتركة (قائد الجيش) توضح الوفورات والسيادة.
+              </div>
+            </div>
+
+            <div className="story-card" style={{ padding: '26px', borderTop: '4px solid #059669' }}>
+              <div style={{ fontSize: '1.4rem', fontWeight: 900, color: '#059669', marginBottom: 8 }}>المرحلة 3: القرار والتبني السيادي</div>
+              <div style={{ fontSize: '0.88rem', color: '#475569', lineHeight: 1.8 }}>
+                صدور التوجيهات من القيادة العامة ومجلس الوزراء باعتماد الخريطة الوطنية كبنية تحتية إلزامية لكافة تطبيقات النقل والتوصيل المرخصة في المملكة.
+              </div>
+            </div>
+
+          </div>
+
+          {/* Master Blue CTA Banner */}
+          <div style={{
+            padding: '36px',
+            borderRadius: 24,
+            background: 'linear-gradient(135deg, #0059b5 0%, #0071e3 50%, #4f46e5 100%)',
+            color: '#ffffff',
+            textAlign: 'center',
             display: 'flex',
             flexDirection: 'column',
-            gap: 16,
-            marginTop: 24
+            alignItems: 'center',
+            gap: 18,
+            boxShadow: '0 12px 36px rgba(0, 113, 227, 0.35)'
           }}>
-            {[
-              {
-                phase: 'المرحلة الأولى: إثبات المفهوم (POC) لمدة 30 يوماً',
-                duration: 'الشهر الأول',
-                desc: 'تنصيب نسخة سريعة داخل خوادم المركز الجغرافي لعرض خرائط المملكة وبلاطات المتجهات ومقارنة سرعتها وأدائها مع خوادم ArcGIS الحالية دون أي التزام مالي.'
-              },
-              {
-                phase: 'المرحلة الثانية: ربط أساطيل التتبع وتفعيل التحديث التلقائي',
-                duration: 'الشهر الثاني - الثالث',
-                desc: 'ربط بيانات تتبع آليات حكومية أو عسكرية لبدء اكتشاف الطرق الجديدة تلقائياً وتزويد مهندسي المركز بلوحة مراجعة واعتماد الشوارع.'
-              },
-              {
-                phase: 'المرحلة الثالثة: تعميم الأدوات التكتيكية في غرف العمليات والميدان',
-                duration: 'الشهر الرابع فصاعداً',
-                desc: 'تخصيص محرك تبادل الرؤية (LOS)، دراسة الأرض (25×25 DEM)، كشف الجروف، نطاقات زمن الاستجابة، والخرائط غير المتصلة (Offline) لتثبيتها على الأجهزة اللوحية الميدانية في القوات المسلحة.'
-              }
-            ].map((item, idx) => (
-              <div key={idx} className="apple-card" style={{
-                padding: '22px 26px',
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: 18
-              }}>
-                <div style={{
-                  width: 40,
-                  height: 40,
-                  borderRadius: 12,
-                  background: 'linear-gradient(135deg, #4f46e5, #0ea5e9)',
+            <div style={{ fontSize: '1.5rem', fontWeight: 900, color: '#ffffff' }}>
+              المنظومة جاهزة للاستعراض الحي والتشغيل الميداني الفوري!
+            </div>
+            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
+              <button 
+                onClick={() => navigateToView('#tactical')}
+                style={{
+                  background: '#ffffff',
+                  color: '#0071e3',
+                  border: 'none',
+                  padding: '13px 32px',
+                  borderRadius: 14,
+                  fontSize: '0.98rem',
+                  fontWeight: 800,
                   display: 'flex',
                   alignItems: 'center',
-                  justifyContent: 'center',
-                  color: '#ffffff',
-                  fontWeight: 900,
-                  fontSize: '1.05rem',
-                  flexShrink: 0,
-                  boxShadow: '0 2px 10px rgba(79, 70, 229, 0.3)'
+                  gap: 8,
+                  boxShadow: '0 4px 16px rgba(0, 0, 0, 0.15)',
+                  cursor: 'pointer'
                 }}>
-                  {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: '1.05rem', fontWeight: 800, color: '#ffffff' }}>{item.phase}</h4>
-                    <span style={{ fontSize: '0.82rem', color: '#818cf8', background: 'rgba(99, 102, 241, 0.15)', border: '1px solid rgba(99, 102, 241, 0.3)', padding: '4px 12px', borderRadius: 999, fontWeight: 700 }}>
-                      {item.duration}
-                    </span>
-                  </div>
-                  <p style={{ margin: '8px 0 0 0', fontSize: '0.90rem', color: '#94a3b8', lineHeight: 1.75 }}>
-                    {item.desc}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-
-        {/* SECTION 7: FUTURE VISION & TACTICAL INNOVATIONS 2026+ */}
-        <section id="future-vision" className="apple-card" style={{ padding: '36px 32px' }}>
-          <div style={{ marginBottom: 26 }}>
-            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(168, 85, 247, 0.15)', border: '1px solid rgba(168, 85, 247, 0.35)', padding: '4px 14px', borderRadius: 999, color: '#c084fc', fontSize: '0.78rem', fontWeight: 800, marginBottom: 12 }}>
-              <Sparkles size={14} /> خارطة الابتكار والتطوير التكتيكي 2026 - 2027
+                <Crosshair size={18} /> تجربة المنظومة التكتيكية العسكرية الآن
+              </button>
+              <button 
+                onClick={() => navigateToView('#map')}
+                style={{
+                  background: 'rgba(255, 255, 255, 0.15)',
+                  border: '1px solid rgba(255, 255, 255, 0.3)',
+                  color: '#ffffff',
+                  padding: '13px 26px',
+                  borderRadius: 14,
+                  fontSize: '0.98rem',
+                  fontWeight: 700,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                  cursor: 'pointer'
+                }}>
+                <MapIcon size={18} color="#ffffff" /> الخريطة الحية وطبقة الطقس
+              </button>
             </div>
-            <h3 style={{ fontSize: '1.5rem', fontWeight: 900, color: '#ffffff', margin: 0 }}>
-              التطلعات والآفاق المستقبلية: نحو جيل جديد من منظومات القيادة والسيطرة والذكاء الاصطناعي
-            </h3>
-            <p style={{ color: '#94a3b8', fontSize: '0.96rem', margin: '8px 0 0 0', lineHeight: 1.7 }}>
-              خطة التوسع لدمج أحدث التقنيات الدفاعية والرقمية داخل منصة انطلاق السيادية:
-            </p>
           </div>
 
-          {/* 5 Future Pillar Cards */}
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
-            gap: 20
-          }}>
-            
-            {/* Future 1: Tactical UAV Corridors */}
-            <div className="apple-card" style={{ padding: 24, border: '1px solid rgba(56, 189, 248, 0.25)' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(56, 189, 248, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#38bdf8' }}>
-                  <Plane size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    1. ممرات الطيران المنخفض للمسيرات (Tactical UAV Routing)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#38bdf8' }}>توجيه آلي متوافق مع تضاريس الأرض (Terrain Hugging)</span>
-                </div>
-              </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>تخطيط ممرات طيران منخفض تتبع بطون الأودية للتخفي من رادارات العدو.</li>
-                <li>كشف خطوط الضغط العالي وهوائيات الاتصالات وعوائق التضاريس ثلاثية الأبعاد.</li>
-                <li>تحديد مناطق الهبوط الاضطراري الآمن ونقاط إعادة الاتصال بالتحكم.</li>
-              </ul>
-            </div>
-
-            {/* Future 2: AI Predictive Threat & COA */}
-            <div className="apple-card" style={{ padding: 24, border: '1px solid rgba(168, 85, 247, 0.25)' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(168, 85, 247, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#c084fc' }}>
-                  <Cpu size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    2. التحليل التنبئي وتقدير نوايا العدو بالذكاء الاصطناعي (AI Threat COA)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#c084fc' }}>Course of Action Simulation</span>
-                </div>
-              </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>تحليل المحاور الإجبارية لتقدم أرتال العدو بناءً على وعورة الميول والجروف.</li>
-                <li>اقتراح أفضل مواقع لنصب الكمائن الدفاعية وحقول الألغام وسد الثغرات آلياً.</li>
-                <li>محاكاة سيناريوهات المناورة التكتيكية وتقدير احتمالات النجاح الميداني.</li>
-              </ul>
-            </div>
-
-            {/* Future 3: Tactical C4ISR Datalink */}
-            <div className="apple-card" style={{ padding: 24, border: '1px solid rgba(34, 197, 94, 0.25)' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(34, 197, 94, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80' }}>
-                  <Radio size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    3. الربط اللحظي مع شبكات اللاسلكي العسكري (C4ISR Datalink)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#4ade80' }}>تكامل مباشر مع أجهزة Harris / Bowman / Rohde</span>
-                </div>
-              </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>استقبال وتحديث مواقع القوات والآليات عبر حزم البيانات التكتيكية (Tactical IP).</li>
-                <li>إرسال أوامر العمليات والإحداثيات للآليات المشتبكة بضغطة زر.</li>
-                <li>استمرارية البث في البيئات المعقدة التي تتعرض للتشويش الإلكتروني (EW).</li>
-              </ul>
-            </div>
-
-            {/* Future 4: Offline Air-Gapped Rugged Tablets */}
-            <div className="apple-card" style={{ padding: 24, border: '1px solid rgba(245, 158, 11, 0.25)' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(245, 158, 11, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#facc15' }}>
-                  <ShieldCheck size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    4. الخرائط التكتيكية غير المتصلة (Offline Tactical GIS)
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#facc15' }}>تشغيل كامل بدون إنترنت على الأجهزة اللوحية الميدانية</span>
-                </div>
-              </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>تخزين خريطة المملكة ونماذج الارتفاع الرقمية (DEM) داخل ذاكرة الجهاز المشفرة.</li>
-                <li>تنفيذ كافة حسابات خط النظر وتبادل الرؤية والميول والمدفعية محلياً 100%.</li>
-                <li>تأمين عسكري ضد الاختراق ومسح ذاتي للبيانات عند الطوارئ (Emergency Wipe).</li>
-              </ul>
-            </div>
-
-            {/* Future 5: Dynamic Weather & Ballistics Impact */}
-            <div className="apple-card" style={{ padding: 24, border: '1px solid rgba(99, 102, 241, 0.25)' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
-                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(99, 102, 241, 0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#818cf8' }}>
-                  <Satellite size={24} />
-                </div>
-                <div>
-                  <h4 style={{ margin: 0, fontSize: '1.05rem', fontWeight: 900, color: '#ffffff' }}>
-                    5. تأثيرات الطقس الميداني وسرعة الرياح على الرماية
-                  </h4>
-                  <span style={{ fontSize: '0.76rem', color: '#818cf8' }}>Dynamic Tactical Weather Integration</span>
-                </div>
-              </div>
-              <ul style={{ paddingRight: 18, color: '#cbd5e1', fontSize: '0.88rem', lineHeight: 1.85, margin: 0 }}>
-                <li>تصحيح مسار المقذوفات بناءً على طبقات الهواء وسرعة واتجاه الرياح اللحظية.</li>
-                <li>تقدير تأثير هطول الأمطار على وعورة التربة وإعاقة حركة الآليات المدولبة.</li>
-                <li>تنبيهات الغبار والعواصف الرملية وتأثيرها على مدى الرؤية المباشرة وحساسات الرصد.</li>
-              </ul>
-            </div>
-
-          </div>
-        </section>
-
-        {/* Live Demo Launcher Banner (Apple Action Footer) */}
-        <section style={{
-          background: 'linear-gradient(135deg, rgba(17, 27, 43, 0.92) 0%, rgba(13, 21, 35, 0.98) 100%)',
-          backdropFilter: 'blur(20px)',
-          border: '1px solid rgba(255, 255, 255, 0.1)',
-          borderRadius: 24,
-          padding: '32px 36px',
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-          gap: 20,
-          boxShadow: '0 16px 40px rgba(0, 0, 0, 0.6)'
-        }}>
-          <div>
-            <h3 style={{ margin: '0 0 6px 0', fontSize: '1.35rem', fontWeight: 900, color: '#ffffff' }}>
-              جاهزون لاستعراض المنظومة التكتيكية عملياً أمام القيادة
-            </h3>
-            <p style={{ margin: 0, color: '#94a3b8', fontSize: '0.94rem' }}>
-              الخريطة التكتيكية الحية، دراسة الأرض (25×25 DEM)، تبادل الرؤية، ونطاقات زمن الاستجابة الهجينة تعمل بكفاءة تامة.
-            </p>
-          </div>
-          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-            <a href="#tactical" style={{
-              textDecoration: 'none',
-              background: 'linear-gradient(135deg, #4f46e5, #0ea5e9)',
-              color: '#ffffff',
-              padding: '12px 24px',
-              borderRadius: 14,
-              fontSize: '0.94rem',
-              fontWeight: 800,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-              boxShadow: '0 4px 18px rgba(79, 70, 229, 0.45)'
-            }}>
-              تشغيل المنظومة التكتيكية <Crosshair size={18} />
-            </a>
-            <a href="#compare" style={{
-              textDecoration: 'none',
-              background: 'rgba(255, 255, 255, 0.06)',
-              border: '1px solid rgba(255, 255, 255, 0.12)',
-              color: '#f8fafc',
-              padding: '11px 20px',
-              borderRadius: 14,
-              fontSize: '0.94rem',
-              fontWeight: 700,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6
-            }}>
-              المقارنة المرجعية <ExternalLink size={16} />
-            </a>
-          </div>
         </section>
 
       </main>
+
     </div>
   );
 };